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/css-js-credit-card
Referenced CodePen: https://codepen.io/Dallian/pen/ExoLwvE
Why I Use Data Attributes In JavaScript Article:
Emmet Video: https://youtu.be/V8vizNQKtx0
HSL Video: https://youtu.be/EJtmfkKulNA
HSL Article: https://blog.webdevsimplified.com/2021-06/hsl-color-format
Advanced Flexbox Concepts Video: https://youtu.be/1zKX71GYisE
Defer vs Async Video: https://youtu.be/BMuFBYw91UQ
Defer vs Async Article: https://blog.webdevsimplified.com/2019-12/javascript-loading-attributes-explained
Regexp Video: https://youtu.be/rhzKDrUiJVk


Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
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