Building a Responsive Grid Lander in Webflow

In this tutorial, we'll convert the Figma design we made last week of a 5 column grid, retro-styled site into a fully responsive Webflow site.
Join my Webflow Wizards Community
/ timothyricks
Learn more about the Wizardry Technique at wizardry-technique.webflow.io/
Check out the Figma file at www.figma.com/file/SJuZJvFBQK...
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@taywoo8216]

Tricks would definitely convert miles, feet and cms into EMs if he could

[@gambino59]

The speed at which you can develop these pages is absolutely insane! You know your tool in and out, incredible to watch!

[@mostwantedsol]

My thoughts exactly, all whilst narrating also. *mind blown*

[@brianlove28]

After playing around with the wizardry technique for the past few months, I finally decided it was time to use it on an actual client project. Man what a difference!!! The time saved not worrying about line breaks and widows/orphans on specific sizes. Can't thank you enough for sharing the method with the Webflow community. You've converted me to em user lol

[@wandavazquez3201]

well done. This will take me a while to reproduce, but definitely worth it.

[@HughMcQ]

Timothy's videos are utterly invaluable. But would definitely recommend watching at half speed to catch everything!

[@miqdamsajid875]

Maaaaan! It is hard to keep up with your speed...very valuable and inspiring at the same time...That speed-definitely my next milestone

[@timothyricks]

Thanks so much for this feedback!

[@jordanmackay9156]

I agree. This video seems more like a refresher for people that has used webflow alot because he didn't explain much.

[@dmytrokaraulov5623]

I done first client project recently and guess what I used as my units? EMs! Thanks for your technique. Literally saved my life.

[@mirt3327]

I get so excited when I see there’s a new episode! Thanks!

[@rehankhurshid]

Learnt a lot from you. I’ve been applying Wizardry in my recent project and getting things quickly and confidently. Thanks a lot!

[@akashchoudhary5736]

I love this series man !

[@Earthman634]

This is great) I admire your work) Not so long ago began to use webflow. But your work can not come off)

[@rashidnawaz5634]

Because of your videos, I have learned a lot and applying the wizardry technique in my projects. Thank you Timothy.

[@oussamajaafar5597]

Your videos helped us so much

[@everratic]

Your videos helped me get my first website client! Thanks so much.

[@musicalboy9122]

Thanks for making these amazing tutorials I also worked on mire than 5 clients project with ems and it’s beautiful 🔥

[@thewebart]

Thank you Timothy. As others mentioned - I will be watching this one a gazzillion times. I have some ideas to use this on some projects. Thanks again.

[@timothyricks]

Thanks Tomasz! Hope it’s helpful!

[@thewebart]

@@timothyricks was the nav lottie a freebie or did you buy it somewhere. I really like it.

[@timothyricks]

Thank you! I made it in After Effects.

[@mostwantedsol]

@@timothyricks Giga-Chad TRicks 💪🔥

[@darth_marceli]

Wow. Respect dude. Learnt a lot.

[@meharjawadhashmi6723]

Amazing! its very quick

[@igoraugusto1533]

So cool.

[@hieunguyendinh9605]

Learnt a lot from you. Thanks a lot!

[@timothyricks]

So glad this is helpful!

[@MyDistortedWorld]

TRicks is the master!

[@Ibralassaf]

Nice video, You got a new subscriber 😉❤️

[@Bubble798-s3v]

Hey Tim! I will def be watching this one a few times lol

[@timothyricks]

Awesome!! I hope it’s helpful!

[@ivanbadia3232]

I'm a EM user for sure...need to create one more project to feel comfortable with EM measurements. I'm definitely a fan from now on.

[@timothyricks]

So glad to hear that! 🎉

already bookmarked

[@gowonbuttercrown2813]

Hi thank you so much for doing this tutorial, I'm very new to webflow so this was really helpful for me to set up my webflow portfolio but I ran into a problem after following the steps of the desktop page that it wasn't 100vh so i can still scroll the landing page vertically a bit. What can I do to make the page unscrollable one page lander?

[@grephenson]

When do you decide to "offset" something with transforms over margins? Also, around 7:10 you used margins AND paddings to position hero_top-right?

[@andyred782]

Great value as always. Quick question I used your anime.js code on a project but on scroll into view the heading I’m animating appears, blinks then animates as required. Any idea why this may bee happening. Keep up the great work dude👍

[@jnguyen1101]

This is so great! I was wondering though... when you made that button, why did you use 'transform' over 'margin' for the bottom outline box?

[@BaleaCalin]

Great stuff. Really insightful. I was just wondering: wouldn't have this been simpler to implement with a CSS Grid? It seems like it'd remove some of the headaches of defining percentage value for each element and reflowing them on mobile.

[@normthomas5028]

Hi Mr. Tricks, any particular reason why you use a P1 in the button vs. text block or like an H5?

[@danyxts201]

Could you make a video tutorial showing how to build a site with multiple pages?

[@stackingflow]

Great content but I don’t know when to use px and when to use em, vh etc. can anyone please solve my query?

[@DanGuerra_br]

Great video as always, Tim! Question: You're using 1404px screen on Webflow, but on Wizardry you're using 1920px...? (Sorry, I'm at 8m48s only hahaha)

[@timothyricks]

Thank you! The 1920px size on the wizardry site is based on the total width of the Figma design. The 1404px screen size in WebFlow changes based on which panels I have open in WebFlow but as long as I use scaleable units, the aspect ratio of the elements stays the same

[@DanGuerra_br]

@@timothyricks Oh, ok, that makes sense haha. Thanks!

[@diegolozano8539]

Grat video! can we have the assets? to make the same page to practice

[@timothyricks]

Thank you! I think most of them can be exported from the Figma file in the video description.

[@diegolozano8539]

@@timothyricks Yes! i didnt know, thanks for replying, love your tutorials man!

[@juannoguera5918]

Why not use the Grid element?

[@thegalhorowitz]

I really wonder how much you charge clients and the process 😄 Do you give paid lessons ? I have clients but its hard to estimate things with a set price. I need a better system. I love your videos!!!

[@fzmhd3324]

Hello sir can ou make a video for page loading animation t 0 - 100 animation please sir🙂