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

Victor Rodrigues
Victor Rodrigues
1,981 Points
Posted by Victor Rodrigues
Victor Rodrigues
1,981 Points

Hi there, I wrote this : <li><a href="index.html">Portfolio</a></li> but according to the exercice I'm wrong.

"Bummer! The Portfolio should link to index.html

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <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>  
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
    </header>
    <section></section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

2 Answers

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

Hi Victor, the reason is you are wrongly nesting your NAV element inside the first A element that is inside your HEADER section. This is what you have (I've added comments to make it understandable):

 <header>
      <a href="index.html"> /* This is your first link */
        <nav>
          <ul>
            <li><a href="index.html">Portfolio</a></li> /* WRONG: Children of your first link */
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>  
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
    </header>

This is wrong. This causes all your nav links to be children links of your first link. The h1, h2 and closing a tag must come before the nav tags. Your full code should be like this:

<!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>

You see how my nav element is no longer a child of my first link, which contains the headings for Nick Pettit and Designer?

Hope I helped!