Frontend Mentor - Results summary component solution

This is a solution to the Results summary component challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Netlify-deploy

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

Structure the HTML form from the desktop and start with the mobile first approach.

Continued development

I really want to understand how to make the best CSS structure and naming in combination with the HTML structuring and class naming that will enable me to extend it to large project. From what i see we can make small projects with simple CSS and it workds fine but as the project get bigger and bigger managing css will become issue.

Useful resources

• CSS Scan - This helped me for setting up box shadow with just a click.
• Josh Comeau - The perfect place for CSS Rest.

Author

• LinkedIn - Natnael Kagnaw
• Frontend Mentor - @@NatnaelSisay

Acknowledgments

I want to thank Frontend Mentor for this question.