Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Svelte & SvelteKit: The Complete Guide
Bestseller
Rating: 4.6 out of 5(1,054 ratings)
8,414 students

Svelte & SvelteKit: The Complete Guide

Build & Deploy Full Stack, High Performance, Server Side Rendered Web Apps that Work Even with JavaScript Disabled.
Created byAli Alaa
Last updated 9/2025
English

What you'll learn

  • Learn everything about Svelte from Scratch.
  • Learn everything about SvelteKit.
  • Use SvelteKit to create a full stack high performance web application.
  • Create applications that work without JavaScript enabled.

Course content

19 sections207 lectures28h 30m total length
  • Before Getting Started2:34
  • What is Svelte?14:49
  • Svelte vs. React5:34
  • Svelte vs. SvelteKit & Creating a New SvelteKit Project6:38
  • Pure Functions2:12
  • The Microtask Queue7:03
  • Svelte Component Basics7:05
  • Adding Reactivity to Our Component5:17
  • Quick Note0:09

    Through out the lectures, We are going to  mention derived values and that they are read-only. This used to be the case but as of Svelte 5.25, you can now write to derived values: https://svelte.dev/docs/svelte/$derived#Overriding-derived-values

  • A Deep Dive into Signal Based Reactivity15:05
  • A Deep Dive into Signal Based Reactivity (cont.)6:59
  • More on Derived State15:24
  • Don't use Effects to Derive Values7:22
  • You Might Not Need to Use Effects7:21
  • $effect.pre & Lifecycle Functions11:25
  • Using Effects to Create a Counter Component18:10
  • Section Summary & Exercise Solution0:53

Requirements

  • JavaScript Knowledge is Required.
  • Basic TypeScript Knowledge is Preferred.
  • Basic SQL Knowledge is preferred in some sections.

Description

Svelte is a JavaScript framework that allows you to build state driven components. However what makes Svelte different from other frameworks like Angular, React and Vue; is that Svelte is a compiler. Svelte runs at build time. Which means your Svelte code will be compiled at build time into highly efficient imperative code that runs on the browser to carry out DOM operations. Other famous frameworks usually use a technique called the virtual DOM to decide how to update the DOM. This technique runs in the browser during run time. And that adds more overhead to the DOM calculations.


In this course we are going to learn everything about Svelte from scratch. We are going to start with the basics of signal based reactivity and we then we will create simple components. And then gradually progress and create more complex components and discuss more in depth features.


And while Svelte is a great tool to build components for the web, it's not an easy task to build an entire full stack application with just Svelte. That's why we have SvelteKit. SvelteKit is a framework for rapid development of robust, performant web applications. SvelteKit provides us out of the box with things like routing, server side rendering, pre-rendering and more. It provides us with a structure that we can follow to build high performance applications that are server side rendered and progressively enhanced.


In this course we are going to learn everything about SvelteKit. We are going to discuss pages and layouts, loading data, hooks, error handling, environment variables, pre-rendering, progressively enhanced form actions and more.


We are also going to use tools like PostgreSQL & Drizzle ORM for database management and BetterAuth and CASL for authentication and authorization.


So join now if you want to build high performance web applications with Svelte & SvelteKit!

Who this course is for:

  • JavaScript/Front-end developers willing to learn everything about building web components with Svelte.
  • Full stack developers looking to build a high performance, server side rendered applications with SvelteKit.