Code Challenge: Using Classes

Question

Whenever i am doing the second task of the challenge it tells me the first task is now incorrect.

this is the code i have created

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

<body>
  <div class= "container clearfix">
    <div class="grid_5 omega">
     <div id="featured-cupcake">
       <h2>Cupcake of the Week</h2>
       <img src="img/featured-cupcake.jpg">
     </div>
    </div>
  </div>

</body>
</html>

Answer 1 · 2012-12-21T21:54:44Z

December 21, 2012 9:54pm

+1 for Caroline's code example

Here's the template I use for all of my production sites :

<!DOCTYPE html> 
<html lang="en-us">
    <head>
        <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> 
        <title>Title for this page</title>
        <meta name="Description" content="A sentence describing my web page that is about 70 characters longs">
        <meta charset="UTF-8">
    </head>
    <body>
        <div class="container">
            <h1>Title for this page</h1>
        </div>
    </body>
</html>

Answer 2 · 2012-12-18T21:32:05Z

December 18, 2012 9:32pm

This is the relevant code ...

<div id="featured-cupcake"> <h2>Cupcake of the Week</h2> <img src="img/featured-cupcake.jpg"> </div>

The instructions for reference:

Add a 'div' around the 'featured-cupcake' element and give it the classes 'container' and 'clearfix'.

What this means is ...

Create a new div which wraps around the feature-cupcake div
Add container & clearfix

For future reference it's easier if you create a "working" example using codepen.io.

Answer 3 · 2012-12-21T21:31:14Z

December 21, 2012 9:31pm

@Claude - Please do not post links to W3Schools it's considered bad practice.

They are in no way affiliated with the W3C

See W3Fools for more info

Instead you should link to:

Answer 4 · 2012-12-21T21:41:07Z

December 21, 2012 9:41pm

+1 with James - W3Schools is not a trusted source in order to learn HTML.

A correct HTML document would look like so:

<!DOCTYPE html>
<html>

<head>
   <title>My new webpage</title>
</head>

<body>
    <h1>This is my Heading</h1>
    <p>This is my content</p>
</body>

</html>

Answer 5 · 2012-12-19T16:19:32Z

December 19, 2012 4:19pm

Derek,

When posting code on the forum, if you can indent it with a tab or four spaces for each line

like this

Then we'll be able to see what you're using. Alternatively jsfiddle.net or pastebin might help :-)

Answer 6 · 2012-12-22T19:09:30Z

December 22, 2012 7:09pm

@James; @Caroline - Oops.

Thank you for enlightening me and sharing.

Answer 7 · 2013-01-29T19:13:46Z

January 29, 2013 7:13pm

James,

The code you posted is what I have but the second step just seems beyond me. I've tried a bunch of possibilities and can't get past the test. As a novice, I don't feel like the tutorial gives me enough to go off of in order to succeed in the challenge. Here's what I got http://i.imgur.com/KpO5ypd.png

"In the second step you need to add a class to the that div, don't change the the id."

Answer 8 · 2013-01-29T19:47:42Z

January 29, 2013 7:47pm

@Adam - That was a mistake on my part, which is what I get for no checking the original instructions.

I updated my original post.

Answer 9 · 2013-01-29T20:11:00Z

January 29, 2013 8:11pm

Finally got it. Thanks

Answer 10 · 2013-01-30T16:39:44Z

January 30, 2013 4:39pm

One more question, this one for part 2 of the challenge.

http://imgur.com/a/QzTMX

I first tried image 1 (with three divs) and later found that only image 2 (with two divs) worked for the challenge. Did the code in image 1 not work because TreeHouse challenges only accept certain answers or did it not work because it'd be incorrect?

Thanks

Answer 11 · 2013-02-16T18:00:01Z

February 16, 2013 6:00pm

I am having the same issue as the original post of Derek. Still I have no way to fix it. If I remove the work of task 2 then task 1 is correct but there is no way for it to work with both at the same time. Because if you try task 2 it will tell you "You're missing both classes on the 'featured-cupcake' element."

This is the work it is telling me that is wrong. <body> <div class="container clearfix"> <div class="grid_5 omega"> <div id="featured-cupcake"> <h2>Cupcake of the Week</h2> <img src="img/featured-cupcake.jpg"> </div>

Answer 12 · 2013-02-16T18:22:30Z

February 16, 2013 6:22pm

@Jessica - Post your code in a new forum post. Remember to indent each line of your code by 4 spaces.

Answer 13 · 2013-02-16T19:38:26Z

February 16, 2013 7:38pm

James I'm not sure why I should post it in a new forum since it is for the same issue as the title of this forum (is that protocol that I have not been informed of?). And, unfortunately the indentation did not solve the issue. But, thanks for trying.

Answer 14 · 2013-02-16T19:54:53Z

February 16, 2013 7:54pm

Jessica - I meant for you to post your code in the forum and indent each line of the code by 4 spaces so that the forum properly formats the code.

