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: Dynamically Populate the content with local JSON data

Screenshot

Mobile Screen

Tablet Screen

Desktop Screen

Links

• Solution URL: https://github.com/Deeokafor/results-summary-component
• Live Site URL: https://deeokafor.github.io/results-summary-component/

My process

• I was picking up on learning react for component based designs... hitting the block on how to go about that, I decided to first write the project in html5 with Tailwindcss then go on to break it into react components.

Built with

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

What I learned

• Working on this project has nmade me aware of designing performant pages for my users. The Project had one of it's requirements as being accessible to the largest group of users. I had to learn to design user-accesible features testing regularly with Lighthouse to esnsure that I do not miss the mark.

• While working on this project I also hit some snag on coding border radiuses as the design required but a little bit of googling and checking out Kevin Powell's channel on Youtube was helpful. Check out the Useful Resources Section for some resources I discovered online to help with creating interesting border radius shapes and forms.

• LOL!! I was today's years old when I learned that specific corners of a block element's border radius could be manipulated to create interesting shapes using these css rules border-top-left-radius: 10% 10% it could also take fixed and relative values.

Continued development

Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.

Note: Delete this note and the content within this section and replace with your own plans for continued development.

Useful resources

• Fancy border radius - This helped me for understand that interesting forms and shapes could be produced by manipulating the border radius of elements. I really liked this and will use it going forward.

Author

• Website - Divine Okafor-udah
• Frontend Mentor - @deeokafor
• Twitter - @deeokafor

Acknowledgments

I tip my hat to AlexKMarshall , Grace-snow & Tharun who took out the time to review my code and give me beneficial tips on 'accessibility when necessary'.