CSS course
Understand the idea. Try the code. Take one small step forward.
01—03 · Style rules
Trace selectors, the cascade and box dimensions.
04—07 · Typography & layout
Combine typography, Flexbox, Grid and positioning.
08 · Responsive acceptance
Verify narrow screens, zoom and long content.
09—14 · Components & debugging
Study states, theme tokens, motion, scrolling and container queries.
Study the mechanism, run the example, then attempt the challenge before opening the solution. Every chapter includes verification and common boundaries.
01 · Selectors, states and stylesheet structure
Choose selectors deliberately, distinguish descendants, direct children and states, and organize reusable styles.
02 · Cascade, inheritance and specificity
Diagnose conflicting declarations methodically instead of adding !important, and explain inherited text color.
03 · Box sizing, dimensions and overflow
Calculate rendered width, distinguish padding, border and margin, and diagnose overflow caused by fixed dimensions.
04 · Typography, units, color and readability
Choose units by purpose and establish readable typography, spacing and color relationships.
05 · Flexbox, sizing and automatic minimums
Work with main and cross axes, explain flex sizing values, and handle long content that prevents shrinking.
06 · Grid tracks and two-dimensional layout
Build two-dimensional layouts with tracks, explain fr and minmax, and choose between Grid and Flexbox for a reason.
07 · Positioning, scrolling and stacking contexts
Choose positioning modes appropriately and explain why a larger z-index may still remain behind another element.
08 · Responsive design and content-driven testing
Choose breakpoints from content needs, distinguish layout, touch and text adaptation, and create repeatable checks.
09 · Pseudo-classes and pseudo-elements
Style hover, keyboard focus, disabled and error states consistently while separating decoration from content.
10 · Custom properties, themes and fallbacks
Organize repeated values into scoped tokens and build local themes without duplicating every rule.
11 · Transitions, animation and reduced motion
Use restrained motion for feedback and provide equivalent reduced-motion behavior.
12 · Overflow and sticky scroll containers
Identify sticky and overflow causes instead of hiding clipped content.
13 · Container queries for reusable components
Adapt one component to narrow sidebars and wide content regions independently of viewport width.
14 · Layout debugging from symptom to minimal fix
Debug sizing, layout and cascade systematically and verify fixes with counterexamples.