Frontend Mentor - Results summary component solution

This is Scott Cook's solution to the results summary component challenge on Frontend Mentor.

Links

• Solution URL: Github
• Live Site URL: Vercel app

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
  • 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

Screenshots

My process

Built with

• create-react-app
• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• TailWind - For utility classes

What I learned

Here is a list of things I learned from making this project.

• React Keep your assets in public folder ensures you can access it anywhere in the project. By giving /path_to_image it has no need for any path traversal '../../'.
• CSS Best practice for buttons is to add padding rather than height.
• CSS I'm not ashamed to admit even as a dev for 6 plus years I still needed a refresher on best practice for margin vs padding 😅.
• git Github will not count commit contributions from your machine unless git config --global user.email is set to your Github account email.
• Other Variable fonts are coollll.

Continued development

CSS Refactor

I could refactor a lot. My approach from the beginning was to utilize CSS variables / tokens and even though I knew I was going to add in tailwind. I probably should have added in tailwind first, modified the config file to fit my use cases, then added in custom tokens and classes if needed.

Useful resources

• StackOverflow - drawing a circle with flexbox - I sought out a pattern to draw a circle specifically with Flexbox.

Author

• Website - Runnin' Code
• Github - Scott Cook