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 FlexBox

Victoria 80

@victoriacesar

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


Hello, only uploading my first project. I really enjoyed creating it, and appreciatte if you could give your opinion about the code itself. All feedbacks are welcome. Thank you!!

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Victoria, excellent work on this challenge and congrats on submitting your first solution! 🎉

Here are some thoughts after taking a look at your code:

  • You've added the pattern at the top of the card as an img in the HTML with an alt attribute for screen reader users. As this image is purely decorative, it would be best to either add it as a background-image in the CSS or leave the alt attribute blank, so that screen readers skip over it.
  • Likewise for the profile picture, having the alt text of "Profile picture" doesn't add context. As the person's name, age, and location are directly below the profile picture, you could also leave a blank alt attribute as the image adds no extra context to the written content.
  • It's great to see you using semantic HTML5 structural elements to wrap the content. Nice work!
  • For the h2 elements, I'd actually say the stats aren't the headings, but the "Followers", "Likes", "Photos" content are. One way to make sure screen readers read out the headings first would be to swap the order in the HTML and then use flex-direction: column-reverse; to flip the order to match the design.

I hope these pointers help. Let me know if you have any questions! 🙂

1

Victoria 80

@victoriacesar

Posted

@mattstuddert Thank you so much! I read everything and I will put it into practice for sure.

0

@dacitto

Posted

Nice Job

1

Victoria 80

@victoriacesar

Posted

@dacitto thank you!!

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