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
  • My process
  • Built with
  • Continued development
  • Useful resources
• Author

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

My process

Built with

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

What I learned

I have learned how to use flebox and properly align elements.It was a bit challenging at first to have a smooth transition fo elemnt carrying "Summary" with the element "Your results". I mange to have that sorted out after a few trys.

To see how you can add code snippets, see below:

Continued development

I would love to continue learnign css propertie, and get myselft familiar with flexbox. Looking forwward to continued learning burve, and encoporate projects that include javascript. I m still learning javascript on other online platfomrs. It is an incredible journey, and I'm loving every single moment of confusion, then finally getting it figured-out.

Useful resources

• W3Schools - This helped me have a solid understanding of justify content css property is coded.
• Example resource 2 - This is an website which helped me finally understand How to use the overflow css property. I'd recommend it to anyone still learning this concept to give it a try, if at all learning css in general