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

Responsive blog-preview-card with hover,active and focus effect

@neirucode

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

@pierrettemugisha

Posted

The overall structure of the code is good, but it could benefit from some enhancements in semantics. For instance, using elements like <main> for the main content and <article> for the blog preview card would improve the accessibility and meaning of the content. I get warnings when submitting my solutions, that's why I am mentioning this.

The use of the alt attributes for images is good, however, consider using more descriptive alt texts that convey the purpose of the images (for example use Greg Hooper - Author for the alt attribute of the img tag for the author). You could also add arial-label attributes where necessary for extra clarity.

The layout is very responsive and fits well on a range of screen sizes. All parts of the card adjust well when size changes.

The CSS is well-organized. All aspects are considered and having the root variables for colors and spacing makes it easy to maintain. However, the custom classes like .text-preset-1, .text-preset-1 and .text-preset-3 are non-descriptive and might be clearer to name them according to their use such as .title, .description, .author-name, etc. Also, the inline styles in the `

Marked as helpful

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