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

My Profile Card Component

Edi Carlos 130

@ediCarlosSilva

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


What are you most proud of, and what would you do differently next time?

I am help for conclude one more project. Every project I learn a new tips for css and html.

What challenges did you encounter, and how did you overcome them?

It was difficult to know how to position the background images. I learning a new way to do this.

What specific areas of your project would you like help with?

I would like tips for the semantic html 5.

Community feedback

MikDra1 6,090

@MikDra1

Posted

  • Use header, footer, and main tags: Wrap the primary content of the page (i.e., the profile card component) in a <main> tag, and the attribution section in a <footer> tag. This clearly separates content and provides context.

  • Use descriptive classes and structure: Instead of using generic classes like profile__stats, consider using more specific classes like profile__statistics. This enhances clarity and meaning, especially when stylesheets are extensive.

  • Utilize the <figure> and <figcaption> tags: For the profile image, wrap it in a <figure> tag, and add a <figcaption> with a brief description. This provides semantic meaning to the image, especially for accessibility.

Hope you find this comment helpful 💗

Good job and keep going 😁😊😉

Marked as helpful

1

Edi Carlos 130

@ediCarlosSilva

Posted

Thank you so much for using some time writing to me. These are very helpful for me, mainly the tip for image tag @MikDra1

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