Skip to main content
Mapagam

21 SECTIONS · 408 TOPICS

CSS Roadmap

  1. CSS Selectors and Syntax

    1. 1. CSS Syntax Fundamentals and Structure
    2. Example: Complete CSS rule structure
    3. 2. Basic Selectors (element, class, id, universal)
    4. Example: Basic selector usage
    5. 3. Advanced Selector Patterns and Combinators
    6. Example: Combinator usage patterns
    7. 4. Attribute Selectors and Values
    8. Example: Attribute selector patterns
    9. 5. Pseudo-classes and Pseudo-elements (:hover, :focus, ::before, ::after)
    10. Common Pseudo-classes
    11. Structural Pseudo-classes
    12. Example: Pseudo-classes and pseudo-elements
    13. 6. Specificity Rules and Cascade Resolution
    14. Example: Specificity calculation and cascade order
    15. Cascade Order (Priority from highest to lowest)
    16. 7. CSS4 Selector Features (:is, :where, :has)
    17. Example: :is() selector simplification
    18. Example: :where() for zero specificity
    19. Example: :has() parent/relational selector
    20. Example: :not() negation selector
    21. Browser Support
    22. Use Cases

  2. CSS Values, Units, and Data Types

    1. 1. CSS Length Units (px, em, rem, vw, vh)
    2. Example: Length unit comparisons
    3. 2. CSS Color Values (hex, rgb, rgba, hsl, hwb, lab, lch)
    4. Example: Color format usage
    5. 3. CSS Custom Properties (CSS Variables) and calc() Function
    6. Example: CSS Custom Properties (Variables)
    7. Example: calc() function usage
    8. 4. CSS Functions (min, max, clamp, round, mod, rem)
    9. Example: min(), max(), clamp() for responsive design
    10. Example: New math functions (round, mod, rem)
    11. 5. Container Query Units (cqw, cqh, cqi, cqb)
    12. Example: Container query units setup
    13. 6. CSS4 Math Functions and Trigonometry
    14. Example: Trigonometric functions for circular layouts
    15. Example: Power and logarithmic functions
    16. 7. CSS Typed OM and Houdini Properties
    17. Example: @property registration for animations
    18. Example: Complex @property definitions
    19. Value & Unit Best Practices

  3. CSS Box Model and Layout

    1. 1. Content, Padding, Border, Margin Model
    2. Example: Box model layers
    3. 2. Box-sizing Property (border-box vs content-box)
    4. Example: box-sizing comparison
    5. 3. Intrinsic and Extrinsic Sizing (width, height)
    6. Example: Intrinsic sizing keywords
    7. Example: Practical intrinsic sizing patterns
    8. 4. Aspect-ratio Property and Constraints
    9. Example: aspect-ratio usage
    10. Example: Replacing padding-top hack
    11. 5. Object-fit and Object-position for Media
    12. Example: object-fit values comparison
    13. Example: object-position for focal points
    14. 6. Overflow Controls (overflow: visible, hidden, scroll, auto)
    15. Example: Overflow behaviors
    16. Example: Text overflow ellipsis
    17. Example: Scroll containers and behavior
    18. Box Model Best Practices

  4. CSS Flexbox Layout

    1. 1. Flex Container Properties (display: flex)
    2. Example: Basic flex container setup
    3. 2. Flex Item Properties (flex-grow, flex-shrink, flex-basis)
    4. Example: Flex item properties
    5. 3. Flex Direction and Wrap (flex-direction, flex-wrap)
    6. flex-direction Values
    7. flex-wrap Values
    8. Example: Direction and wrapping
    9. 4. Flexbox Alignment (justify-content, align-items)
    10. justify-content (Main Axis)
    11. align-items (Cross Axis)
    12. align-content (Multi-line)
    13. Example: Alignment patterns
    14. 5. Flex Basis, Grow, and Shrink Calculations
    15. Example: flex-basis vs width
    16. Example: flex-grow calculation
    17. Example: flex-shrink calculation
    18. 6. Common Flexbox Patterns and Use Cases
    19. Example: Navigation bar
    20. Example: Card layout with equal heights
    21. Example: Holy Grail layout (header, 3 columns, footer)
    22. Example: Media object pattern
    23. Example: Sticky footer (pushes footer to bottom)
    24. Example: Responsive grid alternative
    25. Example: Centering techniques
    26. Flexbox Best Practices

  5. CSS Grid Layout

    1. 1. Grid Container Properties (display: grid)
    2. Example: Basic grid setup
    3. Example: Track sizing functions
    4. 2. Grid Item Placement and Spanning (grid-column, grid-row)
    5. Example: Item placement with line numbers
    6. Example: Spanning and negative indices
    7. 3. Grid Template Areas (grid-template-areas) and Named Lines
    8. Example: Grid template areas
    9. Example: Named grid lines
    10. 4. Implicit Grid Behavior and Auto-placement
    11. Example: Auto-placement behavior
    12. Example: Implicit vs explicit tracks
    13. 5. Subgrid Implementation and Use Cases
    14. Example: Subgrid basics
    15. Example: Subgrid for consistent alignment
    16. 6. CSS Grid vs Flexbox - When to Use Which
    17. Example: When to combine both
    18. Grid Best Practices

  6. CSS Positioning and Layering

    1. 1. CSS Position Property (static, relative, absolute, fixed, sticky)
    2. Example: Position values comparison
    3. Example: Practical positioning patterns
    4. 2. Z-index and Stacking Context
    5. Example: Stacking context basics
    6. Example: Debugging stacking issues
    7. 3. Sticky Positioning (position: sticky) Patterns
    8. Example: Sticky header with shadow on scroll
    9. Example: Sticky table headers and columns
    10. Example: Basic anchor positioning
    11. Example: Position fallback for viewport boundaries
    12. 5. Scroll-driven Positioning Techniques
    13. Example: Scroll-driven animations
    14. Example: Scroll snap positioning
    15. Example: Position fixed with scroll context
    16. Positioning Best Practices

  7. CSS Typography and Text Styling

    1. 1. CSS Font Properties (font-family, font-size, font-weight)
    2. Example: Font family and @font-face
    3. Example: Font properties usage
    4. 2. Font Display Strategies (font-display) and Performance
    5. Example: Font display strategies
    6. Example: Optimize font loading
    7. 3. Variable Fonts and Font Variations
    8. Example: Variable font usage
    9. Example: Advanced variable font techniques
    10. 4. Text Layout and Spacing (line-height, letter-spacing)
    11. Example: Text spacing and layout
    12. Example: White-space control
    13. 5. Advanced Typography (text-wrap, text-spacing)
    14. Example: Text-wrap balance and pretty
    15. Example: Advanced text control
    16. 6. International Typography Support
    17. Example: Writing modes and text orientation
    18. Example: RTL and bidirectional text
    19. Example: Language-specific typography
    20. Typography Best Practices

  8. CSS Colors, Backgrounds, and Visual Effects

    1. 1. Modern Color Spaces and Wide Gamut (P3, Rec2020)
    2. Example: Modern color syntax
    3. Example: Color space comparison
    4. 2. CSS Color Functions (rgb, hsl, color-mix)
    5. Example: color-mix() function
    6. Example: Relative colors and color manipulation
    7. Example: light-dark() and currentColor
    8. 3. CSS Background Properties and Multiple Backgrounds
    9. Example: Multiple backgrounds
    10. Example: Background clipping and effects
    11. 4. CSS Gradients (linear-gradient, radial-gradient, conic-gradient)
    12. Example: Linear gradients
    13. Example: Radial and conic gradients
    14. Example: Repeating gradients and patterns
    15. 5. CSS Filters and Backdrop Filters (filter, backdrop-filter)
    16. Example: CSS filters
    17. Example: Backdrop filters (frosted glass effect)
    18. 6. CSS Blend Modes (mix-blend-mode) and Compositing
    19. Example: mix-blend-mode (element with background)
    20. Example: background-blend-mode (multiple backgrounds)
    21. Example: Isolation and stacking context
    22. Colors & Backgrounds Best Practices

  9. CSS Borders, Shadows, and Shapes

    1. 1. CSS Border Properties (border, border-radius) and Border Images
    2. Example: Border basics and styles
    3. Example: Border images and gradients
    4. 2. Border Radius (border-radius) and Complex Shapes
    5. Example: Border-radius variations
    6. Example: Complex organic shapes
    7. 3. CSS Box Shadow (box-shadow) and Drop Shadow (filter)
    8. Example: Box shadow variations
    9. Example: Advanced shadow effects
    10. 4. CSS Shapes (shape-outside) and Clip-path
    11. Example: Basic clip-path shapes
    12. Example: Advanced clip-path and text wrapping
    13. 5. CSS Masking (mask) and Advanced Clipping
    14. Example: Image and gradient masks
    15. Example: Advanced masking techniques
    16. Example: Practical masking use cases
    17. Borders & Shapes Best Practices

  10. CSS Transforms and 3D Effects

    1. 1. CSS 2D Transform Functions (translate, rotate, scale, skew)
    2. Example: 2D transform basics
    3. Example: Combining transforms
    4. 2. CSS 3D Transform Properties (rotateX, rotateY, rotateZ)
    5. Example: 3D transforms
    6. Example: 3D effects and interactions
    7. 3. Transform Origin and Perspective (transform-origin, perspective)
    8. Example: Transform-origin variations
    9. Example: Perspective effects
    10. 4. CSS 3D Positioning and Camera
    11. Example: 3D scene setup
    12. Example: Advanced 3D layouts
    13. Example: Interactive 3D camera
    14. 5. Hardware Acceleration (transform: translateZ) Optimization
    15. Example: Hardware acceleration techniques
    16. Example: Performance best practices
    17. Transform & 3D Best Practices

  11. CSS Animations and Transitions

    1. 1. CSS Transition Properties (transition, transition-duration)
    2. Example: Basic transitions
    3. Example: Advanced transition patterns
    4. 2. CSS Animation (@keyframes) and Animation Syntax
    5. Example: Basic keyframe animations
    6. Example: Advanced animation patterns
    7. 3. Animation Timing Functions (ease, ease-in, ease-out)
    8. Example: Custom easing functions
    9. Example: Easing comparison and best practices
    10. 4. Scroll-triggered Animations
    11. Example: Scroll-driven animations (modern CSS)
    12. Example: Scroll animations with Intersection Observer (fallback)
    13. 5. View Transition API Integration
    14. Example: View Transition API basics
    15. Example: Advanced View Transition patterns
    16. 6. Performance-optimized Animations (will-change)
    17. Example: Performance-optimized animations
    18. Example: Performance best practices
    19. Animation & Transition Best Practices

  12. CSS Responsive Design and Media Queries

    1. 1. Media Query Syntax (@media) and Features
    2. Example: Basic media query patterns
    3. Example: User interaction and device queries
    4. 2. Responsive Units (vw, vh, rem, em) and Viewport
    5. Example: Viewport units for responsive layouts
    6. Example: Small/Large/Dynamic viewport units (mobile)
    7. 3. Container Queries Implementation
    8. Example: Container queries for component-based responsive design
    9. Example: Container query units for intrinsic responsive design
    10. 4. Responsive Typography (clamp, min, max)
    11. Example: Fluid typography with clamp()
    12. Example: Responsive layout with min/max/clamp
    13. Example: Advanced fluid typography calculation
    14. 5. Responsive Images and Picture Element
    15. Example: Responsive images with srcset and sizes
    16. Example: Picture element for art direction
    17. Example: CSS for responsive images
    18. 6. Mobile-first vs Desktop-first Strategies
    19. Example: Mobile-first approach (recommended)
    20. Example: Desktop-first approach
    21. Example: Hybrid approach with container queries
    22. Example: Common responsive breakpoints
    23. Responsive Design Best Practices

  13. CSS Logical Properties and Writing Modes

    1. 1. Logical vs Physical Properties (margin-inline vs margin-left)
    2. Example: Physical vs logical properties comparison
    3. Example: Migration from physical to logical
    4. 2. Block and Inline Directions (block-start, inline-end)
    5. Example: Understanding block and inline axes
    6. Example: Flexbox and Grid with logical properties
    7. 3. Writing Modes (writing-mode) and Text Direction (direction)
    8. Example: Writing modes for different scripts
    9. Example: Practical writing mode layouts
    10. 4. International Layout Support
    11. Example: Multi-language support with logical properties
    12. Example: Language-specific styling
    13. Example: Complete RTL/LTR adaptive layout
    14. 5. Logical Sizing and Spacing Properties
    15. Example: Logical sizing for responsive components
    16. Example: Logical shorthand properties
    17. Example: Complete layout with logical properties
    18. Logical Properties Best Practices

  14. CSS Custom Properties (Variables) and Theming

    1. 1. CSS Variable Declaration (--custom-property) and Usage (var())
    2. Example: Basic CSS variable declaration and usage
    3. Example: Component-scoped variables
    4. 2. Dynamic Theming Patterns with CSS Variables
    5. Example: Multi-theme system with data attributes
    6. Example: Dynamic color palette generation
    7. Example: Context-based theming
    8. 3. CSS Variable Scope and Inheritance
    9. Example: Variable scope and inheritance
    10. Example: Inheritance patterns and overrides
    11. Example: JavaScript manipulation of variables
    12. 4. CSS Color Schemes (prefers-color-scheme) - Light/Dark Mode
    13. Example: Complete light/dark mode implementation
    14. Example: Advanced dark mode patterns
    15. Example: Hybrid approach (system + manual)
    16. 5. CSS Environment Variables (env())
    17. Example: Safe area insets for mobile devices
    18. Example: PWA titlebar area variables
    19. Example: Custom environment variable fallback patterns
    20. CSS Custom Properties & Theming Best Practices

  15. CSS Architecture and Methodology

    1. 1. CSS Naming Conventions (BEM, OOCSS, SMACSS)
    2. Example: BEM naming convention
    3. Example: OOCSS (Object Oriented CSS)
    4. Example: SMACSS categories
    5. 2. CSS-in-JS vs CSS Modules vs Utility-first (Tailwind)
    6. Example: CSS-in-JS (styled-components style)
    7. Example: CSS Modules
    8. Example: Utility-first (Tailwind CSS style)
    9. Example: Comparison of approaches
    10. 3. Component-scoped CSS Strategies
    11. Example: Shadow DOM component scoping
    12. Example: CSS @scope (modern native scoping)
    13. Example: Vue scoped styles
    14. Example: Cascade layers for component organization
    15. 4. CSS Reset vs Normalize vs Modern-normalize
    16. Example: CSS Reset (Meyer style)
    17. Example: Modern-normalize (modern browsers)
    18. Example: Custom minimal reset (modern approach)
    19. Example: Comparison and decision guide
    20. 5. Critical CSS and Above-fold Optimization
    21. Example: Critical CSS inline pattern
    22. Example: Async CSS loading patterns
    23. Example: Content-visibility optimization
    24. Example: Build-time optimization strategies
    25. CSS Architecture Best Practices

  16. CSS Performance Optimization

    1. 1. CSS Selector Performance and Efficiency
    2. Example: Selector efficiency comparison
    3. Example: Selector optimization patterns
    4. 2. CSS Containment (contain property) for Performance
    5. Example: CSS containment implementation
    6. Example: Content-visibility with intersection observer
    7. 3. will-change Property Optimization
    8. Example: Correct will-change usage
    9. Example: will-change lifecycle management
    10. 4. CSS Loading Strategies (preload, prefetch)
    11. Example: CSS loading strategies
    12. Example: Route-based code splitting
    13. 5. Reducing Layout Thrashing and Reflows
    14. Example: Avoid layout thrashing
    15. Example: Layout optimization techniques
    16. 6. CSS Bundle Optimization Techniques
    17. Example: PurgeCSS configuration
    18. Example: Build optimization pipeline
    19. Example: Manual optimization techniques
    20. CSS Performance Best Practices

  17. Modern CSS Features (2026+) and Experimental APIs

    1. 1. CSS Nesting Syntax and Implementation
    2. Example: Native CSS nesting
    3. Example: Advanced nesting patterns
    4. 2. CSS Cascade Layers (@layer)
    5. Example: Cascade layers basics
    6. Example: Nested and sub-layers
    7. Example: Practical layer architecture
    8. 3. CSS Scope (@scope) Rules
    9. Example: CSS @scope basics
    10. Example: Advanced @scope patterns
    11. 4. CSS Container Style Queries (@container style)
    12. Example: Container style queries
    13. Example: Practical style query patterns
    14. 5. CSS Houdini Worklets and Custom Functions
    15. Example: CSS Paint API (Houdini)
    16. Example: Animation Worklet
    17. 6. CSS @property Declarations
    18. Example: @property declarations
    19. Example: Advanced @property patterns
    20. Example: Practical @property use cases
    21. Modern CSS Features Best Practices

  18. CSS Accessibility and User Preferences

    1. 1. CSS Focus Management (:focus, :focus-visible)
    2. Example: Accessible focus indicators
    3. Example: Advanced focus patterns
    4. 2. Color Contrast and WCAG Compliance
    5. Example: WCAG compliant color schemes
    6. Example: Dynamic contrast adjustment
    7. 3. prefers-reduced-motion Media Query Implementation
    8. Example: Reduced motion patterns
    9. Example: Comprehensive motion reduction
    10. 4. prefers-color-scheme (Dark Mode) and System Themes
    11. Example: System theme implementation
    12. Example: Advanced theming with user override
    13. 5. prefers-contrast and High Contrast Mode
    14. Example: High contrast mode support
    15. Example: Comprehensive high contrast implementation
    16. 6. Accessible Typography and Reading Flow
    17. Example: Accessible typography
    18. Example: Responsive and accessible typography
    19. CSS Accessibility Best Practices

  19. CSS Debugging and Development Tools

    1. 1. Browser DevTools CSS Features (Chrome, Firefox)
    2. Example: Chrome DevTools Advanced Features
    3. 2. CSS Debugging Techniques and Strategies
    4. Example: Systematic Debugging Workflow
    5. Example: CSS Bugs and Solutions
    6. 3. CSS Linting (stylelint) and Code Quality Tools
    7. Example: Configuration (.stylelintrc.json)
    8. Example: PostCSS Configuration (postcss.config.js)
    9. Example: PurgeCSS Configuration
    10. 4. CSS Testing and Visual Regression
    11. Example: Configuration (backstop.json)
    12. Example: Playwright Visual Testing
    13. Example: CSS-Specific Test Scenarios
    14. 5. CSS Performance Profiling Tools
    15. Example: Chrome Performance Profiling Workflow
    16. Example: Performance Optimization Checklist
    17. Example: CSS Containment for Performance
    18. CSS Debugging and Development Best Practices

  20. CSS Integration with JavaScript and Frameworks

    1. 1. CSS Object Model (CSSOM) and DOM Manipulation
    2. Example: Manipulation Examples
    3. Example: CSS Typed OM (Houdini) API
    4. 2. CSS-in-JS (Styled Components, Emotion) Patterns
    5. Example: styled-components Pattern
    6. Example: Emotion CSS Prop Pattern
    7. Example: Vanilla Extract (Zero-runtime)
    8. 3. CSS Modules and PostCSS Integration
    9. Example: CSS Modules Implementation
    10. 4. Web Components and Shadow DOM Styling
    11. Example: Web Component with Shadow DOM Styling
    12. Example: Constructable Stylesheets (Reusable Styles)
    13. 5. Framework-specific CSS (React, Vue, Angular) Solutions
    14. Example: React CSS Patterns
    15. Example: Vue Scoped Styles
    16. Example: Angular ViewEncapsulation
    17. Example: Svelte Scoped Styles
    18. Framework CSS Solution Comparison:
    19. CSS Integration with JavaScript Best Practices

  21. CSS Security and Best Practices

    1. 1. CSS Security Vulnerabilities and Prevention
    2. Example: CSS Injection Attack Examples
    3. 2. Content Security Policy (CSP) for CSS
    4. Example: Content Security Policy Configuration
    5. Example: Subresource Integrity (SRI) for Stylesheets
    6. 3. CSS Data Exfiltration Prevention
    7. Example: CSS Data Exfiltration Attacks and Defenses
    8. 4. Secure CSS Architecture Patterns
    9. Example: Secure CSS Architecture Examples
    10. Example: Security Checklist for CSS
    11. CSS Security and Best Practices Final Summary