CSSBattle: Making CSS Competitive...and Fun!

If you are a web developer, there is a good chance you've heard about CSSBattle and its fresh twist on code-golfing where the star attraction is CSS. Let's learn more about it here.

Hi everyone,

Every day, a bunch of frontend developers compete with each other (and themselves) in trying to re-create visual patterns using nothing but CSS:

This sounds simple, but the goal is to re-create these patterns by optimizing for two variables:

1. Lowest character count. What is the least amount of keystrokes needed to code this solution?

2. Accuracy. The final solution needs to be as pixel-perfect as the starting problem.

The best players are the ones who maximize both. Almost all of the top solutions push the boundaries of clever and cutting-edge CSS techniques such as the following that renders (obviously!) a bandaid:

<style>html{margin:125 100;background:conic-gradient(#a3a368,#a3a368)no-repeat;transform:rotate(-45deg)}*>*{margin:-75 75;background:linear-gradient(#f3ac3c 79q,#fbe18c 1q,132q,#f3ac3c 1q

Where does all of this action happen? On CSSBattle! CSSBattle is a site that was started as a side-project in 2019 but now has come to be a cultural hit among web developers with hundreds of people playing live at any given time.

To learn more about how CSSBattle started, I chatted with one of the co-founders, Kushagra Gour:

In this nearly-hour-long interview, we discussed a wide range of topics spanning both the technical and product/business side of what it takes to build, market, and iterate on something that people love.

Note: The video description contains the timestamped (⌚️) table of contents that allows you to jump to a particular topic directly!

Main Takeaway

There were a bunch of things I found really fascinating from talking with Kushagra, but the biggest point that resonated with me is this:

The first customers Kushagra and his co-founder (also named) Kushagra wanted to cater to was themselves. They kept iterating on the product until they first found the game to be fun. Once they were happy, they shared it with a few CSS influencers, who then shared it with their network, and so on. The rest, as they say, is history! 🚀

As developers and creators, we often spend so much time diving into the technical details of something. Hopefully, this post allowed you to take a step back for a moment and look at some of the equally important non-technical thinking that goes into building a successful product.

You can continue this conversation with both Kushagra and me at the following Tweet:

KIRUPA 🍊 @kirupa

As you probably know, @css_battle is fun, addictive, and educational! In this #interview, I chat with @chinchang457 about how the site got started, what it takes to build a successful side-project, what the future may hold, and more! 🥳 #webdev #css youtube.com/watch?v=aUNOxl…

youtube.comInterview with CSSBattle’s Kushagra GourKushagra Gour is the co-creator of CSSBattle. In this interview, let’s dive into how he got started, what made CSSBattle successful, how he thinks about the ...

See you all next time…unless you are busy trying to shave one more character from your final CSSBattle submission. In that case, I totally understand.

Cheers,

Kirupa 🥳