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

CSS

Leon Wheddon
Leon Wheddon
7,469 Points
Posted by Leon Wheddon
Leon Wheddon
7,469 Points

Working with grids CSS.

Hey guys.

I'm working my way through building a simple website and can't get past this stage. I'm pretty sure my code is okay (maybe not tho!) but the page doesn't change. I would be very grateful if someone could review my code and possibly point me in the right direction. Apologies if this has been covered before and thanks in advance for any help. Here's my code.

<!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">

    <img src="img/logo.gif" alt="Smells like Bakin">
    </div>
    <ul class="nav">
    <li><a href="#">About</a></li>
    <li><a href="#">Cupcakes &amp; 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 flavours 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 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 flavours will kick your tastebuds 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="#">Bakin 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="Jalepeno so spicy">
    </div>

        <div class="grid_7">
        <h2>Inside the kitchen</h2>
        <p>Smells like Bakin starting in the garage of husband wife duo Allison &amp; Joseph.  Allison is the baker and Joseph found a way for them to make a business out of their tasty treats.  Flash forward to today and they have a succesful 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 annonce all our new flavours first through facebook &amp; 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>
    <div id="copyright" class="grid_12">
    <p>&copy; 2012 Smells Like Bakin' Cupcake Company.  All rights reserved.</p>
    </div>
</div>

</body> </html>

3 Answers

Neil Little
Neil Little
5,555 Points

I had a look through your code, I re-indented it (easier to read):

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Smells Like Bakin Cupcake Company</title>
</head>
<body>
    <img src="img/logo.gif" alt="Smells like Bakin">
</div>
    <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes &amp; 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 flavours 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 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 flavours will kick your tastebuds 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="#">Bakin 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="Jalepeno so spicy">
        </div>

        <div class="grid_7">
            <h2>Inside the kitchen</h2>

            <p>Smells like Bakin starting in the garage of husband wife duo Allison &amp; Joseph.  Allison is the baker and Joseph found a way for them to make a business out of their tasty treats.  Flash forward to today and they have a succesful 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 annonce all our new flavours first through facebook &amp; 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>

        <div id="copyright" class="grid_12">
            <p>&copy; 2012 Smells Like Bakin' Cupcake Company.  All rights reserved.</p>
        </div>
    </div>
</body>
</html>

------>

I noticed that you had 2 rogue div's in the code, you also need to be specific what is wrong, so you can get fast and clearer feedback... maybe my 2 pennies :)

Both with:

</div>
  1. First div is located above the navigation top of the page
  2. Second is below the "Browse our cupcakes" button code

I also noticed that were no head or closing html tags e.g. <head></head> and </html> .....

What problem did you have with your code? Or what error were you given.

Leon Wheddon
Leon Wheddon
7,469 Points
Leon Wheddon
Leon Wheddon
7,469 Points

Hi Neil.

Thanks for your reply, i just wanted someone with more know how to run over my code to make sure that wasn't the problem. When I try to open it in the browser the changes that the CSS code should have created haven't happened, i'm guessing that maybe the index page and css aren't in the same folder or the pathway is wrong? If the code is okay then the changes should have kicked in?

Leon

Neil Little
Neil Little
5,555 Points

Try this:

http://validator.w3.org/

Take it with a pinch of salt, it sometime does not play nice with HTML5. But does point out the obvious quickly.

Leon Wheddon
Leon Wheddon
7,469 Points
Leon Wheddon
Leon Wheddon
7,469 Points

Thanks i've tried that, think i'll just restart the css section and hope i figure it out. Thanks for your help.

Neil Little
Neil Little
5,555 Points

Hey Leon,

If you put you code on [codepen.io](codepen.io), I can take a look and get it going.

It is usually the simple bugs!