UI libraries are important! I think about them a lot and I hope this video helps you think about them too. Very very very overdue one.

TailwindCSS, MaterialUI, Chakra, Bootstrap, Radix, React-Aria, Master.co, and more 😅

ALL MY CONTENT IS FILMED LIVE ON TWITCH AT https://twitch.tv/theo
ALL MY BEST MEMES ARE ON TWITTER FIRST https://twitter.com/t3dotgg
ALL THE COOLEST PEOPLE ARE IN MY DISCORD https://t3.gg/discord
ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg

Everything else (instagram, tiktok, blog): https://t3.gg/links

THANK YOU ADAM FOR THE EDIT!

The Best Of CSS - Tailwind vs MUI vs Bootstrap vs Chakra vs...

Check out my courses to become a PRO! 🔥
https://developedbyed.com/

In todays episode we will learn how to create javascript layout animations with GSAP and their flip plugin. From my experience with React and framer motion...I really prefer the simplicity on how gsap achieves and let's you control these animations.
If you are interested in adding simple yet impressive javascript animations, you need to give this one a go.

🛴 Follow me on:
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/

#programming #javascript

Javascript Layout Animations REALLY SIMPLE TUTORIAL!

Check out my courses to become a PRO! 👇
https://developedbyed.com/

Today we are going to start a series where we will be reacting to all kinds of things related to web development. Starting off, we will take a look at the best codepends of 2021.

🛴 Follow me on:
Twitch: https://www.twitch.tv/developedbyed
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/

#programming #website

Web Developer Reacts To Best Codepens!

https://bit.ly/3DTmKed👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you how to create a really cool hover-based dropdown navigation, inspired by this page here: https://videinfra.com/expertise/ecommerce (hover over "eCommerce" at the top). 

Codepen demo/reference code:
https://codepen.io/designcourse/pen/zYaoyEX

0:00 - Intro
0:32 - HTML
2:01 - Basic CSS
8:17 - CSS Animations
12:45 - Final Result

Let's get started!

#frontend #css #uiux

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

SICK Dropdown Navigation with Micro-Interactions (PURE CSS)

BLACK FRIDAY SALE  40% OFF ALL COURSES 🔥🔥🔥
https://developedbyed.com/

USE COUPON: BF40

Today we will look on how to add pro 3d animations to your websites using blender and gsap for scroll animations. Apple did a popular effect similar to this using their airpods pro and everyone was really curious and impressed on how this was done.
This is a full length tutorial covering everything from scratch. Creating our 3D models in blender, animating them with the timeline and exporting a sequence of images ready to be animated with javascript and gsap.

📕Source code
https://github.com/developedbyed/3d-scroll-ball

🛴 Follow me on:
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/

#programming #3d

How To Create PRO 3D WEBSITES Tutorial From Scratch

Learn full-stack web development in this full course for beginners. First, you will learn the basics of HTML, CSS, and JavaScript. Then, you will learn how to put everything together to create a frontend movie search app. Finally, you will learn how to create a backend API to create movie reviews and connect the frontend to the backend. The backend uses Node.js, Express, and MongoDB.

🔗 Get started with Replit: https://join.replit.com/web-students

✏️ Tomi Tokko and Beau Carnes developed this course. 
Tomi's channel: https://www.youtube.com/CodeWithTomi
Beau's channel: https://www.youtube.com/zizyo

⭐️ Code ⭐️
JavaScript RPG Starter: https://replit.com/@BeauCarnes/JavaScript-RPG-Starter
JavaScript RPG Complete: https://replit.com/@BeauCarnes/JavaScript-RPG

Frontend Movie App (and starter for connecting to backend): https://replit.com/@TomiTokko/MoviesApp
Live demo of frontend app: https://moviesapp.tomitokko.repl.co/ 

Backend Reviews API: https://replit.com/@BeauCarnes/review-backend
Frontend connected to backend: https://replit.com/@BeauCarnes/htmlfrontend

🏗 Replit provided a grant to make this course possible.

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:02:42) Learn HTML
⌨️ (1:26:27) Learn CSS
⌨️ (3:15:49) Learn JavaScript
⌨️ (4:52:01) Create Frontend Movie App
⌨️ (5:44:04) Create Backend Reviews API
⌨️ (6:49:32) Connect Frontend with Backend

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB)

I cannot believe this is finally here. It has been a few years since container queries were talked about and introduced and now they are finally available in nearly every browser. This will completely change how we write CSS, but I think more importantly it will change how we handle writing components as well. I cannot wait to see what people do with this.


📚 Materials/References:

CSS Viewport Units Video: https://youtu.be/5m6JOJLy5B0
CSS Viewport Units Article: https://blog.webdevsimplified.com/2022-08/css-viewport-units
CSS :has Selector Video: https://youtu.be/K6CWjkDgQnE
CSS :has Selector Article: https://blog.webdevsimplified.com/2022-09/css-has-selector


🌎 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
00:41 - Basic Container Query Example
04:15 - Advanced Container Query Features
08:20 - Container Units
10:00 - Debugging
10:31 - Using The :has Selector


#CSS #WDS #ContainerQueries

Responsive CSS Will Never Be The Same

Doing vertical text overflow in CSS is incredibly difficult and many people think it is impossible, but that is not true. In this video I will show you 2 different ways to limit the number of lines of text in a box. I will also show you how to expand/collapse those lines of text using only CSS with no JavaScript.


📚 Materials/References:

Kevin’s Video: https://youtu.be/b6iVByCOx8A
:has Selector Video: https://youtu.be/K6CWjkDgQnE
:has Selector Article: https://blog.webdevsimplified.com/2022-09/css-has-selector
CSS Max Lines Article: https://blog.webdevsimplified.com/2020-01/dynamic-expandable-content


🌎 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
00:48 - Webkit Technique
03:35 - My Technique
07:44 - Expand/Collapse Buttons


#CSSExpandCollapse #WDS #CSS