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

Gwen Nguyen
PLUS
Gwen Nguyen
Courses Plus Student 1,816 Points
Posted by Gwen Nguyen
Gwen Nguyen
Courses Plus Student 1,816 Points

Portfolio list doesn't link to "index.html"

Hi, I keep running into this problem during code challenge. Although I have linked Portfolio to "index.html", the BUMMER keeps saying that it's not linked. What could have happended??

Here is my code: <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> </li> </nav> <h1>Nick Pettit</h1> <h2>Designer</h2> </a> </header> <section></section> <footer> <p>© 2013 Nick Pettit.</p> </footer> </body> </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>
          </li> </nav>
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
    </header>
    <section></section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

4 Answers

Nicholas Grenwalt
Nicholas Grenwalt
46,626 Points
Nicholas Grenwalt
Nicholas Grenwalt
46,626 Points

Next to your closing 'nav' tag you have an extra closing tag for an 'li' that should be a 'ul' closing tag. It really to have your opening and closing tags aligned as well. Makes for a lot cleaner code that is easier to debug these such scenarios.

Gwen Nguyen
PLUS
Gwen Nguyen
Courses Plus Student 1,816 Points
Gwen Nguyen
Gwen Nguyen
Courses Plus Student 1,816 Points

Thank you. I made the change, but it still says "Portfolio list should be linked to index.html". I'm not sure what went wrong.

<!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</li>
     <li><a href="about.html">About</li>
     <li><a href="contact.html">Contact</li>

    </ul></nav>


    <h1>Nick Pettit</h1>
    <h2>Designer</h2>
  </a>
</header>
<section></section>
<footer>
  <p>&copy; 2013 Nick Pettit.</p>
</footer>

</body> </html>

Shawn Ramsey
Shawn Ramsey
27,237 Points
Shawn Ramsey
Shawn Ramsey
27,237 Points

You never closed your ul. It looks like you placed a closing li tag where this should be.

Give this a try.

<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>
tobiaskrause
tobiaskrause
9,160 Points
tobiaskrause
tobiaskrause
9,160 Points

Pretty easy. You mistake was in the link of the navigation element. You put a link over the whole navigation element...this way your li elements wont get their links (wont work since the nav element is a level higher) you had to link the h1 and h2 elements "Nick Pettit" and "Designer".

Wrong code part:

<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>
          </li> </nav>
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a> <!-- wrong postion it should look like this 
<a> 
<h1>Nick Pettit</h1>
 <h2>Designer</h2>
 </a> -->
    </header>

Right code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
<!-- A link over the headlines...not the 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>
      </li> </nav>
    </header>
    <section></section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
Gwen Nguyen
Gwen Nguyen
Courses Plus Student 1,816 Points
Gwen Nguyen
Gwen Nguyen
Courses Plus Student 1,816 Points

I see where I went wrong. The code works now. Thank you for your time!