Zero to Hero

Lesson 1 of 4

Static website basics

The three files behind every web page — and why "static" is exactly what you want.

What is a "static" website?

A static website is just a set of files that a web browser can open and display directly — nothing has to be computed on a server first. When someone visits, the server hands over the files exactly as they are. That's it.

The opposite is a dynamic site (think Facebook or your bank), where a server builds a fresh, personalized page for every request using databases and code. Dynamic sites are powerful but heavier to build and host.

Why static is perfect for you: it's free (or nearly) to host, blazing fast, secure (no database to hack), and simple enough to understand top to bottom. Blogs, portfolios, landing pages, docs, product sites — most of the web could be static.

The three files behind every page

Nearly every web page is made of three languages, each with one job:

HTML

The structure (the skeleton)

HTML holds your content and gives it meaning: "this is a heading", "this is a paragraph", "this is a link". Files end in .html.

CSS

The style (the skin & clothes)

CSS decides how things look — colors, fonts, spacing, layout, dark mode. Files end in .css. The whole look of this site comes from one CSS file.

JavaScript

The behavior (the muscles)

JavaScript adds interactivity — the theme toggle in the corner, the "copy" buttons, the mobile menu. Files end in .js. Optional, but handy.

Build one right now

You don't need any special software — just a text editor and a browser. Create a file called index.html, paste this in, and open it in your browser by double-clicking it:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, world! 👋</h1>
  <p>This is my very first web page.</p>
  <button id="btn">Click me</button>

  <script src="script.js"></script>
</body>
</html>

Add a style.css file next to it to make it look nice:

style.css
body {
  font-family: sans-serif;
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
}
h1 { color: #f6821f; }
button {
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: #f6821f;
  color: white;
  cursor: pointer;
}

And a script.js file to make the button do something:

script.js
document.getElementById("btn").addEventListener("click", function () {
  alert("You clicked the button! 🎉");
});
That's a complete website. Three files in one folder. Refresh the browser and it just works — no servers, no accounts, no build tools. Everything on this Zero-to-Hero site is built the exact same way; you're reading the proof.

A tidy folder structure

As a site grows, people usually group files into folders. Here's how this site is organized:

project folder
building-website/
├── index.html                  ← the home page
├── 01-static-website-basics.html
├── 02-github.html
├── 03-claude-code.html
├── 04-cloudflare-pages.html
├── css/
│   └── style.css               ← all the styling
├── js/
│   └── main.js                 ← all the interactivity
└── favicon.svg                 ← the little tab icon

The magic filename is index.html — web servers automatically show it when someone visits your site's address, so it's always your home page.

Try it: open this page's own files. View the source of any page (right-click → "View Page Source") and you'll see exactly the HTML we've been talking about.

Next up: your files live on your computer right now. Let's give them a safe home in the cloud and start tracking every change — with Git and GitHub.

← BackHome