Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Creating HTML Content Create Navigation with Lists

Posted by Yelena Reynolds
Yelena Reynolds
237 Points

how do you add a list item with the word portfolio in it

why does my computer say add a list item with the word portfolio in it when I already have a list item that says portfolio

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
        <nav>
          <li>Portfolio</li>
          <li>About</li>
          <li>Contact</li>
          <ul>
      </a>
    </header>

    <section></section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

2 Answers

Darrel Brannock
Darrel Brannock
3,961 Points
Darrel Brannock
Darrel Brannock
3,961 Points

Were you asked to use "portfolio" or "Portfolio"?

Mike Hickman
Mike Hickman
19,817 Points
Mike Hickman
Mike Hickman
19,817 Points

Hi Yelena,

You're missing a few tags which is why it's not seeing "Portfolio" in your list. Let's go over the challenges real quick.

Challenge 1: Create a navigation element with an unordered list element after the link inside the header. Don’t add any list items or links just yet.

You want:

<a href="index.html">
  <h1>Nick Pettit</h1>
  <h2>Designer</h2>
</a>
<nav>
  <ul>
  </ul>
</nav>

This code places a navigation block and an empty unordered list as asked. When it says to do it after the link, it means after you see the closing < /a > tag, which is the end of the link. Remember that with a href, nav, ul, li, header and an assortment of other tags, you need an opening tag: < ul > and a closing tag of < /ul > after you place your content inside. You're currently missing the opening < ul > tag and the closing < /nav > tag for challenge 1.

Challenge 2: Inside the navigation element, create three list items with the words, “Portfolio”, “About”, and “Contact”. Don’t add links yet.

You wrote your list items and code out perfectly, but just accidentally forgot to open/start the unordered list tag <ul> before them. In challenge 2 your code should look like:

<nav>
  <ul>
    <li>Portfolio</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

You open your nav, open an unordered list, place your list items, close your unordered list, and close your nav.

Challenge 3: Link each of the three list items. Portfolio should go to “index.html”, About should go to “about.html”, and Contact should go to “contact.html”.

Here, we want to take the lists we've already made, but just make it so when we click the words "Portfolio", "About" and "Contact", they each go to their individual pages. So, we take the < a > link, give it a path to go to, and close the link tag < /a > after the word. This surrounds the word with a link and makes it an active, clickable link.

<nav>
  <ul>
    <li><a href="index.html">Portfolio</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

The final code should look like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section></section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

Hope this helps. I know it's long, but I hope it made sense for you.

Good luck! Mike