Clients, servers & the browser

Before writing any code, let's understand what the web actually is. When you visit a website, a lot happens in a fraction of a second. Grasping this — clients, servers, and how a page arrives in your browser — gives you the mental model that everything else in web development builds on.

The request/response cycle

The web works through a simple conversation between two parties:

• A client — your web browser (Chrome, Safari, Firefox). It requests pages.
• A server — a computer somewhere that stores the website and responds to requests.

When you type an address and hit enter:

1. Your browser (client) sends a request over the internet to the server for that website.
2. The server finds the right files and sends them back as a response.
3. Your browser receives those files and renders them into the page you see.

This request → response cycle happens every time you load a page or click a link. The whole web is built on this back-and-forth between clients asking and servers answering.

What the server sends: three kinds of file

The files a server sends to build a page are usually three types, each with a job:

• HTML — the structure and content (headings, paragraphs, images, links). The skeleton.
• CSS — the styling (colours, fonts, layout, spacing). The appearance.
• JavaScript — the behaviour (interactivity, responding to clicks, updating content). The actions.

Your browser receives these and combines them into the finished, interactive page. This course focuses on the first two — HTML and CSS — which together let you build real, styled web pages. (JavaScript, the third, adds interactivity and is a next step.)

The browser renders the page

The browser's job is to take the HTML, CSS, and JavaScript and render them — turn code into the visual page you interact with. It reads the HTML to build the structure, applies the CSS to style it, and runs the JavaScript for behaviour. Every website you've ever used was assembled this way by your browser. As a web developer, you write those files; the browser displays them.

Front-end vs back-end (a first look)

You'll hear these terms:

• Front-end — everything that runs in the browser (the client): HTML, CSS, JavaScript — what users see and interact with. This course is front-end foundations.
• Back-end — everything on the server: databases, logic, storing data. It powers the front-end behind the scenes.

For now, you're learning the front-end — building the pages themselves. That's where every web developer starts, and it's immediately rewarding: you write code, and a real page appears.

The mistake beginners make

Thinking a web page is one single thing, rather than separate files (HTML, CSS, JS) that the browser combines — understanding they're distinct, with different jobs, makes everything clearer. Also, over-worrying about servers and back-end at the start; you can build and view real pages entirely on your own computer (no server needed yet) — just open an HTML file in your browser. Focus on writing HTML and CSS; the request/response picture is just the context around it.

Your turn

The example below is a tiny complete page — HTML for structure, CSS (in the <style> tag) for appearance. It renders live; edit the text and colours and watch it update:

---

Your turn

1. Understand the request/response cycle: your browser (client) requests, a server responds, the browser renders.
2. Know the three file types: HTML (structure), CSS (style), JavaScript (behaviour) — this course covers HTML and CSS.
3. Grasp front-end (in the browser) vs back-end (on the server) — you're learning front-end foundations.

Key points

• The web is a request/response cycle: your browser (client) requests a page, a server responds, and the browser renders it.
• A page is built from three file types: HTML (structure/content), CSS (style), and JavaScript (behaviour).
• The browser's job is to combine those files into the visual page; you write the code, the browser displays it.
• Front-end runs in the browser (HTML/CSS/JS — what you're learning); back-end runs on the server (data, logic).