3-column-preview-card-component

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!