Suggested Learning Path
New to web development? Follow this order for the smoothest experience. Each playground builds on the one before it.
Tutorials
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.
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.
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.
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.
Pages
A full landing page broken into sections — hero, features, pricing, testimonials, footer — each one a remixable pattern.
Image gallery patterns — masonry, grid with overlays, hover zooms, lightbox previews, and responsive breakpoint rules.
Embed video the right way — HTML5 video, looping backgrounds, YouTube/Vimeo embeds, and poster frames.
About page patterns — mission, team grid, origin story, values, timelines, and press mentions.
A blank, well-commented HTML/CSS template — clean base to kick off any new project or student exercise.
Portfolio layouts — project grids, case studies, side-by-side work, and designer bio with selected pieces.
8 working contact page layouts — simple form, hero + form, dark theme, split screen, support grid, multi-contact, FAQ + form.
6 press & portfolio page layouts — press releases, logo wall, media kit, featured stories, portfolio grid, case study.
Components
Typography in action — gradient text, variable fonts, drop caps, multi-line gradients, and expressive headline treatments.
Utility-first CSS in action — side-by-side comparisons of vanilla CSS and Tailwind classes for the same components.
8 testimonial section patterns — simple cards, large quotes, star ratings, carousels, masonry, and gradient borders.
Vertical and horizontal timeline patterns — project history, company milestones, step-by-step walkthroughs.
Call-to-action sections — banners, waitlist forms, app-download rows, and conversion-focused hero blocks.
Kickers and tag lines — uppercase labels above headings that frame the section. 10 styling approaches.
8 navigation patterns — classic, sticky blur, hamburger, mega menu, sidebar, breadcrumbs, tab bar, pill nav.
8 form patterns — floating labels, custom radios, validation states, range sliders, multi-step, file upload.
8 hero section patterns — centered, split, video BG, gradient mesh, asymmetric, editorial, stats, product shot.
7 footer patterns — minimal, mega sitemap, subscribe CTA, social-first, dark gradient, newsletter, compact.
7 tab patterns — underline, pills, vertical, sliding indicator, icon, badge counts, card-style.
8 overlay patterns — dialog, confirm, side drawer, toast, popover, alert banner, full-screen, lightbox.
7 creative error designs — minimal, illustrated, space, typographic, glitch, search 404, maintenance mode.
7 authentication screens — split-screen, minimal card, social sign-in, dark mode, sign-up, password reset, 2FA.
7 admin UI patterns — stats overview, analytics chart, kanban, inbox, calendar, user table, settings.
7 pricing patterns — 3-tier cards, monthly/annual toggle, comparison table, usage calculator, enterprise CTA.
8 essential card patterns — pricing, product, team, blog, stats, profile, feature, and testimonial — with HTML/CSS for each.
6 pure-CSS device frames — phone, laptop, tablet, browser window, multi-device combo, and a 3D tilted phone trio. Drop in your own screenshots.
12 modern CSS button hover effects — sliding fills, 3D press, text flip, icon slide, gradient motion, and glass morphism.
Add maps to any page — contact info, store locator, click-to-pin location picker, and a multi-stop route. Live Leaflet demos, zero API keys, with full copyable HTML/JS.
12 pure-CSS feedback moments — heart like, toggle switch, checkbox draw, hamburger morph, ripple, success check, tooltip, and more.
12 @keyframes animation techniques — spinners, bouncing dots, fade-in entrances, gradient flow, floating objects, neon glow, typewriter, marquee.
Real WebGL 3D in the browser. 10 live demos — cubes, geometries, materials, lights, textures, particles, orbit controls, and GLTF model loading.
Learn to create SVG images — shapes, paths, gradients, text — then make any path draw itself with stroke-dasharray animations.
12 creative CSS 3D techniques — flip cards, rotating cubes, pyramid, isometric stack, book opening, 3D carousel, and extruded text.
12 soft-UI components — buttons, toggles, sliders, inputs, cards, and a mini music player. All use the same paired-shadow formula.
8 interactive FAQ accordion patterns — from simple HTML-only to animated gradients. Search, filter, tabs, and side-by-side layouts.
Everything you can do to a rectangle — box model, border-radius shapes, shadows, neon glow, gradient borders, clip-path, glass.