What Teaching Taught Me
In the past few months I've had the privilege of teaching web fundamentals (HTML & CSS), alongside my boss, to University graduates who have expressed an interest in finding out what this web thing is all about.
This may not seem like a big deal, but it has taught me a fair bit - and hopefully the students picked up a thing or two too!
I don't know much but...
There's a heck of a lot more than the basics of HTML(5... of course) and CSS(3... of course) that would be much more exciting to cover, but it turns out teaching mixed-ability classes of students how to build a web page right from the start in around two hours is no mean feat! You quickly forget how much context is necessary to understand in order to really grasp each little topic and sub-topic - especially if we're looking to encourage people to mark up content correctly and take full advantage of the C in CSS... the cascade, duh 🧐
I actually learned that, when I wasn't looking, I've picked up quite a bit in the last 10 or so years. We also make a boat load of assumptions about common knowledge, which it turns out isn't that common; like how a web page is served, what an IDE is, and why the hell the page I'm building doesn't render when I leave out a semi-colon?!
Glitch is bloody great!
The first workshop we ran we built a web page locally, asking people to install VS Code and create a folder with fresh files on their machine.
Big mistake.
It turns out creating a folder and placing new files in it can be quite confusing, especially when you start having to deal with various operating systems and multilingual keyboards.
This is where Glitch came in to the rescue.
If you've not heard of it, Glitch is a sort of code sandbox in a similar vein to Codepen or CodeSandbox, and has some awesome features for making a follow-along coding session a pleasure to run.
We started with a simple project consisting of a marked up portfolio-style HTML page and blank CSS stylesheet, then continued to fill in the CSS with the students, explaining about layout methods and various CSS rules along the way. We worked to a designed solution we had come up with before running the class, in which we did our best to cover the box model and pretty much all layout methods available in CSS - including flexbox and grid.
If you're interested at all, here's the completed page, the readme includes some useful links if you're just starting out yourself.
You get a lot out of it yourself
Apart from anything, teaching forces you to learn your subject properly.
You will get asked questions. Want to look credible? For your sake, it would be best to be ready to answer them.
There's also the satisfaction of watching people discover the magic of transitions whilst rotating the image of an innocent puppy 50 times in 300 milliseconds using a few lines of CSS. If only we had time to cover animation...
We've tweaked our formula a few times already, but the best way to find out your teaching style is probably to just go out and do it, even if on a small scale for a junior dev, family member or friend - I doubt you'll regret it.
Who knows, you might learn a thing or two.