Learn Webflow in 16 Minutes (2021 Crash Course)

so you've heard webflow is cool and you're considering learning it well on this video i'm going to give you the basic and going to build this page in only 16 minutes let's do this [Music] all right let's get started but before we jump into webflow i actually want to explain a quick concept that is super super important before you dive into webflow so that you understand what you're even doing within webflow so the concept is called the box model and here's basically what i want to show you everything on the web is actually boxes within boxes and let me show you how it looks so here's the apple website i'm going to click i'm on chrome here i'm going to click inspect which basically going to show you the code for this website so what you can see here on the top is called html and that's the code for this and you can see as i move through this you actually see the boxes on this page and it's basically just boxes nested within boxes the button here as you can see is a box and it's called a button that's the name of this box and by giving it a style a name basically that's what you see down here that's the css basically that's the style the name defines how does it look like so what's the font size what's the background of this exactly how this button looks because it's called a button so this is in like 30 seconds 70 percent of what you need to know about building for the web it's basically boxes within boxes within boxes these boxes have the name and the name the style basically defines how they look like and how they interact with one another now that you know this let's jump right into webflow so the first thing that i want to do here before i even start throwing things on the page is actually define the main main box here so as you can see we have here body that is the main box of the website selected and i'm going to give it a style so that we can define it basically what i want to do is give it a background of black because the whole page is going to be black and i'm going to give it the basic kind of fonts so that the whole font is going to inherent that font i'm going to use that so it's going to be white and it's going to be this specific font so let's start with it on the right here we have the styling panel which basically means for this specific style how is it going to look like now i'm not going to give it i'm just going to click here and select the body tag because that's what we're styling right now and i'm going to scroll down into a background because basically i want to choose like a black background and you can see that we've changed the background here because we're editing this box the body and the next thing i want to do is in the typography section i'm going to choose white because i want white text and i'm going to choose monster up font i think i don't know let's start with that all right so let's get started what do i have here basically i have here two kind of sections and i'm not building this properly as i would if this would be a real website i just want to show you the main concepts here so basically there's two things here there's the navigation and there's the rest of the content so let me just jump throw in kind of like two the mace the basic uh boxes are called div blocks so i'm just going to throw in two div blocks one and then two the first one is going to be the navigation and i'm going to give it a name here i'm going to call it nav just so that now i can style and refer to that style as we said now it's a box with a name so that we can give it a stop now basically we have three things in it we have this hamburger menu the logo and the search button and i've went ahead and uploaded here into the assets panel a bunch of assets and so let's just throw them inside right let me let me throw in the menu here and then i'm going to throw in the logo and then i'm going to throw in the search icon just throwing in three images into this box now as you can see they're not sized properly and they're just stacked one next to another from left to right because that's the default on the web we read from left to right so that's how things are stacked now one thing i want to do is i want to make sure that they are you know uh distributed from left center to the right and so the way that i'm going to do this is by changing the layout here of the nav box from the default which is called block into something that's called a flexbox it's something super super powerful i'm not going to dive super into this right now but by choosing this now i can change the justification of all the content that's in this box so left center right and we also have here space between which basically means it's going to just space the elements equally and that's actually good because that's one on the left one in the center and one in the right now one thing that we know that we want is and we can see it here we want kind of equal spacing right from the top from the bottom from all the sides so we're gonna go back here we have this is called the box model right we talked about the boxes so this is the space within the box in the space outside of the box so let me just pull in and i'm gonna pull in holding the option and shift key so that i can pull in from all sides at the same time i'm going to choose 20 here so now you can see we have 20 pixels on each side of this box kind of spacing out things evenly so that's good now the only thing i want to do is to change the sizing of this so i'm going to add names for all of these elements so that i can properly refer to them i'm going to call this menu i'm going to call this logo and i'm going to call this search and the only thing that i'm going to change right now is actually the width of so the size of this element this one let's turn it into 30 pixels this one let's see 50 pixels and this one maybe 25 pixels again i'm just doing this very very fast so we can see that's looks pretty much okay now next thing that we have here now for this box one thing that i want to do is i want to make sure that it's not too wide and you can see here that the text is actually you know not getting from edge to edge and the reason is that because we have wide screens these days we have to keep the content centered so that people don't have to kind of move their head from side to side so we're using something that's called container by container basically what we mean is for this box let me call this container container container we basically set a maximum width so if we're on a very wide screen we don't want it to be too wide so let me put that at 1100 pixels just make sure that it's centered by clicking this center button so now we have this element centered now we have basically two things here we have this um let's start with this title all new s-class so i'm going to drop in a title or a heading as it's called here so from the typography menu from the add menu typography i'm going to add a heading and i'm going to call this the all new s-class s class and basically now we have a heading because it's a heading it's already bold and kind of it already has some style but that's definitely not the style that we want so we're going to edit this tag h1 tag for the heading and we're going to let's start changing the stuff here in the typography let's change the font to this what's the name of the font comment something uh we're gonna make it normal not bold we're gonna make sure that it's centered we're gonna make it i don't know a little bigger and uh also let me look at this yeah we want this to be all caps all in upper capital letters so we have here all caps and that looks good now the only thing is that the s class is way bigger than the rest of it it's still one title and it's it makes sense to use one element so that google knows this is one title but we do want to give this as class a different style so by selecting this you'll see we have the brush icon here which wraps it with another style so this one i'm going to call this big h1 h1 stands for the big heading and i'm going to make this really really big and also i don't want them to be on the same on the same line i want this to take up a whole new line so i'm going to change the display here into block block means this takes the whole line from top to bottom they're a little bit too close to one another so i'm also going to add a top margin and now this looks pretty good kind of how much how i want it all right so we have the navigation we have the container within we have the h1 now we want to bring in the image of the car so let me just throw in the image of the car actually from the assets panel we're just going to throw this in after the heading and uh yeah boom it's right actually on top of it i didn't have to do anything oh yeah but because i took up this because this big h1 is actually moving up with the margin it's actually already on top of it now this happens because this is actually a png so with a transparent background so when it's on top of the text it actually looks pretty good so i don't even have to do anything i thought i have to reposition so what do we have to do right now we have to create this three column grid here i'll do that by using an element here that's called the grid that's a pretty powerful pretty powerful element i'm going to put it after the image and i'm going to edit it i'm going to make sure i'm going to add a column because it's three columns i don't need a second row so i'm going to delete this row and basically we have now a three column grid now basically you can see from the design they actually all look the same so we're going to create one box and then we're going to basically duplicate it three times so let me throw in a div block into this grid and of course i'm going to give it a name so i can refer to it so i'm going to call this let's say feature box feature box and in this feature box let me throw in a title because you know we have some title here for example luxury all right let me copy that and put it here obviously it's not the style that we want so i'm going to go here and edit this style i'm going to change the font into something thin or light and maybe a little bit bigger that looks all right and below it i'm gonna put in a little bit of a text block actually within this feature box i'm going to put it underneath it this text should probably be bigger so i'm going to give it a style and i'm going to call this feature text and i'm going to make it maybe 18 pixels and i'm going to make the line height a little bit bigger all right now this looks alright let me duplicate this feature box three times so now we have three columns here let's change the text pretty much so we can it looks as if we've changed the text here and the only thing that we have left is actually these lines so and we need a little bit more spacing here so let's check the feature box and let's add a little bit of margin or padding from the inside of the box let's say 15 pixels from each side now the boxes are better better spaced i think we'll actually probably add a little bit more now remember that we said this is a box so because this is a box we can actually if we scroll down all the way here we can actually give the box a border so in this case we only want to give a border on the right side so we're going to give it one pixel we're going to make it white and now we have because these are all the same style they're getting all the same you know features so all of them got the line on the right but actually we do not want this last one see the last one we don't want it to have a line so let's add this last block only this last feature box we're going to edit an additional style to make it different we're going to call this last box so it's getting all the properties from feature box but some of the things are going to be different so we're going to keep the spacing the same but we're going to remove this border so now all the boxes have this white line except for the last one now basically we can finish here but let's just make it fancier let me add some kind of an interaction or animation just to make it a little bit fancier let's go here into the interaction panel on the right and let's add a page load animation so we have triggers that the page triggers one of them if i'm going to edit is page load and this is basically an animation or interaction that happens after the page starts loading or finishes loading let me add a new animation here and let's call this loading animation now what i want to do is i want to make all of these elements appear nicely one after another so let's start by actually saying let's hide them and then show them when the pages load when the page loads so i'm going to start by choosing the image and i'm going to choose here i can animate all of these different properties i'm going to choose opacity i'm going to turn this down into 0 i'm going to trigger here something that's called set as initial state so we're going to start off from zero and then let me duplicate this element duplicate this and then when the pages when the page loads we're gonna bring it back into a hundred so this is what's going to happen now let's do this also for the feature boxes so i'm going to select this one and start by hiding it set its initial state and then let's duplicate this and this one i want this to happen after only after the car loads this is going to show so i'm going to bring back the opacity let's trigger that so now car shows and then this feature box show let's do this for these two as well start by hiding them zero opacity as an initial state and then duplicating them and then bringing back after the feature box animate into 100 let's do this for the last one as well start with opacity of zero as an initial state duplicate and bam bring back into 100 let's play this boom boom boom boom and now when we're loading this page it's going to animate in all right so that was it of course this was very very very fast and of course there's so much more depth into webflow but i wanted to show you what you can do really really fast if you're interested about learning more check out the link in the description we have of course a full-on course on webflow where we go really deep hope to see you with us and see you on the next video bye

Channel: Flux

Views: 291,338

Keywords: become a graphic designer 2020, freelance web designer, graphic designer job, ran segall, web design, web design business 2020, web design freelance, web design freelancer, web designer career, web design 2020, flux academy

Id: vvyPj5bTcgQ

Length: 16min 4sec (964 seconds)

Published: Mon Feb 01 2021