Need help with grid.css file

Question

I'm on the working with grids video and I am following all the directions, however my site is NOT changing, Here is my work, Can someone please tell me what I am doing wrong so I can move forward, i would like to have this course done by tonight, But this is holding me up. My work here: <!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="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/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="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/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>. It’s strange combo of flavors will kick your taste buds into fiesta mode!</p>
      <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
    </div>

    <div id="new-cupcakes" class=Grid_5 omega">
      <h2>Fresh out the Oven</h2>
      <p>Fresh Out The Oven <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeño So Spicy</a>.</p>
      <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
      <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/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 &amp; 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 class=grid_5 omega">
<h2>Get Bakin’ with Us</h2>
<div id="contact">
      <p>Call us: <span>1-800-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="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/facebook.gif" alt="Facebook"></a>
    <a href="https://twitter.com/#!/smellslikebakin"><img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/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 1 · 2014-02-05T04:27:25Z

February 5, 2014 4:27am

Hey, Rondell. At first glance, it looks like some of your classes are missing quotation marks and I noticed one class has an uppercase letter. Take a look at where you have the classes "grid_5 omega" assigned and see if that helps.

Answer 2 · 2014-02-05T05:17:21Z

February 5, 2014 5:17am

Thanks Matt, but it still isnt changing, I even copy & pasted the code in CodePen into my text editor and it still has not changed at all, Hmm, Do you have any suggestions? I will paste it in this message as well ok Matt, I appreciate any/all help. Here is the revamped 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="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/css/grid.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>

</head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/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="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/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="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/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="#">Jalapeño So Spicy</a>. </p>
  <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
  <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/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 &amp; 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 &amp; Twitter, and even take requests!</p>
  <a href="http://www.facebook.com/SmellsLikeBakin"><img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/img/facebook.gif" alt="Facebook"></a>
  <a href="https://twitter.com/#!/smellslikebakin"><img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/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>

Answer 3 · 2014-02-05T05:39:14Z

February 5, 2014 5:39am

You're missing an opening <div> above the Facebook links here...

<!-- Missing <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="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/img/facebook.gif" alt="Facebook"></a>
  <a href="https://twitter.com/#!/smellslikebakin"><img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/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>

Answer 4 · 2014-02-05T05:44:08Z

February 5, 2014 5:44am

Actually I'm mistaken, that div is fine. Sorry cant see it.

Answer 5 · 2014-02-05T05:50:38Z

February 5, 2014 5:50am

Can you attach your CSS file as well?

And you have no <link></link> tags included to connect your CSS file to this HTML doc.

Answer 6 · 2014-02-05T06:02:08Z

February 5, 2014 6:02am

I assume my CSS file is attached because its on my sublime editor, I could be wrong because its actually my 1st time ever doing this, Is there a way I can make sure I have it attached correctly? I think that very well may be the problem because I have checked the code over and over ( even putting </link> at the end of CSS links) and still no change. I have the grid & Normalize CSS on my editor, But not sure if connected or not. Please advise.

Answer 7 · 2014-02-05T06:15:00Z

February 5, 2014 6:15am

To connect your CSS file to all other documents you in your website you will need <link></link> tags inside your <head></head> inside your opening <html> tag, at the very top of this document. This allows all of the content on this page to use the styling elements in your CSS file. The top of your page should look something like this...

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>

I'm not sure what point you are at in the lesson though and more details will help to solve the problem.

What are you expecting to show up on the screen vs what is showing up?

Is it an error message with no content or is it content without colors, fonts, placement etc.?

Answer 8 · 2014-02-05T06:19:20Z

February 5, 2014 6:19am

P.S. Make sure you put three 'backticks' (backward apostrophe) before all the code you put in here, even before the <!DOCTYPE HTML> so that it shows up on the editor. (see the Markdown Cheatsheet below)

Answer 9 · 2014-02-05T07:54:05Z

February 5, 2014 7:54am

Hi Rondell,

You might hate to hear it, but my suggestion is... slow down. Instead of being in a rush to know web development, take your time and be goooooodd at web development.

