Framewise
Independent practice

Three timeboxes. No step-by-step instructions.

Choose the exercise that exposes your current edge, start the timer, and work from the observable criteria below — not a numbered walkthrough.

20 minutes · Foundation

Profile card

Build a profile card with an avatar, name, role, an optional status note, and one action. The card must survive a much longer name without breaking its layout.

AvatarName / role / statusAction
Wireframe — Profile card
Prior skills
Auto Layout (Mission 2)
Content to use
Use a placeholder avatar shape, a name of your choice, a role such as “Senior Product Designer”, and an action label such as “Message”.
Required states
Default · Long name (2 lines) · Status note removed
Responsive expectation
Test the card at its natural width, then compressed to 280 px. Nothing should clip or overlap.
Scoring criteria
  • Uses Auto Layout, not manual positioning, for the whole card
  • Name area uses Hug or Fill correctly — it does not truncate or overlap the action
  • Removing the status note does not leave an empty gap or broken spacing
  • Rebuildable from memory in the 20-minute timebox
Stress tests
  • Replace the name with a 30-character name.
  • Remove the status note entirely.
  • Resize the card to 280 px wide.

Reflect: Which part of the card broke first when you narrowed it, and what layout rule fixed it?

Related lesson: Auto Layout→

Independent timebox20:00
30 minutes · Core system

Responsive feature card

Build one feature card component with an icon, title, body copy, a text link, and an optional badge — then place four instances in a row that wraps.

IconTitle + badgeBodyLink
Wireframe — Responsive feature card
Prior skills
Auto Layout (Mission 2), Components and variants (Mission 3)
Content to use
Use any short feature title and 1–2 sentences of body copy. Give one instance a badge (e.g. “New”) and leave the others without it.
Required states
With badge · Without badge · Long body copy (3–4 sentences)
Responsive expectation
Test the row at 1,440, 768, and 390 px. At narrow widths the row should wrap to one column, not shrink text to illegibility.
Scoring criteria
  • Built as a component with instances, not four duplicated groups
  • Badge visibility is a Boolean property, not a manually hidden layer
  • Row wraps cleanly at narrow widths with consistent gaps
  • Long body copy does not overlap the link or badge
Stress tests
  • Swap in a body paragraph twice the original length.
  • Toggle the badge on all four instances.
  • Reduce to three cards, then to five.

Reflect: What would you need to change on the main component if the badge text itself needed to vary (not just show/hide)?

Related lesson: Components→

Independent timebox30:00
45 minutes · Applied build

Workload detail

Build a workload-details screen: overview data, recovery readiness, a short list of recent events, and one primary recovery action — across desktop and mobile.

OverviewReadinessEventsRecovery action
Wireframe — Workload detail
Prior skills
Days 1–5, Component and variable libraries
Content to use
Invent a workload name, status, region, and recovery point in time. Use at least three recent events with a timestamp and short description.
Required states
Loading · Populated · Recovery action disabled with a reason
Responsive expectation
Build the desktop layout first, then design a deliberate mobile adaptation — not a scaled-down copy. Test at 1,440, 768, and 390 px.
Scoring criteria
  • Assembled from your existing component and variable libraries, not new one-off elements
  • Mobile view is a genuine transformation (reordered/stacked), not the desktop frame shrunk
  • Loading and disabled states are visually distinct and explain themselves
  • The primary recovery action remains reachable at every width
Stress tests
  • Use a 64-character workload name.
  • Show zero recent events.
  • Disable the recovery action and explain why in the UI.

Reflect: What information did you deliberately cut on the mobile layout, and why was it safe to cut?

Related lesson: Dashboard→

Independent timebox45:00