Skip to content
Submitted 11 months ago

Blog Preview Card Copmponent (Responsive)

Spirit•220
@git-ritesh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi there 👋, I’m Spirit, and this is my solution for this challenge.

✨ Features:

  • Achieved 100% in Lighthouse score for performance 🚀, accessibility, best practices.

🛠️ Built With :

  • Mobile First CSS. 🎨
  • BEM Convention

Question:

  • How to achieve pixel perfect design which matches approx. 100% with the Challenge Design ?
  • Any Best Practices which I should have followed in this challenge ?

Any feedback is appreciated. Thank You : )

Community feedback

  • sankalp kumar•180
    @sankalp475Posted 11 months ago

    Hi, Excellent project👏.

    I have some simple suggestion you might find interesting. I noticed that you have <p>Published 21 Dec 2023</p> in your code When a screen reader is reading the above it will pronounce 21 Dec 2023 as it is. This should be wrapped in <time datetime="2023-12-21">21 Dec 2023</time> This is machine readable therefore it is more accessible for user's with visual impairment and it is also accessible by calender such a google calender. To find out more about the time tag check out this article

    Other than that your project is EXCELLENT 🤩

    Happy coding 🙃

    Marked as helpful
    0
    Spirit•220
    @git-riteshPosted 11 months ago

    @sankalp475 I have already used can you please see my code :)

    0

Please log in to post a comment

Log in with GitHub

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