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.

• Year 7
• Computing
• 4 activities
• 25 min–45 min

Learning Objectives

1. Explain the semantic role of HTML elements in structuring web content.
2. Design a basic web page incorporating headings, paragraphs, lists, and images using HTML.
3. Compare and contrast the functions of HTML for structure and CSS for presentation.
4. Apply CSS selectors and properties to modify the appearance of HTML elements.
5. Create a simple, styled web page by combining HTML and CSS.

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.

Prepare & details

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.

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

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.

Prepare & details

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.

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

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.

Prepare & details

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.

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

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.

Prepare & details

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.

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

Teaching This Topic

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.

What to Expect

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

Common Misconception

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

What to Teach Instead

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.

Common Misconception

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

What to Teach Instead

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.

Common Misconception

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

What to Teach Instead

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.

Assessment Ideas

Exit Ticket

After Pair Programming, give each student a half-sheet with a snippet of HTML and a matching CSS rule. Ask them to sketch the rendered page and circle the tag affected by the CSS.

Quick Check

During the Live Code-Along, pause after the third iteration and ask students to shout out one HTML tag they used for structure and one CSS property they applied for style.

Peer Assessment

After the Tag Builder Challenge, have students exchange their finished pages. Each pair checks for a heading, a paragraph, and at least one style change, then writes one specific suggestion for improvement on the back of the sheet.

Extensions & Scaffolding

• Challenge: Add a responsive image that changes size on mobile using max-width: 100% and test it in browser dev tools.
• Scaffolding: Provide a starter HTML file with every tag pre-typed but missing attributes; students fill in src, alt, href, and class values.
• Deeper exploration: Create a mini-project where students design a three-page website about a hobby using semantic HTML5 tags and external CSS sheets.

Key Vocabulary

HTML	Stands for HyperText Markup Language. It is the standard language used to create and structure content on the World Wide Web.
CSS	Stands for Cascading Style Sheets. It is a language used to describe the presentation and styling of a document written in HTML.
Tag	A specific code word, usually enclosed in angle brackets (e.g., <p>), that tells a web browser how to display content or structure a page.
Selector	In CSS, a selector is used to find, select, and manipulate the HTML element(s) you want to style.
Property	In CSS, a property is a characteristic of an element that you want to change, such as 'color' or 'font-size'.
Element	An HTML structure that typically consists of a start tag, content, and an end tag (e.g., <p>This is a paragraph.</p>).