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 Randhir Rana
Randhir Rana
4,754 Points

Why is my contact page not working?

Here is my code:

<section>
      <h3>General Information</h3>
      <p>I am not Currently looking for new design work, but i am availabel for speaing gigs and similar engagements. If you have any questions dont hesitate to call me.</p>
      <p>Please onlyl use phone contact if it is emergency</p>

     </section>

    <section>
      <h3>Contact Details</h3>
        <ul class="contact-info">
            <li class="phone"><a href="tel:555-6643">"555-6643"></a></li>
            <li class="mail"><a href="mailto:randyrana24@gmail.com">"randyrana24@gmail.com</a></li>
            <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=turnupnightlife">@turnupnightlife</a></li>
        </ul>

    </section>
Randhir Rana
Randhir Rana
4,754 Points 
<nav>
      <ul>
        <li><a href="index.html" >Porfolio </a> </li>
        <li><a href="about.html" >About</a></li>
        <li><a href="contact.html" class="selected">Contact</a></li>
      </ul>
    </nav>
Randhir Rana
Randhir Rana
4,754 Points

There is a section tag above not sure why it didnt show up.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Your 3 opening backticks have to be on their own line. Optionally you can put the language after the 3 backticks. Your code then begins on the next line down.

Could you explain what's not working?

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Hey Rana, Could you explain what's not working?

<section>
      <h3>General Information</h3>
      <p>I am not currently looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions don't hesitate to call me.</p>
      <p>Only use phone contact if urgent.</p>
</section>

<section>
      <h3>Contact Details</h3>
        <ul class="contact-info">
            <li class="phone">Phone:<a href="tel:555-6643">"555-6643"</a></li>
            <li class="mail">Email:<a href="mailto:randyrana24@gmail.com">"randyrana24@gmail.com</a></li>
            <li class="twitter">Twitter:<a href="http://twitter.com/intent/tweet?screen_name=turnupnightlife">@turnupnightlife</a></li>
        </ul>
</section>

10 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Rana Randhir ,

Your filename is "contacts.html" with an 's' but your link is "contact.html"

I would rename the file and see if that fixes it.

When I tested it in workspaces I found that if the contact page is missing then it will stay on the portfolio page

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The contact link looks correct to me.

When you check the sidebar of workspaces do you see "index.html", "about.html" and "contact.html" all spelled exactly like that and in lowercase? They should all be together in the same top level folder.

Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

Basically when i check preview and select the hyper link of contacts it doesn't open and show the contact page. Instead it shows the portfolio page.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

What page are you on when you click the "Contact" link?

Can you post the header section of that page?

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Hey Rana,

So if the page stays the same then usually a link in not active (no destination or it is linked to the same page). Try using the code below. Each link works on my computer, Hope this helps.

<section>
      <h3>General Information</h3>
      <p>I am not currently looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions don't hesitate to call me.</p>
      <p>Only use phone contact if urgent.</p>
</section>

<section>
      <h3>Contact Details</h3>
        <ul class="contact-info">
            <li class="phone">Phone:<a href="tel:555-6643">"555-6643"</a></li>
            <li class="mail">Email:<a href="mailto:randyrana24@gmail.com">"randyrana24@gmail.com</a></li>
            <li class="twitter">Twitter:<a href="http://twitter.com/intent/tweet?screen_name=turnupnightlife">@turnupnightlife</a></li>
        </ul>
</section>
Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

I copied and pasted this code in, still no luck. Thanks for your help though Tommy.

Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

here is my header section:

 <header>
    <a href="index.html" id="logo">
      <h1> Randhir Rana</h1>
      <h2> Designer </h2>
    </a>
    <nav>
      <ul>
        <li><a href="index.html" >Porfolio </a> </li>
        <li><a href="about.html" >About</a></li>
        <li><a href="contact.html" class="selected">Contact</a></li>
      </ul>
    </nav>
  </header>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

This is the header section for "contact.html" correct?

You mentioned that when you click on the contact link that it takes you to the portfolio page. What page are you on when you do that and can you post the header section for that page?

Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

Yes originally when i hit preview it takes me to portfolio page, and when I select "contact" it stays on portfolio page. Here is the code header for portfolio.html

<header>
    <a href="index.html" id="logo">
      <h1> Randhir Rana</h1>
      <h2> Designer </h2>
    </a>
    <nav>
      <ul>
        <li><a href="index.html" class="selected">Porfolio </a> </li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

My folders read:

about.html contacts.html css folder img folder index.html

Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

Thanks Jason!. That did the trick lol. Can't believe it was a such a simple mistake. haha

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome, Rana.

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Simple mistakes are plenty when writing code, keep up the good work Rana.