FROM LESSON TO FINISHED WORK
See what you can make.
Explore completed instructor specimens, two project walkthroughs and a worked lesson example for each of our 26 courses.
These are fictional, instructor-authored examples from the course materials. They are not client outcomes or learner testimonials.
A resilient reading-card system
From Design systems, from scratch.
1. Start with the decision
Three screens use slightly different card fills. The reference separates accidental inconsistency from meaningful saved state, then names colour roles by their responsibility.
2. Make the comparison visible
The same title, description and essay count are shown with equal spacing and with grouped spacing. Keeping content and typography fixed makes the hierarchy decision easier to inspect.
3. Stress the result
The completed component handles a long title, a narrow host and missing optional content. Save state includes text and pressed semantics, so colour is not its only signal.
What to take away
A useful handoff includes the token roles, working specimen and decision log. It explains the rules and exceptions without claiming an unmeasured usability improvement.
Try the first lessonTurn research into a bounded decision
From the research course. This teaching case uses six authored episodes, not real participants.
COMPLETED MEMO · SUMMARY
Test an optional purpose cue
Compare a title-only saved list with one that adds a short reason for saving. Investigate a separate device-persistence problem before treating missing items as disengagement.
1. Separate observation from explanation
Some episodes suggest difficulty remembering why an item mattered. Others suggest lack of time, successful reminders or use as a reference. The memo keeps those competing explanations visible.
2. Choose a reversible next step
The recommendation is a prototype comparison, not an immediate launch of mandatory notes or reminders. It specifies what to observe and what would change the decision.
3. State the limits
The completed memo does not infer prevalence, retention uplift or causality from fictional qualitative episodes. It gives design and engineering clear next questions.
Try the first lessonWorked examples for every course
Each example below shows a completed instructor reference response from the free first lesson. These are fictional teaching exercises, not completed learner capstones. Open a course to explore the full project brief.
Design systems, from scratch
Audit the decisions before drawing the system
Audit the supplied Reading room screens and produce a decision inventory before opening the reference token map.
The starting point
Record eight starting observations using the brief template. Include a meaningful exception as well as likely drift.
Instructor reference response
A defensible inventory consolidates ordinary card surfaces, preserves a separate selection role where needed and keeps the detail heading outside the card-title contract. It separates warning from action even when both happen to share a color. Your exact values can differ; the evidence is whether the role has a stable responsibility. A weak inventory simply lists new hex values. An adequate one records which repeated decision each value serves. A stronger one also names a future change that would break the proposed relationship. Do not claim the new palette is more usable from this exercise alone: you have examined consistency and dependencies, not observed readers.
Apply it to your project
A documented token system, editable component kit and tested card states, supported by an instructor decision log.
React for thoughtful interfaces
Model the interface as state
Implement the query/topic truth table, including whitespace and no results. Explain why saved IDs do not belong in the filter function.
The starting point
Start with this fixed input: A: Coastal Walks / Travel; B: City Gardens / Design; C: Coast at Night / Photography. The source order is A, B, C. Search covers titles only; topic is an exact match. Start with saved IDs [B].
Instructor reference response
With query " COAST " and topic All, the result is [A,C]; with Travel it is [A]. Clearing only query while Travel remains selected still returns [A]. Save A twice and the saved set returns to [B]. A count-only test would miss a wrong identity. The reference model in model.mjs separates normalization, filtering and toggling. Ready: Show all four exact-ID results and prove the original array remains unchanged. Stronger: Add a duplicate title with a different ID; explain why title-based saving fails. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
An accessible reading-list interface with filters, saved items, and clear empty states.
Build with AI. Keep your taste.
Write a brief that makes decisions
Create a portable brief and five acceptance observations before generating code.
The starting point
Start with this fixed input: Fictional Paper Room sessions: Introduction, 90 minutes, €35, no experience; Fibre Lab, 120 minutes, €55, bring an apron; Open Bench, 60 minutes, €20, previous introduction required. Selection is local only.
Instructor reference response
A useful requirement says: choosing Fibre Lab shows its duration, price and apron requirement in a local summary. The action is Select sample session. A bad requirement says make the booking seamless, because it conceals whether any booking service exists. The supplied brief separates facts, visual principles, behaviours and exclusions. Ready: Every displayed factual claim maps to the supplied session sheet. Stronger: Move the brief to a different assistant and note which requirements needed clarification. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A reusable project brief, critique checklist, and iteration log for an original landing page.
Motion that means something
Give every movement a reason
Assign an informational job to each transition and implement a motion-off baseline first.
The starting point
Start with this fixed input: Three controls: workshop disclosure, Save note toggle and section navigation. Opening details changes available information; saving changes retained state; navigation changes destination.
Instructor reference response
The reference uses a native details element, a stable-label pressed button and ordinary anchors. Text and state change immediately. Only supporting opacity/transform treatments animate. No action waits for a timer. The hover lift formerly used as the opening example does not explain saving, so it is replaced by a state-linked treatment. Ready: All three outcomes remain understandable when animations are disabled. Stronger: Remove the decorative treatment entirely and identify what, if anything, became harder to understand. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A small interaction library with responsive transitions and a reduced-motion alternative.
The art of the landing page
Find the one thing to say
Write three openings and choose one using factual clarity, audience fit and action prediction.
The starting point
Start with this fixed input: Paper Room offers three sample sessions with the facts in the project pack. There are no customer quotes, accreditation or actual booking service. The visitor wants to know whether a beginner can participate.
Instructor reference response
The selected pair is “Make your first sheet” with “A 90-minute introduction to handmade paper. Materials included; no experience required.” The action is Explore sample sessions. A rejected headline, “Transform your creative future,” makes a larger promise without explaining the offering. An expressive headline can work when the adjacent sentence carries the facts. Ready: A reader can identify activity, duration and prerequisite from the opening alone. Stronger: Adapt the opening for a returning visitor who only needs dates. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A responsive landing-page concept with a clear message, honest proof, and a primary action.
Creative coding with CSS
Let the browser share the work
Build the supplied intrinsic grid and explain each minimum-size constraint.
The starting point
Start with this fixed input: Three cards: a short title, a 90-character title and a missing-image entry. Put the same grid in a 260px panel and a 900px region.
Instructor reference response
minmax(min(100%,240px),1fr) lets the minimum fit a host narrower than 240px. min-width:0 allows grid children to shrink; overflow-wrap:anywhere handles the unbroken fixture. These choices solve different problems. Hiding horizontal overflow would conceal the defect rather than establish that content fits. Ready: All three complete titles and actions fit both allocations. Stronger: Compare auto-fit and auto-fill with only one remaining item. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A responsive editorial card composition built with reusable CSS rules.
Typography with a point of view
Choose a voice before a typeface
Compare three type directions using the exact same copy and character set.
The starting point
Start with this fixed input: Interval publishes the supplied 300-word essay Between arrivals. Its roles are issue label, title, standfirst, byline, body, quote and caption.
Instructor reference response
The reference pairs Georgia display text with system sans labels and Georgia body. It rejects all-display text because punctuation and paragraph rhythm become tiring in the long passage. This is a role decision, not a claim that a serif is inherently reflective. The specimen exposes line measure and leading for comparison. Ready: Every role has a stated purpose; accented names, numerals and quotation marks are checked. Stronger: Substitute an unavailable font and inspect the fallback hierarchy. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A responsive journal specimen with tested type roles, reading measures and a documented font pairing.
Art direction beyond the moodboard
Extract principles, not appearances
Extract one useful relationship from each study and draw three original thumbnails.
The starting point
Start with this fixed input: Afterlight is a fictional evening exhibition of paper constructions. Facts: 18 October, 18:00–21:00, Room 4, free entry. The supplied original reference sheet contains dense, quiet and geometric studies.
Instructor reference response
The direction retains a strong warm focal shape, a calm facts zone and a restrained two-colour palette. It does not copy the dense study’s coordinates. A geometric construction can create energy while quiet spacing makes the date readable. The reference sheet is authored for analysis, not borrowed campaign work. Ready: Each proposed rule connects a visible relationship to a reading or identity purpose. Stronger: Remove the focal shape and test whether the type still identifies the event. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A three-format campaign with an explicit visual thesis and a documented critique trail.
Small research, useful decisions
Frame the decision and the evidence that could change it
Use the decision brief to prepare a guide and a hypothesis table before opening the episode pack.
The starting point
Write the decision, its owner, scope and one explicit exclusion in your own words.
Instructor reference response
A strong framing names the next experiment rather than declaring a feature winner. It replaces Why did you forget? with a recent episode prompt and distinguishes intended reading from keeping a reference. It leaves room for a fourth explanation rather than forcing every account into the initial three. Your guide need not match the supplied wording, but it should avoid embedding the proposed solution, permit an account where returning worked well and produce material relevant to the product decision. Evidence about one fictional mechanism cannot establish how common that mechanism is among real users.
Apply it to your project
An evidence-linked decision memo with counterexamples, a reversible next experiment and clear limits.
Words that move an interface forward
Name what happens after the click
Write labels and outcome sentences for each transition using the supplied state table.
The starting point
Start with this fixed input: Local workshop flow: choose session, review selection, simulate request. It cannot reserve capacity or charge a card.
Instructor reference response
Choose session predicts selection; Review selection predicts a summary; Simulate request predicts a local demonstration. The final sentence says no reservation was made. “Booking confirmed” would assert a system outcome that does not exist. The reference specimen lets you inspect the full copy sequence rather than isolated buttons. Ready: Every action label predicts the next state and success matches the local contract. Stronger: Adapt the contract for a real reservation API without claiming payment is included. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A tested content system for a workshop-booking journey, including errors and empty states.
Interfaces that include more people
Start with the element’s job
Inspect the semantic roles before and after activating Save.
The starting point
Start with this fixed input: A reading card links to details and has a separate save action. The reference uses a stable “Save City Gardens” label with aria-pressed false/true.
Instructor reference response
The pressed state changes while the accessible name stays stable. A separate changing-action-label pattern could use Save/Remove without aria-pressed, but mixing the patterns makes the instruction ambiguous. The title is a real link; the card is not one large button containing another button. Ready: Keyboard activation changes the pressed state and the title remains independently navigable. Stronger: Compare the alternative action-label pattern and explain the tradeoff. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
An accessible reading-list flow with tested navigation, a dialog and error recovery.
Data displays that support a decision
Write the question above the chart
Calculate week-one rates and write the decision question before selecting a chart.
The starting point
Start with this fixed input: The twelve-row CSV covers Paper, Clay and Light across four weeks. Week 1: Paper 18/20, Clay 12/30, Light 8/10 attendees/bookings. Values are fictional.
Instructor reference response
Paper is 90%, Clay 40%, Light 80%. Combined attendance is 38/60 = 63.3%, not the unweighted mean of those percentages. Clay has more attendees than Light but a lower rate. Counts and rates answer different questions, so the page retains both. Ready: The table shows numerator, denominator, rate and the question each answers. Stronger: Calculate how one extra attendee changes a 10-place versus 30-place session. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A workshop attendance dashboard with a clear question, trustworthy scales and an accessible data table.
Responsive components, wherever they live
Let content reveal the breakpoint
Find the first genuine arrangement failure before adding a query.
The starting point
Start with this fixed input: One story card occupies 260px, 479px, 481px and 700px hosts. The title fixture is 90 characters and the optional image can be absent.
Instructor reference response
A clipped heading caused by a fixed height is repaired by natural flow. A narrow text column beside media may justify stacking. The reference distinguishes these causes so a new breakpoint is not used to disguise an incorrect content constraint. Ready: Show complete content at every host width and name the observed reason for the threshold. Stronger: Change the typeface and re-evaluate the threshold. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A container-aware card system tested in a sidebar, grid and full-width feature.
Forms that recover gracefully
Make the requirement visible before the error
Build labelled native controls and explain the request contract before the action.
The starting point
Start with this fixed input: Local request fields: name, email and session. Sessions are Introduction, Fibre Lab and Open Bench. No payment or reservation occurs.
Instructor reference response
The reference uses persistent labels, email input type and a session select. Guidance says Simulate request. An empty submit produces linked field errors; an untouched initial form does not begin by blaming the user. No unused phone number is collected. Ready: Every requirement is visible before submission and every error names a repair. Stronger: Specify which rules must also exist at a real server boundary. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A validated workshop form with a clear state model and a recoverable simulated submission.
TypeScript for impossible states
Replace combinations with named states
Construct valid examples and deliberately invalid ready/error objects in the strict compiler exercise.
The starting point
Start with this fixed input: Four base variants: idle; loading; ready with Book[] and selectedId; error with message. Book IDs and titles must be nonempty strings.
Instructor reference response
The reference uses required payloads within each variant. An empty ready array is valid and distinct from error. The failing fixture lacks required data; the exercise verifies a compiler diagnostic, not just JavaScript transpilation. Types do not validate a fetched object. Ready: Strict tsc rejects both invalid constructions and accepts the reference model. Stronger: Add refreshing only after identifying what data its UI must retain. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A typed resource-loading model with exhaustive rendering and validated external input.
Async interfaces without surprises
Reproduce the race before choosing the repair
Complete the three timelines in the ledger and specify the exact final state for each.
The starting point
Write draft, submitted query, displayed query, result IDs and pending state at each event.
Instructor reference response
The final result of coast then city is B for city regardless of completion order. An old error cannot replace that success. An old finally cannot stop the pending state of a newer request. Draft text is independent: editing the input to garden without submitting should not rename city results. Clear is a new intent that invalidates pending work even though it sends no request. Disposal ends this view’s permission to publish. These predictions form an executable specification for the later tests; drawing the timelines first makes a missing guard easier to recognise than debugging a convincing screenshot.
Apply it to your project
A runnable search interface with latest-intent ownership, validated responses, captured retry intent and a proven race-condition repair.
Test the journey, not the screenshot
Translate promises into observations
Write contracts with exact IDs, initial state, actions and expected observations.
The starting point
Start with this fixed input: Fixture A Coastal Walks/Travel, B City Gardens/Design, C Coast at Night/Photography, D Workshop Notes/Design. Source order A,B,C,D.
Instructor reference response
A search for coast must return [A,C], not merely two results. Save A, switch to saved-only and expect exactly [A]. The reference tests absence of B,C,D as well as the count. Reload tests persistence after a real UI action, not after inserting the expected storage value. Ready: Five contracts distinguish identity, state transitions and persistence. Stronger: Explain which contract would catch saving a neighbouring card by mistake. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A focused test plan and executable checks for a saved reading-list journey.
Performance as a design material
Choose the moment that feels slow
Record browser, hardware, viewport and cache state; capture a baseline search trace before changing anything.
The starting point
Start with this fixed input: The supplied catalogue has 6000 synthetic titles. Slow mode repeats normalization and rebuilds the full result list; reference mode indexes titles and shows a bounded page.
Instructor reference response
The specimen reports local computation/render duration through performance marks. These are lab observations, not field INP. A trace helps separate repeated string work from DOM construction and rendering. The case deliberately avoids supplied invented timing numbers; the measurement sheet starts blank. Ready: A repeatable named search and baseline trace with measurement scope. Stronger: Repeat on a second device and keep the two environments separate. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A before/after performance investigation with a repeatable scenario and a documented budget.
A small world in Three.js
Place the camera before adding effects
Compose the supplied scene before adding extra effects.
The starting point
Start with this fixed input: Three fixed garden forms: sphere at x=-1.5, box at x=0 and cone at x=1.5. Compare camera (5,3,7) with (0,1,3), targeting the group origin.
Instructor reference response
The reference uses a perspective camera with near 0.1 and far 100, keeping the group inside the frustum. The closer frontal camera overlaps forms and reduces depth cues. The comparison changes camera only; moving the lights at the same time would confound the judgment. Ready: All three forms are visible at wide and narrow host sizes; camera settings are recorded. Stronger: Try an orthographic camera and explain the changed spatial reading. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A responsive three-object scene with a controllable camera, a pause control and deliberate cleanup.
Light, surface, atmosphere
Change one variable at a time
Capture a controlled roughness comparison and annotate highlight differences.
The starting point
Start with this fixed input: Three identical spheres use roughness 0.12, 0.45 and 0.85 with metalness 0. Keep geometry, camera, exposure and key light fixed.
Instructor reference response
The reference isolates roughness before offering a second lighting preset. Without a calibrated environment, this is a relative material study, not a physical material measurement. A dark metal with no reflective environment is not evidence that metalness is broken. Ready: The comparison records every fixed parameter and the one changed property. Stronger: Repeat with metalness 1 and explain why the environment now matters more. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A three-material sculpture study with two lighting setups and documented visual tradeoffs.
Drawing with light: a shader studio
Make the coordinate system visible
Make coordinates visible before tuning the poster.
The starting point
Start with this fixed input: Reference modes: UV gradient, aspect-correct circle, ring and repeated poster. Compare square, wide and tall hosts.
Instructor reference response
The fragment host derives centred coordinates from resolution and scales x by width/height. The same radius then remains circular across host shapes. UV debug mode reveals axis direction; visual distortion should be traced to mapping before palette changes. Ready: A circle stays circular in three aspect ratios and the origin is identified. Stronger: Move the centre using a uniform and predict the coordinate offset. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A responsive procedural poster with parameter controls, a tested shader and a reduced-motion composition.
A thousand things, one intention
Design the field before increasing the count
Compare particle scale and focal density while preserving the seed.
The starting point
Start with this fixed input: Seed 41 creates 400 home positions. Low mode uses the first 160 positions from that same sequence.
Instructor reference response
The reference generates the full home array once and takes a stable prefix for lower density. Changing count therefore preserves shared positions rather than generating a different field. Composition is inspected while static before any force is enabled. Ready: Reset reproduces identical home positions and the focal structure is visible without movement. Stronger: Change the seed and identify which visual rules remain invariant. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A seeded interactive particle field with bounded motion, instancing and a quality control.
Scroll with a story to tell
Write the page before animating it
Read the static page and define one purpose per chapter before enabling motion.
The starting point
Start with this fixed input: Three chapters: Collect preserves origin and season; Exchange matches a packet to a gardener; Regrow returns labelled seed after harvest. All copy and original illustrations are supplied.
Instructor reference response
The reference is a complete HTML narrative with ordinary anchor links. The packet-to-plant illustration reinforces a sequence already explained in text. Direct arrival at Regrow still identifies the seed-library context. No opacity animation hides essential prose. Ready: The story is understandable with scripting disabled and from a direct chapter link. Stronger: Rewrite one chapter title to improve a non-linear entry. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A three-chapter narrative with measured progress, clear transitions and no dependency on motion for meaning.
Motion with weight and intention
Separate the target from the current position
Use the semantic buttons before implementing the spring.
The starting point
Start with this fixed input: Two choices, List and Grid, share an indicator with position x, velocity v and target 0 or 1. Selection changes immediately.
Instructor reference response
aria-pressed reflects the selected view; the indicator may still be moving. Its coordinate is not the application state. The reference separates the target from the visual position so overshoot cannot temporarily select a nonexistent third option. Ready: Content and accessible selection change on activation, independent of settling. Stronger: Remove the indicator and confirm the control remains understandable. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
An interruptible spring control with documented parameters, keyboard behavior and a reduced-motion alternative.
Rules, chance, a visual identity
Decide what never changes
Compose one manual SVG reference before generating variants.
The starting point
Start with this fixed input: Listening festival poster: title “Common Frequencies”, date “12 November”, place “North Hall”. The upper 28% is protected for facts; three colours and one family of arcs define the system.
Instructor reference response
The invariant is a readable facts zone plus a coherent arc field, not a fixed arrangement of every arc. The reference keeps essential text outside the randomized drawing region. Randomness explores a bounded composition and cannot change event facts. Ready: The manual reference and rule sheet identify fixed and variable properties. Stronger: Remove one colour and determine whether identity still holds. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A seeded SVG poster generator with Canvas PNG export with bounded parameters, three curated outputs and an export workflow.
Sound you can shape
Start with consent and a signal path
Draw the graph and enable the reference instrument explicitly before playing.
The starting point
Start with this fixed input: Three notes: C4=261.63Hz, E4=329.63Hz, G4=392Hz. Graph: oscillator→voice gain→master gain→analyser→destination. Start requires a button gesture.
Instructor reference response
The reference awaits AudioContext.resume and reports actual state. It begins at conservative digital gain and provides volume and Stop controls. These settings do not establish safe acoustic exposure at every device volume. No sound starts on page load. Ready: Enablement, unavailable-context handling and volume state are truthful. Stronger: Test a browser that leaves the context suspended and explain the recovery message. Revise if the claimed result lacks its supporting artifact or the difficult case is omitted. An alternative solution is valid when it meets the same observable contract.
Apply it to your project
A three-note browser instrument with smooth gain envelopes, clear controls and reliable stop behavior.
Made by learners
We will publish learner work and feedback when we have permission and can verify its origin. For now, explore the teaching examples and free lessons to judge the approach for yourself.