Lessons

Install the minimum tools (Terminal, VS Code, Node, Git) so you can run a prototype kit locally.

Learn the small set of terminal commands you need to install dependencies, run the kit, and read errors.

Clone a kit repo, install dependencies, and start the dev server.

Optimise your screen, tools, and folder layout so you spend time designing — not wrestling your setup.

Learn a small set of VS Code habits (shortcuts + command palette) that make everyday edits much faster.

Let someone else on the same Wi‑Fi open your in-progress prototype.

View and test your local prototype on another device on the network.

Prototype modal interactions (and decide when you should avoid them).

Stop browsers auto-linking numbers (especially on mobile).

Implement a realistic “check your answers” page with change links that return to the summary.

Build a reusable macro and import it cleanly across pages.

Seed sensible defaults so prototypes are quicker to test and demo.

Use realistic example data to make prototypes credible and easier to test.

Use routing patterns to handle multiple URLs with one handler.

Embed a responsive video in a unit page with basic accessibility considerations.

Understand commits, branches, remotes, and how GitHub fits in.

Use GitHub in a way that supports collaboration without slowing you down.

Adopt a small set of habits that make prototyping faster and less painful.

Set up a reliable workflow and learn the minimal terminal/editor skills needed for prototyping.

Decide when to use macros vs raw HTML, and keep components maintainable.

Use the browser console and network tab to debug prototype behaviour.

Add targeted logs to inspect prototype data while you build.

Seed default answers so the prototype is instantly usable for demos and UR.

Use GitHub Desktop to commit, push, and open a PR without living in the terminal.

Keep multiple prototype versions cleanly separated and easy to navigate.

Use branching logic and seeded data to represent different user types.

Prototype a search flow using structured data and basic filtering.

Add realistic validation and error states without overengineering.

Split filters per version/area and control how they are loaded.

Capture screenshots consistently to support review and documentation.

Create branches for changes, keep them small, and merge safely.

Add simple switches so prototypes behave differently when developing vs sharing.

Override the header service name on specific pages without changing everything.

Introduce colour tokens and apply them consistently.