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 [ Flexbox ]

P

@ezeroualnajat

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 Najat and this is my solution for this challenge.

  • Achieved 100% in Lighthouse total score.
  • Codebase is well-maintained and formatted with Prettier.
  • Semantic HTML markup.
  • SEO friendly.
  • Enhanced a11y.

Any feedback on how I can improve and reduce my code is welcome! Thanks.

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @ezeroualnajat!

Your solution looks excellent!

I have just one suggestion:

  • In this case, use only main as a container. The tag article is not necessary. It would make more sense to use it if the card was part of a bigger website (it certainly would in real world), but since it's all we have on the screen, the tag main is enough.

I hope it helps!

Other than that, great job!

Marked as helpful

1

P

@ezeroualnajat

Posted

@danielmrz-dev

Thank you for your insightful feedback on my solution. I appreciate your attention to detail and the time you took to share your suggestion.

I initially included the "article" tag as a preemptive measure for potential future content expansion, aiming for improved maintainability. However, I understand your recommendation in the context of the current display scenario.

Thank you once again for your thoughtful observation and encouragement.

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