HTML, CSS & JavaScript Visual Playground

Plan before you build: write a one-page proposal, understand who your site is for, and match the right sections and components to that audience and topic.

Use AI as an assistant, not the author. What it's good and bad at, how to prompt and verify, responsible use — plus two full lessons on AI tools and AI ethics.

How it feels to use your site. The principles that matter most — clarity, hierarchy, consistency, feedback, error prevention — plus a practical do/don't list.

Plan a layout before you code it. What wireframes are, low vs high fidelity, how to make one, and how the boxes become your HTML structure — with a live wireframe-to-design demo.

A gallery of the looks shaping the web — 3D, bold type, dark mode, neumorphism, retrofuturism, maximalism, neo-brutalism, gamified UI, AI chat, and more — each with a live example.

What makes Apple's sites feel premium — clarity, big confident type, generous whitespace, restrained color, the centered product hero, and frosted-glass depth — each with a live example.

Scroll-driven storytelling — reveal-on-scroll, sticky pinning, scene swapping, a progress bar, parallax, and JS-free CSS scroll animations. Every technique is a live demo with code.

The sections every great gym & studio site uses — high-energy hero, class schedule, trainer profiles, membership pricing, results & testimonials, and a booking CTA — each recreated live.

Raw brutalism done with craft — thick borders, hard offset shadows, mono type, an exposed grid, and one sharp accent — recreated live as components with HTML and CSS.

Kawaii maximalism — candy pastels, super-rounded blobs with little faces, sticker buttons, and bouncy motion — recreated live as components with HTML and CSS.

Surface textures with zero image files — dots, stripes, grids, checkerboard, graph paper, and grain — all made from gradients + a tiny SVG, with copy-paste CSS for each.

A line-art aesthetic — outlined text, hollow buttons that fill on hover, line-drawn cards, chips, and dividers — recreated live with borders and text-stroke.

The soft, glossy side of Y2K futurism — pastel chrome text, holographic gradients, bubbly pressable buttons, and frosted glass with sparkle — all in pure CSS.

A handmade collage look — taped polaroids, washi tape, torn-paper notes (clip-path), stickers, and handwriting on craft paper — recreated live with HTML and CSS.

Bold, joyful, saturated color — the dopamine palette, color blocking, juicy gradient meshes, and candy buttons — recreated live with HTML and CSS (and contrast kept safe).

"More real than real" — glassmorphism, glossy 3D orbs, iridescent holographic gradients, and layered depth — all faked in pure CSS with copyable code.

The gallery aesthetic — elegant serif type, framed works, curatorial placards, an exhibition wall, and editorial pull quotes — recreated live as components with HTML and CSS.

Genuine nostalgia by decade — 70s earth-tone palette, vintage seals, groovy type, and a working 90s web window — with examples, era guide, and code.

Game mechanics that boost motivation — points & XP, levels, badges, streaks, leaderboards, and progress rings — each recreated live (with an interactive XP demo) and explained with code.

The calm, organic aesthetic — earthy palettes, soft blob shapes, grain texture, rounded pill buttons, and curved dividers — recreated live as components with HTML and CSS.

"Less, but better" — whitespace, a restrained palette, clear hierarchy, and one focal point. Minimal hero, card, whitespace, and palette examples recreated live with both HTML and CSS.

The "more is more" aesthetic — bold clashing color, oversized type, layering, and pattern — recreated live, plus how to keep the chaos intentional, readable, and accessible.

Yesterday's vision of tomorrow — 80s synthwave, neon glow, chrome type, perspective grids, and CRT scanlines — all recreated in pure CSS with copyable code, plus the sub-styles to draw from.

How cause-driven and nonprofit sites turn empathy into action — the donation ask, impact stats, human stories, and "where your money goes" — recreated live, plus real charities to study.

The motion toolkit, all live: transitions, transforms, easing curves, keyframes, stagger reveals, scroll reveal, and loaders — plus timing, performance, and reduced-motion, each with copyable code.

Tour the famous design systems — Material, Carbon, Polaris, Fluent, Primer — then see the building blocks they share (color tokens, type & spacing scales, components) live, and how to start your own.

Tailor content and CTAs to the user's situation — time of day, location/timezone, device & environment, and new vs returning visitor — each detected live with the JavaScript to do it yourself.

The button that turns browsing into action. Button styles, the hero / newsletter / banner / pricing CTA patterns recreated live, plus copywriting and placement — all with copyable code.

The layouts great blogs use — the reading column, featured + list, card index, content + sidebar, magazine front page, and minimal post list — each recreated live with an editorial feel.

The free, browser-based tool designers use to design sites before building them. Key concepts (frames, components, auto-layout), getting started, and the Figma-to-code handoff.

The third language of the web. Where JS goes, variables, functions, and your first clickable, working code — with live demos you run on the page.

Where JS meets your page — select elements, change text/styles/classes, and run code on clicks and keystrokes. Live counter, input mirror, and like-button demos.

Five patterns that make pages engaging — toggles, tabs, accordions, live form feedback, and scroll-reveal animations. Try each, then copy the few lines behind it.

The widgets that make a capstone feel alive — tabs, accordion/FAQ, image carousel, live search & filter, modal dialog, countdown timer, and instant form validation — all working, with copyable HTML/CSS/JS.

Pull live data with fetch() — the fetch pattern, a real working public-API call, dynamic list rendering, and the four states every request needs (loading, success, empty, error), plus free no-key APIs to try.

Charts with no library — bar (CSS), line (SVG), donut (conic-gradient) — animated stat counters, plus forms that actually work: submitting via Formspree/Netlify, multi-step, and file upload with live preview.

