Frontend

The part of a software system that runs in the user’s browser and controls everything they see, click, and interact with.

What is the frontend?

When you visit a website, everything you experience — the text, the colours, the buttons, the animations, the way the page responds when you scroll or click — is the frontend. It is the layer of a web application that runs on your device, inside your browser.

The frontend receives data and instructions from the backend (the server) and turns them into a visual, interactive experience. It does not store data permanently, it does not make business decisions, and it does not access databases directly. Its job is presentation and interaction — making information visible and letting users do things with it.

Three core technologies power every frontend on the web: HTML (the structure — what elements are on the page), CSS (the presentation — how those elements look), and JavaScript (the behaviour — what happens when users interact). Every website, from the simplest blog to the most complex application, is built on these three.

In plain terms

The frontend is the dining room of a restaurant. It is everything the customer sees and touches: the tables, the menu, the lighting, the decor. The customer never enters the kitchen (the backend) — they only experience what is presented to them in the dining room.

At a glance

How the frontend fits in a web application (click to expand)
graph LR
    U[User] -->|interacts with| FE[Frontend]
    FE -->|sends requests| API[API]
    API -->|returns data| FE
    FE -->|renders| UI[What the user sees]

    subgraph Browser
        FE
        UI
    end

    subgraph Server
        API
    end
Key: The user interacts with the frontend, which runs entirely in the browser. When the frontend needs data, it requests it from the backend through an API. The response comes back as data, and the frontend renders it into the visual interface.

How does the frontend work?

The frontend has three layers, each handled by a different technology. Think of building a house: structure first, then decoration, then wiring.

1. Structure — HTML

HTML (HyperText Markup Language) defines what is on the page. Every element you see — headings, paragraphs, images, buttons, forms — is an HTML element.

<h1>Welcome</h1>
<p>This is a paragraph of text.</p>
<button>Click me</button>

HTML is like the blueprint of a building. It determines what rooms exist and where they are, but says nothing about paint colours or furniture.

Concept to explore

See html for how HTML elements are structured and nested.

2. Presentation — CSS

CSS (Cascading Style Sheets) controls how elements look. Colours, fonts, spacing, layout, animations — all CSS.

h1 {
  color: navy;
  font-size: 2rem;
}
button {
  background: #4a9ede;
  border-radius: 8px;
}

CSS is the interior design — paint, furniture, lighting. The rooms are already there (HTML), but CSS makes them look good.

Concept to explore

See css for how styles are applied, cascaded, and organised.

3. Behaviour — JavaScript

JavaScript controls what happens when users interact. Click a button and a menu appears. Type in a search box and results filter in real time. Submit a form and a confirmation message shows up. That is all JavaScript.

button.addEventListener('click', () => {
  alert('You clicked the button!');
});

JavaScript is the electrical wiring and plumbing. The rooms exist (HTML), they look nice (CSS), but JavaScript makes things actually work — lights turn on, water flows, doors open automatically.

Concept to explore

See javascript for how interactivity is built in the browser.

Key frontend concerns

Beyond the three core technologies, frontend developers manage several cross-cutting concerns:

Concern	What it means	Why it matters
Responsive design	The layout adapts to any screen size	Users visit from phones, tablets, and desktops
Accessibility	Usable by people with disabilities	Screen readers, keyboard navigation, colour contrast
Performance	Pages load and respond quickly	Slow sites lose users — especially on mobile networks
State management	Tracking what the user is doing	Selected filters, form input, navigation history
Internationalisation	Displaying content in multiple languages	Multilingual audiences need localised interfaces

Think of it like...

A physical store. Responsive design is making sure the store works whether you enter through the main door or the side entrance. Accessibility is adding a ramp, clear signage, and braille labels. Performance is making sure the cashier line moves quickly.

The frontend boundary

The frontend has a strict boundary: it cannot do the following:

Access a database directly
Process sensitive data securely (passwords, payments)
Enforce business rules that users must not bypass

