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

renee harris
renee harris
2,513 Points
Posted by renee harris
renee harris
2,513 Points

in my workspace preview, /about.html shows only text when i navigate to it from home page. so does typing in /index.html

i copied the text from the index.html page into the new about.html page and edited the code, deleting the #gallery, adding nick's picture, summary and twitter contact and everything looked good.

i clicked the preview button at the top to view the page and the home page displayed as it should correctly, however when i clicked the navigation link to open my about.html page it only displays the html code on the page.

the url updates to .treehouse-app.com/about.html and when i change it to index.html, that page also only shows up as text.

is anyone else having this problem or is it just user error in some way?

6 Answers

Koda Jones
Koda Jones
2,785 Points

@renee harris

You did not wrap your content in the <!DOCTYPE html> tags.

See below!

<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<title>Renee Harris | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http:fonts.googleapis.com/css?family=Change+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>Renee Harris</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="Photograph of Nick Pettit" class="profile-photo">
    <h3>About</h3>
    <p>Hi, I'm Renee Harris! This is my design portfolio where I share all of my favorite work. When I'm not designing things, I am Neflixing or doing some art project.</p>
    <p>If you'd like to follow me on twitter, my user name is <a href="www.twitter.com">@blah</a></p>
  </section>
<footer>
  <a href="www.facebook.com"><img src="img/facebook.png" alt="facbook" class="social-icon"></a>
  <a href="www.twitter.com"><img src="img/twitter.png" alt="twitter" class="social-icon"></a>
  <p>&copy; Renee Harris</p>
</div>
</footer>
</body>
</html>
renee harris
renee harris
2,513 Points
renee harris
renee harris
2,513 Points

they were there when i pasted in the comments

Koda Jones
Koda Jones
2,785 Points
Koda Jones
Koda Jones
2,785 Points

Check to make sure your <html></html> tags are wrapped around the content and that all tags around body and content are closed.

It may be helpful to share your code!

Josiah

Erik Nilsen
Erik Nilsen
20,433 Points
Erik Nilsen
Erik Nilsen
20,433 Points

I don't know without looking and its been awhile since I did that particular challenge. If you include your code, I can take a look. :)

renee harris
renee harris
2,513 Points
renee harris
renee harris
2,513 Points

here is the code from my about page '''<DOCTYPE! html> <html> <head> <meta charset="utf-8"> <title>Renee Harris | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http:fonts.googleapis.com/css?family=Change+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>Renee Harris</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="Photograph of Nick Pettit" class="profile-photo">
    <h3>About</h3>
    <p>Hi, I'm Renee Harris! This is my design portfolio where I share all of my favorite work. When I'm not designing things, I am Neflixing or doing some art project.</p>
    <p>If you'd like to follow me on twitter, my user name is <a href="www.twitter.com">@blah</a></p>
  </section>
</div>
<footer>
  <a href="www.facebook.com"><img src="img/facebook.png" alt="facbook" class="social-icon"></a>
  <a href="www.twitter.com"><img src="img/twitter.png" alt="twitter" class="social-icon"></a>
  <p>&copy; Renee Harris</p>
</footer>

</body> </html> '''

renee harris
renee harris
2,513 Points
renee harris
renee harris
2,513 Points

ok, scratch my previous comment....

although i did declare my doctype: <DOCTYPE! html>

you can see, i did mistype it. correcting it to:

''' <!DOCTYPE html> '''

man...i feel embarrassed :|

so, i changed it in my workspace, but now (even after closing workspace and reopening) the preview code still shows my typo, but the code within the workspace window shows the:

''' <!DOCTYPE html> ''''

renee harris
renee harris
2,513 Points
renee harris
renee harris
2,513 Points

way to go, JOSIAH RICHARDS!

you brought attention to my typo, so you get the best answer award :D

also, i think my browser is going wonky on me. not only did it not put the previous comment in the code format, but after i cleared all the settings i could check in my chrome settings, i was able to open my workspace back up and it displayed correctly in the preview browser!

thanks for the speedy help guys!

Koda Jones
Koda Jones
2,785 Points
Koda Jones
Koda Jones
2,785 Points

renee harris hey no worries! We all make mistakes, no need to feel embarrassed ! What's awesome is you figured it out! Great job!