Profile Card Component

I actually think the semantic tags on this is fine. As a screenreader user, I can understand everything.

However, you definitely need to change the way you're using alt text at the moment. Meaningless images like background images should have the attribute but with no value in it. Meaningful images - like the profile image should have a meaningful description. In this case, that should probably say the person's name.

The other thing you need to address is that although this looks great on mobile in portrait orientation, it breaks really badly on landscape. Not setting height on elements that don't need it and using min- or max- values on properties like width/height usually helps these things.

I hope this is helpful feedback for you. Best of luck

Hey @RohitDhatrak,

Congratulations on completing your first challenge!

Currently, your site looks good but there are couple of things that needs to be added/altered:

1- Use a semantic elements instead of <div> when possible because using semantic elements enhances accessibility, searchability.

2 - <img> element is missing an alt attribute. Always add a required alt attribute and specify an alternate text for an image for better accessibility

Besides that your code looks good and it's easy to read.

Keep contributing your work in this community!

Happy Coding! 😀