This isn't a thread that was started to discuss the code challenge in general, it was started to help the original poster with their specific issue with the code challenge.

The general rule of thumb in forum etiquette is, "your issue, your thread". If you need to post your code then you need your own thread,

Answer 15 · 2013-02-16T20:08:29Z

February 16, 2013 8:08pm

James- thanks for informing me on the forum etiquette about codes. I specifically searched this thread out because it is not my issue, but OUR issue. To clarify: Derek and I have the same issue and are getting the same error message. I did not want to create duplicates which would be confusing to future users who also have the same error message. This way those users can all the answers they need in one place.

Here is the work that is giving me the same error code as Derek. <body> <div class="container clearfix"> <div class="grid_5 omega"> <div id="featured-cupcake"> <h2>Cupcake of the Week</h2> <img src="img/featured-cupcake.jpg"> </div>
</body> </html>

Answer 16 · 2013-02-16T20:10:02Z

February 16, 2013 8:10pm

<body> <div class="container clearfix"> <div class="grid_5 omega"> <div id="featured-cupcake"> <h2>Cupcake of the Week</h2> <img src="img/featured-cupcake.jpg"> </div>
</body>

Answer 17 · 2013-02-16T20:11:06Z

February 16, 2013 8:11pm

<body>
   <div class="container clearfix">
  <div class="grid_5 omega"> 
  <div id="featured-cupcake">
    <h2>Cupcake of the Week</h2>
    <img src="img/featured-cupcake.jpg">
  </div>      
</body>

Answer 18 · 2013-02-17T21:19:06Z

February 17, 2013 9:19pm

@Jessica & @Derek -

There are 2 mistakes that are commonly made on this code challenge.

Forgetting the closing tag on your div.
Adding the classes grid_5 & omega in their own div, instead of adding them to the existing div, the which has an id of featured-cupcake

Answer 19 · 2013-05-16T21:19:24Z

May 16, 2013 9:19pm

Hi I am not able to complete this task.

<body>
   <div class="container clearfix">
   <div class="grid_5 omega"> 
         <div id="featured-cupcake">
         <h2>Cupcake of the Week</h2>
         <img src="img/featured-cupcake.jpg">
    </div>
    </div>      
</body>

When I add the <div class="grid_5 omega">, it says that task one is no longer correct. I can't figure out where I made the mistake.

Help please and thank you!

Answer 20 · 2013-05-17T13:28:32Z

May 17, 2013 1:28pm

Blair Owens - Here's a hint, I'm counting 3 open <div> tags and only 2 close </div> tags.

Answer 21 · 2013-05-22T01:41:36Z

May 22, 2013 1:41am

still the same problem

<body>
   <div class="container clearfix">
   <div class="grid_5 omega"> 
         <div id="featured-cupcake">
         <h2>Cupcake of the Week</h2>
         <img src="img/featured-cupcake.jpg">
     </div>
    </div>
    </div>      
</body>

Answer 22 · 2013-10-09T16:02:01Z

October 9, 2013 4:02pm

I was having the exact same problem, and I'm sorry that everyone chose to gave you totally irrelevant responses. Check this thread out, it should help you.

https://teamtreehouse.com/forum/im-a-bit-confused-with-code-challenge-using-classes

Basically, you are supposed to add class element to the div containing the id. So, instead of two separate <div>s they are now one.

Answer 23 · 2012-12-21T17:45:05Z

December 21, 2012 5:45pm

I am a novice that has to remind myself that in HTML, as per Team Treehouse; w3schools.com: http://www.w3schools.com/tags/tag_doctype.asp

etal,

"The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in...."

My point is that you may 1st consider reviewing what seems like the beginning of your above written code for your "...second task of the challenge..." - view it against the below structure vs your "<!DOCTYPE HTML> Smells Like Bakin' Cupcake Company. Cupcake of the Week"
Once that structure is understood, then procede with the balance of the 'code challenge' question with your response:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head>

<body> The content of the document...... </body>

</html>

Welcome to the Treehouse Community

Looking to learn something new?

Derek Renfro

Derek Renfro

Code Challenge: Using Classes

23 Answers

James Barnett

James Barnett

James Barnett

James Barnett

James Barnett

James Barnett

Caroline Hagan

Caroline Hagan

Caroline Hagan

Caroline Hagan

Claude Moutoussamy

Claude Moutoussamy

Adam C

Adam C

James Barnett

James Barnett

Adam C

Adam C

Adam C

Adam C

Jessica Stanley

Jessica Stanley

James Barnett

James Barnett

Jessica Stanley

Jessica Stanley

James Barnett

James Barnett

Jessica Stanley

Jessica Stanley

Jessica Stanley

Jessica Stanley

Jessica Stanley

Jessica Stanley

James Barnett

James Barnett

Blair Owens

Blair Owens

James Barnett

James Barnett

Blair Owens

Blair Owens

David Snell

David Snell

Claude Moutoussamy

Claude Moutoussamy