CSS Katas

In one of the books I read recently I came across Dave Thomas‘ excellent idea of “Code Katas“. These are in essence nothing more than a way to train your programming skills. Small excercises with no real consequence, allowing you to focus on the programming instead of the result.

This idea really stuck with me, even though I don’t do them enough to my taste. I’ve honed my TDD skills with the first 20 Project Euler problems, and sometimes answering a Stack Overflow question may qualify. However, I don’t quite “excercise regularly”.

Regardless of whether it will get me excercising again, I thought it’d be fun to come up with a set of kata myself. So here’s a basic challenge for you (= me?): recreate these titles on movie posters in CSS3. Just the texts of course.

Before we get to the five posters, let’s first lay down the ground rules:

  • CSS3 so modern browsers (IE10+, latest Chrome, FF, Safari). Great if it works in one of em, bonus points if it looks alike across browsers.
  • Fonts is a tricky bit. Google Fonts is okay I guess, but bonus points for sticking with Arial, Verdana, Georgia, Times New roman, etc.
  • Images are out of the question of course.

In addition, or even to extend on these bullets: there are no real “hard and fast” rules. It’s not a competition (even though I personally love treating it as such), it’s an excercise.


1. Malcolm X

The biopic of the controversial and influential Black Nationalist leader.

Malcolm X movie poster

Here’s the suggested markup to style:

2. Citizen Kane

Following the death of a publishing tycoon, news reporters scramble to discover the meaning of his final utterance.

Citizen Kane movie poster

Here’s the suggested markup to style:

3. Face/Off

Famous actors shoot at eachother.” Or something. Fun title for this excercise though!

Face Off movie poster

Here’s the suggested markup to style:

4. Fight Club

“An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more…”

Fight Club movie poster

Here’s the suggested markup to style:

5. The Two Towers

Second movie in the Lord of the Rings trilogy.

The Lord of the Rings: The Two Towers

Here’s the suggested markup to style:

However, I can imagine different “correct” kinds of markup for that data, feel free to tweak accordingly.