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 trialKhrystyna Grebenjuk
6,232 PointsIt looks loke you removed h1 element Why?
Where is the problem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Nick Pettit</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>
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: 'Tangerine', sans-serif;
font-size: 1.75 em;
font-weight: normal;
}
4 Answers
Martin Zarate
10,723 PointsDefinitely, there is a bug with that challenge. It should work fine, other than the extra space between the 1.75 and the em, but I tried and still does not work. Hopefully, Treehouse has a solution for it.
andren
28,558 PointsThe error message is misleading, but this is not a bug in the challenge, but one caused by errors in your code.
You have added a <style>
tag on the 8th line of the HTML document which does not belong there and which is not closed which breaks the rest of the HTML code. That is what causes the challenge to be unable to find the h1
element.
You also have a space between "1.75" and "em" in your CSS rule which is invalid as spaces are not allowed in CSS between values and their types.
If you fix those two issues like this:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Nick Pettit</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>
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
main.css
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: 'Tangerine', sans-serif;
font-size: 1.75em;
font-weight: normal;
}
Then your code will be accepted.
Jennifer Nordell
Treehouse TeacherHi there! There is not a bug with the challenge, but rather a problem in the HTML file. Immediately after your link to the google font you added a beginning <style>
tag, but you never added a closed </style>
tag. So the elements are not being properly closed and nested. At this point, it can't make it down to the h1 to even check it. As Martin notes, your CSS needs a space removed between the 1.75
and the em
. It should look like this: 1.75em;
.
If I remove the <style>
tag and the extraneous space in your CSS, the code passes all 3 steps!
Martin Zarate
10,723 PointsGood to know. Interesting that the code does not fail until step 3, but the extra <style> tag is included in step 1. Thank you for your help!
Jennifer Nordell
Treehouse TeacherIt's actually not that surprising in my opinion. The first step is checking for the link to the Google font which happens before the insertion of the extraneous non-closed tag. So that part was in place and passing. In step 2, it passes because it's just checking the CSS I think. But I believe the 3rd step is actually checking the cumulative effects on the h1 element as a total, but it can no longer be seen. That's my understanding of it at any rate.
Khrystyna Grebenjuk
6,232 PointsThanks:)