How to make a Discord Input in HTML & CSS | Micro-Interaction & JavaScript Validation

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


Category:
Tutorial
Duration: 14:21
6,047 views
196

🦸 Become A VS Code SuperHero Today: https://vsCodeHero.com
πŸ§‘πŸΎπŸ€πŸ§‘πŸ½ Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

In this video, we are going to recreate a micro-interaction that you would see in a Discord input field using HTML and CSS. It will have input validation using JavaScript.

The code for this project comes from The Programming Expert. Check him out on Instagram and YouTube!
Instagram: https://www.instagram.com/theprogrammingexpert/
YouTube: https://www.youtube.com/channel/UCj9JQGXCX0gXPpd5w-IrLZg

Regular Expressions (RegEx) Crash Course in 20 Minutes:
https://youtu.be/uenZRW1kezQ
_____________________________________
🚒 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:18 - HTML
02:10 - CSS
08:30 - JavaScript
_____________________________________

πŸ’– 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: 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 #microinteraction #css



Other Videos By codeSTACKr


2021-01-22Awesome Micro-Interaction Input Character Limit Counter | HTML, CSS, JavaScript (2021)
2021-01-19[#2] Top Web Dev Videos You NEED to Watch! (STACKr News 2021, Issue #2)
2021-01-15Resume Tips | How To Pass Application Tracking Systems (ATS) & Get Interviews (Software Developers)
2021-01-12#1 Top Web Dev Videos You NEED to Watch! (STACKr News 2021, Issue #1)
2021-01-08Fancy Burger Menu Button - Animated CSS Effects (2021)
2021-01-05YouTube Rewind 2020 - Web Dev Edition!
2021-01-01"Glassmorphism" Frosted Glass Credit Card Form with Validation | HTML, CSS, JavaScript
2020-12-29STOP Declaring IDs!?! JavaScript Global Variables Best Practices
2020-12-22This is ALL you NEED to Become a Web Developer Today (2021)
2020-12-18Top VS Code Updates | Last 2020 Update | v1.52 Released!! | Tips & Tricks 2020
2020-12-15How to make a Discord Input in HTML & CSS | Micro-Interaction & JavaScript Validation
2020-12-09Deploy Next.js on Netlify in ONE click!! | Next.js Build Plugin on Netlify
2020-12-05Web Developer Roadmap 2021 | A Guide To Starting A Career In Web Development
2020-12-01Quick JavaScript Challenge from Scrimba - Advent Calendar
2020-11-27BLACK FRIDAY!! - Join Me For An Amazing Offer!!
2020-11-20Responsive Mega Menu and Multi Level Dropdown | Animations | HTML, CSS, & JavaScript Tutorial (2020)
2020-11-19Best Explanation of JavaScript Null vs Undefined! #shorts
2020-11-13Top VS Code Updates | v1.51 Released!! | Tips & Tricks 2020
2020-11-10Learn JavaScript Equality Fast! #shorts
2020-11-10UNBOXING 100K SUBSCRIBER SILVER PLAY BUTTON & Why You Should Start A YouTube Channel TODAY!!
2020-11-05Learn JavaScript Variables Fast! #shorts


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