Svelte.js - The Complete Guide (incl. Sapper.js)

Build high-performance web applications with SvelteJS - a lightweight JavaScript compiler

  • Maximilian Schwarzmüller
  • 4.65
  • (2917 reviews)
  • 12.5 hrs
  • 196 lectures
  • Udemy
Svelte.js - The Complete Guide (incl. Sapper.js)

What you will learn?

  • SvelteJS from scratch, with zero knowledge assumed
  • All the theory and practical applications of Svelte
  • Core concepts and advanced techniques to build Svelte applications

Your trainer

Maximilian Schwarzmüller

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS 2 in a lot of projects. I love both worlds nowadays!

196 lessons

Easy to follow lectures and videos covering subject details.

12.5 hours

This course includes hours of video material. Watch on-demand, anytime, anywhere.

Certificate of Completion

You will earn a Certificate of Completion at the end of this course.

Course curriculum

Getting Started42:27

  • Introduction02:39
  • Why Svelte?07:13
  • What is Svelte?04:29
  • Join our Online Learning Community00:21
  • Setting Up a First App & The Course Project11:09
  • Writing Some Svelte Code07:26
  • Course Outline04:48
  • How To Get The Most Out Of The Course03:27
  • Course Resources00:54

  • Module Introduction03:55
  • Using Curly Braces & Understanding the Core Syntax05:36
  • Reactive Variables05:48
  • More Reactivity02:09
  • Binding to Element Properties04:16
  • Two-Way Binding Shortcut01:41
  • Using Multiple Components08:30
  • Components & Communication via Props03:45
  • Diving Deeper into Bindings06:00
  • Using Self-Extending Properties01:10
  • Outputting HTML Content03:32
  • A XSS Example00:13
  • Setting Dynamic CSS Classes04:15
  • Time to Practice: The Basics1 question
  • Wrap Up01:16
  • Useful Resources & Links00:01

  • Module Introduction00:49
  • Using "if" Statements in HTML05:25
  • if, else & else-if04:27
  • Outputting Lists with "each"08:05
  • "each", "else" & Extracting the Index02:11
  • Lists & Keys09:55
  • Time to Practice: Conditionals & Loops1 question
  • A Closer Look at List Keys04:16
  • Wrap Up00:36
  • Useful Resources & Links00:02

  • Module Introduction00:58
  • Updating Arrays & Objects Immutably02:29
  • Understanding Event Modifiers05:04
  • Using Inline Functions03:11
  • Wrap Up00:44
  • Useful Resources & Links00:02

  • Module Introduction01:18
  • Project Setup & A First Component08:41
  • Different Ways of Mounting Components05:07
  • How to Embed Widgets00:37
  • Adding Data03:35
  • Adding a New Component (MeetupItem)04:18
  • Working with Different Component Types03:32
  • Passing Data Into Components05:37
  • Adding a "MeetupGrid" Component04:25
  • Adding New Meetups via a Form09:24
  • Creating a "TextInput" Component11:08
  • Adding a Custom "Button" Component05:58
  • Wrap Up02:20
  • Useful Resources & Links00:02

  • Module Introduction01:43
  • Understanding the Different Component Types01:40
  • Component Communication Overview03:01
  • Event Forwarding04:52
  • Emitting Custom Events04:54
  • How to Extract Event Data02:27
  • Using Spread Props & Default Props06:56
  • Working with Slots06:25
  • Named & Default Slots03:30
  • Example: Opening & Closing a Modal03:18
  • Using Slot Props05:26
  • The Component Lifecycle - Theory04:53
  • Creation & Update Lifecycle Hooks in Action07:27
  • Using "tick()"09:18
  • Wrap Up00:56
  • Useful Resources & Links00:02

  • Module Introduction00:33
  • Adding Default Props03:22
  • Communication via Custom Events11:16
  • Utilizing Slots05:11
  • Creating an "EditMeetup" Component07:56
  • Communicating Between Components03:45
  • Time for More Slots!03:21
  • Adding a Re-Usable "Modal" Component07:05
  • Finishing the "Modal" Component03:29
  • Wrap Up00:37
  • Useful Resources & Links00:02

  • Module Introduction00:34
  • Two-Way Binding Refresher02:46
  • Understanding Custom Component Bindings06:05
  • Relying on Automatic Number Conversion02:55
  • Binding Checkboxes & Radio Buttons04:53
  • Binding <select> Dropdowns02:04
  • Binding to Element References05:17
  • Binding to Component References02:49
  • Validating Forms & Inputs06:43
  • Wrap Up00:58
  • Useful Resources & Links00:02

  • Module Introduction00:33
  • Exploring Different Validation Solutions02:31
  • Adding Validation & Error Output to the "TextInput" Component03:36
  • Adding Some Validation Logic03:24
  • Finishing "TextInput" Validation07:00
  • Validating the Overall Form02:50
  • Improvements & Wrap Up03:16
  • Useful Resources & Links00:02

  • Module Introduction01:03
  • What's the Problem?03:41
  • Creating a Writable Store & Subscribing05:34
  • Updating Store Data04:35
  • Stores and Stateful & Presentational Components01:56
  • Managing Store Subscriptions03:52
  • Using Autosubscriptions02:49
  • A Second Store!06:48
  • Subscribing for a Short Period03:48
  • Understanding Readable Stores08:45
  • Unlimited Power with Custom Stores07:56
  • Wrap Up01:21
  • Derived Store & Store Bindings00:27
  • Useful Resources & Links00:02

  • Module Introduction01:13
  • A Possible Error00:11
  • Setting Up a Store03:00
  • Using a Custom Store08:09
  • Tapping into the Store from Different Components05:06
  • Adding a "MeetupDetail" Component12:33
  • Preparing the "Edit Meetup" Form05:09
  • Continuing Work on the "Edit" Feature09:13
  • Adding a "Delete" Functionality03:22
  • Adding a "Filter" Component08:48
  • Some Final Steps02:36
  • Wrap Up00:48
  • Useful Resources & Links00:02

  • Module Introduction00:53
  • Animating Values with a Tweened Store06:54
  • Using a Spring Store Instead08:20
  • Preparing a Transition Example03:38
  • Element Transitions06:30
  • More on Transitions05:17
  • Using Different "in" and "out" Transitions01:30
  • Animating Passive (Affected) Items02:51
  • Deferred Transitions00:08
  • Wrap Up00:47
  • Useful Resources & Links00:02

  • Module Introduction01:03
  • Animating the Modal03:26
  • Animating the Meetup Items04:53
  • Animating the "Favorite" Badge & Wrap Up01:25
  • Useful Resources & Links00:02

  • Module Introduction01:32
  • Adding a REST API02:44
  • Sending Data via a POST Request06:58
  • Showing a Loading Indicator & Sending Correct Data03:16
  • Fetching & Transforming Data04:12
  • Things to Consider02:48
  • Using the "await" Block03:35
  • Http + A Store05:34
  • Wrap Up00:59
  • Useful Resources & Links00:02

  • Module Introduction00:34
  • Storing Meetups on a Server09:16
  • Fetching & Transforming Data04:53
  • Adding a Loading Spinner05:44
  • Updating via PATCH06:32
  • Sending "Favorite" Updates & Deleting Data03:56
  • Fixing the Order of Items01:09
  • Adding Error Handling07:13
  • Wrap Up00:47
  • Useful Resources & Links00:02

  • Module Introduction00:35
  • Dynamic Components07:22
  • Recursive Components06:10
  • Accessing Windows, Body & Head06:45
  • Cross-Component Scripts05:38
  • Useful Resources & Links00:02

  • Module Introduction00:46
  • What and Why?04:58
  • Understanding the Folder Structure02:53
  • Inspecting the Web Page02:20
  • Filenames & Routes06:45
  • Error & Layout Pages02:16
  • Preloading in Components05:12
  • Pre-fetching Data06:31
  • Migrating the Meetup Project Files into the Sapper Project06:45
  • Fetching Data on the Client Side09:14
  • Prefetching Data on the Server06:12
  • Syncing Fetched Data & the Store03:32
  • Editing & Deleting Meetups01:58
  • Rendering the MeetupDetail Page07:49
  • Adding Global CSS00:43
  • Wrap Up00:37
  • Useful Resources & Links00:02

  • Module Introduction00:35
  • Different App Types & Deployment Options04:35
  • Building the App04:38
  • Rendering Content Correctly on the Server02:52
  • Deploying a SSR App03:19
  • Hosting a Static Site04:49
  • Wrap Up00:42
  • Useful Resources & Links00:02

  • Svelte vs React vs Angular vs Vue08:56
  • Course Roundup00:55
  • Bonus Content00:20
Enroll now
Online Courses

Learning Svelte doesn't have to be hard. Here is our curated list of recommended online courses that will guide you step-by-step in the learning process.

Learn more
Books

Are you an avid book reader? Do you prefer paperback, or maybe Kindle version? Take a look at our curated list of Svelte related books and take yourskills to the next level.

Learn more
YouTube videos

The number of high-quality and free Svelte video tutorials is growing fast. Check this curated list of recommended videos - there is no excuse to stop learning.

Learn more