Computer Science · Grade 11

Active learning ideas

Web Technologies: HTML, CSS, JavaScript Basics

Active learning works because students retain web technologies best when they build real artifacts, not just read about them. By writing HTML, CSS, and JavaScript themselves, students confront misconceptions directly and see the immediate impact of their code choices. This hands-on approach transforms abstract syntax into tangible results they can debug and improve.

• Ontario Curriculum Expectations
• Ontario Curriculum: Computer Studies 2008, Grade 11 (ICS3U), B3.2: Apply a variety of problem-solving strategies to solve programming problems (e.g., divide and conquer, working backwards, prototyping, following a model).
• Ontario Curriculum: Computer Studies 2008, Grade 11 (ICS3U), B3.3: Design a plan to solve a problem (e.g., identify the problem, identify the data, determine the required output, identify the processing required).
• Ontario Curriculum: Computer Studies 2008, Grade 11 (ICS3U), B3.4: Design algorithms to solve problems, using tools and techniques such as pseudocode, flow charts, and logic charts.

• 25–50 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Flipped Classroom
• 30 min · Pairs

Pair Programming: Basic HTML Structure

Pairs create a personal profile page using HTML tags for headings, lists, and images. They validate structure with browser previews and peer checklists. Extend by linking to a second page.

Explain the distinct roles of HTML, CSS, and JavaScript in building a website.

Facilitation Tip

During Pair Programming: Basic HTML Structure, circulate and ask each pair to explain which tags best represent their content, pushing them beyond generic div use.

What to look for

Provide students with a small code snippet (e.g., a button with an ID). Ask them to write: 1. The HTML tag needed to create the button. 2. A CSS rule to change its background color to blue. 3. A JavaScript line to log a message to the console when the button is clicked.

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

Activity 02

• Flipped Classroom
• 45 min · Small Groups

Small Groups: CSS Layout Challenge

Groups style a provided HTML template with CSS for flexbox layouts, colors, and fonts. They adapt for mobile views using media queries. Share screenshots in a class gallery.

Design a simple web page layout using HTML and CSS.

Facilitation Tip

For the CSS Layout Challenge, provide a starter stylesheet with comments like /* Add your layout here */ to guide focus without giving solutions.

What to look for

Present students with a simple web page screenshot. Ask them to identify: 1. One element that is likely styled by CSS. 2. One element that could be made interactive with JavaScript. 3. The primary language used to define the page's content.

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

Activity 03

• Flipped Classroom
• 25 min · Individual

Individual: JavaScript Button Toggle

Students add a JavaScript function to toggle a div's visibility on button click. Test edge cases like multiple clicks. Submit code via shared platform for feedback.

Construct a basic interactive element on a web page using JavaScript.

Facilitation Tip

In the JavaScript Button Toggle task, have students first sketch the expected behavior on paper before coding to clarify interactivity goals.

What to look for

Students build a simple webpage with a header, paragraph, and a button. They then swap their work with a partner. Each partner reviews: Is the HTML semantically correct? Does the CSS apply at least two distinct styles? Is there a basic JavaScript interaction (e.g., console log on click)? Partners provide one specific suggestion for improvement.

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

Activity 04

• Flipped Classroom
• 50 min · Whole Class

Whole Class: Full Page Build and Demo

Class collaboratively builds a landing page integrating all three languages. Volunteers demo features; discuss improvements as a group.

Explain the distinct roles of HTML, CSS, and JavaScript in building a website.

What to look for

Provide students with a small code snippet (e.g., a button with an ID). Ask them to write: 1. The HTML tag needed to create the button. 2. A CSS rule to change its background color to blue. 3. A JavaScript line to log a message to the console when the button is clicked.

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

A few notes on teaching this unit

Teachers should model layering explicitly by writing a simple page live on the projector, switching between HTML, CSS, and JS tabs to show how changes in one affect the others. Avoid teaching languages in isolation; instead, connect them through small, iterative edits. Research shows that interleaving the three languages in short bursts improves transfer compared to teaching them in separate units.

Successful learning looks like students confidently separating HTML, CSS, and JavaScript in their code, explaining each language’s purpose, and debugging simple errors across layers. By the end of the activities, they should articulate why separation matters and be able to integrate the three technologies smoothly in a small project.

---

Watch Out for These Misconceptions

• During Pair Programming: Basic HTML Structure, watch for students adding inline styles like <p style="color:red;"> to control appearance.

  Prompt them to move those styles to the CSS file and refactor the HTML to use a class, explaining that this keeps styling separate and makes updates easier.

• During JavaScript Button Toggle, watch for students writing JavaScript that attempts to create the button itself instead of responding to it.

  Ask them to trace the button’s ID in the HTML and confirm it exists before writing event handlers, reinforcing that JavaScript manipulates existing elements.

• During CSS Layout Challenge, watch for students using JavaScript to set static background colors the same way CSS does.

  Remind them to use CSS for these properties first, then open the console to show that JavaScript can only override styles that exist in the DOM, not declare new ones.

---

Methods used in this brief

• Flipped Classroom