Frontend Mentor - Results summary component solution

This is a solution to the Results summary component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

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
• Bonus: Use the local JSON data to dynamically populate the content

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/results-summary-component-solution-19_RH-WeP0
• Live Site URL: https://heygauravshukla.github.io/results-summary-component

My process

Built with

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

What I learned

Using data attributes in HTML as modifiers:

<div class="grid-flow" data-spacing="large"></div>

Using HSL colors in CSS to be able to control their opacity:

:root {
  --clr-neutral-hsl-700: 224, 30%, 27%;
}

.summary-score {
  color: hsl(var(--clr-neutral-hsl-700), 0.6);
}

Steps to approach design-to-code implementation:

• Writing HTML markup

  • Observe the layout from desktop designs first (as they usually have more complexity than the mobile ones).
  • Observe the elements with similar styling to create reusable classes.

• Writing CSS styling

  • Add any @font-face rules if using self-hosted fonts.
  • Create custom properties in the :root
  • Write generic styles.
  • Write common styles (utility classes).
  • Write layout-specific CSS.

Continued development

In the future updates, I will try to bring the implementation closer to the design and ways to reduce code duplication.

Useful resources

• Kevin's YouTube video - This helped me to understand how to convert design to code. I really liked this pattern and will use it going forward.
• Squoosh - This is a great image optimizer that helped me reduce the file size of the screenshot and convert it into .webp format.

Author

• Website - Gaurav Shukla
• Frontend Mentor - @heygauravshukla
• Twitter - @heygauravshukla

Acknowledgments

I learned a lot from Kevin Powell. Huge thanks to him. Also the Frontend Mentor team for providing such a rewarding challenge.