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: https://www.youtube.com/lihautan 💻 Code links in top comment (because of YouTube's description character limit) ⭐️ 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 Links:
Twitter: https://twitter.com/lihautan
YouTube: https://youtube.com/c/lihautan
Website: https://lihautan.com/
Supporting https://www.buymeacoffee.com/lihautan
—
Svelte https://svelte.dev/
Svelte REPL https://svelte.dev/repl
Svelte Discord https://svelte.dev/chat
Svelte Twitter https://twitter.com/sveltejs
Svelte Society https://sveltesociety.dev/
Svelte Society Twitter https://twitter.com/SvelteSociety 🎉 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: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news