Computer Science · 10th Grade

Active learning ideas

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.

• Common Core State Standards
• CSTA: 3A-AP-22

• 20–30 min
• Pairs → Whole Class
• 3 activities

Activity 01

• 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.

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.

What to look for

On an index card, students should write: 1) One sentence explaining why a backend server is necessary for a dynamic website. 2) An example of a task performed by the backend that the user's browser cannot do directly.

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

Activity 02

• 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.

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.

What to look for

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?'

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

Activity 03

• 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.

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.

What to look for

Present students with two code snippets, one clearly client-side (e.g., JavaScript manipulating DOM elements) and one server-side (e.g., Python code querying a database). Ask them to identify which is which and explain their reasoning based on where the code would execute.

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

A few notes on teaching this unit

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.

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

• 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.

  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.

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

  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.

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

  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.

---

Methods used in this brief

• Flipped Classroom
• Inquiry Circle
• Think-Pair-Share