← Back
Zoom
Deep
Detail
Focus
Browse
Overview
Focus
Depth
0m
How This Course Works
Core Modules
29
Design fundamentals: typography, color, layout, UX principles, and professional skills. Start here.
Optional Modules
14
Technical depth: CSS layout systems, accessibility, forms, deployment, and AI tools. Dive deeper when ready.
Cloud
— AI & Future
Buildings
— Applied Skills
Road
— Core Design
Strata
— Foundations
3
Cloud
AI & Automation
3 modules
M27
AI in Design
M28
Infrastructure & Organization
M−07
AI-Assisted Coding
AI Design Landscape
AI Design Landscape
M27.0
Principles Over Tools
Categories of AI Design Tools
Evaluating AI Output
Evaluating AI Output
M27.1
Critical Evaluation
Common AI Failures
Ethical Considerations
Ethical Considerations
M27.2
Training Data Concerns
Impact on Jobs
Disclosure
Disclosure
M27.3
When to Disclose AI Use
Disclosure Best Practices
Workflow Integration
Workflow Integration
M27.4
AI as a Tool, Not Replacement
Prompting Skills
File Structure
File Structure
M28.0
Consistent Folder Organization
Naming Conventions
Component Systems
Component Systems
M28.1
Components vs Templates
Atomic Design
Team Organization
Team Organization
M28.2
Solo vs Team Workflows
Documentation Requirements
Media Management
Media Management
M28.3
Image Organization
Asset Optimization Workflow
Scaling Projects
Scaling Projects
M28.4
When to Formalize
Design System Evolution
Essential Terminology
Essential Terminology
M−07.0
API
IDE
SDK
How They Connect
AI Coding Tools Landscape
AI Coding Tools Landscape
M−07.1
Chat Interfaces
IDE Integrations
Choosing Tools
Effective Prompting
Effective Prompting
M−07.2
Bad vs Good
Prompt Structure
Iteration
Pro Tips
Evaluating AI Output
Evaluating AI Output
M−07.3
AI Limitations
Review Checklist
Learning Mode
The Changing Role of Developers
The Changing Role of Developers
M−07.4
What's Changing
What's Valuable
The Analogy
Your Position
8
Buildings
Layout Systems
2 modules
M−08
CSS Flexbox
M−09
CSS Grid
The Flexbox Mental Model
The Flexbox Mental Model
M−08.0
Two Axes
Container vs Items
Before & After
justify-content & align-items
justify-content & align-items
M−08.1
justify-content
align-items
Perfect Center
Common Patterns
flex-wrap & gap
flex-wrap & gap
M−08.2
flex-wrap
gap
Card Grid
flex-grow, flex-shrink, flex-basis
flex-grow, flex-shrink, flex-basis
M−08.3
flex-grow
flex-shrink
flex-basis
Shorthand
flex-direction & order
flex-direction & order
M−08.4
flex-direction
order
Mobile Pattern
Grid vs Flexbox: When to Use Each
Grid vs Flexbox: When to Use Each
M−09.0
The Difference
When Flexbox
When Grid
Together
Defining a Grid
Defining a Grid
M−09.1
Columns
Rows
gap
Auto-fill
Placing Grid Items
Placing Grid Items
M−09.2
Grid Lines
Spanning
Line Numbers
Named Lines
Grid Areas: Visual Layout Definition
Grid Areas: Visual Layout Definition
M−09.3
Template Areas
Assigning Areas
Empty Cells
Responsive
Grid Alignment
Grid Alignment
M−09.4
Items
Self
Content
Forms & A11y
2 modules
M−10
Accessibility Fundamentals
M−11
Form Design Patterns
Why Accessibility Matters
Why Accessibility Matters
M−10.0
The Numbers
Temporary & Situational
Legal
POUR
Semantic HTML
Semantic HTML
M−10.1
Why Semantics
Headings
Landmarks
Lists & Tables
Keyboard Navigation
Keyboard Navigation
M−10.2
Tab Order
Focus Visible
Focus Trap
Skip Links
Color & Contrast
Color & Contrast
M−10.3
Contrast Ratios
Color Alone
UI Components
Images & Media
Images & Media
M−10.4
Alt Text
Decorative vs Informative
Video & Audio
ARIA Basics
ARIA Basics
M−10.5
First Rule
Labels
States
Live Regions
Form Anatomy
Form Anatomy
M−11.0
Parts
Labels
Association
Grouping
Input Types
Input Types
M−11.1
Types
Autocomplete
Select vs Radio
Checkbox
Validation Patterns
Validation Patterns
M−11.2
When
Inline Errors
Native
Password
Error Handling
Error Handling
M−11.3
Good Errors
Summary
Recovery
Multi-Step Forms
Multi-Step Forms
M−11.4
When
Progress
Navigation
Animation
1 module
M17
Transitions & Animation
CSS Transitions
CSS Transitions
M17.0
Smooth State Changes
Transition Properties
CSS Transforms
CSS Transforms
M17.1
2D Transforms
Transform Origin
Timing Functions
Timing Functions
M17.2
Easing Curves
When to Use Each
Keyframe Animations
Keyframe Animations
M17.3
Multi-Step Animations
Animation Properties
Performance
Performance
M17.4
The Pixel Pipeline
What to Animate
Mobile
1 module
M24
Mobile Patterns
Touch Targets
Touch Targets
M24.0
Minimum Touch Target Size
Spacing Between Targets
Thumb Zone
Thumb Zone
M24.1
Natural Thumb Reach
Bottom Navigation Pattern
Mobile Gestures
Mobile Gestures
M24.2
Common Touch Gestures
Swipe Actions
Bottom Sheets
Bottom Sheets
M24.3
Modal Alternative for Mobile
Snap Points
Safe Areas
Safe Areas
M24.4
Device Safe Areas
Landscape Considerations
Dark Mode
1 module
M22
Dark Mode
Dark Mode Basics
Dark Mode Basics
M22.0
More Than Inverted Colors
Why Dark Mode?
Color Mapping
Color Mapping
M22.1
Semantic Color Tokens
Elevation with Color
Contrast & Saturation
Contrast & Saturation
M22.2
Reduce Contrast Slightly
Desaturate Colors
Image Handling
Image Handling
M22.3
Images in Dark Mode
Logos and Icons
Implementation
Implementation
M22.4
Detect System Preference
Prevent Flash of Wrong Theme
Data Viz
1 module
M18
Data Visualization
Data-Ink Ratio
Data-Ink Ratio
M18.0
Maximize Data, Minimize Decoration
What to Remove
Visual Encoding
Visual Encoding
M18.1
Mapping Data to Visuals
Practical Implications
Chart Selection
Chart Selection
M18.2
Match Chart to Data Story
When to Use Each
Labels & Legends
Labels & Legends
M18.3
Direct Labeling Over Legends
Effective Titles and Annotations
12
Road
Typography
2 modules
M03
Typography Fundamentals
M04
Web Typography
Typeface vs Font
Typeface vs Font
M03.0
Serif vs Sans-Serif
Serif vs Sans-Serif
M03.1
Type Anatomy
Type Anatomy
M03.2
Type Classification
Type Classification
M03.3
Type Anatomy
Type Anatomy
M03.0
Baseline
X-Height
Ascenders/Descenders
Terminology
Type Classifications
Type Classifications
M03.1
Serif
Sans-Serif
Monospace
Display
Weights & Styles
Weights & Styles
M03.2
Weight Scale
Using Weight
Italic
Variable
Font Pairing
Font Pairing
M03.3
Contrast
Superfamily
X-Height
Avoid
Legibility & Readability
Legibility & Readability
M03.4
Size
Line Height
Line Length
Contrast
Web Fonts
Web Fonts
M04.0
Font Loading
Font Loading
M04.1
Responsive Type
Responsive Type
M04.2
System Fonts
System Fonts
M04.3
Web Font Sources
Web Font Sources
M04.0
Google Fonts
Adobe Fonts
Self-Hosted
Foundries
Font Loading
Font Loading
M04.1
FOUT/FOIT
font-display
Preload
Subsetting
Responsive Typography
Responsive Typography
M04.2
Breakpoints
Fluid Type
clamp()
Scale Generator
System Font Stacks
System Font Stacks
M04.3
System UI
When to Use
Trade-offs
Monospace
Performance Optimization
Performance Optimization
M04.4
Checklist
Variable Fonts
Metrics
Fallback Matching
Color
2 modules
M05
Color Theory
M06
Color in UI
The Color Wheel
The Color Wheel
M05.0
Color Properties
Color Properties
M05.1
Color Harmony
Color Harmony
M05.2
Color Psychology
Color Psychology
M05.3
The Color Wheel
The Color Wheel
M05.0
Primary
Secondary
Tertiary
Full Wheel
Color Properties
Color Properties
M05.1
Hue
Saturation
Lightness
HSL in CSS
Color Harmony
Color Harmony
M05.2
Complementary
Analogous
Triadic
Split-Comp
Color Psychology
Color Psychology
M05.3
Red
Blue
Green
More Colors
Color Context
Color Context
M05.4
Simultaneous
Proportion
Temperature
Light/Dark
Semantic Color
Semantic Color
M06.0
Color Contrast
Color Contrast
M06.1
Color Systems
Color Systems
M06.2
Dark Mode
Dark Mode
M06.3
Semantic Colors
Semantic Colors
M06.0
Success
Warning
Error
Info
Color Contrast
Color Contrast
M06.1
WCAG Ratios
Pass/Fail
Tools
Beyond Ratio
Color Systems
Color Systems
M06.2
Structure
Scales
Tokens
Usage
Dark Mode
Dark Mode
M06.3
Not Just Invert
Elevation
Colors
Implementation
Color Accessibility
Color Accessibility
M06.4
Color Blindness
Don't Rely on Color
Testing
Safe Palettes
Layout
3 modules
M07
Layout Principles
M08
Responsive Design
M10
Grids & Systems
Visual Flow
Visual Flow
M07.0
Content Hierarchy
Content Hierarchy
M07.1
White Space
White Space
M07.2
Rhythm & Repetition
Rhythm & Repetition
M07.3
Visual Flow
Visual Flow
M07.0
F-Pattern
Z-Pattern
Focal Points
Gutenberg
Content Hierarchy
Content Hierarchy
M07.1
Size
Position
Spacing
Contrast
White Space
White Space
M07.2
Macro
Micro
Active
Passive
Rhythm & Consistency
Rhythm & Consistency
M07.3
Vertical Rhythm
Repetition
Breaks
Spacing Scale
Container Patterns
Container Patterns
M07.4
Full Width
Contained
Narrow
Split
Mobile-First
Mobile-First
M08.0
Fluid Grids
Fluid Grids
M08.1
Breakpoints
Breakpoints
M08.2
Flexible Media
Flexible Media
M08.3
Mobile-First Design
Mobile-First Design
M08.0
Philosophy
CSS Approach
Content Priority
Anti-Patterns
Breakpoints
Breakpoints
M08.1
Common Values
Finding Breaks
CSS Syntax
Organization
Fluid Systems
Fluid Systems
M08.2
Fluid Typography
Fluid Spacing
Fluid Grids
Units
Responsive Navigation
Responsive Navigation
M08.3
Hamburger
Bottom Nav
Priority+
Considerations
Responsive Images
Responsive Images
M08.4
Basic
srcset
Art Direction
Aspect Ratio
Columns & Gutters
Columns & Gutters
M10.0
Modular Thinking
Modular Thinking
M10.1
CSS Grid vs Flexbox
CSS Grid vs Flexbox
M10.2
Content-Driven Grids
Content-Driven Grids
M10.3
Grid Anatomy
Grid Anatomy
M10.0
Columns
Gutters
Margins
Rows
CSS Grid
CSS Grid
M10.1
Basics
Auto-Fill
Named Areas
Spanning
Flexbox
Flexbox
M10.2
Basics
Growing
Wrapping
When to Use
Column Systems
Column Systems
M10.3
12-Column
CSS Implementation
Responsive
Alternatives
Modular Design
Modular Design
M10.4
Components
Spacing System
Baseline Grid
Container Queries
Media
2 modules
M09
Images & Media
M19
Iconography
Format Selection
Format Selection
M09.0
Compression
Compression
M09.1
Resolution
Resolution
M09.2
Lazy Loading
Lazy Loading
M09.3
Image Formats
Image Formats
M09.0
JPEG
PNG
WebP
SVG
AVIF
Optimization
Optimization
M09.1
Quality
Dimensions
Tools
Metadata
Aspect Ratios
Aspect Ratios
M09.2
Common Ratios
CSS
object-fit
CLS
Responsive Images
Responsive Images
M09.3
srcset
picture
Format Fallback
Lazy Loading
Video & Media
Video & Media
M09.4
Embedding
Self-Hosted
Background
Performance
Visual Metaphor
Visual Metaphor
M19.0
Icons as Universal Language
Semantic Distance
Icon Styles
Icon Styles
M19.1
Outlined vs Filled
Consistency is Key
Icon Grid
Icon Grid
M19.2
Structured Design System
Optical Corrections
SVG Principles
SVG Principles
M19.3
Why SVG for Icons
SVG Best Practices
Accessibility
Accessibility
M19.4
Icons Need Labels
Touch Targets
UX
3 modules
M16
UI/UX Principles
M20
Writing for UI
M21
Design Handoff
Nielsen's Heuristics
Nielsen's Heuristics
M16.0
10 Usability Heuristics
More Heuristics
Fitts's Law
Fitts's Law
M16.1
The Mathematics of Interaction
Practical Applications
Hick's Law
Hick's Law
M16.2
Decision Time and Choices
Categorization and Progressive Disclosure
Jakob's Law
Jakob's Law
M16.3
Users Expect Familiar Patterns
Common Conventions
More UX Laws
More UX Laws
M16.4
Miller's Law
Aesthetic-Usability Effect
Microcopy Basics
Microcopy Basics
M20.0
Words Are Interface Design
Be Clear, Not Clever
Button Labels
Button Labels
M20.1
Action-Oriented Labels
Destructive Actions Need Clarity
Error Messages
Error Messages
M20.2
Helpful, Not Hostile
Inline Validation
Empty States
Empty States
M20.3
Turn Nothing Into Something
Types of Empty States
Tone & Voice
Tone & Voice
M20.4
Consistent Personality
Match Emotional Context
Design Tokens
Design Tokens
M21.0
Single Source of Truth
Token Categories
Specifications
Specifications
M21.1
What Developers Need
Don't Forget States
Component Documentation
Component Documentation
M21.2
Component Anatomy
Variants and Props
Figma Dev Mode
Figma Dev Mode
M21.3
Inspect and Export
Variables and Styles
Collaboration
Collaboration
M21.4
Design Reviews
Async Handoff
15
Strata
Web Fundamentals
3 modules
M00
undefined
M01
Digital vs Physical
M02
Design Principles
Spotting Code by Sight
Spotting Code by Sight
M00.0
HTML
CSS
JavaScript
Side by Side
Common Terms
The Web Stack — Visualized
The Web Stack — Visualized
M00.1
HTML
CSS
JavaScript
Together
What Changes vs. What Endures
What Changes vs. What Endures
M00.2
Overview
Tools (Change)
Trends (Fade)
Principles (Endure)
Reading Code Like a Pro
Reading Code Like a Pro
M00.3
Indentation
Line Numbers
Naming
CSS Classes
JS Terms
Refactoring
Counting
Comments
HTML in Depth
HTML in Depth
M00.4
Minimal
Basic
Complete
Semantic Tags
CSS in Depth
CSS in Depth
M00.5
Inline
Internal
External
What CSS Controls
JavaScript in Depth
JavaScript in Depth
M00.6
When Needed
When NOT Needed
Inline vs External
DOM Manipulation
Separation of Concerns
Separation of Concerns
M00.7
Bad: Mixed
Good: Separated
Why It Matters
How Browsers Render Pages
How Browsers Render Pages
M00.8
Step 1: Parse
Step 2: Style
Step 3: Layout
Step 4: Paint
Loading Order
Loading Order
M00.9
Blocking
Non-Blocking
Optimal Order
Browser DevTools
Browser DevTools
M00.10
Elements
Console
Network
Lighthouse
History Deep Dive
History Deep Dive
M00.11
Timeline
HTML History
CSS History
JS History
Framework History
The Four Fundamentals
The Four Fundamentals
M01.0
Spotting Code by Sight
Spotting Code by Sight
M01.1
Web Languages
Python
C++/C
Java
Swift/Kotlin
Why Only 3?
Quick Reference
Light vs Ink
Light vs Ink
M01.2
Additive
Subtractive
Comparison
Impact
Pixels vs Dots
Pixels vs Dots
M01.3
Pixels
Dots
Resolution
Scaling
Dynamic vs Static
Dynamic vs Static
M01.4
Static
Dynamic
Interactive
States
Cost Structure
Cost Structure
M01.5
Print Costs
Digital Costs
Trade-offs
Updates
Hierarchy
Hierarchy
M02.0
Contrast
Contrast
M02.1
Alignment
Alignment
M02.2
Proximity
Proximity
M02.3
Repetition
Repetition
M02.4
Balance
Balance
M02.5
White Space
White Space
M02.6
Hierarchy
Hierarchy
M02.0
Size
Weight
Color
Position
Combined
Contrast
Contrast
M02.1
Weak
Medium
Strong
Types
Alignment
Alignment
M02.2
Chaotic
Partial
Perfect
Types
Proximity
Proximity
M02.3
No Grouping
Clear Groups
Real Example
Repetition
Repetition
M02.4
Inconsistent
Consistent
Design System
Balance
Balance
M02.5
Unbalanced
Symmetrical
Asymmetrical
Radial
White Space
White Space
M02.6
Cramped
Balanced
Generous
Types
Technical Literacy
6 modules
M−01
Code Literacy
M−02
Unicode & Global Typography
M−03
File Formats & Compression
M−04
How the Internet Works
M−05
Terminal & Command Line
M−06
Design File Organization
Why Code Literacy Matters
Why Code Literacy Matters
M−01.0
The Reality
Designer's Edge
What You'll Learn
Visual Structure of Code
Visual Structure of Code
M−01.1
Indentation
Brackets
Vertical Lines
Whitespace
Naming Conventions
Naming Conventions
M−01.2
The Cases
Why kebab-case?
BEM Naming
State Classes
File Naming
JavaScript Vocabulary
JavaScript Vocabulary
M−01.3
addEventListener
querySelector
forEach/map
async/await
Arrow Functions
const/let/var
Reading Error Messages
Reading Error Messages
M−01.4
Anatomy
Common Errors
Stack Trace
Console
Code Quality Concepts
Code Quality Concepts
M−01.5
DRY
Refactoring
Metrics
Comments
Code Smells
What is Unicode?
What is Unicode?
M−02.0
The Problem
The Solution
UTF-8
Scale
The Tofu Problem
The Tofu Problem
M−02.1
What is Tofu
Why It Happens
Font Fallbacks
Noto Fonts
Writing Systems of the World
Writing Systems of the World
M−02.2
Script Families
RTL Layout
CJK Specifics
Indic Scripts
Practical Implementation
Practical Implementation
M−02.3
HTML Setup
Font Stack
CSS Logical
Testing
Raster vs Vector
Raster vs Vector
M−03.0
Raster
Vector
When to Use
SVG
Lossy vs Lossless Compression
Lossy vs Lossless Compression
M−03.1
The Tradeoff
Lossy
Lossless
Quality Settings
Image Formats Compared
Image Formats Compared
M−03.2
JPEG
PNG
WebP
AVIF
GIF
Video & Audio Formats
Video & Audio Formats
M−03.3
Video Codecs
Audio Codecs
Bitrate
The Request-Response Cycle
The Request-Response Cycle
M−04.0
The Basics
HTTP Methods
Status Codes
DevTools
DNS: The Internet's Phone Book
DNS: The Internet's Phone Book
M−04.1
The Problem
The Lookup
DNS Records
Client vs Server
Client vs Server
M−04.2
The Split
Frontend/Backend
APIs
HTTPS & Security
HTTPS & Security
M−04.3
HTTP vs HTTPS
SSL/TLS
Certificates
What is the Terminal?
What is the Terminal?
M−05.0
The Basics
Cross-Platform
Shell vs Terminal
Why CLI?
Navigation Commands
Navigation Commands
M−05.1
Where Am I?
What's Here?
Move Around
Paths
Common Commands
Common Commands
M−05.2
File Operations
npm Basics
git Basics
Getting Help
Practical Workflow
Practical Workflow
M−05.3
Project Setup
Open in Editor
Kill Process
Clear & History
File Naming Conventions
File Naming Conventions
M−06.0
The Problem
Good Naming
Dates in Names
Versioning
Folder Structure
Folder Structure
M−06.1
By Type
By Feature
Web Projects
Depth Limits
Asset Naming for Handoff
Asset Naming for Handoff
M−06.2
Images
Icons
Logos
Export Settings
Version Control & Backups
Version Control & Backups
M−06.3
Manual vs Auto
Design Tools
Backup Strategy
Professional
5 modules
M25
Version Control
M26
Legal & Compliance
M−12
Deployment & Hosting
M−13
Web Team Roles & Industry Evolution
M−14
Website Types & E-commerce Security
Version Control Basics
Version Control Basics
M25.0
What is Version Control?
Why Version Control Matters
Commits
Commits
M25.1
What is a Commit?
Good Commit Messages
Branches
Branches
M25.2
What is a Branch?
Branch Naming
Pull Requests
Pull Requests
M25.3
What is a Pull Request?
Good PR Practices
Team Collaboration
Team Collaboration
M25.4
Git Workflow
Handling Conflicts
Accessibility Law
Accessibility Law
M26.0
WCAG: The Global Standard
ADA and Legal Risk
Privacy Laws
Privacy Laws
M26.1
GDPR Essentials
CCPA and Other Laws
Cookie Consent
Cookie Consent
M26.2
Cookie Consent Requirements
Dark Patterns Are Illegal
Copyright
Copyright
M26.3
Image and Font Licensing
User-Generated Content
Terms & Policies
Terms & Policies
M26.4
Essential Legal Pages
Writing Legal Content
Web Hosting Fundamentals
Web Hosting Fundamentals
M−12.0
What Is Hosting
Types
Popular Platforms
Static vs Dynamic
CI/CD: Automated Deployments
CI/CD: Automated Deployments
M−12.1
What Is CI/CD
Benefits
Workflow
GitHub Actions
GitHub Actions
M−12.2
What Are Actions
Runners & Minutes
Basic Workflow
Common Actions
Deployment Strategies
Deployment Strategies
M−12.3
Direct Deploy
Blue-Green
Canary
Preview Deploys
Environment Variables & Secrets
Environment Variables & Secrets
M−12.4
What Are Env Vars
Common Uses
.env Files
Platform Secrets
Traditional Web Team Roles
Traditional Web Team Roles
M−13.0
The Designer
The UX Designer
The Developer
The Client
How Roles Evolved
How Roles Evolved
M−13.1
1990s-2000s
2000s-2010s
2010s-Now
AI Era
Effective Collaboration
Effective Collaboration
M−13.2
Designer ↔ Developer
Working with Clients
Shared Language
Finding Your Path
Finding Your Path
M−13.3
Generalist
Specialist
T-Shaped
This Course
Types of Websites
Types of Websites
M−14.0
Personal
Business
E-commerce
Web Apps
How E-commerce Works
How E-commerce Works
M−14.1
Components
Platforms
Trust Signals
How Online Payments Work
How Online Payments Work
M−14.2
The Flow
Tokenization
PCI Compliance
HTTPS
User Authentication Security
User Authentication Security
M−14.3
Passwords
OAuth
2FA
Auth Services
Print
1 module
M23
Print vs Screen
Color Models
Color Models
M23.0
RGB vs CMYK
Color Gamut Differences
DPI vs PPI
DPI vs PPI
M23.1
Understanding Resolution
Why the Difference?
Type Differences
Type Differences
M23.2
Print vs Screen Typography
Font Rendering Differences
Layout Differences
Layout Differences
M23.3
Fixed vs Fluid
Above/Below the Fold
Cost Models
Cost Models
M23.4
Per-Copy vs Front-Loaded
Corrections and Updates