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

Responsive stats preview card using CSS grid and Flexbox

@helenclx

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Joachim 840

@Thewatcher13

Posted

Why did you choose an h2 and h3 tag on the stats?

0

@helenclx

Posted

@Thewatcher13 Because I thought the stats are supposed to stand out from the body text.

0
Joachim 840

@Thewatcher13

Posted

@helenclx but you can do this with a p too.

In my solution I had a p tag and a span tag.

the p is indeed because it's a seperate part of the text, but if I using another p tag, I actually say "this don't belong to the other p tag", and in this case, it does well.

So I used for those reasons a p tag and a span tag.

Also, use an unordered list in this, instead of div.

If my css is broken, the user should see a plain meaningfull text and that does the ul.

Marked as helpful

1

@helenclx

Posted

@Thewatcher13 Thank you for your feedback. I have updated the code of this project based on your suggestions.

0
Joachim 840

@Thewatcher13

Posted

@helenclx okay, good to hear!

0
Joachim 840

@Thewatcher13

Posted

The only thing that yoyu should do now, is move the bullet points from the ul

0

@helenclx

Posted

@Thewatcher13 Done.

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