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-hannibal

@hannibal1631

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?

NA

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

I faced a huge challenge while doing the background image. But with the help of chatGPT, i figured it out and learned something new.

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

NA

Community feedback

@Swag-blips

Posted

hey hannibal

HTML Semantics:

  • Consider using semantic HTML5 elements like <header>, <section>, and <footer> to better define the different parts of your webpage. This improves readability and accessibility. For example, the name and status sections can be wrapped in a <section> tag.

Accessibility:

  • Add more descriptive alt text for images to improve accessibility for screen readers. For example, instead of an empty alt attribute for the background pattern, describe it briefly.
  • Ensure all text elements have sufficient contrast against their backgrounds for better readability.

Marked as helpful

0

@hannibal1631

Posted

@Swag-blips Thanks. I never thought of doing these, so that's a new thing. I would surely implement these on my next project.

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