Learn CSS
Master CSS from the ground up through hands-on challenges. Write real code, see instant results, level up.
Sign in to start learning and track your progress
Your XP, streaks, and lesson completions are saved to your account.
Foundations
Colors, units, the box model, and typography — the building blocks of every stylesheet.
0/10 lessons
Background Color
Set the background color of an element.
Text Color and Size
Change the color and size of text.
Padding
Add space inside an element.
Margin
Add space outside an element.
Borders
Add borders to elements.
Width and Height
Control the dimensions of an element.
Box Shadow
Add shadows to elements.
Opacity and Overflow
Control transparency and content overflow.
Gradients
Create smooth color transitions.
Pseudo-classes
Style elements based on their state.
Layout
Display, positioning, Flexbox, and Grid — control where everything goes.
0/9 lessons
Display Property
Block, inline, inline-block, and none.
Position: Relative and Absolute
Position elements relative to their parent.
Flexbox: Centering
Center content perfectly with Flexbox.
Flexbox: Row Layout
Arrange items in a horizontal row with spacing.
Flexbox: Wrapping
Let flex items wrap to the next line.
CSS Grid: Basic Grid
Create a grid layout with rows and columns.
CSS Grid: Spanning Cells
Make grid items span multiple columns or rows.
Grid: Place Items
Center grid items with a single property.
Sticky Positioning
Make an element stick while scrolling.
Visual Effects
Transforms, transitions, gradients, and filters — make things move and look stunning.
0/8 lessons
Transform: Rotate and Scale
Rotate and scale elements.
Transitions
Animate property changes smoothly.
Radial Gradients
Create circular gradient effects.
Clip Path
Clip elements into shapes.
Pseudo-elements
Create extra layers with ::before and ::after.
Multiple Backgrounds
Layer multiple backgrounds on one element.
CSS Filters
Apply visual filters like blur and brightness.
Conic Gradients
Create pie charts and color wheels.
Advanced
Animations, responsive design, custom properties, and modern CSS — the skills that set you apart.
0/8 lessons
Custom Properties (CSS Variables)
Define and use reusable values.
Keyframe Animations
Create multi-step animations.
Aspect Ratio
Maintain proportions without padding hacks.
The :has() Selector
Style parents based on their children.
CSS Nesting
Nest selectors like Sass, natively.
Container Queries
Style based on parent size, not viewport.
Scroll Snap
Create smooth snap-to-item scrolling.
color-mix()
Blend colors dynamically in CSS.
Ready for Real Battles?
Once you've completed the tracks, test your skills against real CSS challenges.