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



🦸 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:

_____________________________________
🤖 Get FREE AI-powered code completions from Kite: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
📚 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

source