Course Contents

#1 Getting started with Svelte

• 00:00 What is Svelte?
• 01:19 Svelte documentation & tutorials
• 04:11 The Svelte REPL
• 05:03 Hello world!
• 06:48 Svelte compiler output
• 11:06 Updating state in a click event listener
• 16:08 Downloading your REPL code to your computer
• 21:00 Setting up a new Svelte web site project
• 23:25 Setting up a new Svelte component project
• 25:25 Review

#2 Using templating syntax to render data

• 00:00 Introduction
• 00:36 Using {#await} to fetch data
• 07:00 Using {#each} to loop over lists
• 12:06 Using {#if} to branch on conditions
• 14:37 Using {@html} to render raw html
• 16:48 Review

#3 Data fetching strategies for components

• 00:00 Introduction
• 00:22 Refactoring into child components
• 02:10 Adding props to a component
• 03:24 Using component slots to provide data
• 06:28 Refactoring code into separate JavaScript files
• 08:34 Sharing state across components
• 10:30 Reactive statements that update with state changes
• 13:55 Using functions as an alternative to reactive statements
• 14:40 Techniques to ensure Svelte re-renders when necessary
• 19:49 Review

#4 Using components to simplify complex web user interfaces

• 00:00 Introduction
• 00:37 Using components to simplify the user interface
• 01:44 Advantages and challenges of using two-way data binding
• 05:00 Using simple UI components to achieve a consistent design
• 06:45 Using props to pass event handlers to child components
• 09:51 Allowing events to bubble up to parent components
• 12:40 Opening a modal window when a button is clicked
• 14:23 Setting up a form in the modal
• 19:33 Closing the modal by dispatching a custom Svelte event
• 22:30 Fixing a Svelte warning by specifying a prop default
• 23:13 Submitting a form and preventing a page refresh
• 26:27 Passing form data when dispatching a custom events
• 31:32 Adding form validation
• 32:08 Review

#5 Building custom stores for state management

• 00:00 Introduction
• 00:28 What are Svelte stores?
• 02:38 Importing and using a custom store
• 03:50 Writing to a custom store with the set method
• 04:25 Using the Svelte readable store library
• 06:20 Sharing a store between components
• 09:48 Using a custom store for fetched data
• 15:05 Updating a collection in a custom store
• 19:09 Alternative approach to updating a custom store
• 20:30 Filtering data using a derived store
• 25:35 Sending data to the server from a custom store
• 27:01 Review

#6 Integrating Svelte into an existing web application

• 00:00 Introduction
• 00:29 Downloading a project from the Svelte REPL
• 03:01 Developing locally with hot module reloading
• 03:45 Modifying the build process to embed into a site
• 06:14 Rendering a Svelte component on a page
• 07:28 Building Svelte code for production
• 09:53 Adding Svelte CSS to a site
• 11:16 Using a Svelte component inside a React component
• 19:51 Other approaches to using Svelte in your application

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!