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

Adding a new page, still an issue after fixing case of name

I copied over the text from the index file to the about file as instructed, and I've made sure that "about" is all lower-case uniformly. When I preview the file with all the section text deleted (after saving the file), I still get the index page rather than the about page. When I click on the about link from the index page I can see the about page. But the preview page from about.html won't take me there directly.

Any idea of what I could be missing or doing wrong?

10 Answers

Devin Scheu
Devin Scheu
66,191 Points

Ah, I see now what you are asking. You are not doing anything wrong, it loads both pages in the preview and index.html is your main page. Nick Pettit, who I am assuming is teaching the course, will show you how to link your about page to your index page. The preview doesn't load the page that you click preview on, it loads the whole page.

I hope this helps.

Devin Scheu
Devin Scheu
66,191 Points

Thanks for posting, can you post the code you are using so we may help you out?

Okay, here it is. Thanks!

<!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=Open+Sans+Condensed:300|Open+Sans:300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <style> footer { color: green; }
</style> </head> <body> <header> <a href="about.html" id="logo"> <h1>Nick Pettit</h1> <h2>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/nick.jpg" alt="photo of Nick" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Nick Pettit! This is my design portfolio where I share all of my favorite work.</p> <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/nickrp">@nickrp</a></p> <p>On Facebook, you can find me at <a href="http://facebook.com/nickpettit">facebook.com/nickpettit</a></p> </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>

Devin Scheu
Devin Scheu
66,191 Points

Hey, you must put 3 backticks at the beginning and end of your code so that it displays properly. Back ticks look like this: ' and are right above the tab on your keyboard.

Thanks Devin. I've done this, but still seeing the same results. The index page appears when I try to preview the about page.

Devin Scheu
Devin Scheu
66,191 Points

Im talking about on the form post of your code, it is not displaying properly, you need to put 3 backticks at the beginning and end of your FORM post code. My apologies for being unclear.

Ah, thanks for clarifying! Please let me know if there is still any problem displaying it. Here it is:

```<!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=Open+Sans+Condensed:300|Open+Sans:300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <style> footer { color: green; }
</style> </head> <body> <header> <a href="about.html" id="logo"> <h1>Nick Pettit</h1> <h2>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/nick.jpg" alt="photo of Nick" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Nick Pettit! This is my design portfolio where I share all of my favorite work.</p> <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/nickrp">@nickrp</a></p> <p>On Facebook, you can find me at <a href="http://facebook.com/nickpettit">facebook.com/nickpettit</a></p> </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>

Ah, thanks for clarifying! Please let me know if there is still any problem displaying it. Here it is:

```<!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=Open+Sans+Condensed:300|Open+Sans:300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <style> footer { color: green; }
</style> </head> <body> <header> <a href="about.html" id="logo"> <h1>Nick Pettit</h1> <h2>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/nick.jpg" alt="photo of Nick" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Nick Pettit! This is my design portfolio where I share all of my favorite work.</p> <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/nickrp">@nickrp</a></p> <p>On Facebook, you can find me at <a href="http://facebook.com/nickpettit">facebook.com/nickpettit</a></p> </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>

Thanks Devin. The confusing part for me is that, in Nick's video demo of how it should look after pasted over, it shows the about page. But as long as I'm not doing something wrong, I'll run with it and see how everything proceeds from here.

Thanks again!

Devin Scheu
Devin Scheu
66,191 Points

Yes, could you hit best answer on my answer above, so that other people know that your question has been answered.

Thank You!