Subscribe
Sign in
CSSBattle
p/cssbattlePlay against others in golf with your CSS skills
Start new thread
kushagra gour

CSSBattle - Play against others in golf with your CSS skills

by•

CSSBattle is an online CSS Code Golfing battleground. Here, players from all around the world try to visually replicate "Targets" in smallest possible CSS code and battle it out to get to the top of the leaderboard.
Are You Game?

Add a comment

Replies

Best
Zach R
I'm confused. Can you not see the code that the leaders submitted? Or am I missing it somewhere in the UX?
kushagra gour
Maker
@bluetidepro Nope. That would take away the battle premise. But we are looking into ways to get some knowledge sharing in there. Ideas welcome.
Zach R
@chinchang457 I think the battle premise is slightly flawed currently anyways with the weird hacks you can do to cut down on characters. It's more about figuring out weird stuff you can actually submit and still have it work than using minimal VALID css/html.
Christiana Bilyanova
@bluetidepro I was looking for the same thing! Because I scored 94.5% and I wanted to know how to improve.
Patrick Johnson
@chinchang457 @bluetidepro hacking is part of good front end development. Knowing how you can break the rules is a sign of mastery, not failure.
kushagra gour
Maker
@pmjtweets well said 👏🏼
Zach R

Overall, really cool. Def worth expanding this further! I wish I could see the code of the leaderboards though, to see how they got such low scores.

Pros:

- Really fun challenges - Love the concept of leaderboards - Easy signup

Cons:

- To get low characters, can do "hacks" that you'd never want to do like not having an ending "/style" tag, or abusing shorthand/whitespace

kushagra gour
Maker
Hello World! We bring to you the first ever code-golfing battleground for CSS lovers! We won't say much, head over to https://cssbattle.dev, try to replicate any target with the smallest possible HTML/CSS and climb the leaderboards! See you on the battleground :)
Rachit Gulati
This is crazily addictive. I loved it 🥰. It's super awesome for folks who wants to check their CSS skills 😇🌈🌈
kushagra gour
Maker
@squiroid Thanks Rachit!
Thomas Groutars
Very sad that my 53 character solution doesn't work, despite it being pixel perfect 😅 body{background:url('/targets/1.png')}
Thomas Groutars
@chinchang457 Jokes aside, it would be nice if the counter didn't include whitespaces, but I guess that was a design choice :)
Max Böck
this is surprisingly fun and shows how resilient the languages are. great idea!
kushagra gour
Maker
@mxbck True! Thats the premise for golfing :)
Bevan Kay
This is great! Would love to be able to see the method used by the top 10.
kushagra gour
Maker
@bevankay Thanks! I'll leave that call to the top 10 :)
Matt Pate
Dope. Seriously makes you consider that extra Div.
Kushagra Agarwal
Maker
@matthew_pate Thank you! Sometimes that extra div can save you a few characters :)
Freddie Llow
siiick
Kushagra Agarwal
Maker
@freddiellow Thanks Freddie!
mimta

It would have great, if others submission can be public and ranking of my own submission.

Pros:

Fun way to skilled up css

Cons:

nothing

Aakash Gill
Interviewer: Let's see how creative you can think in making a UI using CSSBattle 😄
kushagra gour
Maker
@__aakash__ :D Good use case!
Maurice Svay
I wish it could save my best submission for each challenge
Kushagra Agarwal
Maker
@akdm_ @mauriz We'll work on improving the visibility of those buttons! thanks for playing :)
Vincent Tang
I think you should have ongoing contests within site. Once a contest is finished, make all solutions publically available for that contest Would be really cool to see all the code golf css implementations
Abhinav Kulshreshtha
You should have mentioned that the site doesn't work on firefox. I Tried with addons disabled, and asked a friend to try it too. But it only works on chrome based browser.
Abhinav Kulshreshtha
Other than that, The battle was fun and entertaining. I just wished it would have worked on firefox too...
kushagra gour
Maker
@abhinav1217 Sorry about that, we should have mentioned! Just to mention, it will soon we usable on all modern browsers :)
Andreas Grafen

* Don't get me wrong… it's super awesome to see what can be done with CSS and browser behavior. To get the best score possible one needs to ignore quality tho. :D

Pros:

Quite a few really great and entertaining challenges. • Solving a challenge feels awesome; finding a 'better' solution feels even better.

Cons:

There is no way back once you got hooked. • Reducing the character count can get incredibly hacky. *

kushagra gour
Maker
Thanks for the lovely review Andreas! :)
Alex Walker

Also, it would be nice to have a bare minimum for markup validation. Perhaps mark validating HTML entries that render fine with a green tick so competitors know the baseline. I'd think 150 characters validating beats 150 characters not validating, yeah

Pros:

I love this idea as it encourages you to test ideas and approaches you might not ever consider in day to day frontend development.

Cons:

Can you save along the way? I wasn't ready to submit, but my browser died and I lost what I'd done.

Vikrant Negi
Dope. Nice and smooth interface, I bet you used web maker's logic in this game. (y)
kushagra gour
Maker
@vikrant_negi Haha! Thanks! Not much from Web Maker here :P
Pipaluk Rosing
Good job!
kushagra gour
Maker
@hissionere19 Thank you :)
Jordan Garvey
This is super fun, amazing work 👏👏👏
Kushagra Agarwal
Maker
@jordan_garvey Thanks Jordan!
evans code
Good battle css ;)