Build a Curvaceous Homepage // Wavy Background Tutorial with SVG & CSS

Рет қаралды 1,069,916

Күн бұрын

Learn how to design a website with curved or wavy backgrounds using HTML and CSS. Then take things to the next level by adding a morphing SVG animation with JavaScript fireship.io/lessons/wavy-back...
#webdev #css #tutorial
🔗 Resources
Code github.com/fireship-io/wavy-c...
Shape Driver www.shapedivider.app/
Haikei App haikei.app/
📚 Chapters
00:00 Wavy Web Design
00:49 Flat HTML Website
03:26 CSS Wave
05:51 CSS Bubble
06:21 SVG Wave
07:15 SVG Layered Wave
08:58 Animated Blob
🤓 Install the quiz app
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
🔥 Watch more with Fireship PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font

Пікірлер: 490

@JanPark 2 жыл бұрын

We need a tag for curved sections on HTML6

@tommymaher4166 2 жыл бұрын

This went largly unnoticed and I'm disappointed.

@Magnogen 2 жыл бұрын

Needs to happen.

@bossdaily5575 2 жыл бұрын

That could be a nice react component

@proloycodes 2 жыл бұрын

@@tommymaher4166 true

@stoningupper 2 жыл бұрын

we do frfr

@DevanSoni 2 жыл бұрын

You’re a machine for pumping out quality content so consistently. Really appreciate your work!

@mostrush4849 2 жыл бұрын

Quality Pump! 😁

@the_lee_effect 2 жыл бұрын

Haha... The clue is in the name... FIRESHIP 🔥.... It's rapid reaction....

@Asia_Bangladesh 2 жыл бұрын

@Fireship plise shire your vs code setting and icon etc

@maximsollogub3579 2 жыл бұрын

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.

@alchemistmd2422 2 жыл бұрын

Yes

@adityakhare2935 2 жыл бұрын

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.

@good_boy_13 2 жыл бұрын

figma balls

@ChristofferLund 2 жыл бұрын

@@good_boy_13 lmao

@westernpigeon 2 жыл бұрын

@@good_boy_13 lmao gotem

@i_never_had_a_burger Жыл бұрын

This video was magically recommended to me after an year and it was just in time when I wanted curved sections for my website

@scottsears6869 Жыл бұрын

9:09

@ysammo214 2 жыл бұрын

That HTML emmet shortcut for creating all those initial sections was amazing, i had no idea emmet was that useful

@WilChow 2 жыл бұрын

One of the best SVG wave tutorials I've watched.

@acm1812 2 жыл бұрын

What a coincidence, I was just working on a project and was trying to implement these types of waves.

@dheerajprakash1419 2 жыл бұрын

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

@anjelpatel36 2 жыл бұрын

First time he read your mind?

@Sintax_ 2 жыл бұрын

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!

@ChumX100 2 жыл бұрын

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.

@thecashewtrader3328 2 жыл бұрын

I see

@alenygam6048 2 жыл бұрын

Ok I'll try.

@chamberlainpi 2 жыл бұрын

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.

@MaulikParmar210 2 жыл бұрын

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.

@MsVsmaster 2 жыл бұрын

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

@soumyajitdey5720 2 жыл бұрын

This is hands down the BEST channel that produces QUALITY content which is ENTERTAINING AF! Keep up the good work man.

@LofiWurld 2 жыл бұрын

We need a course on how you’re soo productive lol

@astolfo-official 2 жыл бұрын

Its probably him enjoying things or having learnt to enjoy working on these.

@abc.2924 2 жыл бұрын

@Zelená Žaba yeah nah, that's not how it works

@arc8218 2 жыл бұрын

@Zelená Žaba bullshit 🤣 This man not even have "join" button lmao How the fuck 1000 sub = 300k ? LMAO

@arc8218 2 жыл бұрын

@Zelená Žaba well u not said on website lmao

@arc8218 2 жыл бұрын

@Zelená Žaba "EDITED"

@loveandroid62 2 жыл бұрын

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!

@coco_deer 2 жыл бұрын

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!

@daleryanaldover6545 2 жыл бұрын

I have a simple wave divider on my current project using svg and you just gave me an idea how to animate the thing. 🔥

