Igniting kids' enthusiasm for coding
About one year ago, I received a Facebook message from my nephew Efraim in Indonesia. Efraim asked if I could help him with a school project. "I have to do something with computers," he wrote.
I suggested he create a website, just a simple website with HTML5, CSS, and JavaScript. After a few chat sessions and some help from Codecademy, Efraim completed his project. His teacher was really proud of his work and so was I.
I started thinking that maybe this is not only interesting and useful for my nephew but also for other kids. So I started an initiative, CodingStuff.org, to ignite kids' enthusiasm to learn how to code, to create apps, to design websites, and overall to become comfortable with technology.
In August, I visited my old secondary school, Stad & Esch, in Meppel, Netherlands. When I was in school some friends and I founded a computer club that we called Optisoft. We hacked some small applications, talked about multicolor sprites, and had a lot of fun.
I thought why not do this again? I sent a tweet to Stad & Esch: "I really like to organise a Hackathon@School" and the school responded directly: "That's cool, let's make an appointment."
Now, I’m a visiting teacher at Stad & Esch and in January 2015, I started teaching kids how to code. I gave a Devoxx4Kids workshop in Boston prior the Red Hat Summit last June.
Why is coding important?
In 1982, when I was only 12, I received a Commodore VIC-20. With it came a manual with a tutorial on how to code. By following this tutorial and then by reading magazines, as small as I was, I started to code. I built only small programs, but I learned how to solve problems and puzzles and how to think logically.
My passion for coding caught fire and I wanted to study computer science at the University of Twente and become a software developer. After coding on a Commodore 128, Atari 1040 ST, and a Philips P3105 with computer languages like BASIC, Pascal, and Turbo Vision, I was finally old enough to go the University of Twente.
Since university, I have worked on projects in a number of companies and have been working on several side projects. My coding skills and experience have always helped me to find creative solutions and to adapt to the ever-changing technological environment.
Nowadays, everyone uses a cell phone or a computer, and most of us use both. Kids live in very different world from the one that existed when I was younger. It’s full of Web services — YouTube, Netflix, and Facebook are all key parts of life.
Every company is a software company now. Even companies that deal in the transfer of physical goods need to have some type of digital presence. Much like knowing a bit about medicine helps you to have a more meaningful conversation with your doctor, knowing a bit about how technology works prepares you for this era.
In the future, the amount of technology and our reliance on it will only increase. The students of today need to be able to not only consume this technology, but to understand and control it.
Stad & Esch understands this and asked me to teach an hour a week about coding and technology to kids aged 11-13.
Hackathon@School
I kicked off my lessons with Hackathon@School, a hackathon especially for kids. A hackathon (also known as a hack day, hackfest, or codefest) is an event in which computer programmers and others involved in software and hardware development, including graphic designers, interface designers, and project managers, collaborate intensively on software projects.
I used our hackathon to start the course in a different way of teaching — not only talking and explaining, but having the kids practice the work. I explained a little and the kids just started practicing, helping each other. During this hackathon, they learned the basics of HTML5 and CSS, and they were focused and had a lot of fun.
Of course, just like a real hackathon, we ended with pizza. Normally, you’re not allowed to eat in the classroom but the school made an exception for our hackathon. The kids now expect to get pizza after every lesson!
Lessons
After Hackathon@School, I had to figure out a schedule for my lessons.
My goal, and the goal of the school, is to get the kids enthusiastic about technology, mainly coding. These lessons were not compulsory and the students came from different levels of education. I wanted to attract their attention with subjects that the kids would find awesome. I figured it should be something with websites and smartphones! It was clear to me that we had to start with HTML, CSS, and JavaScript. One advantage of these technologies is that you don’t have to install too much extra software. You only need a browser and an editor.
I decided to divide the schedule in a few parts. We started with an introduction to HTML, CSS, and JavaScript, and moved on to a game called Flappy Bird, an app for their smartphones, and finally, to combine everything, we’d create a spy cam.
The most important goal is to interest the kids in coding, so that they can practice at home or maybe start a coding club at school. They might want to participate in CoderDojo, another initiative where kids learn how to code or the cool Jorcademy.nl initiative, the Dutch online coding academy of 13-year-old Nick Jordan.
The basic structure of my lessons is always to start with a section on future technology, in which I talk about new technologies such as robots, 3-D printing, and all kind of new cool stuff. I show a YouTube clip such as this clip about a dancing robot. After this, we start with our lesson.
For every lesson, I prepare a presentation with explanations and assignments. I explain a little then give the children an assignment. And the children go to work. They work in small groups and help each other. For some questions, I sometimes don’t have an answer but there’s always a whiz kid who does have the answer.
My Friends app
We started with playing around with HTML and CSS and I thought it would be cool to create a smartphone app with just these techniques. Friends books that collect information about your best friends are popular so I figured out a My Friends app. This app has a page with a list of friends and detail page with information about each friend like, for example, their hobbies and what they want to be.
The kids created these pages with only HTML and CSS in an editor and viewed them in the browser. To turn the kids’ web pages into a real app for their smartphones, I used Ionic. Ionic is a complete open-source SDK for hybrid mobile apps. Built on top of AngularJS and Cordova, Ionic provides tools and services for developing apps built using web technologies like HTML5 and CSS.
When the web pages were ready, I turned them into apps with a tool that I had written for generating an app with the help of Ionic. The kids were proud to see their own app on their smartphones.
Flappy Bird
Gaming is always fun, so why not create a game? There are a lot of frameworks to help you, like Phaser. My presentation for this workshop explained how to code your own Flappy Bird.
We started again with HTML and CSS. You don’t have to explain everything — for example, we used CSS mainly to make the website more beautiful. For practicing with HTML and CSS, we used the CSSDesk sandbox website.
Next was JavaScript. I explained a little about JavaScript and programming languages in general. Also I explained the use of libraries: you don’t have to do everything by yourselves. To create Flappy Bird, we used Phaser, a fast, fun, and open-source framework for creating browser games.
I prepared a few assignments for coding our Flappy Bird game. In steps, the kids could add the bird, change the bird, and add the pipes to the game. When they finished the last assignment, they could play the famous Flappy Bird!
Create your own app
Sometimes, you’re really surprised. One of my students came to me and asked, "Mr. Henk, we’d really like to create a real app, just like you at work!"
I'm a front-end developer and I develop applications with the Ionic framework. I thought why not?
We started with installing NodeJS, NPM and Ionic, step by step with explanations. In the following lesson, we configured Android - and one 11-year-old tipped me off that there is an Android emulator available for our computers.
In our last lesson, we modified a sample Ionic app. The kids found it really cool to create their own app and install it on their smartphones. Next school year, we’ll dive deeper into app development.
Spy cam
To combine all things we learn, we created a spy cam. This spy cam consists of a Raspberry Pi with a camera and a smartphone app. The app displays the images taken by the camera connected to the Raspberry Pi.
We started by building an app that can show images from a website. When we finished the app, we connected it to the Raspberry Pi. We configured the Raspberry Pi to capture camera images with the help of Jacob Salmela’s “Raspberry Pi Webcam over the Internet Using MJPG-Streamer”.
And our spy cam was finished. We put our camera in the classroom and we were able to see the images it took on our app! And that was really fun!
Devoxx4Kids Boston
In June, Devoxx4Kids gave me the opportunity to give a workshop in Boston. Red Hat organises the annual Red Hat Summit, and in 2015 also hosted the first Devoxx4Kids. Devoxx4Kids aims to introduce teenagers to programming, robotics, and engineering in a fun way. I hoped to use my workshop, “Build your own Flappy Bird”, to acquaint teens with HTML5, CSS, and JavaScript — as they build a Flappy Bird game!
My workshop drew about 20 kids ages of six through 16. They were all enthusiastic. The day consisted of six workshops and mine started at 10 o'clock. I had brought some swag and some typical Dutch candy called Drop, but they weren't so enthusiastic about that. I showed my Future Lesson video and we started with HTML and CSS, ending up with a cool Flappy Bird game.
The kids liked the workshop very much and learned a lot. For a lot them, it was the first time they used HTML, CSS, and JavaScript. The kids were familiar with Windows and our laptops were setup with Linux but that was no problem for them.
Summary
Over the last half year, I’ve learned a lot about teaching kids coding. I learned to clarify complex things and I have improved my teaching skills. Never underestimate this new generation. They know a lot more than you think, and they know how to find information and how to use it.
They were all smart, motivated, and enthusiastic, both in the Netherlands and in the United States. All we need to do is to ignite their enthusiasm for coding and use interesting and cool lessons to give them some pointers on how to code and then the magic happens!
But one thing I know now for sure is that teaching is my passion: teaching the new generation about coding and technology. My dream is that one day one of my students will say, “Thanks to Mr. Henk, I discovered my passion for programming.”
So I will continue to teach kids and share my experiences all over the world. I’d like to continue to teach at school and for Devoxx4Kids. Further, I want to extend my Coding Stuff initiative.
And wouldn’t it be great to go to Indonesia to ignite Indonesian kids' enthusiasm for coding?
About the Author
Henk Jurriens is technology advocate and software developer with a master’s degree in computer science. Henk is enthusiastic and eager to learn, and his passion is coding. He strives to get people enthusiastic about new technologies. Next to his work as a software developer, Henk founded Coding Stuff, an initiative for kids learning how to code. Henk is also a visiting teacher at a secondary school, teaching kids how to code. In his spare time he likes to travel and to run with his dog. See his LinkedIn profile or follow him on Twitter.