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 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 depending on their device's screen size

Screenshot

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow
• BEM

What I learned

HTML Structure & BEM

I used @gracesnow's tutorial as a reference to help me overcome some hurdles I had. I then used FigJam (I'd used Excalidraw before) to do some of the thinking and come up with the class names.

Image skills: <picture>, mix-blend-mode, object-fit

Grace's tutorial was helpful here as well, and I complemented it with MDN.

Continued development

I'd like to continue to expand my understanding of BEM & effective HTML structure. Also, I'd like to continue to get better with images and other types of media.

Useful resources

• @gracesnow's tutorial
• BEM 1o1
• object-fit reference
• <picture> reference
• mix-blend-mode reference

Author

• Website - Matias Lago Evia
• Frontend Mentor - @matiaslagoevia