HTML from scratch to a page
Structure, semantics, forms, media, and basic accessibility up to a complete page.
Hands-on learning
Learn HTML, CSS, JavaScript, React, and Web Components with live examples
CSS4HTML is a unified hub: edit code in the playground, copy ready-made patterns, and follow clear trails — from HTML to React and Web Components, through CSS and JavaScript.
Five trails, one hub
Pick where to start — or combine all five.
CSS from scratch to layout
From the cascade to responsive layout, fluid type, and CSS accessibility.
JavaScript from scratch to the DOM
Variables, functions, events, arrays, and a first look at fetch and the DOM.
React from basics to state
Components, hooks, React Query, and Zustand — with a TSX playground.
Web Components with Vite
Framework-agnostic Custom Elements, Shadow DOM, package with Vite, consume in React or Vue.
How to study
Several paths, one goal: understand the web in practice.
- Follow a trail — short lessons linked to examples and snippets.
- Break things in the playground — editable HTML + CSS (+ JS/TSX) with live preview.
- Build your kit — filter snippets by trail and tags.
Featured examples
Open, edit, and see the result instantly.
Basic selectors
Element, class, descendant, and pseudo-class selectors.
Box model in practice
Content, padding, border, and margin — the CSS box model.
Center with Flexbox
Align horizontally and vertically with a few flex utilities.
Gallery with CSS Grid
Automatic responsive grid with repeat and minmax.
Fluid typography with clamp()
Font size that scales between min and max without breakpoints.
Fade + slide animation
Simple @keyframes for smooth element entrance.
Quick snippets
Short patterns to paste and adapt.
addEventListener
Listen for clicks the idiomatic way.
Animated underline on hover
Line that grows with transform — light and accessible.
attachShadow
Open Shadow DOM and inject markup + CSS.
Basic dialog
Native modal with showModal().
Basic slot
Project light DOM into the shadow with <slot>.
Basic useQuery
queryKey + queryFn.
From the blog
DOM + CSS classes: the front-end combo
How JavaScript and CSS talk via classList — without inline styles.
CSS accessibility: a quick checklist
Visible focus, contrast, motion, and forms — what CSS solves (and what it doesn’t).
Progressive enhancement: HTML, then CSS, then JS
Why order matters — and how the CSS4HTML hub reflects that in its trails.