Front-end & Back-end (Years 10–11) — Computer Science

The front-end is what the user sees and interacts with in the browser (HTML, CSS, JS); the back-end is the hidden server side with the logic and database. How static and dynamic sites differ, and the browser-server-database round trip.

When you use a website, you are only seeing half of it. The buttons, colours and text on your screen are the half built to be looked at. But behind them, out of sight, sits another half that remembers your password, stores your messages and decides what to show you. Every serious site is really two teams working together: the front-end you see, and the back-end you never do.

Why this matters: Knowing which half does what explains almost everything about modern sites — why a shopping basket remembers your items, how a login can be checked, why your feed looks different from your friend's, and what people mean when they say a developer is "front-end", "back-end" or "full-stack".

Front-end runs in your browser; back-end runs on the server, out of sight.

The front-end: what you see

The front-end is everything that runs in your browser — the part you look at and interact with. It is built from the three web languages: HTML for structure, CSS for style, and JavaScript for behaviour (like a menu that opens when clicked). Because it lives on your device, the front-end is sometimes called the client side.

The back-end: what you never see

The back-end is the server side — the part hidden away on the server. It holds the logic (the rules and decisions) and the database, where lasting information is stored: user accounts, passwords, orders, posts. When you log in, the back-end checks your details against the database. You never see this code; you only see the results it sends back.

Static versus dynamic sites

A static page is fixed for all; a dynamic page is built fresh from a database.

A static site sends the same fixed pages to everyone — a simple info page or menu never changes per visitor, so it barely needs a back-end. A dynamic site is built fresh for each request, pulling data from the database. Your logged-in feed, showing your posts and your name, is dynamic: the back-end assembles it just for you, so every user sees something different.

The round trip

Browser asks the server, the server asks the database, and the answer travels back.

For a dynamic page the path is a round trip: your browser sends a request to the server; the server asks the database for the data it needs; the database hands it back; and the server builds a response and returns the finished page. Front-end, back-end and database all play a part in a single click.

	Front-end	Back-end
Where it runs	Your browser (client)	The server (hidden)
Built from	HTML, CSS, JavaScript	Server logic + a database
Job	What you see and click	Store data, decide, check logins

Worked scenario: You open your messages app. The front-end (browser) requests your inbox. The back-end (server) checks you are logged in, then asks the database for your messages. The database returns them; the server builds the page; the front-end displays it. A friend doing the same gets their messages — same code, different data. That is a dynamic site.

The full stack

The stack: user ↔ front-end ↔ back-end ↔ database.

Common mistake: Thinking the database is part of the front-end. The database lives on the back-end, safely on the server. The front-end never touches it directly — it must ask the server, which keeps passwords and private data out of the browser where anyone could read them.

Tip: A developer who works on the visible part is a front-end developer; one who works on the server and database is a back-end developer; and one comfortable with both is called full-stack.