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
Lawson E Whitesides III
1,246 PointsCode Challenge: Organize with unordered lists
I've been on this lesson for a few days, I'm having a devil of a time trying to write code that displays the images for the second part of this two part lesson. Everything looks correct to me, but I'm obviously getting something wrong. Please help!
9 Answers
alex mattingley
7,508 PointsOk, first issue is you are not opening the unordered list.
Then it looks like you might be having issues with the calling of your images. Your code should look like this:
<ul>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
In the quotation marks you need to make sure you include the path to the image. This is really really important that you get this part right, and its something that I struggled with alot when I first started. I am going to assume that your images are in an img folder somewhere on your computer.
Edit: A good test to see if your problem is the image location and not the actual code is to use place holder images from the web. That way you cant screw up the path.
Check this out:
Hope that helps!
Lawson E Whitesides III
1,246 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> <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>© 2013 Nick Pettit.</p> </footer> </body> </html>
Hope you can see the whole thing I have written
David Tonge
Courses Plus Student 45,640 PointsHi Lawson,
Would you mind posting the code you submitted to the challenge?
Lawson E Whitesides III
1,246 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> <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>© 2013 Nick Pettit.</p> </footer> </body> </html>
Hope you can read this
Lawson E Whitesides III
1,246 PointsHow can I post my entire code instead of one line?
Lawson E Whitesides III
1,246 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> <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>© 2013 Nick Pettit.</p> </footer> </body> </html>
Lawson E Whitesides III
1,246 PointsInside 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!
My code:
<li>
<"img/numbers-01.jpg">
</li>
<li>
<"img/numbers-02.jpg">
</li>
<li>
<"img/numbers-06.jpg">
</li>
</ul>```
Lawson E Whitesides III
1,246 PointsMy whole code from the lesson:
<!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/numbers-01.jpg">
</li>
<li>
<"img/numbers-02.jpg">
</li>
<li>
<"img/numbers-06.jpg">
</li>
</ul>
</section>
<footer>
<p>© 2013 Nick Pettit.</p>
</footer>
</body>
</html>
Lawson E Whitesides III
1,246 PointsThank you David Tonge and Alex Mattingley for all your help; I really appreciate it!
Rafael Ferreira
13,086 PointsLawson, did you get it? I saw you last post and still a little detail missing. Here is the part you got wrong.
<ul>
<li>
<"img/numbers-01.jpg" />
</li>
<li>
<"img/numbers-02.jpg" />
</li>
<li>
<"img/numbers-06.jpg" />
</li>
</ul>
Make sure to close the "img" tag. (<"img/numbers-06.jpg" />)
David Tonge
Courses Plus Student 45,640 PointsHi Rafael,
He got it. We guided him to the answer. By the way, your syntax is off. You're missing the img element.
<ul>
<li>
<img src="img/numbers-01.jpg" />
</li>
</ul>
Rafael Ferreira
13,086 PointsThat's great! I thought he didn't get it. Wow I didn't notice that I missed that img element. I might have deleted it when I was trying to stylize my code. Thanks David
Lawson E Whitesides III
1,246 PointsDavid,
Thanks for all your help, I will let you know if I have any other questions.
- Lawson
David Tonge
Courses Plus Student 45,640 PointsNo problem. Feel free to mention me if necessary.
David Tonge
Courses Plus Student 45,640 PointsDavid Tonge
Courses Plus Student 45,640 PointsI just formatted his original code and Alex you're correct. Lawson E Whitesides III you aren't using the src attribute in your img element.
Lawson E Whitesides III
1,246 PointsLawson E Whitesides III
1,246 PointsI appreciate the help. You're right, my struggles are with the path to the image. My new code now looks like this:
However I am still unable to see the images. How can I create a way of being able to get them from my computer to the screen? Am I corrector in thinking it will take more than what I'm currently writing?
Thanks!
David Tonge
Courses Plus Student 45,640 PointsDavid Tonge
Courses Plus Student 45,640 PointsThe problem now is that you're copying the path to the image wrong. Take your time when typing your code out.
<li><img src="img/numbers-02.jpg"></li>