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 Jason Peay
Jason Peay
16,515 Points

Code challenge

How do I link my three list items, Portfolio should go to “index.html,” About should go to “about.html,” and Contact should go to “contact.html. Every time I try to link the three items, I receive this message. Oops. It looks like task 2 is no longer passing.

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>
      </a>
      <nav>
        <ul>
          <li>Portfolio</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <section></section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

5 Answers

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

You link your list-items like this:

<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
Shawn Ramsey
Shawn Ramsey
27,237 Points
Shawn Ramsey
Shawn Ramsey
27,237 Points 
<li><a href="index.html">Portfolio</a><li>
<li><a href="about.html">About</a><li>
<li><a href="contact.html">Contact</a><li>

This should do it.

Nico Julian
Nico Julian
23,657 Points
Nico Julian
Nico Julian
23,657 Points

Hi,

Just inside the list items, add an anchor tag with the address to the page you want to link to inside the href attribute.

<!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>
dman10345
dman10345
7,109 Points
dman10345
dman10345
7,109 Points

To make list items navigate to another page in your website, or another page in general, you must create anchor tags with a href attribute pointing to your desired location.

<ul class='navigation'>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Me</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

Just ensure that you have all of these html files in the same directory.

Hope this helps, Happy Coding!

Jason Peay
Jason Peay
16,515 Points
Jason Peay
Jason Peay
16,515 Points

Thank you, Henrik for your help