Sveltejs Academy logo
HTMLBeginnerWebLevels A1 → C122 languages

Sveltejs Academy

Build fast and simple user interfaces with modern techniques at Svelte Academy. A CoddyKit learning path of 41 short courses and 163 interactive lessons, with a 24/7 AI tutor at your side.

Courses
41
Lessons
163
Interactive steps
2,114
Free to start
Course 1
Curriculum

41 courses in this path

Every course in the Sveltejs Academy path, in learning order. The first one is free.

1

A13 lessonsFree

Understand what Svelte is, why it takes a totally different approach to building UIs compared to React or Vue, and why developers who try it tend to fall in love with it.

2

A14 lessonsPRO

Get started with Svelte by understanding what makes it different from other frameworks, setting up your first project, and exploring the project structure and development workflow.

3

A14 lessonsPRO

Learn how to write Svelte components from scratch, use reactive variables, interpolate expressions, and create computed values with reactive declarations.

4

A24 lessonsPRO

Pass data between Svelte components using props, set default values, and forward props elegantly with $$props and $$restProps.

5

A24 lessonsPRO

Control what renders in your Svelte templates using conditional blocks, iterate over arrays with each blocks, and force re-renders with key blocks.

6

A24 lessonsPRO

Handle DOM events in Svelte, use event modifiers to simplify common patterns, dispatch custom events from child components, and forward events up the tree.

7

A24 lessonsPRO

Synchronize form inputs and DOM elements with Svelte variables using bind: directives for text, checkboxes, radio groups, and element references.

8

B14 lessonsPRO

Control what happens at each stage of a Svelte component's life with onMount, onDestroy, beforeUpdate, afterUpdate, and the tick utility.

9

B14 lessonsPRO

Share reactive state across components using Svelte's built-in store primitives, subscribe to them with the $ shorthand, and create readable stores with custom logic.

10

B14 lessonsPRO

Compose Svelte stores by deriving computed stores from one or more sources and build fully custom stores that implement the store contract.

11

B14 lessonsPRO

Project content into Svelte components using default and named slots, provide fallback content, and check whether slots have been filled.

12

B14 lessonsPRO

Animate elements entering and leaving the DOM with Svelte's built-in transition directives, configure timing and easing, and handle asymmetric in/out transitions.

13

B14 lessonsPRO

Go beyond transitions with Svelte's animate directive for list reordering, physics-based spring animations, and tweened value interpolation.

14

B14 lessonsPRO

Navigate SvelteKit's file-based routing system, create dynamic routes with parameters, and use layout files to share UI across pages.

15

B14 lessonsPRO

Load data for your pages using SvelteKit's load functions, handle errors gracefully, and run server-only logic in +page.server.js.

16

B14 lessonsPRO

Pass data deep into the component tree without prop drilling using Svelte's Context API, and understand when to prefer context over stores.

17

B14 lessonsPRO

Improve discoverability by setting dynamic meta tags, OpenGraph cards, JSON-LD structured data, and managing canonical URLs in SvelteKit.

18

B24 lessonsPRO

Handle HTML form submissions on the server with SvelteKit form actions, enhance them progressively with JavaScript, and return validation errors.

19

B24 lessonsPRO

Build RESTful and streaming API endpoints within SvelteKit using +server.js files, handle multiple HTTP methods, and return typed JSON responses.

20

B24 lessonsPRO

Intercept and transform every request with SvelteKit's server hooks, log errors centrally, and compose multiple hooks with the sequence utility.

21

B24 lessonsPRO

Provide great user experiences when things go wrong by customizing error pages, distinguishing expected from unexpected errors, and handling errors in nested layouts.

22

B24 lessonsPRO

Deepen your understanding of Svelte's reactive system: reactive statement ordering, when to use stores vs local state, and avoiding stale closures.

23

B24 lessonsPRO

Attach reusable imperative behaviors to DOM elements with Svelte actions, handle parameters and updates, and build practical actions like clickOutside and tooltip.

24

B24 lessonsPRO

Write custom Svelte transition functions from scratch, control timing parameters, and create morphing and advanced CSS versus JS-driven transitions.

25

B24 lessonsPRO

Animate values over time with Svelte's spring and tweened motion stores, use interpolation functions, and apply motion to SVG paths.

26

B24 lessonsPRO

Master SvelteKit's advanced layout system: group layouts, route-level overrides, breaking out of layouts, and sharing data across the layout hierarchy.

27

B24 lessonsPRO

Implement authentication in SvelteKit using cookie-based sessions, secure JWTs, route protection in hooks, and OAuth with Lucia Auth.

28

B24 lessonsPRO

Deploy SvelteKit applications anywhere using the right adapter: static sites, Node.js servers, Vercel, and Cloudflare Workers.

29

B24 lessonsPRO

Discover Svelte 5's runes system which replaces compiler magic with explicit reactive primitives for state, derived values, and side effects.

30

B24 lessonsPRO

