Webflow for Beginners 2021 (Crash Course)

[Music] what's up youtube welcome back to the channel for webflow pros in today's video we're actually going to do a crash course for beginners that's been requested for a while now if you've never built a webflow site before follow along with me to build your first responsive landing page step by step this isn't a replacement for all webflow university has to offer but i'll try to get you started quickly while learning some best practices i wish i knew when starting out check the links in the description for any assets you need and let's dive right in all websites are made up of a series of boxes within boxes this is commonly referred to as the box model at the basic level we have sections which group together related content on our page here we often apply background colors images or anything that should cover the full width of the page inside each section we add containers these keep our content centered on the site and from getting too wide inside each container we add more boxes called div blocks which group together related content alright let's go ahead and get started inside your webflow account hit the new project button we're going to create a blank site and let's title this one lander and hit create project now this is the designer view we're going to come back to this view in just a minute but for now hit this webflow icon at the top we'll add in all the fonts we need so we'll go to project settings and we'll head over to the fonts tab and this is a list of google fonts let's go ahead and type f and pull up this fall coin font and we'll apply the regular 500 and 600 weight and hit add font and let's also pull up a font called dm sans and here we're going to apply regular and 700 weight and hit add and then let's go back to the designer view so in the designer view we're starting with an empty page let's start by adding a couple elements we'll probably need one to the page so we'll hit this plus sign to add elements panel and drag a heading onto the page this is kind of our h1 heading it's what search engines read is the most important we'll drag another heading onto the page and set it to h2 we'll drag one more heading and set this one to h6 under that let's go ahead and drag some paragraph text let's drag in a button onto the page and let's also drag a text link onto the page these are the main elements we'll probably need to style um and then let's open up this navigator panel so this is where we can see all the elements inside our page we're going to click this pin the navigator icon to leave this always in view our next step is to style some of these elements so a lot of these text elements can actually be affected from the body element itself so if we select the body we can head over to the style panel which is where we can affect the look of the elements on our page we'll hit the blue plus sign and go to the body all pages tag so we're affecting every page across our entire website and here if we change the typography you'll notice that all the fonts inside are changing the typeface as well so we'll select our main font called dm sans and then also if we change the color the font colors are changing unless the colors being overridden on a particular element in this case we'll apply our main font color which is 15 15 15 and hit enter and then we can save this as a swatch by hitting the plus sign and then we'll hit create so we can reuse this watch later we'll also apply a background color to our body this is our main background color and we're going to apply f6 f6 f6 and hit enter and hit the plus sign and then hit create and now we can style our individual elements so we'll go ahead and select the button and we'll give it a font size of 12 pixels a font weight of bold we'll open up the more type options and do all capital letters we'll also do letter spacing of 2 pixels and what you'll notice is it automatically created a class for us which is saving all these styles so we can reuse these styles later on other elements we'll go ahead and apply a border radius of 200 pixels we'll apply a one pixel border and for the color we'll select our dark swatch that we already created and we'll set the background color to transparent and we also need to apply a font color of our dark color here and then we can even add some padding which right here we can type 32 pixels padding is the space inside the container so if i add 32 pixels from the other side you'll notice now the left and the right both have that padding for the top we'll just leave it at 9 pixels and the bottom would be 9 pixels as well so padding can be controlled here it's the space inside the container margin is the space outside the container so if i drag right here you'll notice that the space between this button and the next element are being increased that's the margin we'll leave this set to zero for now we can even reuse these classes so if i drag another button element onto the page if i give it that class a button now both of these have the same styles applied and any change i make to one affects the other but i could give this a combo class by typing right behind this main class let's go ahead and create one called dark and what we're going to do here is change the font color to the light color and we'll change the background color here to our dark color and then now any changes we make to this one won't necessarily affect the first one they're overriding the styles of the first one but any changes we make to the first one will affect the second one let's go ahead and style all our text elements next so instead of creating a class for each one of these and having to apply that class every time we add the element to the page we're going to hit the blue plus sign and hit all h1 headings now we're styling every h1 heading that we add to the page from here on out we're going to give it a top margin of 0 pixels and we'll apply a bottom margin of 60 pixels let's also give it a font size of 105 pixels now right now the line height is set to 44 pixels this means if we add another line to this heading they're likely going to collide into each other what we could do is increase the line height so that way we're spacing these apart but if we ever reduce the font size on other break points we'll have to adjust the line height again so i'm going to leave this set to 105 but instead of a pixel line height here i'll click on the letters px and change this to the dash this is a unitless line height so now if i set one or 1.2 the line height will lock in place no matter what the font size is and that's what we want so we'll leave the font size set to 105 and the line height set to 1. let's go ahead and apply our heading font and we're going to select the normal weight and we'll do a negative 5 pixel letter spacing to bring it closer together now we'll select the h2 and go to the all h2 tags and here we'll go ahead and give a top margin of 0 pixels and a bottom margin of 48 pixels we'll go ahead and select our heading font as well this time it's going to be the medium weight and we'll select a font size of 40 pixels and set the line height to 1.2 next let's go ahead and select our h6 go to the all h6 tag and then here we'll apply a font size of 22 pixels and for our unitless line height we're going to go ahead and set it to 1.2 let's go ahead and select our heading font and we'll do a font weight of semi-bold this time we'll do a top margin of zero and we'll leave the bottom margin set to 10 pixels let's select the paragraph text and go over to the all paragraphs tag here we're going to apply 16 pixels and then for the line height we're going to set it to 1.6 we'll set the bottom margin to zero finally let's go ahead and select the link and head over to the all links tag by default the links are blue but let's go ahead and select their font color to be black and then we'll set their text decoration for the underline to none to remove that underline now that we have all our elements styled we can go ahead and build out our page so i'm going to select our element and hit the delete key and we'll just delete all our elements off the page and we're going to drag a new element onto the page and this is going to be a section and we're going to give it the class section and inside of that we're going to go ahead and drag a container and let's give this the class of container and under max width we're going to set 1920 pixels to be the maximum width that this container could possibly get we'll also give it some left and right padding of 40 pixels and we'll give it the top padding of 120 pixels to create some space inside this container now in the container we'll drag our heading and this will be an h1 and then underneath that heading we're going to drag a link block because we need a clickable element and these are just like div blocks but they're clickable and then what we can do is give this the class we'll call it hero link so i'm going to name all my classes with lowercase letters and with a dash instead of a space and then we're calling this hero link because it's inside of our hero section so we can go ahead and select our overall container and give it a combo class of hero so for this container specifically we're going to give it a bottom pattern of 0 pixels and a top padding of 190 pixels with the hero link selected let's go ahead and give it a width of 100 pixels a height of 100 pixels we'll scroll down under border and give it a one pixel border of our black color and then we need to round it off so we'll give it a radius of 200 pixels and then we want to center align everything inside this container so we'll select the container itself and we'll apply a text align of center to center this up then we need to upload our images and assets so we'll head over to this assets panel hit the upload icon you can download all these assets from the description in this video there's a link we'll just upload all these and then we'll go ahead and drag in the arrow and we'll give it the class of hero arrow and let's give it a width of 26 pixels now we want to center align this arrow from top to bottom so there's a couple ways we can center things from the parent element so with the hero link selected what we can do is apply flexbox which is a layout setting and we can align this to the center from top to bottom and justify to the center from left to right so now this arrow is perfectly centered inside the parent we could change the alignment at any point or the justification at any point here but by applying flexbox now this is no longer respecting the parents text-to-line center so if we still want to center this hero link all we have to do is click this margin auto the center button right here it's going to apply margin auto to the left and right and center this element up inside so underneath that hero link we'll go ahead and drag in our hero image right here and we'll give that the class of hero image now so far we've been selecting pixel lifts for everything so if i were to set this to 300 pixels for instance the width of this isn't changing when i resize the browser width but we want this to span the full width of all the available space so we'll give it a width of a hundred percent and just type the percent icon and now when we drag the browser in and out what you'll notice is the width of this image is changing and by default since we didn't apply the height the height of this image is just scaling down as well but we could set a fixed height here if we want if i set 200 pixels for the height the image gets really squished but we can change its fit to cover so it just fills up the available space instead of stretching or squishing the image i'll go ahead and apply a fixed height on this image of 600 pixels instead and now when we drag in and out the height stays the same but the width is changing to get this hero link to overlap the image we need to use negative margin on it to push it down since the link is hundred pixels tall we can give it a negative margin of negative 50 pixels to put it directly in the center of the image and we want the link to stack on top of the image and by changing the order over here in the navigator we're just changing which one comes first not necessarily which one is on top so to make this one stack on top we need to change its position from static to relative and give it a z index the index is kind of like your layer order in photoshop whichever one's higher or above um so if i give this a z index of one because the image is zero then this will stack on top if i gave it a z index of negative one now it would be behind the image so we'll just leave it at a z index of one and we'll give this the background color of our white color right there and let's also quickly replace the text in our hero so if you copy the text from the cloneable project in the description of this video you can just paste it in here and that wraps up our hero section so i'm going to go ahead and collapse this section and we'll go ahead and drag another section right underneath it and give this one the class of section as well and inside of that we'll drag a container and let's go ahead and give this the class of container and inside that container let's go ahead and drag a bit of paragraph text now this is going to be our dark section so we can select the section itself and give it a combo class of dark since this is where we want to apply our background color of dark and we'll also apply a text color of white so any text inside this section will automatically be white we also want this image to overlap the container underneath so we can select this container and give it a combo class of testimonial since this will be our testimonial section and then let's go ahead and give it a negative margin of negative 210 and then we'll just add 210 by typing a plus sign and then 210 to our top padding so that way this paragraph text isn't overlapping our image now to get three testimonials stacking side by side we're going to need to apply a grid to have these stacked side by side so we'll drag a div block into our container and let's give this a class of grid 3 and then we'll drag our paragraph text inside and then with the grid 3 select selected will apply a display setting of grid now here we can affect the gap of the columns that's how much space in between our columns we'll set that to 20 and we can also affect the gap of our rows how much space in between our rows we'll set that to 80 for when our rows stack on mobile for now we'll add one more column since this will be a three column layout and we'll delete this last row since we don't need it right now then i'll click outside of this area to escape my grid and then we need to add in our quotation marks so i'll go ahead and drag this image into the grid and i'll give this the class of quote let's give it a width of 30 pixels and a bottom margin of 32 pixels now right now this quote and the text is in two separate grids and if i were to copy this quote and add another one to the grid you'll notice that it's not staying in there either these by default are just going to keep wrapping into new grid items but we need to group them together in one grid so we can actually just drag a div block inside our grid and we'll give this a class of grid 3 dash item and then we're going to use this to group together the quote and the paragraph text so we'll just drag both of them inside there i'm going to go ahead and copy the text of this paragraph quote i'm going to paste it into my design and we also don't want this to span the full width of the entire grid item so i'm going to give it a class of 90 and we'll go ahead and set its width to 90 percent so that way it just leaves a bit of space um inside this grid item now we can go ahead and duplicate the grid item and right click one more time and hit duplicate to make three and let's change out the text now we'll go ahead and collapse this section and we'll drag another section underneath give it the same class of section and then drag a container inside of that give it the class of container and inside this container we're going to have a two column grid so we'll drag another div block in and we'll give this the class of grid two we'll go ahead and apply grid to it and we'll give it the gap of 20 and then for the rows we'll give it a gap of 60 and then we'll delete the second row for now and let's close it we'll drag a div inside of our grid and we'll give it the class of grid two dash item and then we'll go ahead and duplicate that item to have two of them inside the first grid item let's go ahead and drag an image we'll give it the class of grid two image and we'll go ahead and set a width of a hundred percent a height of 420 pixels and a fit of cover inside our second grid two item we're actually going to drag in this logo and we'll give it the class of grid 2 dash logo and let's give it a width of 100 pixels a bottom margin of 26 pixels and let's lower the opacity to 50 percent underneath we'll drag in a heading and we'll set this to be our h2 we'll paste in the text and underneath that we'll go ahead and drag a button element and give it the class we already created a button we'll change out the text and now let's apply text align center to this and we also want to center this from top to bottom so just like we did before we'll apply flexbox and instead of having these stacks side by side we'll switch it to vertical so they stack one underneath the other we'll set the line to center and the justify to center now let's drag in our next section so we'll collapse this one we'll go ahead and add our next section to the page give it the class of section go ahead and drag a container inside of it and give that the class of container inside this container we need another three column layout instead of rebuilding a new one we'll just drag in a div and use the same classes we created before so this div goes inside our container we're giving it the class of grid 3 and it's going to be the parent element and inside that we'll drag another div and we'll give this one the class of grid 3 item and inside that grid 3 item we'll go ahead and drag in an image and we'll give this one the class of products image and we'll go ahead and give it a width of a hundred percent and a bottom margin of 40 pixels underneath that image we're going to go ahead and drag in a heading element and we'll set this one to h6 we'll paste in our text and we'll drag in some paragraph text underneath that and let's give this the class we already created called 90 let's paste in our text and then we can select the entire grid item and right click and duplicate to make two more of them let's go ahead and hit the setting gear and change out the images and let's paste in our new text in this case both of our containers have the same background color with equal amount of padding on the top which is creating a larger gap than usual to reduce that space all we have to do is add a combo class of products to this one and give it a top padding of zero now things are looking consistent lastly we just need to create our footer section so hit the collapse all for all of our sections and drag in one more section one to the page and go ahead and drag in a container inside that section we give the section a class of section the container a class of container and then we'll add a div inside that container for our footer line give it the class of footer line and let's give it a width of a hundred percent and we'll give it a height of one pixel and we'll give it a background color of our dark color and then underneath that we'll go ahead and drag in some paragraph text and change out the text now we need some clickable social media links on the other side so we're going to drag in a link block in here and we'll give this the class of link inside that we'll go ahead and drag some paragraph text and give it the class of link text and change out the text let's add a little bit of padding inside this link to increase the clickable area we'll add 18 pixels padding on either side and we'll right click and duplicate the link and change out the text again and create one more copy now we need to group these all together so we can anchor them to the right side of the page so we'll drag in a div and we'll give this the class of footer links and we'll drag each of our links inside this div we'll drag in one more div and it's going to go above the paragraph and we'll give this the class of footer flex we're going to drag the paragraph inside of there and we'll also drag our footer links div inside and then we'll apply flexbox to center align the text but justify them to space between this option right here that's going to put the paragraph text on one side and the links on the other side we'll also give this last link a combo class of last that zeros out this padding here so that way it's perfectly aligned with the top line we'll also apply a top padding of 40 pixels and a bottom padding of 40 pixels to our footer flex and because this container has a lot of space that we don't need in the footer we're going to give it a combo class of footer and add top and bottom paddings of zero pixels to zero out that space now let's go ahead and create our nav bar we'll scroll down to the bottom and drag a nav bar in to the top of our page let's give this a class of section with a combo class of nav and then we'll use that combo class to set the background color to our white color instead of the gray inside the nav bar we have a container which will give the class of container let's apply a combo class of nav to this one as well and let's reduce the padding to 30 pixels on the top and bottom inside the container we have a link block that will give the class of logo and then we can drag our logo image inside of that let's give this the class of logo image and let's give it a width of 150 pixels we also have our nav menu that's going to hold our links we can go ahead and give this a class of menu and instead of restyling each one of the menu links we can go ahead and just copy this link that we have down in the footer and we'll go ahead and delete these out of the menu and paste the one from our footer and then we'll just create a couple copies of it and let's change out the text and let's give this last one the combo class of last we want our nav section to stay with us while we scroll down the page so we can go ahead and change its position to fixed and anchor it to cover the full top of the page and then we also will give it a z index which is kind of like our layer order of a thousand to make sure it's all the way at the top and it's above everything else now when we scroll up and down we'll notice the nav is staying with us lastly we just need to make everything responsive so far everything we've done has been pretty responsive in fact if we look at this on a 3000 pixel wide screen we'll notice that our container has a max width that's stopping everything from getting too large and all our content is nicely centered in the middle of the screen next we can head over to the tablet breakpoint by clicking the tablet icon any style changes we make here will carry down to the lower breakpoints but won't affect what we've done on the larger breakpoint we'll start by reducing the font size so we'll select the h1 font size and we'll just uh reduce this font size maybe just something like 70 pixels now when we scale in and out that's looking good we may also reduce the height of this hero image to maybe 500 pixels to make it a bit shorter when we scroll down these are still looking good for our three column and our two column even is still looking good here and then these three columns are looking great as well our full width menu has been collapsed inside this hamburger icon so we can go ahead and maybe give this some padding on all sides something like 5 pixels should be good we're reducing the padding a little bit and if we head over to this settings tab and hit open menu we can see what our menu is looking like so we can select this menu class we already created and maybe give it some side padding of 20 pixels 20 pixels and top and bottom padding maybe it could be something like 50 pixels and then also we can style how this looks whenever it's open so for instance i may give this a background color of dark and i may give it a border radius of like 100 pixels to round it off and that's looking good there we may also select our main containers class that we have here and reduce the padding on all our containers across the whole site to 20 pixels and that's just going to give us a little bit more space inside here and maybe we'll even reduce the top padding to something like 90 and the bottom padding to 90 as well to basically tighten this up a little i'm going to select the hamburger icon and close the menu and then we can head on down to the next break point so here everything is still looking pretty good these are getting a little bit tight so we may want to reduce this three column grid to two column grid so in the style tab we can edit our grid and we can delete one of our columns and when we do that this will stack now the third column there and because we made that change to this class it's affecting these as well in this section here we'll probably want to change our footer links to be a hundred percent the width of the parent which means we can grab the footer flex and just basically switch this to vertical so they stack one underneath the other we want the copyright to be underneath the footer links now if we drag the order here it'll affect the order on desktop but if we just click this switch order or reverse switch now that's going to switch the order for us without affecting the desktop view we can also click on this footer links container here and add a bit of padding and maybe even center align the text inside that container while we're at it let's uh check out how the mobile links are looking looks like we can add this padding of 18 pixels back in to our last item here to make sure it's perfectly centered and we'll close our menu again our two column grid is looking a little bit tight here so we'll select our main grid and we'll go ahead and edit our grid and delete one of our columns and now this content stacks underneath each other let's go ahead and tackle our last break point we'll select the h1 heading and i'll probably reduce the font size a bit again maybe something like 50 pixels and even lessen the letter spacing a bit and that's looking good there i may go ahead and reduce the height of this yet again maybe 400 pixels and then here this is getting a little too tight we'll probably switch it to one column so we'll edit our grid and delete one of the columns from here and now these are full width and that's looking great here i may reduce the height of this image a little bit here and that's looking good i may reduce the font size on this h2 heading a little bit maybe we'll drop it down to something like 30 pixels all this is looking good and here we'll probably just stack our links so we'll select the uh main link class and give it a width of a hundred percent so they all stack one underneath each other we may even add a little bit of padding on the top and bottom and that looks great there so we have our fully responsive site it looks good on every breakpoint and that's all set fully responsive all our content is stacking and good to go if you've enjoyed this tutorial please consider hitting that subscribe button below so you never miss out on another video i'll catch you in the next one goodbye

Channel: Timothy Ricks

Views: 13,336

Keywords: webflow, how to, tutorial, lesson, advanced, pro, course, building, design, development, interactions, animations, css, javascript, code, custom code, wizard, awards, interactive

Id: KM-FGwy02KU

Length: 27min 42sec (1662 seconds)

Published: Thu Jul 01 2021