Teaching HTML & CSS (ft. crabs, kittens, clouds and more)
This week I lead my first workshop with Ladies Learning Code (LLC)*, HTML and CSS Level 2. Though I’ve been a teaching assistant and mentor for coding workshops before, I’ve never been up at the front of the room. After some intense discussion with my roommate’s Chihuahua (he’s a great listener), I decided the best course of action was to be myself — terrible jokes and all. I also think that the best teachers are entertainers in a way, and that the classroom can become a kind of theatre with storytelling, imagery, sound-effects and jokes that help the meaningful information stick. With that in mind, over this two day workshop I decided to test out a bunch of quirky metaphors for teaching HTML and CSS. At the end of the workshop, a few students commented on the effectiveness of these metaphors, so I thought I’d share a few of them here in case anyone else wants to try them out.
A particular favorite was referring to the ‘greater-than’ and ‘less-than’ arrow to open and close tags (< >) as crab hands (yes, I also did a Zoidberg walk with crab hands — the waddle and ‘whooping’ sounds are key). So, let’s start with that one:
1. Crab-hand HTML tags (ft. Zoidberg waddle)
I like to think of it this way, when you open a tag you’re giving your browser something to hold — like a little parcel of <information>, or a tasty <text-sandwich>. But this parcel needs to be held with two hands that clamp down on either side, like crab hands! If you leave one hand off, the browser will try to use the first hand to dive down and catch absolutely everything underneath it, which it will inevitably fail to do, and thus your code will break. If you add the other hand, or end tag, then your crab can carry the information (yay!). I used this metaphor because leaving off end tags is a common mistake I’ve seen with new coders — the crab-hands imagery may can help beginners visualize the importance of being consistent with opening and closing tags.
2. Samurai sword slice to close HTML tags
One of the more common blunders that I’ve noticed new coders make inside their tags, is forgetting to add the back-slash to their closing tag. This concept can be demonstrated with great dramatic flare if you physically gesture like a samurai and slice through the air to illustrate the finality of the closing tag – it helps if you slice in the same direction of the back-slash to drive the metaphor home. / BAM! / WHOOSH! The tag is </closed>!
3. HTML & CSS as a human body (stylish skeletons)
To describe the relationship between HTML and CSS I like to use a prop that I always have with me — the human body. Because HTML is like the content of the website, it can be described using a skeleton as the site’s foundation or structure; Using your crab-hands (see point #1) as HTML tags, you can frame your <head>, <body> and <footer> sections. I found this was a great way to illustrate the head element where your thoughts live (or rather, the DOCTYPE! jargon and links), the header element which is where your hero image or billboard might sit (the face of your site), your body element where most of your content occurs, and your footer element which is usually at the bottom of the page.
After describing the HTML in terms of a body of content, I like to describe CSS as the layers of fashion on top. Much like fashion, CSS helps visually communicate the personality of a website. You can run quite a bit with this metaphor, like explaining margins in terms of low riding pants: For example, “CSS lets you describe how much spacing you want between your top and your pants — how much skin are you going to show.” You can even mention CSS animations here “once you style the spacing and colour of your pants, you can make your butt jiggle” (tee-hee-hee). You can have loads of fun with this one, but I do think it’s helpful to bring the metaphor home and explain that this styling translates to colours, typography, opacity, gradients, spacing, layout, and hover animations etc. While jokes are a good time, they’re only effective if there’s a relevant message attached.
4. Use * Sparkles * to add comments in CSS
Another piece of syntax that took me a while to remember (and which I still mix up from time to time) was the difference in commenting in HTML and CSS. HTML comments can be described with crab hands, a surprise exclamation mark (WOW!), followed by two steps forward; like a dance <!- - and then - ->. And because CSS is connected to our styling or fashion metaphor (see point #3), commenting syntax can be remembered by adding some /* sparkle */ on a stick /*. (Yes! There is totally room for a Harry Potter reference here).
5. Imagining floating elements as clouds to explain clearfixes
Using clouds as the metaphor for floats can work nicely because clouds appear to float, and we can easily imagine them having a transparent or invisible quality to them. This is handy when explaining that the parent doesn’t see it’s children when they’ve been floated, before introducing the clearfix property as a fix.
– – –
These were a handful of metaphors and puns from my first class – if you’re interested in reading more metaphors, I have an abundance more to share – just leave a comment and I’ll write another post.
I would also encourage anyone comfortable with code to try teaching – I know it’s cliché to say, but it truly is a rewarding experience. Coding specifically is also such an incredibly valuable skill to share with others. And finally, teaching a great way to reinforce your own skills – I’d bet that you’ll probably even learn a thing or two!
- - -
Ladies Learning Code is a not-for-profit organization with the mission to be the leading resource for women and youth to become passionate builders — not just consumers — of technology by learning technical skills in a hands-on, social, and collaborative way. http://ladieslearningcode.com/