Why? Because frontend code runs in the user’s browser, and the user can inspect, modify, or bypass anything running on their own device. Any rule that truly matters must be enforced by the backend, where the user has no access.

Rule of thumb for the boundary

If someone could cheat or cause harm by changing this logic in their browser, it must live on the server, not the frontend.

Why do we use a frontend?

Key reasons

1. User experience. The frontend is the only part of the system the user ever sees. A well-built frontend makes complex systems feel simple and intuitive.

2. Separation from logic. By keeping presentation separate from data and business rules, both sides can evolve independently. Redesigning the interface does not require rewriting the server.

3. Responsiveness. The frontend can react instantly to user actions (highlighting a button, showing a dropdown) without waiting for a server round-trip, making the experience feel fast.

When do we use frontend skills?

When building any user-facing web application — every website has a frontend
When creating interactive interfaces that respond to user input in real time
When designing for multiple devices (phone, tablet, desktop)
When you need to display data fetched from an API in a human-friendly way
When building accessible experiences that work for all users

Rule of thumb

If a human needs to see it or interact with it in a browser, it is a frontend concern.

How can I think about the frontend?

The shop window

The frontend is a shop window display.

HTML is the physical structure: shelves, stands, mannequins

CSS is the styling: lighting, colour scheme, arrangement

JavaScript is the motion: a rotating platform, a screen playing a video, a sensor that changes the display when someone walks past

The shop window shows what the store offers, but the actual inventory, pricing decisions, and stock management happen in the back office (the backend)

A customer can press their face against the glass and see everything in the window, but they cannot reach through and rearrange it — the display is controlled by the store

The dashboard of a car

The frontend is the dashboard and controls of a car.

The speedometer, fuel gauge, and warning lights are the visual display (HTML + CSS) — they show you information

The steering wheel, pedals, and gear stick are the interactive controls (JavaScript) — they let you do things

The engine, transmission, and fuel system are the backend — they do the actual work

You drive the car entirely through the dashboard and controls. You never open the hood while driving. The dashboard translates complex mechanical state into something a human can understand and act on

Concepts to explore next

Concept	What it covers	Status
html	How page structure is defined with elements and attributes	stub
css	How visual styling, layout, and responsive design work	stub
javascript	How interactivity and dynamic behaviour are built	stub
responsive-design	Making layouts work across all screen sizes	stub
accessibility	Building interfaces usable by everyone	stub
state-management	Tracking application state in the browser	stub

Some of these cards don't exist yet

They’ll be created as the knowledge system grows. A broken link is a placeholder for future learning, not an error.

Check your understanding

Test yourself (click to expand)

Explain what the frontend is responsible for and what it is not allowed to do. Why does this boundary exist?

Name the three core technologies of the frontend and describe the role of each one.

Distinguish between what happens on the frontend and what happens on the backend when a user submits a login form.

Interpret this scenario: a web page loads but all the text appears unstyled (plain black text on white, no layout). Which of the three frontend technologies is likely not loading?

Connect the frontend to apis: how does the frontend get the data it needs to display?

Where this concept fits

Position in the knowledge graph
graph TD
    CSM[Client-Server Model] --> FE[Frontend]
    CSM --> BE[Backend]
    CSM --> API[APIs]
    CSM --> DB[Databases]
    FE --> HTML[HTML]
    FE --> CSS[CSS]
    FE --> JS[JavaScript]
    style FE fill:#4a9ede,color:#fff
Related concepts:

backend — the server side that the frontend communicates with; together they form the two halves of a web application

apis — the contract the frontend uses to request data from the backend

separation-of-concerns — the design principle that keeps presentation (frontend) separate from logic (backend)

Yiuno

Explorer

Frontend

Frontend

What is the frontend?

At a glance

How does the frontend work?

1. Structure — HTML

2. Presentation — CSS

3. Behaviour — JavaScript

Key frontend concerns

The frontend boundary

Why do we use a frontend?

When do we use frontend skills?

How can I think about the frontend?

Concepts to explore next

Check your understanding

Where this concept fits

Further reading

Graph View

Table of Contents

Backlinks