⌨️ How to check if Hovering is supported

If you are adding hover styles to elements in your web page, here is a feature you can use to filter out devices that are actually hover capable!

✨ For example: mobile devices with a touch screen don't support hover.

🔅 Level Up: CSS Layout

🌐 Author: Morten Rand-Hendriksen
🔰 Level: Intermediate

⏰ Duration: 1h 26m

🌀 Find out how well you know CSS Layout techniques, and maybe learn more along the way!

📗 Topics: CSS Grid Layout, Cascading Style Sheets

📤 Join Webdev Training for more courses

📱Webdev Training
📱Level Up: CSS Layout

⌨️ Flexbox auto-margin

For aligning items of a flexbox along the cross axis, we have the align-self property. Have you wondered why we don't have an equivalent justify-self for flexbox? 🤔

It is because justifying an individual item doesn't make that much sense. What happened to the neighboring elements, let's say, if you apply justify-self: end to an element?

👉 Instead CSS allows you to define the value 'auto' for margin to create this desired effect.

When you define margin: auto, it means, create a margin that is as large as the available free space.

This helps us to kind of push the element away from all the other elements in the flexbox!

⌨️ Anatomy of CSS
You might be using CSS for a long time, but did you know what each part of it is called? Here is a breakdown! ✨

🔅 Emmet: Fast and Efficient Web Coding

🌐 Author: Emily Kay
🔰 Level: Advanced

⏰ Duration: 2h 42m

🌀 Learn how to use the handy shortcuts that Emmet offers to code faster and more efficiently.

📗 Topics: Cascading Style Sheets, HTML

📤 Join Webdev Training for more courses