Practice makes front-end: challenge sites worth your time
Reading about front-end development only gets you so far. The real gains come from sitting down and building things, even if nobody pays you for them. Whether you're reproducing a design you admire or solving a prompt someone else wrote, the act of writing the code is what sharpens your skills.
A growing batch of sites exists to feed that habit. Some are free, some charge, and some are really job-assessment platforms in disguise. All of them throw concrete problems at you to solve, which is more than most tutorials do.
Get handed a design and build it
A fairly recent entry is the catch-all challenge hubs that hand you a design brief to turn into a working page. Not everything is free; most sites in this space offer a paid tier alongside the free challenges.
The classic self-directed move here is to find an interface you like on Dribbble and recreate it in code. In the same vein, @keyframers frequently builds community-suggested shots in live streams. Tim Evko's Practice site used to serve you a random Dribbble shot, random GitHub issue, or random coding challenge, though the Dribbble portion is currently broken.
Structured challenge libraries
Skill tests with a hiring angle
HackerRank frames its exercises as skill assessments used by companies for recruitment, but the challenges themselves teach you plenty. Similar platforms with a hiring bent include Codewars, ChallengeRocket, Codesignal, and Topcoder. On some of these sites, you are the customer paying for interview preparation; on others, hiring companies are the customers and you are being evaluated as the product.
Coderbyte falls into the first category for its job-interview-oriented challenges, but it also offers free versions of some exercises for pure practice.
Daily and weekly prompts
CodePen hosts weekly challenges with a theme, your choice of what you interpret. It pushes out a new one each week and browsing prior prompts is easy.
Daily UI emails you a new design challenge each day after you sign up, all free. Many participants code their submissions in CodePen using that tag.
Cassidy Williams' weekly newsletter includes a coding challenge in every issue, alongside links and commentary.
Old favorites
The Front-End Challenges Club from Andy Bell ran for a while, but you can still check the archive to work through past entries even though it appears dormant.
CSS-specific sandboxes
A hundred days of tiny exercises
Matthias Martin's 100 Days of CSS presents a new mini-challenge for each day, all gathered one per page. Repository of ideas and a place to see how others approached them. Nothing exists to prevent cheating other than your own pride.
Reproduce design as small as possible
CSSBattle lets you practice mimicking a specific design while trying to use the fewest bytes of CSS. For those who find golfing attractive, code-golf.io applies the same principle to full programs.
General purpose code and UI picks
Pure vanilla focus
Ace Front End revolves entirely around vanilla HTML, CSS, and JavaScript. Note that their exercises don't tend to be completely polished examples: the very first challenge, drop-down navigation, fails to account for the aria-expanded attribute. That demo acts as a good reminder that no task, even one designed as tutorial material, should compete with accessibility in your own coding work.
Codier is a free, community-driven repository of public challenges with a distinct focus on users submitting their solutions for others to read and improve
Frontloops takes a broader paid approach for task-and-solution packages: $19 gets you each exercise, plus guidance and a display solution per challenge
Just go build
Think about setting yourself a concrete objective before your next session.
Carry's advice is to start with a real-world object—the interface of a gaming console or a calculator, for example—and to try to recreate it using only CSS. "A great way to push the boundaries with a language is to make something that the language wasn't meant to be doing in the first place," he says.
