Introduction to Web Development (Backend)

Active learning works best here because backend concepts are abstract and easily misunderstood. Students grasp server-side ideas better when they physically and collaboratively trace how data moves through systems rather than just hearing explanations.

• 10th Grade
• Computer Science
• 3 activities
• 20 min–30 min

Learning Objectives

1. Explain the fundamental role of a backend server in processing client requests and delivering dynamic content.
2. Analyze the interaction patterns between a web application and a database, including data retrieval and storage.
3. Differentiate between the execution environments and primary functions of client-side and server-side scripting languages.
4. Compare at least two common backend server-side scripting languages based on their typical use cases and syntax.
5. Design a simple data flow diagram illustrating a user request from a web browser to a backend server and database.

Flipped Classroom

⏱ 30 min·Whole Class

Role-Play: The Full Request Journey

Assign students to roles: browser client, web server, application logic, and database. The browser student sends an HTTP request card (e.g., 'GET /user/42'). The server receives it, the application logic determines what query to run, the database student looks up the record, and the result flows back through the chain. The class introduces variations like a POST request creating a new record.

Prepare & details

Explain the role of a backend server in a web application.

Facilitation Tip: During Role-Play: The Full Request Journey, assign each student a specific role (client, server, database) and provide props like printed requests or database records to make the journey tangible.

Setup: Standard classroom, flexible for group activities during class

Materials: Pre-class content (video/reading with guiding questions), Readiness check or entrance ticket, In-class application activity, Reflection journal

• Understand
• Apply
• Analyze
• Self-Management
• Self-Awareness

Inquiry Circle

⏱ 25 min·Small Groups

Inquiry Circle: Mapping a Web Application

Groups receive a description of a simple web app (e.g., a school grade tracker) and must draw a system diagram showing which parts run in the browser (frontend) and which run on a server (backend), including at least one database interaction. Groups compare diagrams and identify where their models differ in how they split client and server responsibilities.

Prepare & details

Analyze how a web application interacts with a database.

Facilitation Tip: While mapping a web application collaboratively, move between groups to ask guiding questions that push students to justify each component’s purpose in the system.

Setup: Groups at tables with access to source materials

Materials: Source material collection, Inquiry cycle worksheet, Question generation protocol, Findings presentation template

• Analyze
• Evaluate
• Create
• Self-Management
• Self-Awareness

Think-Pair-Share

⏱ 20 min·Pairs

Think-Pair-Share: Client-Side or Server-Side?

Give students a list of eight operations: validating email format, verifying a password hash, rendering a dropdown menu, checking if a username is already taken, calculating a cart total, storing a purchase record, displaying a real-time stock ticker, and generating a PDF report. Students individually classify each as client-side or server-side, compare with a partner, and discuss the edge cases where either could apply.

Prepare & details

Differentiate between client-side and server-side scripting.

Facilitation Tip: In Think-Pair-Share, require pairs to write their decisions on chart paper and present reasoning aloud to surface hidden assumptions before whole-class discussion.

Setup: Standard classroom seating; students turn to a neighbor

Materials: Discussion prompt (projected or printed), Optional: recording sheet for pairs

• Understand
• Apply
• Analyze
• Self-Awareness
• Relationship Skills

Teaching This Topic

Teachers should avoid starting with abstract definitions of ‘backend’ or ‘server.’ Instead, begin with a concrete task students already understand, like submitting a form, then peel back the layers to reveal what happens on the server. Research shows that students learn these concepts best when they first see the system as a whole before dissecting parts, so begin with the Role-Play activity to establish context before moving to technical details.

What to Expect

By the end of these activities, students will clearly distinguish frontend from backend roles, explain where backend code runs, and connect server logic to real-world applications like form submissions and user logins.

Watch Out for These Misconceptions

Common Misconception

During Role-Play: The Full Request Journey, watch for students who assume backend code runs in the browser because JavaScript is visible in browser tools.

What to Teach Instead

Use the role-play props to physically separate the client’s machine from the server’s ‘machine’ (e.g., a separate table or zone). Have students observe that only the server handles the database and business logic, while the client only displays results.

Common Misconception

During Collaborative Investigation: Mapping a Web Application, watch for students who label the database as the only backend component.

What to Teach Instead

Guide students to add the web server and application logic layers to their maps. Use the misconception as a discussion point: ask students to explain what happens between the HTTP request and the database query.

Common Misconception

During Think-Pair-Share: Client-Side or Server-Side?, watch for students who assume frontend and backend codebases are completely separate and never interact.

What to Teach Instead

Bring their attention to the API contracts and data formats discussed in the activity. Ask them to consider how a change in the backend response would affect the frontend, using the examples from their discussion.

Assessment Ideas

Exit Ticket

After Role-Play: The Full Request Journey, ask students to write one sentence explaining why a backend server is necessary for a dynamic website and an example of a task the browser cannot do directly.

Discussion Prompt

During Collaborative Investigation: Mapping a Web Application, pose the question: ‘Imagine you are ordering a pizza online. Describe the journey of your order from clicking ‘submit’ to receiving a confirmation. Which parts happen on the client, and which parts require the backend server and database?’

Quick Check

After Think-Pair-Share: Client-Side or Server-Side?, present students with two code snippets and ask them to identify which is client-side and which is server-side, explaining their reasoning based on where the code would execute.

Extensions & Scaffolding

• Challenge: Ask students to design a simple API endpoint in Node.js or Python that returns mock user data, with clear documentation of the expected request and response format.
• Scaffolding: Provide students with a partially completed system map that includes labeled blanks for the server, database, and client, asking them to fill in missing parts together in small groups.
• Deeper exploration: Have students research and compare two server-side frameworks (e.g., Express.js vs. Django) and present a 2-minute pitch on which one they would choose for a given project and why.

Key Vocabulary

Backend Server	A computer that runs server-side code, processes requests from clients (like web browsers), and manages data storage and retrieval.
Server-Side Scripting	Code that runs on the backend server to generate dynamic web content, interact with databases, and handle application logic.
Database Interaction	The process of communicating with a database to store, retrieve, update, or delete data needed by the web application.
Client-Server Model	An architecture where a client (e.g., web browser) requests services from a server (e.g., web server), which then processes the request and sends back a response.
HTTP Request/Response	The protocol used for communication between clients and servers on the web, where the client sends a request and the server sends back a response.