Students begin by learning how a website is assembled from HTML, CSS, and JavaScript, then explore the starter files they will use throughout the course. The goal is to understand the basic structure well enough to begin making changes immediately.

Lesson Overview

  • Course: Introduction to Web Coding
  • Lesson: 1 of 12
  • Suggested duration: 60 minutes
  • Primary concept: Web Coding
  • Project milestone: Open, understand, and begin editing the starter website

Learning Objectives

By the end of the lesson, students should be able to:

  • Explain the basic roles of HTML, CSS, and JavaScript.
  • Identify the major parts of the starter HTML file, including the document setup, header, navigation, main content area, and footer.
  • Describe the difference between page content and presentation at a basic level.
  • Make a simple change to the starter HTML and verify the result in a browser.

Key Concepts and Vocabulary

  • Website
  • Web page
  • Browser
  • HTML
  • CSS
  • JavaScript
  • Element
  • Semantic HTML

Materials and Resources

  • A computer with a text editor and web browser
  • Base HTML
  • Base CSS
  • Several current websites selected by the instructor for discussion

Prior Knowledge

No previous coding experience is required. Students should only need basic familiarity with using files, folders, and a web browser.

Opening Activity

Begin by looking at several familiar websites. Ask students what they think is happening behind the page they can see and what kinds of files or instructions might be needed to create it.

Use the examples to introduce the idea that a browser is displaying the result of code and content working together. The purpose is not to explain every technical detail, but to give students a basic mental model before they open the starter files.

Direct Instruction

Introduce the Web Coding concept and explain the basic relationship between the three main technologies students will encounter.

  • HTML provides the content and structure of the page.
  • CSS controls how that content looks and is arranged.
  • JavaScript can add behavior and interaction.

Then walk through the starter files. In the Base HTML, point out the document setup, the header with its text site logo and Home link, the <main> area, and the footer. In the Base CSS, briefly point out the reset, basic formatting, the reusable .wrapper class, header and navigation styles, and the introductory breakpoint.

Explain that the starter code provides only the basic page shell and formatting. Students will add sections, wrappers, content structure, visual design, layout, responsive behavior, and interaction as the course progresses. The HTML already links to scripts.js, but students will create that file later when JavaScript is introduced.

If a student encounters an unfamiliar HTML element while reading the starter file, the AI Tutor can explain what the element does and why it is used. Students should still locate the element in their own code and verify its role in the page.

Recommended AI Coding Educator Lessons

Applied Project

Students open the starter project and make a few small HTML changes while observing the result in the browser.

  1. Open the starter project in the text editor.
  2. Open index.html in a browser.
  3. Change the text of the site logo and page heading.
  4. Add a short paragraph inside <main>.
  5. Add one additional heading or paragraph inside <main>.
  6. Save the file and refresh the browser after each change.
  7. Locate the header, navigation, main element, and footer in the HTML and identify the corresponding parts of the page.

The goal is not to design or plan the homepage yet. Students should become comfortable moving between the code and browser and seeing a direct relationship between what they change and what appears on the page. The content added here is temporary and can be replaced when students begin planning the homepage in Lesson 2.

Check for Understanding

Students should be able to show the instructor a change they made and identify where that change exists in the HTML file.

Useful questions include:

  • Which file contains the page content?
  • What is CSS responsible for?
  • What is the purpose of the <main> element?
  • Why is style.css linked from the HTML?
  • What happens after you save the HTML file and refresh the browser?

Differentiation and Extensions

Support: Have students change only existing text and identify the header, navigation, main element, and footer with the instructor before adding anything new.

Extension: Have students use the HTML Summary to choose one additional simple HTML element to add inside <main>, then explain what the element does.

Lesson Outcome

Students finish the lesson with a working local copy of the starter website, a basic understanding of its HTML and CSS files, and experience making HTML changes and seeing those changes appear in the browser.

Closure

Review the roles of HTML, CSS, and JavaScript and reinforce that students will continue working in the same project for the rest of the course. Preview that Lesson 2 will shift from understanding the starter site to deciding what the homepage is for and building its first real content: the hero.

Teacher Reflection

  • Were students comfortable opening, editing, saving, and refreshing the local files?
  • Could students distinguish HTML, CSS, and JavaScript at a basic level?
  • Could students identify the starter page shell without confusing the CSS .wrapper class with HTML that has not yet been added?
  • Which parts of the starter files need additional explanation before Lesson 2?