Blog preview card using flexbox

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. Make .container a <main>.

• Use class instead of id.

• Headings should always be in order, so you never start with a <h3>. The main heading for a page should be an <h1>. However, this card would likely be one of several components on a page - hence it should be a <h2>, as there can be only one <h1>.

• Change the alt text on the profile image to "Headshot of Gary Hooper".

• "Greg Hooper" is a <p>.

CSS:

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

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

• Remove padding-top on .container.

• Add min-height: 100svh on body, so the card gets centered vertically.

• Except for the profile image, remove all widths and heights.

• Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

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

• Add display: inline-block on "Learning", so it doesn't take up the full width. Add padding to create space around between the text and the border.

• Remove the margin-left and margin-right - instead, add padding on all sides of the card:padding: 1rem.

• On the top image, remove the margin. Add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

j