Web Development: The Big Picture

Build the mental model

Web development is not just "writing HTML, CSS, and JavaScript." That's only one visible slice. It actually means building applications and experiences that people access through web technologies.

A search engine, a food-delivery app, a banking dashboard, a multiplayer game running inside a browser — all of these are products of web development. Behind each one, distinct areas work together.

• Frontend — everything the user sees and touches directly: layout, styling, interactivity
• Backend — server-side logic: processing requests, applying rules, talking to a database
• Full-stack — working across both layers, not mastering every tool inside them
• Infrastructure/Deployment — getting code running on a real server users can reach
• Database — where data is stored and retrieved
• API — the contract that lets frontend, backend, and outside services exchange data

The Master Flow below — User to Browser to Domain to DNS to CDN/Server to Frontend/Backend to API to Database to Response to Browser Renders Page — is the one diagram this entire course keeps returning to.

Web Development

Building applications and experiences that people access through web technologies — spanning Frontend, Backend, Database, API, and Deployment, not just HTML/CSS/JS.

Full-stack

Being able to work across both the frontend and backend layers — it doesn't mean mastering every tool or technology in either one.

THE MASTER FLOW
---------------
USER
  |
  v
BROWSER
  |
  v
DOMAIN  (e.g. example.com)
  |
  v
DNS  (resolves domain -> IP address)
  |
  v
CDN / SERVER
  |
  v
FRONTEND / BACKEND
  |
  v
API  (contract for exchanging data)
  |
  v
DATABASE
  |
  v
RESPONSE  (travels back up the chain)
  |
  v
BROWSER RENDERS PAGE

Connect it to a real scenario

The code example classifies a web application by which areas it has. It takes an object with five boolean fields — hasFrontend, hasBackend, hasDatabase, hasAPI, hasDeployment.

This kind of classification is genuinely useful when scoping a real project — figuring out which areas are actually needed before reaching for a deeper course.

• Web development is much broader than writing HTML, CSS, and JavaScript
• Frontend, Backend, Full-stack, Infrastructure, Database, and API are the core areas
• The Master Flow diagram is the recurring mental model for this entire course

Try the working example

function classifyApp(app) {
  const { hasFrontend, hasBackend, hasDatabase, hasAPI } = app;

  if (hasFrontend && !hasBackend && !hasDatabase && !hasAPI) {
    return "static site";
  }
  if (hasFrontend && hasBackend) {
    return "full-stack app";
  }
  if (hasFrontend && !hasBackend) {
    return "frontend-only app";
  }
  return "backend-only service";
}

const marketingPage = {
  hasFrontend: true,
  hasBackend: false,
  hasDatabase: false,
  hasAPI: false,
  hasDeployment: true,
};

const weatherWidget = {
  hasFrontend: true,
  hasBackend: false,
  hasDatabase: false,
  hasAPI: true,
  hasDeployment: true,
};

const onlineStore = {
  hasFrontend: true,
  hasBackend: true,
  hasDatabase: true,
  hasAPI: true,
  hasDeployment: true,
};

console.log("Marketing page:", classifyApp(marketingPage));
console.log("Weather widget:", classifyApp(weatherWidget));
console.log("Online store:", classifyApp(onlineStore));

Marketing page: static site
Weather widget: frontend-only app
Online store: full-stack app

MDN Web Docs — Web development learning area — How the Web Works