The Dopefly Tech Blog

« The Dopefly Tech Blog Main page

I teach coding to high school students

posted under category: General on November 23, 2020 at 8:15 pm by Nathan

Let me start by saying that we home school. And not just this year.

Initially it was out of a desire to keep our first kid ahead of the learning curve. This smart one was reading before kindergarten. Hey it worked - she graduated a year early and is making her way through college.

Something unexpected that came from this screwball 2020 year was the opportunity to teach a class at a home school co-op. This is essentially a one-day-a-week school experience that teaches those subjects that parents don’t want to do at home. We unashamedly use this for English classes, among a few other things. Families can pick up a class here or there, or build their entire curriculum out of it. There’s nothing home schoolers cherish more than the freedom to make educational choices for themselves, so this works for a lot of people.

We noticed that most of the teachers here fall into a couple small categories: parents of the students, and retired teachers. My wife has a particular interest in personal finance, with the real goal of making a generation of young people who understand things like credit scores and compound interest. So with all the qualifications being met, she’s been teaching her favorite things to high school students.

This year I found some spare time somehow (anyone else with me on that?). My wife put the bug in my ear about teaching a coding class. I really wrestled with what that even meant, and what students could benefit from it. When I heard our last CS teacher moved away over the summer, I knew we had a gap - somebody had to teach a computing credit. So with all the qualifications being met… why not me?

Also, more importantly, how?

I want to teach real languages and programming skills. I want to teach students to actually code, to understand what the computer is doing, and to see things from the inside. All of the curriculum I could find for high school seemed to be based on Scratch or Legos. It’s not that there’s anything wrong with that, just that there aren’t a lot of professional jobs for dragging-and-dropping Scratch blocks.

Maybe I’m a rare gem or something, but I started coding web sites in high school, then graduated and started getting paid to do it that same week. We all know the bar is a lot higher now with front end development being nearly impossible to break into without a good mentor and who-knows-how-many years of practice, but I like to think it’s still possible to start a career coding web sites.

What languages does that leave me with? A lot of options, so let’s rule out anything grossly unpopular, anything with static types because type systems are a little tough for noobs (more on that later), and anything I don’t know (and that’s a lot). Then make a strong preference for those languages that work directly with HTML (haha yeah, ok, that’s a list of 1 now). I thought about Python, and maybe I should have thought harder, but I chose JavaScript.

To be fair, I see some of the folly in my ways. There is a challenge with some kids when programming moves from conceptually understanding what to do, to typing the code out on a keyboard. Furthermore, curly braces and parentheses can get messed up in ways you don’t want to see. Maybe Scratch would have been smart. Maybe Python would have been wiser.

Still, I stand by my decision to use a wider-purpose language than Scratch. JavaScript is debatable for a first language, but I have plans to tie it in with the next semester when we code up HTML and CSS. In fact, I’m planning to use the project that these kids finished the 2020 school year with in their 2021 web site that we are building next semester. This is why Python wouldn’t be my primary choice for a student’s programming language – it lacks that one critical integration: the web browser.

Why HTML and CSS? “Aha those aren’t programming languages!” you may say. And you would be right, but this isn’t a programming class, it’s a coding class. You don’t program HTML, but you do code it! I want these students to be well-rounded in what is debatably the most important software skillset in the history of the world - HTML, CSS, and JavaScript, the fundamental building blocks of the web.

Class started in the fall. 17 students showed up! This is my first class ever, I’m pretty excited! Also nervous. Stomach ache nervous. Stomach aches aren’t a sign of COVID however so forget that! This is just like a conference talk or anything I’ve done before, I’m going to knock it out of the park just based on my vague charm and the meme humor in my slideshow.

Yes, there’s a slideshow! It’s a Google Sheets slide deck. I picked one bold presentation theme for the year and have stuck to it. We’re actually fully on the Google stack of education. I have a Gmail account through the school, a shared Drive, and we are suffering through the underdeveloped early years of Google Classroom, which is still better than most of the alternatives.

One of my students was staying home, hoping to skip past a possible first-wave of COVID-19 as soon as school started, so unless I want to video record the whole thing and post it for the class (hint: I don’t), I’ll need to have some way to transfer the knowledge across the internet so when he finally attends physically, he won’t need to catch up. Every week I post my presentation in Classroom. At first just for him, but then I realized that it’s a great tool for the students to review our lesson, check on what the homework was, and read my possibly embarrassing speaker notes. I love transparency when it comes to learning.

