Blog preview card solution with HTML & CSS

Good work!

Some suggestions:

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 wrap the date in a <time> tag:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

• A better alt text for the profile image would be something like "Headshot of Gary Hooper". Screen readers announce images as "image", so don't use words like "image" or "photo" in the alt text.

CSS:

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

• Instead of setting it on individual elements, the box-sizing property should be placed on all elements, using the universal selector:

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

• Remove the margin on body.

• The body is only as tall as its content by default. To center the card vertically, we need to set min-height: 100svh on the body for it take up (atleast) the full viewport height.

• max-width on the card should be in rem. 25rem equals 400px.

• .card-img doesn't need any Flexbox properties.

• font-family should be set on the body.

• 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.

• As part of a CSS Reset, it is best practice to declare display: block and max-width: 100% on images.

• Media queries should not be in px, but in em or rem. Also, it is common practice to do mobile styles first and use media queries for larger screens.