Grid for Smells Like Bakin

Question

I still can not get the page to align to the grid on the smells like bakin' website if anyone can help me here it would be nice ive been waiting like two weeks to figure this out lol

Answer 1 · 2013-11-20T03:46:21Z

November 20, 2013 3:46am

index.html file should be in the main folder. Images should be in the img folder. & the path for the images in the html code should be img src="img/filename.extension" CSS files should be in the css folder. & the path for the css in the html code should be href="css/filename.css""

Answer 2 · 2013-11-18T05:13:50Z

November 18, 2013 5:13am

Josh Mackrell - Sounds like you might be having a problem with your file paths. Here's a tutorial on file paths that should get you going.

Let us know how you are getting along with this here in this thread.

Answer 3 · 2013-11-18T02:33:51Z

November 18, 2013 2:33am

I had some trouble with this as well. Where are you experiencing a problem? Are you linking the grid.css stylesheet properly?

Answer 4 · 2013-11-18T02:36:20Z

November 18, 2013 2:36am

I think so man i followed his steps to a TEE and it still wouldnt move and its the very first grid step in the process too so it stops me from moving forward at all.

Answer 5 · 2013-11-18T02:48:04Z

November 18, 2013 2:48am

Do you have the download project files in the correct folders right? I remember I didn't download the files and the external stylesheet link was pointing to nothing...

Answer 6 · 2013-11-18T02:49:30Z

November 18, 2013 2:49am

What exactly is the "External stylesheet"?

Answer 7 · 2013-11-18T02:53:19Z

November 18, 2013 2:53am

I have the files grid, normalize and style css

Answer 8 · 2013-11-18T02:56:21Z

November 18, 2013 2:56am

So you have,

<link rel="stylesheet" type="text/css" href="grid.css">

in the head section, correct? Do you have the grid.css file there to point to it?

Answer 9 · 2013-11-18T02:57:33Z

November 18, 2013 2:57am

Ok, so you do have those files. Are they located in the same folder?

Answer 10 · 2013-11-18T02:58:27Z

November 18, 2013 2:58am

Yah they are! p.s. how do u get those screen shots to work in these messages?

Answer 11 · 2013-11-18T03:05:53Z

November 18, 2013 3:05am

Just type a string of code and it will do that. I am not quite sure what is going on, that was the problem that I had. You might just want to rewatch the video and start with a clean slate, you might figure out what you did wrong.

Answer 12 · 2013-11-18T03:06:58Z

November 18, 2013 3:06am

lol i have man like 3 times i don't understand it feel like im wasting my money

Answer 13 · 2013-11-18T04:07:34Z

November 18, 2013 4:07am

the path of the css file should mention correctly in the code of html file.... may I know the file structure of the project folder & code u have entered... if you confusion could u send me the .html file to my email id mailjosephraj@gmail.com?

Answer 14 · 2013-11-19T00:14:06Z

November 19, 2013 12:14am

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smell Like Bakin' Cupcake Company</title>
  <link rel="stylesheet" type="text/css" href="normalize.css" media="screen">
  <link rel="stylesheet" type="text/css" href="grid.css" media="screen">
</head>
<body>
    <div class="container">
      <img src="logo.gif" alt="Smells Like Bakin">
      <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 id="intro">
        <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together ironically delicious desserts.</h1>
        <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
      </div>

      <img src="you-bake-me-blush.gif" alt="You Bake Me Blush">
      <div id="featured-cupcake">
        <h2>Cupcake of the Week</h2>
        <p>The 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="featured-cupcake.jpg" alt="Avacado Chocolate Cupcake">
      </div>

      <div id="new-cupckes">
        <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="new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
        <img src="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 &amp; Josheph. Allsion 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 flavors first through Facebook &amp; Twitter, and even take requests!</p>
    <a href="http://www.facebook.com/SmellsLikeBakin"><img src="facebook.gif" alt="Facebook"></a>
    <a href="http://www.twitter.com/#1/SmellsLikeBakin"><img src="twitter.gif" alt="Twitter"></a>

    <div id="copyright">
      <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
    </div>

    </div>
</body>
</html>

Answer 15 · 2013-11-20T03:22:52Z

November 20, 2013 3:22am

https://www.dropbox.com/sh/d4ba44u307naodd/7G4G6Vuut-

Answer 16 · 2013-11-20T03:28:41Z

November 20, 2013 3:28am

I originally had it like this but when i take the index out of the img folder the pics don't work on the site.

Answer 17 · 2013-11-20T03:38:07Z

November 20, 2013 3:38am

please download the zip files form the below link https://www.dropbox.com/s/vs8oc0wp9r47shx/firstwebsite.zip

Actually your folder structure in the PC is wrong according to the html coding of you... & also you have not written code for grid in the html....

Answer 18 · 2013-11-20T03:51:41Z

November 20, 2013 3:51am

Every one else told me to put the index.html in the img folder because when its not in there the pictures are not working on the site.

Answer 19 · 2013-11-20T03:53:15Z

November 20, 2013 3:53am

```<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smell 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="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 kitchen! We combine unexpected flavors that melt together ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div>

  <img src="you-bake-me-blush.gif" alt="You Bake Me Blush">
  <div id="featured-cupcake">
    <h2>Cupcake of the Week</h2>
    <p>The 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="featured-cupcake.jpg" alt="Avacado Chocolate Cupcake">
  </div>

  <div id="new-cupckes">
    <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="new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
    <img src="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 &amp; Josheph. Allsion 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 flavors first through Facebook &amp; Twitter, and even take requests!</p>
<a href="http://www.facebook.com/SmellsLikeBakin"><img src="facebook.gif" alt="Facebook"></a>
<a href="http://www.twitter.com/#1/SmellsLikeBakin"><img src="twitter.gif" alt="Twitter"></a>

<div id="copyright">
  <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
</div>

</div>

</body> </html>

Thats exactly how mine is and the images and the site work from here the only issue was the very first step on the grid when he said add the container and refresh it my page did not move like his did

Answer 20 · 2013-11-20T04:10:25Z

November 20, 2013 4:10am

I figured it out thanks for all the help guys!!!

Welcome to the Treehouse Community

Looking to learn something new?

Josh Mackrell

Josh Mackrell

Grid for Smells Like Bakin

20 Answers

Joseph Raj

Joseph Raj

James Barnett

James Barnett

christophercrowley

christophercrowley

Josh Mackrell

Josh Mackrell

christophercrowley

christophercrowley

Josh Mackrell

Josh Mackrell

Josh Mackrell

Josh Mackrell

christophercrowley

christophercrowley

christophercrowley

christophercrowley

Josh Mackrell

Josh Mackrell

James Barnett

James Barnett

christophercrowley

christophercrowley

Josh Mackrell

Josh Mackrell

Joseph Raj

Joseph Raj

Josh Mackrell

Josh Mackrell

Joseph Raj

Joseph Raj

Josh Mackrell

Josh Mackrell

Joseph Raj

Joseph Raj

Josh Mackrell

Josh Mackrell

Josh Mackrell

Josh Mackrell

Josh Mackrell

Josh Mackrell

James Barnett

James Barnett