STATS PREVIEW CARD COMPONENT

Community feedback

• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 2 years ago

  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)! 😁

  10

  Marked as helpful