3-column-preview-card-component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi there! 👋

  Congratulations on finishing this challenge! 🎉

  I recommend setting the gray background color on the body element instead of on the main element. Also, there's no need to put max-width: 1440px on the main element. I recommend setting the max-width to limit the width of the card container.

  Some more suggestions for improvements.

  • I recommend using the main element as the container of the card element. This way, you can remove the div that wraps the cards.
  • For decorative SVGs, add aria-hidden="true" attribute to the svg. Doing this will prevent assistive technology such as screen readers to pronounce the decorative icons.
  • Heading levels must always be in order to give structure to a page. In this case, it's okay to not have h1. So, swap all the h4 with h2. I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.
  • Always specify the type of the button. In this case, set the type of them as type="button". It will prevent the button from behaving unexpectedly.

  I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

  • Manuel Matuzović - Lost in Translation - YouTube
  • Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
  • Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

  That's it! I hope this helps!

  Marked as helpful

  1

  ---

  

  NT-squared•110

  @nt-squaredPosted about 2 years ago

  @vanzasetia Thank you so much for your detailed feedback! :thumbsup:

  1