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
Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I was wondering about an image in .svg format. Should I place it in an img tag as I did, or paste it directly into the index.html file...

Community feedback

fr4nbtt 50

@fr4nbtt

Posted

This solution is excellent and surely better than mine; it was challenging to find any relevant suggestions for this peer review, but I guess that's part of the learning process.

Anyway, my two cents:

1. Semantic elements: It is advisable to replace the <div class="card"> with an <article> tag, as this element effectively represents a self-contained piece of content.

2. Ensure descriptive alt text: It is recommended to provide descriptive alt text for images to enhance accessibility.

3. Add ARIA labels to relevant elements: Consider incorporating aria-label attributes to elements where additional context may be beneficial for screen reader users.

4. Structure content with semantic tags: It may be beneficial to organize the card content using <header> for the title and category, and <footer> for the author information, to improve content clarity and accessibility.

Marked as helpful

1

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