Microinteractions: Awesome Password Validation Animation

Channel:
United States codeSTACKr
Subscribers:
296,000
Published on ● Video Link: https://www.youtube.com/watch?v=EdDpBDFFxxw


Duration: 32:18
10,117 views
539

πŸ‘‰ 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-end-web-developer-roadmap-2020

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: https://www.instagram.com/p/CBQRUt1A86_/

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

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/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

🚒 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codestackr
_____________________________________

πŸš€ 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) - https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: http://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 #ux #ui



Other Videos By codeSTACKr


2020-07-24There's more to CONSOLE than .log( ) | Things you didn't know console could do!!
2020-07-23Simple React.js User Login Authentication | Auth0
2020-07-16Top 10 VS Code Updates You Don't Know About!! (2020)
2020-07-14localStorage Dark/Light Mode Theme Toggle (CSS/JavaScript) | UI Design
2020-07-10Dark/Light Mode Theme Toggle (CSS/Basic JavaScript) | UI Design
2020-07-07Limited Offer! The Frontend Developer Career Path (@Scrimba)
2020-07-06User-Defined Dark/Light Mode (CSS ONLY) | UI Design Theme (prefers-color-scheme)
2020-07-03Simple Dark/Light Mode Theme Toggle (CSS ONLY) | UI Design
2020-06-265 Steps to THINK in React and Easily Create a ReactJS App From Scratch! (Bonus: Tailwind CSS)
2020-06-20How To Change CSS Values With A Slider! - CSS Custom Properties (Variables) & JavaScript
2020-06-13Microinteractions: Awesome Password Validation Animation
2020-06-05Developer Survey 2020 - Check Out These Shocking Results! (Stack Overflow)
2020-06-03Notion + YouTube - A Powerful Combination for Productivity
2020-05-29How to use Regular Expressions (RegEx) in JavaScript | Tutorial in UNDER 20 Minutes (2020)
2020-05-26Lift State Up in React.js with Hooks (2020)
2020-05-22Dealing with Impostor Syndrome (You Are Good Enough!)
2020-05-20Best Programming Tutorial Ever! {Funny}
2020-05-19React Forms Explained Easy (2020) - Reactjs
2020-05-16Ask Me Anything (AMA) - Casual Live Stream To Answer Community Questions
2020-05-15Deno 1.0 Released! (Easy) REST API Tutorial Using Oak
2020-05-12Deno: Node.js Killer? Introduction & Tutorial | From Creator Ryan Dahl | TypeScript/JS


Tags:
microinteraction
microinteractions
micro-interaction
micro-interactions
micro interaction
micro interactions
user experience
ux design
ui design
user interface design
ux animation
ui animation
interactions
ui interactions
ui microinteractions
ux interactions
ux microinteractions
user interface
gui
user experience design
micro interactions tutorial
animation
form input animation
css animation
password validation in javascript
password validation