Can I Create This Complex Animated Multistep Form?

Поділитися
Вставка
  • Опубліковано 3 жов 2024

КОМЕНТАРІ • 173

  • @sayeghjoe
    @sayeghjoe 2 роки тому +166

    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 роки тому +105

    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!

  • @LuisFelipe-td8qk
    @LuisFelipe-td8qk 2 роки тому +6

    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!

  • @gopalloharnew5948
    @gopalloharnew5948 2 роки тому +21

    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.

  • @julianrodriguez9832
    @julianrodriguez9832 2 роки тому +7

    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.

  • @andorkh
    @andorkh 2 роки тому +13

    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.

  • @idevbrandon
    @idevbrandon Рік тому +1

    Thank you. Now i can understand how multi step form works in vallia JS

  • @TheScriptingLegend
    @TheScriptingLegend 2 роки тому +2

    10:33 glad I’m not the only one that can never remember if it’s included or contains for class list

  • @AIandsuch
    @AIandsuch 2 роки тому +6

    Really enjoy actually watching you code and learning your process! This format is really awesome for new beginners so keep making videos like this!

  • @zachj7078
    @zachj7078 2 роки тому +1

    A part from having no clue what that js code is, I find this super interesting!

  • @SlickStatus
    @SlickStatus 2 роки тому +13

    I like this series..👍 please don't stop this series...very inspiring....

  • @kaparapsekiel6300
    @kaparapsekiel6300 2 роки тому

    This is the best format. The problem solving moments gives far much greater insight into coding. Thank you very much.

  • @assyaf1324
    @assyaf1324 2 роки тому

    I love how quick you noticed the typos and solved the issues. Give me your brain! 🧟‍♀

  • @rogerangel4257
    @rogerangel4257 2 роки тому +3

    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.

  • @anmolwadhwa31
    @anmolwadhwa31 2 роки тому +1

    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.

  • @mitchellbrusseau
    @mitchellbrusseau 2 роки тому +2

    This was very cool to watch. I hope to implement this on my website soon.

  • @rebertwalog7815
    @rebertwalog7815 Рік тому

    I didn't skip the debugging part. It's so satisfying🤩

  • @kass160
    @kass160 2 роки тому +2

    I like how you always make good use of custom html attributes.

  • @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.

  • @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.😇😊

  • @frankiefab
    @frankiefab 2 роки тому +1

    I just want to say thank you. I seen this kind of design and was curious on how to implement it

  • @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!

  • @TheScriptingLegend
    @TheScriptingLegend 2 роки тому +1

    Nice audience you got here. When I do videos like these on my channel, which most of them are, people are always impatient.

  • @svilenkostadinov844
    @svilenkostadinov844 8 місяців тому

    This is one damn good video!! More of these, please

  • @Witzbold1983
    @Witzbold1983 10 місяців тому

    Looks like the css part is the real challenge :D . I like it. :)

  • @jason6763
    @jason6763 2 роки тому +1

    You really make web dev simplified! Thanks

  • @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.

  • @regsar2717
    @regsar2717 2 роки тому

    Bro i love every single video you make all super practical and super good thank you

  • @NBGTFO
    @NBGTFO 2 роки тому

    Best development video I've seen in a very long time!

  • @beepst
    @beepst 2 роки тому

    Learning a lot from this. Vanilla js is often forgotten but so important.

  • @ppcalpha1042
    @ppcalpha1042 2 роки тому

    i can watch these all day. sooooo educational

  • @ankitsrivastava3972
    @ankitsrivastava3972 2 роки тому

    Always love to see how you spread your knowledge

  • @miscany
    @miscany 2 роки тому

    Really useful to see the problem solving live!

  • @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 ;)

  • @arashazarang7528
    @arashazarang7528 2 роки тому

    Thank you so much for facilitating such a positive learning environment

  • @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.

  • @dataminX
    @dataminX Рік тому

    thank you for this kind of authentic content

  • @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 😄

  • @frank3481
    @frank3481 2 роки тому +4

    I love seeing your thought process! Would love it more if you could do the same thing in React. 🙌🏻

  • @Mindinmatrix
    @Mindinmatrix 2 роки тому

    This was great, there is so much crap on UA-cam, you do it extremely well! Keep them videos coming!

  • @AvnishKumar-hr3wu
    @AvnishKumar-hr3wu 2 роки тому

    That's what I need
    Thank u

  • @LexiumHub
    @LexiumHub 2 роки тому

    Nice idea 👍 looking for this for a while now

  • @drewnorman3632
    @drewnorman3632 Місяць тому

    Great job on this video

  • @obettaaugustine3383
    @obettaaugustine3383 Рік тому

    I love this. Thank you

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb 2 роки тому

    Wow amazing stuff as always 😎

  • @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 😅

  • @gcmceachin
    @gcmceachin 2 роки тому

    That was a great video!! Thanks for posting it.

  • @ahndeux
    @ahndeux 2 роки тому +1

    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..."

  • @MathGeekQ
    @MathGeekQ 2 роки тому

    This is awesome, quality content right here

  • @yahushuayah5485
    @yahushuayah5485 2 роки тому

    this was wonderful,

  • @paulthomas1052
    @paulthomas1052 Рік тому

    Great tutorial - thanks :)

  • @bulletproofcode5733
    @bulletproofcode5733 2 роки тому +1

    Love this, Kyle. Appreciate the vulnerability of showing a non-edited video.

  • @andrymarcelrazafimanantsoa7181
    @andrymarcelrazafimanantsoa7181 2 роки тому

    thank you very much for this video, very useful

  • @atroutopia427
    @atroutopia427 2 роки тому

    LOVE IT ! But laughed as a toddler when you noticed .some :DD

  • @hassaneoutouaya
    @hassaneoutouaya 2 роки тому +1

    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.

  • @marceloguzman646
    @marceloguzman646 2 роки тому

    we need more of this

  • @OnyeStephen
    @OnyeStephen 2 роки тому

    As a beginner the javascript syntax seems to be beyond but I just keep watching

  • @bacigalupe
    @bacigalupe 2 роки тому +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!

  • @przemaskarol7561
    @przemaskarol7561 2 роки тому

    Live code is so much better 🙂
    Everyone have similar problem with create new project.
    Thanks

  • @ManoToor
    @ManoToor 2 роки тому +3

    Would be cool to see keyboard inputs to get help for some of those shortcuts you use with vscode

  • @netanelmad
    @netanelmad 2 роки тому

    Came for the cool form, stayed for the skill and problem solving

  • @ninjacodertech
    @ninjacodertech 2 роки тому

    these "can i create" videos are great!

  • @FierceBoy101
    @FierceBoy101 2 роки тому +1

    Thats so crazy!

  • @multiwebinc
    @multiwebinc 2 роки тому

    I actually used that exact same multi step form on something I was working on several years ago.

  • @ogbonnashalom5283
    @ogbonnashalom5283 Рік тому

    I love you man, your my new mentor... Pls I need mentorship 🤲

  • @hackerwhite7957
    @hackerwhite7957 2 роки тому +1

    Love You Brother from india

  • @kitgary
    @kitgary 2 роки тому

    Can't believe CSS can be so difficult!!

  • @cristianmetz9470
    @cristianmetz9470 2 роки тому

    Simply awesome

  • @lokmanlife3023
    @lokmanlife3023 2 роки тому

    Superb video man. Seems like CSS is much harder than JavaScript.

  • @asheaven1st
    @asheaven1st 2 роки тому

    I love how programmer works!

  • @chris-ew9wl
    @chris-ew9wl 2 роки тому +1

    One thing i learned from this video, is css animation is hard 🙈

  • @ZelenoJabko
    @ZelenoJabko 2 роки тому +1

    Use FIELDSET, not DIV tag to separate form elements.

  • @khadijaasehnoune351
    @khadijaasehnoune351 Рік тому

    thanks a lot

  • @NathG.1.4.
    @NathG.1.4. 2 роки тому +1

    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.

  • @JuanIGN95
    @JuanIGN95 2 роки тому

    This with React could be beautifull :D

  • @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

  • @mdsaifulislamshanto4444
    @mdsaifulislamshanto4444 2 роки тому

    thank you very much .

  • @sandeepkumar-of4wy
    @sandeepkumar-of4wy 2 роки тому

    What should I do to have atleast 5% knowledge of yours ? You're so good and awesome at coding.

  • @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!

  • @GergelyCsermely
    @GergelyCsermely 2 роки тому

    Thanks

  • @ronarmengol1677
    @ronarmengol1677 2 роки тому

    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

  • @iwatchtoomuchhaikyuu5307
    @iwatchtoomuchhaikyuu5307 2 роки тому

    "what are you doing step-title...?"

  • @adviti2918
    @adviti2918 2 роки тому

    You are best.... 👍

  • @ogheneworojohn4308
    @ogheneworojohn4308 2 роки тому +1

    I don't understand the "data-multi-step" part.. trying to get info on it but haven't found any

  • @tynegeemajor
    @tynegeemajor 2 роки тому

    Can You please do a video on how to create a working booking / reservation form with backend.

  • @vathsathya4553
    @vathsathya4553 2 роки тому

    That's my way 😁

  • @mohamedyoussef8835
    @mohamedyoussef8835 2 роки тому

    Awesome video ++++++ 😃

  • @centrumsaiyan7623
    @centrumsaiyan7623 2 роки тому

    Lesson from pro
    -Look out for MDN documentation 17:38

  • @ooees
    @ooees 2 роки тому

    cant believe a form like this can be so complex wtf

  • @ThetaSimulator
    @ThetaSimulator 2 роки тому +1

    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

  • @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.

  • @theideaguy4532
    @theideaguy4532 2 роки тому

    Watching this, I know I have a really long way to go with JavaScript 😂😂

  • @hackersmethod3340
    @hackersmethod3340 2 роки тому +1

    @Web Dev Simplified.... May you do it with react please.That would be really awesome.

  • @paschalkings8184
    @paschalkings8184 2 роки тому

    Wonderful tutorial but they don't appear in my chrome. I don't know why

  • @lilrex2015
    @lilrex2015 2 роки тому

    so what is Data-set? is that an attribute? I have never heard of it before.

  • @ryan_roga
    @ryan_roga 2 роки тому

    Why a data property on the buttons, over something like ID's or classes?

  • @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

  • @ameerhamza-pw1vq
    @ameerhamza-pw1vq 2 роки тому +6

    react typescript big project will be very helpfull typescipt growing too fast

  • @razorjhon2622
    @razorjhon2622 2 роки тому

    Please do it for react , we need more react videos !

  • @jacobpradels
    @jacobpradels 2 роки тому

    Is there a reason when doing these complex CSS videos you choose not to use SASS? Either way, really enjoy the videos. I have learned a lot!

    • @trefwoordpunk2225
      @trefwoordpunk2225 2 роки тому

      SASS is BULLSCHITT

    • @bavidlynx3409
      @bavidlynx3409 2 роки тому

      Normal css is supreme 🙇🏻‍♂️

    • @jasonmurphy6253
      @jasonmurphy6253 2 роки тому

      Probably because scss is really useful for scaling large applications. Total overkill for this