CSS Crash Course

Mar 18, 2016

Teaching a crash course on CSS was a big step outside my comfort zone, but I learned a lot in the process.

Background

A couple months back I volunteered as a TA at a crash course on HTML/CSS my UI Design instructor, Abby Larner, was teaching at The Iron Yard. It was a pretty good experience, and I really enjoyed seeing some people learn about code for the first time. So I reached out and asked Abby if she could use some help again at an upcoming event. As it turned out, she had all the help she needed for the event I inquired about, but she mentioned she was looking for someone to teach an upcoming crash course. After a minute or two of daydreaming about my very own crash course, I volunteered. It didn’t take long, though, before reality started to settle in, and I found myself asking, “What am I going to teach?” After a little thought and a little coaching, I landed on a deep dive into CSS. It felt right. I know CSS. I’m comfortable with CSS. The only question was, could I talk about it for three hours?

Planning

The first thing I did was have a little freakout. Could I actually do this? Could I actually stand in front of a bunch of strangers and talk about CSS with any degree of authority? Sure, I had answered some questions from fellow students during my time at The Iron Yard, but that seemed very different than starting at the beginning and going through a deep dive into the subject. Once I was done with that, I thought to myself, “How did I learn CSS?” I learned from books and the web, so I went back and reviewed. I flipped through CSS3 For Web Designers. I clicked through some Code School PDFs. I watched some Tuts+ videos. I started to get a feel for what I thought I could teach. Then I sat down and made an outline. It was pretty ambitious and a little unrealistic. But it was a start.

Section One

Intro/Linking Stylesheets
Selectors
Cascade Order
Floating Left & Right
Clearing Floats
Inheritance & Specificity
Margins & Padding

Section Two

Text & Font Properties
Anchors & Links
Images
Backgrounds
Borders
Lists
Width & Height

Section Three

DRY
Display Types
Centering
Pseudo Classes & Elements
Transition
Hover
Transform
Animation

Building

Next, I had another little freakout. Could I actually design and build a sample site that people could look at and learn from? Fortunately, I had some other sample sites to look at and learn from, so that didn’t last too long. I decided to make something with a deep sea theme, to compliment the topic of the crash course: A Deep Dive Into CSS. It was a good exercise, writing code I knew other people would not only be looking at, but also trying to learn from. It forced me to think differently. I always try to keep my code clean, so that wasn’t a big deal. But I found myself asking new questions, like “Should I alphabetize my properties, or should I write them in the order in which I’ll be teaching them?” or “Should I use percentages/ems, or should I use pixels to keep it simple?” It was interesting and challenging to think about not just making something well, but to make something that a beginner could pick apart and learn from. It was a good exercise for me, and I like to think it changed the way I think about and write code.

Practice

Once everything was built, I had one final freakout. Now I actually had to present and teach this thing! I was chatting with a peer from my UI Design class, and he said to me, “I’m kind of surprised you’re doing this. It goes against everything I know about you.” Funny thing is, he was right. I’m an introvert at heart. I get nervous wehen talking to anyone new, and public speaking is even more intimidating to me. But I knew this would be good for me on multiple levels, so I figured it was worth it.

It wasn’t easy, but I slowly started gathering my thoughts and piecing together my presentation. I started to feel a little more confident that I wasn’t going to completely tank. I tested the beginning part of my demo out on my wife, and she fell asleep; that wasn’t very encouraging. I told myself it would be different for people who were actually there by choice and interested in the topic.

The Event

The day of the event I was feeling pretty nervous. I spent some time reviewing my notes and doing some last minute prepping. The event itself was pretty low key, which I appreciated. There were maybe twenty attendees. Abby acted as my TA, which was a real relief. I started with a simple “Hello World” exercise and introduced some basic HTML, and then got into the CSS. Everything went pretty smoothly and everyone was able to keep up the entire time. There were only a handful of questions, most of which I was able to answer. Abby fielded the tougher ones. As I write this, it seems odd to not have more to say about the actual crash course. But in a way, it’s very representative of the whole experience; compared to the preparation that preceded it, the evening was fairly short.

See the Pen Fluorescent Snapper by Alex MacDuff (@amacduff) on CodePen.

Feedback

After the event, Abby had a few pieces of constructive criticism, which I gladly accepted. Her three main points, simplified, were as follows:

Too apologetic / nervous
Too many unexplained terms / concepts
Not enough enthusiasm

She told me all these things were understandable, and assured me that for my first time teaching, I did a great job. I’m looking forward to putting this feedback to good use, not just in future teaching and speaking engagements, but also in interviews.

In Summary

Looking back, I’m a little surprised I volunteered to do this so readily. But whatever made me do it, I’m glad I did. I’ve said many times before that I want to share the things I’ve learned with others, and I think this was a pretty good start. I’ve already volunteered to give a short talk about Sass. After doing a three hour live demo on CSS, talking for thirty minutes about Sass doesn’t seem so intimidating. I look forward to all the things I have yet to learn and share.