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 Grouping Content Challenge

Chanju Singha
Chanju Singha
1,995 Points
Posted by Chanju Singha
Chanju Singha
1,995 Points

Group each set of h3 and p elements using an element that describes self-contained pieces of content.

help me with this?

index.html 
<!DOCTYPE html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet">
    <title>My Blog</title>
  </head>
  <body>
    <header>
      <h1>My Web Design &amp; Development Blog!</h1> 
      <nav>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Articles</a></li>
          <li><a href="#">Recent Work</a></li>            
        </ul>
      </nav>
    </header>

    <h2>The Main Articles</h2>   

    <main>
      <article>
      <h3>My Favorite HTML Courses</h3> 
      <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget <a href="#">feugiat ante faucibus</a>.</p>
      </article>

      <article>
      <h3>10 Handy CSS Features</h3> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et <a href="#">ultrices posuere</a>.</p>    
      </article>

      <article>
      <h3>Follow Me on Social Media:</h3>
      </article>
     </main> 
    <ul>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">LinkedIn</a></li>     
    </ul>

    <footer>
      <p>&copy; 2017 My Blog</p>
    </footer> 
  </body>
</html>

3 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

It looks like you did a bit too much. The instructions said "Group each set of h3 and p elements..." but they did not mention the set with the h3 and ul.

Also, you'll be adding just one type of element for each step, but here on step 1 it looks like you added two (article and main).

Carson Cole
Carson Cole
902 Points

This was helpful to me Steven. The challenge question didn't mention anything about the h3 and ul. Also, paying attention to h2 heading helped me determine which attribute the question was looking for.

Moinul Haq
seal-mask
.a{fill-rule:evenodd;}techdegree
Moinul Haq
Front End Web Development Techdegree Student 11,178 Points
Moinul Haq
.a{fill-rule:evenodd;}techdegree
Moinul Haq
Front End Web Development Techdegree Student 11,178 Points

<!DOCTYPE html> <html> <head> <link href="styles.css" rel="stylesheet"> <title>My Blog</title> </head> <body> <header> <h1>My Web Design & Development Blog!</h1> <nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Recent Work</a></li>
</ul> </nav> </header> <main> <h2>The Main Articles</h2>
<article> <h3>My Favorite HTML Courses</h3> <p>Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa. Pellentesque tristique ex ac ipsum hendrerit, eget <a href="#">feugiat ante faucibus</a>.</p> </article>

 <article>

<h3>10 Handy CSS Features</h3> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et <a href="#">ultrices posuere</a>.</p>    
</article>
</main>
<aside>
<h3>Follow Me on Social Media:</h3>
<ul>
  <li><a href="#">Twitter</a></li>
  <li><a href="#">Facebook</a></li>
  <li><a href="#">LinkedIn</a></li>     
</ul>
</aside>
<footer>
  <p>&copy; 2017 My Blog</p>
</footer>

</body> </html>

Moinul Haq
seal-mask
.a{fill-rule:evenodd;}techdegree
Moinul Haq
Front End Web Development Techdegree Student 11,178 Points
Moinul Haq
.a{fill-rule:evenodd;}techdegree
Moinul Haq
Front End Web Development Techdegree Student 11,178 Points

It looks like you did a bit too much. ( set with the h3 and ul is extra)

Also, you will be adding just one type of element for each step, but on step 1 it looks like you added two