Skip to content
Submitted almost 4 years ago

Frontend Mentor - Stats preview card component solution

VInayak D•20
@VinayakDhamnekar
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello everyone,

I have wrapped HTML5 semantic elements like <article>, <footer> etc inside a <div> for styling purpose. Does this affects the semantic of web-page.?

<div > <article> </div> <div> <footer> </div>

Does my final HTML semantic need improvement?

Code

Please log in to post a comment

Log in

Community feedback

  • Mark Mitchell•1,820
    @markup-mitchell

    @VinayakDhamnekar it's great that you're thinking about the semantics of the markup. I don't think there's anything really wrong here, but here are my observations, since you asked!

    Context is important - what is this thing you're building? How will it be used? At first glance I assumed this was a landing page, in which case I was going to suggest you didn't really need the <article> tags since there's only one "chunk" of content and it can sit quite happily under <main>.

    Looking at the challenge brief, I see it's described as a card component, so OK, let's assume this needs to be capable of appearing in multiple locations on the website, maybe on its own, maybe alongside other cards. In that case yes, <article> is a good tag to use for this "article" of content - though you should bring the image inside the <article> tag as it's part of that content.

    I think the <footer> element is out of place here; just because something's at the bottom doesn't necessarily mean it's a footer. In this case the challenge is named "Stats preview card component" - those stats are actually the main piece of content being presented!

    The best way to start thinking about structuring and styling content is to imagine it as a straight-up document; what would this look like as a Word .doc file?

    Get insights that help your business grow.

    Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.

    • 10k+ companies
    • 314 templates
    • 12m+ queries

    You've got the heading and text marked up fine, I'd suggest rendering the stats as an unordered list and styling it to present like the design. Then you have a solid underlying document which is good for all kinds of reasons, not least of which is people using assistive technologies like screen readers.

    Marked as helpful
  • Haziq•320
    @zyq-m

    Great job buddy!! The design was close enough. For me, you need to set correct max-width and height. You can refer to my solution.

    Have a great day. Happy coding.

    https://www.frontendmentor.io/solutions/responsive-page-using-sass-flexbox-NQ56cmvX9V

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