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 Copmponent (Responsive)

Spiritβ€’ 220

@git-ritesh

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@sankalp475

Posted

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-ritesh

Posted

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

0

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