Computer Science · 10th Grade

Active learning ideas

Introduction to Web Development (Frontend)

Active learning works for this topic because students need to see the immediate effects of HTML, CSS, and JavaScript working together. Hands-on building helps them grasp how these layers interact, while collaborative tasks build shared understanding and troubleshooting skills they will need when things don’t work as expected.

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

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

Activity 01

• Project-Based Learning
• 45 min · Small Groups

Collaborative Build: The Three-Layer Webpage

Groups of three each take one responsibility: one student writes only the HTML structure (no styling), another adds only CSS (no HTML changes), and the third adds only JavaScript interactivity. Groups build a simple profile card using this division of labor, then debrief on how the separation affected their workflow and what happened when roles overlapped.

Design a basic webpage structure using HTML.

Facilitation Tip

During Collaborative Build, assign clear roles so students experience both the structure and styling layers firsthand before combining them.

What to look for

Present students with a simple HTML snippet and a CSS rule. Ask them to predict the visual output in a browser. Then, show them the actual output and ask them to explain any discrepancies, focusing on selector specificity or inheritance.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 02

• Think-Pair-Share
• 20 min · Pairs

Think-Pair-Share: What Broke and Why?

Show students a webpage where a button has wrong text, wrong color, and clicks do nothing. Students individually identify which technology (HTML, CSS, or JavaScript) is responsible for each problem. Pairs compare, then the class opens browser developer tools to confirm by inspecting the relevant code.

Explain how CSS is used to style web content.

Facilitation Tip

During Think-Pair-Share, provide broken code samples that mix HTML, CSS, and JavaScript to focus attention on debugging across layers.

What to look for

Provide students with three code snippets: one HTML, one CSS, and one JavaScript. Ask them to label each snippet with its primary role (structure, style, or behavior) and write one sentence explaining why they chose that label.

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

Activity 03

• Gallery Walk
• 30 min · Small Groups

Gallery Walk: Reverse Engineering Real Sites

Post printed screenshots of five websites ranging from minimal to complex. Groups rotate through and annotate each screenshot with colored sticky notes: one color for HTML elements they can identify, one for CSS styling choices, one for likely JavaScript behaviors. The debrief focuses on how complexity scales across the three layers.

Compare the roles of HTML, CSS, and JavaScript in web development.

Facilitation Tip

During Gallery Walk, post a simple three-layer webpage and have students annotate which part of the code controls each visual element.

What to look for

Students build a small, static webpage with a partner, dividing tasks for HTML structure and CSS styling. After completion, they swap pages and provide feedback on the other pair's HTML semantics and CSS organization, using a simple checklist.

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

A few notes on teaching this unit

Experienced teachers approach this topic by starting with small, visible changes so students see cause and effect immediately. They avoid overwhelming students with too many new concepts at once, and they intentionally break code to teach debugging. Research shows that students retain layered concepts better when they experience each layer separately before integrating them.

Successful learning looks like students who can explain the purpose of each layer, identify which code belongs to which layer, and troubleshoot when one layer interferes with another. They should also feel comfortable discussing why separation of concerns matters in real projects.

---

Watch Out for These Misconceptions

• During Collaborative Build, watch for students who assume HTML can control appearance or JavaScript can define structure.

  Have pairs present their final page and point to the specific code line that controls each visual element, then ask the class to identify whether that line belongs to HTML, CSS, or JavaScript.

• During Think-Pair-Share, watch for students who believe CSS can fully replace JavaScript for interactive behavior.

  Provide a broken code sample that uses CSS to try to validate a form and ask students to explain why the validation fails, then show them the correct JavaScript version.

• During Gallery Walk, watch for students who think inline CSS is an acceptable long-term practice.

  Ask students to examine two versions of the same page, one with inline styles and one with external CSS, and note differences in readability and maintainability before discussing best practices.

---

Methods used in this brief

• Project-Based Learning
• Think-Pair-Share
• Gallery Walk