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 HTML Basics Structuring Your Content Structuring Content Challenge

Eric Sharp
seal-mask
.a{fill-rule:evenodd;}techdegree
Eric Sharp
Front End Web Development Techdegree Student 1,442 Points

I need help with this code challenge

where do I place the section tags?

index.html
<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Portfolio</title>
  </head>
  <body>
  <header>  
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>            
    </ul>
    </header>


    <h1>My Web Design &amp; Development Portfolio!</h1> 
    <p>A site featuring my latest work.</p>


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

4 Answers

K Cleveland
K Cleveland
21,839 Points
   <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
    </section>  
      <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>

Check out this part. Does each opening tag have a closing tag? Do you have extra elements that you don't need? You've got the right area.

Not section tags but nav. The challenge asks for a "major section of navigation" so it means that you've got to add a pair <nav></nav> tags around the <ul>...</ul> like so:

  <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>
K Cleveland
K Cleveland
21,839 Points
<ul>
  <li><a href="#">About</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Contact</a></li>            
</ul>
<h1>My Web Design &amp; Development Portfolio!</h1> 
<p>A site featuring my latest work.</p>

That's the original. <header> tags work just fine for part 1 of this challenge. However, Eric is asking about Part 3.

You have two closing section tags and one opening section tag. Thats invalid code. I ddnt look at the challenge, but you need an opening and closing tag for each section.

Consider adding an opening tag after the first closing tag.

Opening section tag = <section> Closing section tag = </section>

Also, indent your code . Itll make it easier to spot next time.

@keaunna and @aaron are right: you have one extra </section> in your code. Like @aaron said, it's always a very good idea to use proper indentations so matching open and closing tags line up. Doing so makes everything easier to read and spot problems.

This should pass.

<!DOCTYPE html>
<html>

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

            <h1>My Web Design &amp; Development Portfolio!</h1> 
            <p>A site featuring my latest work.</p>

        </header>

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

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