Learn Svelte – Full Course for Beginners

Course Contents
(0:00:23) Introduction
(0:00:31) Writing your 1st Svelte component
(0:06:25) Style your Svelte component
(0:18:48) Adding data to Svelte component
(0:23:22) Reactivity in Svelte
(0:37:41) Attaching events in Svelte
(0:48:07) Reactive Declarations and Statements
(1:06:19) tick()
(1:19:06) Component and props
(1:29:09) Component events
(1:44:35) Forwarding component events
(1:56:17) class: directive
(2:02:31) Binding
(2:13:04) bind:group
(2:24:18) bind:this
(2:35:28) Component Lifecycle
(2:45:55) onMount
(2:55:27) {#if} block
(3:04:38) {#each} block
(3:22:46) keyed {#each} block
(3:46:33) keyed {#each} visualized
(4:06:58) {#await} block
(4:27:01) {#key} block
(4:40:10) Context
(4:56:21) Communicating through Context
(5:16:06) Intro to Svelte store
(5:29:07) Writable store
(5:32:11) Readable store
(5:40:25) Svelte store contract
(5:53:34) Redux store as Svelte store
(6:06:01) Valtio state as Svelte store
(6:18:55) XState as Svelte store
(6:25:34) DOM events as Svelte store
(6:42:50) Immer for immutable Svelte store
(7:12:07) derived() Svelte store
(7:28:08) tweened() Svelte store
(7:54:58) tweened() and spring()
(8:15:42) Higher Order Store
(8:44:41) RxJS as Svelte store
(8:55:39) Reactive class property using stores
(9:21:33) Undo / Redo with Svelte store
(10:22:02) Reactive Context
(10:27:56) 3 tips to manage complex store
(10:59:51) get() Svelte store value
(11:06:29) Store vs Context
(11:24:18) Intro to Svelte action
(11:30:16) Dynamic parameter in Svelte action
(11:34:08) What if Svelte action does not exists?
(11:58:58) Integrating UI library with Svelte action
(12:11:27) Reusing event listeners with Svelte action
(12:39:10) Creating events with Svelte action
(12:50:21) The order of Svelte action
(12:56:53) use:clickOutside
(13:02:51) use:tooltip
(13:37:09) use:viewport
(13:49:14) use:popper with Popper
(14:09:31) use:lazyImage
(14:19:04) Ensemble Actions
(14:51:43) slot
(15:04:35) Passing data across slot
(15:13:48) Slot forwarding
(15:30:32) $$slots
(15:39:41) Infinite List
(16:06:40) Tabs
(16:40:46) $$props and $$restProps
(17:06:19) Lazy Component
(17:40:37) svelte:component
(17:49:27) svelte:self
(17:55:25) svelte:window
(18:03:28) svelte:body
(18:07:14) svelte:head
(18:16:30) svelte:options
(18:45:27) Passing CSS Custom Properties to Component
(19:13:10) {@html}
(19:35:02) {@debug}
(19:40:39) script context=”module”
(20:00:04) Intro to Svelte transitions
(20:03:07) Coordinating transitions
(20:06:53) Transition Events
(20:10:49) Easing
(20:13:56) Accessible transitions
(20:23:01) Solid color swipe transition
(20:38:04) Flipboard transition
(20:54:28) Client-side component API
(21:20:03) SSR component API
(21:39:57) Svelte compiler API
(22:08:14) Svelte preprocess API
(22:25:52) Hydrating Svelte component
(22:57:06) svelte/register
(23:09:31) Conclusion