@luzaw4957 2 жыл бұрын

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.

@terrificfrogg8377 2 жыл бұрын

Your videos are incredible. You always make web dev exciting. Thank you so much

@murat6018 2 жыл бұрын

I just started watching and you blew my mind twice already. Such a quality content!

@GawpMan 2 жыл бұрын

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

@lanceang795 2 жыл бұрын

1 minute into the tutorial, you already taught me how to save 10 minutes of typing. You are amazing at teaching1

@thememesarealive9813 2 жыл бұрын

Love how nice css/svgs can make websites look

@SweedyMick 2 жыл бұрын

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 😀

@ednethgirao 2 жыл бұрын

Dude, You're the best! I dont even finish whatching, but I already get excited! Nice content, congrats!

@4MXW 2 жыл бұрын

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.

@svenkuffer4512 2 жыл бұрын

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.

@mrherpes2971 2 жыл бұрын

I cannot believe this!! Finally a tutorial i can understand!!! Ty so much fireship

@prempeacefulchannel 2 жыл бұрын

Quality content ever since I got to know about this channel! Thanks man

@deepesh16b Жыл бұрын

you have literally teached me a 3hrs content which I have not even heard of earlier. Thanks 🙏. Loved ur Teaching ❤❤

@vshlmlvliveit 2 жыл бұрын

Always something interesting to learn from you and these tools you introduced are simply awesome👏👏👏

@migvelv 2 жыл бұрын

Right when I’m making my portfolio page!

@zafirhasananogh2421 2 жыл бұрын

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

@shaswatdas6553 2 жыл бұрын

I love the background song intro and outro song. Just started learning css. These are really good.

@someoneperson7257 2 жыл бұрын

you are the only dev who not running out of contents!

@dillonmaks567 2 жыл бұрын

I learn so many cool shortcuts and tricks from your videos. Thank you so much!

@leandroviana7494 2 жыл бұрын

Man, this is some seeeeeeeerious creative frontend content in this video! Loved it.

@fury365 2 жыл бұрын

You save so much time and good explaination. You dont waste time in writing code

@FedericoTartarini 2 жыл бұрын

Great video as usual. Thank you so much for uploading great tutorials.

@daedalus5070 2 жыл бұрын

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.

@aryansoni9150 8 ай бұрын

I followed and made this myself and it works and looks beautiful, thanks jeff

@Zeph504 10 ай бұрын

Not only you teach us how to make curve, you also gave a tip for making my life easier. you earn more subscriber

@luisguilherme2403 2 жыл бұрын

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 🤣

@cpemby 2 жыл бұрын

Literally looked this up today. Perfect!

@johnlin6121 2 жыл бұрын

Just needed a tutorial on this topic and this appeared in KZfaq's feed. Thanks!

@drizzzzz 2 жыл бұрын

I absolutely love this channel!

@raresdude 2 жыл бұрын

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. 🙌

@theulfhednar2655 2 жыл бұрын

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).

@syedahamed2362 2 жыл бұрын

Now, this is Quality Content!!!!

@billycroacker 10 ай бұрын

Thank you man, this video was amazing 👍 I subscribed without blinking after watching this.

@ankibha203 11 ай бұрын

Searching for something..to learn about waves to create them.. found you.. n its helpful. Thanks man 😊

@jake3736 2 жыл бұрын

Woah I didn't know about the flex box console thing

@uwemuke720 2 жыл бұрын

Just what i've been looking for, thank you.

@yashmistry1918 Жыл бұрын

Only if they used this teaching style in school..... Simple, to the point and informative.

@cesarzaitoun1129 5 ай бұрын

This is awesome i have used it in my portfolio, thank you so much 👍

@knockedgoose4206 Жыл бұрын

The animation at the beginning was satisfying and silky smoove

@mariomodulor2190 4 ай бұрын

Thank you! This video saved my life!

@literallybiras 2 жыл бұрын

This video came in such a timely manner it scared me. I was searching for this

@biruktad3327 2 ай бұрын

Wow! This helps me break many dev territories. 'SVG made easy' would be a proper title. Thx.

@m_fadhln 2 жыл бұрын

came for the ✨wave✨, left with a bunch of new tips and knowledge

