Responsive Blog preview card using Flexbox, bem and SCSS

Hi, good job!

Here are some suggestions - I hope it helps :)

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. Change .blog-preview-card-section into a <main>.

• Screen readers recognize images, so you shouldn't have "image" or "photo" in the alt text.

• Consider wrapping the date in a <time> tag:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

• "HTML & CSS" is the card heading, so wrap it in a <h2. Keep the link, as that would be needed on a blog card.

• A more suitable alt text for the profile image would be "Headshot of Gary Hooper".

• "Greg Hooper" is not a heading, as it doesn't introduce any content. If it were, it would be a <h3>, as you cannot go from a <h2> to a <h4>. Make it a <p>.

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.

• .blog-preview-card-section doesn't need any properties, so move them(except for display: flex which the body already has) to the body. Change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Add gap: 2rem, to create some space between the card and the footer.

• Remove the width on the card, and the height on the top image.

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

• It's common to use numbers for line-height, so I would switch 150%% to 1.5. Since you use the same line-height on several elements, I would add it to the body, and remove it elsewhere.

• Similarly, you don't need to put the font-family on every element. A more efficient way is to remove them and add font-family to body. The children will inherit the value.

• Media queries should be in rem, and usually we do the mobile styles as the default.

Looks fine, nothing to say really.