Blog Preview Card Responsive CSS

Hey, well done!

Here are some things you can implement to improve your solution even further - I hope you find them helpful :)

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

• Screen readers recognize images by default, so you should not include words like "image" or "photo" in alt text.

• A button is something that triggers an action. I see "Learning" as a <p>, or possibly a link, but not as a <button>.

• I would wrap the date in a <time> element:<p class="card__published">Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

• Wrap the footer text in a <p>.

CSS:

• I would use the 'Figtree' font on the body:font-family: 'Figtree', sans-serif;.

• On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

• Remove the margin on the card, it is not needed, since you already have some padding on the body.

• On "Learning", remove box-sizing: border-box, as that is already set on all elements in the CSS Reset. Also remove display: flex and max-width: 25%, and change width: auto to width: fit-content - this makes "Learning" only take up as much width as its content. To create some space around the text, and keep it centered, add some padding:padding: 4px 16px works fine for me when experimenting in DevTools.

• On the author image, I would change max-width to width, and instead of margin-right, I would add a gap on the parent, .card__author.

Hey, Your CSS is fantastic, I struggled to find anything I could improve on, Great job with this solution you should be proud, A few things I noticed,

• Missing a <meta> description tag for SEO purposes,
• Setting a height and width attribute to your <img> will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image,
• It is best practice to have a <main> tag inside your body highlighting the main section.
• You should add a font-display: swap; property to your @font-face, Leverage the font-display CSS feature to ensure that text is user-visible while web fonts are loading, Increasing performance.

I hope you found some of this information helpful, I look forward to seeing some more from you, Happy coding! 💻