Blog Preview Card (CSS | HTML )

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 6 months ago

  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 :)

  Marked as helpful

  2