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 Build the Contact Page

Posted by Nicollette Whitfield
Nicollette Whitfield
4,526 Points

My website does not look like the video. My Navigation bar is not visible, though I can select the pages if I click wher

I can see my contact page on my home screen. Is this an html problem or css? I was unable to download html code for this lesson but the css looks fine. Can someone tell me what I could be doing wrong?

Nicollette Whitfield
Nicollette Whitfield
4,526 Points

I CAN't see my contact page...

Nicollette Whitfield
Nicollette Whitfield
4,526 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Nicollette Whitfield | Designer </title> <link rel="stylesheet" href="css/normalize 5.css"> <link href='https://fonts.googleapis.com/css?family=Oswald:400,700|Yanone+Kaffeesatz' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">

</head> <body> <header> <a href ="index.html" id="logo"> <h1>Nicollette Whitfield</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 Texture and Color.</p>
         </a>
    </li>
    <li>
      <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
         <p>Photoshop Blending.</p>
         </a>
    </li>
    <li>
      <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
         <p>Color Fun.</p>
         </a>
    </li>
    <li>
      <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
         <p>Trials in Light.</p>
         </a>
    </li>
    <li>
      <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
         <p>Repetitive Pattern.</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/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class= "social icon"></a>
  <p>&copy; 2016 Nick Pettit.</p>
</footer>
  </div>

</body> </html>

Nicollette Whitfield
Nicollette Whitfield
4,526 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Nicollette Whitfield | Designer </title> <link rel="stylesheet" href="css/normalize 5.css"> <link href='https://fonts.googleapis.com/css?family=Oswald:400,700|Yanone+Kaffeesatz' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">

</head> <body> <header> <a href ="index.html" id="logo"> <h1>Nicollette Whitfield</h1> <h2> Designer</h2> </a>
<nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html" >About</a></li> <li><a href="contact.html" class= "selected">Contact</a></li>

    </ul>
  </nav>
</header>
<div id="wrapper">
  <section>
    <h3> Contact Information </h3>
      <p>Hello, to contact me I can be reached by email, twitter, or by phone </p>
      <p>Please only use phone for urgent inquires</p>
  </section>
   <section>
    <h3> Contact Details</h3>
      <ul class="contact.info"</ul>
        <li class="phone"><a href="tele:555-6666">555-6666</a></li>
        <li class="mail"><a href="mailto:nicollette.whitfield@gmail.com">nicollette.whitfield@gmail.com</a></li>
        <li class="twitter"><a href="http://twitter.xom/intent/tweet?screen_name=nicolletterenee"@nicolletterenee></a></li>
 </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>&copy; 2016 Nick Pettit.</p>

</footer>
  </div>

</body> </html>

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Your links to the contact.html file look fine. Since this is a file you create yourself and isn't present in the workspace at the beginning of the video, I'd suggest that you double check that the file you made is actually named "contact.html". Keep in mind that it's case sensitive. It could be something as simple as you accidentally named it "contacts.html" which would then point to a file that doesn't exist.

Nicollette Whitfield
Nicollette Whitfield
4,526 Points

I missed a closing bracket in my contact html! Thank you so much! I can move on to the next module now!

Nicollette Whitfield
Nicollette Whitfield
4,526 Points

Pasted both the index html and the contact page html. I could see the navigation bar but I lost it during one of the modules??? Would that be a CSS problem or a HTML problem? I'm stumped.

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

I'm not sure what you mean when you say that you can not see your contact page on your home screen? Do you mean that you can not see the link "contact" on your home page, or do you mean that you can not see the entire page when you click the link "contact"?