One File, One Browser, Nothing Installed
You need a text editor and a browser, both of which you already have. Write six lines, save the file, double-click it, and you are a web developer — then learn the two habits that stop the next hundred files from being painful.
You need a text editor and a browser, both of which you already have. Write six lines, save the file, double-click it, and you are a web developer — then learn the two habits that stop the next hundred files from being painful.
The entire toolchain is a text editor
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. That said, one free editor makes the next few weeks noticeably easier:
Free, on every platform, and the one most tutorials assume. Colours your tags, closes them for you, and warns about mistakes as you type.
A VS Code extension worth installing on day one. It reloads the browser every time you save, which removes the only repetitive part of this whole process.
Sublime, Zed, Notepad++, Vim, or a browser-based editor like CodePen. All fine. Nothing in this track depends on your choice.
The extension is what makes it a web page
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.
Double-clicking the file is a real way to view it
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.htmlfile://, not https://. No server was involved, nothing touched the network, and the page works. This is genuinely how you will build for most of this track.
There are two things it cannot do, and both are worth knowing so they do not surprise you later.
- 1Nobody 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.
- 2Some 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 name with a meaning
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.cssEither 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.
Save, then refresh, is the whole loop
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.
Set this up once, before chapter 4
- ✓A folder for the site — Desktop is fine, and one folder per project from the start
- ✓index.html inside it, with the ten lines above
- ✓The editor and the browser side by side, not overlapping. Half the screen each
- ✓Live Server installed, or Ctrl/Cmd + R ready in the browser
- ✓File extensions visible in your file manager
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.
An unsaved file shows a dot or an asterisk in the tab. This is the answer far more often than anybody admits.
Check the address bar path matches the file you are editing. Two index.html files in two folders is a classic.
Hard refresh — Ctrl/Cmd + Shift + R — bypasses the cache. Mostly bites with CSS and images rather than HTML.
Key takeaways
- There is no toolchain. A text editor and a browser, both of which you already have.
- Word processors save formatting, not plain text. TextEdit needs Format → Make Plain Text.
- The .html extension is what makes a text file a web page. Turn on file extensions in Windows so you can see it.
- Double-clicking opens the file over file:// with no server. That is a real and normal way to build.
- file:// pages cannot be shared and block a few features; a local server like Live Server removes both limits.
- index.html is served when somebody asks for a folder, which is why URLs are shorter than paths.
- Lowercase, hyphenated filenames. Servers are case-sensitive and your laptop is not — that mismatch is a deploy-day bug.
- Save, refresh, look. If nothing changed: did you save, is it the same file, is it cached?
Quick check
Answer these to unlock the next chapter — 3 of 4 to pass. You can retake it anytime.
Answer every question to check.
Make a free account to read on
Every chapter is free — an account is how your progress, XP, and streak follow you from your laptop to your phone, and how you show up on the leaderboard. No payment, no trial.