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

Raymond Franks
Raymond Franks
180 Points
Posted by Raymond Franks
Raymond Franks
180 Points

How do I extract the images from the img folder to this code challenge?

I downloaded the img folder from the video lessons, but I am not quite sure how to get the images into this coding challenge of unordered lists.

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></li><li></li><li></li>
      </ul>



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

3 Answers

lee F
lee F
1,564 Points
lee F
lee F
1,564 Points

It asks you to write ul with list items in the SECTION not to import pics

Braden Boaglio
Braden Boaglio
9,375 Points
Braden Boaglio
Braden Boaglio
9,375 Points

Yes, as Lee pointed out, all you need to do for this section is create the unordered list. No need to include any type of image source, just the unordered list.

Phil Pecoraro
Phil Pecoraro
984 Points
Phil Pecoraro
Phil Pecoraro
984 Points

You have to create an unordered list and then reference the image relative image locations for each list item. Here's a full example:

<ul>
        <li>
          <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Expirimentation with color and texture.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Playing with blending modes in Photoshop.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>Trying to create an 80's style of glows.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Drips created using Photoshop brushes.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p>Creating shapes using repetition.</p>
          </a>
        </li>
      </ul>

The file path in this case is "img/numbers-xx.jpg".