Responsive Blog Card Component

Hi! I'm glad you've found my previous suggestions helpful. Good job on this project, I like your use of Custom Properties and font sizes in REM.

Here is my feedback for this challenge:

HTML:

• Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

• I would change the heading ("HTML & CSS") to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

• You don't need to wrap the top image in a <div>.

CSS:

• Including a CSS Reset at the top is good practice.

• I would add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

• Remove the margin on body.

• Remove min-height and max-height on the card. We never want to limit the height of elements containing text - if the content inside of the card grows to be taller than the max-height, it will cause overflow. And there is no need for a min-height - the content, along with margin and padding, should determine the size of the card. The only thing needed is the max-width, so it doesn't stretch indefinitely on larger screens.

• Remove all image styles, except for:

max-width: 100%;
border-radius: 10px;
margin-bottom: 1.5em;

Keep up the good work!

Congrats on solving the problem! Keep growing