Frontend Mentor - Notifications page solution

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.

HOW TO CONTRIBUTE?

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.

Useful resources

• Difference between FORK and BRANCH
• Thinking in React

Overview

Workflow and TODOs

See Workflow.md

The challenge

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

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• React - JS library
• Github and Git

What I learned

Author

Acknowledgments