How the Web Works
Browsers, web pages, and what HTML, CSS & JS each do — in plain language. Start →
Web for Designers
Understand the web you design for. Learn HTML, CSS & a little JavaScript from scratch — edit real code and watch it change live, right in your browser. No setup, no jargon.
What you’ll learn
Section titled “What you’ll learn”HTML — Structure & Content
Elements, text, links, images, lists, semantic structure & forms. Learn →
CSS — Styling Basics
Selectors, colors, typography, the box model, backgrounds & borders. Style it →
CSS Layout — Flexbox & Grid
The designer’s core: Flexbox (≈ auto-layout), Grid, positioning, spacing. Lay it out →
Responsive Design
Relative units, media queries, mobile-first, responsive images. Adapt →
A Little JavaScript
Gentle intro: variables, selecting elements, clicks, and simple interactions. Add behaviour →
Design-to-Code Workflow
Figma → code, design tokens, scales, components, accessibility, handoff. Ship it →
How this course works
Section titled “How this course works”From absolute zero
No coding experience needed. Every term is explained, every step is small.
Edit code, see it live
Examples run in an editable live preview — change a color or some text and watch the result update instantly, right on the page.
Spoken in design terms
Concepts are anchored in what you already know from Figma — auto-layout, styles, tokens, components.
Bilingual
Available in English and ไทย — switch anytime from the top bar.