Step 1 • prereqs
HTML, CSS & Modern JavaScript beginner Svelte compiles to vanilla JS, so solid HTML/CSS and modern JavaScript (ES modules, destructuring, spread, async/await, fetch) are essential before touching the framework.
4h Step 2 • fundamentals
Svelte File Syntax beginner Learn the .svelte single-file component structure: the script block, scoped style, template expressions in {}, conditional {#if} blocks, {#each} loops, and the @html directive.
4h Step 3 • fundamentals
Reactivity & Runes (Svelte 5) beginner Understand Svelte 5's runes system: $state for reactive primitives and objects, $derived for computed values, $effect for side effects — replacing Svelte 4's $: syntax with explicit, composable primitives.
5h Step 4 • fundamentals
Components, Props & Events beginner Compose UIs from reusable components: declare props with $props(), pass callback functions as event handlers, use snippets (Svelte 5) for flexible content projection, and understand the component lifecycle.
5h Step 5 • fundamentals
Svelte Stores intermediate Share state across components with Svelte stores: writable for mutable state, readable for external sources, derived for computed cross-store values, and the auto-subscribe $ prefix shorthand.
5h Step 6 • intermediate
Transitions & Animations intermediate Add polished motion to Svelte apps: use built-in transitions (fade, fly, slide, scale), animate list reordering with the FLIP helper, and create custom CSS transitions.
4h Step 7 • sveltekit
SvelteKit Project & File-Based Routing beginner Scaffold a SvelteKit project with create-svelte, understand the src/routes directory convention, create +page.svelte files for routes, +layout.svelte for shared UI, and understand the URL-to-file mapping.
4h Step 8 • sveltekit
Load Functions & Server Data intermediate Fetch data before rendering with load functions: use +page.ts for universal load (runs on client and server), +page.server.ts for server-only data (DB queries, secrets), and pass data down via the data prop.
5h Step 9 • sveltekit
Form Actions & Progressive Enhancement intermediate Handle HTML forms natively with SvelteKit form actions: define server-side action handlers in +page.server.ts, use use:enhance for JavaScript-enhanced submission without page reload, and return validation errors.
5h Step 10 • sveltekit
API Routes & Server Hooks intermediate Create REST API endpoints with +server.ts route handlers, return JSON responses, handle request bodies, and use hooks.server.ts for middleware-like behaviour: authentication, logging, and request context.
5h Step 11 • intermediate
Server Hooks intermediate Implement hooks.server.ts to intercept every request with the handle() function — SvelteKit's middleware system. Use sequence() to compose multiple hooks. Add authentication checks, custom response headers, request logging, and locale detection. Use handleFetch() to modify outgoing server-side fetch requests. Implement handleError() for centralized error logging to Sentry or similar.
4h Step 12 • sveltekit
Authentication with Auth.js intermediate Add authentication to SvelteKit using Auth.js (formerly NextAuth.js): configure providers (GitHub, Google, credentials), access sessions in load functions and hooks, and protect routes with redirect logic.
6h Step 13 • intermediate
Error Handling intermediate Distinguish expected errors (thrown with SvelteKit's error() helper) from unexpected errors. Create +error.svelte pages at any route level for scoped error UIs — the nearest ancestor error page is used. Access $page.error and $page.status in templates. Handle 404s, authorization failures, and unhandled server exceptions. Use handleError() in hooks for logging unexpected errors with a unique error ID.
3h Step 14 • advanced
Rendering Modes: SSR, SSG & CSR intermediate Control rendering per-route with SvelteKit page options: prerender for static generation, ssr: false for client-only pages, streaming for progressive HTML, and understand the performance trade-offs of each.
4h Step 15 • advanced
Adapters & Production Deployment advanced Deploy SvelteKit with the right adapter: adapter-node for self-hosted Node, adapter-vercel/netlify/cloudflare for edge, configure $env/static/private and $env/dynamic/private for secrets, and set up a production build pipeline.
5h 