CSS PRACTICE
Build stronger CSS instincts.
Work through focused CSS exercises from approachable foundations to more demanding problem-solving patterns.
6CSS exercises
Includedsolution reviews
Freelearning access
CSS EXERCISES
Every level includes clear requirements and a solution-file reference tab.Choose your level
beginner
2 exercisesBeginner · build the foundation
Start with one core idea at a time and make the basic moves feel automatic.
0102
CSSbeginner
Build a keyboard-friendly button
Style a primary button with clear hover, active, disabled, and keyboard focus states without relying on color alone.
CSSbeginner
Style a readable profile card
Turn the provided profile markup into a readable card with predictable spacing, a visible keyboard focus state, and a layout that stays usable at narrow widths.
intermediate
2 exercisesIntermediate · connect the pieces
Combine concepts, validate inputs, and make practical design decisions.
0102
CSSintermediate
Build a responsive pricing grid
Create a card grid that moves from one column on small screens to as many balanced columns as will fit, without hard-coding a device breakpoint.
CSSintermediate
Create a fluid reading layout
Make an article layout whose type scales gently with the viewport while line length remains readable on wide displays.
advanced
2 exercisesAdvanced · handle real-world constraints
Work with edge cases, maintainability, and the tradeoffs found in production code.
0102
CSSadvanced
Design a theme token system
Define semantic color tokens for a card and support a dark theme without repeating component declarations.
CSSadvanced
Respect reduced-motion preferences
Add an entrance transition for a notification panel, then make the experience calm and usable for visitors who request reduced motion.
NEED THE CONCEPTS FIRST?
Open CSS course Review the CSS course.
Return to the free lessons, editable examples, and quick checks whenever an exercise exposes a gap.