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

#webdev #css #tutorial

🔗 Resources

📚 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

🔥 Watch more with Fireship PRO

Use code lORhwXd2 for 25% off your first payment.

🎨 My Editor Settings

- Atom One Dark
- vscode-icons
- Fira Code Font

[JanPark]

We need a <thicc> tag for curved sections on HTML6

[DevanSoni]

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

[adityakhare]

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.

[ysammo]

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

[Sintax_]

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!

[WilChow]

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

[acm]

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

[soumyajitdey]

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

[loveandroid]

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]

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!

[daleryanaldover]

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

[ChumX]

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.

[LofiWurld]

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

[terrificfrogg]

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

[murat]

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

[prempeacefulchannel]

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

[luzaw]

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.

[ednethgirao]

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

[thememesarealive]

Love how nice css/svgs can make websites look

[lanceang]

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