A card component layout with hover states on interactive elements

Community feedback

• 

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  To avoid accessibility issues in the future:

  • wrap everything in your body in <main>
  • start your headings with h1 and move up by one level each time
  • give ur <img> and alt=""

  Good job! :)

  Marked as helpful

  0

  ---

  

  Siladi•90

  @siladikarlo856Posted almost 3 years ago

  @anoshaahmed Fixed. Thanks :-)

  1
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  This looks good. You did a nice job with this. For responsive design, you want to stay away from pixels. I use rems for the text and ems for margin and padding, but using rems is fine too.

  Wrap your card div in a Main tag and change the Equilibrium text to an H1. Every page should have an H1 for accessibility reasons. You may have to re-style it to look like the design. Add ALT tags to all your images. They can be empty on this project because the images are for decoration only. Change your attribution div to a Footer and it will clear the accessibility warnings.

  Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

  Hope this helps.

  Marked as helpful

  0

  ---

  

  Siladi•90

  @siladikarlo856Posted almost 3 years ago

  @brodiewebdt Fixed. Thanks for the tips. I'll check AXE DevTools for sure.

  1
• 

  Melad•110

  @meladcodesPosted almost 3 years ago

  Hi, to avoid any accessibility issues in the future, you can wrap everything with the <main></main> tag. Well done!

  Marked as helpful

  0

  ---

  

  Siladi•90

  @siladikarlo856Posted almost 3 years ago

  @meladcodes Fixed. Thanks!

  1