CSS

Beginner

The language of presentation. Turn plain HTML into beautiful, modern interfaces with layout, color, typography and animation.

Requires:HTML

0 / 45 lessons

Lessons

45

Complete to finish this stage

Est. time

21.8h

At a comfortable pace

Difficulty

Beginner

For complete beginners

Why CSS Matters

CSS — Cascading Style Sheets — controls how HTML is presented: colors, fonts, spacing, responsive layout, and animations.

3-Level Progressive Learning Path

🟢 Level 1 — Beginner CSS: Fundamentals, Selectors, Colors, Units, Typography, Box Model, Display, Positioning, Borders, Shadows, Functions, Responsive Basics, Practice
🟡 Level 2 — Intermediate CSS: Flexbox, CSS Grid, Advanced Responsive, Pseudo-classes, Pseudo-elements, Transitions, Transforms, Animations, Forms, Media, Modern CSS, BEM Architecture, Intermediate Projects
🔴 Level 3 — Advanced CSS: Subgrid, Advanced Selectors, Cascade Layers, CSS Variables & @property, Container Queries, Scroll Animations, Visual Effects, 3D Transforms, Typography, Accessibility, Performance, DevTools, Preprocessors, Tailwind CSS, Production Capstones

Stage progress0%

CSS lessons

45 lessons · follow them in order for best results.

