Blog preview main

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 17 days 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.

  Marked as helpful

  2

  ---

  

  P

  ttwmf•100

  @ttwmfPosted 17 days ago

  @Islandstone89, thank you! ❤️ I've learned so much from your feedback.

  1
• 

  PranjalUncodes•120

  @velvet-jediPosted 18 days ago

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

  Marked as helpful

  0

  ---

  

  P

  ttwmf•100

  @ttwmfPosted 17 days ago

  @velvet-jedi thank you!

  1

  

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 17 days ago

  @ttwmf happy to help 🙂

  0