Students expand the homepage beyond the hero by deciding what their audience needs to understand next, then building the main content sections themselves. The lesson introduces content strategy before students add real headings, text, lists, links, and images in a clear order.

Lesson Overview

  • Course: Introduction to Web Coding
  • Lesson: 3 of 12
  • Suggested duration: 60 minutes
  • Primary concept: Content Strategy
  • Project milestone: Add the main content sections below the hero and fill them with meaningful content

Learning Objectives

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

  • Explain why homepage content should be organized around a specific audience and its needs.
  • Use the inverted pyramid by placing the most important information before supporting detail.
  • Use headings, paragraphs, lists, links, and images to make content easier to scan and understand.
  • Create and order the main content sections that continue the homepage below the hero.

Key Concepts and Vocabulary

  • Content strategy
  • Audience
  • Information hierarchy
  • Inverted pyramid
  • Section
  • Heading
  • List
  • Image
  • Alternative text

Materials and Resources

Prior Knowledge

Students should be comfortable editing basic HTML and should already have a hero containing a section, wrapper, main heading, supporting text, and primary link.

Opening Activity

Look at several homepages and compare the sections that appear below the hero. Ask students what information appears first, what appears later, and which headings, lists, images, or links make the page easiest to scan.

Connect the examples to Content Strategy. Website content is most effective when it is created for a specific audience, summarizes the main idea before presenting details, and respects the limited attention visitors may give a page.

Direct Instruction

Introduce content strategy as planning what information a website needs, how it should be presented, and how it will serve the intended audience. Focus this lesson on a few practical principles students can apply immediately.

  • Write for a specific audience rather than for everyone.
  • Give visitors the general idea before asking them to read supporting detail.
  • Keep homepage paragraphs relatively short because visitors often scan rather than read every word.
  • Use descriptive headings to help visitors find the sections that interest them.
  • Use lists when several related items are easier to scan separately.
  • Use images or other media when they support the message and match the subject of the site.
  • Use links when they give visitors a useful next step or access to more detail.

Lesson 2 established the pattern of placing content inside a <section> and a <div class="wrapper">. Students should repeat that structure for the main areas they add below the hero. The instructor can prescribe a manageable architecture, such as an introductory section, a three-item section that can become cards later, and an image-and-text section. Students choose the subject and write the actual content.

Keep the page visually simple. These sections will become more distinct in Lesson 4 and will receive broader visual styling in Lesson 5.

Recommended AI Coding Educator Lessons

The Code Sandbox is useful here if students want to practice adding a list or image before placing it in their project. The goal is to understand the HTML pattern first, then apply it to real content.

Applied Project

Students build the main content areas below the hero. To keep the work realistic for one class, the instructor should provide the overall section pattern while students decide what information belongs in it.

  1. Identify the most important information visitors should encounter after the hero.
  2. Add two or three new <section> elements below the hero, each containing a <div class="wrapper">.
  3. Give each section a clear heading that describes what follows.
  4. Add short paragraphs that present the main idea before supporting details.
  5. Create one three-item content group that can be turned into visual boxes in Lesson 4.
  6. Add a list where grouped information is easier to scan than a paragraph.
  7. Add at least one relevant image with useful alt text.
  8. Add links where visitors need more information or a useful next step.
  9. Review the homepage from top to bottom and adjust the section order if the information does not progress clearly from general to specific.

Do not build columns or add new visual styling yet. The goal is to finish with a useful sequence of real content that later lessons can group, design, and arrange.

Check for Understanding

Students should be able to explain the purpose of each main section, who the content is for, and why the information appears in its current order.

Useful questions include:

  • Who is this section written for?
  • What is the most important information in the section?
  • Can a visitor understand the section by scanning its heading?
  • Would any paragraph be easier to understand as a list?
  • Does the image support the content?
  • What information might a visitor miss if they stop scrolling early?

Differentiation and Extensions

Support: Give students a specific purpose for each section, such as introduction, three key points, and supporting image with text. Help them create the section and wrapper structure before they write the content.

Extension: Have students compare the order of their sections with another homepage and explain whether moving one section higher or lower would make the page clearer for its audience.

Lesson Outcome

Students finish the lesson with a hero and two or three meaningful content sections containing real headings, text, a three-item group, a list, links, and at least one image arranged in a clear information hierarchy.

Closure

Review the idea that content strategy determines what information a page needs, who it is for, and how it should be prioritized. Preview that Lesson 4 will use the three-item content group and other existing material to show how visual boxes can make related content easier to recognize and scan.

Teacher Reflection

  • Could students explain who their homepage content is intended for and why their main sections appear in their current order?
  • Did students use headings, lists, links, and images because they improved the content rather than only to satisfy the assignment?
  • Did the prescribed section pattern keep the project manageable within the class period?
  • Which students need additional support organizing content before the class begins grouping and styling it?