Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

profile-card-component-main

@yanbabagbeto

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@vanzasetia

Posted

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
Discord logo

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