Build a Curvaceous Homepage // Wavy Background Tutorial with SVG & CSS
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
Видео Build a Curvaceous Homepage // Wavy Background Tutorial with SVG & CSS канала Fireship
#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
Видео Build a Curvaceous Homepage // Wavy Background Tutorial with SVG & CSS канала Fireship
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar](https://i.ytimg.com/vi/pfaSUYaSgRo/default.jpg)
![Front-end dev reacts to amazing CSS-only Codepens](https://i.ytimg.com/vi/CG__N4SS1Fc/default.jpg)
![CSS Wavy Background Tutorial | Section Dividers | FREE](https://i.ytimg.com/vi/0QTzTOJCzLY/default.jpg)
![](https://i.ytimg.com/vi/27qrc9845ho/default.jpg)
![I built the same app 10 times // Which JS Framework is best?](https://i.ytimg.com/vi/cuHDQhDhvPE/default.jpg)
![Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial](https://i.ytimg.com/vi/Q7AOvWpIVHU/default.jpg)
![1 Design Trend in 2022 That I Think will be BIG! (7 Examples)](https://i.ytimg.com/vi/6VjvT5uMm-w/default.jpg)
![10 CSS Pro Tips - Code this, NOT that!](https://i.ytimg.com/vi/Qhaz36TZG5Y/default.jpg)
![Make Awesome SVG Animations with CSS // 7 Useful Techniques](https://i.ytimg.com/vi/UTHgr6NLeEw/default.jpg)
![TOP 5 WEBSITES EVERY WEB DESIGNER SHOULD VISIT: Mind-blowing web design | March 2020](https://i.ytimg.com/vi/AmHEfTSBXiY/default.jpg)
![These Personal Websites are just WOW...](https://i.ytimg.com/vi/S7V0-QvYbdo/default.jpg)
![Stop using @import with Sass | @use and @forward explained](https://i.ytimg.com/vi/CR-a8upNjJ0/default.jpg)
![Controlling background-images | CSS Tutorial](https://i.ytimg.com/vi/3T_Jy1CqH9k/default.jpg)
![How to make shapes with CSS](https://i.ytimg.com/vi/QY7Rj8aZcZk/default.jpg)
![Animated Responsive Navbar with CSS - Plus Other Useful Tricks](https://i.ytimg.com/vi/biOMz4puGt8/default.jpg)
![you need a website RIGHT NOW!! (create a website for FREE)](https://i.ytimg.com/vi/gwUz3E9AW0w/default.jpg)
![How to Learn to Code - 8 Hard Truths](https://i.ytimg.com/vi/NtfbWkxJTHw/default.jpg)
![Bitcoin ₿ in 100 Seconds // Build your Own Blockchain](https://i.ytimg.com/vi/qF7dkrce-mQ/default.jpg)
![Learn To Build An SVG Animation With CSS](https://i.ytimg.com/vi/gWai7fYp9PY/default.jpg)
![Learn CSS Position In 9 Minutes](https://i.ytimg.com/vi/jx5jmI0UlXU/default.jpg)