0Pricing
Sveltejs Academy icon

Sveltejs Academy

HTMLFrontendWebBeginner

Build fast and simple user interfaces with modern techniques at Svelte Academy.

🤖 AI-Powered📚 41 courses👥 100,000+ learners⭐ 4.9 rating
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.

Start Learning →

How You'll Learn

🎯
Interactive Lessons
Hands-on coding exercises with real-time feedback
🤖
AI Tutor
Get instant help from our AI when you're stuck
💻
Built-in Editor
Write and run code directly in your browser
🏆
Certificate
Earn a certificate when you complete the course
Curriculum

41 Courses

Every course in the Sveltejs Academy learning path.

01

Welcome to Svelte

A13 lessons

Understand what Svelte is, why it takes a totally different approach to building UIs compared to React or Vue, and why developers who try i…

02

Svelte Introduction & Setup

A14 lessonsPRO

Get started with Svelte by understanding what makes it different from other frameworks, setting up your first project, and exploring the pr…

03

Your First Svelte Component

A14 lessonsPRO

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

04

Props & Component Communication

A24 lessonsPRO

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

05

Template Syntax: Conditionals & Loops

A24 lessonsPRO

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

06

Events & Event Handling

A24 lessonsPRO

Handle DOM events in Svelte, use event modifiers to simplify common patterns, dispatch custom events from child components, and forward eve…

07

Two-Way Binding

A24 lessonsPRO

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

08

Lifecycle Functions

B14 lessonsPRO

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

09

Svelte Stores: Writable & Readable

B14 lessonsPRO

Share reactive state across components using Svelte's built-in store primitives, subscribe to them with the $ shorthand, and create readabl…

10

Derived Stores & Custom Stores

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

Slots & Component Composition

B14 lessonsPRO

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

12

CSS Transitions

B14 lessonsPRO

Animate elements entering and leaving the DOM with Svelte's built-in transition directives, configure timing and easing, and handle asymmet…

13

CSS Animations

B14 lessonsPRO

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

14

SvelteKit Routing & Pages

B14 lessonsPRO

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

15

SvelteKit Data Loading

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

Context API

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

SvelteKit SEO & Meta

B14 lessonsPRO

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

18

SvelteKit Form Actions

B24 lessonsPRO

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

19

SvelteKit API Routes

B24 lessonsPRO

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

20

SvelteKit Hooks

B24 lessonsPRO

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

21

SvelteKit Error Handling

B24 lessonsPRO

Provide great user experiences when things go wrong by customizing error pages, distinguishing expected from unexpected errors, and handlin…

22

Advanced Svelte Reactivity

B24 lessonsPRO

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

23

Svelte Actions

B24 lessonsPRO

Attach reusable imperative behaviors to DOM elements with Svelte actions, handle parameters and updates, and build practical actions like c…

24

Custom Transitions & Animations

B24 lessonsPRO

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

25

Svelte Motion

B24 lessonsPRO

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

26

SvelteKit Layouts Advanced

B24 lessonsPRO

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

27

SvelteKit Auth Patterns

B24 lessonsPRO

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

28

SvelteKit Adapters & Deployment

B24 lessonsPRO

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

29

Svelte 5: Runes Introduction

B24 lessonsPRO

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

30

Svelte 5: Props & Snippets

B24 lessonsPRO

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

31

SvelteKit SSR & Prerendering

B24 lessonsPRO

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

32

Testing Svelte: Unit Tests

B24 lessonsPRO

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

33

Testing Svelte: E2E with Playwright

B24 lessonsPRO

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

34

Integrating Third-Party Libraries

B24 lessonsPRO

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

35

SvelteKit Security

B24 lessonsPRO

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

36

Svelte 5: Advanced Runes

C14 lessonsPRO

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

37

Advanced Component Patterns

C14 lessonsPRO

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

38

SvelteKit Streaming

C14 lessonsPRO

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

39

SvelteKit Performance

C14 lessonsPRO

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

40

State Management at Scale

C14 lessonsPRO

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

41

Building a Full-Stack SvelteKit App

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, a…

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.

Start Sveltejs Academy Now

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

Get Started Free →Browse All Courses