📦 Exercise Files

This is something that got supported by all browsers very recently!

Usually, you would use the align-content property with a flex or a grid container.

🥱 So to make some content vertically centered, you had to make the parent a flex or grid first

🤩 But no longer, the align-content attribute now works with block display items too (which is the default display type) enabling us to center items vertically in a single line!

Have you ever struggled to set 100% width on an item while also setting some margin for it I'm CSS? Once you know this trick you no longer have to!

👉 The "width" we set on CSS element is applied till the border of the element (content, padding and border)

But what if we want the element to have some margin as well but still fit inside the patent?

You may try to use some 🧠 math like calc(100% - 40px), but with the "stretch" keyword for the width property, CSS automatically does this for you.

🔥 This helps to easily fit an element inside it's parent even when it has some margin!

🔅 Crazy Text Animation with CSS and SVG

In this video with the topic Crazy Text Animation with CSS and SVG, I will share with everyone an extremely interesting idea to create text animation without using javascript. By combining vector SVG and CSS, we will create an extremely impressive text animation.

🔅 10 CSS PRO Tips and Tricks you NEED to know

Did you know that DevTools can help you to find out if any CSS property you have added doesn't have any effect?

It provides some useful hints too stating the reason and how to fix it!

🔅 This CSS Property Replaces Hundreds of Lines of Code

00:00 - Introduction
00:35 - Starting Code
01:04 - field-sizing Property Basics
04:19 - Caveats
05:05 - Browser Support