Portfolio: Navigation

Create the Navigation List

In this exercise, we're going to build a list-style navigation system. Navigation systems are one of the most important pieces of web design. Not only does it need to look good, but it needs to be functional and well-organized.

A list-style navigation system is the most common form of navigation. The two biggest advantages for us are that it can be styled using CSS and it's easy to update if we need to make a change down the road.

Building a Navigation Menu

Create the List

We have five pages in our portfolio:

We will need to create a list each of these items

  1. It's difficult to place the cursor directly in the navbar <div>, so start by placing the cursor in the header <div>
  2. Then, hit the down arrow on your keyboard – you should see your cursor placed in the navbar <div>
  3. Type "Home" in the navbar <div>
  4. Highlight the "Home" text with the cursor
  5. In the Properties Inspector, click the Unordered List button (see image below)
  6. You may see the bullet point for the "Home" text fall outside of the wrapper <div> tag – this is because we cleared all the default padding and margin values for the document. Don't worry about this bullet point, we will take care of this later
    • Note: if you don't see the bullet point, this could be because the monitor resolution for your screen is set too low for you to see the entire layout centered within the Document Window
    • If you want to double check to make sure the bullet point was applied to the "Home" text, place your cursor somewhere inside the "Home" text
    • Look down at the bottom of the Document Window in the Tag Selector. You should see the <ul> and <li> tags listed after the <body> <div#wrapper> <div#navbar> tags in the Tag Selector. See the image below
  7. Place the cursor right after the text "Home"
  8. Hit the enter/return key on your keyboard to drop down a line
  9. Type "Resume" then hit the enter/return key on your keyboard
  10. Continue to finish the list for all five (5) pages – you need:
    • Home
    • Resume
    • Education Research
    • Career Exploration
    • Showcase
  11. Your list should look like the image below. Note: the navbar <div> tag is only 25 pixels tall, so it doesn't expand to fit the list as it is now. Don't worry about how this looks – we will style the list so it is displayed horizontally and will fit inside the navbar <div>

Next Steps

In the next exercise, you will insert link placeholders to simulate links for the navigation menu

Click here for the next tutorial