Responsive-blog-preview-card

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. Replace <section> with <main>.

• "Learning", "Published" and "Greg Hooper" are <p> elements. If they were headings, they must have been in order.

• "These languages" is also a <p>.

• Profile image needs a short alt text, for example "Headshot of Gary Hooper".

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.

• Move the properties on .all to .container, and remove the margin. Add min-height: 100svh on the body, so the card has vertical space to center itself.

• Instead of using elements or nth-child as selectors, I would assign classes on the different elements.

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

• line-height must also never be in px.

• The top image should have display: block and max-width: 100%.