Frontend Mentor - Stats preview card component solution

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

Table of content

• Frontend Mentor - Stats preview card component solution
  • Table of content
  • Overview
    • The challenge
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
  • Author
  • Acknowledgments

Overview

This is my second completed challenge for Frontend Mentor. I do these challenges as a way to solidify and enhance my front-end development skills, and as an opportunity to learn more about React, CSS, and accessibility best-practices.

For these challenges I am given JPGs of the final product, fonts, font sizes, and colors. I am not given exact dimensions, so I have to guess!

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size

Links

• Solution URL: Solution
• Live Site URL: Live demo

My process

• I have learned the value of a little bit of planning before diving into the code, so I planned out how I would initially structure my components before getting started. This changed slightly towards the end, but I think that's fine.
• I always put colored borders around my components to help visualize the box model.
• I started with desktop styles again, on the next challenge I will start with mobile styles
• I ran into a CSS snag and got some excellent advice from the Frontend Mentor community - toward the end I restrucred my components slightly based on the suggestions I received.

Built with

• React
• SCSS
• Flexbox

What I learned

• Initially I structured the stats as a repeated component with different props. Based on a suggestion I received, I ended up changing the stats to an unordered list instead of . It's still essentially the same structure, but better semantics.
• The stat numbers were originally h2's, but I was told that h2's shouldn't be numbers, so I changed them to styled p tags.

Continued development

Since this is only my second Frontend Mentor project, so as I do more of these I want to keep reinforcing fundamentals as I learn more about best practices. I will continue to use React and SCSS for a while, but I'll definitely start with mobile-first styling on my next challenge.

Author

• Website - lenniewritescode
• Frontend Mentor - @lenniecottrell
• Twitter - @lenniecottrell

Acknowledgments

Thanks to Grace Snow and Himadri Vyas in the FM Slack community who helped me out with this one.