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

Posted by ak37
ak37
2,344 Points

Structure Challenge

Anyone know what is wrong with the code below?

index.html 
<!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>

    <h1>My Web Design &amp; Development Portfolio!</h1> 
    <p>A site featuring my latest work.</p>
      </nav>
    </header>
  <article>
    <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>
  </article>
  <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

Simon walters
PLUS
Simon walters
Courses Plus Student 8,962 Points
Simon walters
Simon walters
Courses Plus Student 8,962 Points

Hi Ali

I have looked through your code and I believe that you have added the <article> elements rather than the <section> elements, I have attached your code below but edited and corrected, I hope this helps! 

  <!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>
     <h1>My Web Design &amp; Development Portfolio!</h1> 
     <p>A site featuring my latest work.</p>
     </nav>  
    </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>

Also when writing code, it helps if you break each section up as shown in my answer above, it will help you identify any errors much quicker and easier!

Simon

Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Valeshan Naidoo
Valeshan Naidoo
27,008 Points

Replace your article tags with section tags. Also your nav tags are supposed to include just the ul element, not the h1 and p elements.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

This is a common one that seems to catch some people out. But the challenge is tasking you with your ability to use Semantic markup. While each website is very individual and no website is always structured the same way there's a specific structure the code challenge is looking for.

I suggest reviewing the videos in this section which cover the different ways of grouping and structuring content in your code. Have fun :)