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. Wrap the card in a <main>.

• Replace the id with a class.

• You don't need to wrap the top image in a <figure>.

• "Learning should just be a <p>, without <span> or <strong>.

• The heading would have a link as this is a blog card.

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

• "Greg Hooper" is a <p>. If it was a heading, it could not have been a <h5>, as headings must always be in order.

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 the positioning and transform properties on the card. It's better to center it using Flexbox on the body:

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

• Remove the width on the card. It is not recommended to set fixed sizes in px.

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

• I would use rem instead of em on font-size.

• Add display: inline-block on "Learning", so it doesn't take up the full width.

what's up dude!

I took a look at your codes, but I had difficulty understanding your documentation, maybe you should put into practice the documentation of your codes, being an important part of a developer when we research someone we always look at the documentation, the README file always helps with this, I entered on your website that you created to sell clothes and I thought it was incredible, but, again, there is no documentation, I hope this tip helps you, good coding!