Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Adding Pages to a Website Add a New Page

404 Not Found

After making about.html file I try to open About in preview all it say 404 not found nginx/1.6.2.. Please please help asap

Dean Osborne
Dean Osborne
3,775 Points

Hi Ayesha,

Could you post your code and i will try to help you.

I think there will be a problem with your link.

5 Answers

Ayesha, you should look for the naming of your about.html file, it should not be capitalized.

Yes you right ... this could be the problem.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ayesha Ghayas | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Ayesha Ghayas</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">
           <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 glow.</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>
         </li>
       </ul>
      </section>
     <footer>
       <a href="http://twitter.com/ayeshaghayas1"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/ayesha.ghayas"><img src="img/facebook-wrap.png" alt="Facebook Logo"
                                                      class="social-icon"></a>
       <p>&copy; 2014 Ayesha Ghayas.</p>
      </footer>
    </div>
  </body>
</html>
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Ayesha,

I edited your post so your code appears correctly.

Wayne Priestley
Wayne Priestley
19,579 Points

Ayesha,

You've posted your code for your index.html page, could you post you about page html.

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.

You have to make sure you have a bit of space under your last line of text in your post. Then you add three back ticks followed by html or css depending on the type of code your inserting.
Then straight after your last line of code you add another three back ticks.
Remember to leave at least a few lines between any text at the top or bottom of your code.

alt text

Hope this helps.

Dean Osborne
Dean Osborne
3,775 Points

Hi Again,

Thanks for posting your code. I have had a look and i have found something that might be causing your problem. If you look below your opening header tag there is a anchor element that contains you h1 and h2 elements, the closing anchor tag </a> is not indented correctly. This could be the problem, correct this and try to load the page again.

<header>
  <a href="index.html" id="logo">
    <h1>Ayesha Ghayas</h1>
    <h2>Designer</h2>
  </a>

I hope this helps.

Can you please tell me how to indent correctly?

Wayne Priestley
Wayne Priestley
19,579 Points

Hey Dean & Ayesha,

It's okay, indentation won't cause this problem.

Dean Osborne
Dean Osborne
3,775 Points

Hey Wayne,

That's good to know, everyday is a school day.

Wayne Priestley
Wayne Priestley
19,579 Points

You're right about that Dean :)
As long as you have all the necessary code, indentation will never make a difference, its only a visual help to allow you to read the code clearly.

Hi Ayesha,

I notice that your code isn't in html, head or body tags. Maybe you just didn't include it in the snippet, or maybe you left them out. If it's the second case, try this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ayesha Ghayas | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
</head>

<body>

<header>
  <a href="index.html" id="logo">
    <h1>Ayesha Ghayas</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">
       <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 glow.</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>
     </li>
   </ul>
  </section>
 <footer>
   <a href="http://twitter.com/ayeshaghayas1"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <a href="http://facebook.com/ayesha.ghayas"><img src="img/facebook-wrap.png" alt="Facebook Logo"
                                                  class="social-icon"></a>
   <p>&copy; 2014 Ayesha Ghayas.</p>
  </footer>
</div>
</body>
</html>

sorry but I dont understand

Sorry, I was having trouble with the formatting. Do you have the html, head and body tags in your code? Check out my snippet now and let me know if it helps.

Make sure both your index.html and about.html files have these tags.

Wayne Priestley
Wayne Priestley
19,579 Points

Hey Elizabeth,

Ayesha does have those tags, they just couldn't be seen as her post wasn't formatted correctly. I have fixed that issue.

Dean Osborne
Dean Osborne
3,775 Points

Good spot Elizabeth.

Ayesha, I would suggest watching the lesson again. Maybe you missed some vital information. Also make sure your code is a replica of Nicks.

I have had to watch videos several times before I started to understand the info.