# How the Web Works — Frontend, Backend, Database and Your Learning Path

Source: https://skills101.in/learn/web-development/how-the-web-works — Skills101 free tutorial (Web Development). Updated 2026-11-09.

Every website you use — Skills101, IRCTC, Instagram — is made of the same three parts.

![Frontend (HTML, CSS, JavaScript, React) runs in the browser; the backend (Node/Express, Java Spring, Python Django) runs on a server; the database (MySQL, PostgreSQL, MongoDB) stores data](https://skills101.in/learn-img/web-development/web-stack.svg)

## 1. Client and server

- Your **browser** is the **client**. It asks for things.
- A **server** is a computer (in a data centre) that answers.
- They talk using **HTTP(S)** — the browser sends a **request**, the server sends a **response** (HTML, JSON, images).

(See the [Computer Networks lesson](https://skills101.in/learn/computer-networks/what-happens-when-you-type-a-url) for the full journey.)

## 2. The three parts

| Part | Job | Technologies |
|---|---|---|
| **Frontend** | what users see and click | HTML (structure), CSS (style), JavaScript (behaviour), React/Angular/Vue |
| **Backend** | logic, security, talking to the database | Node.js + Express, Java + Spring Boot, Python + Django/Flask, PHP |
| **Database** | stores data permanently | MySQL, PostgreSQL, MongoDB |

A **full-stack** developer can work on all three. Most Indian startups hire "full-stack" or "MERN" (MongoDB, Express, React, Node) freshers.

## 3. Static vs dynamic websites

- **Static** — the same HTML for everyone (a portfolio, a landing page). Cheap and fast; can be hosted free (GitHub Pages, Netlify).
- **Dynamic** — content depends on the user and data (your dashboard, feeds, shopping cart). Needs a backend and database.

## 4. Tools to install

1. **VS Code** — the code editor.
2. **A modern browser** (Chrome / Edge) and its **DevTools** (press F12): inspect HTML, see CSS, read console errors, watch network requests.
3. **Node.js** — runs JavaScript outside the browser, and gives you `npm` to install packages.
4. **Git + GitHub** — save versions and show your work (see our [Git subject](https://skills101.in/learn/git)).

## 5. A realistic learning path (about 4–6 months)

| Step | Learn | Build |
|---|---|---|
| 1 | HTML + CSS | a personal portfolio page |
| 2 | Responsive CSS (flexbox, grid) | make it look great on phones |
| 3 | JavaScript + DOM | a to-do list, a quiz app |
| 4 | Async JS + APIs | a weather app using a free API |
| 5 | React | a multi-page app with components |
| 6 | Node + Express + a database | a REST API with login |
| 7 | Deploy | put it online and on your résumé |

> Projects matter more than certificates. Three working, deployed projects with clean GitHub code will get you more interviews than ten course certificates.

## Common mistakes

- Jumping to React before understanding plain JavaScript.
- Only watching tutorials — build something every week.
- Never opening DevTools; it's your best debugging tool.

## Quick recap

- Browser (client) ↔ HTTP ↔ server; responses are HTML or JSON.
- Frontend (HTML, CSS, JS) · backend (APIs, logic) · database (data).
- Install VS Code, Node.js, Git; live in DevTools.
- Learn by building: portfolio → JS apps → React → API → deploy.


Practice quiz and free certificate: https://skills101.in/learn/web-development/how-the-web-works