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-backgrounds/
#webdev #css #tutorial
ð Resources
Code https://github.com/fireship-io/wavy-curvey-blobby-website
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/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp
ðĨ 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
source
I am trying the blob example with an IIoniic react app. But have run into the following error Argument of type 'string' is not assignable to parameter of type 'Element' when passing '#blob-1' to KUTE.fromTo() Any suggestions?
I swear
You're the only one ik that makes me ! hate css!!!!!!!!!!!!!
I missed the part where to find the cdn hahaha lol thanks for this man
Great Stuff!
I just started watching and you blew my mind twice already. Such a quality content!
Ty so much, it was a great help for my personal portfolio ð
i am so lost right now
What if want to do this in react , but react styled comments
Pro tip. Just use a background generator that creates waves. Match the background color to your root body color. No messing around. Looks beautiful.
Great video, but haikei colors are not consistent with hex values.
this is brilliant, thanks!
Just came across your channel. Love your work and how you relay information. ð
random note: always animate any text to not appear immediately when it loads, purposely make a blank screen before anything is ready so they don't see it looking bad at first, the effect could be: fade offset, or anything else like a popup.
random idea: yknow that game sims 1 complete collection?! how about you optimize it down??!?? OMGGG i want to upscale or downscale this game idk the right word tho but yeaaaa, for example insteas of those stupid pngs were gonna do svgs. HECK YEAAA
3:40 fair warning
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.
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?
âĢïļ
Genuine quality video!Insane!!
Juste awesome!!
You're genious bro, thanks ð
excellent video brother what do you use to suggest this css properties view at 02:51 ? would it be an extension of the visual studio? if yes, what is the name of this extension?
Fireship keep dashing out godlike content