Code Challenge #2: The Test of Characters
I’ve been a big fan Kushagra Gour since the early days of Webmaker – his CodePen-like code playground running as a Chrome Extension. I use it most days.
More recently he teamed up Kushagra Agarwal to work on a new project ‘CSSBattle.dev‘ – a cool and original blend of CSS coding and golf. Be warned – if you know even a little CSS this can be very addictive.
Code Challenge #2: The Test of Characters
So, for our second Code Challenge, we’re partnering with CSSBattle to push your CSS skills. Your challenge is to write HTML and CSS in the ‘Editor’ panel that perfectly reproduces the SitePoint Logo graphic in the righthand ‘Target’ panel. Your result renders live in the central ‘Output’ panel. There’s a handy sliding panel on the Output that lets you compare your live rendering with the target image.
Finally, when you think you have a good match with the target, hit the ‘Submit’ button to get your score.
Open this CSSBattle in a new window
Open this CSSBattle in a new window
Tips for CSSBattlers:
- Images and SVG are not allowed.
- Pixel perfect matches score much more than merely close matches
- Once you have a 100% match, it’s all about reducing your character count. What can you cut?
- CSSBattles aren’t about pretty code. You’d probably be amazed at what you can cut out of CSS before it breaks.
So, is this code you’d use in normal production? No, probably not, but that’s not the point. I’ve been using CSS for 20 years, yet I’ve learned a bunch of new things via CSSBattles from just trying crazy stuff I’d never usually have any reason to try.
Prizes
There are cash prizes awarded to the top 3 ranked competitors for this round ($50, $30, and $20) which concludes in about 3 weeks – but I have to say, the competition at the top is pretty tough. There has to be some Harry Potter incantations shrinking some of these top solutions! However, we’ve also put up 20 Premium Memberships for the top 20 finishers.
Also, keep in mind, if you’re not quite up to battling for a top 3 spot, you can create your own mini-league of friends and colleagues to compete with bragging rights.