Learn Svelte by doing. Every topic is a piece of code you can read, copy, and run in a SvelteKit app — work through the lessons in order, from components and runes to data fetching, forms, and the patterns that make production UIs robust.
Svelte is just JavaScript — be comfortable with it (and ideally TypeScript) first.
Before you start
If you want to practice the exercises in this course on your computer:
Ctrl+`).pnpm dlx sv create my-app if you are using pnpm, or npx sv create my-app if you are using npm. This creates a my-app folder containing a SvelteKit project — the setup every example in this course is written for.my-app folder (File → Open Folder) and run pnpm dev (or npm run dev) in the terminal.src/routes/+page.svelte — with the dev server running, http://localhost:5173 updates every time you save the file.Components & Markup
Write your first components — .svelte files, props with $props, conditional rendering, each blocks and keys, events, and composition with snippets.
Runes & Reactivity
Master Svelte 5 runes — $state for reactive values, mutation-friendly updates, $derived for computed values, $effect for side effects, element refs, and reusable logic in .svelte.ts files.
Sharing State
Share state across components the right way — lift state to a common parent, two-way bind with $bindable, context for app-wide values, and shared stores in .svelte.ts modules.
Fetching Data
Load and mutate data in Svelte — render promises with {#await}, re-fetch when inputs change with $derived, and post writes with pending state.
Forms & Validation
Build forms that validate themselves — two-way binding with bind:value, Zod schemas that check data at runtime, and schema-driven error messages on submit.
Styling & UI
Style Svelte components — scoped styles and the class directive built into the language, Tailwind utility classes, and shadcn-svelte components you own.
Robust UIs
Make your app resilient and responsive — svelte:boundary to contain crashes, lazy-loaded components for smaller pages, and a five-line portal for modals.
Testing
Test components the way users use them with Vitest and Svelte Testing Library, then cover critical flows end-to-end in a real browser with Playwright.
Animation
Animate entrances, exits, and list reordering with the transition: and animate: directives built into Svelte — no library needed.