If you set the right base knowledge, the answers to your questions will become crystal clear. Honestly, right now, there are a lot of basic mistakes with what you've linked. And it's difficult to know where to start. (There's nothing wrong with that! In my opinion, you're in the right place.)

It seems like the better starting point might be html Deep Dive. If you happen to know some of the material in there, cool. You'll still pick up a more solid base for having gone through it. And you'll know where to look up some answers to questions about basic website structure until it becomes second nature.

Once you've totally grasped html Deep Dive, I'd come back to html 'Build a basic website'. If you've taken your time and really grasped everything, you'll role through certain parts. And you'll trust that other parts will become more clear when you move onto css foundations deep dive... which is quite extensive and will probably take several weeks to grasp (and longer to master); and will clearly be worth it!

The cool thing is, at that point, you'll know two things.

You can definitely really do this (and make a good living too!).
There's a lot more to learn!

Answer 10 · 2014-02-05T14:34:36Z

February 5, 2014 2:34pm

{Gary Mann}, Thanks I needed that! {Kyle Germaine} here is the link to my site file:///C:/Program%20Files/Sublime%20Text%202/index2.html and everything is supposed to be different, My classes and grids should have changed but did not. So there is content but no placement with the addition to CSS.

Answer 11 · 2014-02-05T19:16:54Z

February 5, 2014 7:16pm

Rondell,

I'm actually not able to view your site because it is currently being run on your computer's internal network and isn't accessible to anyone else. Accessing your computer from localhost is basically just allowing you to view code stored on your computer through the software of the web browsers.

I could probably help you get this CSS file connected to your index.html file above, but it probably wouldn't benefit you much and you'd be able to do it much faster if you take the proper lessons, as Gary mentioned above. The value of Treehouse is that the videos walk you through everything I'm telling you in depth and with the context necessary to do it on you own. I would really recommend going through one of the tracks if you want to do this correctly and eventually make a career out of it. The real question you have to ask is what are you trying to accomplish and what is the best way to do that given your circumstances. The 4 major paths are ...

1. 'Wordpress Development' track

PROS: Fast, Simple, Professional Appearance (still takes work) CONS: Minimal Customization, Not Very Employable

If you're trying to get a site up and running really, really fast that looks professional then I would suggest going through the "Wordpress Development" track. This will allow you to use a massive amount of pre-developed code from other people and customize it to you needs with a very simple interface meant for non-programmers. Though a lot of web designers use Wordpress, those who do it well customize most of the HTML and CSS while using to Themes to handle the Back-End logic. To be great at this you really need Front-end skills, but if you're anxious to get a professional looking site up and running quickly this would be the best option. This is the least employable skill set, and though very valuable to have at a small business, it wont get you a development job

2. 'Wed Design' or 'Front-end Development' tracks

