A see-it-in-action reference for HTML & CSS
Most tutorials make you read about code. This one lets you see it run and grab it. Every page is a live, interactive reference you can poke at and copy from.
See it live
Every concept comes with a working demo right on the page — not just a screenshot.
Copy & paste
Every code block has a one-click Copy button. Take what you need into your own project.
Interactive
Click buttons, toggle controls, resize things — the demos respond so you learn by doing.
No setup
It all runs in your browser. Nothing to install to read and learn (your own projects are another story).
Find your way around
Everything is grouped into categories. Use the menu at the top of every page to jump between them. Here's what lives where:
Get Started
This guide, setting up VS Code, your first HTML page, and keyboard shortcuts.
HTML & CSS
The language foundations — tags, the cascade, color, fonts, and detailed properties.
Layout
How elements are positioned — Flexbox, Grid, Responsive Web Design (RWD), and mobile nav.
Design & Media
Make it look great — design principles, animation, icons, video, and images.
Publish & Tools
Ship a real site — accessibility, security, forms, GitHub, and deploying with Netlify.
Pages
Full-page templates — about, contact, gallery, portfolio, landing, and more to remix.
Components
Reusable UI pieces — buttons, cards, modals, tabs, navbars, footers, and more.
Search for anything
On the home page there's a search box in the top-right. Start typing and the cards filter instantly by title, description, and tags — categories with no matches hide themselves so you only see what fits.
- Go to the home page.
- Type a word in the search box — try
flexbox,color, orvideo. - Click any card that matches to open that tutorial.
- Press the × (or clear the box) to see everything again.
Follow the suggested path
Brand new to web development? The home page has a Suggested Learning Path — a row of numbered steps that build on each other. Start at step 1 (set up VS Code) and work along the arrows. You don't have to go in order, but it's the smoothest ride.
Get the most out of a tutorial page
Each tutorial follows the same rhythm. Once you know these three features, every page works the same way.
Try the live demo
Don't just read it — click, drag, and toggle the demo until you understand what each setting does.
Hit Copy
Hover a code block and click Copy in the corner. It's now on your clipboard — paste it into your editor.
Switch code tabs
Many demos have HTML / CSS / JS tabs above the code. Click each to see all the pieces.
Jump in
That's the whole tour. Head back to the home page and pick a card, or start at the very beginning.