Frontend Mentor | Stats preview card component coding challenge solution

Solution retrospective

Hello Coders,

This is already my third design and this one was challenging but I had a lot of fun coding it.

What is the best way to approach the design? Is the best way mobile first or desktop first? I know that people now a days use their mobiles phones the most, so i would say, mobile first. But i find it harder to begin with mobile first.

In my css style.css at the bottom of al my code i have the code for de screen-size of 375px. Is that good practice to put it beneath my code or is it better to make a new file, name it screen-size-small.css and link it in the head of the html document like <link rel="stylesheet href="screen-size-small.css">?

I am also struggling what to use to make a layout, flexbox or grid. First i started with flexbox but i ran into some problems that the left and right side of the card where not excatly the same size. And also when resizing with flexbox the image got squeezed instead of scaling down. Then i tried css grid that worked alot easier. When do you use flexbox or grid or is that just your own preference?

I would like to get some feedback. :)

Thanks in advance,

Danny

Community feedback

Nikolas Escobal• 230

@nikoescobal

Posted almost 2 years ago

Hello Danny! 👋

Congratulations on finishing your challenge! 🎉

One lesson that really stuck with me, which I got from Kevin Powell, is that the web is responsive by default, meaning that any time you build a project, as long as you don't mess with negative margins or absolute positioning, your content is by default, responsive. That said, it makes so much more sense to go with a mobile-first approach, then meaning all your CSS classes should apply to the mobile viewport first, after which you then add media queries to manage the other screen sizes. Doing it this way also makes it easier to scale and adjust in the future, even if you will add changes to your layout.

As for using flexbox vs grid, it's best to practice both. For anything that has to do with tables, you should use the grid approach, whereas flex can be used to manage layouts that are simpler. Given that you ran into the difficulty of trying to make the columns the same size, the only solution is to use grid-template-columns with the fractional (fr) value, which guarantees they will always be the same size. An example of this looks like this grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));; Try giving it a shot -- the best way to learn is by practicing and applying new things little by little.

Here's some other feedback on this solution:

It seems like the filtered image is a bit too dark. You could either adjust the opacity or instead use background-blend-mode or mix-blend-mode with the property set to multiply.
For your text below the numbers, you're not using the correct font, font size, and font weight

I hope this is helpful and all the best with your coding journey!

Marked as helpful

dvbenthem• 110

@dvbenthem

Posted almost 2 years ago

Hello @nikoescobal,

Thank you for your feedback. Ahhh yes, Kevin the "CSS King" I always watch his video's they have a lot of good information.

Ok mobile first it is. It is going to be a difficult one. But I see yet another challenge:)

That grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); looks like abracadabra, hahaha but I am going to figure it out.

I will correct the issues on the design like mix-blend-mode and font issues.

Thanks again for the feedback. That helps me a lot. Danny

Stats preview card component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community