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

@cesmsdev

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

Cristian 30

@neouruguayancr

Posted

  1. Semantic HTML:

I noticed that while your HTML structure is generally clear, it could benefit from more semantic elements. For example, using <header>, <main>, and <footer> tags will improve the document’s structure and help screen readers navigate more effectively. 2. Accessibility Improvements:

Consider adding alt attributes to any images or icons to enhance screen reader compatibility. Also, ensure that color contrast meets WCAG standards to support users with visual impairments. It might be helpful to implement keyboard navigation for any interactive elements, ensuring that users can navigate through the content without a mouse. 3. Responsive Layout:

The layout looks good on desktop, but I recommend testing it on a range of mobile devices. Use media queries to adjust styles for smaller screens. Ensure that text remains readable and buttons are appropriately sized for touch interactions. 4. Code Structure and Readability:

Overall, the CSS is well-organized, but consider using comments to explain sections of your code. This makes it easier for others (and future you) to understand your thought process. Use consistent naming conventions for classes and IDs to enhance readability. For example, consider adopting a BEM (Block Element Modifier) methodology to make your CSS more maintainable. 5. Alignment with Design:

Your solution aligns well with the design, but there are a few minor spacing discrepancies. Reviewing the design specifications for padding and margins could help achieve a closer match. Questions for You:

Are there any specific areas of the project where you feel uncertain or would like additional feedback? Have you considered implementing any CSS preprocessors like SASS or LESS to streamline your styles? If so, I’d love to hear about your experiences! Overall, great work! I'm excited to see how you continue to refine your solution.

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