All Posts

A guide for workshops where teens discover the fun of programming

In this article, I want to share my experience of teaching programming to teenagers, explain some of the methods that I learned along the way, and the tools I use. I'd like to preface this by saying that I don't see hosting these internships or workshops as "teaching", but as a means to inspire. Workshops and school internships are so short, that even when my students are actively using functions, variables and parameters, there is rarely a real sense of understanding of the abstract concepts. And there doesn't have to be one. It's all about having fun with code.

My path as an educator for young people

This section of the article is for those of you who want to understand where my learnings come from. If you're just looking for a quick reference of the methods and tools I apply to host introductory programming workshops, you may skip to the next heading.

Ever since I started my professional career in software in 2015 I was eager to share my passion for the craft with those who have yet to choose their career path.

I started with being a course instructor during the Germany-wide "Girls'Day" events at my employer, where I still participate today. On this day, girls get to skip school to spend a day at a company of a domain where there are statistically more male professionals than female ones. They need to apply to one of the many offerings in German cities through the official website. Every company I've worked for so far has participated each year.

At the webfactory GmbH, I worked with school interns for the first time. In German schools, students must do a mandatory two-week "school internship" at a company of their interest, given that the company is offering to do it, between 9th and 11th grade.

I wrote about my two-week school internship curriculum for software development on this blog already.

In 2020 I hosted my first one hour workshop at the Futurecamp Digital in Bonn together with a colleague where eight teenagers (age 12-13) got to write their first JavaScript code as they modified a simplified clone of the once so popular "Doodle Jump" platformer game.

This platformer game called "Noodlejump" is what I've been using for my workshops for teenagers aged 12 to 16 ever since: Link to Noodlejump on GitHub

In March 2021 I built a special "Max und Moritz" version of the game for a talk I was giving for second- and third-graders at the "Max und Moritz" primary school in Bonn. Since Wilhelm Busch's works are in the public domain, I also get to share it online: xkons.de/maxundmoritz/. After I gave this talk remotely, the teachers at the school helped the students write their first algorithms using visual programming by completing the hour of code on iPads. This was the only time I've tried to inspire students aged 8-9 so far.

I still keep the letter they sent me on display in my hallway.

The letter I received from the students of the Max und Moritz primary school after giving a talk on programming there. It reads: Dear Konstantin, thank you for telling us about your job. Now we know what a software developer does. We had fun. Now we can make games and apps ourselves. Kind regards, the meerkats

The school student who did an internship with me in 2020 ended up applying for an apprenticeship position as a software developer at LeanIX in 2021. Since we had no one in our company teaching apprentices in software development, I was asked whether I'd be up for it. This is how I became a certified instructor for apprentices in software development in Germany. The topic of apprenticeships in programming deserves an article of its own. I want to focus on the workshop topic in this one. Just know that the regular duration of an apprenticeship here is three years.

After another JavaScript workshop using Noodlejump at the Futurecamp Digital in Bonn in November 2021, I didn't manage to host another one for two years.

Finally, in October 2023, I teamed up with the wonderful team at the Medienzentrum Bonn for a half-day workshop with a group of 9 teenagers aged 12.
This workshop was split into two chapters: In the first one, the participants learn basic programming concepts like functions, if statements and loops through the hour of code, and in the second and largest chapter they use JavaScript to customize and improve the Noodlejump game.
The kids had fun. Great success.

Around the same time as I started planning the workshop with the Medienzentrum, I was talking to a friend, who had just switched from the profession of a software researcher to high school teacher, about whether he would like to team up for such a workshop at his school. The school principal supported the idea and in January 2024, the two of us used the same format I designed for the Medienzentrum for a group of 19 students from 8th and 9th grade (age 14).
This was an amazing experience. Even though this was the largest group of participants so far, they were also the most behaved 😅. Kudos to the Otto-Kühne school in Bad Godesberg.

Thanks to LeanIX offering one "social day" per year to support employees doing volunteer work, I practically got paid to do this one.

Seeing the excitement of young people making computers do things through code they created for the first time is priceless.

Methods I learned to apply

Combine programming with topics your students care about

One important lesson for me was that for most teenagers, code itself is boring. There are some who are naturally drawn to the art of code itself, but that's the exception. So in order to get them interested in learning how to code, I need to understand what topics they care about and find a coding project that relates to them.

The hour of code does this really well by combining visual programming with huge pop culture themes like Minecraft, Disney's Frozen, or Star Wars.

Another example is the pong clone one of my interns wrote. He played Tennis competitively, so his game ended up using the pong playing style to create a game that resembles tennis a lot more. You can play it here: sidneyk1.github.io/pong

You might remember playing a lot more video games as a teenager. So it shouldn't come as a surprise that building games is a great way to get young people interested in programming.

Learning by doing without understanding but with fun

"Learning by doing" is a well-established method of acquiring any skill. I learned to never expect teenagers to understand any abstract programming concepts like variables, functions, and control flow in my workshops. I just need to give them enough context to be able to use them. Otherwise, they get bored.

This learning style is often referred to as "discovery learning".

High performers can be your teaching assistants

When working with a group of teenagers, there will be some who are faster than others. They will quickly demand a new task to work on. What worked well for me was to ask them to help the students sitting next to them. They don't get bored and I got myself some teaching assistants.

Start simple and gradually up the complexity

