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 Solution
  • Links
• My process
  • Built with
  • What I learned
• Author

---

Overview

The challenge

Users should be able to:

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

Screenshot Solution

Desktop	Mobile

---

Links

• Live project on GitHub

• Solution on Stats Preview Card by Guile Pereira

My process

In this project I tried to improve my coding process based on the perceptions and feedbacks I had in previous projects, so my focus was to refine my accuracy in achieving the proposed design.

Built with

• Semantic HTML5 markup;
• CSS Variables (Custom properties);
• Flexbox;
• Grid;
• Accessibility;
• Mobile First;
• Methodology BEM (Block Element Modifier);
• Atomic Design.

What I learned

In this project I was challenged when I needed to think of alternatives to adapt the layout using grid and also when I needed to treat an image using only css. For this last situation, I learned to use filters and also the mix-blend-mode property, which I really liked the results!

Author

• LinkedIn - Guile Pereira
• GitHub - Guile Pereira
• Frontend Mentor - @guilepereira