No video

Can I Create This Complex Animated Multistep Form?

  Рет қаралды 298,709

Web Dev Simplified

Web Dev Simplified

Күн бұрын

Пікірлер: 174
@sayeghjoe
@sayeghjoe 2 жыл бұрын
This was very satisfying to watch. Especially when you encountered problems. I enjoyed watching your thought process and seeing you overcome the issues.
@karsongrady
@karsongrady 2 жыл бұрын
These un-edited coding videos are the next wave if you ask me. I love the in-between and the problem-solving. Great stuff as per usual!
@rizqimaulana5754
@rizqimaulana5754 2 жыл бұрын
it is indeed, but it also requires a high understanding of the fundamentals which motivates me even more to code! Absolutely love this video and all the explanations!
@julianrodriguez9832
@julianrodriguez9832 2 жыл бұрын
I love the fact that with this type of content you’re demostrating why we should listen to you and why is so good to learn from you. And I guess this also looks great in your resume, brilliant.
@LuisFelipe-td8qk
@LuisFelipe-td8qk 2 жыл бұрын
I'm a long term subscriber and I have to say, the best videos are those that we follow your thought process.. Thanks for sharing your knowledge!
@andorkh
@andorkh 2 жыл бұрын
I love these live coding videos, it's so cool to see your thought process and how to go about looking for answers and fix stuff! I personally think these are more useful then a step by step tutorial if you want to learn.
@TheScriptingLegend
@TheScriptingLegend 2 жыл бұрын
10:33 glad I’m not the only one that can never remember if it’s included or contains for class list
@Jordan-rv8gl
@Jordan-rv8gl 2 жыл бұрын
Really enjoy actually watching you code and learning your process! This format is really awesome for new beginners so keep making videos like this!
@gopalloharnew5948
@gopalloharnew5948 2 жыл бұрын
39:33 Enjoyed Watching the Video and the way you Explained Things is Really Awesome; These type of Live coding Videos are very Interesting and Helpful.
@rogerangel4257
@rogerangel4257 2 жыл бұрын
Loving the exposure of your problem solving skills. The production seems to feel more natural and uncut which it shows to compare towards the challenges of us individuals when it comes to completing a task.
@zachj7078
@zachj7078 Жыл бұрын
A part from having no clue what that js code is, I find this super interesting!
@idevbrandon
@idevbrandon Жыл бұрын
Thank you. Now i can understand how multi step form works in vallia JS
@kaparapsekiel6300
@kaparapsekiel6300 2 жыл бұрын
This is the best format. The problem solving moments gives far much greater insight into coding. Thank you very much.
@TheScriptingLegend
@TheScriptingLegend 2 жыл бұрын
Nice audience you got here. When I do videos like these on my channel, which most of them are, people are always impatient.
@SlickStatus
@SlickStatus 2 жыл бұрын
I like this series..👍 please don't stop this series...very inspiring....
@anmolwadhwa1226
@anmolwadhwa1226 2 жыл бұрын
Such a great video. It was great to get an insight of how the other developers also think when encountering a new problem and trying to find a solution.
@mtwata
@mtwata Жыл бұрын
I love how he shows the real process of writing the code, looking up functions and making mistakes. It makes me feel less bad about my own skills lol.
@mitchellbrusseau
@mitchellbrusseau 2 жыл бұрын
This was very cool to watch. I hope to implement this on my website soon.
@kass160
@kass160 2 жыл бұрын
I like how you always make good use of custom html attributes.
@assyaf1324
@assyaf1324 2 жыл бұрын
I love how quick you noticed the typos and solved the issues. Give me your brain! 🧟‍♀
@frankiefab
@frankiefab 2 жыл бұрын
I just want to say thank you. I seen this kind of design and was curious on how to implement it
@nilamrakholiya5650
@nilamrakholiya5650 Жыл бұрын
The way you resolving the problems with the teaching us js is very interesting, and Its really helpful for learning process. Thank you for this video.😇😊
@okamimoushiyou
@okamimoushiyou 2 жыл бұрын
Nice to see you solve problems in this vid! Although I was sort of looking for some info that step tracker up above. Im sure you have another video that covers that.
@frank3481
@frank3481 2 жыл бұрын
I love seeing your thought process! Would love it more if you could do the same thing in React. 🙌🏻
@eliebsaibes8345
@eliebsaibes8345 2 жыл бұрын
Yeah that would be awesome please
@HuyNg2603
@HuyNg2603 2 жыл бұрын
I love these kind of videos, since you show how to problem solving as a developers and that what I always want to improve in my career!
@rebertwalog7815
@rebertwalog7815 Жыл бұрын
I didn't skip the debugging part. It's so satisfying🤩
@ahndeux
@ahndeux 2 жыл бұрын
39:31 "And that's all it takes to create this multi step form. Me: "What just happened? Time to go back to the beginning of the video..."
@Witzbold1983
@Witzbold1983 9 ай бұрын
Looks like the css part is the real challenge :D . I like it. :)
@rohitkalelkar6599
@rohitkalelkar6599 2 жыл бұрын
Hello Kyle I m from India and I started watching your videos just from this week. And I must say you are incredibly strong in narration and knowledge imparting.thank you for such awesome videos. I hope I wrote your name right 😅
@beepst
@beepst 2 жыл бұрын
Learning a lot from this. Vanilla js is often forgotten but so important.
@svilenkostadinov844
@svilenkostadinov844 7 ай бұрын
This is one damn good video!! More of these, please
@deepumon.d3148
@deepumon.d3148 2 жыл бұрын
This really helps me how to think while I am getting errors. Actually, this video is helping me to develop problem-solving skills.
@tomaszmarczak9432
@tomaszmarczak9432 2 жыл бұрын
Thanks for this video Kyle. Its very encouraging to see that you also have some troubles understanding why is something going wrong ;)
@miscany
@miscany 2 жыл бұрын
Really useful to see the problem solving live!
@NBGTFO
@NBGTFO 2 жыл бұрын
Best development video I've seen in a very long time!
@regsar2717
@regsar2717 2 жыл бұрын
Bro i love every single video you make all super practical and super good thank you
@ankitsrivastava3972
@ankitsrivastava3972 2 жыл бұрын
Always love to see how you spread your knowledge
@hassaneoutouaya
@hassaneoutouaya 2 жыл бұрын
THANK YOU! I was just wonder about adding a separate animation keyframes as classes for next and previous cards. and add or remove them from the cards, depending on what button (next or previous) we are clicking on.
@jason6763
@jason6763 2 жыл бұрын
You really make web dev simplified! Thanks
@arashazarang7528
@arashazarang7528 2 жыл бұрын
Thank you so much for facilitating such a positive learning environment
@computernetworking6061
@computernetworking6061 2 жыл бұрын
You are awesome bro!! I am more of a backend person but i learned a lot from your videos. Thanks for your great content 😄
@drewnorman3632
@drewnorman3632 11 күн бұрын
Great job on this video
@ManoToor
@ManoToor 2 жыл бұрын
Would be cool to see keyboard inputs to get help for some of those shortcuts you use with vscode
@bacigalupe
@bacigalupe 2 жыл бұрын
Really enjoyed the video 🙂 Would it be possible to have a part 2, where you replicate the list of steps on top of the form? Thanks!
@ppcalpha1042
@ppcalpha1042 2 жыл бұрын
i can watch these all day. sooooo educational
@AvnishKumar-hr3wu
@AvnishKumar-hr3wu 2 жыл бұрын
That's what I need Thank u
@Mindinmatrix
@Mindinmatrix 2 жыл бұрын
This was great, there is so much crap on KZfaq, you do it extremely well! Keep them videos coming!
@dataminX
@dataminX 11 ай бұрын
thank you for this kind of authentic content
@yahushuayah5485
@yahushuayah5485 2 жыл бұрын
this was wonderful,
@CreativeTutorialsWeb
@CreativeTutorialsWeb 2 жыл бұрын
Wow amazing stuff as always 😎
@obettaaugustine3383
@obettaaugustine3383 Жыл бұрын
I love this. Thank you
@scottlexium
@scottlexium 2 жыл бұрын
Nice idea 👍 looking for this for a while now
@atroutopia427
@atroutopia427 2 жыл бұрын
LOVE IT ! But laughed as a toddler when you noticed .some :DD
@OnyeStephen
@OnyeStephen 2 жыл бұрын
As a beginner the javascript syntax seems to be beyond but I just keep watching
@marceloguzman646
@marceloguzman646 2 жыл бұрын
we need more of this
@gcmceachin
@gcmceachin 2 жыл бұрын
That was a great video!! Thanks for posting it.
@andrymarcelrazafimanantsoa7181
@andrymarcelrazafimanantsoa7181 2 жыл бұрын
thank you very much for this video, very useful
@przemaskarol7561
@przemaskarol7561 2 жыл бұрын
Live code is so much better 🙂 Everyone have similar problem with create new project. Thanks
@paulthomas1052
@paulthomas1052 Жыл бұрын
Great tutorial - thanks :)
@netanelmad
@netanelmad 2 жыл бұрын
Came for the cool form, stayed for the skill and problem solving
@ZelenoJabko
@ZelenoJabko 2 жыл бұрын
Use FIELDSET, not DIV tag to separate form elements.
@MathGeekQ
@MathGeekQ 2 жыл бұрын
This is awesome, quality content right here
@chris-ew9wl
@chris-ew9wl 2 жыл бұрын
One thing i learned from this video, is css animation is hard 🙈
@bulletproofcode5733
@bulletproofcode5733 2 жыл бұрын
Love this, Kyle. Appreciate the vulnerability of showing a non-edited video.
@multiwebinc
@multiwebinc 2 жыл бұрын
I actually used that exact same multi step form on something I was working on several years ago.
@NathG.1.4.
@NathG.1.4. 2 жыл бұрын
can you do a video on what to do with the form data? And lets say someone filled out the data but then moved between form steps to keep the data visible.
@ninjacodertech
@ninjacodertech 2 жыл бұрын
these "can i create" videos are great!
@itspawanpoudel
@itspawanpoudel Жыл бұрын
Thank you very much
@lokmanlife3023
@lokmanlife3023 2 жыл бұрын
Superb video man. Seems like CSS is much harder than JavaScript.
@ogbonnashalom5283
@ogbonnashalom5283 Жыл бұрын
I love you man, your my new mentor... Pls I need mentorship 🤲
@getellied
@getellied 2 жыл бұрын
I really enjoyed the video, although I have to say you seemed to overcomplicate that animation. I'll try to do this animation later in a way I think it would work best. In any case, this was an amazing example on how understanding the way things work generally enables you to create new solutions while not taking that long to debug the issue. Awesome vid!
@sandeepkumar-of4wy
@sandeepkumar-of4wy 2 жыл бұрын
What should I do to have atleast 5% knowledge of yours ? You're so good and awesome at coding.
@ronarmengol1677
@ronarmengol1677 Жыл бұрын
Hi. How would you do this: step 1 -> input number of persons (n) step 2 -> input first name and last name of persons (n times) in a multi form
@kitgary
@kitgary 2 жыл бұрын
Can't believe CSS can be so difficult!!
@FierceBoy101
@FierceBoy101 2 жыл бұрын
Thats so crazy!
@ogheneworojohn4308
@ogheneworojohn4308 2 жыл бұрын
I don't understand the "data-multi-step" part.. trying to get info on it but haven't found any
@hackerwhite7957
@hackerwhite7957 2 жыл бұрын
Love You Brother from india
@bboydarknesz
@bboydarknesz 2 жыл бұрын
really enjoy this handling with the animation always the biggest problem I guess, that's why I hate designer using animation but still can't hate them xD
@iwatchtoomuchhaikyuu5307
@iwatchtoomuchhaikyuu5307 2 жыл бұрын
"what are you doing step-title...?"
@cristianmetz9470
@cristianmetz9470 2 жыл бұрын
Simply awesome
@asheaven1st
@asheaven1st 2 жыл бұрын
I love how programmer works!
@JuanIGN95
@JuanIGN95 2 жыл бұрын
This with React could be beautifull :D
@khadijaasehnoune351
@khadijaasehnoune351 Жыл бұрын
thanks a lot
@novacaineanarchy
@novacaineanarchy 2 жыл бұрын
I think multistep forms are not getting enough attention in beginner tutorials, when I got my first frontend job almost immediately I needed to make or change multistep forms, almost any project has some sort of it in it. So, thanks for the video.
@ThetaSimulator
@ThetaSimulator 2 жыл бұрын
Maybe a total basic question - but why add data attributes instead of classes? Do you only give classes to style elements, and then use data attributes for finding grouped elements with JS? Genuinely curious and new to programming
@chihebsamti6362
@chihebsamti6362 2 жыл бұрын
i'm wandering too xD
@ThetaSimulator
@ThetaSimulator 2 жыл бұрын
@@chihebsamti6362 I saw in another video that data attributes are used to store info, rather than affect the styling. This leads to a clear separation between data attributes that store things about the element (eg what group of elements it belongs to, etc) and classes are then solely responsible for styling
@mdsaifulislamshanto4444
@mdsaifulislamshanto4444 2 жыл бұрын
thank you very much .
@tynegeemajor
@tynegeemajor 2 жыл бұрын
Can You please do a video on how to create a working booking / reservation form with backend.
@mentalost
@mentalost Жыл бұрын
For some reason it won't let me go to previous step because it checks the validity of the input. I want it so it doesn't check anything and just goes to previous step without checking anything because it wont let me go back unless I fill something into the form. I copied your code but it still does it
@centrumsaiyan7623
@centrumsaiyan7623 2 жыл бұрын
Lesson from pro -Look out for MDN documentation 17:38
@whisky9075
@whisky9075 2 жыл бұрын
What are you doing step-title?
@lordMaroza
@lordMaroza 2 жыл бұрын
Why are we degens? 😂
@stefanoaprile3790
@stefanoaprile3790 Жыл бұрын
How would you build the progress bar within this code for a multistep form?
@lolprohighlights1629
@lolprohighlights1629 2 жыл бұрын
How to change preview on the page to make it show on another browser such as: Mozilla, Google Chrome and so on?
@abhishekmaurya20
@abhishekmaurya20 Жыл бұрын
i dont know my my checkvalidity isnt working ,if i click on next it moves to next card but if i fill the form its not going to next card
@ooees
@ooees 2 жыл бұрын
cant believe a form like this can be so complex wtf
@sivaru95
@sivaru95 2 жыл бұрын
How do you replace the word email in all selected ocurrencies at 5:25, is this a VS Code extension?
@lilrex2015
@lilrex2015 2 жыл бұрын
so what is Data-set? is that an attribute? I have never heard of it before.
@SuperYoda7
@SuperYoda7 2 жыл бұрын
what is the data-step and data-multi-step doing ? Can I call them differently or are they some properties which can't be changes.
@michaelyabut5969
@michaelyabut5969 2 жыл бұрын
How did he make his reportValidity work without adding required attribute to his html? I thought empty inputs are valid by default unless required is used. Does anyone know what's going on there?
@ryan_roga
@ryan_roga 2 жыл бұрын
Why a data property on the buttons, over something like ID's or classes?
@smokemydds
@smokemydds 2 жыл бұрын
If i want to redirect page after hitting the submit button, how do i write the code for that? Please help!
@lightbrid5558
@lightbrid5558 2 жыл бұрын
Hey just curious how does the index work?
Can I Create Accessible CSS Toggle Buttons?
24:14
Web Dev Simplified
Рет қаралды 245 М.
Multistep Form Custom Hook With React And TypeScript
28:23
Web Dev Simplified
Рет қаралды 149 М.
How I Did The SELF BENDING Spoon 😱🥄 #shorts
00:19
Wian
Рет қаралды 36 МЛН
WILL IT BURST?
00:31
Natan por Aí
Рет қаралды 20 МЛН
If You Want To Be An Advanced Game Developer Build This Project
59:54
Web Dev Simplified
Рет қаралды 149 М.
Can I Create This Simple CSS Hover Animation?
41:41
Web Dev Simplified
Рет қаралды 115 М.
How To Create Skeleton Loading Animation With CSS
9:59
Web Dev Simplified
Рет қаралды 294 М.
This Simple Trick Makes Your Website 83% Better Looking
10:57
Web Dev Simplified
Рет қаралды 388 М.
Master CSS Overflow/Text Wrapping Like A Senior Developer
20:53
Web Dev Simplified
Рет қаралды 42 М.
Can I Create This Tricky Animated CSS Sidebar?
1:01:37
Web Dev Simplified
Рет қаралды 203 М.
Portfolio Website Tutorial - Frontend Development with HTML, CSS, JavaScript
3:25:56
This NEW AI Chip From Huawei DESTROYS NVIDIA
9:37
Tech Pulse Pro
Рет қаралды 24 М.
How I Did The SELF BENDING Spoon 😱🥄 #shorts
00:19
Wian
Рет қаралды 36 МЛН