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
Joey LoForti
Courses Plus Student 1,864 PointsSmells Like Bakin' Grids in CSS
Sorry to bug you but I have downloaded project files parts 2 and 3 to my documents library. I'm working with windows 7 and sublime text 2. I'm doing Smells Like Bakin' the part about Grids and CSS and I can't get my grids to work. Here is my code. I indented everything like he said but nothing is happening. . <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div> <div class="grid_8 omega"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="lastalt"><a href="#">Contact Us</a></li> </ul> </div> <div id="intro"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div>
<img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
<div id="feautured-cupcake">
<h2>Cupcake of the Week</h2>
<p>This week's featured cupcake is the <a href="#">Avacado Chocolate Cupcake</a>. Its strange combo of flavors will kick your taste buds into fiesta mode!</p>
<img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
</div>
<div id="new-cupcakes">
<h2>Fresh Out of the Oven</h2>
<p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy</a>. </p>
<img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
<img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
</div>
<h2>Inside the Kitchen</h2>
<p>Smells Like Bakin' started out in the garage of the husband wife duo Allison & Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck. </p>
<p><a href="#" class"btn-small">Read More</a></p>
<h2>Get Bakin' with Us</h2>
<div id="contact">
<p>Call Us: <span>1-555-CUP-CAKE</span><br>
Email Us: <a href="#">bakeon@smellslikebakin.com</a></p>
</div>
<p>We announce all of our new flavours first through Facebook & Twitter, and even take requests!</p>
<a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
<a href="https://twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="Twitter"></a>
<div id="copyright">
<p>© 2013 Smells like Bakin' Cupcake Company. All Rights Reserved.</p>.
</div>
</div> <body/> </html>
Arnold Omwango
Courses Plus Student 1,969 PointsHi Joey, Can you copy and paste the link as a message so I can have a look at where exactly you are referring to. It is right at the browser bar
Arnold Omwango
Courses Plus Student 1,969 PointsIt can also help to click on the code playground link to get an idea of how it should be done. I used this earlier on when I was attempting the challenges. Hope this helps
Joey LoForti
Courses Plus Student 1,864 Points
Arnold Omwango
Courses Plus Student 1,969 PointsIn the first task just add a div around the featured cupcake like so <div class=" container clearfix"> <div id="featured-cupcake"> </div>
Joey LoForti
Courses Plus Student 1,864 PointsI already did that. Don't worry I'm contacting support.
4 Answers
michaelfritch
8,216 PointsJust an aside, which may or may not pertain to your troubles. I gave your posted code a quick visual scan and noticed two typo's in your code already (the first div id & you are missing an '=" on the 'btn-small' class attribute). So you may just need to clean-up your code a bit... Or you may just need to clean up your code also.. either way :)
Also, this problem could have other causes outside of the index.html file...
Joey LoForti
Courses Plus Student 1,864 Pointslike what problems on the outside r u referring to sir?
michaelfritch
8,216 PointsI was referring to CSS or even the file structure... you mention the grids not working, but I don't see any grid related markup in your code either.
Joey LoForti
Courses Plus Student 1,864 Pointsbody{ font-family: 'Nunito', sans-serif; color: #FAF3BC; background: #420600 url('img/bg-texture.jpg') repeat; }
a { color: #4FB69F; text-decoration: none; }
h1 { font-size:1.750em; letter-spacing: -1.5px; }
h2 { font-size: 1.500em; color: #B4C34F; }
.btn { color: #FAF3BC; background: #4FB69F url ('img/texture.png') no-repeat right top; padding: 15px 30px; margin: 40px 0px; border-radius: 25px; text-transform: uppercase; }
.btn:hover { background-color: #4CC4A7; }
ul.nav { margin: 120px 0 0 0; list-style: none; float: right; }
ul.nav li { float: left; margin-right: 40px; }
ul.nav li a { color: #FAF3BC }
intro {
margin: 50px 0 75px 0;
}
new-cupcakes img {
border: 8px solid #FAF3BC;
margin 0 0 20px 0;
}
featured-cupcake img {
border: 8px solid #FAF3BC;
}
copyright {
border-top: 8px solid #2A0400;
padding: 10px 0px;
margin: 15px 0px;
text-align: center;
}
Joey LoForti
Courses Plus Student 1,864 PointsSorry this forum thing doesn't work right. I can't seem to copy and paste my code correctly. What you see above is my file style.css in the same library folder as my html code. The css isn't doing anything. I'm betting it's something unrelated to my code like file placement or structure or something but I still can't figure it out and I can't get a response from customer service they r just lazy. I'm paying 45 bucks a month and I think I deserve better service.
michaelfritch
8,216 Pointsul.nav li a { color: #FAF3BC } is missing a semicolon.
To show code you put three hash marks (the key to the left of the 1) before and after the code you want to show.
Is the stylesheet linked in the head section? Also, the grid requires additional code applied to your elements to make it function (this is added in as part of the lesson).
Joey LoForti
Courses Plus Student 1,864 PointsWell I'll finish the whole lesson again before I complain anymore. There's obviously something I'm not understanding. I have no idea if the style sheet is linked I just typed what they typed in the video but I'm not getting the same results. I downloaded all their files but other than that I don't know what I'm doing. I'm a major beginner at this stuff. Thanks for the input I will fix the errors in my code but something else technical is wrong outside of my code. I typed everything they typed in the video but I'm missing something. What could it be?
michaelfritch
8,216 PointsNo problem, man. I just started here yesterday myself, but I have had HTML and CSS classes at the local college a few years ago, so I am just doing these starting courses as a refresher before I jump into the more advanced lessons I came here for. The reason I mention that is because I already understood the lesson code on this one before I typed it out. Had I gone into those first lessons "cold" it might have been harder to follow. It's frustrating trying to find mistakes just starting out, but I can tell you from experience that these lessons are actually pretty well put together compared to a lot of what's out there. If you stick with it a while longer I think you will find HTML and CSS are pretty fun once you get over the initial learning bump.
Also, if you are doing the "Learn HTML & CSS Learning Adventure", which is where I am starting, then the next module will actually cover some of these topics in more detail. I think the reason they start with the "Coding a Simple Website" lessons is to give you a quick introduction and "hands-on experience" before launching into some of the less interactive (but more in-depth) vids that follow. Stick with it a bit, I think it will get better for you.
michaelfritch
8,216 PointsJust for your reference, here is what my index.html looked like at the end:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smells Like Bakin' Cupcake Company</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/grid.css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<div class="container clearfix">
<div class="grid_4">
<img src="img/logo.gif" alt="Smells Like Bakin">
</div>
<div class="grid_8 omega">
<ul class="nav">
<li><a href="#">About</a></li>
<li><a href="#">Cupcakes & Prices</a></li>
<li><a href="#">Locations</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="intro" class="grid_9">
<h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1>
<p><a href="#" class="btn">Browse Our Cupcakes</a></p>
</div>
<div class="grid_3 omega">
<img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
</div>
<div id="featured-cupcake" class="grid_7">
<h2>Cupcake of the Week</h2>
<p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combo of flavors will kick your taste buds into fiesta mode!</p>
<img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
</div>
<div id="new-cupcakes" class="grid_5 omega">
<h2>Fresh Out the Oven</h2>
<p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy</a>.</p>
<img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
<img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
</div>
<div class="grid_7">
<h2>Inside the Kitchen</h2>
<p>Smells Like Bakin' started out in the garage of the husband wife duo Allison & Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
<p><a href="#" class="btn-small">Read More</a></p>
</div>
<div class="grid_5 omega">
<h2>Get Bakin' with Us</h2>
<div id="contact">
<p>Call us: <span>1-555-CUP-CAKE</span><br>
Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
</div>
<p>We announce all of our new flavors first through Facebook & Twitter, and even take requests!</p>
<a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
<a href="https://twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="Twitter"></a>
</div>
<div id="copyright" class="grid_12">
<p>© 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
</div>
</div>
</body>
</html>
michaelfritch
8,216 Pointsgrrrr.... anyways, here are the links I was talking about in the head:
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/grid.css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
Joey LoForti
Courses Plus Student 1,864 Pointsthanks
Joey LoForti
Courses Plus Student 1,864 PointsJoey LoForti
Courses Plus Student 1,864 PointsThe code didn't all show
<title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div> <div class="grid_8 omega"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="lastalt"><a href="#">Contact Us</a></li> </ul> </div> <div id="intro">