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

Sebastian 100

@MecosLB

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


Hope you like it and feedback is welcome :)

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hi there, Sebastian! 👋

Nice work on this challenge! 🙌 Your solution looks good and is responsive! 👏

A few suggestions I have for you are,

  • Using ul and li elements for the list of statistics at the bottom of the card component to make your HTML more semantic.
  • Not using h2 tags for the numbers in the statistics section, since even though they have a larger font-size and heavier font-weight, they aren't headings for anything. A simple span element should work for styling them. 😉
  • You don't need to add aria-hidden="true" to an image if you leave it's alt text empty, as that will already cause screen readers to ignore that image.
  • You can use the picture element to switch between the mobile and desktop versions of the image in the card component. You can also just specify the image in one place and reverse the order of the image and the rest of the content of the card component by placing both of them in a flex container and using a media query to change the flex-direction property between mobile and desktop views. 😉 If you'd like to learn more about the picture element and how to use it, check out this article from MDN. 🙂

Hope this helps. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

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