Stats preview card component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Akash! 👋

  Good job on this challenge! 👏 It's great that you've used Normalize.

  I notice that there's height: -webkit-fill-available; which I'm not sure what it's used. Regardless, it makes the card touches the top of the browser edge on both landscape and portrait mobile views. Also, on the mobile landscape, it makes the card gets cut off on the top.

  You can do this in a more simple way by making the body element as the main container and the main element as the card element that wraps the image and the card__body. So, my point is to try to simplify the HTML markup if you think it is possible.

  For the stats element, I recommend making it as a list because if the HTML has no styling then a list element would be the best element for the stats. Also, there's no need for h2 because when it has no styling it would look something like this.

  • 10k+ companies
  • 314 templates
  • 12m+ queries

  The image is a decorative image so it's best to leave the alt empty to hide it from screen reader users. This way, those users can focus on the actual content of the page.

  That's it! Hope this helps. 😊

  Marked as helpful

  0

  ---

  

  Akash•80

  @Akash20xPosted over 2 years ago

  Hi @vanzasetia

  Thanks a lot for these pieces of advice. I will update my solution based on them.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Akash20x You're welcome! 😄

  0