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.
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!
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,
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.
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 :]
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.
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?
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?
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
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" 😂
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.
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?
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...
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
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.
⭐ 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
the class:condition directive is very useful 👍
It would be great to have the initial code for each chapter, so that we can code along on our side.
"Mom, don't let anyone disturb me till tomorrow!!"
haha
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.
Li Hau Tan is awesome. 23 hours of Svelte!
Ys man
Literally a full day course!
Thank you
I think this is one of the best course ever on Internet for Svelte
bro its been 4 hrs atleast actually watch the course before commenting to give some insights
@@killerdroid99 He watched on x6 speed bro
@@killerdroid99 23 hours
@@realtruth1061 wdym??
I like this guy's enthusiasm. He seems so happy to tell the world about Svelte.
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.
The gold standard of Svelte Courses and it's free! Superb content and essential Svelte training.
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.
did u complete it 😄
I am using qwik. Not intuitive at all to me.
Thanks!
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!
Thank you Tan Li Hau for the tuturial. Great work! Hope you continue making more videos on Svelte and SvelteKit.
Starting this now. I'll update when I'm done.
How's it going? Do you think this course is still worth doing after svelte updates?
... one year later ...
Thank you Tan Li Hau for the best Svelte tutorial on the internet. Svelte and SvelteKit are the best!
Svelte is smooth as butter. Can't wait to dive into it after completing the python data analysis certificate.
23 hours omg! Thank you very much Li Hau Tan
The language aspect of this video is superb. I want to work as hard as possible to emulate people like this Engineer one day.
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
Appreciated ❤️
Great content free of cost.
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...
Whoa this is really great
23 hrs for Svelte is awesome!
You're badass! Thank you so much for all your hard work! And, thank you for sharing your knowledge with the people!
I absolutely love and adore svelte :) thanks so much for this thorough tutorial
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,
man, every week there is some new language i have never heard of.
😂
I thought I was alone 🤣
Just stick to the ones that put food on the table and forget about the rest.
It's a framework
Welcome to Javascript world😂😂
Svelte is awesome and it's getting more prominent 😍
This Tutorial is strictly amazing !!! Many thanks for the effort you put into it. :-)
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.
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 :]
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
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
This is the course I have been waiting for! Thank you freecodecamp and Li Hau Tan!
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.
This is better than starting with the official Tutorial.
Thanks Svelte , as a coder , is a skill .
This should be paid material, it's so good it feels illegal
Have been waiting for this my man
i loved this video so much, there is only one downside which is light mode, please use dark mode :(
Even longer than some of those paid courses LOL, nice job!
The length of a course doesn't mean it's good.
Just finished a 5 hours course on here and this started auto-playing. Here goes my weekend
Thans for this excellent tutorial. Your explanations are excellent.
Thank you for this video. It's easy to follow, clear and awesome.
How ppl can comment that this course was good when the interval of comments and the tuts was posted was hour only?
What do you mean when you say: const data=obj; is not a state object? The explanation is missing.
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?
Just started the course!
Can we get a c++ tutorials with projects please
thanks for this! the timeline should definitely be split into sections though
Great tutorial, I am very thankful for you😀
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?
Incredibly valuable... Thanks!
1:22:18
That is a direct burn towards React! haha
Is this a completely new course or just a compilation of his videos?
nope. It's just a compliation of his tutorial begginner's vids
ruclips.net/p/PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR
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?
is it okay learn svelte from this video now? or has svelte changed a lot after this video?
Yes, for a basic svelte. If you want to learn advance I suggest to you learn from svelte tutorial and documentation official website
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
Use Windows' Task Scheduler.
@@CTimmerman pls sir just tell me a little hint to make it auto login ....
@@CTimmerman no no I wants to auto login in another window console application
Not to windows sir
@@futurezoneacademy867 Write a bash script bro
Five hours down. Awesome Content.
Was waiting for this
Thank you soo much for this awesome tutorial. :)
Is there an update for Sveltekit and Svelte 5?
Legends watching now only for intro videos and stop when He say Hello Hello
Doing gods work 🙏
Does it also cover sveltekit?
23 hours? Could start 23 startups instead
Svelte is so easy that its course does not deserve to be of 24 hours. Even if you learn every topics in deep
Very nice Sir ❤🎉
Cool. Thank you for this content.
Thank you :)
Great 👍🏾. I'm expecting for this
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"
😂
Excelente curso! Se tivesse legendas em pt-br seria ainda melhor.
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.
Super💛
What framework(django/ node whatever) should I use as a backend with svelte.
Please any one help me.🙏
SvelteKit + node
You can use both backend frameworks with Svelte. Svelte is a frontend framework.
Htmx Django
Learn in as little as 24 hours. No, I mean 24 hours nonstop.
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?
did u find it
So, did you find it?
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...
at 01:34:00 really hard to understand. At first, he was doing the effort to articulate, and then less and less
Anybody work as svelte developers? I see only react vue angular jobs
job are less compared to react angular and vue jobs
I doubt anyone is using it for production. If you want a job as a front-end dev, go learn React.
GoDaddy is now writing in svelte
Is this svelte 2 or svelte 3
Free code camp please make a tutori for. Carbong lang
Wow!
I like Angulars' service approach, and rxjs subjects, those help develop with ease of mind.
they also introduce a lot of boilerplate in services
Sveltu! SveltuKitu! Reactu! Anguler! Voh!
I like how the most replayed part of the course is event forwarding🤣🤣🤣
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
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.
finally
one for sveltekit
Read docs bro
@@tremolony4924 already into them
Based 🧐
you know, there is an Asian that can do anything better than world
Wow
skipped xstate
I love his accent sm hahah
23 HOURS?!?!?!?!?!??!?!
yes
yes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yesyes
yes
yes
yes
08:00
skipped redux and valito
Will there be a full course on SvelteKit?
Svelte has great docs. You should consider reading them
svelte zero to hero
First
Nice bro