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 How to Make a Website Creating HTML Content Organize with Unordered Lists

Posted by Dan DiNardo
Dan DiNardo
180 Points

I am having trouble adding images in this section. I seem to have all the correct coding down, but cannot move on

I am having trouble adding images correctly in the practice phase of this section. I feel like I have everything down correctly, but it will not let me move forward. I have even checked it with my page i have been creating while following along. What am I doing wrong on this page?

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <ul>
        <li>
          <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">  
            <p></p>
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p></p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
             <img src="img/numbers-06.jpg" alt="">
            <p></p>
          </a>
        </li>
      </ul>
    </section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

2 Answers

Petros Sordinas
Petros Sordinas
16,181 Points

Hi Dan,

Step 2 instructs you to add the images without any links and the alt tags blank. So, your section div should look like this

<section>
  <ul>
    <li>
      <img src="numbers-01.jpg" alt="">
     </li>
    <li>
      <img src="numbers-02.jpg" alt="">
    </li>
    <li>
      <img src="numbers-06.jpg" alt="">
    </li>
  </ul>
</section>
Dan DiNardo
Dan DiNardo
180 Points

Thank You Petros!!!

Taki mhd
PLUS
Taki mhd
Courses Plus Student 1,714 Points
Taki mhd
Taki mhd
Courses Plus Student 1,714 Points

For this challenge, there is no need for link tags.

What you did here isn't what is required: 

        <li>
          <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">  
            <p></p>
          </a>
        </li>

There is also NO need for the paragraph tag to be included.

<p></p>

The wrapping container should be the SECTION tag, nested inside of this should be an unordered list. The List items should each include a different image.

So the code should be as such : 

   <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
  <section>
      <ul>
        <li><img src="numbers-01.jpg" alt=""></li>
        <li><img src="numbers-02.jpg" alt=""></li>
        <li><img src="numbers-06.jpg" alt=""></li>
      </ul>
   </section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

Cheers, Taki

Dan DiNardo
Dan DiNardo
180 Points

Thank You Taki!!!