Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codewithalamin/results-summary-component
Completed a FrontendMentor challenge building a responsive web page with a dark mode toggle feature using HTML, CSS, and JavaScript.
https://github.com/codewithalamin/results-summary-component
codepapa360 codewithalamin css3 dark-mode frontend frontend-development frontend-mentor-challenge html javascript responsive-web-design sass web-development
Last synced: 22 days ago
JSON representation
Completed a FrontendMentor challenge building a responsive web page with a dark mode toggle feature using HTML, CSS, and JavaScript.
- Host: GitHub
- URL: https://github.com/codewithalamin/results-summary-component
- Owner: CodeWithAlamin
- Created: 2023-04-03T21:31:33.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-30T12:00:20.000Z (3 months ago)
- Last Synced: 2024-11-11T03:17:59.548Z (3 months ago)
- Topics: codepapa360, codewithalamin, css3, dark-mode, frontend, frontend-development, frontend-mentor-challenge, html, javascript, responsive-web-design, sass, web-development
- Language: HTML
- Homepage: https://result-summary-alamin.netlify.app/
- Size: 626 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Results Summary Component - Frontend Mentor
Check out the Live Site here.
Just completed the Results [Results summary component challenge from Frontend Mentor](https://www.frontendmentor.io/challenges/results-summary-component-CE_K6s0maV) using HTML, CSS, and a bit of JavaScript to add a dark mode toggle feature. This project was a great way to improve my front-end development skills and build a responsive web page with interactivity. Excited to continue using what I've learned in future projects!
### Screenshot
#### Desktop view
#### Mobile view
### The challenge
Users should be able to:
- 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
- **Bonus**: Added Dark Mode feature.
### Links
- 🖱️[Solution URL](https://www.frontendmentor.io/solutions/responsive-results-summary-component-design-with-sass-c8lqEuT6Nh)
- 🖱️[Live Site URL](https://result-summary-alamin.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- JavaScript
- Mobile-first workflow
- NPM
### What I learned
In completing this challenge, I learned the importance of organizing CSS code to ensure readability and maintainability. I used Sass to help with this. Overall, this challenge was a great opportunity to practice my front-end development skills and apply good coding practices to build a responsive web page with a dark mode toggle feature."
## Author
👤 Alamin
- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)
- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)
- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)
- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)
Feel free to contact me with any questions or feedback!
## Acknowledgments
I would like to give a huge thanks to the Frontend Mentor team for creating such an amazing challenge. It was a great opportunity for me to practice my CSS skills and learn new things.