Learn to design a web site with curved or wavy backgrounds utilizing HTML and CSS. Then take issues to the subsequent degree by including a morphing SVG animation with JavaScript https://fireship.io/classes/wavy-backgrounds/
#webdev #css #tutorial
🔗 Assets
Code https://github.com/fireship-io/wavy-curvey-blobby-website
Form Driver https://www.shapedivider.app/
Haikei App https://haikei.app/
📚 Chapters
00:00 Wavy Net Design
00:49 Flat HTML Web site
03:26 CSS Wave
05:51 CSS Bubble
06:21 SVG Wave
07:15 SVG Layered Wave
08:58 Animated Blob
🤓 Set up the quiz app
iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/retailer/apps/particulars?id=io.fireship.quizapp
🔥 Watch extra with Fireship PRO
Improve to Fireship PRO at https://fireship.io/professional
Use code lORhwXd2 for 25% off your first cost.
🎨 My Editor Settings
– Atom One Darkish
– vscode-icons
– Fira Code Font
source
premium vids? 😏
It creates a margin between images when I use devtools to view responsiveness… Someone can tell me how to fix it?
Please don't refer to Chrome as "the" browser (2:45). Rest of the content is nice, really interesting
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!
hello guys, i'm new to android dev. and i want to know if there is a way to do these kind of cool animations or design in android with SVG or CSS?? thank you in advance 🙂
Now to combine many videos and make a stupidly cool site!
Do u have any course in Udemy??
Nooo man !!! I LOVE IT!!!
My website will get a massive upgrade, thanks Jeff
Now tell me how to animate the curves…
instead of using an empty div maybe the <hr/> would be better for this purpose ! i just tried it and it works perfectly as expected
That HTML emmet shortcut for creating all those initial sections was amazing, i had no idea emmet was that useful
using vw for default widths 😬
I learn so many cool shortcuts and tricks from your videos. Thank you so much!
can we just use live server?
thank u
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
It is so sad that there are so many cool things out there but our time is limited 🙁
Bro, please make a patreon to me give to you all my money
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 🤣
Banged up
This might be a dumb question, but is there a difference between running 'npx serve' (I have node and have used that command before) and just using the 'Live Server' VSCode extension? Or are they both different ways to do the same thing?
1 minute into the tutorial, you already taught me how to save 10 minutes of typing. You are amazing at teaching1
What command line does he use? anyone know please?
Incredible channel, thanks mate !
😵
And here I was wondering how to make my portfolio looks better than just sideways line 😂
7:22 am I the only one who listened to the baby
i like curves… on women not websites.