Learn Svelte – Full Course for Beginners

Learn Svelte in this full course for beginners! Svelte is a front-end JavaScript framework for making interactive webpages. ✏️ Li Hau Tan developed this course. Li is a core maintainer of Svelte. Check out his channel: 💻 Code links in top comment (because of YouTube’s description character limit) ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) 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 Links: Twitter: YouTube: Website: Supporting --- Svelte Svelte REPL Svelte Discord Svelte Twitter Svelte Society Svelte Society Twitter 🎉 Thanks to our Champion and Sponsor supporters: 👾 Nattira Maneerat 👾 Heather Wcislo 👾 Serhiy Kalinets 👾 Erdeniz Unvan 👾 Justin Hual 👾 Agustín Kussrow 👾 Otis Morgan -- Learn to code for free and get a developer job: Read hundreds of articles on programming: