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 component

KalexPG 40

@KalexPG

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


thank you

Community feedback

@walkonmars36

Posted

Also I use a resource from W3 schools for easily converting px to em, but be careful where you use em instead of rem. I think Kevin explains the difference in the above video, but if not the main thing to be aware of is that em only looks up one level, to an element's parent font size (which could be a h1 for example), whereas rem always looks to the root (r) font size. I tend to use rem for everything, except for padding, as this can work better if adding padding to button text for example.

Here's the px to em calculator

Marked as helpful

0

@walkonmars36

Posted

Hi.

Well done for completing the challenge. There's a few things you might want to consider looking at.

First of all the HTML. You're getting those warnings above because your h2 needs to be an h1. Have a read of the document under the read more link. Also the second warning is because your attribution div needs to be wrapped in a footer section.

Your stats div needs to be a <ul> with three <li> in it, then you can place two <span>s inside each <li> . I did exactly what you did here. It's semantically wrong and also bad for accessibility.

<ul class="praga">
   <li> 
        <span>10k+<span>
        <span>companies</span>
    </li>

 ..... etc.
      </ul>

You need to make the span display: block, as it is inline-block by default.

Don't forget to put your name in the coded by too, or remove it completely.

In the CSS, you might want to think about starting to use ems and rems instead of px. This is essential for responsiveness. Take a look at this video by the brilliant CSS guru Kevin Powell.

His advice, on this video and others, will also help you in understanding about setting a max-width (responsive) as opposed to width (which is fixed), as you're doing in the container width.

All the best.

Marked as helpful

0

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