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 Solution

Kissanth 20

@Kissanth

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@iddahadev

Posted

Does the solution include semantic HTML?

You can improve the markup by deleting most of the div elements. The main div could be an article and the rest of them could just be h1, p, figure...

Is it accessible, and what improvements could be made?

You can improve accessibility by providing aria-label when needed and use good semantic HTML for elements like time (published date).

Does the layout look good on a range of screen sizes?

The layout has fixed size.

Is the code well-structured, readable, and reusable?

You can use CSS Variables to reuse some common styles like colors, font size and spacing.

Does the solution differ considerably from the design?

There are some elements that differ from the design like the font size of the tag, the color of the description. Good job for getting this close from the design !

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