Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Preview Card

P

@perfidev

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@Islandstone89

Posted

Hey, excellent job! :)

I only have a few small things to correct, so well done!

HTML:

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

  • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

  • The link should be inside the heading, not the other way around.

CSS:

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

Marked as helpful

0

P

@perfidev

Posted

Updated solution! Thanks again for your help.

Sometimes I get confused about the semantics of the <a> tag.

I didn’t know about the <time> tag; it helped me a lot. 🤯

Lastly, I changed the <h1> tag to <h2>. I thought it wouldn't be an issue since it's a simple page, but it's always good to follow best practices.

Thank you very much =)

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord