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.

💻 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: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:
---

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

--

[freecodecamp]

⭐ Code ⭐
⌨ Introduction
⌨ Writing your 1st Svelte component
⌨ Style your Svelte component
⌨ Adding data to Svelte component
⌨ Reactivity in Svelte
⌨ Attaching events in Svelte
⌨ Reactive Declarations and Statements
⌨ tick()
⌨ Component and props
⌨ Component events
⌨ Forwarding component events
⌨ class: directive
⌨ Binding
⌨ bind:group
⌨ bind:this
⌨ Component Lifecycle
⌨ onMount
⌨ {#if} block
⌨ {#each} block
⌨ keyed {#each} block
⌨ keyed {#each} visualized
⌨ {#await} block
⌨ {#key} block
⌨ Context
⌨ Communicating through Context
⌨ Intro to Svelte store
⌨ Writable store
⌨ Readable store
⌨ Svelte store contract
⌨ Redux store as Svelte store
⌨ Valtio state as Svelte store
⌨ XState as Svelte store
⌨ DOM events as Svelte store
⌨ Immer for immutable Svelte store
⌨ derived() Svelte store
⌨ tweened() Svelte store
⌨ tweened() and spring()
⌨ Higher Order Store
⌨ RxJS as Svelte store
⌨ Reactive class property using stores
⌨ Undo / Redo with Svelte store
⌨ Reactive Context
⌨ 3 tips to manage complex store
⌨ get() Svelte store value
⌨ Store vs Context
⌨ Intro to Svelte action
⌨ Dynamic parameter in Svelte action
⌨ What if Svelte action does not exists?
⌨ Integrating UI library with Svelte action
⌨ Reusing event listeners with Svelte action
⌨ Creating events with Svelte action
⌨ The order of Svelte action
⌨ use:clickOutside
⌨ use:tooltip
⌨ use:viewport
⌨ use:popper with Popper
⌨ use:lazyImage
⌨ Ensemble Actions
⌨ <slot />
⌨ Passing data across <slot />
⌨ Slot forwarding
⌨ $$slots
⌨ Infinite List
⌨ Tabs
⌨ $$props and $$restProps
⌨ Lazy Component
⌨ <svelte:component />
⌨ <svelte:self />
⌨ <svelte:window />
⌨ <svelte:body />
⌨ <svelte:head />
⌨ <svelte:options />
⌨ Passing CSS Custom Properties to Component
⌨ <script context="module" />
⌨ Intro to Svelte transitions
⌨ Coordinating transitions
⌨ Transition Events
⌨ Easing
⌨ Accessible transitions
⌨ Solid color swipe transition
⌨ Flipboard transition
⌨ Client-side component API
⌨ SSR component API
⌨ Svelte compiler API
⌨ Svelte preprocess API
⌨ Hydrating Svelte component
⌨ svelte/register
⌨ Conclusion

[baobaobiz]

Man, he goes in depth and beyond sveltekit and web dev with such clarity and thoroughness. The community is lucky to have an advocate like Tan.

[xiaoshen]

"Mom, don't let anyone disturb me till tomorrow!!"

[UliTroyo]

Li Hau Tan is awesome. 23 hours of Svelte!

[abdou]

I like this guy's enthusiasm. He seems so happy to tell the world about Svelte.

[ibnaskhan]

I think this is one of the best course ever on Internet for Svelte

[IsxaaqAcademy]

Literally a full day course!
Thank you

[rv]

Thank you so much for doing this. I like how you show it the normal JS way and then simplify it to the Svelte way. Really shows the beauty of Svelte.

[raceordie]

The gold standard of Svelte Courses and it's free! Superb content and essential Svelte training.

[devtonite]

Amazing work! I'm only 3 hours in but I'm learning so much! Svelte is actually so simple and intuitive (coming from React/NextJS) and I'm so excited start working with it especially since Sveltekit 1.0 just dropped.

[misterFriend.]

The language aspect of this video is superb. I want to work as hard as possible to emulate people like this Engineer one day.

[onefloatavenue]

23 hours later

Li Hau: “I hope you learned something.”

Understatement of the century.

Thanks so much for going under the hood on all of this!

[zacharyburke]

Great course! Thank you so much! I was having a hard time in particular finding examples of stores that went much beyond the usual increment/decrement example. Thank you for covering them so well here and including the REPL's!

[Flyx]

23 hours omg! Thank you very much Li Hau Tan

[annismonadjem]

Thank you Tan Li Hau for the best Svelte tutorial on the internet. Svelte and SvelteKit are the best!

[owen_nx]

Svelte is smooth as butter. Can't wait to dive into it after completing the python data analysis certificate.

[annismonadjem]

Thank you Tan Li Hau for the tuturial. Great work! Hope you continue making more videos on Svelte and SvelteKit.

[flagoon]

This is quality. I should start learning svelte with that. TBH, it's like starting to learn again. So clear and precise and in depth...

[grimjim]

Starting this now. I'll update when I'm done.

[jayesh]

hi @Li Hau Tan, in the lesson of communicating through context 5: 10: 28, we could have also use key block passing colorObj.color as expression and included parent inside it, since it will re-create parent and child everytime the color has changed,