Students make the first full visual design pass on the homepage by working directly in CSS. Building on the boxes created in Lesson 4, they use typography, color, and hierarchy to give the entire site a more consistent visual identity.

Lesson Overview

  • Course: Introduction to Web Coding
  • Lesson: 5 of 12
  • Suggested duration: 60 minutes
  • Primary concept: Web Design
  • Project milestone: Establish a consistent visual system using typography and color

Learning Objectives

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

  • Explain how typography and color influence the way people perceive a website.
  • Use element and class selectors to change groups of page elements consistently.
  • Explain at a basic level why one CSS value may override another through the cascade.
  • Apply a small, consistent set of typography and color choices across the homepage.

Key Concepts and Vocabulary

  • Web design
  • Visual hierarchy
  • Typography
  • Color palette
  • Contrast
  • Selector
  • Class selector
  • Cascade
  • Specificity
  • Inheritance

Materials and Resources

  • The student website from Lessons 1 through 4
  • A text editor and web browser
  • The student’s current style.css, including the Base CSS and the .box rule added in Lesson 4
  • Several current websites selected by the instructor with noticeably different visual identities
  • Web Design
  • Selectors, Cascade, Typography, and Color

Prior Knowledge

Students should understand the basic relationship between HTML and CSS, should be able to connect a class attribute in HTML to a class selector in CSS, and should already have a homepage containing meaningful content and a three-item group styled with the .box class.

Opening Activity

Compare several websites with different visual styles. Ask students what each site feels like before discussing the actual content. Consider differences such as formal or casual, serious or playful, calm or energetic.

Connect the discussion to Web Design. Color can set mood, fonts affect both personality and legibility, contrast helps important elements stand out, and familiar visual conventions make a site easier to understand.

Direct Instruction

Introduce web design as making intentional visual choices that support the purpose, audience, and content of a website. Keep the design system small enough that students can apply it consistently.

  • Typography affects readability, emphasis, personality, and hierarchy.
  • Color can set a mood, reinforce identity, create contrast, and guide attention.
  • Body text and its background need enough contrast to remain easy to read.
  • Consistency makes a design feel intentional rather than accidental.
  • Selectors let one CSS rule control many matching elements at once.
  • The cascade decides which value is used when multiple CSS rules affect the same property on the same element.

Use Selectors to review the difference between broad element selectors such as h2 and reusable class selectors such as .box. Then use the Cascade lesson to demonstrate that later rules can override earlier rules when their specificity is equal, more specific selectors can win, and some text properties are inherited from parent elements.

Demonstrate only a few broad changes in style.css: body text, heading typography, link color, and the colors already used for the boxes from Lesson 4. The purpose is to show how a small number of CSS rules can create consistency across the whole page.

Recommended AI Coding Educator Lessons

The Code Sandbox is useful for testing unfamiliar typography or color values before applying them to the project. The interactive demo in the Cascade lesson is also useful for seeing why one CSS rule wins over another.

Applied Project

Students make the first broad visual changes to the homepage by editing shared CSS rules rather than styling individual elements one at a time.

  1. Review the existing Base CSS and identify the rules that control the body, headings, links, and the .box class created in Lesson 4.
  2. Choose a small color palette that fits the subject and tone of the site.
  3. Set or adjust the main text color and page background while keeping the text easy to read.
  4. Adjust heading typography so the difference between heading levels is clear.
  5. Adjust body typography if needed for readability.
  6. Choose a consistent link color that remains easy to recognize.
  7. Bring the .box background and border colors into the same visual system rather than treating them as unrelated decoration.
  8. Review the complete homepage and remove any color or typography choices that feel inconsistent with the overall direction.

The goal is not to create a highly polished design in one session. Students should establish a coherent visual direction that can be improved when spacing, layout, responsiveness, and interaction are introduced in later lessons.

Check for Understanding

Students should be able to identify a CSS rule they changed, explain which elements it affects, and connect the visual choice to the purpose or tone of their site.

Useful questions include:

  • Which selector controls this heading?
  • Why is this text easy or difficult to read against its background?
  • How can you tell which heading is most important?
  • Why did you choose these colors for this subject and audience?
  • If two CSS rules set the same property on this element, which one is winning and why?

Differentiation and Extensions

Support: Provide a small set of approved color and typography values and have students focus on locating and changing the correct CSS rules.

Extension: Have students create two alternate color or typography treatments for one existing section and explain which version better supports the subject and audience of the site.

If a student’s CSS change does not appear, the AI Tutor can help them determine whether the problem involves the selector, the cascade, or inheritance. Students should identify the competing rules, make the correction themselves, and verify the result in the browser.

Lesson Outcome

Students finish the lesson with a homepage that has a consistent visual direction, including intentional typography, a small color palette, recognizable links, and box styling that belongs to the same system. They also have a basic understanding of how selectors and the cascade control those styles.

Closure

Review the idea that visual design communicates purpose, tone, and hierarchy rather than simply decorating a finished page. Preview that Lesson 6 will keep this visual system in place while refining spacing, content widths, margins, padding, and readability.

Teacher Reflection

  • Could students connect typography and color choices to the purpose, audience, or tone of the website?
  • Were students able to locate and modify shared CSS selectors rather than styling elements inconsistently one at a time?
  • Could students explain at a basic level why a competing CSS rule was winning?
  • Did students establish a clear enough visual direction to refine spacing in Lesson 6 without needing to redesign the page again?