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 [HTML | CSS | JS]

@OniOdd

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

@Manshiporiya

Posted

Here’s feedback on the solution provided, based on the key points for evaluating code quality, accessibility, layout responsiveness, and structure:

  1. Semantic HTML: Positive Points:

The use of <h1> for the title and <p> for the description is appropriate and follows basic semantic HTML rules. The structure is simple and clear, making it easy for screen readers and other assistive technologies to navigate the content. Suggestions for Improvement:

More semantic tags could be used for better accessibility and structure. For instance: Wrap the entire content inside an <article> element, which is semantically appropriate for a blog preview. Use <footer> for the author and date section to differentiate metadata from the main content. For the date, consider using the <time> tag with a datetime attribute for machine-readable dates. Improved Semantic Example:

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