Abstract: The Art of CSS Grid
Tags: beginners, codenewbie, css, webdev
Published: 2019-03-11 22:28:08

_This article is based on a presentation given at MozFest 2018. The full slide deck can be found at [tinyurl.com/mozfestslides](http://tinyurl.com/mozfestgridslides)._

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_](https://www.netflix.com/gb/title/80057883).

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](https://www.newyorker.com/culture/culture-desk/cover-story-2016-05-16) to [National Geographic expeditions](https://www.nationalgeographic.com/travel/destinations/europe/norway/christoph-niemann-artist-trip-svalbard-norway/). 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 Nieman's Abstract-o-meter](https://thepracticaldev.s3.amazonaws.com/i/a2htf6o3rkb95lh1mimv.png)
<figcaption>The concept of love illustrated via Christoph Niemann's 'Abstract-o-meter'.</figcaption>

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](https://www.theguardian.com/books/gallery/2010/apr/24/christoph-niemann-i-lego-new-york) and a [tiled underpass in Berlin](https://www.itsnicethat.com/articles/christoph-niemann-wannsee-train-station-art-141118) 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.

![“Each idea requires a very specific amount of information. Sometimes it’s a lot. A lot of details, a lot of realism. Sometimes it’s just one line or the one pixel.” - Christoph Niemann](https://thepracticaldev.s3.amazonaws.com/i/yb1q2xeubv4c71l5z3rp.png)

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". 

![](https://thepracticaldev.s3.amazonaws.com/i/pxmpdjkt5vjmyf4fc3qj.png)<figcaption>The 3 stages of Bart Simpson according to Christoph Niemann's ‘Abstract-o-meter’.</figcaption>

Thanks to [a project by David Stoll](http://www.stoll.space/design#/4x4/), 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.

![An 8-bit Bart Simpson built using CSS Grid](https://thepracticaldev.s3.amazonaws.com/i/1gxahi64e51cyk3ibirj.png)

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.    

{% twitter 1056527808145616896 %}

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. 

{% twitter 1056513631184150528 %}
          
Want to try the worksheets for yourself? A teacher's pack can be found at [tinyurl.com/mozfestgridworksheets](http://tinyurl.com/mozfestgridworksheets). All materials are produced as open educational resources and licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/). 

Have fun! 🎨