Learn Svelte - Full Course for Beginners

[@freecodecamp]

⭐ Code ⭐ ⌨ Introduction ⌨ Writing your 1st Svelte component svelte.dev/repl/6af636763437405496e041b20d7d3440?version=3.35.0 ⌨ Style your Svelte component svelte.dev/repl/467770b8117d4af9ac7cfc7622f36526?version=3.35.0 ⌨ Adding data to Svelte component svelte.dev/repl/df5dd60d0cbc404392d68a2f35b9d043?version=3.35.0 ⌨ Reactivity in Svelte svelte.dev/repl/60683004b2624aa1ad5401a29b561b06?version=3.35.0 ⌨ Attaching events in Svelte svelte.dev/repl/78e0855b596e4a1391d77ad2d9e8dc8a?version=3.35.0 ⌨ Reactive Declarations and Statements svelte.dev/repl/be33b95445494e6199489839dc8bf947?version=3.35.0 ⌨ tick() svelte.dev/repl/a0e8adb56903414283e57d2328c3745b?version=3.35.0 ⌨ Component and props svelte.dev/repl/fc9c2b8e0ea848129d90dee19b8206b0?version=3.35.0 ⌨ Component events svelte.dev/repl/c594836315704e0aa16514be7a31a86f?version=3.35.0 ⌨ Forwarding component events svelte.dev/repl/cfcb6407b0c44b6298a4fd27f7aec109?version=3.35.0 ⌨ class: directive svelte.dev/repl/19cce00af5ba4d66bc82d97dfe15020d?version=3.35.0 ⌨ Binding svelte.dev/repl/304383469d3d4f08b7897d64c65d0268?version=3.35.0 ⌨ bind:group svelte.dev/repl/09e2bcf96f7d44c49fd34ed50bed8293?version=3.37.0 ⌨ bind:this svelte.dev/repl/c8c0fc9e1f054e349fe7481d26d280ae?version=3.37.0 ⌨ Component Lifecycle svelte.dev/repl/ea01362701db4cd1b8497ffe20200012?version=3.35.0 ⌨ onMount svelte.dev/repl/d2adf690a11e48569853001974cb7da9?version=3.37.0 ⌨ {#if} block svelte.dev/repl/e1b972cf050d4b3d9ea57e5d7090f2c1?version=3.37.0 ⌨ {#each} block svelte.dev/repl/29640f53f1a144d3b279fed7ed5abc8d?version=3.37.0 svelte.dev/repl/2a9b82bf64d8490b945f6673aa3efcb3?version=3.37.0 ⌨ keyed {#each} block svelte.dev/repl/38f0777212af4a07813f5c3a3a3f0109?version=3.37.0 ⌨ keyed {#each} visualized ⌨ {#await} block svelte.dev/repl/91eff67a9f4c40f1a7aaf960aa1d5a3a?version=3.52.0 ⌨ {#key} block svelte.dev/repl/9dc9fa03d81a49fcad3cd1d3649aa0ca?version=3.37.0 svelte.dev/repl/d754be2713254512aaf23774f8de6e7e?version=3.37.0 ⌨ Context svelte.dev/repl/d505073d3d4d4e598184e8b2a83b1d51?version=3.37.0 ⌨ Communicating through Context svelte.dev/repl/6ffd9bd0f6234f988bff47cb7ef0e6b2?version=3.37.0 ⌨ Intro to Svelte store svelte.dev/repl/02833d6b97ac44768f9720e8148bd315?version=3.52.0 ⌨ Writable store svelte.dev/repl/1d64a42b052d449da6c0ae4dbaa3087c?version=3.52.0 ⌨ Readable store svelte.dev/repl/3a2939da085a42568ff27ef76034322a?version=3.52.0 ⌨ Svelte store contract svelte.dev/repl/41d63dc50095424c942a2c192b8292c7?version=3.52.0 ⌨ Redux store as Svelte store svelte.dev/repl/b41141c04f1140b687ce5f1bb3c036b9?version=3.52.0 ⌨ Valtio state as Svelte store codesandbox.io/s/valtio-state-as-svelte-store-mkyrp ⌨ XState as Svelte store codesandbox.io/s/xstate-as-svelte-store-gsb6b ⌨ DOM events as Svelte store svelte.dev/repl/49a630c89a7142219cf828a2eb0ef120?version=3.52.0 ⌨ Immer for immutable Svelte store svelte.dev/repl/a8cd6cc371604d44902f01bd18fe29a2?version=3.52.0 ⌨ derived() Svelte store svelte.dev/repl/8cb2e3ea979444a39a95bc8248c755f1?version=3.52.0 ⌨ tweened() Svelte store svelte.dev/repl/b19be4b50ab244698224caab3d4d9f00?version=3.52.0 ⌨ tweened() and spring() svelte.dev/repl/05d7af1eaff94ef28a7fb0809d58092d?version=3.52.0 ⌨ Higher Order Store svelte.dev/repl/01959ea307cc4ed4aadfd251967ef4a2?version=3.52.0 ⌨ RxJS as Svelte store svelte.dev/repl/f4024d6fea4747c59f12730a892c19bb?version=3.52.0 ⌨ Reactive class property using stores svelte.dev/repl/e7719405bd04453aa535d898716c5c90?version=3.35.0 ⌨ Undo / Redo with Svelte store ⌨ Reactive Context ⌨ 3 tips to manage complex store before: svelte.dev/repl/5956ad7ceea64926b36eaa552fd40324?version=3.35.0 after: svelte.dev/repl/cc9deacb1fc14d05b187d34e30d909ed?version=3.35.0 ⌨ get() Svelte store value svelte.dev/repl/c41c57636345460180b2f4db9f1fdf3f?version=3.35.0 ⌨ Store vs Context svelte.dev/repl/0399bbd870524e15b5ce67e35c782deb?version=3.37.0 static global: svelte.dev/repl/cd6cc4a3efbf469bb57acd059ed6623a?version=3.37.0 static local: svelte.dev/repl/9ae99d6ead9c4459a375672e709f7241?version=3.37.0 dynamic global: svelte.dev/repl/6bbf0c6efa434c699bfe4db084a6448a?version=3.37.0 dynamic local: svelte.dev/repl/f3fc531a2c424e9496d370e5c6333991?version=3.37.0 ⌨ 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 svelte.dev/repl/29714f02c657483db1abf2b7eb7796b4?version=3.52.0 ⌨ Creating events with Svelte action svelte.dev/repl/12a3a03062804d5186b7b1b82e56e9f6?version=3.52.0 ⌨ The order of Svelte action svelte.dev/repl/0af51cd6070a48ac96a2197b98e5b845?version=3.52.0 ⌨ use:clickOutside svelte.dev/repl/8031c800d7e34fd692dd18174b514e4e?version=3.52.0 ⌨ use:tooltip svelte.dev/repl/dd6754a2ad0547c5b1c1ea37c0293fef?version=3.52.0 ⌨ use:viewport svelte.dev/repl/c6a402704224403f96a3db56c2f48dfc?version=3.52.0 ⌨ use:popper with Popper svelte.dev/repl/6ef53f4882324d21a14f49ec68cf60f7?version=3.52.0 ⌨ use:lazyImage svelte.dev/repl/7b15a89fb2dc48dc87a1ee7bce1c0e48?version=3.52.0 ⌨ Ensemble Actions svelte.dev/repl/04afc1cc9cda464bb87388d7a967d0ed?version=3.35.0 ⌨ svelte.dev/repl/c5829025c344401ca2d2d39ff53fd1e0?version=3.37.0 ⌨ Passing data across svelte.dev/repl/e4097010d06c47409be24433cf00295d?version=3.37.0 ⌨ Slot forwarding svelte.dev/repl/86989ec9fe4b47be8203f811e8dc3b34?version=3.37.0 ⌨ $$slots svelte.dev/repl/b0cb40815b9749f891c3a156d159d8b6?version=3.37.0 ⌨ Infinite List svelte.dev/repl/3348e0c38b4e40759134924125c1b747?version=3.37.0 ⌨ Tabs svelte.dev/repl/6578207f41b24f6195d9ea589afda925?version=3.38.0 ⌨ $$props and $$restProps svelte.dev/repl/dbff4412265847d1819353bbb62547a0?version=3.38.1 ⌨ Lazy Component svelte.dev/repl/6db375be880441299f7721b54434068f?version=3.38.1 ⌨ svelte.dev/repl/4afa48f89eb74abb954bcb25f95adfa2?version=3.38.2 ⌨ svelte.dev/repl/d6ee2c23725b423d8dc744b5ebc72f6d?version=3.38.2 ⌨ svelte.dev/repl/30667c29ab92487597f7e845578f263a?version=3.38.2 ⌨ svelte.dev/repl/b6dd7b80a0c440bea50d0bffd469f26c?version=3.38.2 ⌨ svelte.dev/repl/fc48f8e60ec3402581fd224607ef54ee?version=3.38.2 ⌨ svelte.dev/repl/b6331086343e466dbc82693a6da00e9b?version=3.38.2 ⌨ Passing CSS Custom Properties to Component svelte.dev/repl/f77741cfe0aa434a8090a2be7abdd9a7?version=3.38.2 ⌨ {@html} svelte.dev/repl/c115c91927d64b9580306ac1b1397b22?version=3.38.2 ⌨ {@debug} svelte.dev/repl/ef5164c2e3e94bfea4bd10f92497e9cb?version=3.38.2 ⌨ svelte.dev/repl/4a4e3466a28a4359a2aa83bfe9e89fdc?version=3.38.2 ⌨ Intro to Svelte transitions svelte.dev/repl/f3e92aa7657f489eace9c6cb2d10e4b8?version=3.29.4 ⌨ Coordinating transitions ⌨ Transition Events ⌨ Easing ⌨ Accessible transitions ⌨ Solid color swipe transition ⌨ Flipboard transition ⌨ Client-side component API gist.github.com/tanhauhau/b8ccb8241b0b1c56fc1dbb2fbc1eeb2b ⌨ SSR component API gist.github.com/tanhauhau/b5e2948749b499336877ac192b881f0f ⌨ Svelte compiler API ⌨ Svelte preprocess API ⌨ Hydrating Svelte component ⌨ svelte/register ⌨ Conclusion

[@killerdroid99]

the class:condition directive is very useful 👍

[@iPyson]

It would be great to have the initial code for each chapter, so that we can code along on our side.

[@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.

[@xiaoshen194]

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

[@apisaga]

haha

[@chetanjain4616]

Thanks!

[@abdou023]

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

[@UliTroyo]

Li Hau Tan is awesome. 23 hours of Svelte!

[@samshanker5753]

Ys man

[@raceordie690]

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

[@rv7591]

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.

[@IsxaaqAcademy]

Literally a full day course! Thank you

[@ibnaskhan]

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

[@killerdroid99]

bro its been 4 hrs atleast actually watch the course before commenting to give some insights

[@tremolony4924]

@@killerdroid99 He watched on x6 speed bro

[@realtruth1061]

@@killerdroid99 23 hours

[@killerdroid99]

@@realtruth1061 wdym??

[@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.

[@passion__]

did u complete it 😄

[@shrek22]

I am using qwik. Not intuitive at all to me.

[@zacharyburke5255]

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!

[@annismonadjem6901]

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

[@annismonadjem6901]

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

[@bobsyourUncle83]

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

[@Flyx8]

23 hours omg! Thank you very much Li Hau Tan

[@manavpreetsingh1212]

Awesome work! Really enjoying it. I have adhd but still i am able to focus on the tutorial due to practical implementation and way of teaching

[@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!

[@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...

[@lmd4881]

I absolutely love and adore svelte :) thanks so much for this thorough tutorial

[@mianfaizanamir2941]

Appreciated ❤️ Great content free of cost.

[@dev0luti0n]

You're badass! Thank you so much for all your hard work! And, thank you for sharing your knowledge with the people!

[@chrisnaadhi]

Whoa this is really great 23 hrs for Svelte is awesome!

[@frankdinies5111]

This Tutorial is strictly amazing !!! Many thanks for the effort you put into it. :-)

[@owen_nx]

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

[@panomapet9441]

Are you working now in Data Analysis field?

[@owen_nx]

@panomapet9441 yes. Data Scientist at a Bank in South Africa

[@thekokoserver]

Have been waiting for this my man

[@iatheman]

This is better than starting with the official Tutorial.

[@munawirulhadi2864]

Svelte is awesome and it's getting more prominent 😍

[@francescos7361]

Thanks Svelte , as a coder , is a skill .

[@fmaylinch]

I want to learn to write Svelte comPOnents! 😂 Sounds fun, I'm going to watch this. Wait, OMG, 23h! But Li seems to explain it in a very interesting and clear way, so I'll probably watch it all eventually.

[@micemincer]

2:34:43 - that is great - that solves a lot of things edit : I'm at 4h31 - I already learned so many new things that is ridiculous

[@Tanguylecoutre]

How did you end up liking this course? I never did a frontend framework before but really interested to hear what you got to say

[@Amanuel248]

Thank you for this video. It's easy to follow, clear and awesome.

[@jayesh2583]

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,

[@SleepyDrop]

Just finished a 5 hours course on here and this started auto-playing. Here goes my weekend

[@dont-want-no-wrench]

man, every week there is some new language i have never heard of.

[@AbdifitahAbdulkadir]

😂

[@tca3434]

I thought I was alone 🤣

[@cryptoboy1461]

Just stick to the ones that put food on the table and forget about the rest.

[@chychywoohoo]

It's a framework

[@nidhishchauhan2053]

Welcome to Javascript world😂😂

[@neutronstar482]

Thans for this excellent tutorial. Your explanations are excellent.

[@smithdoesstuff]

Hey Svelte Devs, @2:08:10 where you bind a value to an input with the shorthand bind:value if the variable name is ‘value’, this might be even more useful if you could do and it would interpret this as , I’ll look at the dev pages and see if this is something anyone has recommended before.

[@a7mdbest15]

i loved this video so much, there is only one downside which is light mode, please use dark mode :(

[@gregjuva]

This is the course I have been waiting for! Thank you freecodecamp and Li Hau Tan!

[@KhaledKimboo4]

And ladies and gentlemen that was an introduction,

[@vigneshaithal]

Great tutorial, I am very thankful for you😀

[@kranthikumar9314]

Just started the course!

[@DrawDat]

thanks for this! the timeline should definitely be split into sections though

[@plusk343]

Was waiting for this

[@francoisarbour1207]

Incredibly valuable... Thanks!

[@grimjim8463]

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

[@rajnair7974]

How's it going? Do you think this course is still worth doing after svelte updates?

[@mattribeiro9017]

... one year later ...

[@maksymbalahur4664]

Good job! Can we use only Svelte store for state management (it's looks easy and so powerfull). Idk why we need props and context without real reactivity if we have stores :]

[@gabrielburgos2533]

This should be paid material, it's so good it feels illegal

[@StevenCookFX]

Thank you soo much for this awesome tutorial. :)

[@firstnamelastname8197]

Even longer than some of those paid courses LOL, nice job!

[@cryptoboy1461]

The length of a course doesn't mean it's good.

[@TheRightWaymyway]

Five hours down. Awesome Content.

[@enekosarasola4726]

Doing gods work 🙏

[@chiranjitdey1430]

Execellent stuff. But one mistake that was overlooked, at 59:20, you mentioned that in the reactive declaration of $: doSomething(a,b), if count is passed in the console.log(a,b, count), it won't trigger the function, but when I tried it out in my REPL, it worked. let count = 1; $: doSomething(2,3) function doSomething(a,b){ console.log(a,b,count) } Output: 2 3 1 If my approach is wrong or if I made a mistake, please let me know.

[@box4soumendu4ever]

Very nice Sir ❤🎉

[@shawnclay6189]

Cool. Thank you for this content.

[@adrianfgutierrez2836]

Great 👍🏾. I'm expecting for this

[@futurezoneacademy867]

Hello sir I have a problem while I am using python to open external window console application Bit how to make it auto login with credition login details

[@CTimmerman]

Use Windows' Task Scheduler.

[@futurezoneacademy867]

@@CTimmerman pls sir just tell me a little hint to make it auto login ....

[@futurezoneacademy867]

@@CTimmerman no no I wants to auto login in another window console application Not to windows sir

[@tremolony4924]

@@futurezoneacademy867 Write a bash script bro

[@pickavana8056]

Is there an update for Sveltekit and Svelte 5?

[@abirmuhtasim3697]

Does it also cover sveltekit?

[@RajabNatshah]

Thank you :)

[@magichost]

Super💛

[@Debbiemoris7652]

My friend, I appreciate the time you spend to inform us. As of October 12 2022, i count on $2,000, what do you suggest i should invest it in?

[@xtraszone]

Svelte is so easy that its course does not deserve to be of 24 hours. Even if you learn every topics in deep

[@AbdifitahAbdulkadir]

Legends watching now only for intro videos and stop when He say Hello Hello

[@MrValVet]

What do you mean when you say: const data=obj; is not a state object? The explanation is missing.

[@radiusbecka1799]

Is it hard to just make a website that says "Hello world"? Where do you edit the html that a user would input into a browser to open the site? Is there like a lot of work I have to do first?

[@rfcgaming7250]

How ppl can comment that this course was good when the interval of comments and the tuts was posted was hour only?

[@alexanderfrederikvreeken312]

1:22:18 That is a direct burn towards React! haha

[@MaheshKumar-bg5re]

is it okay learn svelte from this video now? or has svelte changed a lot after this video?

[@luthfizone]

Yes, for a basic svelte. If you want to learn advance I suggest to you learn from svelte tutorial and documentation official website

[@ram42]

Can we get a c++ tutorials with projects please

[@cryptoboy1461]

Is this a completely new course or just a compilation of his videos?

[@akad1070]

nope. It's just a compliation of his tutorial begginner's vids kzbin.info/aero/PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR

[@edzilmisquitta4749]

Does this course cover JSP?

[@blackfrom80s64]

Excelente curso! Se tivesse legendas em pt-br seria ainda melhor.

[@MarcelPirosca]

My only question after watching this is: Why context in not reactive by default? Why make it static and use a store to get it reactive? To me it doesn't make sense. Thoughts?

[@annismonadjem6901]

I'm trying to figure out why Tan Li Hau has used a props of 'this' in 17:22:48 as any other prop will do. I have tested it out replacing the prop 'this' with 'enter' and have refactored the component Lazy.svelte as well as App.svelte and noted that everything works as expected including the lazy loading. I also did not see the effect of hinted in the video by using the prop of 'this'. Can anyone point out to me please, what is the merit of Lecturer using a prop of 'this' which honestly i would have avoided at any cost as it is a special keyword?

[@passion__]

did u find it

[@myriad417]

So, did you find it?

[@AmberRathour366]

Oh my god! Look at the duration... FreeCodeCamp Editors are not into short videos, are they? They just tell you ''we got the whole thing in one place, just watch it every day" 😂

[@nahid017]

What framework(django/ node whatever) should I use as a backend with svelte. Please any one help me.🙏

[@tremolony4924]

SvelteKit + node

[@mahbuburrahman7190]

You can use both backend frameworks with Svelte. Svelte is a frontend framework.

[@repotranstech]

Htmx Django

[@1conscience0dimension]

at 01:34:00 really hard to understand. At first, he was doing the effort to articulate, and then less and less

[@Football__Junkie]

Learn in as little as 24 hours. No, I mean 24 hours nonstop.

[@emmanuel8310]

Wow!

[@Almighty_Flat_Earth]

I like Angulars' service approach, and rxjs subjects, those help develop with ease of mind.

[@killerdroid99]

they also introduce a lot of boilerplate in services

[@darbhasailu]

Is this svelte 2 or svelte 3

[@realtruth1061]

23 hours? Could start 23 startups instead

[@nikkoazz]

Sveltu! SveltuKitu! Reactu! Anguler! Voh!

[@fallenstar358]

Anybody work as svelte developers? I see only react vue angular jobs

[@saravananram3740]

job are less compared to react angular and vue jobs

[@cryptoboy1461]

I doubt anyone is using it for production. If you want a job as a front-end dev, go learn React.

[@thekokoserver]

GoDaddy is now writing in svelte

[@soumyameta]

you know, there is an Asian that can do anything better than world

[@kenswireart88]

tell me this is a joke 23 hours i dont know a thing about computers. i wanna kearn. i think you should start your videos by letting us know after he i tro if the course is for beginners, intermediate or advanced level so if i dont know a thin whether i can still learn or not

[@AhmadFIksan]

The title clearly stated as "Learn Svelte - Full Course for Beginners", but if you really are a beginner web-developer, I think it's better to improve your fundamental in html, css, and javascript before diving-in into framework like svelte, react, or vue.

[@annismonadjem6901]

I have gone through the entire course and I am perplexed by the fact that the Lecturer often uses the js method .splice() to remove an element from an object, for example in 16:06:40 "Tabs" in the accompanying source code "067_Tabs_svelte-app.zip" in the module: "Tabs.svelte": unregisterTab(id) { const tabIndex = titles.findIndex((title) => title.id === id); if (tabIndex > -1) { titles.splice(tabIndex, 1); // -1) { titles = [...titles.slice(0, tabIndex), ...titles.slice(tabIndex+1)] } }, To my best knowledge the first snippet causes mutation, which is a practice avoided by most engineers. Somebody, please, explain to me if I am in the wrong and perhaps there is something I am not getting.

I agree with avoiding mutations. Could have filtered as well.

[@gustavojoaquin_arch]

Based 🧐

[@ferivertid]

I love his accent sm hahah

[@DeeCodemaster]

People who listened to this at X2 gather here 😂

[@abhijitha.a]

Free code camp please make a tutori for. Carbong lang

[@ZainSuleiman666]

I like how the most replayed part of the course is event forwarding🤣🤣🤣

[@shomriddhosworld5587]

yes yes yesyes yesyes yesyes yesyes yesyes yesyes yesyes yesyes yesyes yesyes yesyes yesyes yesyes yesyes yesyes yesyes yesyes yesyes yes yes

[@tremolony4924]

yes

[@PaulSebastianM]

The fact that you have to think about not forgetting to call tick() when you increment a local value, really irks me. And I'm trying to choose between Svelte and Solid and this really doesn't help Svelte become the one...

[@AbHiShEkdAS1505]

finally

[@killerdroid99]

one for sveltekit

[@tremolony4924]

Read docs bro

[@killerdroid99]

@@tremolony4924 already into them

[@bhawanasharma6651]

First

[@tremolony4924]

Nice bro

[@viski2528]

Will there be a full course on SvelteKit?

[@tremolony4924]

Svelte has great docs. You should consider reading them

[@TheRightWaymyway]

skipped xstate