🦶🏼Multi Step Form With Progress | HTML CSS & JavaScript

Create a Multi Step Form With Progress using HTML ,CSS & JavaScript, step-by-step from scratch.
______________________________________________________________
👉 Source Code Available Here:
______________________________________________________________
💜Support our channel from as little as $1-3 by becoming a Patreon because by doing that, you will help our Channel and also you will have access to 🖥️ Source Code of our videos!
______________________________________________________________
⏱️Chapters:
00:00:00 Intro Multi Step Form with Progress bar
00:00:51 Create Boilerplate using Emmet
00:01:17 HTML | Creating the Forms
00:02:52 HTML | Creating the Button
00:03:56 CSS | CSS Reset & Import Google Fonts
00:05:06 CSS | Applying rules to the Body
00:05:48 CSS | Forms positioning it and giving it color and shape!
00:07:00 CSS | Inputs
00:08:19 CSS | Creating the Buttons
00:11:20 HTML & CSS | Creating Title and Styling it
00:12:01 HTML | Creating 2nd Form
00:13:01 HTML | Creating the Buttons Group
00:13:39 CSS | Applying Layout to the Buttons Group
00:14:11 HTML | Creating 3rd Form
00:15:05 HTML | Creating 4rd Form
00:17:06 HTML | Creating Progress bar
00:19:11 HTML | Creating Line Connecting the Steps
00:20:04 CSS | Putting the Numbers on the Steps using CSS
00:21:21 HTML & CSS | Creating the Names for the Steps
00:23:13 HTML & CSS | Making the First Step Active and Blue
00:24:50 JS | Getting reference to the Elements in the DOM
00:26:10 JS | Looping Through the Buttons using EventListener
00:27:11 JS | Creating Function Updating Form Steps
00:28:16 JS - Looping Through Form Steps and Removing Active Classe if it is there
00:29:22 JS | Creating the Previous Button and adding EventListener to it
00:30:22 CSS | Creating Animation
______________________________________________________________
📚Resources
______________________________________________________________
🏆Recommended Videos🏆

🎬Login & Registration Form Using HTML & CSS & JS✨

🎬Neumorphism Login Form | HTML & CSS✨

🎬CSS Text Typing Animation | HTML & CSS✨

🎬Top 10 CSS & JavaScript Projects✨

🎬Build a Step Progress Bar | JavaScript✨
______________________________________________________________
🛴 Follow me on:
______________________________________________________________
🎵Background Music for Videos:

License code: QYJLBIQRS1691ECL

License code: QG7DEF4DILN6QJ2Q

License code: GVSCFQSDNPRJN6QG
______________________________________________________________
📨 Business Inquiries: such as Sponsor or Collab.

[ASED]

This is what I needed someone vividly explaining not listening to beats only.🎉🎉

[andresbasso]

Very interesting way of dealing with the steps through JavaScript, and the data-attributes. However, having pseudo elements content for meaningful information like step numbers isn't good in terms of accessibility. If you are concerned about accessibility for your form, you should make the numbers be stand-alone elements (and change the JavaScript code, of course)

[DevMadeEasy]

If you find this video helpful, give it a like👍🏻as this would help it reach even more people!
Also, subscribe if you haven't !
👉 Source Code Available Here:

[tiagoborges]

It´s very good but is missing the validation to be perfect. as it is you can go step by step withoud rithing nothing on the inputs.

[saurabh]

Thanks for the great video. Is there a git to download the referenced code ?

[rakeshaamod]

hello sir ji isme number ki jagah right wala icon kese add kare

[Davolnydanny]

submit button not working i mean not fetching data