Course Intro

Welcome to Beginner SvelteKit: the complete course to start your journey building Svelte applications.

This course covers the Svelte basics as well as SvelteKit features. We'll be building an ecommerce site during this course. Each module contains the code for that specific part, so feel free to clone it and use it for reference as you follow along.

This course does not require prior Svelte knowledge. Having a basic understanding of JavaScript, however, will be helpful.

In this course, we will begin by covering the Svelte basics:

• What is Svelte and why use it?
• Creating a new SvelteKit project
• Svelte's reactivity
• Working with Svelte components

After covering the basics of Svelte, we will begin learning about SvelteKit features like:

• SvelteKit's file-based routing
• Creating layouts
• Using endpoints and the load function
• Prefetching data
• Adapting the app for deployment

By the end of this course, you will have a complete and solid foundation to begin building apps with SvelteKit.

If you're already familiar with some Svelte topics, feel free to jump ahead past certain modules. If you're completely new, let's spend some time discussing why we are using Svelte and why you might consider learning it.

Svelte allows us to build lightweight, modern, web applications. Rather than being a framework, Svelte is actually a compiler. This compiler takes your Svelte code as an input and uses it to generate optimized JavaScript code. Svelte allows us to ship as little code as possible to the client that is not only small in size, but also very efficient. As a result, Svelte is known for being extremely fast and minimal.

Svelte also allows us to achieve true reactivity in our app. Most other JavaScript frameworks rely on an API to tell it when data changed in order to know when to update the virtual DOM. If you are unfamiliar with the virtual DOM, it can be thought of as a copy of the original DOM, which can be easily manipulated and updated without the developer having to use DOM methods (e.g. document.createElement).

Today, most popular frameworks utilize the virtual DOM. This means that the reactivity of these frameworks is tied to the virtual DOM. Without the virtual DOM, it would be completely unaware when there are changes to the data. Svelte, however, takes a different approach. Instead of looking at the virtual DOM for changes, Svelte writes code that surgically updates the DOM when your app's state changes, allowing us to achieve true reactivity.

Svelte itself is just the UI layer. It allows us to build the user interface by taking our Svelte code and compiling it into JavaScript. However, it doesn't handle routing and server-side rendering. This is where SvelteKit comes in. It provides us with a built-in router, server-side rendering, code splitting, layouts, as well as many other features that provide increased performance and a better developer experience.

In the next module, we will create a new SvelteKit project and go through each file to understand the structure of a SvelteKit project.

Continue learning SvelteKit on Vercel: