0110 min
Selectors & cascade
Understand what wins and why
MINI BUILDStyle a card class, then add a featured variant that changes only its background and border.
Checking saved progress…
🎨 VISUAL SYSTEMS STUDIO
CSS, taught through useful outcomes.
Learn CSS as a layout and design system, not a bag of random properties to memorize.
15 guided lessons≈ 177 guided minutesLearn → Try → Test → Build✓ Full journey + boss live
GUIDED ROADMAP
One concept at a time. One useful build each time.
Lessons unlock in order so the next step stays obvious. Completed lessons remain available for review, and the boss project unlocks only after the full journey.
YOUR GUIDED JOURNEYRestoring saved progress…
0211 min
Cascade & specificity
Predict which competing rule wins
MINI BUILDCreate a base card rule and a featured variant whose intended override is obvious without `!important`.
Checking saved progress…
0310 min
Box model
Control size and spacing
MINI BUILDCreate a card with 20px internal padding, a 1px border and deliberate spacing from neighbouring cards.
Checking saved progress…
0411 min
Units
Choose fixed and relative sizing deliberately
MINI BUILDCreate a centered page shell with a max width and a fluid heading bounded by clamp().
Checking saved progress…
0511 min
Typography & colour
Create readable hierarchy
MINI BUILDCreate a lesson heading, supporting paragraph and metadata line with clear visual hierarchy and readable contrast.
Checking saved progress…
0611 min
Colour & contrast
Use colour without sacrificing readability
MINI BUILDStyle success and error messages using readable contrast plus labels or icons so colour is not the only signal.
Checking saved progress…
0712 min
Flexbox
Arrange items in one dimension
MINI BUILDCreate a navigation row with brand, links and an action aligned to the opposite edge.
Checking saved progress…
0813 min
Grid
Build two-dimensional layouts
MINI BUILDCreate a three-column card grid and then plan how it should become two columns and one column at narrower widths.
Checking saved progress…
0914 min
Responsive design
Adapt instead of shrink
MINI BUILDDesign one card grid that is 3 columns on laptop, 2 on tablet and 1 on phone without horizontal page overflow.
Checking saved progress…
1012 min
Positioning
Control normal flow, anchors and overlays
MINI BUILDPlace a small badge in a card corner while the card content itself remains in normal flow.
Checking saved progress…
1111 min
States & interaction
Style hover, focus and disabled states
MINI BUILDStyle a button with clear hover, focus-visible and disabled states while keeping the label readable.
Checking saved progress…
1212 min
Form controls
Make inputs readable, touchable and stateful
MINI BUILDStyle a labelled text input, help text, focus-visible state and error message for phone and laptop use.
Checking saved progress…
1312 min
Transitions & reduced motion
Use motion as feedback, not decoration debt
MINI BUILDAdd a subtle button/card transition and a reduced-motion rule that keeps the interaction understandable without movement.
Checking saved progress…
1413 min
Design tokens
Make visual decisions reusable
MINI BUILDDefine colour, spacing and radius tokens and use them to style two different components consistently.
Checking saved progress…
1514 min
Accessibility-oriented CSS
Make visual systems resilient to real users
MINI BUILDAudit one card or form for focus visibility, contrast, target size, text scaling and narrow-screen reflow, then fix the weakest point.
Checking saved progress…
FINAL BOSS
Checking your lesson progress…Responsive Dashboard Boss
Prove that your CSS adapts intentionally across laptop, tablet and phone.
JOURNEY + BOSS LIVE
CSS has a complete guided arc.
The journey includes 15 sequenced lessons, local mastery and a final project that checks whether the major ideas were combined.
Begin CSS →