Svelte The Joy of Svelte

Learn Svelte fast.

Jesse Skinner with Jesse Skinner

The Joy of Svelte is a crash course for experienced web developers who want to learn Svelte quickly.

You won't just learn the basics. You'll learn how to take full advantage of Svelte's innovative reactive programming paradigm to develop elegant, well organised web applications. And you'll learn how to get started using Svelte in your legacy projects today.

Course Contents

#1 Getting started with Svelte

  • What is Svelte?
  • Svelte documentation & tutorials
  • The Svelte REPL
  • Hello world!
  • Svelte compiler output
  • Updating state in a click event listener
  • Downloading your REPL code to your computer
  • Setting up a new Svelte web site project
  • Setting up a new Svelte component project
  • Review

#2 Using templating syntax to render data

  • Introduction
  • Using {#await} to fetch data
  • Using {#each} to loop over lists
  • Using {#if} to branch on conditions
  • Using {@html} to render raw html
  • Review

#3 Data fetching strategies for components

  • Introduction
  • Refactoring into child components
  • Adding props to a component
  • Using component slots to provide data
  • Refactoring code into separate JavaScript files
  • Sharing state across components
  • Reactive statements that update with state changes
  • Using functions as an alternative to reactive statements
  • Techniques to ensure Svelte re-renders when necessary
  • Review

#4 Using components to simplify complex web user interfaces

  • Introduction
  • Using components to simplify the user interface
  • Advantages and challenges of using two-way data binding
  • Using simple UI components to achieve a consistent design
  • Using props to pass event handlers to child components
  • Allowing events to bubble up to parent components
  • Opening a modal window when a button is clicked
  • Setting up a form in the modal
  • Closing the modal by dispatching a custom Svelte event
  • Fixing a Svelte warning by specifying a prop default
  • Submitting a form and preventing a page refresh
  • Passing form data when dispatching a custom events
  • Adding form validation
  • Review

#5 Building custom stores for state management

  • Introduction
  • What are Svelte stores?
  • Importing and using a custom store
  • Writing to a custom store with the set method
  • Using the Svelte readable store library
  • Sharing a store between components
  • Using a custom store for fetched data
  • Updating a collection in a custom store
  • Alternative approach to updating a custom store
  • Filtering data using a derived store
  • Sending data to the server from a custom store
  • Review

#6 Integrating Svelte into an existing web application

  • Introduction
  • Downloading a project from the Svelte REPL
  • Developing locally with hot module reloading
  • Modifying the build process to embed into a site
  • Rendering a Svelte component on a page
  • Building Svelte code for production
  • Adding Svelte CSS to a site
  • Using a Svelte component inside a React component
  • Other approaches to using Svelte in your application
Jesse Skinner

Hi, I'm Jesse Skinner.

I've been working as a web developer for two decades, and I've never been this excited about web development! Svelte is a joy to work with, and I can't wait for you to learn Svelte and experience the joy for yourself.

spences10 A great video course on getting used to using Svelte. Loads of great tips and yet easy to understand. I've watched it through and love it! @JesseSkinner knows his onions and I'm happy to pay for this! - @spences10

ianmjones An excellent video course for getting up to speed with Svelte fast. Packed with information, yet easy to digest. Very easy to follow and logical, with no fluff or filler. Watched it through a couple of times now, and dipped back in to refresh my mind on a couple of things too. - @ianmjones

matthewhigley Well I’m doing it. I procrastinated so long in learning React, that another JS framework has come along that has stolen my attention. I’m committing to getting in on the ground floor of @sveltejs and going all-in. And it started with @JesseSkinner and The Joy of Svelte. - @matthewhigley

Learn the Joy of Svelte

You will get access to:

  • hours of streaming videos that will teach you how to use Svelte
  • full access to all the source code from the videos
  • video downloads for offline viewing
  • free updates with any additional content or revisions in the future

You will learn about:

  • getting started with Svelte
  • using templating syntax to render data
  • data fetching strategies for components
  • using components to simplify complex web user interfaces
  • building custom stores for state management
  • integrating Svelte into an existing web application
  • ...and more!

Money back guarantee

If you change your mind, you can always request a refund.

Can't afford it right now?
Don't have a credit card?
Looking for a team discount?

Please send me an email and we can work something out.

Sign up here for email updates!

Any questions or feedback? I'd love to hear from you!
Please send me an email at [email protected].

©2024 Coding with Jesse | Terms