Lesson 1 of 4 12 min read
Frontend vs. backend
Learn what runs in the browser, what runs on the server, and why the work is split that way.
In this lesson you will
- Define frontend, backend and full-stack development
- Decide which layer should own a given responsibility
- Name common technologies used on each side
Two sides of one application
Every interactive web application has two main parts:
- The frontend (client side) is everything that runs in the user's browser: the pages, buttons, forms and animations. It is built with HTML, CSS and JavaScript, often using a framework such as React, Angular or Vue.
- The backend (server side) runs on servers you control. It contains the business rules, talks to the database, and decides what each user is allowed to see and do. Popular backend technologies include Java with Spring Boot, JavaScript with Node.js and Express, and Python with Django or FastAPI.
A full-stack developer is comfortable working on both sides and on how they connect.
Layers from top to bottom: Frontend, Backend, Database
An everyday example
Think of ordering food on a delivery app:
| Step | Frontend | Backend |
|---|---|---|
| Browse | Shows the menu, filters and pictures | Sends the current menu and prices |
| Add to cart | Updates the cart badge instantly | Not involved yet |
| Pay | Collects card details in a secure form | Calculates the final total, charges the payment, records the order |
| Track | Shows a progress bar | Stores status updates from the restaurant |
Why not do everything in the browser?
Code in the browser is visible to and changeable by the user. Anyone can open developer tools and edit JavaScript or the data it sends. That leads to an important rule:
The backend also keeps secrets, such as database passwords and payment API keys, away from users, and it is the single place where data from all users comes together.
Choosing the right layer
Ask two questions about any feature:
- Does it need to be trusted? If a user could gain something by changing it, it belongs on the backend.
- Is it about how things look or feel? Layout, animation and instant feedback belong on the frontend.
For example, "show an error if the email field is empty" runs on both: the frontend checks for a fast response, and the backend checks again because it cannot assume the frontend did.
Hands-on exercise
Pick an app you use daily (a bank, a ride-hailing service, a social network). List five features and, for each, write whether it is mainly frontend, mainly backend or both. Explain in one sentence why, using the "does it need to be trusted?" question.
Knowledge check
3 questions • 70% to pass • Practice only, no certificate
Key concepts
- The frontend runs in the browser and handles presentation and interaction.
- The backend runs on servers and owns business rules, data access, security and secrets.
- Never trust the frontend for anything a user could tamper with; the backend must enforce it.
- Full-stack developers understand both sides and how they communicate.