Svelte.js - The Complete Guide

Build high-performance web applications with SvelteJS - a lightweight JavaScript compiler

Svelte.js (or just "Svelte") is a modern JavaScript compiler that allows you to write easy-to-understand JavaScript code which is then compiled to highly efficient code that runs in the browser.

You'll write your frontend application using normal JavaScript, following specific rules laid out by Svelte (which are of course taught in this course). As a result, the Svelte compiler will produce a small and highly optimized JavaScript bundle which can be deployed.

In this course, you'll learn all about Svelte, how it works, its core features and how to run your final app on a real server!

Svelte.js is a tool for building highly reactive, modern user interfaces for the web - and it's a great alternative to JavaScript frameworks and libraries like React.js, Angular or Vue.

What will you learn?

What is Svelte and why would you use it?
All the core features and base syntax
How to render conditional and list content
How to write reactive and fast web applications
All about components, how to pass data around and how to create re-usable building blocks
How to efficiently manage data in your application via Svelte stores
How to reach out to a backend server and send + fetch data
How to pre-render your app on a server and improve SEO

Is this course for you?

Svelte is a popular alternative to React.js, Angular and Vue and learning it will benefit any frontend web developer.

You don't need to know these frameworks to learn Svelte though - but if you do know them, you'll learn about an interesting alternative which might allow you to build your web projects with less code (and get an even faster app along the way!).

You need NO advanced JavaScript knowledge, basic knowledge will do.

If you're interested in building modern, reactive user interfaces that load quickly and run fast, SvelteJS is a tool you shouldn't overlook!

What's in the course?

Learn Svelte from scratch - zero knowledge assumed!
Theory and practice modules
A complete course project (the "meetup planner")
Assignments and tasks
All source code is attached to lectures and modules
30 day trial phase - get your money back with no questions asked if you're not happy!

Course content

Section 1Getting Started

Introduction
2:38
Why Svelte?
7:13
What is Svelte?
4:29
Join our Online Learning Community
1:00
Setting Up a First App & The Course Project
11:09
Writing Some Svelte Code
7:26
Course Outline
4:48
How To Get The Most Out Of The Course
3:27
Course Resources
1:00

Section 2Base Syntax & Core Features

Module Introduction
3:55
Using Curly Braces & Understanding the Core Syntax
5:36
Reactive VariablesPremium
5:48
More ReactivityPremium
2:09
Binding to Element PropertiesPremium
4:16
Two-Way Binding ShortcutPremium
1:41
Using Multiple ComponentsPremium
8:30
Components & Communication via PropsPremium
3:45
Diving Deeper into BindingsPremium
6:00
Using Self-Extending PropertiesPremium
1:10
Outputting HTML ContentPremium
3:32
A XSS ExamplePremium
1:00
Setting Dynamic CSS ClassesPremium
4:15
Assignment - Basics (Problem)Premium
2:13
Assignment - Basics (Solution)Premium
10:27
Wrap UpPremium
1:16
Useful Resources & LinksPremium
1:00

Section 3Working with Conditionals & Loops

Module IntroductionPremium
0:49
Using "if" Statements in HTMLPremium
5:25
if, else & else-ifPremium
4:27
Outputting Lists with "each"Premium
8:05
"each", "else" & Extracting the IndexPremium
2:11
Lists & KeysPremium
9:55
Assignment - Conditionals & Loops (Problem)Premium
1:19
Assignment - Conditionals & Loops (Solution)Premium
9:07
A Closer Look at List KeysPremium
4:16
Wrap UpPremium
0:36
Useful Resources & LinksPremium
1:00

Section 4A Closer Look At Reactivity

Module IntroductionPremium
0:58
Updating Arrays & Objects ImmutablyPremium
2:29
Understanding Event ModifiersPremium
5:04
Using Inline FunctionsPremium
3:11
Wrap UpPremium
0:44
Useful Resources & LinksPremium
1:00

Section 5Course Project - First Steps

