Results Summary Component - Frontend Mentor

Check out the Live Site here.

Just completed the Results Results summary component challenge from Frontend Mentor 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
• 🖱️Live Site URL

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 - @CodePapa360
• LinkedIn - @CodePapa360
• Frontend Mentor - @CodePapa360
• Github: @CodePapa360

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.