If you’ve been in frontend development for the last few years, you must have heard about Svelte, an open source framework that stands out by its performance advantages, lightweight nature and simplicity of use. According to the recent StackOverflow Developer Survey, Svelte is the most desired JavaScript framework to work with. No surprises, since it’s modern, incredibly fast - thanks to its compiler approach, components based, and easy to learn!
With Svelte 5 on the horizon, the framework is actively developed and thoroughly adjusted to the needs of modern web development. So, if you would like to join the community of happy Svelte developers and try to use Svelte for your next hobby or business project, here is the list of the useful learning resources that will help you to dive into the wonderful world of Svelte.
The easiest way to get started with Svelte framework is to read their official tutorial and documentation. Of course, you need to have some basic knowledge of JavaScript, HTML and CSS to grasp the concepts they present.
Svelte by Example - a nice website that provides a practical way for learning Svelte through hands-on examples and exercises. By the words of its author, Sebastian De Deyne, it’s a gentle introduction to Svelte & Svelte Kit.
Getting started with Svelte - a list of tutorials available on developer.mozilla.org, providing a comprehensive introduction to Svelte from foundational concepts to more advanced topics. Start with the introduction article and dive deeper into the Svelte universe.
Frontend Development Beyond React: Svelte - another detailed introduction to Svelte written by Héla Ben Khalfallah, who looks at Svelte from the viewpoint of a React developer.
Build a User Management App with Svelte - this tutorial in Sapabase Docs shows how to build a basic user management app that authenticates and identifies the user, stores user’s profile information in the database, and allows the user to log in and update their profile.
Let’s learn SvelteKit by building a static Markdown blog from scratch - a Josh Collinsworth’s introduction article to SvelteKit and a tutorial on using SvelteKit to set up a prerendered static blog with Markdown, Sass and an API.
If in your learning process you prefer video tutorial instead of a written ones, check this list of free Youtube videos explaining what Svelte is and how to start building web apps with Svelte and SvelteKit.
Joy of Code offers video tutorials that are explaining how to get started with Svelte and SvelteKit:
Tan Li Hau, a core contributor of Svelte, provides beginners with a comprehensive Svelte tutorial that including 87 instructional videos:
Codevolution has video tutorials for Svelte beginners, well-structured and detailed:
There are also video tutorials on Svelte and SvelteKit from Net Ninja, featuring stunning visuals and presented in a remarkably clear and understandable manner:
You can also look at free video course on Vercel website that covers the Svelte basics as well as SvelteKit features:
If you have some basic knowledge and would like to start developing real apps with Svelte, there are some paid video courses that guide you in app development with Svelte.
First of all, let’s mention a video course from Hunter Johnston aka huntabyte, the creator of Melt UI, Bits UI and Shadcn-svelte libraries. This course consists of 73 video lessons explaining how to build a real SaaS app with Svelte, SvelteKit, Stripa and Supabase. You can later use this demo app as a basis for your own SaaS product. See the details here:
Another great option are courses on FrontendMasters from Rich Harris, the author of Svelte. And who knows more about Svelte than Rich, right? The courses are available under the paid subscription (from $39 per month) and are his speeches from conferences:
You can also check courses by Joshua Nussbaum on creating a SaaS app with SvelteKit and a database app with SvelteKit and Prisma (each course is $60):
One more way to learn how to build to a custom full stack Svelte-based application from scratch is the course teached by Amy Dutton, a lead maintainer of Redwood.js. This course includes everything you need to build modern web application: styling, transitions & animations, custom actions, backend, athentication, testing and more ($78 - starter, $148 - complete course):
And, of course, there are some good Svelte courses on Udemy:
If you’re someone who enjoys learning from books, here are some options to explore. Dive into the world of Svelte development with these recommended reads but be prepared that you need some familiarity with JavaScript, frontend development, and basic Svelte concepts to follow along smoothly and without confusion.
“Beginning Svelte Development”: Develop web applications with SvelteJS - a lightweight JavaScript compiler” by Greg Lim and Daniel Correa. This book helps you quickly learn Svelte through hands-on practice. Code along with examples to quickly grasp Svelte’s concepts and create essential components for frontend applications: adding shopping items, product rating and designing navigation bars. See on Amazon (4.3 stars)
“Svelte with Test-Driven Development”: Advance your skills and write effective automated tests with Vitest, Playwright, and Cucumber.js” by Daniel Irvine. This book might be a good choice if you’re starting to build Svelte apps and want to create efficient, maintainable code. It will help you learn effective automated testing practices to build and maintain Svelte apps. The book explains the concept Test Driven Development (TDD) and teaches you how to develop tests to ensure your code is behaving as expected. See on Amazon (4.9 stars)
“Real-World Svelte”: Supercharge your apps with Svelte 4 by mastering advanced web development concept” by Tan Li Hau, a co-maintainer of Svelte framework. With this book, you go deeper into into advanced Svelte concepts and thoroughly explore what is it that sets Svelte apart from other frameworks. Each concept of the framework is well explained and followed by examples. See on Amazon (4.9 stars)
If when learning Svelte, you need a place to ask questions, seek guidance, and receive support from more experienced Svelte developers, there are friendly online communities:
To stay up to date with Svelte news and updates, you may follow Svelte Society channel where they post useful tutorials, weekly reviews on what’s going on with Svelte, and Svelte Summit videos.
Who knows, maybe one day you may share your knowledge with new Svelte developers and support their learning efforts. And when you start building your awesome Svelte apps, take a look at our SVAR Svelte Core, a UI library of most commonly used controls, and our advanced Svelte UI components: feature-rich DataGrid, interactive Gantt Chart and easy-to-navigate File Manager. They can be great time savers in your development process.
Happy learning, and coding! :)