🦶🏼Multi Step Form With Progress | HTML CSS & JavaScript
Рет қаралды 14,593
Күн бұрынCreate a Multi Step Form With Progress using HTML ,CSS & JavaScript, step-by-step from scratch.
______________________________________________________________
👉 Source Code Available Here:
🌱devmadeeasy.gumroad.com/l/ste...
______________________________________________________________
💜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!
➤ bit.ly/3sthx5B
______________________________________________________________
⏱️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
Markup | Pics used in this Project: bit.ly/3cp2S5W
______________________________________________________________
🏆Recommended Videos🏆
🎬Login & Registration Form Using HTML & CSS & JS✨
➤ • Login & Registration F...
🎬Neumorphism Login Form | HTML & CSS✨
➤ • 🎬Neumorphism Login For...
🎬CSS Text Typing Animation | HTML & CSS✨
👉 • CSS Text Typing Animat...
🎬Top 10 CSS & JavaScript Projects✨
➤ • 🎬Top 10 CSS & JavaScri...
🎬Build a Step Progress Bar | JavaScript✨
➤ • Build a Step Progress ...
______________________________________________________________
🛴 Follow me on:
👉Facebook: bit.ly/3cp2S5W
______________________________________________________________
🎵Background Music for Videos:
bensound.com
uppbeat.io
uppbeat.io/t/hartzmann/no-tim...
License code: QYJLBIQRS1691ECL
uppbeat.io/t/anuch/our-champion
License code: QG7DEF4DILN6QJ2Q
uppbeat.io/t/prigida/cozy
License code: GVSCFQSDNPRJN6QG
______________________________________________________________
📨 Business Inquiries: such as Sponsor or Collab.
business.webdev@protonmail.com
@ASED254 7 ай бұрын
This is what I needed someone vividly explaining not listening to beats only.🎉🎉
@DevMadeEasy 7 ай бұрын
Thanks Web Warrior, I am glad you liked it! You're right just listening to some beats is not enough, you have to know what each line of coding is doing. Happy Coding my friend.
@goodvibes2853 Жыл бұрын
amazing work!!!
@DevMadeEasy Жыл бұрын
Hello Web Warrior, I am glad you liked it... Happy Coding my friend!
@codewithharsh5266 2 жыл бұрын
Nice 👍🏻👍🏻
@DevMadeEasy 2 жыл бұрын
Thanks 👍
@PeriklesPeriklesoglu Жыл бұрын
thanks
@DevMadeEasy Жыл бұрын
You're welcome! And I glad you liked it Happy Coding my friend!
@Henry_Nunez 2 жыл бұрын
👏👏🔔👈
@DevMadeEasy 2 жыл бұрын
Hey Henry Nunez, I'm glad you liked it! Welcome to our Dev Tribe and Happy Coding!
@pointrus17rus57 2 жыл бұрын
New subscriber here 🖐️
@DevMadeEasy 2 жыл бұрын
Thanks and welcome
@saurabh7337 Жыл бұрын
Thanks for the great video. Is there a git to download the referenced code ?
@DevMadeEasy Жыл бұрын
In the description
@user-tx2gl7ro3y Жыл бұрын
hello sir ji isme number ki jagah right wala icon kese add kare
@DevMadeEasy Жыл бұрын
Just replace it...
@DevMadeEasy 2 жыл бұрын
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: 🌱devmadeeasy.gumroad.com/l/stepformwithprogress
@zachfenton608 2 жыл бұрын
we would if you didn't ask a million times and post it everywhere in the video, The video is great.
@zachfenton608 2 жыл бұрын
people would like it without constant reminders. I think they want less advertisement.
@zachfenton608 2 жыл бұрын
I am not trying to be rude. Great explanation but too much youtube subscribe bs. also try to use the word ok less. It get so annoying. Great CSS!
@zachfenton608 2 жыл бұрын
what is your accent?
@zachfenton608 2 жыл бұрын
i just got a similar code suggested to me, with almost the same js but yours had much better css.
@tiagoborges5108 2 жыл бұрын
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.
@DevMadeEasy 2 жыл бұрын
I'm glad you liked it! I have another one on this channel on validation. Welcome to our Dev Tribe & Happy Coding!
@jstneti Ай бұрын
@@DevMadeEasycan ypu share a link to the video qith validation?
@syediqbalahmed3176 2 жыл бұрын
*_good ... see later ..._*
@DevMadeEasy 2 жыл бұрын
Hey Syed, I'm glad you liked it! Happy Coding!
@Davolnydanny Жыл бұрын
submit button not working i mean not fetching data
@DevMadeEasy Жыл бұрын
I apologize for the misunderstanding. If you have followed a video tutorial that only covers the front-end part of the login form and not the back-end, it means that the video focused on the visual and interactive aspects of the form but did not include the necessary code or instructions for handling the form data submission. In order to make the submit button fetch and process the data, you will need to implement the back-end functionality yourself or seek additional resources that cover the back-end implementation. The back-end typically involves server-side programming languages (such as Python, Ruby, PHP, or JavaScript) and frameworks (such as Flask, Ruby on Rails, Laravel, or Express.js) to handle the form data, validate it, and interact with a database or external services if necessary.
@NatteRoll Жыл бұрын
0:24 vc é BR ?
@DevMadeEasy Жыл бұрын
Yes I'm from Brazil. How about you my friend? Welcome to our Comunity!
@NatteRoll Жыл бұрын
@@DevMadeEasy ohh, that's incredible my friend, thanks to represeting us in world wide web, the knowldge out the the border! what is your github profile?
Basir Payenda
Рет қаралды 87 М.
Online Tutorials
Рет қаралды 1,9 МЛН
Cool Items Official
Рет қаралды 52 МЛН