Profile card desing using HTML & SASS

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  Nice work on this challenge! Even though this is a single component, I would still recommend adding a main element to wrap around your content. Getting used to using HTML5 semantic elements is a great thing to do.

  You've also jumped straight to a h4 heading without using any other levels. This is can cause accessibility issues. I'd recommend always using a single h1, which on this challenge I'd put as the name. I'd also say that the descriptions as opposed to the numbers are the headings. To make sure it was read out in the right order for screen readers I'd put the headings (as h2 elements) above the numbers in the HTML and then use Flexbox with flex-direction: column-reverse; to visually flip them to match up to the design.

  It's obvious you've paid a lot of attention to detail on this challenge, so well done. Keep up the great work! 👍

  0

  ---

  

  buchi•60

  @buchi-1996Posted almost 4 years ago

  @mattstuddert I really love your review,.. I never think of screen readers when doing HTML markup. I will definitely adhere to your advice Thanks

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  @buchi-1996 you’re welcome!

  0
• 

  Tongue-blasting coder•130

  @OyedolacodePosted almost 4 years ago

  great stuff. more accessability

  0