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 trialJordan Feige
2,937 PointsFont Size
In this code challenge, it won't say it is correct when I code the font size as h1{font-size: 1.75em;} pretty sure this is correct but it keeps saying it isn't! Please help thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/cs
<link rel="stylesheet" href="css/main.css">
s'>
</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: 'Changa One', sans-serif;
font-size: 1.75em;
font-weight: normal;
}
Jordan Feige
2,937 PointsSet the size of your H1 to 1.75 em and the weight to normal.
Jesse Lawson
11,159 Pointsrather than
font-weight: normal;
just use
weight: normal;
Jordan Feige
2,937 PointsOkay thank you!
4 Answers
wuworkshop
3,429 PointsThere's nothing wrong with your original CSS. font-weight
is correct. You have a syntax error in your HTML. Some HTML was accidentally moved around.
If you look at the syntax highlighting, the color is wrong around the 3 link elements you have here:
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/cs
<link rel="stylesheet" href="css/main.css">
s'>
Do you see how the last line is really a part of the second link element? Just change your HTML to the following:
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
Jesse Lawson
11,159 Pointsha, ima noob
Jordan Feige
2,937 PointsI have another question towards my website. I am on the part where it is doing the float and image sizes so there are always two images next to each other. It doesn't want to work for me. Could you check out my code and see what errors I made?
wuworkshop
3,429 PointsSure, did you post your code somewhere in the forum?
Jordan Feige
2,937 Points/**************** GENERAL ****************/
body{ font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; }
/******************* HEADING *******************/
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Changa One', sans-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; }
/******************* FOOTER *******************/
footer{ font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
/******************* PAGE PORTFOLIO *******************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7 }
/******************* COLORS *******************/
/* site body*/ body{ background: #fff; color: #999; }
/* black header*/ header { background: #2B1B17; border-color: #FF0000; }
/* nav background on mobile*/ nav { background: #726E6D; }
/* logo text */ h1, h2 { color: #fff; }
/* links*/ a { color: #8adbff; }
/* nav link / nav a. nav a: visited { color: #bda456; } /*selected nav link/ nav a.selected, nav a:hover { color: #fff; }
Here is my CSS code.
wuworkshop
3,429 Pointsuh, could you wrap it in the Markdown format for code? Would make it a LOT easier to spot syntax mistakes since we would see the syntax highlighting. Like the way you did it in your original post. Like so:
body { background: firebrick;}
An easy way to check your code for syntax mistakes is to run it in the W3C's CSS Validation Service. I just copied and pasted your CSS and it came up with a few errors.
Jordan Feige
2,937 PointsThere are a few things wrong with my website and I can't seem to figure them out. For example, the font won't work, I can't get the phone and email logos to be correct on the contact page, and my pictures are still in one column which they should be in like 2 or 3 I think. What is the easiest way for me to send you all of my code for you to check?
wuworkshop
3,429 PointsBy far, the easiest way is to have all your code in a Workspace and then just provide the preview page link.
Also, you should get into the habit of validating your own code to spot for syntax mistakes. Here's W3C's validation tools:
HTML Validation: http://validator.w3.org/#validate_by_input
CSS Validation: http://jigsaw.w3.org/css-validator/#validate_by_input
Jordan Feige
2,937 Pointshttp://port-80-mm4f7gd6kp.treehouse-app.com
My preview link.
Jordan Feige
2,937 Pointshttp://port-80-mm4f7gd6kp.treehouse-app.com
My preview link.
wuworkshop
3,429 PointsHmm... for some reason your link doesn't work. I get this error message:
Workspace Unavailable
This is a preview link for a Treehouse Workspace that is not currently active.
If you are the workspace owner, you can launch it again via the Treehouse site.
Jesse Lawson
11,159 PointsJesse Lawson
11,159 Pointswhat does the code challenge say?