One File, One Browser, Nothing Installed

There is no compiler, no build step, no package to install, and no account to make. HTML and CSS are plain text, and the browser reads them directly.

Any editor that saves plain text will work — Notepad, TextEdit, whatever is already on the machine. One free editor makes the next few weeks easier:

Here is a complete, valid web page. Everything in it is explained in the next chapter — type it anyway.

<!doctype html><html lang="en">  <head>    <meta charset="utf-8">    <title>My first page</title>  </head>  <body>    <h1>Hello</h1>    <p>I made this.</p>  </body></html>

Save it as index.html. The .html is the entire difference between a text file and a web page — it is what tells your operating system to open it in a browser, and what tells a server to send it as Content-Type: text/html.

Find the file and double-click it. Your browser opens and the page is there. Look at the address bar:

file:///Users/you/my-site/index.html

file://, not https://. No server was involved, nothing touched the network, and the page works. This is how you will build for most of this track.

There are two limits to know about, so they do not surprise you later.

1. 1
   Nobody else can open it

   The address names a path on your disk. Sending it to somebody is sending them a path to a file they do not have — publishing is chapter 24.

2. 2
   Some features refuse to run over file://

   Anything fetching data, and JavaScript modules, are blocked by browser security rules that have nothing to do with your code. Live Server, which serves over http://localhost, removes this entirely.

index.html is a convention every web server understands: ask for a folder and you get the index.html inside it, without naming the file.

codewithpurpose.org/          →  serves  /index.htmlcodewithpurpose.org/about/    →  serves  /about/index.htmlcodewithpurpose.org/about.html →  serves  /about.html   (also fine)

Two ways to organise a small site, and the difference shows up in your URLs:

# Flat — simple, and the .html is visible in the URLmy-site/  index.html         →  /  about.html         →  /about.html  styles.css # Foldered — tidier URLs, one more folder eachmy-site/  index.html         →  /  about/    index.html       →  /about/  styles.css

Either is correct. Pick one and stay with it — mixing them is what produces a site where half the links have .html on the end and half do not.

Editor on one side, browser on the other. Change something, save, refresh. That is the entire development cycle for everything in this track, and its tightness is the best thing about learning the web first — you see the result of every change in under a second.

One thing that catches everyone at least once: you save, you refresh, and nothing changes. Before assuming your code is wrong, check the three boring causes.