Frontend Mentor - Stats preview card component solution

This is a solution to the Stats preview card component challenge on Frontend Mentor.

Table of contents

• Overview
  • Challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: See the code on GitHub
• Live Site URL: View live site

My process

Built with

• Semantic HTML5 markup
• CSS/Sass
• Flexbox
• CSS grid

What I learned

In this simple challenge, I got to get some more practice with using grid and flexbox to create responsive layouts. I also learned about accessibility and tinted overlay for background images.

Continued development

In the future, I would like to take on some more complex projects to really practice various grid layouts.

Useful resources

For this challenge, I found a couple of resources particulary useful:

• Article on dev.to: This proved to be a very useful and clean checklist for setting up Sass that I've already used in a couple of projects.
• MDN web docs: This was my main resource to learn about making an empty <div> with a background accessible.
• CSS-Tricks: This article helped me figure out the easiest way to get the tinted background image.

Author

• LinkedIn - Kristina Radosavljevic
• GitHub - KristinaRadosavljevic
• Frontend Mentor - @KristinaRadosavljevic