@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 analt
attribute for screen reader users. As this image is purely decorative, it would be best to either add it as abackground-image
in the CSS or leave thealt
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 blankalt
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 useflex-direction: column-reverse;
to flip the order to match the design.
I hope these pointers help. Let me know if you have any questions! 🙂
@victoriacesar
Posted
@mattstuddert Thank you so much! I read everything and I will put it into practice for sure.