Computing · Year 7

Active learning ideas

Web Technologies: HTML and CSS Basics

Active learning works for this topic because students retain structural and stylistic concepts better when they see immediate results, debug errors in real time, and collaborate on shared outputs. Writing code by hand while talking through decisions cements both syntax and semantics far more than passive reading or lectures.

• National Curriculum Attainment Targets
• KS3: Computing - Computer Networks
• KS3: Computing - Programming and Development

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

Activity 01

• Project-Based Learning
• 40 min · Pairs

Pair Programming: Personal Profile Page

Pairs open a browser-based editor like CodePen. One partner writes HTML for heading, paragraph, unordered list of hobbies, and image; the other reviews structure before switching. Together, they add inline CSS for text color and background. Pairs present pages to class.

Explain the role of HTML in structuring web content.

Facilitation Tip

During Pair Programming, walk around with printed tag cheat sheets so students can reference syntax without losing momentum in their conversation.

What to look for

Provide students with a short HTML code snippet and a corresponding CSS rule. Ask them to write on an index card: 1. What will this HTML code display on a webpage? 2. How will the CSS rule change its appearance?

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

Activity 02

• Project-Based Learning
• 30 min · Small Groups

Small Groups: CSS Styling Relay

Provide groups with plain HTML for a school event poster. Each member adds one CSS rule: first colours headings, second styles body font, third adjusts spacing, fourth adds a border. Groups test in browser, refine collaboratively, then vote on best designs.

Design a simple web page using basic HTML tags.

Facilitation Tip

In the CSS Styling Relay, set a 90-second timer for each group’s turn so they focus on testing one property at a time before passing the file.

What to look for

Display a simple webpage on the projector. Ask students to identify specific HTML tags used for structure (e.g., heading, paragraph) and specific CSS properties used for styling (e.g., color, font size). Call on students to answer.

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

Activity 03

• Project-Based Learning
• 25 min · Individual

Individual: Tag Builder Challenge

Students start with a template HTML file. They add and nest five specified tags step-by-step, saving and viewing changes after each. Extend by writing custom CSS for a themed page like 'My Favourites'. Submit screenshots of progress.

Compare the function of HTML and CSS in web development.

Facilitation Tip

In the Tag Builder Challenge, require students to add comments above each code block explaining its purpose before moving to the next step.

What to look for

Students exchange their simple HTML/CSS pages. Ask them to check: 1. Is there a clear heading and at least one paragraph? 2. Is the text color or background color changed using CSS? They should provide one specific suggestion for improvement to their partner.

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

Activity 04

• Project-Based Learning
• 45 min · Whole Class

Whole Class: Live Code-Along

Project your screen in a shared editor. Build a simple navigation page with teacher guidance on HTML first, then CSS. Pause for students to replicate independently on devices. Discuss variations as a class before independent tweaks.

Explain the role of HTML in structuring web content.

Facilitation Tip

For the Live Code-Along, pause after every three lines of code and ask a volunteer to predict what will appear on screen.

What to look for

Provide students with a short HTML code snippet and a corresponding CSS rule. Ask them to write on an index card: 1. What will this HTML code display on a webpage? 2. How will the CSS rule change its appearance?

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

A few notes on teaching this unit

Teach HTML and CSS by alternating concrete examples with guided abstractions. Start with a tiny webpage that only uses headings and paragraphs, then ask students to predict what will break if you remove a closing tag. Move to CSS by showing how changing one property cascades through the entire page, linking visual results to code changes. Research shows that spaced practice with immediate feedback—like live browser refreshing—builds stronger mental models than long explanations up front.

Successful learning looks like students confidently writing clean HTML tags for structure and applying CSS properties to change appearance predictably. You’ll see pairs debugging together, groups testing styles step-by-step, and individuals explaining why nesting matters. By the end, every student can explain the separation between content and design.

---

Watch Out for These Misconceptions

• During Pair Programming, watch for students mixing style rules inside HTML tags like <p style='color:red'>.

  Pause the pair and ask them to open the external CSS file you modeled earlier, then rewrite the rule using a class selector. Compare the two versions side-by-side in the browser to show maintainability gains.

• During CSS Styling Relay, watch for groups closing tags incorrectly or nesting elements out of order.

  Display the broken output on the projector and ask the group to trace each tag’s opening and closing pair using colored highlighters on a printed copy of their code.

• During Tag Builder Challenge, watch for students writing CSS inside the HTML body or using inline styles.

  Have them open the starter HTML file that already contains a <style> block in the head section. Redirect them to add new rules there and remove any inline styles they used.

---

Methods used in this brief

• Project-Based Learning