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.
Enjoy!
1. Malcolm X
“The biopic of the controversial and influential Black Nationalist leader.“
Here’s the suggested markup to style:
1 |
Malcolm X |
2. Citizen Kane
Here’s the suggested markup to style:
1 |
Citizen Kane |
3. Face/Off
“Famous actors shoot at eachother.” Or something. Fun title for this excercise though!
Here’s the suggested markup to style:
1 |
Face/Off |
4. Fight Club
Here’s the suggested markup to style:
1 |
Fight Club |
5. The Two Towers
Second movie in the Lord of the Rings trilogy.
Here’s the suggested markup to style:
1 2 3 4 |
The Lord of the RingsThe Two Towers |
However, I can imagine different “correct” kinds of markup for that data, feel free to tweak accordingly.