Students begin shaping the purpose of their homepage by thinking about what visitors need to understand first. They then build the first real section of the project: a simple hero with meaningful HTML, clear content, and no concern yet for finished visual styling.

Lesson Overview

  • Course: Introduction to Web Coding
  • Lesson: 2 of 12
  • Suggested duration: 60 minutes
  • Primary concept: User Experience
  • Project milestone: Build the homepage hero with a clear title, supporting text, and primary link

Learning Objectives

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

  • Explain why the top of a homepage needs to communicate purpose quickly.
  • Identify the main heading, supporting text, and primary action in a homepage hero.
  • Use a section, wrapper, heading, paragraph, and link to create meaningful homepage structure.
  • Write a short hero that reflects the intended audience and purpose of the site.

Key Concepts and Vocabulary

  • User experience
  • Audience
  • Homepage
  • Hero
  • Call to action
  • Conversion
  • Section
  • Wrapper
  • Heading
  • Paragraph
  • Link

Materials and Resources

Prior Knowledge

Students should be able to open the starter project, edit HTML, save the file, refresh the page in a browser, and identify the header, navigation, main content area, and footer from Lesson 1.

Opening Activity

Look at several homepage examples and focus only on what appears near the top of the page. Ask students what each site seems to want visitors to understand or do within the first few seconds.

Compare examples that communicate their purpose quickly with examples that require more reading or searching. Connect this to User Experience: unnecessary effort creates friction for visitors. It also connects to Content Strategy, which emphasizes designing content for a specific audience and presenting the general idea before the details.

Direct Instruction

Explain that the top of a homepage should help a visitor answer three basic questions quickly: What is this site? Is it relevant to me? What should I do next?

  • A clear main heading communicates the central idea of the page.
  • A short supporting paragraph adds useful context without requiring a large amount of reading.
  • A primary link or call to action gives the visitor an obvious next step.
  • A conversion is a useful action the site hopes a visitor will take, such as following a link, signing up, or making a purchase.

Review the HTML Structure lesson before students build. The Base HTML contains the overall page shell, but students now begin creating the structure inside <main>. The hero can be placed inside a <section>, with a <div class="wrapper"> inside it to use the wrapper styling already provided by the Base CSS.

Keep the focus on meaning and structure rather than appearance. Students will establish the site’s visual system later, so the hero only needs enough existing Base CSS to remain readable.

Recommended AI Coding Educator Lessons

If students need a quick practice step before editing their project, they can use the interactive examples and Code Sandbox on these lesson pages to change a heading, paragraph, or link and see the result immediately.

Applied Project

Students replace the temporary content they added in Lesson 1 with the first permanent section of their homepage.

  1. Decide what the homepage is about and who it is intended for.
  2. Inside <main>, add a <section class="hero">.
  3. Inside the hero section, add a <div class="wrapper"> so the content uses the width and side spacing already defined in the Base CSS.
  4. Add an <h1> with a clear heading that communicates the subject or purpose of the page.
  5. Add a short paragraph that gives the visitor useful context.
  6. Add a primary link that gives the visitor an obvious next step.
  7. Save the page and review the result in the browser.
  8. Revise the wording if the purpose or next step is not immediately clear.

Do not add new hero styling yet. The goal is to create useful content and a clear HTML structure that will be designed later in the course.

Check for Understanding

Students should be able to explain what their homepage is for, identify each part of the hero in the HTML, and describe what they want a visitor to do next.

Useful questions include:

  • What should a visitor understand from your main heading?
  • What information belongs in the supporting paragraph?
  • What action does your primary link encourage?
  • Why is the hero inside a section?
  • What does the wrapper do?

Differentiation and Extensions

Support: Provide a simple content pattern such as a site title, one-sentence description, and one action link for students to adapt to their topic. Build the section and wrapper together before students write their own content.

Extension: Have students write two different versions of the hero and compare which one communicates the site’s purpose and next step more quickly.

If a student is unsure why a particular HTML element is being used or has trouble understanding the nested section and wrapper structure, the AI Tutor can explain that specific code. Students should then return to their own file and identify how the explanation applies to what they built.

Lesson Outcome

Students finish the lesson with the first permanent section of their homepage: an unstyled hero containing a meaningful heading, supporting paragraph, and primary link inside a section and wrapper.

Closure

Review the idea that good homepage content reduces the effort required to understand what a site offers and what to do next. Preview that Lesson 3 will build below the hero by adding the main content sections and organizing more detailed information for the site’s audience.

Teacher Reflection

  • Could students explain the intended audience and purpose of their homepage?
  • Were students able to write concise hero content without focusing prematurely on design?
  • Could students correctly nest the hero content inside a section and wrapper?
  • Do any students need additional practice with headings, paragraphs, links, or HTML structure before building the main content sections?