Skip to content
Submitted 9 months ago

Responsive Blog Preview Card (HTML,CSS)

Hicham Abderrahim•210
@hichamweblog
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

What are you most proud of, and what would you do differently next time?

Hello community, please take a moment to check out this project!

What challenges did you encounter, and how did you overcome them?
  • I faced a challenge while attempting to implement the inclusive technique described in this article, so I referred to Tediko's solution for guidance.
What specific areas of your project would you like help with?

Your feedback and support are greatly appreciated.

Community feedback

  • Grace•31,270
    @grace-snowPosted 9 months ago

    Don't wrap multiple meaningful elements in a link like this. It is terrible for accessibility. Only the heading should be a link.

    There is a good post that is worth reading on the inclusive components site that teaches how to build a clickable card. Read it.

    Also think through the context of the component you're building here. This card would likely be one of several on a page. It would certainly not be the only contents on a page, so would not have a h1, which should only be used for a page title.

    Marked as helpful
    0
    Hicham Abderrahim•210
    @hichamweblogPosted 9 months ago

    @grace-snow Thank you so much for your thoughtful and informative feedback! I appreciate your insights on accessibility considerations and the importance of context in designing components.

    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