Frontend Mentor - 3-column preview card component solution

Hey there! 👋 Here are some suggestions to help improve your code:

• To properly center ✅ your content to your page, you will want to add the following to your body (this method uses CSS Grid):

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

More Info: 📚

Centering in CSS

• Implement a "Mobile First" approach 📱 > 🖥

Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.

More Info: 📚

Mobile First

• For improved accessibility 📈 for your content, it is best practice to use rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎆🎊🪅

Hello again 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• You should use only one <h1> tag per page. The <h1> tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires that Sedans, SUVs and Luxury are headings, but you can use the <h2> tag instead of the <h1> tag. As an alternative, you should create an h1 element with the class of sr-only that is hidden. You can read more about this here 📘.

• You should use the <a> tag instead of the <button> tag because the Learn More button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. You can read more about this here 📘.

I hope you find it useful! 😄

Happy coding!