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 using HTML and CSS

Vishakha Roy• 100

@VishRoy

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


Hi,

Please let me know how can I improve my code .

Thank you

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted

👋Hi Vishakha Roy!

I have some feedback on this solution:

  • Heading order is important.
  • Every page needs one heading one. But, in this case you don't have to since it's just a component or you may want to add a hidden h1.
  • I recommend to change the h3 with h2.
  • Also for the stats, I recommend to use ul and wrap each stats with li.
  • The number stats should not be a heading. I recommend to use strong tag instead.
  • Wrap all page content with main tag. It is important for all page content to live inside the landmark.
  • The person image is important, so I recommend to use his name as the alt value.
  • For the background-position, I would recommend to see ApplePieGiraffe solution.

That's it! Hopefully this is helpful!

Marked as helpful

0
Vishakha Roy• 100

@VishRoy

Posted

Hi Vanza Setia,

Thank you for the suggestions !

I have updated my code according to your suggestions .

Thanks again !

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