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

Responsive and accessible

Danny 120

@Deminal

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


Would love to hear any thoughts on the HTML/CSS. Would also love any help with accessibility concerns.

Thanks!

Community feedback

P
Grace 27,710

@grace-snow

Posted

Hi Danny,

Definitely address the html issues raised in your report - those aren't habits you wanna get into 😉

I'd also tweak the vertical padding and change your shadow on the box (color, placement and spread) to more closely match the designs

These might also help:

  • remove min width off your wrapper
  • change height to min height on your card

Overall though, this is a really good first challenge. Your html is nicely structured (minus the validation errors already flagged) and good use of BEM in your css. Well done ☺

0

Danny 120

@Deminal

Posted

@grace-snow

Hi Grace,

Thank you so much for the feedback! Most of (3/4) the HTML validation errors are me attempting to add alt tags and a tab-index to the entire card, attempting to make it more accessible. Are these features unnecessary or is there a better way to implement this?

0
P
Grace 27,710

@grace-snow

Posted

@Deminal adding attributes to elements that shouldn't have them actually makes them less accessible believe it or not 😊

If you use good semantic html - like headings in order, having text in paragraphs, lists in lists, using interactive elements for things that are meant to be interactive, and writing descriptive alt text on images - are all tee accessibility you need.

0
Tiass 295

@Tiasstiass

Posted

Good job! 👏 You could work on your padding to make the sizing more accurate. Also check your HTML issues.

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