Web Development Lesson 2 - Lists

• Continue using the 'lists.html' and 'style.css' files you have been working on in Visual Studio Code.
  • lists.html
  • style.css

• Create a basic unordered list at the end of your existing html code (just before the </body> tag)
• Fill it with items from a shopping list or a to-do list.

      <h2>Checklist</h2>
      <ul>
        <li>100g flour</li>
        <li>2 eggs</li>
        <li>300ml milk</li>
      </ul>

• So far this is like any other list we've created.
• Now we'll add some checkboxes inside the <li> tag, but in front of the text.

        <li><input type="checkbox" name="flour">100g flour</li>
        <li><input type="checkbox" name="eggs">2 eggs</li>
        <li><input type="checkbox" name="milk">300ml milk</li>

• There are many types of inputs (text, radio selectors, buttons etc) so we need to define which type we want with type="checkbox".
• We also want to differentiate the items, so we name each using name="flour".
• Open your code in Live Server to see the square in front of your text. Try clicking it to see that it's actually an interactive checkbox.
• The bullets are now unnecessary, so let's remove them with CSS.

ul {
  list-style-type: none;
}

• list-style-type defines the type of bullet or number in front of your list items. 'none' removes bullets and numbers entirely.

Next: Menus