Free through lesson 3

Svelte & SvelteKit for Beginners

From setting up with sv to template syntax, reading the compiler's output, $state and $derived, snippets and bind, SvelteKit routing and load, form actions, TypeScript, testing, and adapters and deployment. Over 30 lessons, you'll get to the point where you can explain in your own words what the choice of "no virtual DOM" changes, and decide between React, Vue, and Svelte. The compiled output, build sizes, and test output are all real measurements from running Svelte 5.57.1 and SvelteKit 2.70.3.

Start from lesson 1 Unlock every course

Curriculum

The 30 lessons are split into 6 chapters. We recommend going in order from chapter 1, but feel free to dip into whatever interests you. Note: .svelte files can't run in the browser here, so try them in the project you create in lesson 2. Lessons that only check an idea are set up to run in plain JavaScript. The prerequisite is the basics of JavaScript; knowing TypeScript and React or Vue makes the comparison in the final lesson hit harder.

Chapter 1 — Getting Started with Svelte (lessons 1–5)

See for yourself, from its actual output, that Svelte is a compiler rather than a "library." You'll set up your environment and cover template syntax and scoped CSS.

1

What Is Svelte? (Choosing Not to Use a Virtual DOM)

Learn how the .svelte you write is turned into plain JavaScript before it runs. Then build the same counter in React and Svelte and compare the resulting sizes.

Free
2

