This is a solution to the Notifications page challenge on Frontend Mentor.
This is a collaboration, open-source project. Main objectives are practice github and git workflows as well as apply the concepts and steps described in article Thinking in React.
Please read the resources below.
- First fork this github repo and create a clone to work on it yourself.
- Then pull the repo to your local machine and run npm install && npm start in your terminal.
- Create a new branch to work on a new task or a feature. Make your changes there.
- Once finished, push the code to your remote repo.
- Create a Pull Request from your remote branch to master branch of the repo which you forked initially.
- Once your pull request is merged with the master branch, sync your repo to be up to date.
See Workflow.md
Users should be able to:
- Distinguish between "unread" and "read" notifications
- Select "Mark all as read" to toggle the visual state of the unread notifications and set the number of unread messages to zero
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- React - JS library
- Github and Git