I told the kids that everything that happens inside a computer is knowable - something you can learn. It seems like it’s a sealed black box, but that’s only because you don’t know how to open it yet.

The lessons this semester have been loosely adapted from Eloquent JavaScript. I went through a lot of JavaScript books and curriculum and I decided on this one for a number of reasons. One of which is because the book is completely free, even though I bought a paperback copy to study. The other reason is because I liked the order of the approach - variables, data types, operators, flow control, functions, then objects and arrays. Furthermore, Eloquent JavaScript is modern enough to not recommend you do it all in a browser by including a script tag, which is something common I see as a side effect when teaching a 25 year old language.

So we kicked it off. Leson 1, install VSCode and Node so you can run .js files. Lesson 2, hello world! Then onward and upward from there. We’re only 13 weeks in and that’s the end of the first semester. That’s right, I’m writing this in retrospect of my first half-year! How did it go?

Lessons learned

There can be a mental hang-up when first trying to put code into text, as I said earlier. For some of the students, this was, and still is, a big mental block.

The different braces and brackets are confusing. Why do we use curly braces on if statements and on loops and on functions and on objects too? This is where I began doubting JS and reconsidering Python for next year. At least square brackets usually means we are talking about arrays, and parentheses usually means it has to do with functions.

A student dropped out! He was probably the youngest one in the class, 14. I don’t know if it’s a brain maturity thing that grants the ability to write software, but I think that could contribute to it. Honestly, with my ~3 week introduction, he could probably pick it up and ace it in 2 years. After that, I started pre-presenting the presentations to Elly, my 11 year old. She seemed to get it and helped me smooth over the rougher stuff for the next few weeks. She also wasn’t great at the technical parts of coding, but she understood the concepts. Elly is smart!

Typing speed Something that popped up right away was the fact that most of the class typed under 30 WPM, and we had a few hunt-n-peck typists. I started assigning an amount of typing every week, with the goal of getting at least 60 WPM with proper touch-typing form.

Editing text is a skill that nobody knows without being told. This is one that I remember learning initially, and I still learn new tricks pretty frequently. We had to talk about text navigation, shortcut keys, saving often, and I even had everyone install Prettier to clean up what they’ve written.

Creating files was an actual challenge. There are precisely 44 ways to do it with VSCode (I didn’t count, I’m sure it’s over 6), and I don’t like to force people to do it “my way.” Honestly i don’t even prefer a specific way myself.

The JS Debugger isn’t good enough. There are errors that don’t get shown correctly, and some random outputs that are unexpected, like “Undefined” output randomly and rendering of empty blobs when using console.table. Students are easily confused about that. Then they as me, and I’m easily confused about it.

I assigned FizzBuzz, which is maybe a little sadistic after just a few weeks of classes.

One student nearly finished FizzBuzz before class ended. Everybody else took all week. A couple of them never even turned it in.

We made rock, paper, scissors to practice our skills. That was pretty fun.

Our big project was a card game. Make a card, make a deck, deal a hand to at least 2 players, then declare a winner using whatever rules you want. I recommended high-card, then add poker rules for bonus points. My star student did the easy stuff, then built a blackjack game. Everybody got a passing grade, at least.

I explained functions twice. Maybe three times by the end. It’s a complex solution to a complex problem.

My son wants static typing! He asked me about dealing a hand of cards, and how function parameters work. He noticed it was difficult to tell what the argument in the function was supposed to be. I’m pretty proud of him. Without knowing it, he was asking for a stronger type system.

Throwing errors. The class thought the verbiage was funny. Throwing and catching. We didn’t go over it except in passing, but the terminology is somewhat memorable.

That’s it for now. I have a lot more but can’t think of anything right now. Feel free to ask questions!

Nathan is a software developer at The Boeing Company in Charleston, SC. He is essentially a big programming nerd. Really, you could say that makes him a nerd among nerds. Aside from making software for the web, he plays with tech toys and likes to think about programming's big picture while speaking at conferences and generally impressing people with massive nerdiness and straight-faced sarcastic humor. Nathan got his programming start writing batch files in DOS. It should go without saying, but these thought and opinions have nothing to do with Boeing in any way.
This blog is also available as an RSS 2.0 feed. Click your heels together and click here to contact Nathan.