Creating a Project with sv (and Reading What's Inside)

Create a SvelteKit project with npx sv create and check which versions were installed. Covers each generated folder's role and how settings now live in vite.config.ts.

Free
3

What the Compiler Does (Reading Its Output)

Turn a .svelte file into JavaScript with svelte.compile() and read the output line by line. See that browser and server get different functions, and that there's no virtual DOM.

Free
4

Template Syntax (Embedding Values and Control Blocks)

Embed values with a single pair of braces and branch with {#if}, {#each}, and {#await}. Covers attributes, shorthand, and how a template ends up as plain conditions and loops.

🔒 Basic
5

Styles Stay Inside Their File

See, via the generated class names, how CSS in a style block doesn't leak outside the component. Covers when to use :global and the unused-selector warning.

🔒 Basic

Chapter 2 — Runes and Reactivity (lessons 6–12)

With the four runes $state, $derived, $effect, and $props, you'll build up how the screen changes when values change. At the end, you'll learn to "read" Svelte 4's $: and export let.

6

$state: When a Value Changes, the Screen Changes

See, from a mini implementation and the generated code, how just turning a plain let into $state makes the screen follow along. Covers where $state works and why nothing happens without assignment.

🔒 Basic
7

$state Reacts All the Way Down (vs. $state.raw)

Confirm with tests that the screen follows changes inside arrays and objects. Covers $state.raw for when you don't want reactivity, and $state.snapshot for passing values out.

🔒 Basic
8

Making Derived Values with $derived

Anything computable from other values should be $derived, not state. Measure that it's computed only when read and then cached, and use $derived.by for long expressions.

🔒 Basic
9

$effect Is the Last Resort

Treat $effect as "a tool for syncing with the outside world" and measure the order cleanups run in. Covers why not to use it to sync state, and what to use instead.

🔒 Basic
10

Receiving Data with $props()

Receive values from the parent with destructuring, using defaults and rest props. Covers why putting props straight into $state stops updates, and the warning the compiler gives.

🔒 Basic
11

Runes Work Outside .svelte Files Too

Name a file .svelte.js / .svelte.ts and $state works outside components. Covers bundling state and logic together to take them elsewhere, and putting them in class fields.

🔒 Basic
12

Reading Svelte 4 Code ($: and export let)

Translate the Svelte 4 style still found in online articles and existing repos into runes. Covers why $: doesn't run in the order written, and what becomes an error in runes mode.

🔒 Basic

Chapter 3 — Building with Components (lessons 13–18)

With events, bind, $bindable, and snippets, you'll gather the tools for composing components. You'll go as far as list keys and transitions.

13

Events Are Just Props

See onclick not as special syntax but as just another attribute. Covers passing callbacks to notify the parent, what to write now that modifiers are gone, and event delegation in action.

🔒 Basic
14

Binding Inputs to Values with bind:

Learn that bind:value is shorthand combining "pass a value" and "tell me when it changes." Covers checkbox, select, and group, and grabbing a DOM node with bind:this.

🔒 Basic
15

Returning Values from Child to Parent with $bindable

Make a child component's prop $bindable and the parent can bind: to it. Covers where to put defaults, and when you should use a callback instead.

🔒 Basic
16

Inserting Content with Snippets

Understand snippets, the successor to slots, as "functions that return markup" and can take arguments. Covers receiving children, optional snippets, and testing them.

🔒 Basic
17

List Keys and {#await}

Understand why each needs a key through the difference between matching by position and matching by id. Covers {#await}, which puts async values straight into templates, and its 3 branches.

🔒 Basic
18

Transitions and Animations

Add motion to entering and leaving with transition:, or set them separately with in: / out:. Check what's in svelte/transition, and why you can't test it in jsdom.

🔒 Basic

Chapter 4 — SvelteKit (lessons 19–25)

Cover routing where the folder structure becomes the URL, plus load, form actions, and APIs. At the end, you'll switch between SSR, CSR, and prerendering.

19

SvelteKit Routing (Folders Become URLs)

Learn how the folder layout of src/routes becomes the URL and what the special + files do. Receive parameters with the dynamic route [slug], and confirm by actually serving it.

🔒 Basic
20

Layouts and Error Pages

Wrap the pages below it with +layout.svelte and nest layouts for partial frames. Covers receiving children, when +error.svelte appears, and how to read page.status.

🔒 Basic
21

Preparing Data with load

Learn how what load in +page.js returns becomes the page's data. Covers the benefit of having data ready before the page shows, invalidating dependencies, and reruns on navigation.

🔒 Basic
22

load That Runs Only on the Server

A load in +page.server.js is never shipped to the browser. Covers why it can handle secrets, and how its return value reaches the browser (and why JSON isn't enough).

🔒 Basic
23

Receiving Input with Form Actions

Functions in the actions of +page.server.js receive POSTs. Covers forms that work without JavaScript, returning input errors with fail, and checking real responses with curl.

🔒 Basic
24

Building APIs with +server.js

Create endpoints that return JSON instead of HTML with +server.js. Split GET / POST by function name, read queries with URLSearchParams, and check the responses by actually calling them.

🔒 Basic
25

Switching Between SSR, CSR, and Prerendering

Learn how, by default, HTML is built on the server and then comes alive in the browser, and switch ssr, csr, and prerender per page. Includes the HTML actually written out at build time.

🔒 Basic

Chapter 5 — Real-World Skills (lessons 26–28)

Get a handle on three things that always come up on the job: TypeScript, shared state, and testing. By the end, you'll be able to check behavior with Vitest and Testing Library.

26

Using TypeScript (svelte-check)

Type your props and confirm that type checking reaches inside templates. Covers reading svelte-check, typing $props, and the ./$types that SvelteKit generates.

🔒 Basic
27

Sharing State (Stores and Runes)

Learn to read writable from svelte/store, then see that in Svelte 5 the default is runes in .svelte.js. Covers the danger of module-level state with SSR, and escaping it with context.

🔒 Basic
28

Writing Tests (Vitest and Testing Library)

Check component behavior with Vitest and @testing-library/svelte. Covers what's in the config file, why file names need .svelte, and what happens if you forget cleanup.

🔒 Basic

Chapter 6 — Finishing Up (lessons 29–30)

Pick an adapter, build, and get your app into a shippable form. Finally, line up React, Vue, and Svelte side by side so you can explain for yourself which one to choose.

29

Builds, Adapters, and Deployment

Measure with adapter-static and adapter-node how swapping the adapter changes where your app can live. Covers the classic failures on static hosting and how to read them.

🔒 Basic
30

React, Vue, or Svelte: Which to Choose

Line up the three approaches in a mapping table and see how each solves the same problems. Covers what doing the work at compile time changes and doesn't, and how to choose.

🔒 Basic

Once you finish all 30 lessons, move on to TypeScript for Beginners to protect your components with types. Compare with React Intro Course and Vue.js Fundamentals Course, and the mapping table from the final lesson carries straight over. A membership unlocks every course.