PROS: Sexy, Professional, Interactive, Highly Employable (if you're an artist at heart) CONS: More Difficult, Minimal Functional Customization

if you want to be a Web Designer, as in make basic websites that look really amazing or work on the appearance of a web applications in collaboration with Back-End Developers then go this way. This is a very valuable skill set and highly employable, but not as 'entrepreneurial'. You will be able to get design jobs or start a web design company of your own, but if you have a great idea for an advanced application with many users interacting with large data sets and each other, then this wouldn't be very valuable. in Front-End development you have a ton of tools to tat your disposal with less foundational knowledge necessary to use each one, but you have to be very creative to know what to use at what time with an artists mind for things.

3. 'PHP' or 'Rails' tracks

PROS: Highly Functional, Entrepreneurial, Highly Employable (if you're a scientist at heart) CONS: Most Difficult (subjective opinion), Minimal Sexiness

If you have an amazing, but complex idea and want to make it into a huge software/media company then this is probably where to start (or possibly Mobile Development). Also very employable on its own, with equal to greater salaries than design jobs, but with lots of variability. Back-End development is difficult because is requires extensive foundational knowledge to make anything work and involves very abstract concepts, but you can make very powerful tools with it. Rails is a 'higher level' frame-working platform built on the Ruby language, so like Wordpress you are able to build things faster by using big pieces of code that others have developed, but with much more complexity and functionality than anything Wordpress can do. I believe Rails/Ruby developers are the highest paid on average right now, but again, a lot of variability between individuals' abilities and employers' objectives. If you want to be a "full-stack' developer ( someone that can do Database, Server-side and Front-end programming) then this is probably the best place to start.

4. 'Android' or 'IOS' Development

Don't know much, never done it, but there's long-term growth expected in the mobile market, especially in developing economies with accessibility to smart phones and mobile networks increasing geometrically. Both highly employable and entrepreneurial. Many people say it's now best to launch applications on mobile-first and forget the web interface until you get traction. This obviously depends a greatly on the product you are developing. You wouldn't launch Uber on Web, nor LinkedIn on Mobile. I personally think its better to start most applications on the web, but that is just my opinion based off more complicated product development and growth cycle nuances, as well as my own self-fulling ideals. Not sure how difficult it is to learn, but it is a type of Back-End programming so probably similar to above.

So that's my rant, Hope it helps,

Regards, Kyle

Answer 12 · 2014-02-05T20:07:48Z

February 5, 2014 8:07pm

No problem Rondell glad I could help!

One thing I would strongly recommend though is to follow a specific 'Track', which is different from selecting a language in the 'Library'. I only say this because there isn't a Javascript 'Track'. Go to the top left of the screen, the button with the map, or here: (https://teamtreehouse.com/tracks/frontend-web-development) and take all of the courses in the "Front- End Development" track, in order.

As you can see, the first Javascript class is the 7th on the list so you will no-doubt be confused on its purpose if you begin there. All of the classes build on each other so it is very, very, very important to take them in order if you aren't experienced otherwise. I have found the way Treehouse is laid out to extremely intuitive so just trust that what you're learning will be important and don't jump around.

I started my track on Jan 22 and will be done today, with 10-12 hrs a day and a some previous experience. If you do it sequentially it wont take too long and will be much more rewarding when you are finished.

Regards, Kyle

Answer 13 · 2014-02-05T20:16:10Z

February 5, 2014 8:16pm

Kyle are you also looking to gain employment as Front end? If so how are you doing with employment searches? I ask because it is a vital part of my WHY, I'm in NJ and will be seeking jr front end jobs in NJ, Philadelphia, NY. Do you know of any agencies that place someone like us, provided i have a portfolio?

Answer 14 · 2014-02-05T20:46:52Z

February 5, 2014 8:46pm

I'm learning primarily Back-end development, but hopefully will become a full-stack developer in the years to come. I was formerly in investment banking and am currently starting my own company. If my company doesn't take-off I will hopefully end up in Venture Capital, Tech Investment banking or the M&A side of Big Tech.

You seem like a nice guy, but I couldn't honestly answer your question with any answer you want. I wouldn't feel confident applying for the positions you're talking about, let alone refer you through my network at this point.

You need to be strategic and focused. The most important thing to do is to take a 'TRACK', which is a 100 - 200 hr entry level course. That is the bare minimum.

One step at a time.

Answer 15 · 2014-02-05T21:23:04Z

February 5, 2014 9:23pm

gotcha

Answer 16 · 2014-02-05T21:23:05Z

February 5, 2014 9:23pm

gotcha

Welcome to the Treehouse Community

Looking to learn something new?

Rondell Randall

Rondell Randall

Need help with grid.css file

16 Answers

Matt Lambert

Matt Lambert

Rondell Randall

Rondell Randall

Kyle Germaine

Kyle Germaine

Kyle Germaine

Kyle Germaine

Kyle Germaine

Kyle Germaine

Rondell Randall

Rondell Randall

Kyle Germaine

Kyle Germaine

Kyle Germaine

Kyle Germaine

Gary Mann

Gary Mann

Rondell Randall

Rondell Randall

Kyle Germaine

Kyle Germaine

Rondell Randall

Rondell Randall

Kyle Germaine

Kyle Germaine

Rondell Randall

Rondell Randall

Kyle Germaine

Kyle Germaine

Rondell Randall

Rondell Randall

Rondell Randall

Rondell Randall