Skip to content

Unit 3 · Interface development

Now the interface has to do something. You implement your design in Svelte and connect every button to an action.

Learning outcome Hours Term
RA1 — Generates graphical user interfaces with visual editors, using the editor's features and adapting the generated code. 20 1st

What you will learn

  • Link events to the actions they should trigger
  • Develop an application that includes the graphical interface you designed

Lessons

  1. Dev environment — create a SvelteKit project, run it, find your way around it and make your first commit
  2. Component syntax — one file for markup, styles and logic: braces, {#if}, {#each}, scoped styles and props
  3. Reactivity — make the screen follow the data with $state, $derived and $effect
  4. Events and actions — write the event-action table and wire it: handlers, callback props, keys and Undo
  5. Forms and validation — a form tied to state, with derived rules and errors that say why
  6. Layout with CSS — lay out a screen with Flexbox and Grid, and make it responsive with mobile-first media queries
  7. Routing and navigation — give every screen an address with file-based routing, a shared layout and dynamic routes
  8. Consuming data — move data to a REST API: fetch, load, POST and DELETE, plus error and empty states
  9. Figma to app — build your own app's main flow from your Figma design, through four checkpoints and a peer review
  10. Review and exam prep — revise the whole unit on one map, rehearse under exam conditions, and learn how the exam works