Skip to main content

CSS Challenges

A Scrimba practice pack with Treasure Porth: about 2.6 hours of challenges where you recreate components and layouts from apps you already use, and find out how well you actually know CSS.

Quick answer​

CSS Challenges is a Pro-tier, intermediate practice course: roughly 2.6 hours across 54 challenge-style lessons, led by Treasure Porth. The format is recreate-this-component (think GitHub-style UI and similar real layouts) rather than learn-this-concept. It is a test and a workout, not a from-scratch teaching course, and it doubles as solid front-end interview prep.

Is it worth your time?​

If you already know CSS and want to know how good you really are, this is one of the most useful things you can do with a couple of hours. Reading about flexbox is one thing; being handed a target UI and having to reproduce it pixel by pixel is what exposes the gaps. Because the prompts mimic components from apps people actually use, the practice transfers directly to real work and to the kind of take-home tasks interviewers set.

The honest caveat is that this is not where you learn CSS. There is little explanation up front; it assumes you bring the knowledge and tests whether you can apply it. If you are still learning the rules, the challenges will frustrate more than they teach. Build the foundation first, then come here to harden it.

What you'll learn​

You do not so much learn new concepts as prove and sharpen the ones you have. Each challenge sets a target component or layout, often modelled on a recognisable app interface, and you build it. Across the pack you exercise flexbox, grid, positioning, pseudo-elements, and the small details (spacing, alignment, states) that separate an approximate clone from a convincing one. The payoff is fluency: you stop looking up the same properties and start reaching for them.

It is also realistic interview preparation. The recreate-this-UI format is close to what many front-end take-home and live exercises ask for.

Who it's for, and who should skip it​

It fits developers who already know CSS and want practice that mirrors real work: anyone polishing for interviews, or anyone who has done the tutorials and wants to test retention.

Skip it if you are still learning CSS. Start with Learn HTML and CSS or Learn Responsive Web Design, and return once the fundamentals are in place.

Prerequisites​

Solid working CSS: the box model, flexbox, grid, and positioning. The course assumes all of this and gives you problems rather than lessons.

Where it fits​

This is a reinforcement course on the Frontend Developer Path and the Fullstack Developer Path, best taken after the teaching courses. With its career-relevant, interview-style framing, it is a natural step before job hunting.

Free or Pro​

This is a Pro course, so it needs a Scrimba subscription. Pro also covers the career paths, certificates, and Discord. See current plans for what Pro costs in your region.

Strengths and limits​

What it does well: it is genuine practice, not passive content, and the real-app framing makes it directly useful for both work and interviews. It surfaces exactly where your CSS is shaky.

Where it is limited: it teaches little on its own. Without a CSS foundation already in place, the challenges are more discouraging than instructive.

View CSS Challenges on Scrimba (opens in a new tab)

Related Guides

Next step

All Courses

Docs
Last updated on