Intro to WebFlow for Beginners (Complete guide to building a fully responsive lander)

what's up guys in this tutorial we're going to cover how to go from design to development in web flow so we'll be designing in or we'll be developing this page for a church in webflow and let's uh just jump right in so the first thing we need to do is really just look at the design and as we're looking at this design uh my first step that i like to do is dry out some rulers and just kind of see where everything lines up so if i add one right here and maybe right here i can see that this box is line aligning with the items in the footer with the ends of the content start and ends of content it's aligning with uh pretty much everything except the nav the knob's the only thing that's breaking outside of this sort of section um and then let's go ahead and drop one in right here and see so these two are aligning with each other and that's about 50 percent of the screen so right in the middle we have sort of a split and let's do two more let's look at these items so it looks like these items are aligning with each other as well in a three column sort of grid so once we know that we kind of get a better idea for how what kind of grid we're going to need and how we're going to need to set things up the next step is really just to export all of the assets that we'll need so i'm looking for any pictures uh like these should be jpeg files just because they load a little quicker but anything like this that's a vector it's best to use svgs because it scales on really large screens it's still super clear and it loads so much faster so i'm in xd right now but any design program you use if you export the whatever file export it as an svg and that's just going to be a vector a clean file we'll call that one logo and we'll look for any other files all these uh will just be things we can create these images um this would just be an embed like a video embed from youtube or something so and maybe we do we'll just need a few social icons um so these are pretty clean pretty minimal so we'll call this one facebook and i'm just exporting uh each one of these youtube all right so that's all of the icons that we have and i believe we're ready to jump right in so we'll jump over into webflow so when i'm creating all my projects uh i like to think of responsiveness and what i mean by that is a lot of sites nowadays um when you open one up they'll look something like this they'll look pretty pretty good they'll have a font size and if you look at that font size it'll be set to something like 60 pixels or a pixel value and it looks fine um but once you start to look at larger screens like say we look at a 2000 pixel screen uh the font sizers are a lot smaller and the font size didn't actually change it's just the screen is so large and the content didn't actually get any bigger and then if we step it up to even larger screens it can look super super tiny and things just start to get lost so this is the most common way of development is just to use pixels for most things but there is a better way to do it and i'll talk about that in just a minute so kind of a better way to start developing things is to use viewport with and what that means is that's just a percentage of your screen size so as your screen sort of shrinks and grows to different sizes um what you'll notice is that the text and the buttons and the images and everything inside of it sort of scales uh proportionately so everything is growing with the uh with the width of your screen and that's really the way we want uh things to grow in a in an ideal world so if i switch this one over to 2000 pixels for instance you'll see that text size didn't actually change or we can even go up to 5000 it looks exactly the same on a smaller screen as it does on a much larger screen which is really good that's what we want so i'll show you how to do that and to make this a little bit easier i created a project that you can definitely clone i'll include the link in the description of this youtube video but this project basically removes all the unnecessary styles that webflow has when you get started um from everything from like paddings and margins on the tops of font sizes and it sets your project up to be really scalable and work really well so we're just going to start this project off by cloning and we'll create a new project from this clone and i'll just call it youtube tutorial and we'll create the project so this is basically where we're starting off and we start off with a couple neat things we have a symbol here for just some global styles which we'll worry about that later and then we have all of our all of our font sizes all of our headings from h1 all the way down to h6 and our paragraph font sizes as well rich text it's all it's all in here so that's really nice and basically what i'm going to do is start inputting some things into webflow that we're going to need like we know for sure we're going to need a specific font this font is called dm stands it's a free google font and so i'll just go over to if i go to project settings up at the top in webflow and then we go to the fonts tab over here we can select from a list of google fonts that are available and i'll start with this dm sans and then we can select the weights that we want to add and i'll just add the regular medium and bold for now and then that's how we add a font to our project so we can start using it um so now i'm just going to jump right back into the designer view if i click the designer and we're right back into the designer view so for now this uh this styles panel that has all my font sizes and everything i'm just going to hide that to get it out of the way so i'll set it from display block over here to display none and that just kind of removes it from the document flow for now so i'll select the body and click on the plus sign right here and click on the body all pages tag so otherwise you would just be affecting this one page but if you click on body all pages it's going to style every single page on the website for you which is what we want so from here i can change the font and that means any text that i drop into this body is going to be using this particular font here which is what we want so i'm going to switch it to dm sans i will start with normal we'll uh let's see we want the background color of the body to be this really dark almost black color that we see kind of here in the background so i'm just going to grab that color real quick and i'll add that to the background here and then it's important that you save these kind of like swatches so if you hit this plus sign and i'll name it black and hit create that way it's saved in webflow i can use it later in other places and also if i hit edit and change it here it's going to change every instance of this across the whole site that's using that color so it's really important to create these as swatches so from there i'll also set the font color under typography to be more like white and i'll create that swatch and call it white and so now i have two colors in here and one set to be my font color and one set to be my background color the next thing that i like to do is just go ahead and add in all your colors so we'll go to this dark gray for instance and we'll add that one in and we'll call it dark gray uh we'll add this regular gray in as well this font color which is more of a light gray and last this blue color as well all right so we have all our colors in we have our fonts and and that's really the biggest step to get started i'll change my background color here back to this black color um so that is everything we need to really get started on this um i'm going to first of all just kind of jump back into the design and let's see basically every uh element on the page is made up of sections so we can say this top section here is our first section and then this section here contains a couple images this uh third section contains text and a video the next section contains some columns of text another image in text and then so you get the point there are all various sections um and all of these sections really have the same padding on the inside of them so the same amount of space between elements for the most part so what i'm going to do is set up a class i'm going to drop in a div under this plus sign and drop in a div block and we basically want to use divs for pretty much everything um and we'll drop in a div and we'll call it section is the name of it so from here we will need to give it some sort of property some sort of padding because if i were to drag in a title let me just drag in a title into this section right there you'll see that the title is all the way up against the end of the page and we don't want that we want some sort of padding inside this section so i'm going to click on this section and i'm going to type 10 vw and hit enter for the padding right here and then also for the padding on the other side 10vw and hit enter and what vw is is it stands for viewport width so it's going to scale it's going to decrease and increase as the height of your browser has the width of your browser increases and decreases whereas if i were to have just typed in 80 pixels here for instance you'll see that uh the text this 80 pixels never changes even on a really small screen it's still 80 pixels regardless whereas this 10 viewport width is really just 10 percent of the width of the screen so as the screen size gets smaller this viewport width is also getting smaller so by using this viewport with you're automatically making your your sort of font sizes and your paddings and everything very responsive already and with this project we cloned the viewport width is set for the font size so all fonts in here are viewport with space so they're scaling with the height i mean with the width of the browser as the browser gets wider the font sizes are also getting taller so it's growing seamlessly which is exactly what we want now what i like to do for the top and bottom padding of the sections because you obviously want some space on top and bottom is i like to use something called ems instead so i'll start these off at 3 em top padding and 3 em bottom padding and the reason why i like to do that is em is a percentage as well em is a percentage of the body font size so we'll see the body font size right now all text in the body is set to one viewport width so right now by setting this section top padding to em it's a it's a viewport width of it's a percentage is 3 of or 30 sorry it's three times of one viewport width um which so it's three viewport width essentially right now but we don't want the font size to stay viewport width as it gets smaller and smaller it see it starts to get too small it starts to get hard to read so on tablet right here this is usually where i switch the body to a pixel font size instead so i'll hit this plus sign up here and then this is the font size of your paragraph text so what's the smallest you would ever want your font size to be in good practices never go any smaller than 16 pixels for body copy because any smaller than that it kind of gets hard to read so um 16 pixels is a good place to start so on this tablet break point with the body all pages tag selected i'll type in 16 pixels for the font size and you'll see now it's a pixel base so this font size isn't actually getting any smaller whatsoever as my browser size gets smaller on here it's growing it's scaling proportionately with the size of the window um so larger sizes it's pretty large and it gets smaller and smaller and then here it switches to pixels so now because this is eem this essentially is pixels top and bottom and then the viewports on the sides are percentages of the screen width so as this gets smaller this space the spaces on the sides are getting less and less but the space on the top and bottom isn't shrinking at all um it's just essentially a pixel base because it's a percentage of the body font size so all that to say basically make your paddings on the side and viewport width make your margin your paddings on the top and bottom em and then your font sizes will be viewport width here and they'll switch to pixels on tablet view and that's really a great place to start with making everything responsive so we have this section my next step is really just to kind of start scaling setting all my font sizes so if i open up back this c style set it to display block for a second we'll see i have my heading in here um [Music] i have all these different heading sizes and i can set these so if i come back and look at the design some this one here is probably going to be my h1 because it's the largest heading on the page and is also what i want google to read as the most important so i'm just going to paste in some of this h1 text right in here and then this is my paragraph font size so paragraph size right now um is 22 pixels in this design so i want my paragraph font size to be about 22 pixels uh and then 38 pixels line height so paragraph font size is being directly inherited if we click on this from the body all pages tag so if i go to my layers i click on the body i go to the all pages tag and then kind of i can increase this font size so maybe instead of one viewport width it's 1.2 viewport width or 1.4 viewport width and i'm just going to publish this project real quick and i'll um kind of open it in a new tab so i can see what it's looking like so right now i'm just trying to figure out how many pixels this is and i use this extension it's a google chrome extension called what font and it'll tell you what font the site's using but if you click on it it will also tell you the font size as well i can see this is about 19 pixels so it's a little it's a little bit smaller than what i want it to be compared to this which is 22 and that's 19 so i may make it a little bit larger i'm not too worried about this being exactly like the design in this case but definitely feel free um to fine tune it if you'd like so i'm just going to increase the font size a little bit um and yeah that that's looking pretty good um so i'm just going to hide the c styles again and now i have my heading inside my section i'm just going to copy this heading and paste it directly in here and then also kind of just start comparing eye to eye what do i see font size wise i'll preview and say this heading probably needs to be a bit larger compared to that one um so i might increase the font size some and for all the headings i'm using ems so that's just a percentage of the body so and i'll even reduce the letter spacing some to make not quite that much but basically to make all the letters a little bit tighter together somewhere in there looks looks alright and then i'll reduce the line height to get these lines of text a little bit closer increase the spacing the the size sum and that looks pretty good for my heading size right there uh next up is i need some buttons so i'll just drag in this button here and i'll just give this a class of button and from here i want to set the background color to be this blue and i want to set the font weight to be bold um and then the padding's inside the buttons i want to set those to em as well so basically nothing in the designer view should be pixel based it should all be em and that's gonna make things scale a lot smoother so and then also the border radius these had some rounded corners slightly um so i want to make sure that that's em as well uh and i'll start off with i don't know point six em uh maybe back it down no that's probably all right um 0.6 am and then i can just click in to change the button text and then i can right click on that and click duplicate to make the second one and that one just says watch so this one's uh this one's a little different it's a white one instead so i'm going to just add a new tag behind here that says white and now i can change the color of it without it changing the first one and i can also change the font color as well to be dark so now anything i change to this first one is going to change to the second one as well but anyone i change on the second one will not change to the first one because it has this new tag added to it here this sort of combo class is what it's called um so that is looking alright so the next thing i won't need to do really is i want to make a background video in this hero section so i'm going to go to the background video section which is right here and just drag it in right above this uh sort of section that i created and believe it or not i'm going to give this a class of section as well basically every section on this page i want it to have this section class so that way it's using the exact same space on the sides of every section and if i ever need to change it it'll change for all of them so this one has the section class which means it has all the same padding that i want i can just drop this uh these elements into it and then the only thing i'm going to do different to this background video section is i'm going to add a class that's called hero and basically this hero class will allow me to change things about the section this combo class but not apply those changes to the section below which is what we want so the first thing i want this to do is really span a hundred percent the height of the screen so that way it starts at the top of your screen and it goes to the bottom so i could just set this to a hundred vh for the height and that basically means that it's a hundred percent the height of your screen the problem is when the height of your screen gets smaller than the um then the text inside it that text is going to start to get cut off because you said set this div to 100 percent the height of the screen and this is a hundred percent of your height right now so all this content is being cut because it's a hundred percent the height of the screen um but what you can do instead is remove that so if we click on height and click reset we want to set the minimum height to 100 vh and what that means is it's a hundred percent the height of the screen it stops you see right there at the bottom of the screen if your screen gets smaller than the content inside it the content inside it's just going to push this section down some um but it's not going to it's not going to get any smaller than your content but it's going to be at least 100 the height of your screen which is good that's exactly what we want so the next thing we want to do is really just center this text from top to bottom inside this hero the background so i'm going to basically add a flex box here and flexbox allows you to align things so right now we're aligning things horizontally that means that every element inside this section is going to be aligned side by side but instead we want to align things vertically that means that each item is going to stack one on top the other so i'll switch this from horizontal to vertical and now you see it's all stacking one on top the other so we definitely want it to be aligned to the left so for alignment we'll hit start but we want it to be justified towards the center so we'll hit this next option and that just puts it right there in the middle of the screen now we don't want these two to be underneath each other so we're going to need to drag in another div and we'll call this one a button container and basically we want to make sure that both of our buttons are inside this container that way they're allowed to stack side by side again which is exactly what we want so that's looking good i'm just going to go ahead and set this video this background video so i'm going to go over to the settings click upload video and then i'll navigate over here and just kind of upload this hero video right into the page so while that's uploading we can move on to our next section and our next section is just basically going to be this uh three image section here so i can use this one that we already have set up and i'm going to create a container uh to hold all these three images so i will drag in a div and i will call this div we'll call it three column container and the reason why i'm naming it something so vague instead of three photo container or something like that is because i plan to reuse this container here with the text as well so this three column container is gonna be applied anytime i have an instance of three items side by side so we have the read column container set up we have our background video let's go ahead and add are three column items so i'm going to drag another div inside and then this div is going to be called a three column item and this is going to be one of the three items inside this three column container so we can set the width of this div i'll set it to something around 30 percent uh per se doesn't have to be exactly and then i need to basically drag some images in so i'll upload all my images that we created for the site and just kind of let those import and i'll grab the first image which is this image right here i want to drag it if i'm going to go over to the navigator here i want to drag it into this three column item and then i'll give it a class we need to give it a class of three column uh let's say photo so we have a class of three column photo we want to basically give it a size so right now it's uh let's say it's 30 viewport width and a height of 30 viewport width and that's just gonna maybe a little less maybe 20 and 20. and that's just going to make it a perfect square um so i'm going to actually remove the let's see i'm going to remove the size on this three column item for now this width and just let the image define the size so we got one item there uh we're going to duplicate this and then duplicate it one more time so that we have three items and so we have three column items and then we have a photo inside each one of those items we're going to grab the three column container go over to flexbox and apply a box and this stacks them just like that um side by side horizontally which is good but we want to for justify instead of aligning it to the left or to the right we want to justify and space between and it's the second from last option and what that's going to do is it's just going to space them all out evenly which is perfect it's just what we want so then i can grab each one of these items and just kind of increase the width some until i get it set to my liking it has a good bit of space so 25 seems pretty okay 25 viewport width and i'll set the height to be the same you'll notice it's stretching the images because we define a width and a height so set the fit right here to uh cover and what that's going to do is it's going to crop the image on the sides or the top or bottom to make it fit inside that box without stretching it which is exactly what we need so i'll go over to this next image right here it needs to be these so i'll just click the setting gear and click replace and i'll grab this one and then click the setting gear replace again and this time i'll grab that one and then also i want these to have rounded uh corners so under radius i'll do 0.6 em again and just make sure we're doing the em and that looks pretty good that's that section right there this background video we're gonna want to add some gradients because we want it to fade to black at the bottom we want it to fade to black off to the side so for i'll have the background section selected right here and i'm going to basically under backgrounds add a gradient and for this gradient i want the start color right here to be our black at zero percent opacity then i want the stop color to be our black at a hundred percent opacity and i'm going to rotate this to zero degrees so the black is at the bottom um i may maybe this doesn't have to span the whole height like maybe this uh transparent could start right here and i might add one more black a little bit higher and i might darken that slightly just to make that fade a bit more um gradual so that looks good and then i need to add one more gradient this gradient we're going to add again it's going to be a fade from black at transparent and it's going to end at just black at 100 and this one we really just want to set to fade from left to right uh or i'm sorry from right to left so the black is on this side and again i don't need this to span the hole with this transparent it can stop somewhere around here maybe and i'll add another one to just sort of darken things up a little so that way we can see a little more of that text um so that's looking pretty good we got the video back there we have these images next thing i want to do is grab this uh button container right here and i'm going to add a bit of padding to the actual container so maybe 2 em to get us started and that way it just kind of pushes it off the text it's not directly touching the text which is good so this one we also need a bit of space so i'm going to add a space uh i'm going to call this class first button create a new class and then the space will be 1 1 am probably would be good and that's just going to create a little bit of space right there but because we added this class of first button it's not creating the space uh here for the second button which is good um so that is pretty much set up and now we can go ahead and build the next section which is this text and video side by side so basically i'm going to duplicate this section that i have here and i'm going to delete the three column container out of it um and i'll add in another container inside the second section and this one's just going to be called a two column container all right so we have our two column container we'll drag in our two column items next so this one will be so we'll have a two column item and this is going to be remember we said is exactly 50 of uh of its parent so the width will be 50 of this two column item and we can duplicate this to make two of them and uh let's go ahead and drag in a video so i'll drag in this video and i'll put it inside the second one right here and then inside that first two column item we'll drag in a heading and we'll put it right in there and this heading is actually an h4 this time so it's a little bit smaller um and then these two items are stacking one underneath the other so we need to get the two column container and use flexbox again and with flexbox we can align this however we want but i'm going to align it to the center not to the top not to the bottom but to the center of each other and then justify it it doesn't matter in this case because they're both 50 percent so they'll span the full width right there so now we have our heading we have our video i'm going to give this video a class of video and i will give it a radius of 0.6 m so that way it has the rounded corners that we need um [Music] this one here i can just copy some of this text and throw it in that's looking good the only problem is this text is getting a little too close to that video for comfort so what i'm probably going to want to do is create another div i'm going to put this div inside the two column item and then i'll call this one something like 2 column uh item contain so this is the container for the stuff inside the item and i'll give this one a padding of i don't know maybe 4m or 3m something like that so we're using ems and just giving it a little bit of padding so that doesn't directly touch the side um so that's looking good there i believe our next section is this fun one here um so this title is just going to kind of scale uh kind of just rotate or move like that one loop and then we got our three column item again so we'll go ahead and duplicate this section and this time we will delete this two column container and this time we need to uh drag another div in here and we'll call this one moving text so this is our moving text container and we'll go ahead and drag in a heading doesn't really matter which one in this case for our purposes um and we'll just give it the title so this is our our text here so we're going to need inside this moving text we're going to need a container that kind of holds all the pieces together so i'll drag in another div and call this two column text container so this container kind of holds everything and i'll go ahead and drag that in uh so this this heading is going to need a class um we'll call it display text because it's super large and also it's going to need a little line right here a div so we'll drag in a div um and then we'll call this one we'll just call it moving text line and then so the width of it could be anything but i'll set it to ms that way it scales with the font size so maybe i don't know maybe 10 m's and then the height of it could also be m's as well that way again it all kind of just scales so as we increase or decrease the font size this line will decrease and increase and then we need to give it a background color so i'll set a background color white and then we created the line so again we want these to be side by side so i'll grab the parent of these two the moving line and the display text which is in this case the container we'll set it to flexbox center and align that way and just like that we have our line in our text so this text this line i might make it slightly smaller um like slightly thinner maybe 0.15 em for that might make it a little less wide as well and then i'm definitely going to add some margin which is space outside the container to both sides of it that way it's not touching this text exactly and what i'm going to want to do next is kind of duplicate this so i'll copy the text and paste and i'll copy the line paste so we have the text in the line and then you'll see this text is being forced to stack but we don't want it to do that so i'll grab the display text class that we created and under breaking i'll do no wrap and that way it's just forced not to wrap whatsoever um because this is in a flex box our line is being squished to no width at all it's like super small so i'm going to give it a minimum width of 8 em which is the same width we set and that forces this text not to squish it anymore but just to exceed outside of this boundary that we set which is perfect that's exactly what we want so that's all looking really good um i think for this to be a seamless loop i'll set this to overflow scroll for a second so i can scroll inside this container so you can see what's happening for this to be a seamless loop we're going to need four of these boxes of text so that way they can loop perfectly out of the way otherwise this one would move right here and then you would see that nothing's here and it would cut back instantly here so we're gonna need a couple of these i'm probably just gonna make four uh inside just so that it's a seamless loop so what i'm going to do is grab this text and paste it grab the line paste it inside this div do that one more time so we have the display text the line display text line text line text and line so for four of them that's perfect so we have this i'm going to set this remove that overflow scroll now because we don't need it anymore we have this set but it's causing our page to scroll horizontally which we do not want we don't want the user to scroll we want the excess to be cut off so actually just set the overflow to hidden and that's going to remove all that excess so now it's not scrolling whatsoever problem is it's inside this section and it's not spanning the full width either so we can set the width of this to be 100 viewport width and that just means 100 percent the width of the screen now we have this problem of scrolling again because it's not starting right there so we'll do in for margin we'll do negative 10 viewport width and that's just going to push it back to where it's starting right at the start of the screen and now we don't have any scrolling whatsoever and this section still has this padding uh which is what we want so that's looking really good i think what i'm going to do is actually make this display text a lot larger it should ideally we should only be able to see a little bit of this w um so i'll just kind of increase the size a good bit um so that way we're seeing yeah a little bit of that w and that's it and i might make this sim like medium instead of super bold that way it's not too wide um so that's looking pretty good and i think what we can do now is go ahead and just start animating so we're going to want a we're going to go over to the interactions panel we're going to create a page trigger and it's going to be on page load so as soon as the page starts loading we want something to happen so when the page starts loading we'll create an animation and we'll call this one moving text and what we want to do is we want to move the container that all these texts and these lines are in so this container here so we're going to start by moving it 0 and that's going to take 0 seconds for the duration and we want to apply this to the class that way if we decide to reuse the section on other pages or on even on this page it'll still make this animation happen to all of them then we'll add another move and this one's going to be something like negative 50 percent um so there we have this negative 50 percent so it's moving halfway um actually what i think we need to do um let's close out of this animation for just a second so a couple things we need to do first of all this uh this container here let's remove that width and remove that overflow hidden and remove that margin instead what we're going to do is set that on the moving text block itself uh so the width will be again 100 viewport width overflow will be hidden and it will have a negative margin of 10 viewport width now if we scroll uh all that's there it's looking good so now we'll go back and um and let's set the overflow to hidden uh and we'll go back and set up our animation so i'm reopening that animation um this text is moving negative uh 50 so it's moving it backwards we really just want this to this next one to start where that one uh started to end where that one started so i'm just gonna line these up until they till they look about right so in this case uh 90.5 let's see 90.5 is probably good to get these two aligning in the exact same spot and right now if we play this it's super quick we want it to be a lot slower so for the duration i might make it something like eight seconds um maybe even longer maybe we'll go 14 seconds and yeah that way it's just really subtle and it's just kind of moving and one more thing we want them to add another move that moves it back to where it started so zero percent and set the duration to zero so it starts at zero it moves over to where the second text is in the right place and then it ends at zero and right there and then we can check loop to make this repeat and now if we preview this we got our video we got our images and this is moving rather nicely and it's once this text reaches right here the corner it's just going to repeat but it will do it so seamlessly um so yeah it'll look like it it's just perfectly seamless there let me grab a video real quick um just to kind of put in here in our video column let's grab the video in the card and i'm just going to set this video right now add a url that way we have a little bit of something set there um so awesome that is set up and it looks good this is set up and it's working right i think our next step is uh to have this sort of three column thing going on again so for that what we want to do is basically just copy this three column container that we already created and we want to paste it inside this last section right underneath the moving text so we have our three columns here again and we set originally we set the width of this photo to 25 viewport width let's set the width of this column item to 25 viewport width as well um and now what we're going to do is just delete this photo out of the item and we still have this item set to 25 viewport width um what we want to do is drag in a heading and this one's going to be an h4 and i'll just grab the text from that and then let's drag in a little bit of paragraph text inside this and i'll just grab some text and put it in there and then now basically what we can do is delete each of the photos and copy the text into those items and i'll just go ahead and grab all that copy and throw it in here real quick so you'll notice that the web flow froze up on me for a second i'll just reopen the project so you'll notice that the um the text is supposed to be like a light gray and it's actually a white so we'll fix that in just a second the first thing i'm going to do is just get all this plugged in all right so what we want to do is grab the paragraph text and we'll hit this plus sign and we'll do all paragraphs so every paragraph text on the page we want to change the color to be this light gray color that we created earlier so now any paragraph text we drag into the page is automatically going to be this light gray without us having to add any sort of class to it to make it look that way um so this whole item container three item i guess what we can do is add some to the moving text container we can add some bottom margin of uh maybe two or three em just so that way it's not directly touching and then here we're going to want to add a class to these items uh we'll just call it um two bottom auto margin and we'll re-add that to each one of these each one of these uh titles and give it that class of two em for the bottom margin actually i might change that to one and rename this class to one so now in any instance that we want one e m of bottom margin we can put it right there and uh we can just add that class and it'll have that right there set for us so that's looking pretty good um the next thing that we need is this sort of image in um image and text combo so we can actually reuse this section we already made here i'm just going to right click on it and duplicate it and then i'll open up my sections i'm just going to collapse them all for now i'll drag this one underneath the other one and there we go we have this sort of two column thing going on which is good so from there what i want to do is actually switch the order of these items so that the video is here and then the other items here and you'll notice we have a little bit of padding on this uh container of 2 of 3 am that was stopping it from touching the video here so what we'll need to do is add a combo class to this container that is uh we'll call it is invert it and we're going to switch it the 3m here to be 3em on the other side instead and now now that is working and that's working there just as we would expect it to so good i'll just go ahead and throw in some other content right here we also know that we're going to need sort of a button so i'll just copy this one and paste it right here give it a plan visit uh i don't need this combo class when this is first button because there's not two buttons side by side so i'll just click on that drop down and click remove class actually now that i'm looking at it i might reduce the height of this because it's kind of large um so here i want the space underneath what i can do is just add that one bottom margin that i already created and bam right there so it's really good to use repeat these classes as much as possible uh it just makes life a lot easier in the long run so here we have we're supposed to have an image so what i'm going to do is actually grab an image and drop it inside this item and then from this item we know that the image should be 50 of the parent but in this particular case it's really 50 of the entire screen because it kind of bleeds off to the edge of the screen here so i will just call this a wide image and for the width of it we'll set it to 50 viewport width 50 percent with the screen and you'll see it's actually not getting any wider than this title here that's because it has a max width of 100 percent so we can click on that percent and set it to none so now it has a max width of none it doesn't have a max width and it's 50 percent the width of the screen which is good but it's overlapping the text sum so for margin we'll add a negative margin of 10 viewport with and that's just going to push it all the way off to the edge of the screen um and i can delete this video now we don't need the video anymore so that's perfect it's all the way off to the edge of the screen and the reason why we're using tin is because our section has tin padding so we're just pushing it back to where it started so i'll go ahead and grab the image that i want to appear here um which is this image here and then i'll set a height of it too so maybe the height i'm going to use viewport with as well so it kind of just scales like a unit um maybe the height can be 36 viewport width and again set the fit of it to cover that way it doesn't stretch the image and i want the corners to be rounded just on these two sides so under border radius i'll click on this uh individual corners option to see more advanced options i'll do 0.6 m here and 0.6 m for this corner as well so these two corners around it and that is looking pretty good um yep that's pretty much what i would expect there um so that's all working that's looking all right um i guess our next section really is um this section here so i'll again go ahead and duplicate to create a new section i'm going to delete this two items container um and then we'll just say uh we'll drag in a div inside this section we'll call it cta for call to action uh card cta card and we'll give it a background color of blue and then we'll give it some border radius of 0.6 em to round the corners and then we need to give it some padding because we don't want the text to be touching the side so i'll do em in this case for padding um let's do three em and if you hold shift and drag it's gonna adjust all sides simultaneously um so that's looking pretty good uh this is supposed to be an h2 and i believe right under it is a h5 oops yeah that's right so um i'm just going to go ahead and set that so here we'll go ahead and set that and then we'll set the text here and then we need to add just kind of a button here and let's just add the class we already created of white to make that one white and then we'll set the text here so that's looking alright uh let's go ahead and kind of get this set up the way we want it so we need this to be on that side this to be on the right side so we should probably group the text together so i'll drag in a div and i'll call this cta text for the class and then i'll drag in all the text so now the text is in a div the button's in a separate div i can grab the card and apply flexbox and center align it not top not bottom but center and then justify it with the space between option to space them out like that and that's looking pretty good there and i may uh depending on who i'm giving this to say i give this to a client to use and they decide to make this heading a lot longer kind of gets a little too long there so i may set the button uh i may do something on all my button classes uh where it says breaking equals no wrap that way it doesn't it can't break there but this text is getting a little too close so i can give this uh cta text container class that i created and i can add a little bit of padding inside it so that way it doesn't uh actually touch so you just think of things like that what as you're building different things that you may need to add more to and also we need a little bit of spacing underneath here so i might just throw on that exact one bottom margin class that one's a little too much margin i would say so maybe we'll duplicate this class and we'll call it maybe 0.2 bottom margin something like that and then we'll just make this 0.2 that way it's a little closer so yeah that's looking pretty good and from here i can even if i wanted to increase the padding a little bit on top or bottom or however um but that that looks all right there the last bit that we really need is the footer um so i'm just going to go ahead and create a footer we're going to duplicate this section and we're going to add a class to this section called footer that way we can change the background color of it to more of this dark gray without it changing the background color of all our sections and you'll notice another thing too is this section had three viewport uh or the and three em padding and this one had three em and that was creating that nice even amount of space between all the sections because they had the same amount of padding top and bottom when we get to this footer it's pretty obvious that this uh because of the background color change this isn't 3 a.m anymore so what we can do is add some margin of 3 em instead and that's just going to push this down to where we have the same amount of space between the top and the bottom so that's looking good there i think the next thing we need to do is kind of build out the footer right here um [Music] so i'll go ahead and add a div just to contain yeah it's going to contain all this information here so i'll drop in a paragraph and then so this is the paragraph font size uh we want it to be but we want it to be bold and we want it to be white so i'll say um i'll call this add a class called bold and i'll make it bold i'll make it white and then i'll change the text inside it so we have this and then i'll duplicate that paragraph and for the second one i want to remove that bold class that i assigned and from here it's really just a matter of pasting in information all right that's looking pretty good this bold i may even add like some bottom margin so it's not uh touching the two blocks of text um that's looking all right we'll grab this entire div block which i just realized we didn't give it a name we'll call it flitter column and then we'll duplicate the footer column for the next group and we'll duplicate it again for the next group so we got three of them stacked side by side we really have two pieces to the footer we have the footer top we have the footer bottom so two separate pieces so what i should probably do is drag in a div uh into the footer and i'll call this one footer top and then inside the footer top we want all of the three columns that we just created and inside those three columns or or for the footer top we're going to flex and align it align it sure it can stretch the whole height of each other and then space evenly so that way it just spaces them like that evenly between the two so then for here i can drop in contact and i can drop in all this information our phone number our email maybe a link to contact us and then here definitely our address would be something okay so that's looking pretty good for footer top um i'll kind of want one more column in here uh so let's duplicate this footer column and this one's going to be for social media so i'll delete the text out of it we got this footer column for our social links um i'm basically going to uh drag our social links uh so we'll need link blocks actually so let me delete that we'll need a link block and that way the uh social icon is actually clickable it can go somewhere so like facebook.com for instance um and we'd open that in a new tab uh so then we'll call this link block um we'll call it footer social link and then add in an image and i'll drag in the facebook icon inside the social link we'll call this uh give this a class a footer icon and then give it a size so maybe i'll set the width of it to be 2 em something like that maybe a little smaller because that is kind of large um so the width of that is set and then i'll just go to the link block and duplicate that i believe i have four social links so i'll duplicate that four times um so that's looking pretty good let's change the um let's change this to the next one this image just gonna replace with youtube place with uh instagram replace with um twitter so the width of facebook is the width of them all are set to 0.9 let's try this let's remove the width and let's set the height to 0.9 instead or maybe a little larger yeah that way they're all the same height that looks a little better um and then one more thing that we'll want to do inside the footer link block uh we'll want to add a little bit of padding maybe 2e um maybe a little less that way we just kind of space them all out and i mean they look pretty much okay facebook looks a little smaller because it's not as wide and then youtube looks huge because it's a lot wider so if you wanted to make these a little more proportionate you could set them all to have the same width and height like say maybe they're all um 0.5 1.5 m and set the fit of it to contain so it just forces that image to contain inside the plot and that looks a little bit more proportionate um this footer column they're being set to basically these are anchored to the top and we want them to be anchored to the bottom so i'll add a combo class and call this one social and then in this combo class we're going to add some flex box that kind of just snaps them all right down to the bottom um and that looks pretty good so that's everything for the um top of the footer let's drag in another div inside the footer and we're just going to call this footer bottom and from here we're going to want this line so we can add a border and i'll just add it to the top by selecting the top here and i'll do 0.2 em for now and maybe make it this grayish color uh and then i'll add some padding inside this footer bottom so maybe one em top and bottom for now and then in here we just have the copyright so i'll grab this text uh this would be a little bit of paragraph text um so i'll drop in some paragraph text there uh maybe duplicate this text so we can have uh these sort of links like terms and conditions for instance would be a link um let's see another link would be privacy policy and really if these are if these are links we want them to be clickable so i would actually use the link text link option here instead for these um so i'll just put that in there duplicate that and then make that one the terms and conditions all right so we have those set one thing we should notice about everything in the footer bottom is it's a little bit it's white and it's a little bit smaller than our regular paragraph text so what i can do for that is i can just call this footer text and i'll just assign that class to everything that's in the bottom and then what we'll do is we'll uh set the font size right now it sets a viewport width that's because it's being inherited from the body instead we'll set it to m so 1 am for instance maybe a little less than 1 am and that's just a percentage of the body so once the font size gets set to pixels on mobile this is a pixel font size this is going to be a percentage of 16 pixels so that way we don't have to reset this font size on mobile it's just going to scale down based off the size of our regular paragraph text which is good and then we can set the color of it to white um and that's pretty good i think one more thing we'll want to do is add flex to the footer bottom to center align everything and then space evenly and then these two are really supposed to be grouped together it's not so supposed to be spaced that far so we'll need a div in here and we'll call this uh footer links and then in that div we'll grab these footer links and uh and then when this one will probably add maybe maybe a combo class of last link so that way we can add a little bit of margin right there to kind of space them out so they're not touching each other um and i might remove the i might make this a little smaller to this border hands maybe a little bit more padding and then we can add some margin off the top so that way it's kind of spaced out there um this bottom padding on the footer i'll probably remove all together so that way it's even space in between foot or bottom uh and then i might add more padding like five would be good here and so that this and this is an even amount of space maybe i'll make this five as well so we got five and five and then here we got the uh two a little over two and two for the for those um and yeah that might make this a little larger the life of a designer always tweaking so that's pretty good i think for our footer um yeah so that's how you would build that part i think the last part we have to build is just the nav bar and web webflow has its own like sort of built-in nav bar um but it does have some problems with it it comes with some basic like default stylings like extra paddings on this break point you don't need um it doesn't allow you to apply flex box uh to certain elements it's kind of problematic so i like to always just build my own math bar and i find that's usually the best anyway so if you just drag in a div plot we'll paste this div block up at the top and uh i think we're done with the c styles div now i'll just delete it we're pretty much done with all those styles um so this one we're just going to call navbar this div and this is the only div you'll notice that isn't a c-section and the reason for that is because it's the only div that doesn't respect the same amount of space on the page so that's why we're making its own thing instead of adding a combo class um so inside c-section we're gonna need a logo and this logo needs to be clickable it needs to take you to the home page so we're going to drag a link block in first and we'll call this a nav bar dash logo and then we'll add in an image inside that link block which is the actual logo we'll call this uh navbar dash logo image um and we'll set the width of it to maybe like i don't know 5m some somewhere in there and then we'll grab the nav bar itself and we'll add a little bit of padding on the sides uh and a little bit of padding on the top and bottom too not not that much for sure but yeah we definitely want some padding one sides on top and one bottom uh so that is looking pretty okay there i would say uh the next thing we're going to need is basically a div for all our menu links so on mobile this will probably be hidden there'll be a hamburger icon and when you click it'll it'll show the stove but on desktop this div will be kind of fully visible so we're going to drag in a div and we'll call this navbar menu and this is where all our menu links will go so from here i'll probably drag in a link block i'll call this uh navbar link and then i'll just drop in some text inside of it and kind of give this text uh whatever i want it to say um yeah something like that so i'll grab the nav bar and i'll apply flexbox to it center align it uh and then distribute for the justify just space evenly so that way this whole nav menu is all the way on this side the logo is on that side and that's looking pretty good next thing i'll do is just duplicate this nav link quite a few times to make a few links and what i'll probably want to do for this nav link is um first of all add some padding on the sides so let's do there let's add some padding on top and bottom maybe not not not a lot but just a little bit there um and then i'll just kind of fill out the text of these different links so those are that's them i'll grab the nav link uh class so the the link block that's the text is inside and i'll start applying some styles to it like all caps for instance um and you'll see it's kind of affecting all the text inside it and then i'll add some letter spacing so maybe m's maybe i'll decrease the um with using m's decrease the font size a little bit uh i might even i think this is medium for the font size or the font weight so maybe making that a little heavier wouldn't it be bad um and then the last thing is i need the button inside of not inside the nav link but inside the nav menu so it's right there we can remove this is first button class we'll create a new class and we'll call this uh nav link uh we'll actually nav button um and then what i'll do is actually make the font size a little bit smaller and the beauty about this is because we're using m's for the padding you'll see the space around the outsides of the button grows and shrinks with the size the font size of the button so that scales really really nicely um so we can make this a little smaller and the holding scales without us having to really adjust much um for margin i'll add a little bit of margin right here just to get that text so to where it's not so close it's not touching um and that is looking pretty good for the nav one more thing we need to do is set this now to fixed so it's always at the top of the screen so for position we'll do fixed and we'll set it to span the whole top right there and you'll see it's also below the video which we don't want we want it to be higher so z index is like layers it's like whatever has the higher number is going to be on top of everything else so if i set this to like 2000 and hit enter it's automatically gonna be on top of everything because it's the highest um i'll also give this a background color uh just a dark black would be good and that's looking great so that is the nav bar um i guess what we need next is to add the hamburger icon that will click to open the nav when it's on mobile so we want to drag in another div and then this div is going to go in here it's going to so in the navbar you'll have the nav logo you'll have the nav bar um icon and then you'll have the nav bar menu the nav bar icon and let's actually make this a link block so we can click on it so i'll right click on this div and convert it to div plot so now it's clickable uh the navbar icon itself we really just can hide for now we don't need it until it's on um to the mobile version so i'll just hide this for now it says display none um and yeah so that is desktop version i believe of everything um maybe we can make a couple little tweaks like if we grab the nav bar we can under tags just tag it um as a nav and then maybe we'll come over here and under the footer we'll just tag this as a footer uh and that's looking pretty good that way it's just better that and um we might want to even just add some hover states like on our buttons for instance if we go over to this uh button class and we go over to hover we can maybe add a background color of black one hover but turn the opacity down so it just darkens whatever the current color is a little um so now because we added it to this button class that's going to happen when this one is going to happen on the small one it's going to happen on the white one it'll happen on all of the classes which it's going to happen there perfect so it's just scaling everywhere and you'll notice it just kind of snaps to that darker color we want it to fade so you can add a transition and for now we'll apply this transitions to all properties and it's just going to ease it so now it should be a smooth like a smooth fade to anything that we do we can also on hover maybe we want to do a transform and just kind of scale it uh maybe we'll scale it down slightly like 0.98 uh ever so slight let's see how that looks yeah so it's very very subtle it's just like whenever you hover over one of these it just kind of darkens and scales down ever so slightly uh one thing to keep in mind is on tablet you really want to on the tablet view remove all your hover states so go back to hover uh set the scale back to one and set the uh transparency all the way to zero um just because there are no hover states on tablet and if someone oops didn't mean to said that if someone clicks on this it may turn black and scale down really quickly before it brings them to the next page so it and it feels kind of buggy so it's a good good practice to just reset your hover states to what they were on tablet just kind of clear them out so now let's go about making this all responsive and because we set this up so clean uh responsiveness is just going to be super super fast because this is just set up with repeatable classes everything we do to one happens to the others so it's really nice so what i like to do is actually grab the hamburger icon that i want to hide all this behind and there's two options you can search lottie files or also lottieflow.com both have really really great options for hamburger icons um so my personal favorite is lottie flow just because they're cleaner there's less space around the icon unnecessary space and it's easier to change the colors um and there's a ton to choose from so if we wanted to transform from an x hamburger to x um i might use that one's kind of cool that one's just super clean and cool um this one i don't know what's going on so maybe we'll use maybe we'll use this one for now so i know for sure that it needs to be white so i'll just type in that color to get to get it to be white then i'll download it and then we'll go back over to webflow and under images we'll just upload and from my downloads photo or grab that lottie file um and there that's our lottie so from here i'm just gonna grab this and i'm gonna drag it inside the navbar icon div that we created and i'll call this uh i'll call this um navbar icon lottie and all right basically what we want to do for now is we'll grab this whole nav menu and we'll set it to display none to hide it completely we'll grab the navbar icon set it to display block to be able to show it and we obviously need to set the width on this icon lottie maybe 2 am something a bit smaller so that way it's not like huge um actually i might set the width instead on the nav bar icon div itself um it looks like either way there's a little bit of space there so i'll set flexbox to kind of center that uh lottie inside its parent um [Music] and that is looking pretty good so that's our icon uh we need to design how the menu is going to look now so if we go over to the menu set it back to display block we'll notice it's still inside the nav and we really want it to be outside the nav altogether so i'll set it to position absolute and i'll set it to the top of the screen and you'll see now it's all the way at the very top it's ripped out of the document flow um we want this one to be like just full height so i'll set the height of it to 100 vh 100 the height of the screen and i'll give the nav menu on this breakpoint i'll give it a background color that is that sort of light gray uh color and then another thing i'll set the z index to minus one so that's negative one means it's right behind the icons uh that way we can still click on these icons um and then the sort of menu we can apply a flex to it that aligns it vertically so one stacks underneath the other and we can center everything up so everything's nice and centered we can remove this on the nav button we can remove this margin so that way it's centered there um maybe even this about we can we can try a couple things with it let's try spamming it uh this nav link 100 width so that's looking kind of nice there um let's add a little bit of padding inside the nav menu so it's not touching um yeah something like that yeah that way it's not touching the sides um maybe we can add a bottom border to this navlink so 0.2 m or something like that uh point yeah 0.2 and then we can add some padding maybe we'll increase the font size slightly make it a little larger a little easier for fingers to uh quickly touch on a small phone uh when navigating um and then maybe this button here can be full like a hundred percent width uh one thing i noticed is the text align should have been centered on all our buttons in case we ever decided to use it a hundred percent width so i'm going to go back to desktop real quick and grab this button and do text align center just to make sure all our buttons have text align center and now this one what we can do is give it some top margin that way it's not touching that line uh maybe give it some a little bit more padding to make it a little thicker and that's not looking bad i might even add some more some more padding here kind of maybe even align it there um maybe even make the font size a little larger on this button on mobile um and then i can reduce some of this padding slightly just playing with it just trying different things seeing what works what doesn't uh how we can make this look as good as possible so i think that's okay there for our menu that looks alright um it will just keep getting smaller and even at really small sizes it works pretty well so i think we're good we have a menu so what i want to do now is set the height of it to zero that way it's just kind of like um at the top of the screen and i'll also want to let me remove this top and bottom padding so that way it actually is zero so it's right there at the top and zero i'll set the overflow to hidden so it cuts everything that's hanging off the outside like you can see this button is kind of hanging off outside of that div so set the overflow to hidden and it just kind of crops everything off outside um so yeah that is great the nav menu is up at the top at zero height and it's uh the overflow's hidden now what we can do is we want anytime we click on this icon we want to open the menu so grab the nav bar icon div we created and under the element trigger we'll create a new trigger and it'll be on click or tap and we'll apply this to the class so it applies on every page so on the first click we want to create an animation and this animation is going to be called open nav so when that click happens the first thing we want to do is grab the nav icon body and add in an interaction of lottie so it's going to start at 0 and the duration will be 0. then we'll create a new lottie that takes this timeline drags it out to when this first becomes an x and maybe the duration yeah it looks like maybe this lot this particular lottie doesn't actually start at zero it looks like it officially starts somewhere around 16 so it goes from 16 to 29 to make that x that's perfect and then um let's grab the nav menu and what we want to do here is set the size so the width is going to be 100 viewport width the height will be zero v port height and the duration will be zero that's how we want it to start but we'll create a second size with the second lottie where the width is also 100 viewport width the height is 100 viewport height like that and we'll play this out so you see the x the the hamburger icon turns to an x and the sort of menu just slides out which is what we want we can also set some easing on this to make it a little smoother so like out a quart is a nice one it gives it a little bit smoother of an action and we can make it a little longer like 0.8 maybe and so it's nice and smooth it's just sliding out and whenever we click so that's perfect we can hit done now one second click of this we want something else to happen we'll create a new animation this one will be called close now and then here we want to grab this lottie icon we'll add a lot a trigger here we want to change this reset it back to 16 which is where it started uh that's where it was with the hamburger icon and then we'll want to grab the nav menu and add a size interaction width would be 100 viewport width height would be zero viewport height to return it back to zero state we can select both of these and we can make them a duration of 0.8 and an uh easing of out court just to return this back to where it started and give it the same duration and easing as the end one so let's just test this out and see what happens so let's preview we see it's a hamburger icon we click it turns to an x the menu slides out we click again turns back to a hamburger and the menu slides up so and we can just keep doing that endlessly so you can take this as far as you want you could animate each one of these nav links to fade in one after the other maybe have the button uh fade up like from a zero opacity to 100 or scale up you can make anything you want happen when this snap opens um so it's really nice uh so yeah that's the nav menu that's fully set up it looks great on all breakpoints um we have our nav uh i'm noticing okay yeah that's perfect uh yeah looks good all right so from here we do really just need to adjust any last minute things we need to change um like these this is all looking good this three column grid here it's still looking good here with three columns um honestly on tablet you might not have to change much like this looks pretty pretty good i would say on this line height is a little like i wouldn't like this to be closer so i'll go back to um desktop and i'll um click these two selectors and select all h2 headings and for line height i'll reduce that to like point one maybe to get those lines a little closer um and that looks a little bit better yeah so that's looking pretty good um this footer is kind of rough honestly we might need to change we might need to make things stack on this footer because it's a little too close so for footer top what i'll do is just switch it to block um and now all those are stacking one under the other and then i'll grab each footer column and then just add a little bit of bottom margin to it and that's pretty on pretty good social links maybe now we can um left a line might be good and maybe we can grab each one of these social links and remove the padding from this side of and add it to the other side um that way this starts right where we want it to start that looks good this last uh column here we created a combo class of social for it we don't need all this extra space on this last column so we'll set that to zero and that should clear out some of that extra space for us um so yeah that looks good and i believe everything looks all right here honestly it's scaling that we might want to make this a little smaller um so maybe i'll decrease the size of this where again we can see a little bit of that w and because it's percent we set up this interaction to move this div a percent it's going to still loop seamlessly even though we're decreasing the font size it's going to loop in the exact same place so right when this sits here ah it was a little bit of a jump um so i may need to fine-tune that interaction some um but it's pretty close so here once we move to the next break point this is where we really probably want to start stacking things this space is getting a little too tight so i might set this uh to display um to flexbox vertical to where it stacks one under the other now and we probably want the image or video to be first and the text to be second so we can use this switch order reverse and now it kind of reverses the order for us which is great we'll want the um item the two column item to be a hundred percent width of its parent now not 50 width so that's pretty good and then one more thing is we'll want this sort of item container we don't need this extra space anymore right there but we can add some padding to the top that way it's not directly touching its parent there so that looks pretty good um this let's see this one here we're running into a bit of an issue so again we want the we want the um image to be above the text so we'll grab this whole sort of two column container and we'll add a combo class of flip on mobile maybe and we'll just kind of flip this uh so yeah now the image is first text is second we still have this uh padding on the top that we added above and then here this is really this is still 10 viewport width um so this would be 90 all the way up into here so this image should instead be 50 now it should be 90 viewport width and it ends right where we want it to end right on that and then we can increase the height of it some that way it's not too small um but yeah that's looking good here we're running into a bit of an issue i would say here would be good to just center align everything so we'll switch the flexbox to vertical uh center and on the c card we'll kind of just grab do text align center um this button is fine let's see it might be ah this uh cta text has a bit of padding that we need to remove and what we can do instead is add padding on the bottom that way it kind of keeps it away from the button and maybe i'll reduce this slightly so it's not tremendously huge all this is still looking pretty good um yeah that's i think that's okay so that is looking fine this might be getting a little tight but i'm actually just gonna wait to switch it it is a little tight but i'll wait so here this is where i definitely want to switch it um so i will grab this container and set it to vertical and i'll set each one of these sort of three column items to a hundred percent width and then i'll set each of them to have a bottom margin of 2em and the great thing is because i did that to this three column item here it also does it to this three column item here the only thing i need to do is make sure that i set the width of the actual image inside that item to 90 viewport width and the height to 90 viewport width as well um that way it's a perfect square again so that is looking good maybe this heading we can do all h1 headings and maybe even reduce the font size slightly it is a little large um actually it might be okay because yeah i might want to actually scale this viewport with just on this one break point for the heading so that way it kind of just uh grows and shrinks with the size of the actual browser and then i'm noticing to this issue we're having so maybe this first button uh we'll also need some bottom margin one mobile yeah that way when this stacks it's fine so that's looking pretty good there i would say this is all fine this is all good here this is good this i might want to reduce the font size of slightly um yeah and this is good here we're having a bit of an issue but because this is a actually that must have started happening here because this is a combo class of is inverted we can just remove this padding there um yeah so that's looking pretty good we're fine there fine here here we're gonna need to start stacking things so i'll switch this to vertical and maybe i might just text a line center everything in this section one here just to keep it nice and uh spaced out and then this these footer links uh block that i created i might add just some padding to it maybe not that much just to keep it kind of spaced away um and honestly copyright usually goes at the bottom of the screen so i can grab this whole footer bottom and just reverse the order to make the copyrighty first which means i don't need this padding at the top i need this padding at the bottom um yeah that looks pretty good i would say um so that's everything for making it responsive across all break points the site because we're using percentages and m's and everything it's going to look the exact same on a 5k screen as it does on just a 13-inch macbook it's all scaling kind of disproportionately um and because we're using repeatable classes for all these sections if we decide to come over here and just kind of reduce the space between a section it's going to reduce the space for all of those sections on that page so it makes making changes a lot faster a lot easier and it makes making things responsive a lot easier too because we're reusing classes wherever we can um and then even animating this further uh wouldn't be an issue like maybe making a hover state when some of these uh that just kind of reduce the opacity when you hover over it and because they're all using the same class it that one change applies to all of them um so yeah it's not it definitely kind of makes things a lot smoother making a completely responsive page the last thing i would recommend doing is creating a symbol for your navbar and your footer so go to the symbols panel with the navbar selected call it nav and hit create and then again for the footer select the entire footer go to the symbols and call this footer hit create and that basically is going to make this a symbol to where it's reusable you can use this on other pages any change you make to one of them will change on just everywhere so yeah that's everything for building out a going from design to development and building out a completely responsive site and web flow

Channel: Timothy Ricks

Views: 36,809

Rating: 4.9820304 out of 5

Keywords: webflow, crash course, Beginners, tutorial, complete, webpage, hours, 101, responsive, font styles, vw, em, percentages, 2020, best practice, dev, xd, figma, design, website, real, no, without, code, entire, introduction, using, learning, designing, building, make, classes, practical, follow, along

Id: 81vzaO30720

Length: 99min 27sec (5967 seconds)

Published: Tue Jul 28 2020