Blog Preview Card (CSS | HTML )

Hey, well done!

You have included many things that most people miss:

• Heading for screen readers
• <main> and <footer> landmarks
• CSS Reset
• Custom Properties
• No fixed widths or heights in px
• max-width on the card in rem
• font-size in rem instead of px

Here are a few tips to improve your solution even further:

HTML:

• "Learning", "Published" and "Greg Hooper" are <p> elements.

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

• You should not use words like "photo" or "image" in the alt text, as screen readers announce it as an image by default.

CSS:

• Add display: inline-block on "Learning", so it doesn't take up more width than its content and padding.

• Paragraphs have a default font-size of 1rem, so you don't need to declare it explicitly.

Keep up the good work :)