Launched this week
StyleWars.dev
CSS battles for pros, interactive learning for others.
5 followers
CSS battles for pros, interactive learning for others.
5 followers
StyleWars gives you a target image. You recreate it with HTML and CSS. A pixel-level comparison scores your accuracy. Shorter code earns bonus points. Play daily challenges, race another developer in real-time 1v1 mode, or work through 45 guided lessons.
InstantGeo
I built StyleWars because I kept watching junior developers (and honestly, myself) read CSS tutorials, nod along, and then blank when it was time to actually center a div under pressure.
The problem isn't knowledge. It's practice. There's no feedback loop. You read about `clip-path` or `conic-gradient`, close the tab, and forget the syntax by Thursday. I wanted something that forced you to write real CSS against a concrete visual target, scored objectively, with a timer ticking.
Here's how it works: you see a target image (a shape, a pattern, a layout). You write HTML and CSS to recreate it. The scoring engine captures your output at the pixel level and compares it to the target. Accuracy is worth up to 600 points. If you hit 99.5%+ match, code length kicks in: fewer characters earn a golf bonus up to 400 points. Max score is 1000.
The 1v1 mode is where it gets interesting. Two developers, same target, same timer, head-to-head over WebSockets. ELO ratings track who's actually good under pressure.
For people who aren't ready for battles yet, there's a 45-lesson learning path. Four tracks from basics (background-color, padding) through advanced CSS (container queries, :has(), color-mix()). Each lesson is a mini-challenge, not a wall of text.
I'd genuinely like to know: what CSS property or technique trips you up the most? That's what I want to build battles around next 🙂
❤️ - Azeem
Social Champ
InstantGeo
@alihamza91 Thanks for the support and kind words 🙌