clip path Awesome UI Interactions with the CSS Clip Path Property

One of the best ways to learn is to find fun designs on existing websites and to try and recreate them, so with that in mind, we're taking the animated card design from the Top Games section over at https://popdog.com and seeing if we can recreate it with only HTML and CSS!
/// Timestamps
00:00 - Introduction 01:17 - Overview 02:18 - HTML 13:57 - CSS basic setup 15:35 - styling the front 28:24 - front and background hover 38:15 - animating the game name 42:43 - the rank 46:33 - styling the back 60:14 - fixing the spacing 65:31 - fade-up and in for the back

Understaning how block, inline, and inline-block each behave is very important when learning CSS, as well as knowing why you might want to switch the display property of an element every now and then.

While all the combinators are useful from time to time, but the adjacent sibling selector is easily the one I use the most often. It has a several really good uses, a few of which I'll be diving into in this video!

In this video we look at how to make a fully responsive card with HTML and CSS, with a big helping hand from flexbox!

Today, we're going to check out some crazy CSS backgrounds you can create while harnessing the power of repeating linear (or radial) gradients. This affect gives you the ability to create very complex and interesting backgrounds for your projects.