Complete an Interactive Web Development Lesson
Design a lesson workspace that combines instruction, editable code, feedback, and progress without crowding a small laptop screen.
The brief
Understand the problem
Background
Coding learners move repeatedly between reading, editing, running, and debugging. Fragmented tools make it hard to connect an error with the concept being taught.
User context
Andre is learning responsive CSS on a 13-inch laptop. He can study for forty minutes at a time and wants to resume exactly where he stopped.
Product problem
A lesson workspace must balance prose, code, output, and feedback while remaining accessible to keyboard users and resilient to incorrect code.
Objective
Create the core experience for completing and resuming an interactive coding lesson.
What to design
Define the experience
Required experience
- Course and lesson progress overview
- Integrated instruction, editor, and preview workspace
- Test feedback tied to relevant code or concepts
- Saved progress and resume state
Screens and states
- Course overview
- Lesson workspace
- Test results
- Resume state
Core user flow
Follow the critical path
- 01
Andre opens the next lesson from his course dashboard
- 02
He reads a short concept and changes the starter code
- 03
He runs the result and receives two failed tests
- 04
He uses a hint and fixes one issue
- 05
He saves progress and returns later to complete the lesson
Product rules
Requirements and constraints
Requirements
- Keep lesson instructions accessible while editing
- Allow keyboard navigation across editor, preview, and feedback
- Connect each failed test to an understandable outcome
- Offer hints progressively rather than revealing the answer immediately
- Save code and lesson position automatically
Constraints
- The workspace must fit a small laptop viewport
- Learner code may freeze or break the preview
- Some exercises require files rather than one code pane
Reality check
States worth considering
Finish line
What to deliver
- Design four desktop screens, with emphasis on the lesson workspace and failed-test recovery.
Optional direction
Visual resources
Use these as a starting constraint if you want one. They are not part of the required solution.