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