I've been a part-time professor at a college in Toronto on and off for years. Besides this I've taught many workshops and such out of my studio, and organized a lot of events for the digital media arts in Toronto.

Last year I was dabbling with Codepen, and liking it. At the time I was trying out an installation of Icecoder, a web IDE, and getting my students to write code in that. It had a lot of advantages over the usual classroom method. This year I switched big-time into Codepen, and have even been joined by my fellow prof who has introduced it to his students. Here's why...

How it works in the Normal Class

In the usual classroom, the overhead projector is on and my code is up on the screen, with people following along as I demonstrate some technique. This approach has a number of problems.

Problem 1: people can't see!
I don't know how many times this has come up, where somebody clearly needs glasses but doesn't want to move to the front of the class. So they see commas as periods, semi-colons as colons and so on.

Problem 2: time wasted!
After writing a bit of code students start to get hands-on and inevitably they hit bugs that they need help on. So I spend my time going from station to station to assist. Rarely does just one person have that problem, and I can find myself fixing the same problem for many students, which takes away a lot of class time. And it robs the student of the satisfaction of wrangling it themselves.

With the web IDE, I could bring up the bug for the whole class to look at, and others having the same problem would learn and be able to fix their own bug.

No doubt about it, moving to a web IDE was sheer brilliance for the classroom.

How it works in Codepen Classes

Codepen is more than a web IDE, it is a community of creative developers. This takes it to a whole new level. Right now I have 28 students, and my fellow prof Andrew has over 30. So that is just about 70 students, all of them here on Codepen. Many of them have never written a line of code before, but seeing all the inspiring examples here and being able to "mess with them" gets people excited. And on top of this, the interface takes away any barier to actually getting started.

"Demo or it didn't happen"

Here is an example from the first beginner class:

It's a very basic pen to illustrate what HTML elements are, how selectors work, and the difference between an "id" and a "class". We built this together, while I lead the class in "professor mode". Everything is so much more dynamic than everyone sitting in their own little silo, silently falling behind as often happens in these groups.

I can post my little examples, designed to clearly illustrate a single principle, and my students can fork it to take the example and expand on it. I can post pens I've found in the community that make further use of those principles.

Breaking out of the Shell

One of the biggest problems in traditional school is the closed environment. People can spend years in school, and at the end of it nobody has seen their stuff. Getting students on Codepen breaks up that enclosed environment, and I love that my students, even at their very early stages, are putting their things up for more people than myself to view. It isn't just me, the prof, sharing opinions any more. The sooner people get used to handling feedback and presenting their work well, the better off they will be.

The environment on Codepen is pretty helpful, and from what I've seen most folks here are also here to learn and get inspired. This opens up a much wider base of resources than I could give my students by myself. I can help, but as we all know learning to code takes a lot of time and practice. People have to be inspired to put in that effort, and frankly they should be thinking about it every day. Codepen makes it easy to find something new to think about and experiment with on a daily basis.

Up to now, "professor mode" has been the most useful thing for me, but I'm looking forward to employing the other features of the pro account, including "collab mode". How awesome is that? I will be able to invite students into a session and code along with them. And using my team account, I can even loop in the guys in my studio to jump online and help somebody out when they have spare time. (Folks tend to be inclined to helpfulness in our shop)

And then there is "presenter mode" that my students will be able to use with their pens. One of the major success patterns I try to get across to my students involves understanding that writing good code is only half the battle. Successful developers are also good communicators and know how to present an idea and get buy-in from their team, their employer, or even their customers. With that in mind, I encourage them to get practice presenting their work - and now they'll have a brilliant tool for doing that.

So thank you to the Codepen folks - you've juiced up my classroom. It's inspiring to me to see these new people coming to realize that code can be fun.


1,533 2 20