Svelte & SvelteKit: The Complete Guide

Build & Deploy High Performance, Accessible, Server Side Rendered Web Apps that Work Even with JavaScript Disabled.

4.61 (594 reviews)

Udemy

platform

English

language

Web Development

What you will learn

Learn everything about Svelte from Scratch.

Learn everything about SvelteKit.

Use SvelteKit to create a high performance web application.

Create applications that work without JavaScript enabled.

Why take this course?

NOTE: The duration of the main content of the course is about 17.5 hours. The rest is for creating the Spotify app.

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 will start with the basics by creating simple components. And then gradually progress and create more complex components.

And while Svelte is a great tool to build components for the web, it's not an easy task to build an entire 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.

Finally we are going to bring everything together by building a Spotify clone with Svelte, SvelteKit and the Spotify API. Bringing together all the knowledge that we have learned during the course. You can check a demo of the app that we are going to build in the free videos.

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

Screenshots

Svelte & SvelteKit: The Complete Guide - Screenshot_01

Svelte & SvelteKit: The Complete Guide - Screenshot_02

Svelte & SvelteKit: The Complete Guide - Screenshot_03

Svelte & SvelteKit: The Complete Guide - Screenshot_04

Reviews

Rodrigo

August 6, 2023

What a course! Clear explanations, simple and illustrative examples, insights to what’s going on behind the scenes contribute to a really good learning experience :) The final project brings in a lot of value too, since it allows you to put every concept learnt to a good use in a challenging app. To me it feels like it would have been useful to have a first smaller project mostly as a warm up, and I was really expecting a deployment section at the end of the course, but man, I can’t complain, you’ve done such a good job here, Ali. Thank you! :)

Marlon

August 1, 2023

Good, a little too stretched out (specifically the part about what we build - no need to mention all subpages are supporting pagination)

Brandon

July 18, 2023

So far so good - the course material is straight to the points and focuses on what is important for beginners.

Felipe

July 12, 2023

Tengo que ver mas para dar una mejor calificacion pero hasta el momento ya eh aprendido mucho mas sobre svelte que en otros cursos.

Stephen

July 5, 2023

I am liking this instruction. Easy to understand and well thought out with examples and information of potential failures to watch out for.

Michael

June 21, 2023

Yes so far this course seems to be a pretty good match however I'm not super far in the course currently

Juan

June 8, 2023

Sveltekit is HUGE! As a professional developer over 20 years I can say the teacher REALLY knows what is he is talking about. Please disregard his comments on the speed. You need to be patient. If you follow the course you WILL succeed. If you quit early or read it quick you will miss info and will encounter all sorts of issues with CORS etc, just because you missed things. PLEASE BE PATIENT and watch ALL the course. It is the BEST I have seen in a while.

John

May 31, 2023

The project was a big disappointment for me. The course itself was good up until the project, but should have used Sveltekit from the start instead of Svelte. The project though was VERY heavily / technically front-end and very little to do with Svelte or Sveltekit.

Rakshith

May 28, 2023

Great Course! I'm just getting started with Frontend Development (coming from Python background) and found this course very exciting and easy to digest. Definitely recommend it!!

Sekti

May 16, 2023

The lesson is good, However, the additional information/alternative should be at the end of the essential part. For beginners, alternative way at the lesson will blow his mind for some reason. Sometimes will confused student, so do not mixed those thing. Focus on the essential part, then you can go with the alternative way

April 28, 2023

This is by far the best course you can find anywhere. The amount of material you get is beyond reproach. Very systematic and clear instruction and delivery. Thank you Mr. Ali Alaa.

Christopher

April 18, 2023

The course covered exactly what I was hoping to learn. The material was well presented and made a lot of sense. My only complaint was with the audio; the instructor's voice seemed muted.

Frederick

April 1, 2023

** im still in early part of course; but I am very impressed by this instructor. Each lesson is short and concise with the github code for each lesson. It is very well structured. He shows the non-svelte way and the svelte way in the beginning part of the course. I've been watching the lessons, then going straight to the provided code, and updating my local code piece by piece until I get it working, going back to the video if something does not make sense. Then once it works, I look it over and talk to myself to explain what modifications I just made to the code so I understand it. I believe the instructor is indeed an expert and doubly knows how to teach. I'd coded a couple projects in react before as a python person, switching to svelte seems very promising so far. A lot of the javascript in the course is brushed over, but that's to be expected for sake of time, chatgpt helps explain the weird javascript bits. To the instructor; your voice and cadence is very pleasant; you can slow down slightly to better annunciate words (so they're more understandable at 2x speed). It'd be nice to be explicit when coding (e.g. say exactly which html tag you are putting a bind or style, don't say i'm going to delete 'this' line but explain which line it is incase I'm just listening while I follow along). *these are just small suggestions that occassionaly pop up and shouldn't stop anyone from buying the course This is a mega course... I'll update my review if anything comes up, but keep up the good work and I hope you find financial success with the education path.

Juan

March 26, 2023

Ali, this course is amazing, to say thank you doesn't seem to be enough. There is so much more information than I could ever expect from the course. One of the best courses I have taken on Udemy.

Remy

March 25, 2023

The best course I've had so far on Udemy! One suggestion: make better use of the 1080p resolution available and display more of the code structure around the specific portion that is discussed.

Charts

Price

Rating

Enrollment distribution

Svelte & SvelteKit: The Complete Guide - Distribution chart