Learn Webflow in 2024 (Beginner Crash Course)

it's about time you get started learning web flow because the demand for webflow websites is off the charts in this video we'll be building this cool website and not only will be doing it very fast you'll also learn all the key Concepts to get you started with webflow if you want to follow along these tutorials the files for this project are below this video let's get started so here's the design that we're going to be building in web flow and before we're jumping into web flow I want to show you how this design is actually structured because webflow unlike other design software that you might be familiar with photo shop figma or maybe even canva in web flow you don't just throw things on a canvas and rearrange them in layers the web actually works in boxes what does that mean so each one of these elements on the page that you see here each link each text element each image or a button is actually a box because they are boxes you can Define their size you can Define the space between each one of these boxes and how they are rearranged now Things become even more complicated than that not only these elements are boxes but there are boxes that manage how other boxes are managed so for example you can see that this buttons in the navigation they're all together as one element laid in one place they have a background they have round Corner they have this kind of a glass effect then we have this whole navigation that's actually another element that works together maybe we want this whole navigation to be stuck at the top of the page or something like this so to manage these elements we basically wrap them inside of a box and these boxes in web design they're called divs and we give them names which we called classes so that we can Define how they behave so all of these texts we might as well wrap them inside of a box and call this hero content so that we can lay them out and treat them together maybe animate them together this card element that you can see multiple times here there's a div that wraps it so that we can Define that it has this glass background and round corners uh and then we have a wrapper that wraps all of these cards together to manage how they are stacked one next to each other and then of course this whole section this whole hero section is also wrapped inside of a box because this section has this background image maybe the next section doesn't have this background image or looks different so as you can see everything on this page is basically boxes wrapped inside boxes to manage how things look now if you think that basically I came up with this idea or weo came up with this idea not at all this is just how the web works if you go into Apple's website and you right click an element and click inspect that would basically open up the code and if you hover on top of elements you can see that we have a box for a button and another box for a button and then a box that wraps them together and then other boxes and other boxes and you can see that this box is actually a div you can see that it says div with a class of CTA call to action links so this is how the web work this is how every website that you see on the internet is structured and it's very important to analyze the design that you want to build in web flow so that you can structure it correctly and not just start throwing in elements on the page now that you've got this very important Concept in your head now we can actually go ahead and start building in web flow and the first thing that we want to do is actually before we bring in the elements let's bring the structural elements so inside of this first of all we've got this hero section so we've got a div that is a hero section and inside of it we've got three main wrappers we've got the wrapper for the products we've got the wrappers for the content and the wrappers for the navigation so that is going to be our first step in web flow let's head into web flow and in web flow through the ad panel you can see that we've got this div block that is going to be the main box that we're going to use for everything that we're doing specifically because the first div that we're going to create is a section we can drag this section it's basically just another div but it has this fancy icon here just so that we know that this is a section it's just for easier organization and through the navigation panel here you can see what we have here so we have a body which is basically the box that contains everything that's on the page and now we have box here that's called section let's add three more divs inside of this uh section you can see that it's nested inside and I can even show you that it's nested and let's copy and paste this three times so now we've got three different divs blocks inside of this section let's give them all classes so that we can later know what they are and Define how they're looking so I'm I'm going to select the section and right here from the style selector I'm going to give this a class this one I'm going to call uh section hero section hero section first div block I'm going to call this nav for navigation wrapper because it's going to wrap everything that's inside the navigation this is going to be maybe hero content that's going to hold all of the text and the last one that's going to be the product wrapper that's going to hold the three cards so now we've got the main organiz ational elements let's see now what we have next we have another actual wrapper nav buttons wrapper so let's add that inside of this nav wrapper uh let's add another div inside the first one let's see that it's actually inside yep it is inside and let's call this nav buttons buttons wrapper now we have all of the wrappers set up and we can start actually adding the actual elements like the links here the logo and the text so let's go ahead and do that inside of the nav buttons wrapper let's go to the ad panel and now you can see here from the typography we've got a bunch of stuff here so let's start with a link text link and drag that inside here and you can see on the right panel that it shows me where it's going to be added right link inside the link wrapper and I can copy and paste that we've got one two three four links so let me copy that one two 3 four links now as you can see it doesn't look very good right now but we didn't get to styling yet so let's just make sure that we've got the content inside so that's ski snowboard limited editions and about let's double click these links to edit this ski snowboard limited edition and then about Okay so we've got the navigation actually we also need the logo now I've we've got the assets panel here and I've already went ahead and upload the assets for this project if you want download the assets below this video I'm going to drag the logo and drag it in here and let me just see that I've dragged it to the right place no I've dragged it as you can see inside the nav button wrapper and that's not what we want so I'm going to drag it outside so these two elements are nested inside the nav wrapper and let's actually add a class here let's call this logo we can't see it CU it's white on white but that'll be visible soon enough next in this hero content we've got a heading and then we've got a paragraph and then we've got a button so again from the ad panel we've got a heading now a heading basically means that it's very important to choose a heading and not just a text and make it big because a heading basically tells Google that this is the subject or this isn't important it tells us what's in here right and we've got a few different headings one is the most important six is the least important so this was going to be heading number one it's the most important and as you can see it has some default styling it is is bigger it does look like a heading I'm going to copy the text that we've got here speed on fog off and I'm going to add another paragraph below this let's copy the text from here and what else we have a button that says shop now from the ad panel we also have a button so let's add that right here double click shop now Okay so we've got the content lastly we've got this card now we also need a wrapper for each one of these cards so let's to this product wrapper let's add another div and let's give this a class of card or maybe card wrapper no card let's just call this card and inside of this card we're going to have an image and then a text element and then this button so let's go ahead to the assets panel let's drag one of the images uh let's hit the high DPI image which means this was uploaded in a high resolution so it looks good on high resolution screens then let's drag in some text element and let's copy the text here this one and even also the price inside of the same text element we can paste that here and now here we have a button but that's not a regular button like the one that we have here this is a button with an icon now I've uploaded the icon I've got it here but I need this to be a button a linkable I so from the ads panel we do have under the basic a link block which is basically just a normal div but that's linkable that's actually a button so I'm going to drag that here and this is just an empty an empty box that we can link somewhere right now I'm just going to inside of this link block I'm going to drag my arrow and from the navigation you can now see that we've got a text uh link block that has the icon inside of it okay basically this card we can copy that three times and later we're going to change the images but we've got three cards now okay at this point although it looks very very ugly we've got all the content that we need right now and now we can get into The Styling okay so for some of these things we gave classes like hero content which means we can go ahead and style them but some classes are basically native right so we've got things like the body and that's the first thing that we want to start styling because the body the way that classes and styling works on the web that when we make a choice for an element that has stuff nested inside of it the choices made on the parent element are going to be reflected with everything that's inside so for example for this body I don't even have to create a class for it I can just click it and you will see that there's a native HTML tag here body that's affecting all pages and it's great to edit this because I won't have to edit the the class of the body on every page on the website so I'm going to click that now the choices that I'm going to make here choices like I can scroll here and change for example the background color uh let's pick some Bluey color that's nice and if I CH change the font for example I'm going to change it from aiel to monster and you can see as I'm scrolling through the font all of the fonts throughout the page are going to change to the new font that I chose because everything that's nested in inside the body is inheriting the font choice and the background choice that I've set for the body Okay so we've styled the body let's move into styling the hero section so this hero section has two things that we need to Define number one it has this background image of this person and the second thing is the spacing between the elements that are inside the Box inside the hero section and the edges of the Box we call this inner spacing padding and so we're going to Define that everything has a little bit of space from the edges of hero section so let's head back make sure that we selected hero section and first of all we're going to scroll down and find backgrounds and add an image and I'm going to choose an image I'm going to choose this image that we have here now I've selected it but I can't really see it in here and that's because the image is pretty big so under the size I'm going to set it from Custom to cover now basically cover what cover means is that it's just going to fit the image into the size of its of its div block and this looks pretty good I can actually even go into the position and make sure that it's centered and that looks pretty good okay the second thing I'm going to scroll up here and I'm going to have this spacing and you can see that we have spacing inside of the box that is called padding and we also have spacing outside of the box that is called margin now in this case I want to add some spacing from the top and from the left and from the bottom and from the right side now I can also hit option and shift while I'm dragging it's going to add spacing equal spacing from both sides I think in this case 40 is going to be enough and you can see this green dashed lines that basically tells us how things are spaced out okay so here section looking good let's go and start looking at the navigation that we've got here okay so this nav wrapper let's take a look at that the first thing that we have here is here you can see that we've got the logo taken up the whole space and then we've got the links taken up the whole space and what we want is we want the logo on the left side and the links on the right side so how do we do that well if I'm going to go ahead and select the nav wrapper and I see that it has two elements the logo and the nav button wrappers right now if I'm going to head into the layout you can see that they're displayed as block and block basically means that elements take up the whole Space now if we change that to flex that's going to give us way more options and if you're familiar with figma and auto layout this might look familiar now it's basically setting them up one after another horizontally instead of vertically and they're aligned to the left so now you can see they're one next to each other but instead of aligning them to the left you can see I can change here align center right and I can also have space between which means basically that the right side is going to be aligned to the left and the left right side is going to be align to the right and the left to the left there's enough equal spacing between them and that's exact what we want so this is actually great that's all we had to do here with this nav wrapper and the next thing that we want to do is take a look at the hero right at the nav buttons wrapper this also defines the spacing between these links and that they have this kind of like a glass effect so let's see how we're going to do that let's select the nav buttons wrapper and let's go down and select the background white background and when I'm going to do that you're going to see the problem immediately and there is no space between the edges remember we call this space padding let's add the same way by holding option and shift a little bit of padding something like 20 uh between the edges of the wrapper and the elements inside so that is great uh next I want to space these elements a little bit and if I'm going to change the display layout to flex again uh Flex is super super powerful so you can see that we've got a gap and that's basically the space spacing between the elements that are stacked in this case horizontally and if I'm going to add something like 30 maybe even 40 I think that looks pretty good right now so now the elements are spaced out now we want it to have round corners for this so let's scroll down here and Below we've got border and radius and I can turn that up Crank that up the top here is 20 and you see that's not enough so actually I'm going to write down like maybe 200 pixels I'm just going to manually write that and that gives it a full round corners so that looks good let's take care of the glass effect so right now it's a full white color as you can see but I can actually bring that down this is the opacity let's bring down the opacity to something like 70 now you can see that we've got transparency introduced here so that is great and if I'm going to scroll down here into the effects we've got backdrop filter which means filters that affect the background so if I'm going to click here by default it's blue blur and you can see blur five pixels and that actually gives us this glass effect so this looks pretty good actually you know what I think that we need a little bit more spacing on the left and the right so I'm just going to hold option to just from left and right without affecting the top and bottom add a little bit more padding here and I think this looks better this way okay so we've got the nav wrapper now we need to Define how the actual links look like right so they are uppercase they have a different color here um let's see what color they are so I'm going to select this and you can see that they have this dark color so let me copy this color because we're going to need to use this let's see this is monserat regular 18 and uppercase so let's go here and you can see that this is a link now as I've said links kind of like the H1 uh have their own HTML tag but I do not in this case I do not want to affect all the links on the website because this is a particular link this is a navigation link right right so let's give this a class let's call this nav link and now we can start styling it right we can scroll down typography maybe increase this to 18 um we've got text decoration underline I don't need the underline so I'm going to remove that I can open up the more type options and set the capitalization to all caps this looks good and I can change the color here let's paste here the color the blue color that we've had here and now this looks good it's actually not normal it should be probably medium okay so that's good now when it comes down to the collar I want to show you something you see this rectangle uh purple icon here these are variables now because I'm going to reuse this color throughout the website I want to make sure it's consistent and it's easier for me to choose so I'm going to add a new variable uh for this color and let's call it dark blue later on I'm going to want to reuse that color for the heading here so it's good to create a variable from it now you can see that this looks great now now but the effect is not applied here The Styling is not applied and that's because we didn't apply the navlink class to these so let's click here nav and you'll see it's already suggesting the nav link and I can go ahead and very quickly reapply these now the beautiful thing about using these classes is that if I I want to make some change to this class let's say uh 18 pixels is too big let's decrease this to 16 you can see that all the elements we share this class immediately resize and that makes designing much more effective Okay so we've got the navigation done it's time to take a look at the text here so we've got this big heading here 132 monster up medium let's go ahead here and in this case I'm selecting The Heading now I can add a class but I can also edit the tag for all H1 throughout the website and that's a good idea because we probably have other pages that are going to use this H1 class so I'm selecting that in color I can go ahead and pick my dark blue color that's easy at this point monster bold actually want this to be maybe semi bold and make this really big like 130 maybe 120 and the line height is should be way bigger here so let's just increase this okay this looks better now paragraph I think is okay but you can also see that it's taken up the whole screen now one thing that we have here here we wrapped these things in a div so that we this hero content so that we can Define its size and in this case we don't want this to take up the whole Space we want this to be you know limited so that the text doesn't go on the top of the person that we have here so let's actually go ahead and choose the hero content uh wrapper that we have here and head back into the size and let's do something like maximum width of I don't know maybe 6 50 pixels that's great now you can see that the this area of content is limited to a maximum of 650 pixels and that makes the texture break nicer and doesn't go on top of his face we can probably also want to give a little bit more spacing as you can see there is more space here from the top so let's go ahead and add a little bit of margin for hero content uh I think that looks nicer okay so now that we've got this let's style the button this one we can actually call this button and what do we need to do here basically need to give this very strong pinkish color so let's copy that uppercase font and round corners so let's see how we're going to do this uh most of it we've already done right I can go into background color and paste this pink also probably want to re add a variable here and call this pink cuz we we will be using using this pink again go down into Corner radius and add something ridiculous like 200 to make this round Corner uh make the text all caps we've done that from the typography capitalize so that looks good and I do feel like to make this button a little bit bigger like it is here it does need a little bit more padding between the edges of the top and you can see here and the left left and right okay I think this is nicer okay this is good and also now we've got I see that this whole hero content here probably needs bottom padding as well because otherwise we'll have these cards sticking without spacing from the bottom okay so if the content looking good now let's handle these card elements so how do these card elements look like right these cards basically round corners with this glassy effect and a little bit of petting so that the image does not touch the edges okay let's do that we've already created this glass effect here shouldn't be difficult so let's pick the card let's oh also these cards are currently you know taken up the whole space as a block element but maybe we want this each card to be we can see here that the size is 345 so let's start by defining that the card has the width of 345 pixels okay that's okay now let's see let's go into the background and pick a white background 70% opacity kind of like we did in the navigation round corners this time I think it's needs round corners of maybe maybe 20 pixels sounds about right we can check in figma but I think that is okay A little bit of padding so from all sides so a little bit of padding okay that looks good and the glassy effect was right here at the bottom backdrop effect blur 5 pixels that's okay okay so the card is okay but as you can see the cards are stacked one on top of the other they're not stacked one next to another so we already seeing how we can rearrange elements inside of a wrapper I'm going to choose their wrapper products wrapper and I'm going to change the layout to flexbox because that allows us to define the direction right so now they're stacked left to right instead of top to bottom so this is this actually looks not very bad we only want a little bit of spacing between these cards so this looks pretty good okay so this layout looks pretty good let's go ahead and edit how the image looks like so you can see that the image also has round corners so image let's call this card image and go ahead it's probably going to be less than 20 if the top is 20 20 this is going to need to be a little bit less because it's inside of the round corners I think 17 looks good okay so the image is okay now we've got these two elements okay so these two elements I also want to align them left and right remember we already did that right here in the navigation so maybe a good idea is going to be to wrap them inside of a div so that we can turn that into a flex that aligns them left and right so let's see how we're going to do that current the card has the image and then text block and a link block let's wrap them inside of a div there's actually this is such a common thing in webflow that you can actually do this by right clicking on the element and you can see wrap in div block and even further you can do you can St uh wrap them in a horizontal Flex which is what we want right we want this div to already be set to a horizontal Flex to put them one next to each other instead of one on top of the other so I'm going to set wrap them in in horizontal Flex that being said only the text block has been wrapped in this Flex block so let's bring in the icon as well sorry bring in the link inside and now you can see they are stacked one next to each other let's actually give a class to this Flex box so that we can let's call this card info wrapper and you can see it's already set to flex but what we want to do is change the alignment to space between kind of like we did at the nav vation so now we've got the text in here I can go ahead and double click and make this text Bolder if I want and we've got the icon here and probably also for this card infow wrapper we're going to give it a little bit of a top margin and maybe even a little bit of padding from left and right so the text have a little bit of spacing from the edge of the card and the image now the last thing for us to do is to edit how this icon looks like so we've got this image inside of a link block so this link block let's go ahead and give this a background of the Pink So from the backgrounds we can pull in the pink and you can see that okay we need a little bit of padding between the edges of the link block and oh note what happened which is very important I started styling this without giving the link block a class name and so we Flow by default just created the name for this link block this is not a good practice so later on I'm not going to know what this link block is so let me go ahead and re name this I'm going to call this Arrow icon uh Arrow icon button maybe button and now I know what this is so now I'm going to add a little bit padding okay so now you can see how this looks like when there's spacing between the edges of the wrapper and the icon itself and let's make this round by going down and giving this 200 pixels of round corners now you can see the problem here is this it doesn't look super aligned I actually want to reduce the top pading a little bit just so that it visually looks like Yeah The Arrow is centered I think this looks much better okay so now this card looks good these cards don't have the same structure right so what I'm going to do is let's go ahead and delete these two other cards and just copy and paste this first card that we've got here and paste it paste it and now double click on the image replace this image here with another image and double click this to replace this with another image and of course we can go ahead and replace the text and everything else that we need to do but with that we are done designing our hero section of this website now of course there's still much to do we still need to make sure that this website is responsive and we need to add some interactions but I feel like we've covered enough for this video now if you want to dive deeper and become a webflow pro check out our full course in the link below this video the webflow master class that will take you from beginner to an expert and I hope to see you with us I'll see you in the next video

Channel: Flux Academy

Views: 55,913

Keywords:

Id: RXdH2H01P88

Length: 28min 4sec (1684 seconds)

Published: Tue May 21 2024