Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Code Challenge: Using Classes

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>

23 Answers

James Barnett
James Barnett
39,199 Points

+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>
James Barnett
James Barnett
39,199 Points

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.

James Barnett
James Barnett
39,199 Points

@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:

Caroline Hagan
PLUS
Caroline Hagan
Courses Plus Student 12,453 Points

+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>
Caroline Hagan
PLUS
Caroline Hagan
Courses Plus Student 12,453 Points

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 :-)

@James; @Caroline - Oops.

Thank you for enlightening me and sharing.

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

James Barnett
James Barnett
39,199 Points

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

I updated my original post.

Finally got it. Thanks

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

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>

James Barnett
James Barnett
39,199 Points

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

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.

James Barnett
James Barnett
39,199 Points

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,

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>

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

<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>
James Barnett
James Barnett
39,199 Points

@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
Blair Owens
Blair Owens
8,235 Points

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!

James Barnett
James Barnett
39,199 Points

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

Blair Owens
Blair Owens
8,235 Points

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>
David Snell
David Snell
2,288 Points

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.

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>