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 Cibele Ferreira
Cibele Ferreira
538 Points

image insertion

I don't get what the problem is... i am getting the first steps right then I have to insert the images... i am writing the following: <img src="img/numbers-01.jpg" alt=""> for the first <li> <img src="img/numbers-02.jpg" alt=""> for the second <li> <img src="img/numbers-06.jpg" alt=""> for the third <li>

I'd like to know what is wrong since it is what is said in the video tutorial...

8 Answers

Calvin Nix
Calvin Nix
43,828 Points
Calvin Nix
Calvin Nix
43,828 Points

Hey Cibele,

I believe that the challenge is complaining about the <nav> elements. Please remove these and retry your code. :)

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Calvin Nix - Looks like you are missing some markdown there.

I took at look at your actual text what we are seeing is

complaining about the elements

instead of

complaining about the <nav> elements.

In case you haven't already seen this, you can check out this post on how to type code in the forum for future reference.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Cibele Ferreira - Here's a hint, the directions make no mention of adding a <nav> element.

Cibele Ferreira
Cibele Ferreira
538 Points

I did put the nav one... i put the following:

<section> <nav> <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> </nav> </section>

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Cibele Ferreira - I can't see any code there, the forum uses markdown to correctly format code, check out this thread on how to type code in the forum for some examples.

Cibele Ferreira
Cibele Ferreira
538 Points 
        <section>
      <nav>
        <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>
      </nav>
    </section>
Cibele Ferreira
Cibele Ferreira
538 Points 
<section>
      <nav>
        <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>
      </nav>
    </section>
Cibele Ferreira
Cibele Ferreira
538 Points

Oh... i got it Thanks a lot

Cibele Ferreira
Cibele Ferreira
538 Points
Cibele Ferreira
Cibele Ferreira
538 Points

This problem occurred during a challenge... it says: "Inside the three new list items, add the following images from inside the img folder: "numbers-01.jpg", "numbers-02.jpg", and "numbers-06.jpg". Leave the alt attributes blank, and don’t add any captions or links. Just the images!"

Then I wrote the following:

<section>
      <nav>
        <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>
      </nav>
    </section>

I click on the preview then it shows as it is supposed to be... I can see the images etc... put when i press "check work" = "Bummer!"

Cibele Ferreira
Cibele Ferreira
538 Points
Cibele Ferreira
Cibele Ferreira
538 Points

??? I tried to remove, change names etc...

Calvin Nix
Calvin Nix
43,828 Points
Calvin Nix
Calvin Nix
43,828 Points

I just went through the code challenge and made sure that this code works. Please use the code in your challenge. If it does not pass please refresh your browser.

<!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"></li>
          <li><img src="img/numbers-02.jpg"></li>
          <li><img src="img/numbers-06.jpg"></li>
        </ul>
    </section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
Calvin Nix
Calvin Nix
43,828 Points
Calvin Nix
Calvin Nix
43,828 Points

Thank you James :) I didn't even catch that markup error.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Cibele Ferreira -

You've got several types of elements in the code you posted.

  • section: was part of the original starting code
  • ul: Asked for in step 1
  • li: Asked for in step 2
  • img: Asked for in step 2
  • nav: Not asked for in this code challenge

Remove the <nav> </nav> tags and you should be good to go.

Cibele Ferreira
Cibele Ferreira
538 Points

Sorry I wasn't paying attention, thanks again for your help

Cibele Ferreira
Cibele Ferreira
538 Points
Cibele Ferreira
Cibele Ferreira
538 Points

got it, thanks a lot

Calvin Nix
Calvin Nix
43,828 Points
Calvin Nix
Calvin Nix
43,828 Points

Hey Cibele,

A very common error involved with adding images is to not include the full path to the image. Since the images are in the img folder you will need to also include this in your code.

e.g.

<img src="img/picturenumber1.png" >

If you have already implemented this and are still receiving errors could you please provide the code that you are using?