Module IntroductionPremium
1:18
Project Setup & A First ComponentPremium
8:41
Different Ways of Mounting ComponentsPremium
5:07
How to Embed WidgetsPremium
1:00
Adding DataPremium
3:35
Adding a New Component (MeetupItem)Premium
4:18
Working with Different Component TypesPremium
3:32
Passing Data Into ComponentsPremium
5:37
Adding a "MeetupGrid" ComponentPremium
4:25
Adding New Meetups via a FormPremium
9:24
Creating a "TextInput" ComponentPremium
11:08
Adding a Custom "Button" ComponentPremium
5:58
Wrap UpPremium
2:20
Useful Resources & LinksPremium
1:00

Section 6Diving Deeper Into Components

Module IntroductionPremium
1:43
Understanding the Different Component TypesPremium
1:40
Component Communication OverviewPremium
3:01
Event ForwardingPremium
4:52
Emitting Custom EventsPremium
4:54
How to Extract Event DataPremium
2:27
Using Spread Props & Default PropsPremium
6:56
Working with SlotsPremium
6:25
Named & Default SlotsPremium
3:30
Example: Opening & Closing a ModalPremium
3:18
Using Slot PropsPremium
5:26
The Component Lifecycle - TheoryPremium
4:53
Creation & Update Lifecycle Hooks in ActionPremium
7:27
Using "tick()"Premium
9:18
Wrap UpPremium
0:56
Useful Resources & LinksPremium
1:00

Section 7Course Project - Components Deep Dive

Module IntroductionPremium
0:33
Adding Default PropsPremium
3:22
Communication via Custom EventsPremium
11:16
Utilizing SlotsPremium
5:11
Creating an "EditMeetup" ComponentPremium
7:56
Communicating Between ComponentsPremium
3:45
Time for More Slots!Premium
3:21
Adding a Re-Usable "Modal" ComponentPremium
7:05
Finishing the "Modal" ComponentPremium
3:29
Wrap UpPremium
0:37
Useful Resources & LinksPremium
1:00

Section 8Working with Bindings & Forms

Module IntroductionPremium
0:34
Two-Way Binding RefresherPremium
2:46
Understanding Custom Component BindingsPremium
6:05
Relying on Automatic Number ConversionPremium
2:55
Binding Checkboxes & Radio ButtonsPremium
4:53
Binding DropdownsPremium
2:04
Binding to Element ReferencesPremium
5:17
Binding to Component ReferencesPremium
2:49
Validating Forms & InputsPremium
6:42
Wrap UpPremium
0:58
Useful Resources & LinksPremium
1:00

Section 9Course Project - Bindings & Forms

Module IntroductionPremium
0:33
Exploring Different Validation SolutionsPremium
2:31
Adding Validation & Error Output to the "TextInput" ComponentPremium
3:36
Adding Some Validation LogicPremium
3:24
Finishing "TextInput" ValidationPremium
7:00
Validating the Overall FormPremium
2:50
Improvements & Wrap UpPremium
3:16
Useful Resources & LinksPremium
1:00

Section 10Managing State & Data with Stores

Module IntroductionPremium
1:03
What's the Problem?Premium
3:41
Creating a Writable Store & SubscribingPremium
5:34
Updating Store DataPremium
4:35
Stores and Stateful & Presentational ComponentsPremium
1:56
Managing Store SubscriptionsPremium
3:52
Using AutosubscriptionsPremium
2:49
A Second Store!Premium
6:48
Subscribing for a Short PeriodPremium
3:48
Understanding Readable StoresPremium
8:45
Unlimited Power with Custom StoresPremium
7:56
Wrap UpPremium
1:21
Derived Store & Store BindingsPremium
1:00
Useful Resources & LinksPremium
1:00

Section 11Course Project - Stores

