✦ Web Development with Django How an application works together

L3 · Concept 06 · Web Fundamentals

One Project Page.
Several Helpful Roles.

Your Project Hub can look complete in HTML and CSS. Now follow one <code>/projects/</code> request to see why a dynamic application also needs backend logic and saved data.

Learning goalExplain what frontend, backend, and database each do; trace a request for /projects/; and explain why HTML and CSS alone are not enough when project data changes.

01 Learn the roles02 Trace the data logic03 Check your understanding

Trace one real idea

Follow Project Hub from click to project cards

Read each step in order. The request travels toward the backend; data can return from the database; the response travels back to the browser.

1UserClicks the Projects link.
2Browser / frontendSends a request for /projects/.
3BackendReceives the request.
4BackendDecides it needs saved project data.
5DatabaseReturns the saved project data the backend asked for.
6BackendUses that data to prepare a response.
7Browser / frontendReceives the response.
8Browser / frontendRenders project cards from the response.
9UserSees project cards on the page.

Direction matters: the request goes from browser to backend. The backend may obtain data from the database. The response then goes from backend back to the browser.

Data can travel the other way too

When a user creates a project, the same team has a different job. This is a conceptual flow; you will learn forms later.

Enter dataA user enters project information in the frontend.
Send and checkThe backend receives the data and checks what should happen.
SaveThe backend asks the database to store the project.
Show the resultA response returns and the browser shows the result.

Who is responsible for what?

Try to classify the job before reading the answer. The point is to reason about responsibility, not to memorize labels.

Make the project card blue.

Frontend / CSSCSS controls how the page looks.

Decide which projects this user may see.

BackendApplication logic makes this decision.

Remember a project title tomorrow.

DatabasePersistent storage keeps application data.

Show the returned project title on the page.

FrontendThe browser renders the response for the user.

Receive <code>/projects/</code> and decide what data is needed.

BackendIt handles the request and coordinates the next work.

Store 500 project records.

DatabaseIt stores and organizes the saved records.

01 Learn the roles

A dynamic page is a conversation between roles

In Concepts 04 and 05, you wrote HTML and CSS for My Project Hub. The browser can display that work and let a visitor click a link. But when the page must show projects that can be created, changed, or remembered later, several parts must cooperate.

User clicks Projects
        ↓
Browser requests /projects/
        ↓
Backend gets saved project data
        ↓
Browser displays project cards

The frontend is the part of a web application a person directly sees and uses in the browser. HTML gives it structure, CSS gives it presentation, and the browser interprets those files to display navigation, headings, project cards, and links. The browser is the tool that runs frontend code; it is not the frontend itself.

A static page is still useful. If you type three project cards directly into an HTML file, they appear because you wrote them there. But imagine 5, 50, or 5,000 projects—or people creating new projects. You would not want to edit the HTML file by hand every time application data changes.

↳

The question that changes the design: Where should changing application data come from? A dynamic application needs program logic to decide what to show and a place that can keep data available later.

Three parts, three responsibilities

Frontend   → shows and receives interaction
Backend    → handles requests and application decisions
Database   → stores organized application data

These parts work together, but they are not synonyms. A backend can ask a database for data, prepare a response, and send it back. The database stores and manages data; it does not decide the whole application flow.

What the backend does

GET /projects/
        ↓
backend receives request
        ↓
decides it needs project data
        ↓
prepares a response

The backend is program code that runs away from the visitor’s browser, usually on a server. A server is a computer or environment that can receive web requests and run that backend code. Server and backend are related, but they are not the same thing: one is where code can run; the other is the application logic that runs there.

What the database does

Project
  title: "Project Hub"
  description: "Plan and track projects"
  status: "draft"

A Python variable such as projects = [...] exists in memory while a program runs. A database is organized, persistent storage for application data: it can keep a project title, description, and status available later. The backend decides what to do with that data and communicates with the database; the database is not the backend.

Why HTML and CSS are still important

saved project data
        ↓
backend prepares response
        ↓
HTML and CSS help the browser show it

HTML and CSS are not a permanent application database in this mental model. They help the frontend present a result. When data changes, backend logic can request the current data and prepare a new response for the browser to display.

↳

Next: Meet Django You now know what backend code is responsible for: receiving requests, making application decisions, working with saved data when needed, and returning responses. Next, meet Django and see how Python can help you build that backend.

A reliable way to trace a web application

Start with the user actionName what the visitor clicked or entered. That tells you what the browser needs to ask for.
Follow the request to the backendThe browser sends the request. Backend code receives it and decides what the application needs next.
Ask where the data livesIf the application needs saved project data, the backend can ask the database for it.
Follow the response backThe backend prepares a response, and the browser/frontend uses it to show a result to the user.

Keep these distinctions clear

The browser is the backendThe browser runs frontend code for the visitor. Backend code runs away from that browser and handles application requests.
The backend is the databaseThe backend makes application decisions and communicates with data storage. The database stores and manages the data.
Server and backend mean exactly the same thingA server is a place that can receive requests and run backend code. Backend is the application code and logic itself.
HTML and CSS remember changing projectsHTML and CSS describe and style a page. A dynamic application needs a data source that can keep changing records available later.
The database decides the entire flowThe backend decides what the application should do, including when it needs to ask the database for data.
A request and response go in the same directionIn this basic model, a request travels toward the backend and a response travels back to the browser.

02 Trace the data logic

Python Playground

Loading Python runtime…

This is a small <strong>backend-like data decision</strong>, not a real web server or database connection. Run it, change one status, and see which project names would be prepared for a project list.

OutputWaiting for Python

The browser runtime is loading. You can still edit the example code.

Pyodide runs Python in a browser Web Worker. It is stopped and restarted if code keeps running. Browser execution is not a complete security boundary; do not enter secrets or rely on it for untrusted code isolation.

03 Check your understanding

A user opens <code>/projects/</code>. The backend receives the request and needs saved project data. What should happen next?

Choose the next responsibility in the Project Hub flow.

GET /projects/

backend needs saved project data

Your learning mentor

Create a free account or sign in to get AI guidance while you learn.

Create free account Log in

04 Understanding Check

Create a free account or sign in to receive AI feedback and save your learning progress.