HTML HTML Basics Structuring Your Content Structuring Content Challenge

code challenge: structuring content challenge

Challenge Task 4 of 4 Finally, place the top <ul> inside an element that represents a major section of navigation.

Bummer: Make sure the header element wraps the ul, h1 and p elements at the top of the page.
index.html <!DOCTYPE html> <html> <head> <header></header> <section> <link href="styles.css" rel="stylesheet"> <title>My Portfolio</title> </head> <body> <header> <nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li>
</ul> </nav> </header> <h1>My Web Design & Development Portfolio!</h1> <p>A site featuring my latest work.</p>

<h2>Welcome</h2> 
<p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget feugiat ante faucibus.</p>
<ul>
  <li><a href="#">Recent project #1</a></li>
  <li><a href="#">Recent project #2</a></li>
  <li><a href="#">Recent project #3</a></li>     
</ul>
</section> 

<footer> <p>© 2017 My Portfolio</p> <p>Follow me on <a href="#">Twitter</a>, <a href="#">Instagram</a> and <a href="#">Dribbble</a></p> </footer> </body> </html> Preview

Student Perks A collection of special discounts and exclusive offers available for Treehouse students.

Treehouse BlogShop TreehouseAbout TreehousePrivacy PolicyTerms & Conditions© 2019 Treehouse Island, Inc.

Am stucck please help, where am I wrong and where must be put the nav and/section to represent a major section of navigation.

index.html
<!DOCTYPE html>
<html>
  <head>
    <header></header>
    <section>
    <link href="styles.css" rel="stylesheet">
    <title>My Portfolio</title>
  </head>
  <body>
      <header>
        <nav>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>            
          </ul>
        </nav>
      </header> 
    <h1>My Web Design &amp; Development Portfolio!</h1> 
    <p>A site featuring my latest work.</p>

    <h2>Welcome</h2> 
    <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget feugiat ante faucibus.</p>
    <ul>
      <li><a href="#">Recent project #1</a></li>
      <li><a href="#">Recent project #2</a></li>
      <li><a href="#">Recent project #3</a></li>     
    </ul>
    </section> 
   <footer>
    <p>&copy; 2017 My Portfolio</p>
    <p>Follow me on <a href="#">Twitter</a>, <a href="#">Instagram</a> and <a href="#">Dribbble</a></p>
   </footer>
  </body>
</html>

3 Answers

Richard Verbraak
Richard Verbraak
7,703 Points

It seems like you forgot to wrap the h1 and the p at the top of the page inside the header.

It should look like this:

      <header>
          <nav>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Work</a></li>
              <li><a href="#">Contact</a></li>            
           </ul>
          </nav>
           <h1>My Web Design &amp; Development Portfolio!</h1> 
           <p>A site featuring my latest work.</p>
     </header> 

The <nav> is in the right place though!

Erik Krieg
Erik Krieg
43,037 Points

Hey Lauren. I took a look at the HTML you shared and the challenge you are working on and think I have figured out what doesn't line up.

First thing, you HTML has a few HTML formatting issues:

  1. <header></header> tags in the <head> element should be deleted.
  2. <section> tag in the <head> element should be deleted.
  3. There is currently a closing </section> tag under the second <ul> element, as expected, but you need that opening <section> tag above the <h2>Welcome</h2> element as one of the requirements of the challenge.

That last thing you will need to do to met the requirements of the challenge is move the first <h1> and <p> into the <header> element, as this is the requirement for the first step of the challenge.

Hope this helps!

Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer

You are very close! However, there are a few tags that seem to be misplaced.

Step 1: You need to move the closing tag for the <header> to encompass the <nav>, <h1>, and <p> elements. So that would look like this:

    <header>
      <nav>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Contact</a></li>            
        </ul>
      </nav>
      <h1>My Web Design &amp; Development Portfolio!</h1> 
      <p>A site featuring my latest work.</p>
    </header>

Step 2: There is a extra <header></header> element on line 4 that needs to be removed. The opening <section> tag also needs to be moved further down, just above the <h2>Welcome</h2> element.

<head>
  <header></header>  <!-- This line needs to be removed -->
  <section>  <!-- This needs to be moved -->
  <link href="styles.css" rel="stylesheet">
  <title>My Portfolio</title>
</head>

Step 3: As mentioned above the opening <section> tag needs to be moved just above the <h2> element, directly after the closing tag for the <header> like so:

<section>
    <h2>Welcome</h2> 
    <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget feugiat ante faucibus.</p>
    <ul>
      <li><a href="#">Recent project #1</a></li>
      <li><a href="#">Recent project #2</a></li>
      <li><a href="#">Recent project #3</a></li>     
    </ul>
</section>

I hope this was able to help, and if you have any further questions do not hesitate to ask!