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 Rory McGuire Krueger
Rory McGuire Krueger
727 Points

"Make sure you display image tag "numbers-01.jpg" error. Cant seem to find the hold up.

My code in workshop previews the image perfectly, but within the quiz it cant get past "numbers-01.jpg" error, although I have matched it (i think) perfectly. here is my quiz code, am I missing something?-

<!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=""> </a>
</li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> </a> </li> </ul>

</section>
<footer>
  <p>&copy; 2013 Nick Pettit.</p>
</footer>

</body> </html>

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="">
             </a>     
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
             </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
          </a>
        </li>
      </ul>

    </section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

Yes delete img/ . I think somewhere along the way they lead you astray and make you think the images are in that directory (maybe the video preceding this?) but in this case the images are not in that directory.

3 Answers

Rory McGuire Krueger
Rory McGuire Krueger
727 Points

delete the /img?

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

...also don't put them inside of anchor tags. 

<!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>
Rory McGuire Krueger
Rory McGuire Krueger
727 Points

Thanks Brandon, the advice helped. You're right, it was misleading. The transfer from the video to the quiz assumed we had the for sight to know the location paths would change, and what that would require of us.

Rory McGuire Krueger
Rory McGuire Krueger
727 Points

Thanks Brandon, the advice helped. You're right, it was misleading. The transfer from the video to the quiz assumed we had the for sight to know the location paths would change, and what that would require of us.

Rory McGuire Krueger
Rory McGuire Krueger
727 Points
Rory McGuire Krueger
Rory McGuire Krueger
727 Points

<!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="numbers-01.jpg"> <img src="numbers-01.jpg" alt=""> </a>
</li> <li> <a href="numbers-02.jpg"> <img src="numbers-02.jpg" alt=""> </a> </li> <li> <a href="numbers-06.jpg"> <img src="numbers-06.jpg" alt=""> </a> </li> </ul>

</section>
<footer>
  <p>&copy; 2013 Nick Pettit.</p>
</footer>

</body> </html>

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

Remove the anchor tags and just add an image tag inside the list item

Rory McGuire Krueger
Rory McGuire Krueger
727 Points

Yea I did not think it would be that simple. Thanks!