Lesson 1: How the Web Works and Setting Up Your Tools

Why start here?

By the end of this course you'll have a real website for yourself or a small business. Before you write any code, it helps to know what actually happens when someone types your address into a browser. Once you know that, the rest of the course will make more sense. In this level we cover how the web works, then install an editor and get your first file showing in a browser.

How the web works, in brief

Think of the web as ordering a takeaway. Four parts do the work:

• The browser (the client). Chrome, Firefox, Edge or Safari, running on your laptop or phone. It's the customer: it asks for things and then shows you what comes back.
• The server. A computer somewhere that stores a website's files and sends copies to anyone who asks. It's the restaurant kitchen.
• The URL. The address of the thing you want, like the address on an order slip.
• The HTTP request. The order itself, written in HTTP (Hypertext Transfer Protocol), the shared language that browsers and servers use to talk.

A URL has parts, and each part has a job:

https://www.example.com/about.html
└─┬──┘   └──────┬──────┘└────┬────┘
 scheme      domain        path
# scheme: which protocol to use (https is the secure version of http)
# domain: which server to ask
# path:   which file on that server you want

Here's what happens when you press Enter:

1. Find the server. The domain name is for humans. The browser asks DNS (the Domain Name System, the web's address book) for the server's numeric IP address.
2. Send the request. The browser sends an HTTP request to that server. To fetch a page, it sends a GET request: "please send me /about.html".
3. Get the response. If the file exists, the server replies with the status 200 OK and the file. If it doesn't exist, you get 404 Not Found.
4. Fetch the rest. The first file back is HTML, the page's content and structure. As the browser reads it, it finds references to other files: CSS for the look and images. It sends a separate request for each one.
5. Put it together. The browser combines everything and draws the page on screen.

This is what a GET request and its response look like, simplified:

GET /about.html HTTP/1.1      <- the browser asks for a file by its path
Host: www.example.com         <- and names the site

HTTP/1.1 200 OK               <- the server says "found it"
Content-Type: text/html       <- "this is HTML"

...the HTML of the page...

Practitioner note: One page is rarely one request. A typical page makes dozens of them, for the HTML, stylesheets, images and fonts. That's why a page sometimes shows text first and the pictures a moment later. We'll come back to fast-loading images later in the course.

While you build, there's no server involved. Your browser opens the file straight from your own disk. Publishing comes at the end of the course.

Install VS Code

A code editor is where you write your files. We'll use Visual Studio Code (VS Code). It's free, it runs on Windows, macOS and Linux, and it's the editor most web developers use.

1. Go to code.visualstudio.com and download the installer for your system.
2. Windows: run the .exe installer and follow the prompts. macOS: open the .dmg and drag Visual Studio Code.app into Applications. Linux: install the .deb or .rpm package.
3. Open VS Code. You can ignore the welcome tab.

Why not Word or Notepad? Word saves formatting that browsers can't read. Plain Notepad would work, but VS Code colours your code, completes tags for you and shows all your files in one place. Those features save you a lot of time.

Create your project folder and first file

Every file for your site will live in one folder. Keep it somewhere easy to find:

Documents/
└── my-website/        <- your project folder (lowercase, no spaces)
    └── index.html     <- your home page

The steps:

1. Create a folder called my-website in Documents.
2. In VS Code, choose File → Open Folder… and select my-website. The folder now shows in the Explorer panel on the left.
3. Hover over the folder name in the Explorer, click the New File icon and type index.html.
4. Type this line into the file:

Hello! This is the start of my website.

5. Save with Ctrl+S (Windows/Linux) or Cmd+S (macOS).

Why the name index.html? By convention it's the home page. When someone visits a site without naming a file, web hosts usually send back index.html. The .html ending tells the browser and VS Code what kind of file it is.

Gotcha: Windows hides file extensions by default, so a file can quietly end up called index.html.txt. In File Explorer, turn on View → Show → File name extensions so you can always see the full name.

This line is plain text, not proper HTML yet. Browsers are forgiving, so it will still display. In Level 2 you'll give the page a proper structure.

Open it in a browser

In your file manager, double-click index.html, or drag it into an open browser window. Your sentence appears. Look at the address bar:

file:///C:/Users/you/Documents/my-website/index.html
# scheme is file:// instead of https:// - the browser is reading
# straight from your disk, and no server is involved

The edit–save–reload loop

You'll repeat this loop thousands of times:

1. Edit in VS Code. Change the text to Hello! This is Sam's bakery website.
2. Save with Ctrl+S / Cmd+S.
3. Reload the browser with F5 or Ctrl+R (Cmd+R on a Mac).

The new text appears.

Most common beginner bug: you change something, reload, and nothing happens. Check the tab in VS Code. A dot instead of an × means the file has unsaved changes. The browser only ever sees the saved file on disk. If you'd rather not think about saving, turn on File → Auto Save.

Checklist

• VS Code is installed and opens
• my-website folder is open in VS Code
• index.html exists, with the real extension showing
• The page opens in your browser with a file:// address
• You've edited, saved and reloaded, and seen the change

Key takeaways

• The browser (client) asks; the server stores files and sends copies back.
• A URL has a scheme (how), a domain (which server) and a path (which file).
• DNS turns the domain into an IP address. The browser then sends an HTTP GET request, and the server answers with a status like 200 OK or 404 Not Found.
• HTML arrives first, and the browser then requests CSS and images separately.
• Keep the whole site in one folder, with index.html as the home page.
• The browser only sees what you've saved. Edit, save, reload.