Practice CSS Like an Artist

As a kid I became interested in oil painting. My dad is a professional artist and I wanted to be like him. One day I asked if he would teach me. The invaluable lesson he gave me shaped how I learned to code and how I became good at CSS.

Our house was like one big art gallery — paintings, pottery & sculptures everywhere. Dad walked me over to the nearest Arlo Coles painting on the wall, and said "paint this":

"Okay...how?" I asked. "You'll figure it out." he replied. When pressed for more help, he said "Start with broad strokes, get the overall composition right. Don't worry about all the details."

I did my best to copy this awesome painting. The result wasn't very good, but I learned a lot. He had me try again and again. Here's one attempt that I actually kept:

Great artists steal

Trying to recreate great work is one of the most effective ways to improve any skill— not just art. I used this same exercise to learn web development. I'd find a website that I thought looked slick, and I'd try to recreate it myself.

Sometimes I'd have to cheat and peek under the hood with the devtools. I'd see things in the code that made zero sense, and I'd have to go study them. I learned so much doing this. It was way more effective than any of my University assignments. If you're at all like me, you learn best by doing.

Obviously it's not cool to rip off someone else's work and pass it off as your own, so only use this as a learning exercise.

To this day I still use this exercise to continue refining my skills. I'm often inspired by the UIs in video games. The designs and interactions are exciting. Recreating them really stretches your coding skills. Plus it means you have to play games... for research ;)

Here you can watch me build the Zelda UI and the Overwatch UI.

Broad strokes first

From a lifetime of teaching students, my dad knew to help me avoid the biggest pitfall: getting caught up in the details too soon. His broad strokes first advice was incredibly helpful. But he didn't come up with the idea. Great artists have been using this principle for centuries.

A classic example can be seen in Eugène Delacroix's famous Study of Lions.

With a few bold, sweeping strokes he defines the composition of each piece. He probably had to work fast as he preferred to draw the lions while they fed. Delacroix was masterful at capturing the overall essence, leaving the fine details for later.

So how do we apply this broad strokes principle to practicing CSS?

Layout

CSS has a ton of properties, but you could group them into just two categories: broad strokes or fine details.

The primary broad stroke tools are Grid, Flexbox, and Position. All the rest are fine details: hover interactions, animations, padding, borders, clip-path etc.

To use broad strokes, you build the site outside-in. You focus first on the overall composition. CSS Grid is especially good for this, as it lets you define an entire responsive layout in a single stroke.

In the book Keys to Drawing, Bert Dodson clarifies the broad strokes principle. He's talking about pencil strokes but might as well be talking about divs:

Rule #1. Draw the large shapes first, then the smaller shapes... it's easier to work from the general to the specific than the other way around. Start with the largest shape you see. Forget everything else and draw that shape... Now you have something you can build on, restate, compare with surrounding shapes, subdivide into smaller shapes, etc.

Dodson also teaches a nifty little trick: you squint and look at your subject. By squinting you can no longer see a lot of the small details, but just the big broad shapes. Try it next time you go to build a layout!

I encourage every dev to master these broad strokes tools of layout. I've made this as easy and fun as possible with my Flexbox Zombies and Grid Critters mastery games. Once you have those broad stroke tools down, practice CSS by recreating the awesome work you admire. You'll become amazing at CSS before you know it!