Separate Structure, Style and Behavior
Identify whether the requested change concerns meaning, visual presentation or an interactive response.
About 18 minutes, plus any extended practice
Open lesson 1Structure an Accessible Paper Web Page
Draw a paper practice page with a heading, three-item list, a resource link and a Check answer button. Supply text for its meaningful route image and describe a keyboard test.
Before you begin
- Distinguish an action from navigation and read short interface descriptions.
Choose by skill rather than age alone. Read with an adult when useful, revisit a lesson, or explore another grade.
Follow the lesson sequence
Choose Semantic HTML for a Purpose
Choose the element whose stated purpose matches the content or action.
About 18 minutes, plus any extended practice
Open lesson 2Write an Alternative for a Meaningful Image
Describe the information the meaningful image contributes to this task.
About 18 minutes, plus any extended practice
Open lesson 3Plan a Keyboard-Friendly Interaction
Offer an operable control and a visible focus path for the same task.
About 18 minutes, plus any extended practice
Open lesson 4Review and transfer
After the lessons, try 4 new review cases and a practical task. Each answer has an explanation and a link back to the related lesson.
Open the unit reviewGuest answers are temporary. Keep your own paper or document; this unit does not certify completion or record a school grade.
Topic references
- 2026 CSTA PK–12 Computer Science Standards: topic reference — Programming; Human-Centered Design
These references informed the topic selection. They do not certify complete standards alignment.