I was lucky enough to attend an International Assembly workshop last week. For those not in the know, International Assembly (formerly known as the Graphic Design Festival Scotland), has run every year since 2014, bringing together a truly impressive international roster of creative professionals to lead seminars and workshops.
In the spirit of 'professional development' my employer signed me up for Inspect Element, a virtual 'interactive poster' (i.e. coding) workshop with German web wunderkinds Liebermann Kiepe Reddemann. Spread across three afternoon Zoom sessions, the workshop promised participants of all experience levels an introduction to coding and the outcome of their own interactive poster created using HTML and CSS. And maybe a bit of Java script.
Newbies were encouraged to brush up/learn some basic HTML and CSS before attending. Given that my HTML was seriously rusty and I knew precisely no CSS, I took some of the recommended courses at Code Academy. Apparently HTML has video tags now!
Session 1 was mainly introductions and taking a look at just what was possible. David, Max and Jana led us through a dizzying array of example websites, nearly all of which prompted 'malicious website' warnings from my work laptop. I couldn't help but note that, visually, a lot of what's currently considered cutting-edge trendy in web design (by coders, at least) is stuff we were scoffing at by 2010 – marquee text, neon colours, overcrowded elements, drop shadows, so much fucking Times New Roman!
However by the end of the session I'd found myself taken by Shuffle, an interactive poster created by Studio Feixen. The comforting order of the blocks soothed my print designer's soul, so I resolved to use my very basic coding skills to create a variation on the theme.
There were a couple of days between Session 1 and Session 2, during which I brushed up on my CSS a little more. By the time Session 2 rolled around, I'd managed to lay out and position my blocks just as I wanted them, with colours inspired by the default text colours from Codepen (with which I was growing increasingly obsessed). All I needed was help from Jana on how to create CSS transitions to move blocks around to reveal other blocks underneath. Oh, and also a little Javascript help to create a mouse hover 'spotlight' over the bottom left panel.
Session 3 was mainly adding the final touches to our creations, followed by a showcase of everyone's work at the end. While at times the learning was very self-driven, it was invaluable having seasoned code experts on hand to look at your code, make suggestions and provide resources and crucially compliment your work.
On a personal level, I'm stunned that something I've been putting off for so long (learning a bit of CSS) has gone from 0 to 60 in the space of a week! My own interactive poster, while perhaps basic, turned out exactly as I was hoping. If you'd told me this time last week that I'd know enough CSS to code this, I wouldn't have believed you.
Click below to enjoy my newbie coding efforts!
