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

Mobile first, vanilla CSS using flexbox and grid.

@ClariceR

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


Hi everyone! Here's my solution :) I would really appreciate some feedback on the following points:

  1. Is the code well organised?
  2. Are there any accessibility issues?
  3. Are there any other potential problems with my solution? This was my first challenge and I really enjoyed having to refactor it until I found the best way I could do it. That's why I'm interested to know if it has any issues I wasn't able to spot. Thanks!

Community feedback

Shomy032 270

@Shomy032

Posted

Your card element (class = card ) , is not centered vertically on my screen , i am on my laptop with resolution 1600 x 900 px , you can wrap your .card and .attribution classes in one div and center it .

Anyway great work , and keep up coding :)

0

@ClariceR

Posted

Hi @Shomy032, thanks for your feedback! I opted for not having it centred, because I preferred to have the attribution at the bottom of the page and keep the top of the card in the same place when resizing. I don't know if that affects the challenge "validity" (or the score?), I will look into that. Thanks for pointing that out :)

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