Learn Svelte – Full Course for Beginners

Channel:
United States freeCodeCamp.org
Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=UGBJHYpHPvA


Duration: 0:00
202,978 views
4,900

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
⌨ ️ (2https://twitter.com/lihautane compiler8:14) Svelhttps://lihautan.com/ (22:25:52)https://www.buymeacoffee.com/lihautan57:06) svelthttps://svelte.dev/:09:31) Conclhttps://svelte.dev/repl  / lihautan  
Yhttps://svelte.dev/chat
Website: https:https://twitter.com/sveltejs/
Supporting htthttps://sveltesociety.dev/lihautan
---
Svelte httphttps://twitter.com/SvelteSocietylte REPL https://svelte.dev/repl
Svelte Discord https://svelte.dev/chat
Svelte Twitter   / sveltejs  
Svelte Society https://sveltesociety.dev/
Svelte Society Twitter   / sveltesociety  

🎉 Thanks to our Champion and Sponsor suhttps://www.freecodecamp.org/t
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erhttps://freecodecamp.org/news 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



Other Videos By freeCodeCamp.org


2022-11-10Learn TypeScript – Full Tutorial
2022-11-09Command Line Hacking – Over The Wire Bandit Walkthrough (CTF Wargame)
2022-11-08Microservice Architecture and System Design with Python & Kubernetes – Full Course
2022-11-02Microsoft 365 Fundamentals Certification (MS-900) — Full Course Pass the Exam!
2022-11-01Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB)
2022-10-27Learn Kotlin Programming – Full Course for Beginners
2022-10-26Graph Algorithms Crash Course (with Java)
2022-10-24Web Monetization API Tutorial – How to Add Microtransactions to a Website
2022-10-20Flutter Course – Build Full Stack Google Docs Clone
2022-10-19Harvard CS50 – Full Computer Science University Course
2022-10-17Learn Svelte – Full Course for Beginners
2022-10-12Docker Containers and Kubernetes Fundamentals – Full Hands-On Course
2022-10-11Build a Webshop – Angular, Node.js, TypeScript, Stripe
2022-10-06PyTorch for Deep Learning & Machine Learning – Full Course
2022-10-05Stack Data Structure Tutorial – Solve Coding Challenges
2022-10-04Learn Python by Thinking in Types - Full Course
2022-09-29Ecommerce Website Tutorial – Create a B2B App with Stripe + Postgres + REST API Backend
2022-09-28Code a 2D Game Using JavaScript, HTML, and CSS (w/ Free Game Assets) – Tutorial
2022-09-27Java Programming for Beginners – Full Course
2022-09-26Machine Learning for Everybody – Full Course
2022-09-22Algorithms in Python – Full Course for Beginners