Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview Card Solution

Nabil-Y 150

@Nabil-Y

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Welcome !

Thank you for looking at my work.

I am a beginner so please tell me if you see anything I can improve on.

Nabil-Y

Community feedback

jason12119 140

@jason12119

Posted

I see two things you could improve on. First is the headline, which has much smaller font size than the preview. If you struggle with choosing proper font sizes, study how to use EM units, as they help quite a lot.

Another thing I see is that the padding on the left half of the card is kinda off (bottom is very big compared to the rest). If you want to have the last element (which here are the statistics) at the bottom, you can use absolute positioning (I don't recommend) or flex positioning (I highly recommend).

Keep coding and enjoy :)

Marked as helpful

1

Nabil-Y 150

@Nabil-Y

Posted

Hi @jason12119,

Thank you for your feedback, I'll look into it and update the solution.

0

@pikapikamart

Posted

Hey, awesome work on this one. Layout in desktop looks great though it is pushed down and the height of the container seems larger than the design. It is responsive though and the mobile layout looks great.

jason12119 already gave great feedback on this one, just going to add some suggestions as well:

  • Since you are using flexbox, you can remove the margin on the main since using it as positioning the layout is not consistent enough, but remember to add a max-width on the main to have its size define. Then on the body tag just add justify-content: center to center the layout vertically.
  • Your .stats could have used ul since those are "list" of information about the company website and using aside on it is not suited.
  • Also, inside in those list information, those text should not be using a heading tag because they don't really give content on what the section would contain right, so better using p tag on them.

Aside from those, the site looks great.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord