JavaScript beginners
You know the fundamentals but haven’t built a modern reactive UI yet. This course gives you a clear, guided path into Svelte without assuming framework experience.
Svelte.js - The Complete Guide
Build high-performance web applications with SvelteJS - a lightweight JavaScript compiler
Course Overview
About This Course
You’ve got JavaScript basics, but building a modern UI still feels like a lot of ceremony: boilerplate, complex setup, and apps that don’t feel as fast as they should. You want something that’s reactive and clean—without needing to “join” a huge framework first.
This course shows you how Svelte works by teaching the rules that make its compiler shine, then immediately applying them in practice. You’ll move through focused theory + hands-on modules, with assignments and tasks that force the concepts to stick instead of staying abstract.
By the end, you’ll be able to create production-ready Svelte apps that compile into small, optimized bundles, communicate with a backend, and can be run on a real server. You’ll know how to structure your UI into reusable building blocks and ship an app that feels lightweight, fast, and maintainable.
What You'll Learn
You’ll go from Svelte’s compiler-driven mindset to shipping reactive apps that fetch data, manage state, and can be pre-rendered on a server for SEO.
Write Svelte syntax
Build UIs using Svelte’s base syntax and core features, so your “normal JavaScript” and markup follow the rules Svelte needs to compile efficient browser code.
Render dynamic UI
Create interfaces that adapt to data by rendering conditional content and lists, so your pages update cleanly as state changes without manual DOM work.
Build reactive apps
Implement reactive, high-performance behavior in your UI so updates stay fast and predictable, helping you deliver modern interfaces that load quickly and run smoothly.
Compose with components
Split your app into reusable components, pass data around them, and create maintainable building blocks you can combine to scale a real frontend application.
Manage state with stores
Use Svelte stores to manage application data efficiently, keeping shared state consistent across components without turning your codebase into a tangle of props.
Connect server and SEO
Send and fetch data from a backend server, then pre-render your app on a server to improve SEO—so your Svelte project works beyond a purely client-side demo.
Ready to get started?
See enrollment optionsPrerequisites
Basic JavaScript knowledge is required.
No prior SvelteJS knowledge (or experience with React, Angular, or Vue) is needed.
Who Is This Course For?
Frontend developers
You want to build high-performance web interfaces and you’re tired of unnecessary complexity. Svelte is a lightweight option when you care about speed and clean code.
Framework switchers
You already use React, Angular, or Vue and you’re curious about a production-ready alternative. This course helps you evaluate Svelte as a way to build with less code and a faster result.
Curriculum Overview
Start NowPreview the structure and pacing of this course before you begin.
Getting Started41m
- 01Introduction2:38 min
- 02Why Svelte?7:13 min
- 03What is Svelte?4:29 min
- 04Join our Online Learning Community0:00 min
- 05Setting Up a First App & The Course Project11:09 min
- 06Writing Some Svelte Code7:26 min
- 07Course Outline4:48 min
- 08How To Get The Most Out Of The Course3:27 min
- 09Course Resources0:00 min
- 10The Academind Pro Referral Program0:00 min
Base Syntax & Core Features1h 4m
- 01Module Introduction3:55 min
- 02Using Curly Braces & Understanding the Core Syntax5:36 min
- 03Reactive Variables5:48 min
- 04More Reactivity2:09 min
- 05Binding to Element Properties4:16 min
- 06Two-Way Binding Shortcut1:41 min
- 07Using Multiple Components8:30 min
- 08Components & Communication via Props3:45 min
- 09Diving Deeper into Bindings6:00 min
- 10Using Self-Extending Properties1:10 min
- 11Outputting HTML Content3:32 min
- 12A XSS Example0:00 min
- 13Setting Dynamic CSS Classes4:15 min
- 14Assignment - Basics (Problem)2:13 min
- 15Assignment - Basics (Solution)10:27 min
- 16Wrap Up1:16 min
- 17Useful Resources & Links0:00 min
Working with Conditionals & Loops46m
- 01Module Introduction0:49 min
- 02Using "if" Statements in HTML5:25 min
- 03if, else & else-if4:27 min
- 04Outputting Lists with "each"8:05 min
- 05"each", "else" & Extracting the Index2:11 min
- 06Lists & Keys9:55 min
- 07Assignment - Conditionals & Loops (Problem)1:19 min
- 08Assignment - Conditionals & Loops (Solution)9:07 min
- 09A Closer Look at List Keys4:16 min
- 10Wrap Up0:36 min
- 11Useful Resources & Links0:00 min
A Closer Look At Reactivity12m
- 01Module Introduction0:58 min
- 02Updating Arrays & Objects Immutably2:29 min
- 03Understanding Event Modifiers5:04 min
- 04Using Inline Functions3:11 min
- 05Wrap Up0:44 min
- 06Useful Resources & Links0:00 min
Course Project - First Steps1h 5m
- 01Module Introduction1:18 min
- 02Project Setup & A First Component8:41 min
- 03Different Ways of Mounting Components5:07 min
- 04How to Embed Widgets0:00 min
- 05Adding Data3:35 min
- 06Adding a New Component (MeetupItem)4:18 min
- 07Working with Different Component Types3:32 min
- 08Passing Data Into Components5:37 min
- 09Adding a "MeetupGrid" Component4:25 min
- 10Adding New Meetups via a Form9:24 min
- 11Creating a "TextInput" Component11:08 min
- 12Adding a Custom "Button" Component5:58 min
- 13Wrap Up2:20 min
- 14Useful Resources & Links0:00 min
Diving Deeper Into Components1h 6m
- 01Module Introduction1:43 min
- 02Understanding the Different Component Types1:40 min
- 03Component Communication Overview3:01 min
- 04Event Forwarding4:52 min
- 05Emitting Custom Events4:54 min
- 06How to Extract Event Data2:27 min
- 07Using Spread Props & Default Props6:56 min
- 08Working with Slots6:25 min
- 09Named & Default Slots3:30 min
- 10Example: Opening & Closing a Modal3:18 min
- 11Using Slot Props5:26 min
- 12The Component Lifecycle - Theory4:53 min
- 13Creation & Update Lifecycle Hooks in Action7:27 min
- 14Using "tick()"9:18 min
- 15Wrap Up0:56 min
- 16Useful Resources & Links0:00 min
Course Project - Components Deep Dive46m
- 01Module Introduction0:33 min
- 02Adding Default Props3:22 min
- 03Communication via Custom Events11:16 min
- 04Utilizing Slots5:11 min
- 05Creating an "EditMeetup" Component7:56 min
- 06Communicating Between Components3:45 min
- 07Time for More Slots!3:21 min
- 08Adding a Re-Usable "Modal" Component7:05 min
- 09Finishing the "Modal" Component3:29 min
- 10Wrap Up0:37 min
- 11Useful Resources & Links0:00 min
Working with Bindings & Forms35m
- 01Module Introduction0:34 min
- 02Two-Way Binding Refresher2:46 min
- 03Understanding Custom Component Bindings6:05 min
- 04Relying on Automatic Number Conversion2:55 min
- 05Binding Checkboxes & Radio Buttons4:53 min
- 06Binding Dropdowns2:04 min
- 07Binding to Element References5:17 min
- 08Binding to Component References2:49 min
- 09Validating Forms & Inputs6:42 min
- 10Wrap Up0:58 min
- 11Useful Resources & Links0:00 min
And 11 more sections in the full course.
Ready to Get Started?
Choose the option that works best for you.
Single Course
Svelte.js - The Complete Guide
One Payment. Lifetime Access.
$69one-time
- One-time payment
- All future updates for this course
- Downloadable resources & code
- Certificate of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Lifetime access
Most Popular
All-Access Membership
Everything we teach. One subscription.
$25/mo
$4,729+ worth of courses
- Full access to all courses
- All future courses included
- Downloadable resources & code
- Certificates of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Cancel anytime