Setup — Blank to Browser

1. Principle

A website is just a file your browser knows how to read.

There is no magic in this. Before frameworks, before deploys, before anything anyone has ever sold you a course on — a website is a text file. The browser reads it. The browser renders it.

This is the only foundation you need to start. Everything else in this course is a way of making that file richer, more interactive, or reachable by other people. But the file is always the file.

This first unit puts you in the smallest possible setup so you can see this yourself.

2. Do (you try)

Five steps. Do them in order. Skip nothing.

Step 1 — Install Visual Studio Code. Go to code.visualstudio.com and install it. It's free. It works on Windows, Mac, and Linux. We use it because it is the most common code editor on Earth right now; what you learn in it transfers to every other editor.

Step 2 — Make a folder. Somewhere on your computer (Desktop is fine), create a new folder called my-portfolio. This folder is going to hold your entire course's work.

Step 3 — Open the folder in VS Code. Launch VS Code → File → Open Folder → select my-portfolio → trust the folder if asked.

Step 4 — Create a file. In VS Code's sidebar, right-click → New File. Name it exactly index.html. (The name matters — index.html is the conventional name for the main page.)

Step 5 — Type something into it. Paste this:

htmlindex.html

<!DOCTYPE html>
<html>
<body>
  <h1>hello</h1>
</body>
</html>

Save the file (Ctrl+S on Windows, Cmd+S on Mac).

Step 6 — Open it in your browser. In your file explorer (outside VS Code), find index.html, right-click → Open with → pick Chrome (or Firefox, or any browser).

3. Verify (how you know)

Look at your browser window. You should see:

The word hello displayed in large bold text.
The browser's address bar shows something like file:///C:/Users/you/Desktop/my-portfolio/index.html — note it starts with file://, not http://.

If you see those two things, you have just made a website.

If you don't:

Nothing happens / file opens in VS Code, not browser — your OS opened the file in your editor instead. Right-click the file and explicitly choose your browser.
A blank white page — VS Code saved with the wrong file extension (e.g. index.html.txt). Show file extensions in your OS settings and rename.
You see the raw HTML text as-is — same issue: the file isn't .html. Rename it.

4. Reference

Locked. Try it yourself first.