"Glassmorphism" Frosted Glass Credit Card Form with Validation | HTML, CSS, JavaScript

Channel:

codeSTACKr

Subscribers:

296,000

Published on January 1, 2021 3:00:12 PM ● Video Link: https://www.youtube.com/watch?v=jEa9YyRqE1U

Duration: 25:44

14,544 views

802

🦸 Become A VS Code SuperHero Today: https://vsCodeHero.com
🧑🏾🤝🧑🏽 Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

Glass morphism is a relatively new UI design trend, and it looks pretty cool.

In this video, we are going to build a cool credit card that looks like frosted glass and is actually a fillable form with simple validation.

For the validation, we are going to use a JavaScript library called Cleave.js.

Resources:
Source Code: https://github.com/codeSTACKr/glassmorphism-credit-card
Cleave.js: https://nosir.github.io/cleave.js/
Easings: https://easings.net/
_____________________________________
🚢 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codestackr
📚 FREE 7-Day trial at Treehouse: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 codeSTACKr Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 STACKr Code Font (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
_____________________________________

⏱️ Timestamps ⏱️
00:00 - Intro
00:26 - HTML
05:29 - CSS
14:53 - Animation
16:30 - Form Validation with Cleave.js
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

👀 Watch Next:
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

🌐 Connect With Me:
Website: https://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #Glassmorphism #form