Skip to content
Submitted almost 3 years ago

Stats Card Component

Josh Eberharterā€¢380
@jeeberharter1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Any feedback would be greatly appreciated :)

Community feedback

  • Vanza Setiaā€¢27,775
    @vanzasetiaPosted almost 3 years ago

    šŸ‘‹ Hi Josh!

    šŸŽ‰ Congratulations on finishing this challenge! I have some feedback on this solution:

    • Accessibility
      • All the page content should live inside landmark elements (header, nav, main, and footer). By using them correctly, you can make users of assistive technology navigate the website easily. In this case, you can wrap all of it with main tag.
    <body>
  <main class="hero">
    page content goes here...
  </main>
</body>
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, the illustration is decorative only.
    • <div class="stats"> I would recommend making it as a ul element and wrap each item with li instead of div.
    • <h2>10k+</h2> should not be heading element (including the rest of the stats number). Use p element instead. The content below it is too small so the number can't be a heading. You could think of a heading like a title on a document.
    • Styling
      • I would recommend using the body element as the main container.
    • Best Practice (Recommended)
      • Prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well šŸ‘.
      • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).

    That's it! Hopefully, this is helpful!

    Marked as helpful
    1
    Josh Eberharterā€¢380
    @jeeberharter1Posted almost 3 years ago

    @vanzasetia wow thank you so much for the feedback! I'll be sure to keep it in mind for future projects :)

    1

Please log in to post a comment

Log in with GitHub

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