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

Ben 130

@benhyh

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

Gunal K 80

@Gunal-k

Posted

The solution you provided looks promising and demonstrates a good understanding of front-end development principles. Here's some feedback:

  1. Semantic HTML: Your HTML structure appears to be well-organized, with appropriate use of tags like <div>, <a>, and <img>. However, it's always beneficial to ensure that the HTML elements accurately reflect the content's structure. Consider using semantic tags like <header>, <main>, <section>, and <footer> where applicable to enhance readability and accessibility.

  2. Accessibility: While the solution appears visually appealing, there are opportunities to enhance accessibility. Ensure that interactive elements have visible focus states, such as outlines or background changes, to indicate keyboard focus. Additionally, consider adding ARIA attributes to provide context and improve screen reader compatibility.

  3. Responsiveness: The layout looks good on larger screens, but it's important to ensure it's responsive across various devices. Test the design on different screen sizes and orientations to identify any areas that may need adjustment. Consider using CSS media queries to make layout adjustments based on viewport size.

  4. Code Structure: Your CSS code is generally well-structured and readable, which is great for maintainability. However, consider organizing your CSS rules more logically and modularly, especially if the project grows larger. This can involve grouping related styles together and using CSS preprocessors like Sass for better organization.

  5. Adherence to Design: From what's provided, it seems like the solution aligns well with the design requirements. However, without seeing the exact design, it's challenging to determine if there are any significant differences. If there are specific design elements or interactions outlined in the design that aren't reflected in the solution, it would be beneficial to address them.

Overall, your solution is a solid foundation, and with some tweaks to enhance accessibility and responsiveness, it can become even stronger. If you have any questions or need further clarification on any point, feel free to ask!

Marked as helpful

0

Ben 130

@benhyh

Posted

@Gunal-k Thanks for the feedback! I will make adjustments as needed and will look into ARIA attributes and Sass.

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