https://github.com/visualdenniss/fm-notification-component
notifications page challenge from frontendmentor.io
https://github.com/visualdenniss/fm-notification-component
Last synced: about 1 year ago
JSON representation
notifications page challenge from frontendmentor.io
- Host: GitHub
- URL: https://github.com/visualdenniss/fm-notification-component
- Owner: visualdenniss
- Created: 2023-03-04T09:44:04.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T16:18:56.000Z (over 3 years ago)
- Last Synced: 2025-02-04T14:25:50.030Z (over 1 year ago)
- Language: JavaScript
- Size: 1010 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Notifications page solution
This is a solution to the [Notifications page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC).
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](https://beta.reactjs.org/learn/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](http://www.differencebetween.net/technology/difference-between-fork-and-branch/)
- [Thinking in React](https://beta.reactjs.org/learn/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](https://reactjs.org/) - JS library
- Github and Git
### What I learned
## Author
## Acknowledgments