Karel-Jan's CSS Challenge

One target. Many ways in. Pick your weapon.

A growing set of exercises. Each exercise ships a single screenshot — target.png — and that's the whole brief. Your job: rebuild it. Pixel for pixel. No excuses.

Then do it again. And again. As many times as it takes. Different approach every round.

Flexbox brute force. Grid surgery. position: absolute cowboy mode. Container queries. A single <div> and pure shame. Whatever it takes — as long as no two solutions look the same under the hood.

Because "I know CSS" and "I can build this in many different ways" are not the same sentence. This repo is where that gap closes.

exercises/
  exercise-N/
    target.png        ← the brief. that's it.
    README.md         ← optional notes
    solution-1/       ← attempt 1
    solution-2/       ← attempt 2
    …                 ← add as many as you like

Each solution is its own standalone page. No shared helpers, no cheating across folders.

1. Match the target. If it doesn't look right, it isn't right.
2. Every solution must take a different approach. Renaming classes doesn't count.
3. JS is allowed — but only as TypeScript. No plain .js.
4. Every solution folder has a README.md — describe the approach, the pros, the cons. That's where the thinking lives.

Vite · TypeScript · Tailwind CSS v4. Lightweight on purpose — the challenge is the CSS, not the toolchain.

yarn install
yarn dev

Open the URL, pick an exercise, pick a solution. Compare. Judge. Rebuild.

1. Exercise 1 — brief
2. Exercise 2 — brief
3. Exercise 3 — brief
4. Exercise 4 — brief
5. Exercise 5 — brief

Ready? Pick exercise 1.