If you've finished a CSS tutorial and you're wondering "now what?" — the answer is practice. Reading about Flexbox or clip-path won't make them stick. You need to write CSS, get it wrong, and try again. That's where practice websites come in.

This is a roundup of the best places to practice CSS online in 2026. We've grouped them by what they're best at — competitive challenges, code katas, games, and structured exercises — so you can pick what fits how you like to learn.

Skip ahead — start practicing now CSS Battle has 250+ free targets you can solve in your browser. No signup needed.

Play now →

1. CSS Battle #

• Best for: Code-golfing, daily CSS challenges, competitive practice
• Price: Free (with optional Pro)
• Website: cssbattle.dev

You're already here, so we'll keep it short: CSS Battle gives you a visual target image, and your job is to recreate it using the shortest CSS possible. There's a global leaderboard, daily targets, real-time 1v1 versus mode, and 250+ challenges spanning every CSS feature you've heard of (and a few you haven't).

It's the most fun way to get fluent at CSS layout, positioning, gradients, clip-path, pseudo-elements and the like — because every byte you save feels like a small win.

2. Frontend Mentor #

• Best for: Realistic UI projects, portfolio building
• Price: Free with Pro tier
• Website: frontendmentor.io

If CSS Battle is the gym for CSS muscles, Frontend Mentor is the construction site. You're given Figma designs of real-world components and pages — pricing cards, dashboards, landing pages — and asked to build them. Great for moving from "I know CSS" to "I can ship a UI."

3. Flexbox Froggy #

• Best for: Learning Flexbox from scratch
• Price: Free
• Website: flexboxfroggy.com

A 24-level browser game where you guide frogs to lily pads using justify-content, align-items, flex-direction and friends. If Flexbox still feels like dark magic, half an hour with Froggy will fix it.

4. Grid Garden #

• Best for: Learning CSS Grid
• Price: Free
• Website: cssgridgarden.com

Same authors as Flexbox Froggy, same idea — but for CSS Grid. You water carrots and starve weeds by writing grid rules. The single best free intro to Grid we know of.

5. CSS Diner #

• Best for: Learning CSS selectors
• Price: Free
• Website: flukeout.github.io

32 levels covering every CSS selector worth knowing — descendant, child, attribute, :nth-child, :not(), the works. Selectors are the kind of thing you think you know until you have to write tr:nth-child(odd) > td:first-of-type from memory. Diner fixes that.

6. CSSBattle's Learn #

• Best for: Structured, gamified CSS courses
• Price: Paid (with free demo)
• Website: cssbattle.dev/learn

Our own gamified course track. Unlike video courses where you passively watch, every chapter is an interactive level you complete by writing real CSS, with quizzes between concepts. Tracks for Beginner, Intermediate and Flexbox. Around 70% completion rate, which is unheard of for online courses.

7. Codewars #

• Best for: Programming katas (mostly logic, some CSS/HTML)
• Price: Free
• Website: codewars.com

Codewars is best known for algorithm katas, but it has a CSS/HTML track too. If you like the kata format — small focused problems, ranked by difficulty, with community solutions to compare against — it's worth a look. Less CSS-specific than the others on this list, but the kata muscle transfers.

8. 100 Days of CSS #

• Best for: Daily creative CSS practice
• Price: Free
• Website: 100dayscss.com

100 small visual challenges — one for each day. The vibe is more creative-coding than competitive: you'll build CSS-only loaders, illustrations, cards and animations. Great for building a daily practice habit.

9. CodePen Challenges #

• Best for: Themed weekly creative prompts
• Price: Free
• Website: codepen.io/challenges

CodePen runs themed weekly challenges with a different prompt each week (e.g., "build a CSS-only weather widget"). You ship a Pen, see what others built, and pick up techniques from the gallery. Less structured than a course, more inspirational.

10. Frontloops #

• Best for: Subscription-based CSS challenges by email
• Price: Paid
• Website: frontloops.io

You pay once and get a steady stream of small frontend coding challenges (mostly CSS layout and components) delivered to your inbox. Good if you want practice pushed to you instead of having to seek it out.

How to choose #

Don't try to use all ten. Pick one based on where you are:

• Brand new to CSS? Start with Flexbox Froggy + CSS Diner, then move to CSSBattle's Learn for structure.
• Comfortable with the basics, want to get faster? CSS Battle — code-golfing forces you to internalize CSS deeply.
• Want to build real things? Frontend Mentor.
• Need a daily habit? 100 Days of CSS or CSS Battle's daily target.

The best practice site is the one you'll actually open tomorrow. Pick one, bookmark it, and start. CSS isn't learned by reading — it's learned by typing.

---

Looking for a place to start right now? Try CSS Battle's first target — it takes about 2 minutes and tells you a lot about what you do and don't know.