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

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

This was my first project and it was quite challenging, but I learnt a lot.

• I'm not a PRO Member, so I've had to guess a lot of sizes with not so little trouble 😅. I used Photoshop and the firefox developer tool to aid me in all the process, expecially for typography;
• I found out that when resizing window with firefox developer tool, instead of int number for the content it uses float. This gave me a lot of trouble with the media queries, because at first I wanted to set the max width for the mobile at 375px and the min width for the desktop at 376px. The problem arose because when selecting a viewport of 375px the browser actually calculated the content at 375.2px (which makes no sense to me, I mean portions of 1 px don't exist), so in the range between 375 and 376 the media queries didn't work, because it was outside of range. After serching on google I found this link that explained well my problem. It seems this is "normal" firefox behavior and it's not a "real" problem because media queries usally target a broad range of screen size and there's little to no device that actually has a width so near to the breakpoints. In the end, I changed the breakpoint to a wider one because I thougth that the one column layout would work well on tablet too. The problem is still there, but I don't know what's the best solution.
• I learnt that when using the picture element, if you don't apply the display: block property to the img element, the picture element actually adds height to the img itself;
• I also learnt how to apply a color overlay on an image;
• I learnt how to vertical align div in the whole page using the vh unit;

Continued development

• I should practice more using flexbox and should definitely learn CSS grids.

Useful resources

• Convert typographic property from PS to CSS - This helped me with the typography. I don't this I would have made it this well without it. I'll definitely use it again, if like this time I've only a static image of the design.
• PX to EM conversion - It was fundamental.
• Autoprefixer - I wouldn't know where to begin whitout it 😄.

Author

• Frontend Mentor - @cla91