CSS Fundamentals, Syntax & The Cascade EngineMaster core CSS foundations: Syntax rules, selectors, properties, values, comments, inline vs internal vs external stylesheets, the Cascade algorithm, Specificity calculations, Inheritance, and !important.Beginner 30 min Level 1 — Beginner CSS Selectors, Combinators & Pseudo-ElementsMaster CSS selectors: Universal, element, class, ID, attribute selectors, combinators (descendant, child, adjacent sibling, general sibling), pseudo-classes, and pseudo-elements.Beginner 25 min Level 1 — Beginner CSS Colors, Alpha Channels & Length UnitsMaster CSS color models (HEX, RGB, HSL, alpha opacity) and length units: Absolute (px), Relative (em, rem, ch), Viewport (vw, vh, vmin, vmax), and Grid fractions (fr).Beginner 25 min Level 1 — Beginner Typography, Font Stacks & Web Font OptimizationMaster CSS typography: font-family stacks, font-size scales, line-height, letter-spacing, text alignment and transforms, loading Google Fonts, and @font-face performance.Beginner 25 min Level 1 — Beginner The CSS Box Model, Sizing & Margin CollapsingMaster the CSS Box Model: Content, Padding, Border, Margin, box-sizing: border-box, min/max dimensions, auto margin centering, and margin collapsing mechanics.Beginner 25 min Level 1 — Beginner The CSS Display Property & Formatting ContextsMaster the CSS display property: block, inline, inline-block, none, flex, grid, table, contents, and the critical differences between display: none and visibility: hidden.Beginner 25 min Level 1 — Beginner CSS Backgrounds, Gradients & Multi-Layer StylingMaster CSS backgrounds: background-color, background-image, background-size (cover, contain), background-position, gradients (linear, radial, conic), and multiple background layering.Beginner 25 min Level 1 — Beginner CSS Borders, Rounded Outlines & Border-Radius GeometryMaster CSS borders and geometric rounding: Border styles, individual edge borders, border-radius geometry (circles, pills, asymmetric corners), and outline vs border.Beginner 25 min Level 1 — Beginner CSS Positioning Schemes, Inset Offsets & Stacking ContextsMaster CSS positioning: static, relative, absolute, fixed, sticky, coordinate offsets (top, right, bottom, left, inset), z-index, and Stacking Context creation.Beginner 30 min Level 1 — Beginner CSS Flexbox Architecture & 1D AlignmentMaster CSS Flexbox: Flex container, flex items, main vs cross axis, justify-content, align-items, flex-wrap, gap, flex-grow, flex-shrink, flex-basis, flex shorthand, align-self, and order.Beginner 30 min Level 1 — Beginner CSS Grid Layout & 2D Grid GeometryMaster CSS Grid: Grid containers, grid-template-columns/rows, fraction unit (fr), repeat(), minmax(), auto-fit vs auto-fill, grid lines, and responsive grids with zero media queries.Beginner 30 min Level 1 — Beginner Responsive Web Design, Media Queries & Mobile-First CSSMaster responsive web design: The Mobile-First philosophy, media queries (@media min-width), standard breakpoint architectures, fluid typography with clamp(), and flexible images.Beginner 25 min Level 1 — Beginner CSS Visual Effects, Shadows, Filters & OverflowMaster CSS visual effects: Box-shadow elevation layers, text-shadow, CSS filters (blur, drop-shadow), overflow clipping, custom cursor states, and image aspect-ratio scaling with object-fit.Beginner 25 min Level 1 — Beginner CSS Transitions, Timing Curves & Smooth Micro-InteractionsMaster CSS transitions: Transition properties, durations, delays, timing functions (ease, cubic-bezier), shorthand syntax, and 60 FPS GPU-accelerated micro-interactions.Beginner 25 min Level 1 — Beginner Beginner Projects: Modern Responsive Component BlueprintsBuild complete beginner-level CSS components: Profile Card with avatar badge, Tiered SaaS Pricing Section, Sticky Glassmorphism Navbar, and Responsive Grid Image Gallery.Beginner 35 min Level 1 — Beginner Advanced Selectors, :has() & Functional Pseudo-ClassesMaster advanced CSS selectors: :has() the parent selector, :is() vs :where(), :not(), structural :nth-child(An+B) formulas, :focus-within, and state-driven styling.Intermediate 30 min Level 2 — Intermediate The Cascade Algorithm, Specificity & Cascade Layers (@layer)Master the CSS Cascade engine: Cascade origins, specificity calculations, source order, modern Cascade Layers (@layer), scoped styles with @scope, and eliminating specificity wars.Intermediate 30 min Level 2 — Intermediate CSS Custom Properties (Variables), Theming & Design TokensMaster CSS Custom Properties (CSS Variables): var() function, fallback hierarchies, dynamic scoping, multi-theme architecture (Dark Mode), and JavaScript runtime integration.Intermediate 30 min Level 2 — Intermediate Advanced Flexbox Sizing & The min-width: 0 Overflow FixMaster advanced Flexbox mechanics: The Flex sizing algorithm, solving the min-width: auto overflow bug, auto-margin alignment tricks, nested flex architectures, and complex responsive toolbars.Intermediate 30 min Level 2 — Intermediate Advanced CSS Grid, Subgrid & Template AreasMaster advanced CSS Grid architectures: grid-template-areas ascii maps, named lines, explicit vs implicit tracks, CSS Subgrid alignment, and complex dashboard shells.Intermediate 30 min Level 2 — Intermediate Responsive Architecture, Container Queries & Fluid MathMaster component-driven responsive architecture: Container Queries (@container), container query units (cqi, cqw), fluid typography math with clamp(), and eliminating viewport-bound breakpoints.Intermediate 30 min Level 2 — Intermediate CSS Keyframe Animations, Timing & Sequenced MotionMaster CSS Keyframe Animations: @keyframes rules, animation-fill-mode (forwards), infinite looping, alternate directions, multi-step sequencing, and GPU-optimized motion.Intermediate 30 min Level 2 — Intermediate CSS 2D/3D Transforms, Perspective & 3D Flip CardsMaster CSS Transforms in 2D and 3D space: translate3d, rotate3d, perspective, transform-style: preserve-3d, backface-visibility, transform-origin, and building interactive 3D flip cards.Intermediate 30 min Level 2 — Intermediate Modern CSS Features, Logical Properties & Dynamic Viewport UnitsMaster modern CSS capabilities: Native CSS nesting, aspect-ratio, logical properties (margin-inline, padding-block), modern mobile viewport units (dvh, svh, lvh), and color-mix().Intermediate 25 min Level 2 — Intermediate Multi-Column Layouts, CSS Masonry & Complex PositioningMaster specialized CSS layout architectures: Multi-column newspaper text flow (columns, break-inside), CSS Masonry grid patterns, sticky sidebar viewports, and split-screen layouts.Intermediate 25 min Level 2 — Intermediate Form Styling, Custom Controls & Accessible UI StatesMaster enterprise form styling in CSS: Custom accessible checkboxes and radio buttons with appearance: none, file upload buttons (::file-selector-button), :user-invalid validation states, and floating label animations.Intermediate 30 min Level 2 — Intermediate CSS Architecture Methodologies, BEM & Modular SystemsMaster CSS architecture at scale: BEM (Block Element Modifier), OOCSS, SMACSS, Utility-First principles, CSS Modules (.module.css), Scoped CSS, and organizing large stylesheets.Intermediate 30 min Level 2 — Intermediate CSS Preprocessors: Modern Sass, SCSS & The Module SystemMaster CSS preprocessing with Dart Sass: SCSS syntax, variables, mixins, functions, partials, and the modern @use and @forward module system versus native CSS.Intermediate 25 min Level 2 — Intermediate CSS Tooling Ecosystem: PostCSS, Stylelint & FrameworksMaster the CSS tooling and framework ecosystem: PostCSS pipelines, Autoprefixer, Stylelint linting quality gates, Tailwind CSS JIT compilation, and PurgeCSS tree-shaking.Intermediate 25 min Level 2 — Intermediate Intermediate Projects: Production SaaS Dashboards & ThemingBuild complete intermediate-level CSS applications: Responsive Analytics SaaS Dashboard with Subgrid, Floating Multi-Theme System, and Interactive Pricing Switcher.Intermediate 35 min Level 2 — Intermediate CSS Rendering Internals, CSSOM & GPU CompositingMaster low-level CSS engine architecture: CSSOM construction, style recalculation, layout reflow trees, paint rasterization tiles, and GPU compositor layer promotion.Advanced 30 min Level 3 — Advanced CSS Performance, content-visibility & Layout ContainmentMaster advanced CSS performance engineering: content-visibility: auto rendering skips, contain property layout boundaries, eliminating Layout Thrashing, and Chrome DevTools flamechart profiling.Advanced 30 min Level 3 — Advanced Advanced Cascade Control, @scope & Inheritance KeywordsMaster enterprise-level Cascade architecture: revert, revert-layer, unset, initial, deep @layer cascade orchestration, donut-hole scoping with @scope, and Shadow DOM CSS piercing.Advanced 30 min Level 3 — Advanced Advanced Layout Algorithms, Intrinsic Sizing & Writing ModesMaster advanced layout algorithms: Intrinsic sizing (min-content, max-content, fit-content), Flex vs Grid formatting engines, CSS Writing Modes (vertical-rl, horizontal-tb), and international layouts.Advanced 30 min Level 3 — Advanced Container-First Responsive Systems & Device-Independent DesignMaster advanced responsive engineering: Container-first architecture, fluid mathematical spacing scales, dynamic viewport units, adaptive component orchestration, and device-independent UI systems.Advanced 30 min Level 3 — Advanced Advanced Animations, Scroll-Driven Timelines & View TransitionsMaster enterprise CSS animation engineering: Native Scroll-Driven Animations (animation-timeline, view-timeline), the View Transitions API, Web Animations API (WAAPI), and 120 FPS compositor pipelines.Advanced 35 min Level 3 — Advanced Advanced Visual Effects: Blend Modes, Masks & clip-pathMaster advanced CSS graphical styling: Complex clip-path geometry, mask-image alpha cutouts, mix-blend-mode composites, backdrop-filter glassmorphism, and CSS shape-outside wrapping.Advanced 30 min Level 3 — Advanced Modern CSS Color Spaces, OKLCH & Wide-Gamut Display-P3Master modern CSS color science: OKLCH and OKLab perceptually uniform color spaces, Relative Color Syntax (from keyword), color-mix(), Wide-Gamut Display-P3 screens, and accessible contrast palettes.Advanced 30 min Level 3 — Advanced Enterprise Design Systems, Token Architecture & Multi-ThemingMaster enterprise design system engineering: 3-tier Design Token architecture (Primitive, Semantic, Component), modular typography and spacing scales, multi-brand theming, and dark mode systems.Advanced 35 min Level 3 — Advanced CSS Accessibility Engineering, WCAG Compliance & Focus StatesMaster CSS accessibility (a11y) engineering: WCAG 2.2 color contrast formulas, high-visibility :focus-visible indicators, prefers-reduced-motion motion damping, forced-colors, and 400% zoom testing.Advanced 30 min Level 3 — Advanced CSS Security, CSS Injection Attacks & CSP style-srcMaster CSS security vulnerabilities: CSS Injection data exfiltration attacks, Content Security Policy (CSP style-src) nonces, Trusted Types for CSS, and securing third-party stylesheets.Advanced 30 min Level 3 — Advanced Enterprise CSS Architecture, Governance & MigrationsMaster enterprise CSS architecture at scale: Token governance, breaking-change management, the Strangler Fig migration pattern for legacy CSS, Style Dictionary pipelines, and cross-team standards.Advanced 30 min Level 3 — Advanced Visual Regression Testing, Storybook & Playwright SnapshotsMaster CSS testing and quality assurance: Automated Visual Regression Testing with Playwright screenshot comparisons, Storybook component test harnesses, and CI/CD screenshot diffs.Advanced 30 min Level 3 — Advanced Browser Compatibility, Feature Detection (@supports) & BaselineMaster enterprise browser compatibility: CSS Feature Queries (@supports), Web Platform Baseline standards, Progressive Enhancement strategies, and cross-browser testing.Advanced 30 min Level 3 — Advanced Advanced Projects: Enterprise Design System & Utility EngineBuild enterprise-grade CSS systems: Complete 3-Tier Token Design System Engine, Container Query Component Library, and GPU-Accelerated Motion Framework.Advanced 40 min Level 3 — Advanced