Exercise

  1. Start at the very top of the <body> element. Just after the opening <body> tag, create a new unordered list.
  2. Create list items for each of the sections we created in the above exercises with the class ‘new-section’.
  3. Then within each list item, create a link to the corresponding div id.
  4. Use the heading from each div as the link text.
  5. You should end up with a ‘jump list’, which will take you to each of the sections on your webpage. Finally, wrap a div with the id ‘jump-list’ around your list and that will bring this chapter to a close.

What we have learned in the HTML section: final code output

If you followed Part 1 exactly, you should end up with a webpage identical to the below code. Well done! You have just created a full webpage using a wide variety of the most vital HTML elements. We will be using this webpage for the subsequent sections, where we will be styling the HTML output that we have written, using CSS. This is where you can start to unleash your creative side as we make our website more visually pleasing and start to give our website a style. If you have not been able to complete all of the exercises, or if your code is different from the expected output below, it is vitally important that you alter your code to be identical to the below output.