====== Web Development Lesson 3 - Lists ====== ===== Simple Lists ===== ==== Objectives ==== In this exercise you will create a bulleted list and a numbered list and learn some list-specific formatting rules. ===== Setup ===== * Open a new [[https://jsfiddle.net|jsfiddle]] tab. * Populate the HTML section with headings for 'Recipe', 'Ingredients' and 'Method'.

Pancake Recipe

Ingredients

Method

 ===== Numbered List ===== * Let's look at the Method first. Most recipes show the method as a numbered list since it's important to do the steps in order.

Method

  1. Mix ingredients
  2. Pour mix into pan
  3. Cook 1 minute on each side
  4. Serve
 * Run the code now and see that the browser automatically places a number at the beginning of each line, starting with '1'. * The
    stands for 'ordered list'. * Each item in the list is designated by the tag
  1. , which stands for 'list item'. * It looks like we forgot to heat the pan first. Let's add that step before we pour the mix.

    Method

    1. Mix ingredients
    2. Heat pan
    3. Pour mix into pan
    4. Cook 1 minute on each side
    5. Serve
     * What do you notice when you run the code? The numbers change automatically so that 'heat pan' becomes '2' and everything afterwards is incremented. ===== Bullet List ===== * Now let's look at the ingredients. The order of the ingredients doesn't matter, so they're not usually numbered.

    Ingredients

    • 100g flour
    • 2 eggs
    • 300ml milk
     * Run the code and see that instead of a number, we have a dot (or bullet) in front of each item. * It's as easy as this to create a list. Now let's see what we can do to change their appearance. ===== CSS ===== * Add the following style attribute to the method.