How websites actually work

You're about to spend this course building websites. Before you build one, it helps to know what a website actually is, where it lives, and how it gets from somewhere on the internet onto your screen.

This isn't theory for the sake of it. Every tool you'll set up in this course does one job in this journey. GitHub stores your files. Vercel puts them on a computer that's always online. Your domain is the address people type. When you understand the journey, every tool has a place, and nothing feels random.

You'll also do something in this lesson that most beginners don't expect: you'll change a real, live website in your own browser. It takes about two minutes.

A website is a set of files

That's it. Underneath every website, from a small bakery's page to YouTube, is a set of files. There are three main kinds:

• HTML: the content and structure. Headings, paragraphs, images, buttons. Think of it as the skeleton.
• CSS: the look. Colours, fonts, spacing, layout. Think of it as the clothes.
• JavaScript: the behaviour. What happens when you click, type or scroll. Think of it as the muscles.

When you build with Cursor later in the course, the AI writes these files for you. Your job is to tell it what to build, check what it wrote, and put the files online.

The files live on a server

Your website's files have to be stored on a computer that's always switched on and always connected to the internet, so anyone in the world can ask for them at any time. That computer is called a server.

Renting space on a server is called hosting. In this course, Vercel is your host. You'll send your files to Vercel, and Vercel keeps them online for you, for free.

People find the server using a domain

Every server on the internet has a numeric address called an IP address, something like 76.76.21.21. Nobody wants to type that, so we use domain names instead: words like adjoaskitchen.com.

The system that turns a domain name into an IP address is called DNS (Domain Name System). You can think of it as the internet's phone book: you look up a name, and it gives you the number.

The browser asks, the server answers

Your browser (Chrome, Safari, Edge) is the program that asks servers for files and turns them into the page you see.

The full journey, step by step

Here's everything that happens in the second after you type adjoaskitchen.com and press Enter:

1. You type the address. Your browser needs to know which server has the files.
2. The browser asks DNS. "Where is adjoaskitchen.com?" DNS answers with the IP address.
3. The browser asks the server. "Please send me the home page." This message is called a request.
4. The server answers. It sends back the HTML, CSS, JavaScript and images. This is called a response.
5. The browser builds the page. It reads the HTML for structure, applies the CSS for style, runs the JavaScript for behaviour, and shows you the result.

All of that usually happens in under a second.

What about the padlock?

You've seen the little padlock next to web addresses, and addresses that start with https://. The S stands for secure. It means the conversation between your browser and the server is scrambled (encrypted), so nobody in between, like someone on the same public Wi-Fi, can read it. Every website you build in this course will have the padlock. Vercel sets it up for you automatically.

Front end and back end, a first look

So far we've talked about files being sent to your browser. That part is called the front end: everything the visitor sees and clicks.

But real websites often need to do more. When a customer places an order on Adjoa's Kitchen, that order has to be saved somewhere and the owner has to be told about it. That work happens on the server, out of sight, and it's called the back end. It usually involves a database, an organised place to store information.

Now for the fun part. You're going to look inside a real website, then change it.

Part 1: See the files behind a page

1. Open Google Chrome on your laptop.
2. Go to any website. A simple one works best, such as example.com.
3. Right-click on an empty part of the page (on a Mac trackpad: tap with two fingers).
4. Click View Page Source.

A new tab opens full of text. That's the page's HTML, the exact file the server sent your browser. Look for words you saw on the page. You'll find them, wrapped in tags like <h1> and <p>.

5. Close the source tab and go back to the page.

Part 2: Edit a live website

6. Right-click on the main heading of the page.
7. Click Inspect. A panel opens beside or below the page. These are Chrome's Developer Tools, often called DevTools.

8. In the panel, one line is highlighted in blue. It looks something like <h1>Example Domain</h1>.
9. Double-click the words between the tags (for example, "Example Domain").
10. Type something new, such as Adjoa's Kitchen is open!, and press Enter.

Look at the page. The heading has changed.

11. Want to change the look too? Make sure the heading line is still highlighted. In the DevTools panel, find the Styles section. At the top of it is element.style { }. Click between the two curly brackets, type color: red, and press Enter. The heading turns red.

12. Refresh the page. Everything goes back to normal, because you only changed the copy in your browser, not the files on the server.

You just edited a website. You saw the HTML (the skeleton), changed it, and changed its CSS (the clothes). That's the same thing Cursor will do when you build, except it will change the real files and you'll put them online for everyone.

• Explain how a website travels from a server to your screen
• Name the three kinds of files that make a website, and what each does
• Look inside any website and change it in your browser

Next: 0.2 · How AI coding works, and what it can't do. You know what a website is made of. Now let's meet the tool that will write those files for you.