All courses
100% freebeginner
CSS: Responsive Interface Foundations
Build resilient interfaces through selectors, the cascade, layout systems, responsive components, typography, and accessible visual states.
16 lessons About 16 hours Editable examples
Start course Learn CSSRead · Edit · Practice
COURSE CONTENTS
Build with understanding, not memorization.
YOUR CSS PATH
0 of 16 lessons completed
0% complete · Saved on this device
Next lesson
CSS Introduction Continue learningEach of the 16 workshops adds deeper concepts, an explained example, a broken-code repair, an independent lab, and reasoning questions with answers. Time estimates include reading and hands-on practice; learn at your own pace.
01
CSS Foundations
CSS IntroductionUnderstand the role of CSS and connect a stylesheet to a meaningful HTML document.Workshop: Style a workshop invitation · 2 explained quiz questions
43 min Selectors and RelationshipsTarget elements with type, class, attribute, and relationship selectors without making rules fragile.Workshop: Style a navigation tree without leaking rules · 2 explained quiz questions
47 min Cascade, Specificity, and InheritancePredict which declaration wins instead of fighting the cascade with increasingly strong selectors.Workshop: Predict a winning declaration · 2 explained quiz questions
58 min Values, Units, and ColorChoose flexible units, useful custom properties, and accessible color values.Workshop: Create a fluid spacing and color system · 2 explained quiz questions
49 min 02
Layout Systems
The Box Model and SizingReason about content, padding, borders, margins, and predictable element sizing.Workshop: Diagnose an overflowing card · 2 explained quiz questions
49 min Normal Flow, Display, and PositioningUse normal document flow first, then choose display and positioning intentionally.Workshop: Anchor a badge without breaking the page · 2 explained quiz questions
56 min FlexboxBuild one-dimensional layouts with deliberate wrapping, alignment, and flexible sizing.Workshop: Build a wrapping action bar · 2 explained quiz questions
60 min CSS GridCreate two-dimensional layouts with explicit tracks, auto placement, and resilient minimums.Workshop: Create a resilient course catalog · 2 explained quiz questions
69 min 03
Applied CSS Systems
Backgrounds, Borders, and Visual LayersCompose resilient surfaces with layered backgrounds, images, borders, radii, and contrast-aware decoration.Workshop: Build a resilient layered hero · 2 explained quiz questions
60 min Interactive States and Pseudo-elementsStyle links and controls across hover, focus, active, checked, disabled, and generated decorative parts.Workshop: Design a complete control state system · 2 explained quiz questions
64 min Overflow, Stacking Contexts, and LayeringDiagnose clipping, scroll containers, containing blocks, and z-index interactions without arbitrary numbers.Workshop: Debug clipping and z-index systematically · 2 explained quiz questions
68 min Transforms, Transitions, and AnimationAdd purposeful motion with interpolable properties, stable layout, reduced-motion alternatives, and explicit state changes.Workshop: Use motion to explain a state change · 2 explained quiz questions
68 min CSS Architecture, Components, and MaintenanceOrganize tokens, layers, components, states, and utilities into a stylesheet that teams can safely evolve.Workshop: Refactor a stylesheet into an explicit system · 2 explained quiz questions
76 min 04
Responsive and Responsible CSS
Responsive Design and Container QueriesDesign components for available space, content pressure, zoom, and user preferences.Workshop: Make a component respond to its own space · 2 explained quiz questions
67 min Typography and RhythmCreate readable type scales, line lengths, spacing, and resilient text behavior.Workshop: Build a readable article · 2 explained quiz questions
49 min Motion, Focus, and AccessibilityStyle visible focus, reduced-motion alternatives, robust states, and accessible contrast.Workshop: Finish an inclusive CSS mini-project · 2 explained quiz questions
63 min 
COURSE COMPANION
Take CSS beyond the lesson.
Design resilient interfaces with a practical command of the cascade, layout systems, responsive behavior, and visual accessibility.