Teaching

Education means a lot of things: self-education, online classes, Pre-K. It’s as important as it is complicated, especially in technology. Many programmers learned their first lessons on a family computer, not in a classroom. That’s where I started, and without deeper consideration, it could be “the way”: formal education in the backseat, adolescent hacking at center stage.

But self-starting doesn’t scale like we want it to. There are kids with home computers who have time and will write scripts and hacks for fun and have a supportive peer group who will think that’s cool. But they look a lot like I did at the time: white boys with parents who can afford a real computer, and people around them who understand or accept their interests.

I don’t think this will change on its own. Computers are cheaper and more powerful than they were in my youth, but they are poorer gateways to experimentation and learning. Gender stereotypes are still strong and destructive, as are many other lines upon which people are group- and self-discouraged to experiment.

Educational resources are one escape hatch: with a little technical knowledge and a reason to learn, you can dial up sites like Codecademy and advance up the rungs of knowledge. But those qualifications are brutal. What seems like an iota of prerequisites to me is a mountain. The spark, the motivation, to take the leap, is huge, and without it few have reason to trudge through the painful initial learning curve.

Teaching can help. It’s hard and time-intensive and can be draining, but it’s uniquely able to inspire and inform.

So I decided to try: I spent a week co-teaching a class with Sarah MacWright at Millbrook School in upstate New York. With ten high schoolers, for five days of five hours a day, and we learned how to make the web. Here’s how it went.

Building the web with HTML, JavaScript, and CSS.

