Learn how websites work through interactive examples. Understand HTML structure, why files stay separate, and where to host your creations - all hands-on!
It's simpler than you think
A website is just a collection of text files that browsers know how to read and display
These files live on a server (someone else's computer) that's always connected to the internet
When you type a URL, your browser asks that server for the files and displays them
Every website starts with index.html - it's like the front door that opens first
Play with HTML elements - resize them, change layouts, see the code update live!
Elements stack based on their display type. Block elements (like divs) stack vertically. This is the default behavior.
Why we keep HTML, CSS, and JavaScript in separate files
Defines the structure and content. What elements exist and in what order.
Controls appearance - colors, sizes, fonts, spacing, animations.
Adds interactivity - button clicks, form validation, dynamic updates.
Toggle each file to see what happens:
This is a sample card component.
Clicks: 0Designers work on CSS while developers work on JS - no conflicts!
One CSS file can style hundreds of HTML pages
Style broken? Check CSS. Button not working? Check JS.
Browsers cache CSS/JS files - faster page loads!
From typing a URL to seeing the page
example.com
Finds the server's address
Sends index.html first
CSS, JS, images follow
Browser paints the result
It's a convention! When you visit example.com, servers automatically look for
index.html in that folder. It's like the "main entrance" of your website. You could
name it anything, but index.html is the universal standard.
Why websites sometimes say "page not found"
example.com/about.html
Searches the folder for about.html
Server sends back a 404 status code
Remember — a website is just files on a server. When you visit a URL, you're asking for a specific file. If that file doesn't exist (typo in the URL, page was deleted, or link is outdated), the server has nothing to send back. Instead of crashing, it sends a 404 status code — the internet's way of saying "I looked, but it's not here."
HTTP status codes are how servers talk to browsers. They're grouped by category: 2xx means success (200 = OK!), 3xx means redirect (page moved), 4xx means client error (you asked for something wrong), and 5xx means server error (the server broke). 404 falls in the "client error" group — the URL you typed doesn't match any file on the server.
Many websites create custom 404 pages to be helpful (or funny). Instead of a boring error, they show a creative page with a link back to the homepage. It's good practice — if someone lands on a broken link, give them a way to find what they're looking for!
Free options to get your site online
| Platform | Setup Difficulty | Free Bandwidth | Backend Support | Best For |
|---|---|---|---|---|
| GitHub Pages | Easy | 100GB/mo | Portfolios | |
| Netlify | Easy | 100GB/mo | Functions | Modern Sites |
| Vercel | Easy | 100GB/mo | Serverless | React Apps |
| Render | Medium | 100GB/mo | Full | Full-Stack |
| Cloudflare | Easy | Unlimited | Workers | High Traffic |
Website builders let you create sites without writing code
Not everyone needs to code from scratch! If you just want a website up and running quickly, these drag-and-drop builders are perfect. They handle hosting, security, and updates for you.
Drag-and-drop editor with 800+ templates. Great for beginners.
Beautiful, designer-quality templates. Known for stunning aesthetics.
Professional-grade visual builder. Exports clean code if needed.
Simple one-page sites. Perfect for landing pages and link-in-bio.
Powers 40% of the web. Massive plugin ecosystem and themes.
Test your understanding with these quick exercises
Create a box that is exactly 200px wide and 100px tall.
Use Flexbox to arrange these 3 boxes vertically (column).
Create a 2x2 grid layout using CSS Grid.
Keep learning with these free resources
The gold standard for web documentation
Free interactive coding lessons
Complete visual guide to Flexbox
Complete visual guide to CSS Grid