Product List With Cart

Community feedback

• 

  Ibrahim Mohammed•640

  @MohammedOnGitPosted about 2 months ago

  Hello KONY05!!!

  Congratulations on completing this challenge. Your HTML structure is well-organized and visually appealing for the "Product list with cart" concept. Here are a few suggestions and minor corrections:

  • Optimize Accessibility and Image alt Attributes Ensure that all images have descriptive alt attributes for better accessibility. For instance:

  <img src="assets/images/image-waffle-desktop.jpg" alt="A waffle with berries">
  <img src="assets/images/illustration-empty-cart.svg" alt="Empty cart illustration">
  <img class="modal_thumbnail" src="assets/images/image-waffle-thumbnail.jpg" alt="Thumbnail of waffle image">
  

  • Meta Tags and Comment Clarity Add a description meta tag for better SEO and sharing:

  <meta name="description" content="A product listing for desserts with an interactive cart.">
  

  • Use Semantic HTML for Structure Consider adding more semantic HTML elements to improve accessibility and structure:

  Replace the div with section in the cart and food-items areas.

  <section class="cart">...</section>
  <section class="food-items_container">...</section>
  

  • Headings Hierarchy Maintain proper heading hierarchy for accessibility. For example, after <h1>Desserts</h1>, use <h2> or <h3> for the item names within the grid.

  <h3 class="food_category">Waffle</h3>
  <h2 class="food_name">Waffle with Berries</h2>
  

  • Script Placement Since you are using the defer attribute, your script will already load after the HTML. If not, move your

  Marked as helpful

  1