using flexbox to make 3 cards

Hi, I have some feedback which I hope will help.

HTML:

• You need to alter your structure a little. Every page needs a <main> that wraps everything except for the <header> and the <footer>. This can be the container that holds all 3 cards, or you could make a <div>. But you need a <main>, and a container that wraps the whole component.

• The icons are decorative, so the alt text should be empty: alt="".

• "Learn More" would navigate to another page, hence it is not a button but a link.

CSS:

• It's good practice to include a CSS Reset at the top.

• The body should have a min-height instead of height. The min-height allows the content to grow taller than the viewport if needed.

• Whenever you declare display: flex, the default value is flex-direction: row, so you don't need to write that explicitly. However, when using Flexbox on the body, you normally want flex-direction: column, as we want its children to stack vertically. Since the body currently only has one direct child, it makes no difference, but I would still change it to flex-direction: column, just to get into that mental habit.

• Remove the fixed width and height. You rarely want to set fixed dimensions (especially heights), as this easily creates issues with responsiveness.

• To prevent the component from stretching too wide on larger screens, add a max-width in rem.

• font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

• Media queries also need to be in rem instead of px. Ideally, you want to do mobile styles first, and use media queries for larger screens.