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

Problem completing challenge

It reads: “Portfolio list item should link to "index.html".”

Here's what I've typed:

<!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>© 2013 Nick Pettit.</p> </footer> </body> </html

Please help, thanks!

8 Answers

Hi Mark,

Go back to the code you were using from your first screenshot. The links should be inside the list items. It's invalid html otherwise.

Here's the nav markup I just used to pass the challenge:

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

I was going to say I don't see any difference other than you have some extra spaces but I just noticed that your quotes are different. The quotes are slanted. Not sure how you got those typed in but try changing to the straight quotes. The quotes that you have above for the charset and for the logo link look correct.

If by chance you still have your code up that's not passing you can try pasting my code block from above into the code challenge alongside your code and compare line by line to see any differences.

try this first, nav element in header tag and inside the nav element you have unordered list that contains your list items and in your list items refence the place or folder of your file or page that has extension .html by something like that '''<li><a>Portfolio</a></li> '''

Alex Gustafson
Alex Gustafson
14,207 Points

Now you're just missing parentheses at the end of your href attribute.

Alex Gustafson
Alex Gustafson
14,207 Points

Now you're just missing parentheses at the end of your href attribute.

capture code navbar

Alex - not sure what you mean buddy: I'm sure my code is exactly the same as yours: https://www.dropbox.com/s/hqecz3l95axd19y/Screenshot%202014-03-29%2023.17.50.png

Alex Gustafson
Alex Gustafson
14,207 Points

In your previous screenshot you were missing the second quotes. You have them here.

Check out Jason's answer regardless, I think he's got to be right about the quotes you're using being a different character.

Alex Gustafson
Alex Gustafson
14,207 Points

Make sure you provided anchor elements for each list item. This allows each item in the list to link to their appropriate pages.

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

**Edit: Your screenshot wasn't up when I first posted. The Code Challenge probably just expects to see your anchors around your list items, not inside of them.

This is invalid html. You can't have links around li elements. li and scripting elements are the only direct children allowed in a ul element.

Alex Gustafson
Alex Gustafson
14,207 Points

You're absolutely right, Jason.

I just couldn't find anything else wrong with Mark's code that wouldn't make it pass the Code Challenge, tried this and it passed. But yeah, plug it into a validator and it sends up red flags.

Nice find on the quotes! I never would've noticed that.