Basic selectors
Element, class, descendant, and pseudo-class selectors.
Live examples
Edit HTML, CSS, JavaScript, React/TSX, and Web Components with CodeMirror and see the result immediately. Filter by trail or topic.
Trail
Tags
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.
Dark mode with CSS variables
Switch themes using only custom properties and system preference.
Responsive cards
A card list that rearranges with grid and readable type.
Basic accessible form
Labels, visible focus, and field states without JavaScript.
Sticky header
A bar that sticks on scroll with position: sticky.
Button with hover and transition
Micro-interaction with transition and :hover / :active.
Media queries
Adapt layout and typography by viewport width.
position absolute and relative
Understand containing blocks and overlays.
z-index and stacking
Stacking contexts and when z-index actually works.
Carousel with scroll-snap
Horizontal scroll with snap points — no library needed.
:has() parent selector
Style the container based on what is inside — modern CSS.
Layout with container queries
The card changes layout based on container width, not the viewport.
Card with filter and backdrop-blur
Frosted glass and depth with backdrop-filter + filter.
Multi-column “masonry”
column-count for a magazine-like flow without JS.
Theme toggle with custom properties
Light/dark switch driven only by CSS variables.
Semantic article
article with header, headings, and metadata footer.
Accessible form
Associated labels, required, and buttons with the correct type.
Figure and figcaption
Image with a semantic grouped caption.
Navigation and landmarks
header, nav, main, and footer forming the page structure.
Data table
caption, thead, th with scope — an accessible table.
Definition list
dl/dt/dd for an HTML term glossary.
Profile page
Project: profile with landmarks, figure, and contact form.
Interactive counter
Simple state, buttons, and DOM updates.
Tabs
Accessible panel switching with roles and keyboard support.
Accordion
Open/close sections with a button and aria-expanded.
Form validation
Check fields on submit and show friendly messages.
Theme with localStorage
Persist light/dark preference in the browser.
List with mock fetch
Simulates fetch with Promise and renders a list.
Basic todo list
Add and remove items with DOM and a simple array.
Hello JSX
First React component rendered in the playground.
Card with props
Reusable component receiving title and children.
Counter with useState
Local state, events, and re-render.
useEffect on document.title
Sync the tab title with state.
Filterable list with keys
map + filter + stable keys.
React Query: remote list
useQuery + cache with JSONPlaceholder.
React Query: local mutation
useMutation + invalidateQueries on a mock list.
Zustand: global theme
Shared store across components.
Hello Custom Element
First custom element with label and Shadow DOM.
Shadow DOM and styles
Encapsulated CSS: the host does not leak into the component.
Vanilla gallery (Custom Element)
image-gallery with Shadow DOM, grid, and gallery-select event.
Gallery in React (CE host)
The same image-gallery used inside a React App via esm.sh.
Gallery in Vue (CE host)
Custom Element hosted by Vue 3 (global CDN build).
Attributes and columns
observedAttributes updates the grid when columns changes.
Vite lib tree (conceptual)
Mental map of a library-mode package — entry, dist, and preview HTML.
Dual export (class + register)
register() with guard + auto-register on the entry.
Consume in the app (import + tag)
How a Vite app would use the lib: register and mount the gallery.