Lesson 2: Creating a Navigation Menu

Overview

In the previous lesson you learned about ordered and unordered lists. One very common type of list that appears on web pages is a navigation menu. What is a navigation menu? It's a list of links. Therefore, it should be coded as such. In this lesson, you create an unordered list of links that will serve as the navigation menu for your web portfolio.

Learner Outcomes

At the completion of this exercise:

Activities

  1. Return to index.html in your portfolio website. Add a new nav element. Place it after the div element that contains school course information and before the div element that contains the series of headings and paragraphs you created for each unit. When you create the new nav element, be sure to include its closing </nav> tag.
  2. Inside this new nav, create another unordered list. This one should contain the following items (each item represents a separate web page that you will be creating in your portfolio):
    • Home
    • Accessibility
    • Usability
    • Graphics
    • Javascript
    • Tools
    • Video
  3. Save, and refresh your page in the browser to check your work. Does the new content appear as a bulleted list? If so, congratulations! You've created a navigation menu. Ok, so it doesn't look like, or function like, a navigation menu yet. That will come later. In the next module, you'll learn to create links so each of the items menu can be turned into a link to the other pages of your portfolio site. Finally, in Unit 3, you'll learn how to stylize your list using CSS so that it looks more like you expect a navigation menu to look.

Resources/Online documents

All done?

After you have saved the changes to index.html, show your instructor your results before starting Module 4.