Frontend Mentor | Blog Preview Card Solution coding challenge solution

@Islandstone89

Posted 18 days ago

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>.
Replace the id on the card with a class.
Headings should always be in order, so you would never start with a <h5>. Likewise, you cannot go from a <h1> to a <h4>. Also, none of them are headings - change them to <p>.
I would wrap the date in a <time> element:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.
The heading would have a link as this is a blog card.
The profile image needs alt text, for example, "Headshot of Gary Hooper".

CSS:

Including a CSS Reset at the top is good practice.
Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.
You don't need to set anything on html, so I would remove that selector.
On body, remove the width - block elements like <body>, <main>, <div> etc take up the full width by default. Remove the height as well.
To center the card horizontally and vertically, use Flexbox on the body:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;

Remove the margin on the card.
Add max-width: 20rem on the card, it will work on all types of screens. Remove height: auto, as that is the default value.
Remove the width on .header - as mentioned, block elements take up the full width by default.

Blog Preview Card Solution