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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• 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

Links

• Solution URL: https://github.com/jcifu/results-summary-component
• Live Site URL: https://fend-sum-res-component.netlify.app

My process

Built with

• HTML5
• CSS3 : Use of Flexbox and media queries for ensure responsive behavior

What I learned

I got a better understanding of basic CSS commands and Flexbox. Media query is a easy way to get responsive changes on web components.

Continued development

The component requires to improve its responsive behavior for widths between 375 and 425 pixels. And it must include a hover button because in this version this feature wasn't completed. So, on future versions the component will add the hover and a basic Javascript integration.

Author

• Website - https://github.com/jcifu/results
• Frontend Mentor - https://www.frontendmentor.io/profile/jcifu