Skip to content
Submitted over 2 years ago

Stats Preview Card Component

Ana Vela•20
@ana-vela
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

This was a fun first project! I struggled with getting the right overlay color for the image. Any tips about best practices for implementing this?

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hello, Ana! 👋

    Congratulations on finishing this challenge! 🎉

    I have some feedback on this solution:

    • Accessibility
      • All the page content should live inside landmark elements (header, main, and footer). By using them correctly, users of assistive technology navigate the website easily. In this case, wrap all of it with main tag,except the attribution. The attribution should be lived inside the footer.
    <body>
  <main>
    page content goes here...
  </main>
  <footer class="attribution">
      good job on doing this! 👍
  </footer>
</body>
    • Use CSS to uppercase the text. The uppercased word in the HTML will be spelled by the screen reader (spelled letter by letter).
    • For the stats element, swap the section tag with ul and wrap each item with li instead.
    • The stats number should not be a heading for sure. The content below it is too small. You might find it helpful if you think of a heading like a title in a document.
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
    • Best Practice (Recommended)
      • I would recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. As a result, mobile users will no longer be required to process all of the desktop styles.

    I hope this helps!

    Marked as helpful
    1
    Ana Vela•20
    @ana-velaPosted over 2 years ago

    @vanzasetia Thank you so much for your feedback! I will take these tips into consideration moving forward.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @ana-vela You're welcome! 😉

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 years ago

    Hello Ana Vela ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    happy Coding😀

    Marked as helpful
    1
    Ana Vela•20
    @ana-velaPosted over 2 years ago

    @Crazimonk Thank you so much for your feedback. I made the changes. Also, I appreciate you sending me your helpful article about accessibility.

    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