Blog preview main

Community feedback

• 

  P

  Øystein Håberg•13,280

  @Islandstone89

  Posted 9 months ago

  Good job!

  A few things that could be improved:

  HTML:

  • I see the top image more as decoration so I would have empty alt text:alt="".

  • Never have text in a <div> alone. Change "Learning" to a <p>.

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

  • As this is a blog card, the heading needs a link inside.

  • For the profile image, a better alt text would be "Headshot of Gary Hooper".

  • Wrap the footer text in a <p>.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • Remove box-sizing: border-box on *, as it is already set on *, *::before and *::after.

  • Remove font-size on html, as 16px is the default value.

  • For line-height, you can also write 1.5 instead of 150%.

  • Remove height: auto on the card and on "Learning", it is not needed.

  • On "Learning" you can also use width: fit-content.

  21

  Marked as helpful
• 

  PranjalUncodes•120

  @velvet-jedi

  Posted 9 months ago

  I think the text color of the "These languages are..." is not matching also the vertically centered card, you missed it.

  02

  Marked as helpful