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
Jessica Jones
216 PointsImage Content
I am trying to input an image gallery. Below is my html. When I preview it all I get is a question mark instead of the graphic. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jessica Jones | Designer</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Jessica Jones</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="">
<p>Experimentation with texture and color.</p>
</a>
</li>
</ul>
</section>
<footer>
<p>© 2014 Jessica Jones</p>
</footer>
</body>
</html>
10 Answers
Cian Mac Mahon
17,657 PointsHi there Jessica! I'm not sure you managed to paste the HTML in correctly. Could you try again, checking out the Markdown Cheatsheet? (which you can get just under the comment bot)
Jessica Jones
216 PointsI do not understand what the Markdown Sheet wants me to do.
Cian Mac Mahon
17,657 PointsNo problem! So which challenge are you working on at the moment? If it's challenge one, you should see something like
<!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>
</section>
<footer>
<p>© 2013 Nick Pettit.</p>
</footer>
</body>
</html>
Note how I could make the HTML appear formatted - that's because I put ``` before and after the code. Could you paste the code from your challenge into a reply, placing ``` before and after it?
Jessica Jones
216 PointsI am no doing a challenge. I am in the adding an image gallery content lesson and I have written the code exactly as the instructor and linked it to a photo that I downloaded per Treehouse instructions to my Workspace. When I preview it instead of the picture I get a white question mark with a blue background in a white bordered box.
Alexandra Silcox
24,486 PointsYou want to wrap your code with three back ticks. With the first set of backticks specify the type of code it is.
Cian Mac Mahon
17,657 PointsOh, I see. Could you show us your HTML, formatted with those back ticks I mentioned?
I suspect that you are trying to link to an image that doesn't exist, based on your description. Have you uploaded the file you are linking to to your workspace?
Jessica Jones
216 Points'''<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jessica Jones | Designer</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Jessica Jones</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="">
<p>Experimentation with texture and color.</p>
</a>
</li>
</ul>
</section>
<footer>
<p>© 2014 Jessica Jones</p>
</footer>
</body>
</htm>'''
Cian Mac Mahon
17,657 PointsWhoops! Nope, the back-tick is, on my Mac laptop anyway, directly to the left of the Z key. Sometimes it's directly under the esc key, either. Alternatively, feel free to copy-paste the ones that I used.
Also, you mentioned that you were trying to link to an image. I can't see any <img src=""> tag in what you pasted. That might be because not formatting HTML correctly (using the back ticks) can sometimes cause issues, or it might be because you copy-pasted the wrong thing. You need to copy paste the code that you wrote, not the stuff that you are seeing in the preview.
Jessica Jones
216 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jessica Jones | Designer</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Jessica Jones</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="">
<p>Experimentation with texture and color.</p>
</a>
</li>
</ul>
</section>
<footer>
<p>© 2014 Jessica Jones</p>
</footer>
</body>
</html>
Cian Mac Mahon
17,657 PointsOK - so the images you are linking to live in the /img/ folder. Have you placed the images in that folder on the workspace? If not, the browser won't be able to find them when it tries to load them.
Jessica Jones
216 PointsYes. I downloaded and dragged and dropped and they show up in my Workspace files. So obviously there is something wrong with the program and not me.
Cian Mac Mahon
17,657 PointsIf you think you've found a bug, your best bet is to let Treehouse know about it. Click the 'Contact Support' button on the Workspaces page to let them know.
Alexandra Silcox
24,486 PointsYour code does look right and you say that img folder and its contents are present within the workspace. Try refreshing the project folder by right-clicking in the dark grey area and hitting refresh. If that doesn't work, try clearing your browser cache. If that doesn't work, definitely contact support. Best of luck!
Anis Hoffman
1,570 PointsI think I know what your problem is because I had the same issue.
Make sure that the "img" folder is at the same "level" as the "index.html" file. My image folder was originally nested in the "HowToMakeAWebsite-Stage3-Video2" folder because I dragged it from my desktop into Workspaces and this is why the images were breaking.
To fix this, just drag both the "img" folder and the "index.html" file into the top-level "How to Make a Website" folder that was originally in the left hand side of Workspaces. Hope this helps.
Jessica Jones
216 PointsThanks for the help. I did a combination of all your suggestions and now it works. Everything looks exactly the same as when I started so not sure what the problem was. I guess the 75th time is the charm.
Cian Mac Mahon
17,657 PointsYay! I'm glad. Good luck in your future learning!