Skip to content
Submitted almost 2 years ago

profile-card-component-main

yanbabagbeto•70
@yanbabagbeto
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Is there anything you would suggest I change or do differently next time? I'd appreciate any feedback or advice you can offer. Please help me continue to grow and better myself. Thanks in advance for taking the time for writing a review. Much appreciated.

Community feedback

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

    Hi!

    I have one recommendation which is to not overuse the <section> and <article> elements.

    In this case, the profile statistic should be a list element with three bullet points. For example:

    • 80K Followers
    • 803K Likes
    • 1.4K Photos

    <article> and <section> don't make your HTML more semantic since they don't have meaning. In other words, they are almost the same as <div>. They only have meaning when they get labeled using aria-label or aria-labelledby.

    Reference — WebAIM: HTML Semantics and Accessibility Cheat Sheet

    So, don't overuse them.

    I hope you find this useful. Happy new year!

    Marked as helpful
    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