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.

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

Learning Objectives

1. Design a basic webpage structure using semantic HTML elements.
2. Apply CSS rules to control the visual presentation of HTML content, including layout and typography.
3. Compare and contrast the distinct roles of HTML, CSS, and JavaScript in building interactive web applications.
4. Identify the purpose of each technology (HTML, CSS, JavaScript) when troubleshooting common web page issues.

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.

Prepare & details

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.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

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

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.

Prepare & details

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.

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

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.

Prepare & details

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.

Setup: Wall space or tables arranged around room perimeter

Materials: Large paper/poster boards, Markers, Sticky notes for feedback

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

Teaching This Topic

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.

What to Expect

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

Common Misconception

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

What to Teach Instead

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.

Common Misconception

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

What to Teach Instead

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.

Common Misconception

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

What to Teach Instead

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.

Assessment Ideas

Quick Check

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

Exit Ticket

After Collaborative Build, provide students with three code snippets: one HTML, one CSS, and one JavaScript. Ask them to label each snippet with its primary role and write one sentence explaining why they chose that label.

Peer Assessment

During Collaborative Build, have students swap their partially completed pages with another pair and provide feedback using a checklist focused on HTML semantics and CSS organization before finalizing their work.

Extensions & Scaffolding

• Challenge students who finish early to add a JavaScript event listener that changes the page background color when a button is clicked.
• Scaffolding for students who struggle: provide pre-labeled snippets of HTML, CSS, and JavaScript and ask them to match each snippet to its correct layer.
• Deeper exploration: have students research a real website and sketch a diagram showing how its visual features map to HTML, CSS, and JavaScript layers.

Key Vocabulary

HTML element	A fundamental building block of an HTML document, consisting of a start tag, content, and an end tag, used to structure content.
CSS selector	A pattern used to select the HTML element(s) you want to style. Examples include element names, classes, and IDs.
DOM	The Document Object Model represents the HTML document as a tree-like structure, allowing JavaScript to access and manipulate its content and style.
semantic HTML	Using HTML elements according to their intended meaning (e.g., `<nav>` for navigation, `<article>` for content) to improve accessibility and SEO.