I recently stumbled across Code in the Dark and thought it looked like a pretty neat challenge. The basic idea is that you have a set amount of time to recreate an image using only HTML and CSS. The catch? You aren’t allowed to preview your code at all. No looking at what the CSS looks like until you’re totally done.

I wanted to get in on the fun, so I found an image that looked okay, set the timer, and gave it a go! Before I show you how it went, I’m going to quickly go over the rules I played by:

  1. HTML & CSS only, no JS and no preprocessors
  2. Use JSFiddle and any of the built-in features such as emmet
  3. Not allowed to click the “run” button (preview code) until you’re finished
  4. 15 minute timer (I used timer-tab.com because I could see it without switching tabs)
  5. Using a color picker such as colorpicker.com is not allowed, but you are allowed to use a color picker which grabbes hex values directly from the image (I used the “ColorPick Eyedropper” chrome extension)
  6. Any hardware you have (like a fancy keyboard or an extra monitor) is allowed

Here’s the image I was trying to re-create: Target image (It’s a modified version of this Dribbble shot.)

And here’s how it turned out. I finished with 2 minutes, 28 seconds left on the clock.

Your turn!

Think you can do better than I can? Try it for yourself! See how accurately you can recreate the picture without previews. Be warned, though: It’s a pretty stressful experience.

Leave a link below to your JSFiddle result. Can you get closer than I did?