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