Practical Exercise: Shopping List

assignment Exercise Requirements
  • Create a shopping list with at least 25 products
  • Use types and subtypes with nested lists
  • Organize items into logical categories

code HTML Structure

HTML
<ul>
  <li>Bread</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Fruit
    <ul>
      <li>Oranges</li>
      <li>Apples</li>
    </ul>
  </li>
</ul>

visibility Visual Representation

desktop_windows Browser Preview
  • Bread
  • Milk
  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Fruit
    • Oranges
    • Apples
  • Vegetables
    • Carrots
    • Broccoli
    • Tomatoes
  • Dairy
    • Cheese
    • Yogurt
    • Butter

lightbulb Key Benefits of Nested Lists

category Organization
Groups related items into logical categories
visibility Readability
Improves visual hierarchy and scanning
accessibility Accessibility
Better screen reader navigation