Teaching Web Development in High School: Chromebooks really get in the way.

The past two weeks I have volunteered a couple hours of my time at the local high school to teach a small class of the kids in the fine art of HTML and CSS. I have only one hour of interaction with the kids each week, but I spend about two to three hours beforehand prepping materials and getting ready.

The first class was a blitzkrieg of ideas. A bit of “A website is a collection of web pages around an idea” and “A webpage is a chunk of HTML filled in with other stuff to give you one view of the idea” and so on. A map of a fairly complex web production environment: The “business thing”, the business logic, routers, databases, HTML, CSS, Javascript, Canvas, SVG, WebGL, etc. etc. etc. The number of websites I’ve built where “the business” was a completely separate server with a simple frontend written in Django, Catalyst, or Express shows the maturity of the model.

And then we hit the wall. As a demo, I wanted them to all open up a file, edit an eight-line HTML file (HTML, HEAD, TITLE, BODY, PARAGRAPH, CONTENT, plus closures), save it, and view it in the browser.

The enly tool these kids have for this is a bunch of Chromebooks. Most of them can’t afford laptops. The school provides them the Chromebooks, and their own Google Drive locations and accounts. So that’s what we had to work with.

Problem number 1: These kids have no idea what “plain text” is. Every tool they’ve ever used comes with options to pick a font, do bold, do italics. When I asked them how the computer “knew” to use bold or italics, they shrugged. I had to explain that the zeros and ones saved to their storage contained extra zeros and ones to describe the decoration, the bolding, the italicizing, the font selection. We were going to add the decoration back ourselves, using HTML. But before we could do that, we needed to use the most simple storage format there was, the one with no decoration, the one where every character you saw was the same the one you saved, with no additions, to annotations, no decorations.

The ease and convenience of RTF and other “printable” or “web-ready” formats has completely ruined these kids’ understanding of what actually happens underneath the covers.

Problem number 2: These kids have no way to correlate files to URLs. The lack of a traditional storage medium, and the introduction of Google Drive, means these kids have no mental map for associating a “web location” with a “filesystem location”. Everything is seemingly ad-hoc and without a real-world physical reference. This is probably the lesser problem, as storage is already very weird and about to get weirder, and we’re all just going to have to live with that fact.

The second class went better, and I went much, much slower. This is a hands-on class where I lead them through a couple of exercises and help them figure out weird things they can do with HTML. We figured out work-arounds for Google Drive and practiced our first, basic HTML, like headers, lists, and so on. And I gave them their first styles. They had fun figuring out random colors that seemed to work for their backgrounded objects.

There’s that Simpsons episode where some adult male says “Am I out of touch? No! It is the children who are wrong!” Well, maybe I am out of touch, but it really seems to me that Chromebooks may be fine for accessing the World Wide Web, but as a tool for developing on the web, they’re more a hindrance than a help.