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

Опубликовано: 25 Октябрь 2022
на канале: 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