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
Kristi Roberts
487 Pointsproblem w/code in web design track
I'm following the track where we're making the "smells like bakin" site. From almost the beginning, my elements below the list were slightly indented, unlike the instructors, where everything is flush left. Now, as we're going further, my page is not responding at all (still indented, and not responding to the new grid). But I followed closely and I think I've copied his code exactly. How do I find out where the problems are? ... oops, just saw the video on asking questions. I don't know what Codepen is, so here's the code:
'''
<!DOC TYPE 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" href="screen"> <link rel="stylesheet" href="css/grid.css"type="text/css" href="screen"> <head/> <body> <div> class="container"></div> <img src="img/logo.gif" alt="Smells Like Bakin"> <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 id="intro"> <h1>Opposites really do attract, especially in our kichen! We combine unexpected flavors that melt together to create ironically delicous desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div>
<img src="img/you-bake-me-blush.gif" alt="Your Bake Me Blush">
<div id="featured cupcake">
<h2>Cupcake of the Week</h2>
<p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake.</a> It's a strange combo of flavor that will kick your taste buds into fiesta mode!</p>
<img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
</div>
<div>
<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 and wife Allison & Joseph. Allison is the baker, and Joseph found a way for the mto make a business out of her tasty treats. Flass forward to toay, and here's Kristi, working on this insane project about cupcakes!</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 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="http://www.twitter.com/SmellsLikeBakin"><img src="img/twitter.gif" alt="Twitter">
</a>
<div id="copyright">
<p>© 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
</div>
</div> </body> <html/> '''
5 Answers
Travis Neiderhiser
1,027 PointsKristi,
The best you can do with HTML is running it through a validator like: http://validator.w3.org/ Use the tabs to either visit a website, upload a file or direct (copy/paste your code)
Tom Bedford
15,645 PointsHi Kristi
Have you included the normalize and grid CSS files in your HTML? The links to the stylesheets should be in the <head> section of your HTML document.
e.g.
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
Kristi Roberts
487 Pointsyes, like this:
'''
<!DOC TYPE 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" href="screen"> <link rel="stylesheet" href="css/grid.css"type="text/css" href="screen"> <head/> <body>
'''
Kristi Roberts
487 Points''' <!DOC TYPE 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" href="screen"> <link rel="stylesheet" href="css/grid.css"type="text/css" href="screen"> <head/> <body> '''
Kristi Roberts
487 PointsOK, something's wacky, it's not even coming up here in the markdown.
Kristi Roberts
487 PointsKristi Roberts
487 PointsOK, I found the error, it was a misplaced /. So, new question ... is there a simple way to find errors without combing through the entire index html?