Does anyone have an idea of how to make teaching CSS classes easier? My students get really overwhelmed with this lesson.
I’m sure there are a lot of ways to do it. I like to demo it myself and my favorite way to do that is on bubble 4 with the “Your Favorite Month” assignment.
I pick my birth month (January) and I tell the students I’m going to make that month stand out by styling it with it’s own class, so my html ends up looking like this (I just add class = “jan” to the h2 and the p.
<h2 class="jan">January</h2>
<p class="jan">January is the first month and has 31 days. It is named after the Roman god Janus, who was the god of beginnings. That makes a lot of sense, because that's how we begin every year.<p>
Then, I found a snowflake .png file with a transparent background (attaching it to this message). I uploaded it to the project and then made the following changes to the css file one at a time so the students could see what was happening:
.jan
{
color: blue;
background-color: azure;
background-image: url(snowflake2.png);
background-size: 140px;
margin:0;
padding:15px;
}
h2.jan {font-size:48px;}
The first block of code applies to both the h2 and the paragraph since both are designated with the jan class. The 2nd block of code only applies to the h2 since “h2.jan” means "h2s with the class of jan.
This is what mine looks like when done:
I then ask them to style their birth month and they seem to get that you would use a class to style a specific element in your code. I’m sure there are other ways, but this one seems to work for my students.
Mike
3 Likes
Thanks so much for this. I think I might skip The Four Humors and then do what you suggested!
-Audrey
We are now on classes so this is very helpful. Thanks! But why no info. on classes in the documentation?? At least I can’t find it…
Thanks for the link! But why wouldn’t this be found in the “documentation” link within the student’s work area?! This is where I refer them when they forget the code. (Or I tell them to return to a previous bubble and see how it’s done and copy\paste.) Why two different help docs: “documentation” and this “tool documentation” (concepts)? Or why isn’t there a link within the code.org work area to this “tool documentation” (concepts) file as well as the “documentation” link that’s already there? Maybe there is and I don’t see it…
That is a great question. I have passed it along. It seems like each documentation page has some content that the other is missing. I think it would be a great idea to add classes to the student documentation page as we do get a lot of questions about classes here on the forum.
Thanks for passing that one and I will try to do some checking behind the scenes.
Mike
1 Like
While on the subject of classes…!
Why isn’t this student’s “.A Graceful Bird” class being applied??
https://codeprojects.org/projects/weblab/B4hHCvtbTqLqRpfnbSBS8huyKQZn32Fa7DiKWUxObVc
Classes can’t have spaces in the names because the css has to be a single word. If he removes the spaces from the html and the css, it should work.
Mike
1 Like
Thanks. Thought we checked that…?!
While we’re STILL on classes…
What are we doing wrong on this one?!
https://codeprojects.org/projects/weblab/6exWaDUvg-GZRNQcRwCtLspw4IddtWi_JozQrQCBDlE
Line 20 in your css file has an errant h3 selector that is affecting the code below it. If you delete that, things should work.
There’s also a bug on line 26, but I’ll let you and your student debug that one!
Mike
Oh, my! So focused on the class code and whether the reference to it on the .html page was right that we didn’t even look at line 20! Thanks as always!
I had to do a lot of extra practice with lesson 17. I started lesson 17 by practicing classes as colors. After taking two days on the Code.org level, I capped it by having students create a playlist.
2 Likes
Looks great! Nice project ideas!
Mike