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

Community feedback

• 

  Pierrette Mugisha•70

  @pierrettemugishaPosted 3 months ago

  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