uuOXPWCh-6o fireship-css-grid-in-100-seconds Fireship | CSS Grid in 100 Seconds Learn the basics of CSS Grid in 100 seconds. Grid is a powerful tool that can build layouts in the context of columns and rows. It's not easy to learn, but can dramatically simplify CSS positioning code for responsive designs. vmDEHAzj2XE kevin-powell-transition-to-and-from-display-none Kevin Powell | Transition to and from display: none We can now Transition to and from display: none Ns12ALe8aqI kevin-powell-how-to-take-control-of-flexbox Kevin Powell | How to Take Control of Flexbox If you really want to take control of Flexbox, check out my course Flexbox Simplified. LGRogkgRrOs keeping-up-with-css-the-features-released-in-2023 Keeping up with CSS | The features released in 2023 People ask me how I keep up with CSS and all the new features coming out... instead of worrying about how I do it though, I figured I'd do a recap of all the new stuff so you don't have to go hunting for it! coidqLlYgoo new-in-chrome-117-css-for-smooth-entry-exit-animations New in Chrome 117 | CSS for Smooth Entry & Exit Animations Chrome 117 is rolling out now! With three new CSS features that make it easy to add smooth entry and exit animations, array grouping to compute higher order datasets, devtools makes local overrides easier and there’s plenty more. B4Y9Ed4lLAI css-anchor-is-the-best-new-css-feature-since-flexbox CSS Anchor is The Best New CSS Feature Since Flexbox I cannot believe this is a feature coming to HTML/CSS. JugpQeXCDKY hyperplexed-i-fired-a-css-cannon-at-a-famous-streamer Hyperplexed | I Fired a CSS Cannon at a Famous Streamer Watch as I show you how I fired a metaphorical CSS Cannon at Ludwig. By this I mean that I recreated an effect from his video using CSS. 5a8NyGLlorI hyperplexed-i-gave-a-website-logo-superpowers Hyperplexed | I Gave a Website Logo Superpowers Watch as I show you how I gave the logo on https://careerpuck.com "superpowers". YnWPeA6l5UE kevin-powell-getting-started-with-css-nesting Kevin Powell | Getting Started with CSS Nesting Nesting has landed in native CSS, and with Firefox gaining support for it, it is now supported in all the major browsers! -pDPASqX97w how-to-create-this-unbelievable-css-scroll-animation How To Create This Unbelievable CSS Scroll Animation I was recently challenged on Twitter to recreate this amazing scroll based animation, and it was so fun. DeHRDNRQhNg this-website-theme-hasnt-been-perfected-since-1996 This Website Theme Hasn't Been Perfected Since 1996 Watch as I show you how to recreate a masterfully executed magic wand effect from https://diagram.com. CLkxRnRQtDE keynote-tailwind-connect-2023 Keynote | Tailwind Connect 2023 The keynote from Tailwind Connect 2023, our first-ever live event that took place on June 20th, 2023, featuring presentations from Adam Wathan, Sam Selikoff, and Steve Schoger. z9FeTl5eq9E this-is-why-you-cant-learn-web-dev This Is Why You Can’t Learn Web Dev Learning web development is hard and it has only been getting harder and harder each year. hJ7Rg1821Q0 web-dev-simplified-how-to-load-images-like-a-pro Web Dev Simplified | How To Load Images Like A Pro Images are the largest asset for most sites and the biggest cause for unresponsive, laggy sites. q1fsBWLpYW4 21-awesome-web-features-youre-not-using-yet 21 Awesome Web Features You’re Not Using Yet A breakdown of the most useful new features for web developers using HTML, CSS, and JavaScript. Learn about native dialog windows, WebGPU, CSS container queries, and more. srzsj3xtHMM lukas-top-10-css-features-you-should-know-and-use-in-2023 Lukas | Top 10 CSS Features You Should Know and Use in 2023 This video is about the Top 10 CSS Features you should know and use in 2023. I'm pretty sure that you don't know all of them - but you definitely should. They will help you to write better code. ywtkJkxJsdg the-new-dialog-html-element-changes-modals-forever The New Dialog HTML Element Changes Modals Forever Modals have been a part of web development for decades now, but they have always been a bit of a pain to work with. 0fVymQ7SZw0 getting-started-with-variable-fonts-on-the-web Getting started with Variable Fonts on the Web Variable fonts are really awesome and open up some new doors for typography, so in this video I take a look at what they are, how they work, and how to use them on your websites. p3_xN2Zp1TY useful-responsive-layouts-no-media-queries-required Useful & Responsive Layouts| No Media Queries required Here’s 5 quick responsive layouts that you can use, without any media queries! There’s nothing wrong with media queries, and we still need them sometimes, but these can be really handy in the right situation! veEqYQlfNx8 kevin-powell-the-problems-with-viewport-units Kevin Powell | The Problems with Viewport Units Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons. hWGgw1K-i8Y spice-up-your-site-easy-waves-angles-and-creative-shapes Spice up your Site | Easy Waves, Angles and Creative Shapes The web is made of boxes, and boxes are bland, boring, and all look the same. lHZwlzOUOZ4 fireship-tailwind-css-is-the-worst Fireship | Tailwind CSS is the Worst… People have been debating the merits of Tailwind on twitter recently, so let's look at the pros and cons of this popular CSS library. owpaafxvkjU hyperplexed-hover-if-you-dare Hyperplexed | Hover, If You Dare... Watch as I show you how to recreate the fancy hover effect from https://www.nathansmith.design dldpud1PuL8 create-a-cool-color-fill-animation-with-css Create a Cool Color-Fill Animation with CSS Recently someone asked me about the animations on https://arena.net and it turned out they were using mask-image to pull off this cool effect. The animation is easy enough to create, though creating the mask itself is a bit time-consuming! Yo3j_Dx4u7c this-cool-javascript-effect-will-make-your-website-3d This Cool JavaScript Effect Will Make Your Website 3D Learn how to create an amazing 3d parallax effect from scratch. u0HTvSXNJmE can-chatgpt-write-decent-css Can ChatGPT write decent CSS? ChatGPT is all the rage these days, and people are even using it to write code for them, so I thought it'd be fun to see if it could write the CSS of a hero section of a website for me. PkADl0HubMY award-winning-animation-with-only-20-lines-of-css Award Winning Animation With Only 20 Lines Of CSS? Watch as I show you how to recreate the sliding image track effect from https://camillemormal.com. rrLAg7xNERA responsive-css-will-never-be-the-same Responsive CSS Will Never Be The Same 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. Xc6G3oV24yE top-10-css-one-liners-that-will-blow-your-mind Top 10 CSS One Liners That Will Blow Your Mind In today's episode, I will show you some of my favourite CSS properties out there. These cool css tips and tricks will help you upgrade your website to the next level. This list contains some CSS tricks and properties that you may not know of. CQuTF-bkOgc the-best-of-css-tailwind-vs-mui-vs-bootstrap-vs-chakra-vs The Best of CSS | Tailwind vs MUI vs Bootstrap vs Chakra vs... UI libraries are important! I think about them a lot and I hope this video helps you think about them too. TailwindCSS, MaterialUI, Chakra, Bootstrap, Radix, React-Aria, Master.co, and more... OGJvhpoE8b4 i-never-thought-this-would-be-possible-with-css I never thought this would be possible with CSS The :has() pseudo-class is here, and while it’s often called the parent selector, it can actually do a lot more than that!