responsive product preview project with html and css

Community feedback

• 

  Carlos Damian Perez•1,890

  @caarlosdamianPosted over 1 year ago

  Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

  First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that "All page content should be contained by landmarks" due to non-semantic markup. To improve the accessibility and organization of your page, I suggest wrapping the entire content (which includes multiple section elements) with the semantic element <main> in your index.html file.

  You may be wondering, what is meant by a landmark? Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span> . They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page.

  You can check more info about landmarks in the next link landmarks

  The issue "Images must have alternate text" is related to web accessibility guidelines. Specifically, it's related to the Web Content Accessibility Guidelines (WCAG), which are a set of guidelines designed to make web content more accessible to people with disabilities.

  To fix this issue, you should add an alt attribute to the <img> element and provide a brief, descriptive text alternative that conveys the purpose of the image.

  I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

  Happy coding! 🚀

  0