Introduction to Svelte (and SvelteKit)

Learn the concepts of Svelte in both theory and practice

This course provides an overview of the fundamentals of Svelte, a fast and simple frontend framework which is easy to learn and to use.

What you’ll learn

  • Basic and Advanced Svelte Features.
  • Building a Svelte Project.
  • Reactive Web Applications with Svelte.
  • Using Stores in Svelte.
  • Svelte Special Elements.
  • Fetching Data from an API.
  • SvelteKit Basics.

Course Content

  • Introduction –> 3 lectures • 13min.
  • Svelte Basics –> 12 lectures • 26min.
  • More Svelte Features –> 6 lectures • 23min.
  • Building a Svelte Project –> 10 lectures • 40min.
  • Component Lifecycle –> 2 lectures • 6min.
  • Special Elements –> 8 lectures • 14min.
  • Intro to SvelteKit –> 10 lectures • 29min.

Introduction to Svelte (and SvelteKit)

Requirements

  • The basics of HTML and JavaScript.

This course provides an overview of the fundamentals of Svelte, a fast and simple frontend framework which is easy to learn and to use.

It will start with introducing the basic concepts with quick examples provided – what does it mean that Svelte is component-based? What are those components built of? How to connect them to use one component inside of another one? How to transfer data between them? How to add logic / asynchronicity / reactivity to them?

Things like that.

The second building block will be about getting an app idea, making a plan about how it should look like, what Svelte components need to be used in order to implement it, what the functionalities of those components have to be, and what should be the relation between them.  And that app will be then built from scratch, step by step, using the basic Svelte concepts introduced previously.

The third part will go into more Svelte details, explaining the component lifecycle and the Svelte special elements. Finally SvelteKit, the popular Svelte framework will be introduced as well – what can it be used for? How does it make routing more efficient? What happens if I call the load method in a script tag with its context set to “module”? Is it a good idea to turn off server-side rendering?

Do these questions sound exciting to you? Then let’s give this course a try!

 

Get Tutorial