It's now finally time to start our big Flexbox project, and this is, without a doubt, my favorite part of the entire course. Because I absolutely love Flexbox, and I'm sure that you're gonna love it too. It's really a revolution in CSS, which makes the lives of CSS developers 100 time easier. Believe me. So I'm really excited to teach you Flexbox in this section by building another beautiful project that I coded up just for this course.

So I'm gonna start by showing you the fundamental concepts and properties behind Flexbox. Then we're gonna go through a very brief Flexbox demo on CodePen before we actually start with a big project called Trillo. And actually you're not just gonna learn Flexbox in this section. No, I have even more content for you, like custom CSS properties, masks, and SVGs. So without further ado, let's get started.

SVG

Scalabe Vector Graphics

In icomoon.io website, go ‘Entypo+’ library, and choose the icon svg you wanted.

├── SVG/
└── sprite.svg

<svg>
	<use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
</svg>

xlink only work on a web server

fill: currentColor;

header

navigation