Skip to content
Submitted 2 months ago

Responsive Stats Card

Michael Onafowokan•410
@Shikamaru007
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

What challenges did you encounter, and how did you overcome them?

media queries. i just had to set more breakpoints than usual and im not sure if its best practice to do.

What specific areas of your project would you like help with?

the media queries section please? something about the width setting seem off And id like to know if there was a way to set the font size relative to the width of its container

Community feedback

  • Teodor Jenkler•3,740
    @TedJenklerPosted 2 months ago

    Hi @Shikamaru007,

    First of all, nice project! It's fully responsive and looks good on all devices—really good job. An improvement would be to add more semantic elements like <main> and <section> and reduce the usage of <div> elements. This would make the code cleaner, improve accessibility, and enhance SEO. For instance, the <img> can be used as a direct child without needing an extra <div>.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    1
    Michael Onafowokan•410
    @Shikamaru007Posted 2 months ago

    Hello @TedJenkler,

    Thank you for your comment, i really appreciate it. To be honest i actually tried using sematic elements. My issue is i dont know what goes where and which is to be used for each and it just confused me, hence me using divs for the whole thing :(. Please can you help me out here?. perhaps a model i can just work with when approaching projects? . This is something ive always wanted to get right but i didnt think it was much of a big deal.

    I would appreciate your comments on this. You've been a great help. Thanks

    1
  • Debabrata Banik•710
    @DebabrataBanikPosted 2 months ago

    Your design looks great! Just a few tweaks could make it even better. For the font sizes, you might want to try using clamp(min, preferred, max). The preferred size should be a relative unit like vw to keep it responsive to different screen sizes.

    Also, consider a mobile-first approach. Start by designing for smaller screens, and then add breakpoints for larger screens as needed. This makes it easier to manage styles and improves the overall responsiveness.

    Hope this helps!

    Marked as helpful
    1
    Michael Onafowokan•410
    @Shikamaru007Posted 2 months ago

    Thank you so much. 🙏🏼 I appreciate this. And I'll redo the design with this approach.

    Thanks @DebabrataBanik

    0
    Michael Onafowokan•410
    @Shikamaru007Posted 2 months ago

    By the way this clamp function is going wonderfully. Thank you for this @DebabrataBanik.

    Im able to write less media queries now.

    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