<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1716947678409/f753259d-80c3-4080-9fdf-a85b9ffa0cde.jpeg" alt />
Bienvenido,
Nuestra misión será crear una página de notificaciones, usando HTML, CSS y JavaScript; y lograr que se parezca lo más posible al diseño.
Los usuarios deberían poder:
<ol>
<li>Ver un diseño óptimo en pantallas grandes(<code>1200px</code>) y pequeñas(<code>375px</code>).
</li>
<li>Ver menú hamburguesa en pantallas pequeñas.
</li>
<li>Visualizar notificaciones "no leídas" y "leídas"
</li>
<li>Seleccionar "Marcar todo como leído" para cambiar el estado visual de las notificaciones no leídas y establecer el número de mensajes no leídos en cero.
</li>
</ol>
Consideraciones:
<ol>
<li>Agregar icono favicon al proyecto.
</li>
<li>Renombrar URL fácil de recordar (ej. notifications-page).
</li>
<li>Agregar título al proyecto (ej. Notifications Page - Frontend Club).
</li>
<li>Bonus: Documenta el proyecto con un archivo <a target="_blank" href="http://readme.md">readme.md</a>
</li>
</ol>
<h2 id="heading-recursos">Recursos</h2>
Lista de recursos para ayudarte a completar el reto.
<ol>
<li><a target="_blank" href="https://github.com/frontend-club/100daysofprojects">Clonar proyecto inicial</a>
</li>
<li><a target="_blank" href="https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC">Visualizar diseño original</a>
</li>
</ol>
<h3 id="heading-referencias">Referencias</h3>
Nuestro agradecimiento a las fuentes que hacen posible los recursos y nos inspiran a seguir compartiendo conocimiento.
<ul>
<li><a target="_blank" href="https://www.w3schools.com/">W3Schools</a>
</li>
<li><a target="_blank" href="https://www.w3schools.com/">UI Desi</a><a target="_blank" href="https://www.uidesigndaily.com/">gn D</a><a target="_blank" href="https://www.w3schools.com/">aily</a>
</li>
<li><a target="_blank" href="https://www.w3schools.com/">F</a><a target="_blank" href="https://www.uidesigndaily.com/">rontend Me</a><a target="_blank" href="https://www.w3schools.com/">ntor</a>
</li>
</ul>
El diseño de este proyecto es propiedad de: <a target="_blank" href="https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC">Frontend Mentor</a>
<hr />
<blockquote>
"La mejor manera de aprender a programar es practicando todos los días"
</blockquote>

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1716947678409/f753259d-80c3-4080-9fdf-a85b9ffa0cde.jpeg align="left")

Bienvenido,

Nuestra misión será crear una **página de notificaciones**, usando HTML, CSS y JavaScript; y **lograr que se parezca lo más posible al diseño**.

**Los usuarios deberían poder:**

1. Ver un diseño óptimo en pantallas grandes(`1200px`) y pequeñas(`375px`).
    
2. Ver menú hamburguesa en pantallas pequeñas.
    
3. Visualizar notificaciones "no leídas" y "leídas"
    
4. Seleccionar "Marcar todo como leído" para cambiar el estado visual de las notificaciones no leídas y establecer el número de mensajes no leídos en cero.
    

**Consideraciones:**

1. Agregar icono favicon al proyecto.
    
2. Renombrar URL fácil de recordar (ej. notifications-page).
    
3. Agregar título al proyecto (ej. Notifications Page - Frontend Club).
    
4. **Bonus**: Documenta el proyecto con un archivo [readme.md](http://readme.md)
    

## Recursos

Lista de recursos para ayudarte a completar el reto.

1. [Clonar proyecto inicial](https://github.com/frontend-club/100daysofprojects)
    
2. [Visualizar diseño original](https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC)
    

### Referencias

Nuestro agradecimiento a las fuentes que hacen posible los recursos y nos inspiran a seguir compartiendo conocimiento.

* [W3Schools](https://www.w3schools.com/)
    
* [UI Desi](https://www.w3schools.com/)[gn D](https://www.uidesigndaily.com/)[aily](https://www.w3schools.com/)
    
* [F](https://www.w3schools.com/)[rontend Me](https://www.uidesigndaily.com/)[ntor](https://www.w3schools.com/)
    

El diseño de este proyecto es propiedad de: [Frontend Mentor](https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC)

---

> *"La mejor manera de aprender a programar es practicando todos los días"*

Crea una página de notificaciones con HTML, CSS y JavaScript, optimizada para diferentes pantallas y con funcionalidades interactivas.

Notifications Page - Frontend Club

PROY34: Notifications Page

"La mejor manera de aprender a programar es practicando todos los días".