This might seem obvious, but I still want to mention it here. The first challenge in my Noodlejump workshop is to "replace the avatar sprite of the player". Students must scan the code for the place where this image might be loaded. The code contains a lot more code comments than enterprise software would to aid in such tasks. Once found, all they need to do is replace the URL to the image which is provided as the second parameter to a function.

The next task involves adding your first new class property to the game to render the score (again, it's not described as such to the students, they don't care about concepts like classes or state). Without prior experience, no one can figure this out on their own. So here the required code is presented to the students, but they still get the time to scan the code for the relevant place to put it and type it out. They should still get a sense of exploration as they progress.

For tasks like "increasing the speed of the game by modifying the gravity and velocity parameters" I just let them copy-paste the code that gets it done. This is another important skill anyone writing software should learn early on.

Teenagers might take a bit more time to speak up when you ask them a question

I learned this from my friend Robin, a teacher, with whom I did the last workshop. Since I'm used to working with professionals every day, I forget to wait a bit longer when asking the students "if they have any questions" or any questions really.
Ten seconds is not enough.

Remember to ask questions where there are many possible answers. Questions that have a small set of "correct" answers result in the students having to be much more confident about theirs before they speak up in a group setting.

Start with a game and get moving

I start each workshop with a little game to lighten the mood and move around. The game I use also helps me to remember the names of the students.

Here's how it goes: everyone stands in a circle. I start by pointing at any person. That person needs to tell me their name. I remember the name and the person it belongs to. This person needs to point at the next person and so on. Every person can only be pointed at once. Once everyone has a person they pointed at, the game setup is complete.
Now we do one "fast round" of pointing at your person and saying their name out loud. If this works well (it usually works on the first try), add this additional rule: when pointing and saying the name of your person, you need to swap places with them in the circle. You cannot point at the next person until the swapping is complete.

If you still want to go another round, you could switch from names to word associations.

Learn in the browser

Especially when hosting workshops at schools it's always tricky to install any software on the computers there. For this reason, all the tools used in my workshops run in the browser.

Tools for teaching

Hour of Code

The hour of code is a learning platform with predefined projects where you get to do visual programming with well-known pop culture topics like Minecraft, Disney's Frozen, or Star Wars.

I believe this is the best introduction to programming for anyone who has no prior experience. I also prefer it over the Scratch platform, since the pop culture themes of the hour of code help to immediately get kids interested.

You end up using functions, function parameters, if statements, and loops without knowing anything about these concepts before.

Screenshot of the hour of code website showing the Flappy Bird project

Over the years, many different projects of varying quality have been added to the site.
For my workshops, I stick to these four:

These projects also include videos in English. They are helpful when the students are working unsupervised. In an in-person workshop setting, I instruct the students to skip them.

The instructions are available in many languages.

For all of these projects, the last chapter ends with a "playground level" where you get to use all the command blocks you've learned until now to just go crazy. This helps to keep students busy a little longer while others are not done yet.

Some of the students will still be way faster than others. I ask those to start another one of the four I linked above.

StackBlitz

As mentioned above, I optimize for tools that run in the browser. Since I want to convey the "text-editor" style of programming early on, a fully featured IDE in the browser is a must.

Luckily, Stackblitz has solved this problem for me. They run Visual Studio Code and the node environment locally in your browser. It's awesome.

It's super easy to open any open-source GitHub repository in StackBlitz. Simply append the organization and repository name to the following URL like so: https://stackblitz.com/github/<organization>/<repo-name>.
Example from my workshop:
stackblitz.com/github/xkons/lerne-programmieren-mit-noodlejump

Another great feature is that every student works on their own copy of the repo in StackBlitz. It's automatically forked when you start editing, but you can also manually click the "Fork" button in the top left. At the end of the workshop, I make sure that all students write down or take a picture of their forked stackblitz URL so that they can share it with friends and family and keep working on it at home.

Screenshot of the Noodlejump game in the StackBlitz IDE in the chrome browser

Common pitfalls when using StackBlitz:

If you'd like to learn more about the history of StackBlitz, I recommend listening to the devtools.fm podcast episode with StackBlitz CEO Eric Simons.

Phaser

Phaser is a free and open-source 2D game engine to build games that run in the browser. The Noodlejump game for my workshop is built using Phaser version 2. Version 3 has been available for quite some time now.

While Noodlejump is quite simple, you can build some much more advanced games with it too. Here's a really cool article by Zakaterina Railian on how she ported the Prince of Persia game that was originally published for the Apple II to Phaser 3.

The Phaser documentation is great, which is really helpful for more in-depth workshops where I teach the important skill of "reading code documentation".

When explaining Phaser to the students I simply tell them that it's this pile of code that many developers have worked on that saves us time by not having to implement things like collision detection or game physics ourselves.

Link to Phaser on GitHub

A rubber duck

In the morning on the day of my most recent workshop, I spontaneously packed a rubber duck I got at a software conference some years ago. My idea was to use it as a funny anecdote between the hour of code and noodlejump chapters to explain the concept of "rubber duck debugging". It ended up being a useful tool to make explanations of game physics more fun. I dropped the rubber duck on the ground as I was explaining the concept of collision detection.

Call to action

If the idea of working with children seems something you'd be up for, I can only recommend pursuing some volunteering work to teach programming. It's really rewarding and high in demand.

You also don't need to do this on your own. There are local initiatives in many cities you can join, like the Futurecamp Digital in Bonn. Recently I learned about the Hacker School, a company organising programming courses given by volunteers as well as working students in German schools.

Reach out if you have any questions or want to work with me to host a workshop at your school 🤓.

Published 10 Feb 2024