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 Add Image Gallery Content

Iulia Kraiter
Iulia Kraiter
858 Points

Problem with viewing images in web design track

Hello everyone,

In the web design track, I made added images to my web page in the workspace area, and at first I couldn't see the pictures because I wrote a piece of the code incorrectly and then copied it to the next 4 images, but after I corrected the code, I can only see the images when I click on the link of the description. (Nothing is shown where the images should go on the web page.)

What I think the reason for this is that when I started the track, I opened Workspaces and I made an "index.html" tab as Nick had said to do in the video, to create the website. There was one with the same name already there, but I wanted to make "my own" so to speak. I stopped using the one I made though and started to work in the existing one, because I couldn't see the material that I was making in the tab I created when I clicked the preview button, but I could see it if I worked in the tab that was originally there.

Not long after, I went to delete the tab I created, and I know this is crazy but I deleted the one that was already there when I thought I went to delete the one I made. Now when I click the preview button it takes me to a page that only says "Index of/" in big bold type, and two links to what I have made in smaller letters. The first link says "Images/" and the second one says "index.html." If I click on the index,html tab, it takes me to the site I'm working on, except I can't see the photos I put in unless I click on the image description.

The first link, the "images/" link takes me to a page where I can see a link to each image, and each link is the name of the image that I uploaded into workspaces. The top link on that page says "Parent Directory," and when I click on it, it returns to the "Index of/" page. I think this is because I deleted the first index.html tab that was already in workspace for students to use, and now I find I am stuck because I can't see the images I put into the document.

I think I'll need help from Treehouse teachers and/or administrators to be able to see the images on the website I'm working on. Does anyone have any tips or pointers about anything I can do or anything that can be done to fix this problem?

Thank you,

Iulia

3 Answers

my best for you

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/magnific-popup.css"> <script src="js/jquery-2.1.3.js"></script> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/jquery.bad-plugin.js"></script> <script src="js/app.js"></script> </head> <body> <header> <a href="index.html" id="logo"> <h1>Nick Pettit</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg" class="magnific"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg" class="magnific"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg" class="magnific"> <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" class="magnific"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg" class="magnific"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>Ā© 2014 Nick Pettit.</p> </footer> </div> </body> </html>

Iulia Kraiter
Iulia Kraiter
858 Points

By the way, I noticed that the Index.html tab where Nick shows how to make the elements needed to code is under the how to make a website folder, but mine, the once I created is under the Images folder in the How to make a website folder, and I don't know how to get it out of the images tab and move it under the 'How to make a website folder' or how to make a new tab in the How to make a website folder, becuase I couldn't move the tab when I tried that (there is not option to move the Index.html tab when I right click on it, and there is no way to hilight the How to make a website tab so I deletled the Images file and the Index.html file and made a new index.html file but when I click on preview it still shows up as a link under the title "Index of/" that I need to click on to go to the website I'm working on.)

use codeine so you can see results

Sorry codepen