Blog Preview Card Responsive CSS

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 2 months ago

  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.

  1
• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  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! 💻

  1