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

Published: 25 October 2022
on channel: Web Dev Simplified
45,568
1.4k

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


Watch video How To Create This Advanced Credit Card Form With CSS/JavaScript online, duration hours minute second in high quality that is uploaded to the channel Web Dev Simplified 25 October 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 45,568 times and liked it 1.4 thousand visitors.