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

Posted by Rik Johnson
Rik Johnson
393 Points

I'm stuck @ Web Design Challenge task 1 of 3

Well, I tried marking down the code, but I don't really know how to ask my question without providing the "challenge" code and then the code I added. :(

In the tutorial 'Creating HTML Content ~ Stage 3' I have a challenge to create a navigation element... easy enough, right? The directions say, "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." So after the 'href= link (inside the /headr), I added my nav element and nested a 'ul' open & close, then closed the nav.

Unfortunately, I got the dreaded red box that says, "Bummer! Be sure your <nav> element is directly after the link in the header." So I thought to take the instructions more literal and placed my code DIRECTLY behind the href link, but that didn't work either. Any tips/advice/suggestions?

I've only been writing code (html, css, javascript) since March 11 of this year, so go easy on my 'newbness.' Thanks!

Jeff Busch
Jeff Busch
19,287 Points

Hi Rik,

Let's start with this so we can see your code. If you look to the bottom right of the text box you will see something that says Markdown Cheetsheet. If you don't understand that maybe this will make sense: How to display code at Treehouse

Jeff

Rik Johnson
Rik Johnson
393 Points

Thanks Jeff, I was using the wrong " ' "!

OK, here we go w/the code:

      <a href="index.html">
         <h1>Nick Pettit</h1>
         <h2>Designer</h2>
      </a>
   </header>```

I started with:
```<header>
      <a href="index.html">
         <nav>
            <ul></ul>
         </nav>
         <h1>Nick Pettit</h1>
         <h2>Designer</h2>
      </a>
   </header>```

Fail.  So I tried a more literal approach...
```<header>
      <a href="index.html"><nav><ul></ul></nav>
         <h1>Nick Pettit</h1>
         <h2>Designer</h2>
      </a>
   </header>```

Also failed.  I'm obviously missing something.  :/
Rik Johnson
Rik Johnson
393 Points

Problem solved. In my webdev bootcamp, they drill into us "Always always always close what you open, THEN code." So, naturally, I opened a nav tag and an unordered list tag and I closed both. The 'challenge' didn't like that I closed the nav & ul tags. :(

Sorry to be a bother, but at least I learned key ( ``` ) to use when doing markdown! =D Thanks for your help, Jeff - I really appreciate it.

4 Answers

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

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.

<header>
      <a href="index.html">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
        </ul>
      </nav>
    </header>
A X
A X
12,842 Points

@Jeff Busch: Your code fails the challenge. It's correct, but it fails the narrow constraints of the challenge.

Rik Johnson
Rik Johnson
393 Points
Rik Johnson
Rik Johnson
393 Points

Oh screen shot! DUH - good idea. Thanks again, Jeff! : )

Rik Johnson
Rik Johnson
393 Points
Rik Johnson
Rik Johnson
393 Points

Jeff, how did you get a screen shot (if that is a screenshot) into the post? Photobucket hosts my pics and I tried all four of their copy options (Email & IM, Direct, HTML, and IMG), but the best I can produce is a link to the photo.

Rik Johnson
Rik Johnson
393 Points
Rik Johnson
Rik Johnson
393 Points

I got it - I was messing up the syntax. The link you provided for Markdown is a bit more clear than the "Markdown Cheatsheet."