@fagbenjaenoch 2 жыл бұрын

I've been looking for this video like forever 😭Thanks Jeff😇

@zemonsim 2 жыл бұрын

Wow ! Thanks for the tutorial !

@akC012 2 жыл бұрын

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♥♥

@johncoleman6293 Жыл бұрын

I'm so grateful for this video

@brianevans4 2 жыл бұрын

Hope we get some more SVG tutorials! I always impressed at how some websites use it

@BrianClincy 2 жыл бұрын

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!

@princewillchukwujama1199 Жыл бұрын

3 min into the vid I subbed, thank you brother

@jackbarham Жыл бұрын

Worth it, just for the dev tools flex box viewer. I had no idea!

@GuidoTerceros 2 жыл бұрын

Nice work bud, your site is the most interesting keep going!

@CarlAshfield 2 жыл бұрын

Once again! Amazing video!! 👏

@elijahlair 2 жыл бұрын

My website will get a massive upgrade, thanks Jeff

@olteanuvlad5988 2 жыл бұрын

Genuine quality video!Insane!!

@salonikansal8431 2 жыл бұрын

your videos help us a lot thank you for making them.

@ThePowerRanger 2 жыл бұрын

You are awesome. Thank you so much.

@lephobix 2 жыл бұрын

I am blown away. It is that easy? Dude...

@aCitizenJOSerased 2 жыл бұрын

Dude, u rock! Let's ride those fancy waves!

@parrySc Жыл бұрын

You are my #1 content creator. What a beast!!

@frankiefab 2 жыл бұрын

This tutorial is one of a kind.

@CobraunieSC 3 ай бұрын

THANK YOU BECAUSE OF YOU I AM NOW A LVL 2 DESIGNER

@dvalley56 2 жыл бұрын

Thank you sir for such a simple yet powerful video

@buttslaya 2 жыл бұрын

Just what I needed!

@drkmgoswami3042 2 жыл бұрын

It was really easy to understand please make video like this

@WTFAnyNameWorks 2 жыл бұрын

Man, you're on FIRE! I love you, man!

@systemthirtytwo 2 жыл бұрын

Oooo, gonna use this on my website :D

@santiagoamarozeballos1390 2 жыл бұрын

Ty so much, it was a great help for my personal portfolio :)

@giiipfel 2 жыл бұрын

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!

@fairytailnaruto7693 2 жыл бұрын

OOOH. I love you, that’s just what I searched for.

@hrushalnikhare8836 2 жыл бұрын

Thanks, Fireship!

@Samkhan-cl9bo 2 жыл бұрын

Awesome 👍. Loved your content💗. Appreciated 👏

@CraigPerry 2 жыл бұрын

Just a firehose of pro tips. Insta-subscribe. Awesome content. Awesome delivery.

@imagineeelego 2 жыл бұрын

this is literally what i need

@whybeproduction4106 4 ай бұрын

You made the best video ever created about teaching and explaining something 😂🤜🏽🤛🏽

@arrowfunc3458 2 жыл бұрын

2:47 Omg why am I only learning this now.

@Fireship 2 жыл бұрын

It's a relatively new feature in Chrome. The one in Firefox is even better.

@FilipCodes 2 жыл бұрын

Wow. This is awesome

@joerivde 2 жыл бұрын

Forget the curves, that's some next level Emmet 👀

@mishelrodri 2 жыл бұрын

Nooo man !!! I LOVE IT!!!

@AlexanderMooney-fd7lf Жыл бұрын

Great video! I learned so much!

@winstonmisha 2 жыл бұрын

For this, inline svg is really the easiest for me. Especially when you set preserveAspectRatio="none" so that you are able to stretch and shrink the svg keeping the same height.

@olukmark 2 жыл бұрын

Cool video. Thanks a bunch!

@theshelbypalace Жыл бұрын

this is amazing!!!!! Thank you!! new subscriber! 🥳

@imran4935 Жыл бұрын

This video is a gem

@RonnygoBOOM 2 жыл бұрын

When I inspect my code in a react app using yarn-start, I am not seeing any adjustable buttons to play with my flex code as you described around 2:45. Any suggestions? Is there something else I need to install?