Course Contents

#1 Getting started with Svelte

• What is Svelte? 1:17
• Svelte documentation & tutorials 2:52
• The Svelte REPL 0:52
• Hello world! 1:45
• Svelte compiler output 4:18
• Updating state in a click event listener 5:02
• Downloading your REPL code to your computer 4:52
• Setting up a new Svelte web site project 2:25
• Setting up a new Svelte component project 2:00
• Review 0:38

#2 Using templating syntax to render data

• Introduction 0:36
• Using {#await} to fetch data 6:24
• Using {#each} to loop over lists 5:06
• Using {#if} to branch on conditions 2:31
• Using {@html} to render raw html 2:11
• Review 1:13

#3 Data fetching strategies for components

• Introduction 0:22
• Refactoring into child components 1:48
• Adding props to a component 1:14
• Using component slots to provide data 3:04
• Refactoring code into separate JavaScript files 2:06
• Sharing state across components 1:56
• Reactive statements that update with state changes 3:25
• Using functions as an alternative to reactive statements 0:45
• Techniques to ensure Svelte re-renders when necessary 5:09
• Review 2:08

#4 Using components to simplify complex web user interfaces

• Introduction 0:37
• Using components to simplify the user interface 1:07
• Advantages and challenges of using two-way data binding 3:16
• Using simple UI components to achieve a consistent design 1:45
• Using props to pass event handlers to child components 3:06
• Allowing events to bubble up to parent components 2:49
• Opening a modal window when a button is clicked 1:43
• Setting up a form in the modal 5:10
• Closing the modal by dispatching a custom Svelte event 2:57
• Fixing a Svelte warning by specifying a prop default 0:43
• Submitting a form and preventing a page refresh 3:14
• Passing form data when dispatching a custom events 5:05
• Adding form validation 0:36
• Review 2:01

#5 Building custom stores for state management

• Introduction 0:28
• What are Svelte stores? 2:10
• Importing and using a custom store 1:12
• Writing to a custom store with the set method 0:35
• Using the Svelte readable store library 1:55
• Sharing a store between components 3:28
• Using a custom store for fetched data 5:17
• Updating a collection in a custom store 4:04
• Alternative approach to updating a custom store 1:21
• Filtering data using a derived store 5:05
• Sending data to the server from a custom store 1:26
• Review 1:03

#6 Integrating Svelte into an existing web application

• Introduction 0:29
• Downloading a project from the Svelte REPL 2:32
• Developing locally with hot module reloading 0:44
• Modifying the build process to embed into a site 2:29
• Rendering a Svelte component on a page 1:14
• Building Svelte code for production 2:25
• Adding Svelte CSS to a site 1:23
• Using a Svelte component inside a React component 8:35
• Other approaches to using Svelte in your application 1:18

SvelteKit - Coming soon!

SvelteKit is still in beta, but shortly after SvelteKit 1.0 is released, you will automatically get access to additional videos where you can learn how to use SvelteKit!