Skip to content
Submitted over 2 years ago

Stats preview using bootsprap

suraj sarkar•100
@surajsarkar
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

how to change the color of the image?

Community feedback

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

    Hello there, Suraj Sarkar! 👋

    Congratulations on finishing this challenge! 🎉

    About the image overlay, you could make the purple overlay either using mix-blend-mode or using pseudo-element.

    I would recommend using vanilla CSS when doing newbie challenges to sharpen your CSS skill. I think using a CSS framework makes doing this challenge harder since it is really custom styling. Also, you don't need the JavaScript though. 🙂

    I would also recommend removing the new.html file from your GitHub repository. You don't use it, right?

    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,except the attribution.
    <body>
  <main>
    page content goes here...
  </main>
  <footer class="attribution">
      attribution links goes here...
  </footer>
</body>
    • Well done on using footer landmark for your attribution! 👍
    • Good job on leaving the alt empty for the img! 👍
    • For the stats, I would recommend using ul and wrapping each list item with li instead of using div.
    • Best Practice (Recommended)
      • I would strongly recommend writing the styling using the mobile-first approach. It often makes me write less code.

    That's it! Hopefully, this is helpful! 😁

    1
  • suraj sarkar•100
    @surajsarkarPosted over 2 years ago

    Thankyou for your feedback

    0

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