Taking Part in Code In The Dark1st May 2017 in CSS, HTML
A palpable hum of activity emanated from the crowd; music blazed from the speakers with a promenant thud…thud…thud; multi-coloured lasers danced gracefully above my head. I sat frozen – anxiously waiting for the klaxon to signal that my time had begun. This was it: Code in the Dark.
Code in the Dark is a coding competition where contestants have 15 minutes to create a copy of webpage using HTML and CSS. After the timer ends, the audience votes for which design looks most like the original.
What makes this process especially tricky is that you can’t see what you’ve built until the very end. This is like to trying to draw a picture without being able to look at the paper!
In each round, contestants are provided with a with a screenshot of a webpage (usually the homepage of a well-known brand) along with any relevant assets such as logos and images to drop in as needed.
During my round, I had to build an older version of the very.co.uk homepage. Luckily, this was probably the simplest of the bunch but it was still incredibly difficult. Trying to picture how everything fits together without seeing the results is hard enough, but doing it on a stage with your hands shaking, hundreds of people watching and a countdown timer ticking is something you really can’t prepare for.
I came second in my round, only missing out on the top spot by a few votes but I’m happy with how I did. My design looked pretty faithful to the original and I hadn’t made any real blunders.
Taking part in Code in the Dark was a fun experience but they need to look at the voting system which was biased towards groups who had brought a lot of colleagues with them for support. Also I think they could have chosen some simpler designs as it was sometimes difficult to decide who had done the best.
If you’re thinking of taking part yourself, here are my top tips to help you get a leg-up on your competitors.
- Practise: Spend some time before the competition getting used to building out a webpage in 15 minutes. Pick a few websites and set yourself a timed challenge each day to get used to working in such a pressured environment.
Plan: During the competition take a few minutes to plan out how you will approach the design (they’ll provide you with a pen and paper). Having a clear plan means you can make smarter decisions about how you organise your code and will save you time in the long run.
Focus on what’s important: Some of the designs are fiendish difficult and there’s no way to recreate them in the time given. The best approach is to focus on the areas which make the most visual impact and fill in the nitty-gritty details later if you have time.
Work methodically: Decide how you will build up the design. Will you start from top to bottom? Will you write all the HTML first and add the CSS in later? Also, establish a clear naming system from the start as you don’t want to waste time looking for how you named your classes.
Review: Set aside a few minutes at the end of the round to skim through your code and check for any obvious errors. Invalid file paths, misspelled class names and syntax errors and really common and not fixing them could have a huge impact on your final design.
Finally, good luck to anyone who takes part and if do you manage to get through to the final you’ll be glad that you’d studied up on CSS animation (hint, hint).