How To Create This Advanced Credit Card Form With CSS/JavaScript

I recently stumbled upon a really cool CodePen of some credit card inputs and one design in particular stuck out to me. I spent a bunch of time recreating it and this video is a tutorial on how to recreate the final product of this design. It has a lot of challenging CSS and JS restraints which is really fun.


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/c...
Referenced CodePen: https://codepen.io/Dallian/pen/ExoLwvE
Why I Use Data Attributes In JavaScript Article:
Emmet Video:    • Learn Emmet In 15 Minutes - Double Yo...  
HSL Video:    • Are You Making This Mistake With CSS ...  
HSL Article: https://blog.webdevsimplified.com/202...
Advanced Flexbox Concepts Video:    • 6 Advanced Flexbox Features You Proba...  
Defer vs Async Video:    • What Is The Fastest Way To Load JavaS...  
Defer vs Async Article: https://blog.webdevsimplified.com/201...
Regexp Video:    • Learn Regular Expressions In 20 Minutes  


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon:   / webdevsimplified  
Twitter:   / devsimplified  
Discord:   / discord  
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
01:18 - HTML
11:26 - CSS
24:33 - JavaScript


#CSS #WDS #JavaScript