Skip to content
Day 69: new resources are added every day. See what's new
Best Productivity ResourcesBy Shushant LakhyaniVerified creator

Web App

CSSBattle

Practise CSS by recreating target images in as little code as possible.

Visit CSSBattle4.6

  • Rating

    4.6 / 5

  • Pricing

    Free

  • Difficulty

    Intermediate

  • Works on

    Web

Built with love by Shushant Lakhyani. Building bestproductivityresources.com

Free: 1,100+ ways people make money onlineFree: 399+ ways to make money online

What is CSSBattle?

CSSBattle is a free game where you recreate a target image using HTML and CSS, scoring higher for accuracy and shorter code. A new daily target, themed battles and live versus modes make it a fun way to sharpen layout, positioning and shape skills.

Pros: what CSSBattle does well

  • Fun daily challenges
  • Improves CSS fundamentals
  • Free to play

Cons: where it falls short

  • Code golf habits differ from real projects
  • Hard targets can be frustrating

Who CSSBattle is for

Developers who want to practise CSS in short, playful sessions.

Who can skip it

People who need structured lessons rather than puzzles.

CSSBattle alternatives

Not sold on CSSBattle? These do a similar job, and each card says what it has in common.

All Learning resources

Flexbox Froggy

Focus: flexbox and beginners. Shares css and coding game with CSSBattle. Rated 4.8 (CSSBattle: 4.6).

Web AppFreeWeb
4.8Visit

Codewars

Focus: coding and programming. Shares challenges and practice with CSSBattle. Freemium (CSSBattle: Free). Same 4.6 rating.

Web AppFree planWeb
4.6Visit

Advent of Code

Focus: coding puzzles and programming. Shares practice and challenges with CSSBattle. A website, not a web app. Rated 4.8 (CSSBattle: 4.6).

WebsiteFreeWeb
4.8Visit

Grid Garden

Focus: grid, game and web design. Shares css with CSSBattle. Rated 4.7 (CSSBattle: 4.6).

Web AppFreeWeb
4.7Visit

JSFiddle

Focus: code playground, javascript and prototyping. Shares css with CSSBattle. Freemium (CSSBattle: Free). Rated 4.4 (CSSBattle: 4.6).

Web AppFree planWeb
4.4Visit

Free alternatives to CSSBattle

Want to spend nothing? These free picks cover similar ground.

MDN Web Docs

Focus: web development, documentation and javascript. Shares css with CSSBattle. A website, not a web app. Rated 4.8 (CSSBattle: 4.6).

WebsiteFreeWeb
4.8Visit

web.dev

Focus: web development, performance and accessibility. Shares css with CSSBattle. A website, not a web app. Rated 4.7 (CSSBattle: 4.6).

WebsiteFreeWeb
4.7Visit

Codrops

Focus: web design, tutorials and animation. Shares css with CSSBattle. A blog, not a web app. Same 4.6 rating.

BlogFreeWeb
4.6Visit

Edabit

Focus: coding practice, python and javascript. Shares challenges with CSSBattle. A website, not a web app. Rated 4.5 (CSSBattle: 4.6).

WebsiteFreeWeb
4.5Visit

CSS Buttons

Focus: buttons, ui and tailwind. Shares css with CSSBattle. A website, not a web app. Rated 4.3 (CSSBattle: 4.6).

WebsiteFreeWeb
4.3Visit
Are you the maker of CSSBattle?Get a free Featured badge for your site, a share image and ready-to-paste posts. No sign-up.

Free Notion database

1,100+ ways people are making money online

Real online businesses, creators and projects, broken down by how they make money: apps, online stores, AI tools and more. Free on Gumroad.

Get the free database

Free Notion database

399+ ways to make money online

Hundreds of online income methods in one place, so you can compare options and pick one to try. Free on Gumroad.

Get the free list

For research and ideas only. Results vary and nothing here is a promise of income. See our Disclaimer.

Weekly newsletter

Everything new, every Monday.

One short email every Monday with everything shipped that week: new free tools and websites, new guides, new free browser tools and what's new in my free Gumroad libraries, plus how the site is growing. Free, and you can unsubscribe anytime.

Join the newsletter

You sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.