I bet there's a team behind most videos. On the other hand, if Web Development is what he does for living, he is just able to learn this stuff really fast. If you spend a couple of years developing websites, you will develop quick learning skills. After a while, you won't even need tutorials, as you will be able create examples right after reading docs. And also, did he really master all the things he showed? He had a video about ten different JS frameworks, of course he probably didn't even learn most of them. But I agree, his videos are great.
This guy even Creates things inside his head while sleeping, I just finished making my raw design on Figma and had started searching for ways to create curved background shapes. Then I took a break and opened my youtube and this video pops up. You never cease to amaze me.
I always thought that adding curves to the website is going to be hard yet here you are providing me with easy ways to do that. Can't thank you enough!
SVG supports animations natively, you can do path morphing as well as move objects along paths. I tried it recently and the API was pretty straight-forward. The result and amount of work was comparable to a dedicated animation library like animejs.
Are you sure browsers supports SVG morphing natively though? It sounds like the Kute library specializes in that feature, while native support would be utilized for simpler drawing along a consistent path (ex: hand signature), element translating/scaling/rotating animation.
That's true as long as svg is in line so dom can pick it up, if it's loaded via HTMLImageElement it's encapsulated in own canvas and processed in out of browser rendering context and pixels are embeded back, thus your animations won't work where svgs are loaded externally. Unless you inline them at load time again by enumerating each image elements in DOM, regardless rendering context matters. P.S at the end browser has to draw and raster the vector to build pixels, but it's not always possible to get hold of elements inside svg in different renderers.
You're the best! Your videos are clean, well-explained and you always make sure to explain each step, from what emmets are (basic concept) until what you're projecting before actually coding. Thanks a lot!
Awesome tutorial, I love how you go straight to the point with your videos. I learnt a lot and discovered nice tools too. Seems like a kid in the background enjoys it too at 7:20 😀
Who in the heck dislikes this [haters]? I appreciate your teaching style it has help me get into a programmer mindset and think what's the most effective way to do it. Thanks sir!
I almost skip this video because I used to do this kind of waves for my projects but after I watch this, wow! it has many different approaches. I learned a lot. Thanks fireship.
This is the coolest thing I've ever seen! I was trying to implement something similar to my portfolio website but didn't find any videos that explains it this clearly and easily. Thank you so much!
As something of a newbie, I always wondering how these mega slick looking curves (and icons!) get made. Great tutorial, immediately bookmarked all those tools.
I was doing a website a few months ago, and this is just what I needed, I ended up using different libraries for the morphing that did not give me a perfect result, I will redo it and try it your way, thank you. I also did not know about the aspect-ratio tag, that was another problem I was having, that I solved differently, but this is much cleaner.
Amazing video as always! Another method I use for simple transitions between sections is the clip-path CSS property. I use it along with the Clippy tool to easily generate the css code. I love that it is also responsive as it uses percentages and you don't need to add other html elements, just set clip-path on the section and maybe give it a negative margin-bottom or so. 🙌
Its always the same with youtube tutorials. You have a idea what you want to do and you dont really know how? The next day comes a fireship tutorial with that idea. Really nice tutorial, thank you!
Don't be jealous as you might have some hidden skills which Jeff doesn't have He gained this knowledge with experience and so you too I assume you are very talented Just keep practicing
probably the only only time I increased playback speed on a fireship video..only coz it was html css and lightweight js. but as usual, amazing content♥♥
Your videos are just amazing. They have something that other videos don't. Keep up the good work and appreciate it! Could you do more HTML tutorials though :p
Oh myyy … such a curvy humour 😁 It’s a matter of less than 10 seconds before I usually start chuckling… but this video is record breaking despite having been watched under most challenging circumstances, i.e. on the public transport 😱 Nevertheless, Time to first chuckle (TFC): 1sec 👏🏼. And then… 🥁🥁🥁… BREAKING the human sound barrier (HSB)*⁾ , right after! 🎉🎈🥳 *⁾ Measuring HSB-related stuff remains quite a challenge by itself, but the most scientific measuring method still is… the number of heads having turned after that which was meant as a chuckle, escaped the human mouth, emboldened, freed, and turned into a fully fletched little laughing sound 😂😇😄
for anyone having issues with divs "eating" up another div aka "how do I put the curve div in front".. use z-index on the divs that clash and set the one behind with lower z-index and the in front with higher z-index. also make sure both classes have position statements in their stylesheets. helping sources: stackoverflow - just me trying to copy paste and troubleshooting his code
You’re a machine for pumping out quality content so consistently. Really appreciate your work!
Quality Pump! 😁
Haha... The clue is in the name... FIRESHIP 🔥.... It's rapid reaction....
@Fireship plise shire your vs code setting and icon etc
I bet there's a team behind most videos. On the other hand, if Web Development is what he does for living, he is just able to learn this stuff really fast. If you spend a couple of years developing websites, you will develop quick learning skills. After a while, you won't even need tutorials, as you will be able create examples right after reading docs. And also, did he really master all the things he showed? He had a video about ten different JS frameworks, of course he probably didn't even learn most of them. But I agree, his videos are great.
Yes
We need a tag for curved sections on HTML6
This went largly unnoticed and I'm disappointed.
Needs to happen.
That could be a nice react component
@@tommymaher4166 true
we do frfr
This guy even Creates things inside his head while sleeping, I just finished making my raw design on Figma and had started searching for ways to create curved background shapes. Then I took a break and opened my youtube and this video pops up.
You never cease to amaze me.
figma balls
@@good_boy_13 lmao
@@good_boy_13 lmao gotem
This video was magically recommended to me after an year and it was just in time when I wanted curved sections for my website
9:09
That HTML emmet shortcut for creating all those initial sections was amazing, i had no idea emmet was that useful
One of the best SVG wave tutorials I've watched.
I always thought that adding curves to the website is going to be hard yet here you are providing me with easy ways to do that. Can't thank you enough!
What a coincidence, I was just working on a project and was trying to implement these types of waves.
Not a coincidence, he can read people's minds and make a video that is always what someone is trying to make at the time, happened to me twice
First time he read your mind?
SVG supports animations natively, you can do path morphing as well as move objects along paths. I tried it recently and the API was pretty straight-forward. The result and amount of work was comparable to a dedicated animation library like animejs.
I see
Ok I'll try.
Are you sure browsers supports SVG morphing natively though? It sounds like the Kute library specializes in that feature, while native support would be utilized for simpler drawing along a consistent path (ex: hand signature), element translating/scaling/rotating animation.
That's true as long as svg is in line so dom can pick it up, if it's loaded via HTMLImageElement it's encapsulated in own canvas and processed in out of browser rendering context and pixels are embeded back, thus your animations won't work where svgs are loaded externally. Unless you inline them at load time again by enumerating each image elements in DOM, regardless rendering context matters.
P.S at the end browser has to draw and raster the vector to build pixels, but it's not always possible to get hold of elements inside svg in different renderers.
I guess natively works but the paths needs to have the exact number of points between each svg, with the library probably have this fixed
This is hands down the BEST channel that produces QUALITY content which is ENTERTAINING AF! Keep up the good work man.
you are just blessing searched for more than a year for these things but finally found your video. love and respect.
1 minute into the tutorial, you already taught me how to save 10 minutes of typing. You are amazing at teaching1
We need a course on how you’re soo productive lol
Its probably him enjoying things or having learnt to enjoy working on these.
@Zelená Žaba yeah nah, that's not how it works
@Zelená Žaba bullshit 🤣
This man not even have "join" button lmao
How the fuck 1000 sub = 300k ? LMAO
@Zelená Žaba well u not said on website lmao
@Zelená Žaba "EDITED"
You're the best! Your videos are clean, well-explained and you always make sure to explain each step, from what emmets are (basic concept) until what you're projecting before actually coding. Thanks a lot!
You save so much time and good explaination. You dont waste time in writing code
If you don’t want to use an empty div, you can put the svg in an image tag and style the width to 100%.
Great video tho def using the apps mentioned
you are the only dev who not running out of contents!
I was avoiding learning Emmet for a while now. It was time.
1 good example and all of a sudden doesn't look overwhelming anymore.
Really thx for that.
Awesome tutorial, I love how you go straight to the point with your videos. I learnt a lot and discovered nice tools too.
Seems like a kid in the background enjoys it too at 7:20 😀
Quality content ever since I got to know about this channel! Thanks man
Who in the heck dislikes this [haters]? I appreciate your teaching style it has help me get into a programmer mindset and think what's the most effective way to do it. Thanks sir!
Not only you teach us how to make curve, you also gave a tip for making my life easier. you earn more subscriber
I almost skip this video because I used to do this kind of waves for my projects but after I watch this, wow! it has many different approaches. I learned a lot. Thanks fireship.
This is the coolest thing I've ever seen! I was trying to implement something similar to my portfolio website but didn't find any videos that explains it this clearly and easily.
Thank you so much!
I've been coding css for about 6 years now and damn these beginner friendly tips did help me out on a load of things 🤣
Love how nice css/svgs can make websites look
Dude, You're the best!
I dont even finish whatching, but I already get excited!
Nice content, congrats!
you have literally teached me a 3hrs content which I have not even heard of earlier. Thanks 🙏. Loved ur Teaching ❤❤
I have a simple wave divider on my current project using svg and you just gave me an idea how to animate the thing. 🔥
Man, this is some seeeeeeeerious creative frontend content in this video! Loved it.
Only if they used this teaching style in school..... Simple, to the point and informative.
I just started watching and you blew my mind twice already. Such a quality content!
You are my #1 content creator. What a beast!!
Now, this is Quality Content!!!!
This video came in such a timely manner it scared me. I was searching for this
Searching for something..to learn about waves to create them.. found you.. n its helpful. Thanks man 😊
Your videos are incredible. You always make web dev exciting. Thank you so much
You made the best video ever created about teaching and explaining something 😂🤜🏽🤛🏽
I absolutely love this channel!
The animation at the beginning was satisfying and silky smoove
As something of a newbie, I always wondering how these mega slick looking curves (and icons!) get made. Great tutorial, immediately bookmarked all those tools.
I followed and made this myself and it works and looks beautiful, thanks jeff
Just needed a tutorial on this topic and this appeared in RUclips's feed. Thanks!
Right when I’m making my portfolio page!
Thank you man, this video was amazing 👍 I subscribed without blinking after watching this.
I love the background song intro and outro song. Just started learning css. These are really good.
I was doing a website a few months ago, and this is just what I needed, I ended up using different libraries for the morphing that did not give me a perfect result, I will redo it and try it your way, thank you. I also did not know about the aspect-ratio tag, that was another problem I was having, that I solved differently, but this is much cleaner.
Amazing video as always!
Another method I use for simple transitions between sections is the clip-path CSS property. I use it along with the Clippy tool to easily generate the css code. I love that it is also responsive as it uses percentages and you don't need to add other html elements, just set clip-path on the section and maybe give it a negative margin-bottom or so. 🙌
could you elaborate on the clip-path thingy? (bit curious on how you used it, I am a bit of a noob still so yeah).
Man, you're on FIRE!
I love you, man!
My website will get a massive upgrade, thanks Jeff
Its always the same with youtube tutorials. You have a idea what you want to do and you dont really know how? The next day comes a fireship tutorial with that idea.
Really nice tutorial, thank you!
I am blown away. It is that easy? Dude...
I learn so many cool shortcuts and tricks from your videos. Thank you so much!
Wow! This helps me break many dev territories. 'SVG made easy' would be a proper title. Thx.
I’m jealous of you for all the knowledge you have.
Don't be jealous as you might have some hidden skills which Jeff doesn't have
He gained this knowledge with experience and so you too
I assume you are very talented
Just keep practicing
@@IshanKBG 😂 I didn’t mean it as jealousy jealousy 😂 it’s a figure of speech showing that this guy is insanely smart and talented.
@@AtomicCodeX ik but ya you are talented as well don't forget it!!
came for the ✨wave✨, left with a bunch of new tips and knowledge
Fireship keep dashing out godlike content
Forget the curves, that's some next level Emmet 👀
Genuine quality video!Insane!!
THANK YOU BECAUSE OF YOU I AM NOW A LVL 2 DESIGNER
Worth it, just for the dev tools flex box viewer. I had no idea!
It was really easy to understand please make video like this
3 min into the vid I subbed, thank you brother
Nice work bud, your site is the most interesting keep going!
bro, my million dollar todo app idea will look sick because of this!
probably the only only time I increased playback speed on a fireship video..only coz it was html css and lightweight js.
but as usual, amazing content♥♥
Your content is priceless! Thank You :)
Great video as usual. Thank you so much for uploading great tutorials.
instead of using an empty div maybe the would be better for this purpose ! i just tried it and it works perfectly as expected
Your videos are just amazing. They have something that other videos don't. Keep up the good work and appreciate it! Could you do more HTML tutorials though :p
Woah I didn't know about the flex box console thing
Just what i've been looking for, thank you.
Just a firehose of pro tips. Insta-subscribe.
Awesome content. Awesome delivery.
your content gives me motivation to code, you are awesome
OOOH. I love you, that’s just what I searched for.
Always something interesting to learn from you and these tools you introduced are simply awesome👏👏👏
Wow ! Thanks for the tutorial !
Thank you! This video saved my life!
Dude, u rock!
Let's ride those fancy waves!
Literally looked this up today. Perfect!
I'm so grateful for this video
this is amazing!!!!! Thank you!! new subscriber! 🥳
CSS is tough, but you make it look easy, pal.
This tutorial is one of a kind.
You are awesome. Thank you so much.
I had no idea about emmet WTF THIS IS AMAZING
Once again! Amazing video!! 👏
Thank you sir for such a simple yet powerful video
Hope we get some more SVG tutorials! I always impressed at how some websites use it
This video is a gem
I'm full with the confidence in less time very helpful video
This is awesome i have used it in my portfolio, thank you so much 👍
Great video! I learned so much!
Oh myyy … such a curvy humour 😁 It’s a matter of less than 10 seconds before I usually start chuckling… but this video is record breaking despite having been watched under most challenging circumstances, i.e. on the public transport 😱 Nevertheless, Time to first chuckle (TFC): 1sec 👏🏼. And then… 🥁🥁🥁… BREAKING the human sound barrier (HSB)*⁾ , right after! 🎉🎈🥳
*⁾ Measuring HSB-related stuff remains quite a challenge by itself, but the most scientific measuring method still is… the number of heads having turned after that which was meant as a chuckle, escaped the human mouth, emboldened, freed, and turned into a fully fletched little laughing sound 😂😇😄
Wow. This is awesome
02:55 I am blessed atm 😄 Never knew that
Thank you sir
for anyone having issues with divs "eating" up another div aka "how do I put the curve div in front".. use z-index on the divs that clash and set the one behind with lower z-index and the in front with higher z-index. also make sure both classes have position statements in their stylesheets.
helping sources: stackoverflow
- just me trying to copy paste and troubleshooting his code
Ty so much, it was a great help for my personal portfolio :)
Pro tip. Just use a background generator that creates waves. Match the background color to your root body color. No messing around. Looks beautiful.
I was curious. Do you ever create external css files? If yes, why? And if no, why? Thanks for this amazing video. It's a huge help.