Skip to content
Submitted 8 months ago

Blog Preview Card Main Solution by JDP

Juan Díaz Peña•90
@JDPWeb
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What challenges did you encounter, and how did you overcome them?

setting meaningful class names, but once the structure was clear to me, the classes were easier to determine.

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

Any feedback is welcome.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Asilcan Toper•2,960
    @KapteynUniverse

    Hey Juan, nice job.

    Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Wrapping your card div with a main would be good.

    Font size on the elements (except the name) overriding the font-size on the body(which is good for this situation because you used rem on them) but never use fixed values for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for the font sizes and media queries.

    Use max-width for better responsiveness.

    Images need a meaningful alt text, unless decorative. For this case, you can leave empty the alt text of illustration or use aria-hidden="true" so screen-readers ignore the it. Also avatar needs more content.

    Marked as helpful

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