The challenge is to build out notifications page and get it looking as close to the design as possible. For this purpose you can use any tools you like to help you complete the challenge.
Project assumptions:
- "Mark all as read" button toggle the visual state of the unread notifications and set the number of unread messages to zero
- Optimal layout for the interface depending on their device's screen size (375px/1440px)
- Distinguishing between "unread" and "read" notifications
- Bold tags changing color on hover
- Hover and focus states for all interactive elements on the page
Additional assumptions:
- Dynamic page title with the number of unread notifications
- Mark a notification on click as read/unread and update the visual state of the unread notifications
This is a solution to the Notifications page on Frontend Mentor.
- Semantic HTML5 markup
- CSS custom properties
- Grid/Flex
- SASS/SCSS
- React
- JavaScript
- BEM naming convention
- Mobile-first workflow
- Frontend Mentor - @MaciejNarejko
Thanks to the FrontendMentor.io community for a code review. Together we write better code.