3 Column Preview Card Component using flexbox & mobile-first approach

Hello, and good job on this challenge. Here are some suggestions.

HTML:

• I think the headings should all be <h2> since they're of equal importance.

• The heading text should be written in normal casing. Then, in CSS, use text-transform: uppercase. This is a common, not-so-obvious beginner mistake I see many people do.

• Another not too obvious one; the "Learn More" should be a link, not a button. The reason is that it would navigate the user to another page. A button is for performing an action, like submitting a form.

CSS:

First, good use of Custom Properties. Remember, though, to never set font sizes in px

• You don't need to write * > element. If you need to target the <h1>, simply use <h1> {}. The same obviously goes for the h2 and the p.

• You can remove the margin property from the body; the whole 3-column-card is centered using Flexbox.

• Remove all fixed heights and widths on the individual cards.

• If needed, set a max-width on the whole 3-column-card. This should be in rem.

• Remove fixed height and width (see a pattern? :) ) on the "Learn More" links. Use padding instead.

Hope this is useful, good luck :)