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
Catie Adams
1,919 Points404 error when adding contact page
Newbie Alert! I am working in "how to build a website". I've added my "about" page with seemingly no issues. I added the "contact" page and copied the code from "about". When I click on my Contact link, I receive a 404 error. What am I doing wrong? Thanks so much!
'''html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Catie Adams | Mom of Two</title> <link rel= "stylesheet" href= "css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Lora:400,700|Slabo+27px' rel='stylesheet' type='text/css'> <link rel= "stylesheet" href= "css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Catie Adams</h1> <h2> Code for Cora</h2> </a> <nav> <ul id="navagation"> <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="tree/numbers-01.jpg"> <img src="tree/numbers-01.jpg" alt=""> <p> comment of wisdom</p> </a> <li><a href="tree/numbers-02.jpg"> <img src="tree/numbers-02.jpg" alt=""> <p> comment of some sweet wisdom</p> </a> <li><a href="tree/numbers-06.jpg"> <img src="tree/numbers-06.jpg" alt=""> <p> comment of sweet sweet knowledge</p> </a> <li><a href="tree/numbers-09.jpg"> <img src="tree/numbers-09.jpg" alt=""> <p> comment of super sweet wisdom</p> </a> <li><a href="tree/numbers-12.jpg"> <img src="tree/numbers-12.jpg" alt=""> <p> All of out of things to say</p> </a> </ul> </section> </div> <foooter> <a href="https://www.yahoo.com"> <img src="tree/twitter-wrap.png" alt="twitter icon" class="social-icon"></a> <a href="https://www.facebook.com/catrina.adams.754"> <img src="tree/facebook-wrap.png" alt="facebook icon" class="social-icon"></a> <p>©2015 Catie Adams.</p> </foooter> </body> </html> ''' '''html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Catie Adams | Mom of Two</title> <link rel= "stylesheet" href= "css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Lora:400,700|Slabo+27px' rel='stylesheet' type='text/css'> <link rel= "stylesheet" href= "css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Catie Adams</h1> <h2> Code for Cora</h2> </a> <nav> <ul id="navagation"> <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> <img src="tree/catie.jpg" alt=" photo of catie adams" class=" profile-photo";> <h3>About</h3> <p> Hi, I'm Catie! Welcome to my portfolio website where I showcase my favorite projects! When I'm not writing code, I spend my time with my two beautiful children. I enjoy cooking and eating good food, learning about health and wellness, being outside, and coffee!</p> <p> For the latest in my life, keep up with me on <a href="https://www.facebook.com/catrina.adams.754">Facebook!</a></p>
</section>
</div>
<foooter>
<a href="https://www.yahoo.com">
<img src="tree/twitter-wrap.png" alt="twitter icon" class="social-icon"></a>
<a href="https://www.facebook.com/catrina.adams.754">
<img src="tree/facebook-wrap.png" alt="facebook icon" class="social-icon"></a>
<p>©2015 Catie Adams.</p>
</foooter>
</body> </html> ''' '''css /************************** GENERAL **************************/ body { font-family: 'Slabo 27px', serif; }
wrapper{
max-width:940px; margin:0 auto; padding:0 5%; } a { text-decoration:none; }
img{ max-width:100%; }
h3{ margin: 0 0 1em 0;
}
/************************** Heading **************************/ header{ float:left; margin: 0 0 30px 0; padding: 5px 0 0 0; width:100%; }
logo{
text-align: center; margin:0; } h1 { font-family: 'Lora', serif; margin: 15px 0; font-size:1.75em; font-weight:normal; line-height:0.8em; }
h2 { font-size:0.75em; margin:-5px 0 0; font-weight:normal; }
/************************** navigation **************************/
nav { text-align:center; padding:10px 0; margin:20px 0 0}
nav ul{ list-style:none; margin:0 10px; padding:0; }
nav li{ display: inline-block; }
nav a{ font-weight: 800; padding: 15px 10px; }
/************************** Page Portfolio **************************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float:left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color:#bdc37c; }
gallery li a p {
margin:0; padding:5%; font-size: 0.75em; color:#bdc3c7; }
/************************** Page About **************************/ .profile-photo { display:block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%;
}
/**************************
COLORS
*************************/
/*site body/
body{
background-color:#fff;
color:#999;
}
/* green header*/
header{
background:#3cb371;
border=color:pink;}
/* green nav background on mobile*/ nav{ background:#2e8b57; } /* white logo text*/ h1,h2 { color:#fff;}
/* links*/ a{color:#1e90ff; }
/* nav link*/ nav a, nav a:visited{ color:#fff; }
/* orange selected nav link*/ nav a.selected, nav a:hover{ color:#ffa500; }
/************************** Footer **************************/ footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; } '''
5 Answers
Jake Lundberg
13,965 PointsLooks like the issue is with your contact.html link. In one of the snippets above, you have contact.html capitalized. In the other you do not. In regard to links, they need to match your file names exactly...they are case sensitive.
Hope this helps!
Catie Adams
1,919 PointsSo the code does not appear here how I thought it would. I am not sure how to edit this post. I am not sure what to change to make it appear differently. Any and all tips are appreciated.
Jake Lundberg
13,965 Pointsyou will need to fix it in all your html files. and make sure the link you are putting in is the same as the name of the file you are using. also ensure that your files are in the same directory, otherwise you will need to specify the path.
Jake Lundberg
13,965 Pointsyou will need to fix it in all your html files. and make sure the link you are putting in is the same as the name of the file you are using. also ensure that your files are in the same directory, otherwise you will need to specify the path.
Catie Adams
1,919 PointsYes, that was it Jake. I still had a capital in "about". Thank you so much. I do have one other issue, if you can help. In my css, I've added "clear:both" to the footer. However, the images in the footer still appear upper right, instead of at the bottom of the page.
Jake Lundberg
13,965 Pointsthe clear:both for the footer is only stating that the footer itself should clear all floating elements. It doesn't do anything for the elements inside footer. if you want the social icons in the footer to be at the bottom of the footer element, you can specify a top margin on them, and that should push them down.
Catie Adams
1,919 PointsCatie Adams
1,919 PointsThank you! I fixed the capital C in the link on index.html. However, I am still receiving "file not found" when clicking on my contact link.