Submitted 17 days ago

Responsive Stats Card

Shikamaru007• 170

@Shikamaru007

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

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,720

@TedJenkler

Posted 16 days 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

Shikamaru007• 170

@Shikamaru007

Posted 16 days 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

Debabrata Banik• 590

@DebabrataBanik

Posted 17 days 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

Shikamaru007• 170

@Shikamaru007

Posted 17 days ago

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

Thanks @DebabrataBanik

Shikamaru007• 170

@Shikamaru007

Posted 16 days ago

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

Im able to write less media queries now.

Please log in to post a comment

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