Build a real theme switch in four steps — CSS variables for colors, a one-line JS toggle, localStorage to remember it, and prefers-color-scheme to follow the OS. Includes a live working toggle.

"I want my page to do X — which CSS do I use?" Goal-first recipes with live results: full-width hero, page background, fonts, centering, spacing, and a which-property lookup table.

Name your design values once and reuse them everywhere with CSS variables — color, spacing, and type tokens, primitive vs semantic aliasing, and a live light/dark theme toggle.

Every common selector with a live demo — type, class, id, combinators, attribute, pseudo-classes & elements — plus specificity and the best way to actually learn CSS.

New here? A 2-minute tour of how the playground works — the categories, search, the suggested learning path, live demos, and the one-click copy buttons.

Building before you have real content? Generate placeholder images (placehold.co), a responsive video block, and lorem ipsum text — then copy them straight in.

"Looks fine in my browser" isn't "correct." Use the free W3C HTML & CSS validators to catch hidden bugs, fix errors, and ship pages that work everywhere.

Every HTML element you need to know, with live previews. Headings, paragraphs, links, lists, tables, forms, media, and more.

The big picture of CSS — how stylesheets connect to HTML, selectors, the cascade, specificity, and inheritance.

Every property you'll actually use — colors, fonts, spacing, borders, backgrounds, shadows, and more. Each one with a live demo.

The CSS color system — hex, rgb, hsl, oklch, color-mix, gradients, contrast ratios, palettes, and creative effects like gradient text.

Web fonts and typography — hosted vs system fonts, Google Fonts setup, font-family pairings, weight and size scales, line-height for readability.

Organize real data into rows and columns — table anatomy, a basic build, captions, totals, colspan, zebra striping with CSS, and accessible headers.

Every semantic tag with a live example — header, nav, main, section, article, aside, footer, figure, time, mark, details, and the inline meaning tags.

The anchor tag and beyond — absolute vs relative paths, anchors, mailto/tel, downloads, image maps, accessible link text, plus audio, video, and YouTube embeds.

Every input control with a live demo — text, email, password, checkbox, radio, select, number, range, date, color, file — plus labels, fieldsets, and accessibility.

How elements are positioned on a page — display types, position property, float, z-index, and how they interact.

One-dimensional layout made visual. See how justify-content, align-items, flex-grow, flex-wrap, and gap work with interactive examples.

Two-dimensional layouts with rows and columns. See grid-template, grid-area, auto-fit, minmax, and named grid lines in action.

The grid patterns real sites use — block, multicolumn, modular, hierarchical, masonry, and bento — each shown live with the CSS that builds it. The "which grid for what" companion to CSS Grid.

Build pages from reusable modules, then let them adapt — auto-fit grids, bento, container queries, fluid type — and respond to context like dark mode, motion, and input. All live with code.

Making sites work on any screen size. Media queries, relative units, responsive images, mobile-first strategy, and viewport settings.

The 8 visual design principles every great site uses — hierarchy, contrast, alignment, repetition, proximity, whitespace, balance, and color unity.

14 techniques to turn text-heavy pages into scannable visuals — chunking, callouts, pull quotes, big stats, timelines, icon-text, info cards, drop caps.

Bring your pages to life. Transitions, keyframe animations, timing functions, transforms, hover effects, loaders, and typewriter effects.

The capstone guide — 10 phases from first sketch to launch day. Best practices at every step: plan, wireframe, content, design system, build, performance, a11y, SEO, test, launch.

The 9 web-security topics every developer should understand — HTTPS, XSS, SQL injection, passwords, CSRF, headers, and a pre-launch checklist.

Version control without the jargon. Install Git, create a repo, learn the three commands you'll use every day, and publish for free with GitHub Pages.

Send contact form submissions straight to your email — no backend. Step-by-step setup with a live test form.

Build sites everyone can use — semantic HTML, alt text, color contrast, keyboard nav, form labels, ARIA, reduced motion, and a pre-launch checklist.

A visual guide to choosing and using icon libraries. Compare Font Awesome, Phosphor, Lucide, Heroicons, and Feather with live demos and code.

Master Phosphor's 6 weights — thin, light, regular, bold, fill, and duotone. Learn sizing, color, duotone CSS variables, and browse 90+ icons with one-click copy.

Mac & PC shortcuts side-by-side — copy, paste, select all, screenshots, text navigation, windows, browser, and system. Plus why knowing them saves ~8 days a year, a symbol decoder, and a 7-day practice challenge.

Deploy any site in 60 seconds. Drag-drop uploads, GitHub auto-deploys, custom domains, free HTTPS, and built-in forms — with build settings for Vite, Next, and Astro.

Professional animation with GSAP. 5 live demos — tweens, staggers, timelines, text splits, and ScrollTrigger — plus an easing cheat sheet and when to use it over CSS.

GPU-powered 3D and effects in the browser. Live demos of a raw WebGL triangle, a Three.js rotating cube, 3,000 mouse-following particles, and a custom GLSL shader — with when to use it (and when not to).

Master free typography. Include fonts in HTML or CSS, pick weights, pair families, and try a live font playground with size, weight, and line-height controls.

Build a slide-in right-side drawer menu. Live phone mockup demo, hamburger toggle, dim overlay, and the HTML + CSS + JS behind it — plus 4 common mobile nav patterns.

Put sound and motion on a page. The native <video> and <audio> tags, responsive YouTube embeds, and <picture> for rich images — each with a live, playable demo.

Install VS Code on Mac & Windows, add Live Preview, Code Spell Checker, and a W3C validator, and structure your project folder right — no folder-within-a-folder traps.

Create a profile picture that actually looks professional. Learn the do's and don'ts, why smiling matters, and build a live preview with Canva and Adobe Express.