Skip to content
Submitted 25 days ago

Responsive Blog Card Preview using CSS Flexbox

P
RishabhSikka3•200
@RishabhSikka3
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What specific areas of your project would you like help with?

Would like the help with the accessibility of the code.

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•3,410
    @thisisharsh7

    Nice work on the design and responsiveness! The card looks great and works well across screen sizes. Here's some accessibility-focused feedback:

    • Images: The alt text for the blog illustration could be more descriptive. Instead of "Illustration Article," try something like "Abstract graphic representing web development" or consider using alt="" if it's decorative.
    • Focus States: There are no visible focus outlines for keyboard users. Consider adding a :focus-visible style to interactive elements (e.g., .blog-title a) to support keyboard navigation.
    • Landmark Roles: Add landmarks like <main> or <article> to help screen reader users navigate the page more efficiently.

    Overall, this is a strong and visually engaging submission—just a few tweaks away from being more accessible. 👍

    Marked as helpful
  • emmanuel-ugwu•80
    @emmanuel-ugwu

    Nice 👍🙂

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