Use $props() for typed component props and the new snippet syntax with {#snippet} and {@render} for powerful content composition in Svelte 5.

31

B24 lessonsPRO

Control rendering strategy per route in SvelteKit: choose between universal and server-only load, prerender static pages, and disable SSR when needed.

32

B24 lessonsPRO

Write reliable unit tests for Svelte components and stores with Vitest and @testing-library/svelte, covering rendering, interaction, and module mocking.

33

B24 lessonsPRO

Write end-to-end tests for SvelteKit applications using Playwright, covering page navigation, form interactions, and CI pipeline integration.

34

B24 lessonsPRO

Add Tailwind CSS, D3.js data visualizations, Leaflet maps, and rich text editors to SvelteKit projects using Svelte actions and component wrappers.

35

B24 lessonsPRO

Harden your SvelteKit application against CSRF, XSS, and injection attacks, manage environment variables safely, and rate-limit API routes.

36

C14 lessonsPRO

Explore advanced Svelte 5 rune patterns including raw state, complex derivations, manual effect cleanup, and migrating from Svelte 4.

37

C14 lessonsPRO

Build sophisticated, reusable Svelte component APIs using render props with snippets, higher-order components, the builder pattern, and compound components.

38

C14 lessonsPRO

Deliver fast initial page loads by streaming promises from load functions, defer slow data, and stream from API routes using ReadableStream.

39

C14 lessonsPRO

Optimize SvelteKit app performance with automatic code splitting, enhanced image handling, lazy loading, and profiling tools.

40

C14 lessonsPRO

Architect large Svelte applications with feature-module store patterns, event buses, optimistic UI updates, and undo/redo with store history.

41

C14 lessonsPRO

Combine everything you've learned to build a production-ready full-stack app with auth, a database via Drizzle ORM, deployment on Vercel, and end-to-end type safety.

CoddyKit PRO

Unlock all 41 courses in this path, and every other path

AI tutor, certification exam and certificate. Works on web, iOS and Android.

See all plans
Yearly$29.90 / yearAbout $2.49 a monthPay onceLifetime$69.99 onceNo renewals. PRO forever.
Course Overview

Build Real Interfaces with Svelte and SvelteKit

Svelte takes a fundamentally different approach from React and Vue — instead of shipping a runtime to the browser, it compiles your components to highly efficient vanilla JavaScript at build time. The result is smaller bundles, faster load times, and less boilerplate. SvelteKit, the official application framework, adds file-based routing, server-side rendering, form actions, and deployment adapters so you can ship production-grade apps on any platform. This track covers both, from first component through full-stack architecture.

What You Will Learn

You will start with Svelte's component model — props, template syntax, conditionals, loops, and two-way binding — then move into the reactivity system, lifecycle functions, and the store primitives: writable, readable, derived, and custom stores. On the UI side you will work with slots, the Context API, CSS transitions, animations, and Svelte Motion. The SvelteKit chapters cover routing, data loading, SSR and prerendering, form actions, API routes, hooks, error handling, advanced layouts, auth patterns, and deployment adapters. The track also covers Svelte 5's rune system, testing with unit tests and Playwright E2E, third-party library integration, and SvelteKit security practices.

The Learning Path

Forty-one courses progress from A1 through C1. The first seven courses establish the foundations: components, props, events, and template syntax. B1 introduces stores, slots, transitions, and your first SvelteKit pages and data-loading patterns. B2 — the largest block — works through form actions, API routes, hooks, advanced reactivity, Svelte Actions, custom animations, auth patterns, adapters, Svelte 5 runes, testing, and security. The track closes at C1 with advanced runes, advanced component patterns, SvelteKit streaming, performance optimization, large-scale state management, and a capstone full-stack SvelteKit application.

How It Works

Each course is split into short, focused lessons you complete in the built-in code editor with real-time feedback. An AI tutor is available whenever you get stuck, and every concept is reinforced with hands-on exercises before you move to the next topic.

How You'll Learn

  1. 01

    Interactive Lessons

    Hands-on coding exercises with real-time feedback

  2. 02

    AI Tutor

    Get instant help from our AI when you're stuck

  3. 03

    Built-in Editor

    Write and run code directly in your browser

  4. 04

    Certificate

    Earn a certificate when you complete the course

FAQ

Frequently Asked Questions

Is the Sveltejs Academy course free?

Yes. You can start the Sveltejs Academy course for free and complete its interactive lessons at no cost. An optional PRO subscription unlocks advanced AI tools and a shareable certificate.

Do I need prior experience to learn HTML?

No. The course begins with the fundamentals and gradually moves to more advanced topics, so you can start even with no prior HTML experience.

How will I learn HTML on CoddyKit?

You learn by doing. Short interactive lessons pair a clear explanation with a hands-on coding exercise that runs in real time, and a 24/7 AI tutor gives personalized help whenever you get stuck.

Do I get a certificate for completing Sveltejs Academy?

Yes. PRO learners can take an exam and earn a shareable certificate of completion with a verifiable code for the Sveltejs Academy course.

Can I learn HTML on my phone?

Yes. CoddyKit is available on the web and as native iOS and Android apps, so you can learn HTML on any device and your progress syncs across them.

How much does CoddyKit PRO cost?

The first course of Sveltejs Academy is free. CoddyKit PRO unlocks every course: $5.90 per week, $7.90 per month, $29.90 per year, or $69.99 once for lifetime access with no renewals.

How long does it take to complete Sveltejs Academy?

Sveltejs Academy has 41 courses and 163 lessons. Most lessons take about 5–10 minutes, so the whole path is roughly 19 hours of hands-on practice, at your own pace.

Start Sveltejs Academy Now

Join thousands of learners mastering programming with AI-powered lessons.