Fancy Form UI From Scratch - HTML, CSS3, JS & Sass - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Web Development Traversy Media Video: Fancy Form UI From Scratch - HTML, CSS3, JS & Sass.
In this video we will build a nice looking form UI with a progress bar that will show one field at a time. We will use HTML, CSS3 with transitions, Sass and vanilla JavaScript. We will compile our Sass with node-sass.

Code:
https://codepen.io/bradtraversy/pen/xzrMom
https://github.com/bradtraversy/fancy_form

• Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia

The Developer Hangout: Public Discord Server
https://discord.gg/developers

Published: Friday, August 30, 2019 11:09 AM
Category: Web Development Traversy Media

97 Views

Related Videos

Complete Responsive Log in Form Design From Scratch using Html & CSS | How To Create a Sign Up Form

by Best Webhosting Added 5 years ago 71 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve
Top 7 Creative CSS Form Design using Html & CSS | Stylish & Responsive Form With CSS3

by Best Webhosting Added 5 years ago 57 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve
Popular
Glassmorphism Login Form using Html & CSS | CSS3 Animated Login Form

by Best Webhosting Added 5 years ago 115 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve
Sass Workflow & Dev Server From Scratch Using Gulp

by Best Webhosting Added 6 years ago 85 Views / 0 Likes

In this video we are going to build the "Sass Starter Pack" which is a complete Sass workflow and dev server and environment using Gulp, the Gulp-Sass plugin and BrowserSync. Then well mess with it a little bit and create a simple little project. Feel free to use this starter pack in future Sass projects SASS STARTER PACK GITHUB: https://github.com/bradtraversy/sass_starter_pack CHECK OUT THE NEW DISCORD SERVER:https://discord.gg/PCb6PaM BECOME A PATR
How To Create a Responsive Contact Form with Html CSS | Floating Placeholder CSS3

by Best Webhosting Added 6 years ago 100 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D ------------------ Join Our Channel Membership And Get Source Code Everyday Join : https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/join ------------------ Also Watch This CSS3 Contact Us Form Design with Floating Placeholder | Responsive Design https://www.youtube.co
Popular
Transparent Login Form with HTML & CSS - How To Create Login Form In HTML and CSS - Sign In Form

by Best Webhosting Added 6 years ago 138 Views / 0 Likes

Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Popular
Html Css Login Form Design With Glass Effect - How to Make a Transparent Login Form in Html and Css

by Best Webhosting Added 6 years ago 152 Views / 0 Likes

Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Popular
Image Zoom Effect - css3 html tutorial - Easy Css3 html Tutorial

by Best Webhosting Added 6 years ago 110 Views / 0 Likes

Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Popular
Como hacer una Sección Desplegable con HTML, CSS (SASS) y Jquery

by Best Webhosting Added 6 years ago 107 Views / 0 Likes

Aprende como hacer una sección desplegable para tu sitio web en la cual mostrar contenido extra para tus usuarios. • Blog de diseño web: http://www.falconmasters.com • Necesitas ayuda con el tutorial? Únete a nuestra comunidad: http://www.heroesdelaweb.com --- • Articulo con el código y recursos utilizados http://www.falconmasters.com/web-design/seccion-desplegable-jquery/ --- Redes Sociales: • Twitter @falconmasters: http://www.twitter.com/falconmast
Popular
Create a Login Form with HTML & CSS - Transparent login page design in html - Html CSS Form Design

by Best Webhosting Added 6 years ago 137 Views / 0 Likes

Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Scratch Effects | wScratchPad.js | Html5 CSS3 & jQuery

by Best Webhosting Added 6 years ago 89 Views / 0 Likes

Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Plugin Url : https://github.com/websanova/wScratchPad wScratchPad.js (Working js file) : https://drive.google.com/file/d/1szkWD6fPaVFGTNM7txzfu8tMD5maL5xR/view?usp=sharing Music Credit Track: Tobu - Roots [NCS Release] Music provided by NoCopyrightSounds. https://www.youtube.com/watch?v=7wNb0pHyGuI
Popular
Animated Glowing Gradient Login Form Using Html CSS | User Sign in Form Design

by Best Webhosting Added 6 years ago 282 Views / 0 Likes

Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Music Credit Track: Tobu - Roots [NCS Release] Music provided by NoCopyrightSounds. https://www.youtube.com/watch?v=7wNb0pHyGuI