Profile Card using FlexBox

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  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

  @victoriacesarPosted almost 4 years ago

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

  0
• 

  Salah Eddine•160

  @dacittoPosted almost 4 years ago

  Nice Job

  1

  ---

  

  Victoria•80

  @victoriacesarPosted almost 4 years ago

  @dacitto thank you!!

  0