Microinteractions: Awesome Password Validation Animation

👉 Become A VS Code SuperHero Today: https://vsCodeHero.com

Download the PDF front-end roadmap for FREE to keep you on track!
https://codestackr.podia.com/front-en...

Micro Interactions are small animations that let the user know something has happened or is happening. These are great for improved user experience in your user interface.

Today we are going to build an animation inspired by @frontendjoe, who collaborated with Miriam Isaac (@misaac85) on Instagram to break down the password validator. They built their version in Vue. We are going to recreate it using vanilla JavaScript.

Micro-interactions can bring websites and apps to life if used correctly.

Here is the link to the Instagram post that inspired this video:   / cbqrut1a86_  

Source code: https://codepen.io/codeSTACKr/full/zY...

Chapters
00:00 - Intro
00:53 - Micro-Interactions Explained
01:26 - HTML
05:15 - CSS
13:39 - JavaScript Validation Message
28:40 - Show/Hide Password
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/...
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/...

🚢 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codest...
_____________________________________

🚀 Get 1 Year of FREE Hosting (Sponsor Link)
https://www.atlantic.net/Codestackr/
🚨 Use code: Stackr to get $25 in FREE Credit!!
_____________________________________

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

Watch Next:
Web Development - Beginners Roadmap (2020) -    • Web Developer Roadmap 2020 | A Guide To St...  
Playlist: Web Development For Beginners -    • Web Development - Beginners Roadmap (2019)  
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter:   / codestackr  
Instagram:   / codestackr  
Facebook:   / 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 #ux #ui