More Web Design Tutorials

Gamifying a Coding Class, while Still Teaching Real-World Code with Web Design

November 29, 2017

I come from a family of teachers, including my father, and he taught me the value of entertainment in teaching.

One of the classes he taught was welding, and to engage students, he would set up a welding contest where students would have their welds tested in a hammer test: my father would place the welded piece in a vice, and strike it with a hammer to see if it would hold.

… The welds that withstood the most hammer strikes would win.

This fun little competition would really incentivised students to get their welding right. What might not be obvious, is that even though there was a bit of gamification applied in this lesson, students were also engaged because it was real. They were actually creating real welds … something they would do on actual jobs.

Gamification a Coding Class

With that story in mind, I designed StudioWeb to teach code in a gamified setting, but while STILL teaching real world coding. Students learn to write HTML, CSS, JavaScript and other coding languages, as they score points and unlocked levels and badges, but they are also building production ready websites!

… Once students see that they are doing the real thing, their enthusiasm jumps even higher.

Many ways to engage students

I’ve been creating code course since 2003, wrote a book on web design, and have been working with schools for nearly 7 years, as we refined the StudioWeb app and courses. Over that time, we’ve put into place many strategies that facilitate teaching code:

  • Gamification
  • Spiral teaching method
  • Open ended lesson plans
  • Visual student assignments
  • Software that provides instant feedback

… And so much more.

The results: very engaged students who come away with a practical understanding of coding, and a firm understanding of the concepts that underlie the code.

Thanks for reading,

Stefan Mischook