Module IntroductionPremium
1:13
Setting Up a StorePremium
3:00
Using a Custom StorePremium
8:09
Tapping into the Store from Different ComponentsPremium
5:06
Adding a "MeetupDetail" ComponentPremium
12:33
Preparing the "Edit Meetup" FormPremium
5:09
Continuing Work on the "Edit" FeaturePremium
9:13
Adding a "Delete" FunctionalityPremium
3:22
Adding a "Filter" ComponentPremium
8:48
Some Final StepsPremium
2:36
Wrap UpPremium
0:48
Useful Resources & LinksPremium
1:00

Section 12Motion, Transitions & Animations

Module IntroductionPremium
0:53
Animating Values with a Tweened StorePremium
6:54
Using a Spring Store InsteadPremium
8:20
Preparing a Transition ExamplePremium
3:38
Element TransitionsPremium
6:30
More on TransitionsPremium
5:17
Using Different "in" and "out" TransitionsPremium
1:30
Animating Passive (Affected) ItemsPremium
2:51
Deferred TransitionsPremium
1:00
Wrap UpPremium
0:47
Useful Resources & LinksPremium
1:00

Section 13Course Project - Transitions

Module IntroductionPremium
1:03
Animating the ModalPremium
3:26
Animating the Meetup ItemsPremium
4:53
Animating the "Favorite" Badge & Wrap UpPremium
1:25
Useful Resources & LinksPremium
1:00

Section 14Network Interaction via Http

Module IntroductionPremium
1:32
Adding a REST APIPremium
2:44
Sending Data via a POST RequestPremium
6:58
Showing a Loading Indicator & Sending Correct DataPremium
3:16
Fetching & Transforming DataPremium
4:12
Things to ConsiderPremium
2:48
Using the "await" BlockPremium
3:35
Http + A StorePremium
5:34
Wrap UpPremium
0:59
Useful Resources & LinksPremium
1:00

Section 15Course Project - Http

Module IntroductionPremium
0:34
Storing Meetups on a ServerPremium
9:16
Fetching & Transforming DataPremium
4:53
Adding a Loading SpinnerPremium
5:44
Updating via PATCHPremium
6:32
Sending "Favorite" Updates & Deleting DataPremium
3:56
Fixing the Order of ItemsPremium
1:09
Adding Error HandlingPremium
7:13
Wrap UpPremium
0:47
Useful Resources & LinksPremium
1:00

Section 16Special Elements

Module IntroductionPremium
0:35
Dynamic ComponentsPremium
7:22
Recursive ComponentsPremium
6:10
Accessing Windows, Body & HeadPremium
6:45
Cross-Component ScriptsPremium
5:38
Useful Resources & LinksPremium
1:00

Section 17Routing & Server-side Rendering with Sapper

Module IntroductionPremium
0:46
What and Why?Premium
4:58
Understanding the Folder StructurePremium
2:53
Inspecting the Web PagePremium
2:20
Filenames & RoutesPremium
6:45
Error & Layout PagesPremium
2:16
Preloading in ComponentsPremium
5:12
Pre-fetching DataPremium
6:31
Migrating the Meetup Project Files into the Sapper ProjectPremium
6:45
Fetching Data on the Client SidePremium
9:14
Prefetching Data on the ServerPremium
6:12
Syncing Fetched Data & the StorePremium
3:32
Editing & Deleting MeetupsPremium
1:58
Rendering the MeetupDetail PagePremium
7:49
Adding Global CSSPremium
0:43
Wrap UpPremium
0:37
Useful Resources & LinksPremium
1:00

Section 18Deployment

Module IntroductionPremium
0:35
Different App Types & Deployment OptionsPremium
4:35
Building the AppPremium
4:38
Rendering Content Correctly on the ServerPremium
2:52
Deploying a SSR AppPremium
3:19
Hosting a Static SitePremium
4:49
Wrap UpPremium
0:42
Useful Resources & LinksPremium
1:00

Section 19Course Roundup

Svelte vs React vs Angular vs VuePremium
8:56
Course SummaryPremium
2:44

Course instructor

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.