Svelte workshop

This project is a self contained workshop to get started with Svelte. Get from zero to having a grasp of what Svelte offers by following the steps in this repository.

This workshop is an overview based on the Svelte tutorial, and it's intended as a quick dive into Svelte, to get a developer quickly up to speed with Svelte and creating the first components right away.

What you will build?

Beatiful transitions, captioning effects, all making sure the user feels in control of the application. Too much trouble to build? Just go through this workshop to see for yourself.

How to use this repository

This workshop is divided in steps, each with its own branch. Start with the main branch, then step-1, step-2, ... Each branch has a README.md which proposes:

• Problem to solve
• Instructions to achieve the solution
• Expected outcome

For starter, this is the proposition for the first step:

Problem to solve

How to start a new Svelte project?

Instructions to achieve the solution

To generate a project, we're going to use a Svelte template, to speed things up and get you right to coding.

npx degit sveltejs/template my-svelte-workshop
cd my-svelte-workshop
npm install
npm run dev

Expected outcome

Having a Svelte ready project to start coding with. It should look like this:

Now check out the step-1 branch for the next step.

TLDR

For an even quicker overview, check the differences for each step:

• Setup
• Display list
• Listen to DOM events
• Update component State
• Add animation
• Passing propertie to child element
• Load data from server and handle loading state