How the web works: browser, server, page

You use the web every day. Now build it.

Every website you visit, from YouTube to your school portal, is built with the same three languages you will learn here. By the end of this course you will publish your own portfolio site that works on phones and laptops, and you will understand what the browser is actually doing.

What happens when you open a website

1. You type an address, such as example.com, or tap a link.
2. The Domain Name System (DNS) looks up which computer, called a server, holds that website. Think of it as the internet's contact list.
3. Your browser asks the server for the page.
4. The server sends back files: HTML, CSS, JavaScript and images.
5. Your browser reads them and draws the page on your screen.

All of this usually takes less than a second.

The three languages

• HTML (HyperText Markup Language) describes the content and what each part is: headings, paragraphs, images, links, buttons.
• CSS (Cascading Style Sheets) describes how it looks: colours, fonts, sizes, and where things go on the screen.
• JavaScript makes the page do things: react to clicks, check forms, change what is shown.

Think of a house: HTML is the walls and rooms, CSS is the paint and furniture, JavaScript is the electricity and plumbing that make things work.

Your tools

• A code editor. We use Visual Studio Code (VS Code), which is free and used by professionals.
• A browser. Chrome or Firefox.
• Developer tools. Press F12 in the browser to see the HTML and CSS of any page and find errors. This is your most useful tool.

Try it now

Open any website, press F12, and click the arrow icon at the top left of the tools panel. Now hover over parts of the page: the tools highlight the HTML behind each part. Change some text in the Elements panel and watch the page change. (It only changes on your screen, and resets when you reload.)

How this course works

1. HTML: build pages with real structure.
2. CSS: make them look good on any screen.
3. JavaScript: make them interactive.
4. Ship it: use version control and publish a live portfolio.

Each module ends with a check quiz and a small project. You will build up one site as you go.

Staying safe while building

The sites you make in this course are about your interests and projects, not your personal details. Never put your full name, school, address, phone number or photos of yourself on a public site.

What this means for you

Understanding how the web works turns you from someone who uses websites into someone who can create them. That is a powerful and very useful skill.