Discord Made The Coolest CSS Only Input Animation // TRAIN BRAIN

Discord Made The Coolest CSS Only Input Animation

CSS Simplified Course: https://courses.webdevsimplified.com/css-simplified/?utm_source=youtube&utm_medium=video-description&utm_term=video-id--dlnFPkyh9Y&utm_campaign=css-course-launch-12-2024&coupon=CSS
The search input in Discord seems simple at first, but as I was working on duplicating it I realized it was much more complex than it first appeared. In this video I will go over exactly how to create the Discord search input and all of its animations using only CSS.
? Materials/References:
CSS Simplified Course: https://courses.webdevsimplified.com/css-simplified/?utm_source=youtube&utm_medium=video-description&utm_term=video-id--dlnFPkyh9Y&utm_campaign=css-course-launch-12-2024&coupon=CSS
GitHub Code: https://github.com/WebDevSimplified/discord-search-input-css
? Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:07 - Starting Code
02:06 - Growing Width Animation
07:34 - Search/Close Icon Animation
#DiscordClone #WDS #CSS

Web Dev Simplified

Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner. If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular tech...

If You Only Know One Programming Language Watch This

How To Handle CSS Colors Like A Senior Dev

Discord Made The Coolest CSS Only Input Animation

Discord Made The Coolest CSS Only Input Animation

This Is The 10x Developer Skill

The CSS Display Property is Changing Forever

How To Master CSS in 1 Month!

How To Easily Avoid Burnout As A Programmer

I Can’t Believe They Added AI To The Browser

Can You Solve These 3 CSS Battles Faster Than Me?

Create Forms 500% Faster With This Shadcn Tool

How To Handle Permissions Like A Senior Dev

How To Use Libraries Like A Senior Dev

The Only Accessibility Video You Will Ever Need

How To Build Feature Flags Like A Senior Dev In 20 Minutes

Next.js 15 Breakdown (Everything You Need To Know)

How To Build A $1,000,000 SaaS In 7 Hours

This Folder Structure Makes Me 100% More Productive

I'm Ditching Try/Catch for Good!

Why You Should Replace Your Booleans With Timestamps

Do You Need To Learn A Second Programming Language?

This One Tool Helps Me Build Projects 100% Faster

Build a Full Stack Next.js App with Google Calendar - TypeScript, Drizzle, ShadCN, Tailwind

Will Deno 2.0 Replace Node.js?

@property Is One Of The Coolest New CSS Features

Must Have Tailwind Plugin For Responsive Design

Learn useActionState In 8 Minutes - React Hooks Simplified

Node.js Doesn’t Suck Anymore

This Tailwind Plugin Makes Your Text Look Beautiful

Every Developer Needs To Know How To Do This

Must Have VSCode Extension For TypeScript Devs

How to Build and Deploy a Portfolio with Next.js that Will Land You Jobs

Am I Good Enough To Solve These CSS Battles?

How To Setup Fingerprint Auth In JavaScript

Learn Next.js Intercepting Routes In 11 Minutes

How To Write Better Tests In 6 Easy Steps

Master CSS Overflow/Text Wrapping Like A Senior Developer

Stop Using Code Coverage

Learn Event Delegation In 10 Minutes

We Can Finally Animate height: auto; In CSS

Learn React Generic Components In 6 Minutes

You Should Know These 7 CSS Responsive Sizing Features

100% Test Coverage is Bad

What You Can Learn From CrowdStrike Breaking The Internet

How To Debug React Apps Like A Senior Developer

If You Use Tailwind You Need This Plugin

We Can Finally Animate height: auto; in CSS!

100% Code Coverage Is Useless

I Can’t Believe TypeScript Finally Fixed This

Learn Closures In 13 Minutes

If You Feel Burnt Out Do This

How To Debug In VSCode In 1 Minute

4 NEW TypeScript 5.5 Features!

Only The Best Developers Understand How This Works

Next.js 15 Ruins Caching Even More

If You Cannot Name All 5 JS Scopes You Need To Watch This Video

The Most Important Skill You Never Learned

This New React Feature Will Make Your App 20% Faster

Why Every Computer Fails Basic Math

I Recreated Shadcn’s Docs In 30 Minutes With This Amazing Tool

How This Test Saved Kent’s Site

I Love This CSS Focus Hack

How To Make Beautiful Charts In Next.js

This Ancient CSS Feature Is Incredibly Useful

How To Build A Next.js Coupon System Like A Senior Developer

Learn Drizzle In 60 Minutes

Stop Trying Out New Programming Tools

Will Devin AI Take Your Job?

Is Drizzle Really Better Than Prisma?

State Managers Are Making Your Code Worse In React

NEW React 19 Changes Are Amazing!

10 Tailwind Classes I Wish I Knew Earlier

This New Next.js Feature Makes Caching Much Easier

8 NEW JavaScript 2024 Features

The Web Developer Job Market Is Broken

NEW Next.js 14 Course Announcement!

Do You Know All 63 HTTP Status Codes?

How To Actually Get Hired In 2024

FREE 2024 Web Dev Roadmap

React Server Components Change Everything