This article is based on a presentation given at MozFest 2018. The full slide deck can be found at tinyurl.com/mozfestslides.

I watch a lot of Netflix. And as with most streaming services, once the series you originally signed up for is finished, you inevitably start searching for other programmes that look kind of interesting. Over the years, this has led to me discovering some of my favourite shows and it's also how I stumbled across Abstract: The Art of Design.

Episode 1 begins with Christoph Niemann. An illustrator, artist and author whose work you may already recognise. It spans almost every genre, from augmented reality magazine covers to National Geographic expeditions. But what does it have in common with learning to code? At this point, not much.

As you get into the episode, Christoph begins to explain his creative process and the importance of abstraction. Although his portfolio includes some intricately detailed work, he stresses that art rarely requires a lot of information. In fact, unneccessary detail often weakens the original idea. He demonstrates this with the 'Abstract-o-meter'.

Christoph has gone to some fairly extrodinary lengths to prove his theory, repeatedly breaking complex images into simple blocks of colour whilst somehow retaining their identity. His tribute to New York in I Lego NY and a tiled underpass in Berlin are 2 standout examples. But it was his next comment that sparked an idea of how abstraction might offer a more creative route into coding.

My journey into frontend development is similar to most, consisting of endless video tutorials, occasional quizzes and small projects. After a while this gets incredibly tedious, so what if there's a different way? Something that encourages imagination, places an emphasis on making and evidences learning? With the help of some unwitting MozFest attendees, I decided to test this theory.

I pitched a 1 hour workshop, something I'd never done before, and to my surprise was accepted. The idea was to substitute Christoph's example with characters from popular films, cartoons and TV series to see if they could be recognised without first seeing the original. If it worked, I would use the abstract images to teach 1 aspect of frontend development; a fundamental concept that has applications in the real world. The session would be called "Creative Coding with CSS Grid".

Thanks to a project by David Stoll, a quick Google search returned some perfect pixelated examples. To help translate David's creations into CSS and HTML, a series of worksheets would explain the basic syntax and provide step-by-step instructions on how to 'build' each character with a choice of offline or online tools. The session was advertised as beginner friendly, requiring little or no previous coding knowledge.

After changing rooms to accomodate the extra attendees, the same explanation was given and the theory again tested. With most people recognising the characters, we quickly moved onto a warm up exercise and finally the worksheets. Most opted to live code the examples, with experienced developers happily working alongside code newbies to solve each miniature puzzle.

Having whet their appetite, the final step was to demonstrate some real life examples of CSS Grid and show how creating an 8-bit Bart Simpson is no different than building a layout for the web. The feedback was overwhelmingly positive, and it was rewarding to see people leaving the session with a newfound enthusiasm for creative coding.

Want to try the worksheets for yourself? A teacher's pack can be found at tinyurl.com/mozfestgridworksheets. All materials are produced as open educational resources and licensed under CC BY-SA 4.0.

Have fun! 🎨