Students begin turning plain homepage content into visually distinct components by grouping related information and creating a reusable CSS class. The lesson reinforces the idea that websites are built from nested boxes and shows how backgrounds and borders can make those relationships easier to see.

Lesson Overview

  • Course: Introduction to Web Coding
  • Lesson: 4 of 12
  • Suggested duration: 60 minutes
  • Primary concept: Web Coding
  • Project milestone: Turn selected homepage content into visually separated boxes and grouped components

Learning Objectives

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

  • Explain how related content can be grouped inside a shared HTML container.
  • Recognize common uses of boxes, cards, backgrounds, and borders on real websites.
  • Add a class attribute to an HTML element and create a matching CSS class selector.
  • Use backgrounds and borders to make content groups visually distinct.

Key Concepts and Vocabulary

  • Box
  • Container
  • Nested elements
  • Class attribute
  • Class selector
  • Background
  • Border
  • Component
  • Grouping

Materials and Resources

  • The student website from Lessons 1 through 3
  • A text editor and web browser
  • Several current websites selected by the instructor that clearly segment content with cards, backgrounds, borders, or grouped sections
  • Boxes
  • Attributes and Selectors
  • Background and Border

Prior Knowledge

Students should be comfortable editing HTML and should already have a hero plus two or three meaningful content sections. Lesson 3 should also have produced a three-item content group that can now become a set of visually distinct boxes.

Opening Activity

Look at several websites and identify places where related content is visually grouped. Ask students how they can tell that several pieces of information belong together even when there is no label explicitly saying so.

Point out backgrounds, borders, repeated card shapes, and larger section areas. Reinforce the Boxes idea that web pages are made from nested containers of content. HTML creates and groups those boxes, while CSS controls how they look.

Direct Instruction

Return to the Web Coding relationship between HTML and CSS. A group of related content can be wrapped in an HTML container, given a class name, and then styled through a matching CSS selector.

  • A section can contain several smaller content boxes.
  • A box can contain a heading, paragraph, image, list, link, or other elements that belong together.
  • The HTML class attribute gives one or more elements a reusable name.
  • A CSS class selector begins with a period, such as .box, and applies styles to elements using that class.
  • A background can separate one content area from another.
  • A border can reveal the edge of a box and make grouping easier to see.

Demonstrate adding class="box" to one container from the three-item group created in Lesson 3, then create a matching .box rule in style.css. Keep the new rule simple, using only a background color and border. Students will work more deliberately with padding, margins, and spacing in Lesson 6.

Recommended AI Coding Educator Lessons

The Code Sandbox is especially useful here. Students can practice adding a class and changing a background or border, then apply the same pattern to their project once they understand the connection between the HTML and CSS.

Applied Project

Students turn the three-item content group created in Lesson 3 into a repeated set of visual boxes, then use the same idea where another content group would benefit from clearer separation.

  1. Find the three-item content group created in Lesson 3.
  2. Confirm that each item is contained in its own HTML container, adding a <div> where needed.
  3. Add class="box" to each of the three containers.
  4. Create a .box class selector in style.css.
  5. Add a simple background color and border to the class.
  6. Save the files and verify that all three boxes receive the same styling.
  7. Identify one other area of the homepage where a background or border would make the grouping clearer, and apply the idea only if it improves the page.

Keep the work focused on grouping and visual separation. Students are not establishing the full visual identity of the site yet, and the boxes should remain stacked rather than being arranged into columns. Typography and site-wide color decisions come in Lesson 5, spacing is refined in Lesson 6, and multi-column layout comes in Lesson 7.

Check for Understanding

Students should be able to identify the HTML container, its class attribute, and the CSS selector that controls the shared appearance of the boxes.

Useful questions include:

  • Why do these pieces of content belong in separate but matching boxes?
  • What connects class="box" in the HTML to .box in the CSS?
  • Why does one CSS rule change all three boxes?
  • What is the difference between the HTML container and the CSS that styles it?
  • How does the background or border help a visitor understand the page?

Differentiation and Extensions

Support: Provide the class name and build the first box with students. Have them repeat the same class on the remaining containers and observe that one CSS rule styles all of them.

Extension: Have students add a second class to one box and create a separate CSS selector that changes only its background or border. Ask them to explain why the shared .box styling still applies.

If students are confused about why a class is not applying or why a selector is not matching an element, the AI Tutor can help them inspect the specific HTML and CSS involved. Students should make the correction themselves and verify the result in the browser.

Lesson Outcome

Students finish the lesson with the three-item content group from Lesson 3 turned into a repeated set of visual boxes, plus a clearer understanding of how HTML containers, class attributes, and CSS selectors work together.

Closure

Review the relationship between HTML grouping and reusable CSS classes. Preview that Lesson 5 will move from individual components to the visual system of the entire homepage, including typography and color.

Teacher Reflection

  • Could students explain why the three content items were grouped into repeated boxes?
  • Could students connect the HTML class attribute to the matching CSS class selector?
  • Did students use backgrounds and borders to clarify grouping rather than decorating the page arbitrarily?
  • Do any students need more practice with classes, selectors, or nested HTML before beginning broader CSS design work?