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

Posted by Iulia Kraiter
Iulia Kraiter
858 Points

Some of my work doesn't show on the preview page after I created it in workspaces.

Hello,

I'm starting out with the how to make a website track and I the header and footer (including the links in the footer) are not showing when I try to preview the page, and the first two pictures I put on the page do not show either.

I pasted the code below if anyone would like to help because I can't figure out what I did wrong.

Also on my page, the first item in the first unordered list is not bulleted, and when I click any of the items in the list a page comes up that says "Not found" and below that is says "Requested URL The requested URL /index.html> <h1> Nick Pettit </a> <h2> Designer </a> </a> <nav> <ul> <li><a href= was not found on this server."

For the About link, after the "Not Found" Header it says "The requested URL /About.html was not found on this server." and for the Contact link after the "Not Found" it says "The requested URL /Contact.html was not found on this server."

For the first and second pictures that do not show on the page, the sencences I wrote for each one do show as links but when I click on the links for the first picture is says "The requested URL /img/numbers-01.jpg> <img src= was not found on this server" after the "Not Found" sign

and for the second picture it says "The requested URL /img/numbers-02.jpg> <img src= was not found on this server." after the "Not Found" sign.

Also, a lot of the code is hilighted in red. I think that means that it's supposed to be incorrect but the part for all three pictures that do show on the preview page are hilighted in red but you can click on them to see the pictures by themselves and they do work.

I think work spaces may be confused, or could there be something wrong with the links for the first two pictures? (They are relative links.)

The code I wrote is: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> </head> <body> <header> <a href="index.html> <h1> Nick Pettit </a> <h2> Designer </a> </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 color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <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"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <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 scr="twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/nickpettit><img scr="facebook-wrap.png" alt="Facebook Logo"></a> </footer> </body> </html>

Thank you,

Iulia

Darren Healy
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

I think the issue is here Lulia:

<header>
  <a href="index.html> <!-- missing " -->
    <h1> Nick Pettit </a>
    <h2> Designer </a>
  </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>

The first a tag path after the header tag needs closed with another ", and the heading tags are improperly closed. See:

<a href="index.html">
    <h1> Nick Pettit </h1> <!-- closed with h1 -->
    <h2> Designer </h2> <!-- closed with h2 -->
  </a>

And it is the same issue with the images - a missing "

Some easy fixes :)

Darren

Gregory Katchmar
Gregory Katchmar
10,912 Points

At the top, s/b:

<html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> </head> <body> <header> <a href="index.html"> [you are missing a " here] <h1> Nick Pettit </a></h1> <h2> Designer </a></h2> [need closing tags here]

Missing closing " on the first two images

and at the bottom s/b:

</body> </html>

2 Answers

Tobias Helmrich
Tobias Helmrich
31,604 Points

Hey Iulia,

unfortunately there are multiple mistakes in your code. In this part

  <a href="index.html>
    <h1> Nick Pettit </a>
    <h2> Designer </a>
  </a>

you want to close the h1 and h2 tags instead of anchor elements and put closing quotes after your href attribute's value like so

  <a href="index.html">
    <h1>Nick Pettit</h1>
    <h2>Designer</h2>
  </a>

You also forgot to put closing quotes after the href attribute values in your anchor tag in your first two list items so you should change

  <li>
      <a href="img/numbers-01.jpg>
        <img src="img/numbers-01.jpg" alt="">
          <p>Experimentation with color and texture.</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-02.jpg>
        <img src="img/numbers-02.jpg" alt="">
        <p>Playing with blending modes in photoshop.</p>
      </a>
    </li>

to

    <li>
      <a href="img/numbers-01.jpg">
        <img src="img/numbers-01.jpg" alt="">
          <p>Experimentation with color and texture.</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="">
        <p>Playing with blending modes in photoshop.</p>
      </a>
    </li>

Lastly in the anchor elements in your footer you forgot to put closing quotes after the href value as well and you misspelled the "src" attribute (you wrote "scr").

<a href="http://twitter.com/nickrp> <img scr="twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/nickpettit><img scr="facebook-wrap.png" alt="Facebook Logo"></a>

To fix it you should write it like this:

<a href="http://twitter.com/nickrp"> <img src="twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/nickpettit"><img src="facebook-wrap.png" alt="Facebook Logo"></a>

I hope that helps, good luck! :)

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

Dear Darren, Gregory and Tobias,

I fixed the code in some spare time and am only coming back now to continue with the course.

Thank you SOOO much for your help though because all of the links are working now and all of the pictures that are relative links are showing and I want to thank you for helping me to get to this point. I will definitely note to check those mistakes first to see if I can catch them myself!

Thank you!

Iulia

Tobias Helmrich
Tobias Helmrich
31,604 Points

No problem, I'm glad you got it working, good job! :)

Darren Healy
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

Good stuff!