What Frontend Is

Every app and website you use has two halves. One half runs somewhere you never see, on computers in a data centre. The other half is right in front of you: the text you read, the buttons you press, the form you type into. That front half is called the frontend, and on the web it is built from three plain-text languages that every browser understands.

Think of an online shop. The product page with its photos, its price and its "Add to basket" button is the frontend. Behind it, a program checks how many are left in the warehouse and takes the payment. That program is the backend. You see and touch the first; the second answers it.

What Makes the Frontend "Front"?

The frontend is the part of the software that runs on the visitor's own device, their phone or laptop, inside the browser. The backend runs on a server, a computer that is always on and answers requests from browsers. The server sends the frontend's files to the browser, and from then on the browser runs them.

That split explains a lot of what follows in this book. Because the frontend runs on the visitor's device, the visitor's device decides how fast it feels. And because the visitor has the files, anything in the frontend can be read by anyone. Chapter 11 comes back to what that means for secrets.

Three Languages, Three Jobs

HTML says what each part of a page is: this is a heading, this is a paragraph, this is a list, this is a button. It describes structure and meaning, not appearance.

CSS says how those parts look: the colours, the sizes, the spacing, where each part sits on the screen, and how all of that changes on a narrow phone.

JavaScript says what the page does: what happens when a button is pressed, whether a form is filled in properly, what new information to fetch and show. It is the only one of the three that is a programming language, and it is taught from zero in Chapter 6.

A house is a fair picture of the split. HTML is the walls and rooms: this room is the kitchen, this one the bathroom. CSS is the paint and furniture. JavaScript is the wiring, the reason a light comes on when you press the switch. The comparison ends there, because unlike a house, each layer of a page can be replaced without touching the others.

Here is one small piece of each, shown only so you can recognise the shapes. You will type all three properly later. The first line says "this is a button with the words Say hello on it". The second says "make buttons blue with white text". The third says "when the button is clicked, show a message saying hello".

<button>Say hello</button>

button { background: blue; color: white; }

button.addEventListener("click", () => alert("Hello"));

Why Keep Them Apart?

The three languages live in separate files on purpose. A designer can change every colour on a site by editing one stylesheet, without touching a single heading. A page whose script fails to load still shows its text and links, because the text and links are in the HTML. And a screen reader, the software that reads a page aloud to someone who cannot see it, relies on the HTML saying what each part means, whatever it looks like.

That order, meaning first, then look, then behaviour, is also the order of this book. Chapter 2 is HTML, Chapters 3 to 5 are CSS, and JavaScript begins in Chapter 6.

Why Can You Start from Zero?

Most kinds of programming need something installed and configured before the first line runs. The frontend needs almost nothing. The browser is already on your computer, the files are plain text, and the result appears the moment you save. Topic 4 sets up the two tools the book uses, and topic 5 is your first page.

By the last chapter you will have built and published a small site of your own. It will work on a phone and a wide screen, with a mouse, a keyboard or a screen reader. It will answer clicks, remember a visitor's choice and load live data from the internet.