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 Adding Pages to a Website Add a New Page

Posted by Andrew Lasick
Andrew Lasick
2,348 Points

Trouble with navigation!

Hello,

I've been working on the "how to make a website" lessons, and everything seemed to be going pretty smooth until I started adding pages.

When I go to preview my workspace, I am able to go to the Portfolio page to the About page. When I try to navigate back to my home page, I am left with a 404 Not Found error page. Here are my two .html documents as they were when I discovered the navigation error. I don't see where I went wrong, so hopefully someone is able to point out the error...or so I hope!

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Andrew Lasick | Pretend 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">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Andrew Lasick</h1>
        <h2>Not A Real 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">
              <img src="img/numbers-01.jpg">
              <p>Experimentation with color and texture.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg">
              <p>Playing with blending modes in Photoshop.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg">
              <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">
              <p>Drips created using Photoshop brushes.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg">
              <p>Creating shapes using repetition.</p>
            </a>  
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://www.facebook.com"><img src="img/facebook-wrap.png" class="social-icon"></a>
        <a href="http://www.twitter.com"><img src="img/twitter-wrap.png" class="social-icon"></a>
        <p>&copy; 2014 Andrew Lasick.</p>
      </footer>
    </div>
  </body>  
</html>

&

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Andrew Lasick | Pretend 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">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Andrew Lasick</h1>
        <h2>Not Really A Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/andrew.jpg" alt="Photograph of Me" class="profile-photo">
        <h3>About</h3>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas <a href="http://www.facebook.com">Titties</a>.</p>
      </section>
      <footer>
        <a href="http://www.facebook.com"><img src="img/facebook-wrap.png" class="social-icon"></a>
        <a href="http://www.twitter.com"><img src="img/twitter-wrap.png" class="social-icon"></a>
        <p>&copy; 2014 Andrew Lasick.</p>
      </footer>
    </div>
  </body>  
</html>

3 Answers

nnuxiragwh
nnuxiragwh
10,345 Points

Hi Andrew,

Your code looks fine, the only reason for it not to work I can think of is a problem with the workspace or the way you are naming your files. Did you check for typos and extensions?

Best,

Tomek

Andrew Lasick
Andrew Lasick
2,348 Points

Hello Tomek,

Thank you for replying. I suppose it could be a workspace issue. I've looked through everything several times looking for errors in spelling, and my html file extensions' names all match the links in my un-ordered list. Any other ideas?

Andrew Lasick
Andrew Lasick
2,348 Points

I found the culprit! My index.html file was using an uppercase I instead of lowercase i. Navigation is now working as intended. Thanks!

Andrew

Rolf Willems
Rolf Willems
2,249 Points
Rolf Willems
Rolf Willems
2,249 Points

Hi Andrew! I may have an idea, I just finished this course! Do you have the about.html and the contact.html files out the folders and at the same 'level' as the index.html files? So don't put them in any folder, just plain on the workspaces, next to your css and img folder! Check the names of the folders indeed as mr. Klekner suggested.

Good luck with the course!

Rolf

Andrew Lasick
Andrew Lasick
2,348 Points
Andrew Lasick
Andrew Lasick
2,348 Points

Hi Rolf,

I haven't created the contact.html yet. I had just started the video to create it when I noticed the navigation error. As for my index.html & about.html, yes, they are both placed, named and linked correctly and are not in a folder. I do appreciate the reply, though!

I'm thinking of transferring everything into a different text editor & finishing the project that way. If I still get errors, I'll at least know if it's something I'm doing wrong!

Cheers!