Svelte/Kit 101

A short introduction to the wonderful Svelte & SvelteKit land.

Prerequisites

Familiarize yourself with Svelte by reading through my blog post (Finnish only).

Workshop

Since I trust the Svelte/Kit authors more than myself to create a great "first touch" experience, we're going to be utilizing the official Svelte/Kit tutorials. The tutorials contain explanations, short exercises and solutions on different topics out of the box in the browser.

No need to clone any git repositories or setup local environments for this workshop 🎉

The tutorials are divided into basic and advanced concepts for both Svelte and SvelteKit. Depending on your interests and prior knowledge of Svelte, there are four different options to start from. I've listed some recommended topics to at least go through under each option.

Read the instructions carefully and try to resist pressing the solve button as much as possible to get the most out of the workshop. I also suggest typing the code yourself instead of copy-pasting it from the instructions which might result in a better learning experience.

Basic concepts (recommended)

Generally, these are the topics I would recommend for most. The basic tutorials go through the fundamentals of the framework and can provide some "a-ha" moments even for those who might already have some experience with Svelte.

I recommend at least skimming through the Basic Svelte tutorial before moving on to the Basic SvelteKit tutorial.

• Basic Svelte
  • Reactivity
  • Props
  • Logic
  • Stores
• Basic SvelteKit
  • Routing
  • Loading data
  • Forms
  • Errors and redirects

Advanced concepts

If you're already a Svelte connoisseur, the advanced tutorials might be more suitable for you.

The Advanced Svelte tutorial has a lot of information about more specialised Svelte features and animations and transitions if those are something of interest.

For the Advanced SvelteKit tutorial, I suggest at least going through the hooks section.

• Advanced Svelte
  • Animation
  • Component composition
• Advanced SvelteKit
  • Hooks
  • Advanced routing

Useful resources

• Svelte documentation
• SvelteKit documentation