Computer Science · 10th Grade · Network Architecture and Web Systems · Weeks 19-27

Introduction to Web Development (Frontend)

Students get an overview of frontend web development using HTML, CSS, and basic JavaScript.

• Common Core State Standards
• CSTA: 3A-AP-22

About This Topic

Frontend web development uses HTML, CSS, and JavaScript as three distinct but interlocking tools. HTML (HyperText Markup Language) defines the structure and semantic content of a page using elements like headings, paragraphs, links, and forms. CSS (Cascading Style Sheets) controls visual presentation, from colors and fonts to layout and responsive breakpoints. JavaScript adds interactivity and dynamic behavior, responding to user actions and modifying the page without a reload. In the US 10th-grade curriculum, this topic supports CSTA Standard 3A-AP-22, which addresses program design for end-user interaction.

A common challenge is that students initially treat HTML as programming, confusing markup with logic. Establishing the clear role of each technology early prevents this conflation and gives students a mental model for diagnosing which file to edit when something looks wrong versus when something behaves wrong.

Active learning works particularly well here because students can immediately see the result of their changes in a browser. Collaborative builds, where students contribute HTML structure, CSS styles, and JavaScript behavior in assigned roles, reinforce the separation of concerns through direct experience.

Key Questions

1. Design a basic webpage structure using HTML.
2. Explain how CSS is used to style web content.
3. Compare the roles of HTML, CSS, and JavaScript in web development.

Learning Objectives

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

Before You Start

Basic Computer Literacy

Why: Students need to be comfortable with file management, text editors, and navigating a web browser to work with web development files.

Introduction to Programming Concepts

Why: Understanding variables, data types, and basic control flow from prior programming units helps in grasping JavaScript's role.

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.

Watch Out for These Misconceptions

Common Misconception

HTML is a programming language.

What to Teach Instead

HTML is a markup language that describes content structure and meaning using tags. It has no logic, no variables, no loops, and no conditionals. Distinguishing markup from programming early helps students understand why you cannot use HTML to perform calculations or respond to user actions, and why JavaScript exists as a separate layer.

Common Misconception

CSS can replace JavaScript for interactive behavior.

What to Teach Instead

CSS can handle simple states like hover effects and transitions, but it cannot respond to user input, fetch data, or modify the page structure dynamically. JavaScript is required for click handlers, form validation, API calls, and any behavior that depends on runtime conditions. The two technologies are complementary, not interchangeable.

Common Misconception

You should write all CSS inline, directly on HTML elements.

What to Teach Instead

Inline CSS overrides stylesheet rules, undermines the cascade, and makes maintaining consistent styles across many pages impractical. Separating CSS into external stylesheets lets one change affect the entire site. Students who experience maintaining both approaches in a project quickly appreciate why external stylesheets are standard practice.

Active Learning Ideas

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.

45 min·Small Groups

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.

20 min·Pairs

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.

30 min·Small Groups

Real-World Connections

• Web developers at companies like Google use HTML, CSS, and JavaScript to build the user interfaces for search engines and other popular online services, ensuring they are accessible and easy to navigate.
• Graphic designers and UX/UI specialists collaborate with frontend developers to translate visual mockups into functional webpages, using these technologies to implement branding and user interaction patterns for e-commerce sites like Amazon.

Assessment Ideas

Quick Check

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

Exit Ticket

Provide students with three code snippets: one HTML, one CSS, and one JavaScript. Ask them to label each snippet with its primary role (structure, style, or behavior) and write one sentence explaining why they chose that label.

Peer Assessment

Students build a small, static webpage with a partner, dividing tasks for HTML structure and CSS styling. After completion, they swap pages and provide feedback on the other pair's HTML semantics and CSS organization, using a simple checklist.

Frequently Asked Questions

What is HTML and what does it do in web development?

HTML (HyperText Markup Language) defines the structure and semantic content of a webpage using elements enclosed in tags. It specifies what content exists (headings, paragraphs, images, links, forms) and its meaning to browsers and screen readers. HTML describes the what, not the how it looks or how it behaves.

How is CSS used to style web content?

CSS applies visual rules to HTML elements using selectors that target elements by tag name, class, ID, or relationship. Rules define properties like color, font, margin, padding, and layout (flexbox, grid). The cascade determines which rules take priority when multiple rules apply to the same element, with specificity and source order as the tiebreakers.

What are the different roles of HTML, CSS, and JavaScript in web development?

HTML provides structure and semantic meaning (the skeleton). CSS provides visual presentation and layout (the skin). JavaScript provides dynamic behavior and interactivity (the muscles). Each can technically intrude on the others' domain, but separating them into distinct files improves maintainability, reusability, and debugging clarity.

How does active learning help students understand frontend web development?

Building a webpage collaboratively in assigned roles, one student handles only HTML, another only CSS, another only JavaScript, forces students to internalize the boundary between each layer. When the JavaScript student has to ask the HTML student to add an ID attribute for a click target, they experience the interface between layers as a real coordination problem, not just a textbook abstraction.