Svelte

UI frameworks · 4 stages · 28 units in the full series · 28 published in English

Series goal

Learn Svelte 5 runes and component lifetimes, and compare the same learning-card requirements with React·Vue.

Prerequisites

JavaScript·HTML·CSS

Practice approach and scope

Learning units are not calendar days. Read the explanation and tasks, check the completion criteria, then move on. Use each example as a starting point: change variables and observe the results. Built-in examples and tasks requiring a separate environment are identified separately. Opening an example does not complete a unit.

Existing unit IDs and notes are preserved. The original 01, 02, and 03 examples occupy positions 1, 14, and 28 in the expanded sequence, so the number in the address may differ from the learning order.

Only published English units are linked below. The full series has 28 units.

Learning path

Stage 1 · Compilation and Runes Basics

01. Compilation and Reactivity — Editable example
02. Markup and Event Attributes — External example · preview instructions
03. Update Paths in $state Objects — External example · preview instructions
04. Calculating Filters with $derived — External example · preview instructions
05. Conditional Blocks and Empty States — External example · preview instructions
06. Keyed Each and Card Identity — External example · preview instructions
07. Form Bindings and Validation — External example · preview instructions

Stage 2 · Component Contracts and Effects

08. $props and Change Callbacks — External example · preview instructions
09. $bindable and the Editor Contract — External example · preview instructions
10. Changing Row Presentation with Snippets — External example · preview instructions
11. DOM References and tick — External example · preview instructions
12. $effect Dependencies and Cleanup — External example · preview instructions
13. onMount and Initial Resources — External example · preview instructions
14. Events and Resource Cleanup — Editable example

Stage 3 · Stores and Workspace State

15. writable and the Subscription Contract — External example · preview instructions
16. Shared Runes Modules — External example · preview instructions
17. Connecting Workspaces with Context — External example · preview instructions
18. Requests and Stale Results — External example · preview instructions
19. Await Blocks and State Guidance — External example · preview instructions
20. Saving and Restoring Drafts — External example · preview instructions
21. Key Blocks and Draft Preservation — External example · preview instructions

Stage 4 · Canvas Verification and Framework Comparison

22. Separating Canvas Loops from Reactivity — External example · preview instructions
23. Style Scope and Accessibility — External example · preview instructions
24. Checking Lifetimes During Transitions — External example · preview instructions
25. Observing Compilation Output and Performance — External example · preview instructions
26. Regression Scenarios for the Same Contract — External example · preview instructions
27. Preparing a Three-Framework Comparison — External example · preview instructions
28. Framework Comparison — Editable example

Capstone project and deliverables

An actual .svelte learning workspace, a comparison table using identical inputs across three frameworks, and subscription/timer cleanup records.

Keep the implementation, run instructions, baseline and changed conditions, failure cases, and recovery steps together. Do not report unmeasured performance or tests you have not run as results.