Can I Replicate This Amazing Library?

Intro.js is an amazing library that makes creating interactive walkthroughs on your web application incredibly easy. In this video I am going to attempt to replicate the behavior of this library from scratch for the very first time ever. There will be plenty of mistakes, and bugs I run into and you will be able to see live exactly how I solve those issues.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/i...
IntroJS Site: introjs.com
Tooltip Tutorial: • How To Make Tooltips W...
Tutorial On Cards From This Video: • How To Create Animated...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:18 - Demo/Setup
01:20 - CSS
15:11 - Modal JavaScript
39:12 - Highlight JavaScript
#CSS #WDS #JavaScript

[@shadowsbane171091]

Highlight idea was brilliant, when I made a tour library I went with using SVG to create backdrop and highlight!

[@tikeswarnaik827]

Thank you for making these kinds of videos. I have been following your videos for more than one year. According to me, your contents are the best. I have learned a lot from your videos.

[@gregtasi]

This is great! Thank you for this type of videos!

[@muhawenimanajanvier6280]

Your videos are always a solution to my projects😎

[@isabelphillips451]

I'm currently writing a similar library as well, I'm so happy you are doing this, let me pick up one or two ideas from your code 😍😍😍😍

[@JEsterCW]

U aint do shit 🤣

[@noahr1545]

Really love these videos. I tend to find myself doing the same process of thinking as you, so watching these videos helps a lot. They also show that you're not this coding god, but a human who is willing to problem solve and eventually figure it out. Great video!

[@MathyVids]

Wow, this is exactly what's next on my todo for my project. My prayers answered

[@aritark]

using spread to make the cutout+backdrop work is a great idea

[@markuserdmann1722]

Awsome!
1:04 In your CSS you can enable pointer-events on child elements if the parent element has pointer-event: none. For example .modal { pointer-events: auto }

[@sands_45fx83]

Great Vidoe. Bottom -0 was gonna do the trick with highlight -container

[@aldoarteaga5939]

Kyle i love your work im a new fan, you know what you should do next a deployment tutorial maybe with netlify? It would be a giant help for me.

[@hassaneoutouaya]

Thank you so much, it was a nice coding trip !

[@anand_dudi]

Thanks kyle for this you are great

[@ohunjonmahmudov6362]

You know very much thing even you are young, I envy in good meaning:), You and DevEd are the best teachers.

[@osherezra8460]

Awesome series Kyle thank you, I would add to this types of videos reaching out to online docs for reference and explaining how you approach them
that would be a lot of help to many people. thank you keep it up

[@regilearn2138]

Hi ,would appreciate if you can do a series set,for how to do crud operation with all the form controls in react which include example like input /select /radio btn redio btn group /checkbox /date picker/time / file upload/ date range etc...,

[@johnedet4551]

Very nice.. pls can you do a tutorial using this library with react

[@jcpluto4555]

2 minutes in just came to say thanks for the content !

[@alipasha7275]

Super cool and advance bro ❤

[@beinyourguard]

what do the hashtags mean before the elements?

[@hackcraft_]

Wow!this is impressive

[@augustuscaeser8939]

Can you make this into an actual cdn so I could use in my projects? Intro js is not free and has a cost to it

[@jasonc2901]

Why don’t you also build it man

[@maximilian19931]

Source code is on github. Check out the description for the github link.

[@aryanjainascanio3388]

Hi Kyle, could you one day do a calendario in which you can add events like exams or hw, i think it would be very useful

[@ashish_prajapati_tr]

i already have this project in my todo list

[@shawnsvarghese574]

You should make videos on Sets

[@androidetube]

He missed the mad cat typing at the keyboard :(

[@SlickStatus]

TOPIC SUGGESTIONS :- please make a video on how to make custom scrollbar using JS like jQuery scrollar

[@grzegorzzielinski1263]

Multi-step form from scratch link was nowhere to be seen unfortunately, would like to have a look at it :) or I missed that along the way, but 1:10:06 is explicit about that

[@WebDevSimplified]

It is the top left video link

[@7heMech]

Cool

[@patrickc.6183]

z-index is over 9000! 😁

[@mehrdad1068]

Please make tutorial for like_unlike_dislike_undislike_comment_share_replay_save_unsave
🙏🙏🌱🌻

[@nithinsvarrier670]

👀

[@mattoattacko]

Do you speed up your videos a bit? Like maybe 10-20%? Your voice always seems oddly fast when you are coding.

[@postingbmwm3]

It may be because for short videos he has a script which me memorized.

[@mattoattacko]

@@postingbmwm3 come again?

[@bowersindustry]

3rd comment!

[@anshulsingh1265]

complicated...but still enjoy..

[@codingninja01_]

first😎😎

[@kristiyan.zhelyazkov]

hm hm hm

[@thechoosen4240]

Good job bro, JESUS IS COMING BACK VERY SOON; WATCH AND PREPARE

[@mehrdad1068]

Please make tutorial for like_unlike_dislike_undislike_comment_share_replay_save_unsave
🙏🙏🌱🌻