Students improve the responsive homepage from Lesson 8 by adding clear visual feedback to links, navigation, and other interactive elements already on the page. The lesson connects hover, focus, and transitions to user experience so students can make interactions easier to recognize without adding unnecessary effects.

Lesson Overview

  • Course: Introduction to Web Coding
  • Lesson: 9 of 12
  • Suggested duration: 60 minutes
  • Primary concept: User Experience
  • Project milestone: Add clear hover, focus, and transition feedback to interactive elements

Learning Objectives

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

  • Explain why interactive elements should provide visible feedback.
  • Distinguish between hover and focus states.
  • Use CSS pseudo-classes to change the appearance of interactive elements.
  • Use a transition to make an appropriate state change feel smoother.

Key Concepts and Vocabulary

  • User feedback
  • Interactive element
  • State
  • Pseudo-class
  • Hover
  • Focus
  • Keyboard navigation
  • Transition

Materials and Resources

  • The student website from Lessons 1 through 8
  • A text editor and web browser
  • The primary link in the hero, navigation links, and any other links already added to the homepage
  • Several current websites selected by the instructor with clear hover and keyboard focus states
  • User Experience
  • Hover, Focus, and Transition

Prior Knowledge

Students should be comfortable editing CSS selectors and should already have a responsive homepage with a consistent visual system, navigation links, and a primary action link in the hero.

Opening Activity

Look at several websites and move the pointer over links, navigation items, and other controls. Ask students what changes and how those changes help communicate that an element can be used.

Then use the Tab key to move through interactive elements and identify visible focus states. Connect the examples to User Experience: interactions should give users clear feedback, interfaces should remain simple and consistent, and keyboard users need to be able to see where they are on the page.

Direct Instruction

Introduce interaction feedback as part of user experience. The goal is not to decorate every interaction, but to make the state of an interactive element clear.

  • :hover applies while a pointer is over an element.
  • :focus applies when an interactive element is selected, including when a keyboard user tabs to it.
  • Hover should provide extra feedback, not hide information or functionality that users need.
  • Visible focus should not be removed unless it is replaced with another clear focus style.
  • A transition controls how a change between states happens over time.
  • Feedback should be consistent with the color and typography system established earlier in the course.

Demonstrate the hero’s primary link with a normal state, :hover state, and :focus state. Then add a short transition to a property such as color or background color. Show the same pattern on the Home link in the navigation so students see how one interaction system can be applied consistently across the page.

Recommended AI Coding Educator Lessons

The interactive demos and Code Sandbox are useful here because students can compare normal, hover, and focus states before changing the project. They should also test with the keyboard, not only by moving the pointer.

Applied Project

Students make a focused interaction-feedback pass on controls that already exist. They do not need to add new interface features in this lesson because Lesson 10 will introduce the first new JavaScript behavior.

  1. Identify the hero’s primary link, the Home link in the navigation, and any other important links already on the homepage.
  2. Add or improve a :hover state for the primary link so pointer users receive clear feedback.
  3. Add or improve hover feedback for the navigation link and other repeated links where the same treatment makes sense.
  4. Add visible :focus styles so keyboard users can tell which link is selected.
  5. Add a short transition to one or two state changes where the smoother change improves the interaction.
  6. Use the Tab key to move through the page and confirm that every focusable element remains visible and understandable.
  7. Test hover behavior with the pointer and make sure no essential information depends on hover alone.
  8. Remove any effect that feels distracting, inconsistent, or unrelated to useful feedback.

The goal is a small, consistent interaction system. Students should not add movement simply because CSS makes it possible. Each state change should help a user recognize an interactive element or understand which control is currently selected.

Check for Understanding

Students should be able to identify an interactive element, describe its normal, hover, and focus states, and explain what feedback each state gives the user.

Useful questions include:

  • What triggers the :hover state?
  • How can an element receive focus without using a mouse?
  • Why should a visible focus outline or replacement remain on interactive elements?
  • What does the transition change, and what does it not change?
  • Would the page still be usable if the hover effect never occurred?

Differentiation and Extensions

Support: Build the hover and focus rules for the primary link together, then have students apply the same pattern to the navigation link while keeping the visual treatment consistent.

Extension: Have students compare two feedback treatments for the same link and explain which is clearer, less distracting, and more consistent with the site’s visual system.

If a hover or focus rule is not applying as expected, the AI Tutor can help students inspect the selector, pseudo-class, and competing CSS rules. Students should make the correction themselves and test both pointer and keyboard behavior afterward.

Lesson Outcome

Students finish the lesson with a responsive homepage whose existing links and navigation provide clear, consistent feedback through hover, focus, and a small number of useful transitions.

Closure

Review the idea that CSS can respond to interaction states without changing the page’s content. Preview that Lesson 10 will go one step further by creating scripts.js and using JavaScript to make a Show More control actually change what content is visible.

Teacher Reflection

  • Could students distinguish hover from focus and explain why both matter?
  • Did students keep interaction feedback consistent with the site’s existing visual system?
  • Were students able to test the page with both pointer and keyboard input?
  • Is the project ready for Lesson 10 without unresolved interaction or focus problems distracting from the first JavaScript task?