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

Iulia Kraiter
Iulia Kraiter
858 Points
Posted by Iulia Kraiter
Iulia Kraiter
858 Points

Not able to add images to the web design Workspace and challenge problem

Hello all,

I am on the web design challenge problem that says to add the pictures "numbers-01.jpg" "numbers-02.jpg" and "numbers-06.jpg" to the site. The directions say not to add links or captions, and to leave the alt value blank so I left the captions out, and I tried to submit the code with I type the lines of code I get it wrong. Below is the code I have for that section. I don't think I'm supposed to add the <a href="img/number-0__.jpg> (the blank standing for the number that is supposed to replace it) and the closing tag after the relative path, but I tried to submit the exercise with and without the link (with just the <img src="img/numbers-01.jpg" alt=""> part) but I still got the problem wrong. Another mysterious thing is when I click on the preview button, nothing shows up on the screen (but a blank white bar across the page).

I checked the coding and it doesn't look like I have any problems there, and I tried to see if writing image or Image work instead of img, because to make the link to the website I am making in Workspace, I needed to write Image, but it still didn't work.

Another thing about adding images to my workspace is that don't see the images themselves until I click on the caption of the image I wrote. This may be because of a mistake I made earlier. The mitake is crazy, but here it is: When I first opened workspaces, there was a welcome tab and a Index.html tab. I made a new Index.html tab because Nick said to do that in the video, but the work I was doing in it didn't show up when I clicked the preview button, so I switched to working in the tab that was originally there. A little later I decided to delete the Index.html tab that I created to work in the one that was already there, but when I went to delete it, I thought I deleted the one I made when I deleted the one that was originally there.

Because of this, when I click the preview button it takes me to a page where it says "Index of/" in big bold letters, and below that there was at first only one link in small print, that said "Index.html" that I could click on to see the website I was making, but now there is the "Images/" link where I can see a list of links to the images I uploaded to Workspace and put in the images folder (when I click on it- on the "Images link/"). The link at the top of that page says Parent Directory, and when I click on that it takes me back to the "Index of/" page.

I wish there was something I could do to fix this, but I have a feeling I will need help from the Treehouse teachers and administrators with this one.

Thanks,

iulia

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>
          <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src=img/numbers-02.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
            <img scr="img/numbers-06.jpg" alt="">
                                                </a>
        </li>
      </ul>
    </section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
Iulia Kraiter
Iulia Kraiter
858 Points
Iulia Kraiter
Iulia Kraiter
858 Points

I found that the problem with not being able to see anything on the preview screen was due to the screen reing rolled all the way down so I only saw the bottom of it, with or without the href links and the closing tags that they need.

2 Answers

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

may best for you, use codepen to see your result, you same hint here.

<!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
Iulia Kraiter
Iulia Kraiter
858 Points

Hello Amy, I'm sorry to take 20 days to get back to you but I've been tutoring some students and it's taken up all my time to prepare the materials, but I will try to be be more focused on my courses. My question to you now is what is codepen (I've never heard of it but briefly looked it up and it looks like it's a website to help web designers make websites), and are the links that you put in the answer supposed to work because the pictures show that they have broken links, but the words to click on do take me to a new page but it says bummer, it appears the page you're looking for doesn't exist. The etwitter and facebook logo links have a broken image but they do take me to Nick's facebook and Twitter Pages. I think what I should do is delete this account though and create a new one. I will do that.

Thanks,

Iulia

Iulia Kraiter
Iulia Kraiter
858 Points
Iulia Kraiter
Iulia Kraiter
858 Points

Actually, is there a way I can unenroll to sign back up again? I don't see a way of deleting my account.

Thanks,

Iulia