Everything you need to understand web design and development. From visual principles to deployment, from typography to payment security.
Born from coding with AI β because knowing the foundations makes your AI collaboration a thousand times more powerful.
Start with 29 core modules for design fundamentals. Dive into 14 optional modules for technical depth β CSS layout, accessibility, deployment, and more.
Every concept shown visually with side-by-side comparisons. Good vs bad. Before vs after. See why design decisions matter β no abstract theory.
Tools change yearly. Principles endure. Master typography, color, layout, and UX fundamentals that apply to any software, framework, or era.
Design meets code. Visual principles plus technical depth β CSS layout, accessibility, deployment, security. Understand what designers and developers each bring.
Built for the AI era. When you understand the foundations, you can guide AI tools effectively, evaluate their output, and know when they're wrong.
Foundational knowledge β skip if already comfortable with these topics
Visual structure, naming conventions, JavaScript vocabulary, reading errors, code quality.
What Unicode is, the tofu problem, world scripts, and designing for international audiences.
JPEG vs PNG vs WebP, lossy vs lossless, raster vs vector β when to use what.
Request/response, DNS, client vs server, HTTPS β what happens when you load a page.
Navigation, npm, git basics β works on Mac, Windows, and Linux.
Naming conventions, folder structure, asset handoff, version control basics.
API, IDE, SDK terminology, AI tools landscape, effective prompting, evaluating output.
One-dimensional layout: main axis, cross axis, justify-content, align-items, flex-grow.
Two-dimensional layout: grid-template, fr units, auto-fill, minmax, grid-template-areas.
WCAG, POUR principles, semantic HTML, keyboard navigation, contrast, ARIA basics.
Labels, input types, autocomplete, validation patterns, error handling, multi-step forms.
Hosting types, CI/CD, GitHub Actions, runners & minutes, environment variables.
Designer vs developer vs client, role evolution, T-shaped professionals, collaboration.
Personal vs business vs e-commerce, payment security, tokenization, HTTPS, OAuth.
Core concepts every web designer must understand
HTML, CSS, and JavaScript - what each does and how they work together.
Why web design differs from print - screens, pixels, and responsive thinking.
Hierarchy, contrast, alignment, proximity - the fundamentals of visual design.
Typography and color - the building blocks of visual design
Font families, weights, and the anatomy of letterforms.
Web fonts, loading strategies, and responsive type scales.
Color wheels, harmonies, and the psychology of color.
Applying color to interfaces - contrast, accessibility, dark mode.
Organizing content for clarity and responsiveness
Visual hierarchy, white space, and content organization.
Mobile-first thinking, breakpoints, and fluid layouts.
Optimizing images, aspect ratios, and responsive media.
Grid layouts, column systems, and modular design.
The building blocks of user interfaces
Audio types, sample rate, bit rate, formats, and performance.
Input types, validation, styling, accessibility, UX guidelines.
Navigation, cards, modals, tabs, accordions, toasts, loading.
How the web works, Core Web Vitals, caching, and CDNs.
Understanding how the web actually works
The critical difference, safe resizing, and complete workflow.
Nielsen's Heuristics, Fitts's Law, Hick's Law, Jakob's Law.
CSS transitions, transforms, pixel pipeline, performance.
Chart types, when to use, color, and labeling.
Advanced topics for specific use cases
Icon styles, grid systems, SVG principles, accessibility.
Microcopy, button labels, error messages, empty states, tone.
Design tokens, specifications, Figma dev mode, collaboration.
Color mapping, image handling, implementation, flash prevention.
Tools, workflow, and collaboration
RGB vs CMYK, DPI vs PPI, print CSS, PDF generation.
Touch targets, thumb zone, gestures, bottom sheets, safe areas.
Git concepts, branches, pull requests, team collaboration.
WCAG/ADA, GDPR, copyright, cookie consent.
The future of design and your next steps
Design fundamentals: typography, color, layout, UX principles, and professional skills. Start here.
Technical depth: CSS layout systems, accessibility, forms, deployment, and AI tools. Dive deeper when ready.