Submitted 10 months ago

Notifications page challenge

User9511• 370

@User9511

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Notifications page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

1.Mark All as Read Button: Users can click the "Mark all as read" button to mark all unread notifications as read. The notification count is updated accordingly.

2.Interactive Notifications: Users can click on individual notifications to mark them as read. The notification count is updated dynamically.

3.Responsive Design: The page is designed to be responsive, providing a seamless experience on screens of various sizes.

HTML: Structured the content of the web page.
CSS: Styled the components and implemented responsive design.
JavaScript: Added interactivity to the notifications, allowing users to mark them as read.

Community feedback

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord