Chapter 4 of 8
One of the most important distinctions in web development is frontend vs backend. These are two completely different jobs, requiring different skills, even though they work together to create the same product.
ANALOGY
Real-world analogy: A restaurant. Think of a restaurant. The frontend is everything the customer experiences β the dΓ©cor, the menu, the tables, the way the food is presented on the plate. The backend is everything in the kitchen β the chef, the ingredients, the recipes, the supply chain. Customers never see the kitchen, but without it, there's no food.
| Frontend | Backend | |
|---|---|---|
| What it is | What users see and interact with | The system running behind the scenes |
| Runs where | In the user's browser | On a server (a powerful computer in a data centre) |
| Languages | HTML, CSS, JavaScript | JavaScript (Node.js), Python, Java, Go, etc. |
| Frameworks | React, Vue, Angular, Next.js | Express, Django, Flask, Spring |
| Deals with | Layout, design, interactions, animations | Databases, authentication, logic, APIs |
| Example task | A button that submits a login form | Checking if the password is correct and responding |
An API (Application Programming Interface) is the communication bridge between frontend and backend. The frontend says 'I need the user's profile data' β the API receives that request, fetches it from the database, and sends it back. Think of an API as a waiter β you tell the waiter what you want, the waiter tells the kitchen, and the kitchen sends back the food.
A database is an organised system for storing data permanently. When you create an account on Instagram, your username, password, and profile info are stored in a database. Every time you log in, the backend checks that database to verify who you are. Common databases include PostgreSQL, MySQL, MongoDB, and SQLite.
NOTE
Full-Stack Development. A full-stack developer works on both frontend and backend. This doesn't mean they know everything β it means they're comfortable working across the full web application stack. Many teams have dedicated frontend and backend specialists, but full-stack developers are highly versatile.