The choice of topic wasn’t obvious or easy. As [why astutely said in his Art && Code talk](https://vimeo.com/5047563), why would anyone choose to teach a just-starting programmer _three languages at the same time? You could use a single language and a single environment, like Python or Ruby. But the end product matters: on the web, kids can share and brag about their creations. And they can connect to websites they already use in a new, fascinating way: view-source feels like understanding deeply.

Then, the question of abstraction: should we teach HTML or Wordpress, or another CMS? Wordpress quickly makes real-looking websites, and spares kids the worst parts of the learning curve.

But our intent was to create deeper understanding and creative urges, not just to make websites. The pain of HTML, CSS, and JavaScript lets way to a different way of thinking about the web and a cheat code to understanding it in a universal light.

The First Lesson

The order of languages taught follows their difficulty level and distance to the ‘basic webpage’: HTML for content, then CSS for style, and finally JavaScript for behavior.

I didn’t want to start the class with a ‘framework’ or Hello, world on a white page. We need a better onramp: something that connects and entertains.

We used ‘Inspect Element’. Everyone opens the school homepage, and right-clicks on a title. They see their first pageful of confusing HTML, but have a clear mission: vandalism. In practice, it was gentle trolling: changing the name of the school to ‘My School’ and redesigning the page in fashionable shades of pink, amongst other tweaks.

Then we moved on to start changing behaviors and animations, by learning our first bits of JavaScript. Given a Flappy Birds Clone, students typed their first lines of JavaScript, changing gravity, acceleration, the gap between pipes, and everything else.

This wasn’t a lesson to teach the nitty-gritty. We imparted the hacker mentality, that we can change the stuff in computers, and braved the first sight of intimidating software code while ensuring kids felt positive and were having fun.

The Nitty Gritty

The second day, we started building from scratch. I gave a short, simple presentation on the basics of HTML, and students followed along. Setting up text editors and learning how to save & refresh would have cost time, so we used jsbin to edit our first bits of HTML.1 First, Hello, world, and then Hello, <strong>world</strong>. Then tinkering with tags and typing. In this early stage it’s vital to have instant updates so kids can try variations quickly: this attempt-fail-succeed loop is where you learn.

Then, a presentation about CSS and similar tinkering.

Words Help Us Learn

Around this point I noticed that my style of teaching didn’t use terms effectively.

Words contain and define concepts, and they structure learning. Mine had blended together in day-to-day work, so I wasn’t nearly discrete or precise enough in my language.

For instance, I should have taught the concept of matching HTML start tags to end tags as ‘balancing’, with exercises and analogies, not as a detail or peculiarity of language. Then you can talk about balancing, and kids can grasp why it’s a common characteristic to the languages they learn. I needed to create words and mnemonics for when to use which brackets in which language. Familiar metaphors for syntax like ; in JavaScript - “it’s like the end of a sentence” helped students in a way that tens of mistakes wouldn’t.

First Bite of JavaScript

Then, the final language: JavaScript. I ran through a quick presentation and encouraged the class to try out examples in mistakes.io.2

As expected, teaching JavaScript is significantly harder than HTML or CSS. These lessons, more than any others, identified disconnects between the world of code and the language of English.

Only two students decided to grapple with JavaScript for the rest of the class, and they constructed incredible games. For the rest of the class, this was just a glimmer, and a lesson I was divided on: the amount of knowledge you need to start using JavaScript is significant and its usefulness your first HTML/CSS websites is limited. But, conversely, as the only imperative programming language, it has creative and academic potential greater than any markup language.

~/Sites

The first lessons used online programming environments that imitated live-coding, but to move forward, we needed to start building websites - that means files, editing, and servers. We set up Sublime Text 2 for each student, and I ran a Terminal window with python -m SimpleHTTPServer running from the ~/Sites directory. Instead of just typing, students needed to save and click ‘refresh’ to see changes.2

In usage, Sublime Text had a number of issues that made it feel like a sub-optimal choice.1 In hindsight, I might have used TextWrangler instead, if an even-simpler text editor doesn’t crop up.

Exercises & Handouts

Sarah wisely added exercises to intermittently help kids solidify their learning and check that they understood what we were talking about. After each lesson, we would make a quick ‘about me’ page or a <table> of our favorite foods: tasks that encourage students to use their skills creatively.

Then we created ‘cheatsheets’ with examples of HTML elements and tips for writing new pages. These were quickly and persistently adopted by the class.

Student Projects

On day three, students began their projects: four students built photo portfolios, two built games, and four worked in a group creating a student blog with Tumblr.

Portfolios

In an afternoon, I built a simple template for photo galleries, with concise HTML & CSS markup. By link-dropping a ZIP file of it on Dropbox, I gave students a running start on their projects: quickly we went towards Google Fonts for customization, switched to auto-advancing slides, tweaked colors and other details.

Seeing the students use the web as their medium was fascinating, especially in those who had experience in photography and framing. There grew new logical questions: how should a carousel work with different aspect ratios? Given infinite options for backgrounds, which complements their photography and style?

Games

Though many expressed interest, only two students ended up building games. A freshman and senior, they started with the Coquette framework which provides fundamentals like collision detection and a canvas to draw on. The game above, called The Maze Raze, features an awesome hand-drawn player and this student’s first use of trigonometry in the real world.

Another game, called Flying Mario, evolved from a side-scroller to a helicopter-like game with Mario-inspired graphics and style.

The games were far different in scope and skills than the other projects - there was an awesome moment where a student used trigonometry in the real world for the first time, making little pixel rectangle targets move in a video game. But we also bumped into some of the hard problems of games, like collision detection and how have different entities in the game exhibit different behavior.

I was fascinated by the ‘tuning’ tasks that students quickly mastered, like adjusting the ratio between gravity and jump height to make a game tricky, or designing a maze with nothing more than pixel coordinates and sizes of rectangles.

Coquette was fantastic for this purpose and let us focus mostly on actual topics and behavior of the games. For the small issues we found, I’m making notes to create examples or patches to make things even better.

Integration

At lunch on Thursday, I was talking with the math teacher about class, and reported that two of my students had used math: not just arithmetic, but multiplication, trigonometry, algebra.

I realized something I never had as a student: schools have multiple subjects that are independent. In each subject area, students can be two or more years ahead or behind, or can even opt-out.

The difference between how I barely learned in school and how I learn today is that I now jump subjects through combination. For instance, I wanted to learn statistics, so I wrote simple statistics, bootstrapping my non-existent stats skills with my decent coding skills. This way you learn by application and avoid the knowledge vacuum. And you have the fun experience of finding new subjects within your range.

But when you don’t know if students have taken tech class or art class, you can’t teach this way. And ideally, that’s how you teach coding: you teach fundamentals, and then apply them everywhere, in math, in art, in English. Coding is a lever, and could be effectively learned as one. You could think of it as writing or reading - skills than you use for the whole journey.

School Blog

The final project was a school blog, brook-posts.com. We chose to host it on Tumblr, since it permitted HTML & CSS editing, but also made the upkeep of a blog-like website less tricky. The places students took the site were interesting and awesome - after the have an understanding of HTML & CSS, they start asking more of ‘custom’: can we change layouts and design part of the site from scratch? And the mix of technical and non-technical tasks let students teach each other.

Let’s Talk URLs

Once the websites were in motion, I realized that we were missing an element of knowledge: URLs. How to link to pages, the difference between relative and absolute, and the different parts from http:// to .html, are essential bits of learning that make the web make sense, and are often abstracted away. Chrome has experimented with hiding http:// in the address bar, and students spend much of their time on singular websites, like Facebook. I never had the time to teach this, but I should have.*

Going Live

The final step was going live: putting portfolios & games on the internet, where students could pass around URLs or even put them on college applications. This was a surprising challenge to source: where, on the internet, can you just drag & drop files, for free, simply? It’s easy to find application hosting like Wordpress.com or more advanced tools like GitHub’s gh-pages functionality, but the low end is scarce.

The answer came from an unexpected place: neocities.org, a volunteer project that captures the spirit of now-shuttered GeoCities, worked perfectly. Registering for an account is simple, and uploading a site is just drag & drop. Since photos in portfolios were hosted on Flickr, all of the student projects were well under the 10MB storage limit. And in a moment that made my oldness visible, no-one in the class had heard of the once-popular GeoCities, so the name had no connotations.

Landing

The class was a few weeks ago, and it’s still sinking in. When I write code or try to explain a topic, there’s a much greater range of considerations and possibilities, thanks to my sister and these students. Like any sort of teaching, the results will come in time - I hope that we inspired people to think creatively and feel like they can change and make more kinds of things.

Teachers reading this post will probably wince at my newbie mistakes.5 Without my sister’s teaching ability, I would have only confused and bored this class. Like many non-teachers, I didn’t know how to teach. But this is a new area, and is still a little mysterious to everyone. There’s a blossoming of adult tech education, like nodeschool.io, and Hacker School and its clones, but we’re still looking for a good way to start earlier. Teachers and tech people alike are still finding what works and what doesn’t.

And so, just like coding, I’m hoping to iterate. The things that didn’t work, I have guesses for what would work better but they’re only guesses. The variables of time, location, and demographics would all massively influence content & style.

The full class materials are in a Github repository and are CC0 licensed. If you’re interested in trying out teaching, there are plenty of places to start, like CoderDojo, TEALS, Citizen Schools, and code.org.

Footnotes

March 18, 2014 @tmcw