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 Connie Cooper
Connie Cooper
1,229 Points

Got stuck on this one...............

I am having trouble with all these long codes and not able to get through my quizzes.Any help?

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><img src="img/numbers-01.jpg"alt="">
         <li>img src="img/numbers-02.jpg"alt=""</li>
      <li>img src="img/numbers-06.jpg"alt=""</li>
        </li>
      </ul>
    </section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
Kelvin Simon
Kelvin Simon
6,209 Points

Hey, so it looks like you didn't close in your second and third images with the angle brackees like your first image and I would put a space before the alt "" attribute and add your closing list tag outside your first image, you have two after the third image. Your last section of code should look like this 

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

2 Answers

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Connie,

Looks like you're running into a few issues here.

I'll post your code with comments about what went wrong, then I'll post the working code:

<ul>
        <li><img src="img/numbers-01.jpg"alt=""> <!-- The closing list tag for this tag is below your third list tag.-->
         <li>img src="img/numbers-02.jpg"alt=""</li> <!-- You're missing the angle brackets to create the tag here.-->
      <li>img src="img/numbers-06.jpg"alt=""</li> <!-- Also missing the angle brackets here. -->
        </li> <!-- This should be placed at the end of the first list item. -->
</ul>

Here is the code that will work:

<ul>
        <li><img src="img/numbers-01.jpg"alt=""></li>
        <li><img src="img/numbers-02.jpg"alt=""></li>
        <li><img src="img/numbers-06.jpg"alt=""></li>
 </ul>

Keep the faith, as you work with html more it becomes second nature to spot these things.

Good luck!

Jason Replogle
Jason Replogle
6,991 Points
Jason Replogle
Jason Replogle
6,991 Points 
        <li><img src="img/numbers-01.jpg"alt=""></li>
        <li><img src="img/numbers-02.jpg"alt=""></li>
        <li><img src="img/numbers-06.jpg"alt=""></li>
 </ul>

It's always good practice to include a short, yet precise, description for screen reader software within the alt="" for those that may be visually impaired or neuroatypical. 
Example (A picture of an American Flag):  <li><img src="img/AmericanFlag.jpg"alt="A picture of an American Flag"></li>