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

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

Page Not Found

I created a new file called about.html. I copied/pasted the index.html code into this new about file. For some reason it says page not found. Which it should look identical to the index.html file. Is this okay? What can I do to change this?

Hi Lindsey,

This should work fine but could you post the HTML code within the <head> and `</head> tags please?

Thanks

-Rich

Ken Alger
Ken Alger
Treehouse Teacher

Lindsey;

Are you doing this in Workspaces or off site?

Ken

Here is my html code in the head tags:

<head>
        <meta charset="utf-8">
        <title>Lindsey Davis | Designer</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>

I am using the Workspaces!

Christian Lawrence
Christian Lawrence
3,941 Points

I think the problem might be more to do with your folder structure.

Does the unstyled HTML load? Is the about.html page in another folder?

Hi Lindsey,

Your <head> code seems fine and nothing that would prevent it loading. Is the new page within the same directory as the index.html you copied the code from?

Thanks

-Rich

10 Answers

It would look something like the image below. You can also upload your project to Dropbox for someone to take a look.

File Structure

Hi Lindsey, I'd recommend you check out the Treehouse video which goes into linking files together.

<!DOCTYPE html>
<hmtl>
    <head>
        <meta charset="utf-8">
        <title>Lindsey Davis | Designer</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header> 
            <a href="index.hmtl" id="logo">
                <h1>Lindsey Davis</h1>
                <h2>Designer</h2>
            </a>
            <nav>
                <ul>
                <li> <a href="index.hmtl" class="selected">Portfolio</a></li>
                    <li><a href="about.hmtl">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 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 src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"</a>
                    <a href="http://facebook.com/lindseynicoledavis"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"</a>
            <p>&copy; 2014 Lindsey Davis.</p>
            </footer>
        </div>
    </bod>
</hmtl>

Your closing <body> tag is missing y, and about.hmtl / index.hmtl should be about.html / index.html.

How can I check to see if this is in the same as index.html? I'm sure this has to do with the folder structure... though I've been looking at it for hours and can't figure it out. I can't move to the next step until I can fix this. I think my workspaces files and folders look almost identical to the one in the video.

Here is the link for Dropbox of a screenshot I took of what it looks like. Is mine wrong?

https://www.dropbox.com/s/7d3iuujrj9pk8gd/printscreen.docx?dl=0

I think it looks almost identical to the image above my last comment minus the about.html.

Can you post your whole about.html?

''' <hmtl> <head> <meta charset="utf-8"> <title>Lindsey Davis | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.hmtl" id="logo"> <h1>Lindsey Davis</h1> <h2>Designer</h2> </a> <nav> <ul> <li> <a href="index.hmtl" class="selected">Portfolio</a></li> <li><a href="about.hmtl">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 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 src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"</a> <a href="http://facebook.com/lindseynicoledavis"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"</a> <p>© 2014 Lindsey Davis.</p> </footer> </div> </bod> </hmtl> '''

''' <hmtl> <head> <meta charset="utf-8"> <title>Lindsey Davis | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.hmtl" id="logo"> <h1>Lindsey Davis</h1> <h2>Designer</h2> </a> <nav> <ul> <li> <a href="index.hmtl" class="selected">Portfolio</a></li> <li><a href="about.hmtl">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 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 src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"</a> <a href="http://facebook.com/lindseynicoledavis"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"</a> <p>© 2014 Lindsey Davis.</p> </footer> </div> </bod> </hmtl> '''

that is not what I posted... I'm unsure how that comment came out like that. Is there a way to post the entire code?

You can post code like this.

Posting Code to Treehouse

Thank you! Thank you! Thank you so very much!! Great lesson learned how small details really matter! It finally works :)

No problem :smiley: