Learn how to develop creative website layouts in minutes with grid and flexbox

We’ll learn more about:

- How CSS Grid and Flexbox can work together
- Using blend modes to create knockout text on top of a background video element
- Using Webflow interactions to make a googly eye follow your mouse cursor

----------

Chapters

0:00 Starting soon
1:10 Stream intro & layout overview
3:55 Today's Agenda
5:03 Breaking down the layout
9:17 Building the layout (with Grid and Flexbox)
11:52 Building the layout (with Quick Stack)
21:11 Using Blend mode to add background video in text
27:00 Creating the eye that follows the mouse
36:05 Could you use background clip instead of blend?
37:16 Quick Stack vs Grid?
38:52 Credits
40:05 Getting started with Devlink: next week's stream
41:21 See you next week!

----------

[dbertovi]

A flexbox is definitely one of the best and most useful tools I know. Nothing better is needed for serious web layouts through various devices. One device sort it horizontally, on the other vertically. Magnificent. So simple, but so so so useful! Real money-saver!

[meherech]

Hi there. Thanks a lot for this great tutorial however, it took about 3 hours for me to do the "Using Blend mode to add background video in text" part. The reason was I didn't set any height for my quick stack and rows, which made the outcome completely different from what the tutorial explained.

[Ugado_Meir]

Please how would I get the videos used 19:14

[SuhailAmar]

Hey #webflow. The link to the cloneable is broken. It shows a page not found error. Looking forward to trying this out.