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

Published: 19 August 2021
on channel: Fireship

1,093,755

47k

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 https://fireship.io/lessons/wavy-back...

#webdev #css #tutorial

🔗 Resources

Code https://github.com/fireship-io/wavy-c...
Shape Driver https://www.shapedivider.app/
Haikei App https://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 https://itunes.apple.com/us/app/fires...
Android https://play.google.com/store/apps/de...

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.

🎨 My Editor Settings

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

On this page of the site you can watch the video online Build a Curvaceous Homepage // Wavy Background Tutorial with SVG & CSS with a duration of hours minute second in good quality, which was uploaded by the user Fireship 19 August 2021, share the link with friends and acquaintances, this video has already been watched 1,093,755 times on youtube and it was liked by 47 thousand viewers. Enjoy your viewing!

37,384

1.6K

00:00:00