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.

• Grade 11
• Computer Science
• 4 activities
• 25 min–50 min

Learning Objectives

1. Explain the distinct roles of HTML, CSS, and JavaScript in structuring, styling, and adding interactivity to web pages.
2. Design a basic web page layout using semantic HTML tags and CSS for element positioning and visual presentation.
3. Construct a simple interactive element, such as a button click event or a form validation, using JavaScript.
4. Analyze the relationship between HTML, CSS, and JavaScript in creating a functional user interface.
5. Compare different CSS selectors and JavaScript event handlers for achieving specific web page behaviors.

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.

Prepare & details

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.

Setup: Standard classroom, flexible for group activities during class

Materials: Pre-class content (video/reading with guiding questions), Readiness check or entrance ticket, In-class application activity, Reflection journal

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

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.

Prepare & details

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.

Setup: Standard classroom, flexible for group activities during class

Materials: Pre-class content (video/reading with guiding questions), Readiness check or entrance ticket, In-class application activity, Reflection journal

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

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.

Prepare & details

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.

Setup: Standard classroom, flexible for group activities during class

Materials: Pre-class content (video/reading with guiding questions), Readiness check or entrance ticket, In-class application activity, Reflection journal

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

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.

Prepare & details

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

Setup: Standard classroom, flexible for group activities during class

Materials: Pre-class content (video/reading with guiding questions), Readiness check or entrance ticket, In-class application activity, Reflection journal

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

Teaching This Topic

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.

What to Expect

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

Common Misconception

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

What to Teach Instead

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.

Common Misconception

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

What to Teach Instead

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.

Common Misconception

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

What to Teach Instead

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.

Assessment Ideas

Exit Ticket

After Pair Programming: Basic HTML Structure, provide a small code snippet with a paragraph tag. Ask students to write the corresponding CSS rule to center the text and the JavaScript line to change its content when clicked.

Quick Check

After CSS Layout Challenge, display a screenshot of a styled card with a header, image, and button. Ask students to identify which element was likely styled with CSS and which could be made interactive with JavaScript.

Peer Assessment

During Full Page Build and Demo, have students swap their simple webpage with a partner. Each partner reviews the HTML for semantic tags, checks that CSS applies at least two distinct styles, and verifies a basic JavaScript interaction logs to the console.

Extensions & Scaffolding

• Challenge: Ask students to add a second interactive element (e.g., a dropdown) that changes the first element’s style dynamically.
• Scaffolding: Provide a partially completed CSS file with selectors already written but missing properties, so students focus on values instead of structure.
• Deeper exploration: Introduce CSS variables for the button styles and ask students to modify them via JavaScript to change the entire theme.

Key Vocabulary

HTML (HyperText Markup Language)	The standard markup language used to create the structure and content of web pages. It uses tags to define elements like headings, paragraphs, and images.
CSS (Cascading Style Sheets)	A stylesheet language used to describe the presentation of a document written in HTML. It controls colors, fonts, layout, and responsiveness.
JavaScript	A programming language that enables interactive web pages. It is used to add dynamic content, control multimedia, and enhance user experiences.
DOM (Document Object Model)	A programming interface for HTML and XML documents. It represents the page structure as a tree of objects, allowing JavaScript to access and manipulate page content and styles.
Event Handler	A function that responds to an event, such as a mouse click or key press. In web development, event handlers are typically written in JavaScript.