Webflow Crash Course - Responsive Web Design without Code?

today you're going to create this fully responsive and interactive design without any code before we begin to win to mention this video sponsor Skillshare comm which is an online learning community for creators with over 25,000 classes in design business and more so whether you want to feel your curiosity your creativity or even your career skills share is the perfect place to do just that for instance you're about to watch my web flow course but you could watch more web flow courses here at skill share you'll share is also super affordable with an annual subscription of being less than ten bucks a month but if you're one of the first 500 people to click on the link here in the description in YouTube then you get the first two months 100% free so join up everyone what's up Gary Simon of course said show com so today we're gonna be taking for the first time a look at something called web flow and it's been around for quite a while but basically it's an editor that allows you to build out responsive web pages without touching any code as I mentioned at the beginning of this video so this is a look at the project we're going to be doing we're gonna be creating from scratch and as you can see there's you know this is interface there's a lot happening here so I'm going to do my very best describing exactly how we can get up and running so of course you can get up and running you can create a a free account on there although there will be limitations but you can definitely use my link here in the description and go ahead and sign up if you really like it for people who don't who aren't 100% familiar with HTML and CSS and writing it and don't want to spend the time writing and learning it then this is a really great solution to create modern responsive websites that have interactions and page animations based on scrolling and all sorts of really cool things all right so let's go ahead and get started all right so after you have created your account let's go here to new project and you could choose from templates that they have here very handy I'm probably also suggest is just checking this out just to see if there's any interactions or anything like that although some of these are not free these ones are just to see how you know they do certain things but we're going to start with completely blank so again here he's amazing project I always have something different to say all right so really quickly let me reset this all right for the interface I'm not going to go over everything just the absolute basics but over here you have your your ability to add your you know your different elements here you click on it you're gonna have all this stuff that you can use I wish there was a kind of like a search like a quick search thing but no big deal over here you have pages because obviously a page has multiple or a site has multiple pages but we're not going to really be touching that we're gonna be really sticking with in this section there's also ecommerce or CMS and e-commerce right here also your assets can be found here like your images and then also settings which were not I mean going to touch then also up here you have your different viewports so you have desktop yeah of a tablet you have mobile landscape and then down to the very smallest you have mobile portrait we will be working with this as well so also up here we have your edit and reduce you also have let's get this out of here I don't want to try now all right and we also have right here this just selects you know I if you're just changes that you've made haven't been saved yet over here could export code so if of course you you have to have I if you want to upgrade your plan to export your site I mean you're gonna have to upgrade your plan rather but still you see all your HTML here CSS and JavaScript also we have the ability to publish which is pretty cool so when we're working we're going to be publishing multiple times just to check it out in a live browser and then also over here depending on the elements that you have selected all right this is kind of this this tab right here is based on styling it alright so that right now what's selected is the body element cuz that's all we have I but as you can see it's all separated into different sections like the layout spacing like your margin in your padding size position typography all this good stuff which we will be messing with also this here is a Settings section so each element has different settings depending on which element you've chosen over here is this kind of like a layers in a sense and so when you start having child HTML elements you'll see them show up here we'll be working with this section as well there's a style manager which we'll see and I'm not really going to describe that we'll just get to that when it comes and then interactions as well which is really cool just to add I you know dynamic interactions such as like hover animations just a bunch of stuff so let's get started I we're going to create like a typical site with a typical layout just to keep things simple and we are going to add we're gonna start with a nav bar so we click on add and what we want is a nav bar element so this would be listed under components all right so they have tab components search drop-down nav bar so let's just click on that remind you you can also click and drag in place you know these different components and other things where you want to specifically but this is a pretty good nav component where it emulates you know a very typical nav bar scenario where you have your brand like your logo right here then also your different an Ave likes and all this is things that you can edit alright so the first thing we'll do is change the color let's say for our branding and our colors we want kind of like a blue so we're gonna come down here all the way to back around so as you can see you can add an image and gradient or just color we're just gonna do a color and so I'm just gonna come out around here right there I think so the hex code if you want to follow along as three zero six F no three zero six seven FC and we can also add this to our swatches I'm just gonna call it whatever it says royal blue its save now we can access this later let's put in a logo here unfortunately they don't let you put actual like a text-based link now I could be wrong but from what I saw or for instance if I come over here and I go to topography and I put in link like if you just want to type based like HTML based logo you can't do that like if you do this says link cannot be placed in the brand well okay then so we're gonna put an image in there instead so we come out here we're going to choose image I'm so I'm look like left clicking and dragging just placing that in there and now we have this big old section it's kind of like a placeholder image and now we choose image so we need to drop files here or just click upload and I have an assets folder already ready to go here so we're gonna go to desktop and here's my asset my logo for course Etro alright as you can see it's kind of big and we don't want that so let's scale it down so with it selected and by the way I'm going to link the assets here so you can follow along without having to screw around try to find a logo that'll work well so let's see here we have different options in so we have size we could also by the way you can see a little drag er which I think I've just what I'm gonna do I'm just gonna drag it hold shift basically to a size that I like that seems pretty good and so now we have an issue with alignment here it's not looking too consistent because we have this amount of padding over here and this thing's stuck up at the top and it looks rendus so if we click on this nav link right here just one of them you can see it has padding by 20 pixels at the top alright so when you hover over you can see the little diagonal lines over here that show up I so let's just try to add around 20 or so to the top and the way you do this you can just you can see when the how the the mouse changes you can drag down just to add padding I'm gonna go right to around 19 and now it looks nice and centered up right there perfectly way to go awesome next up instead of we want this to come more so given the background color the highest contrasting element we would have would be white making these links white instead of black alright so I when we come down here we'll see typography Oh also let me before I forget what's click on anywhere here in here and we'll get to the bet the body element let's change this you guess that's right to Montserrat that's the that's the font that I'm always using people know that who follow me all right so now let's click on this and we can see by default it is now applied to here did these these type based elements so if we come down here to color we'll see we can make this white now now there might be an easier way to make all links white which I could do if I was just writing CSS easily but no big deal now if we come over here if we click on this section right here our container we come down here we could choose or rather to the element settings we can add a link we can also open the menu which will switch us to the tablet view so notice it has this highlighted now we can see what this thing looks like on a mobile element which we could obviously gonna have to work with it I don't have to worry about that now though let's go back here let's click Add link so we have one link added there let's control Z to undo let's add a services link so we're gonna write after so we're at whichever link you have selected it's going to add it after that that so I don't want I want contact to be at the end which it usually is anyway so alright we're going to come back here let's add link there it goes so now we could double click into it and we'll just say services come back change the color here to white and there we go now when it comes to these links by the way you can link them to a specific URL or to an actual page if you have multiple pages which you would normally so that's how you link things up all right let's get the actual menu working so let's open the menu all right so we obviously don't want this it looks terrible so let's just make this background color if we go back to our background right here we're gonna choose our royal blue for this and leave this here we're going to leave that white the background of this we control by selecting this a turn nav menu element by the way if we come up here to the navigator we'll see how this kind of works we have for instance the body element and inside of that we have a nav bar inside of that we have a container and then our brand and then our nav links right here so it's the nav menu that has the this grey background that we want to change so I think we'll just make those white okay with that hello we now can't see the link so let's select that typography blue same thing here just keep on doing this all through down these other ones I know there's a probably much quicker way because you can in CSS and instead of doing this individually but that's fine for now so let's click on this now and we'll go back to desktop and so so now if we click on this and choose open menu again we're gonna see it where it now works so I'm gonna click on publish now I had already published this previously I meant I had to pause and and publish it just click publish to selected domains right here and it's now going to work so if we choose this little link right here it's going to show us in the browser our project so now we can simulate these different viewports by that so we just click on this we'll be able to see this much better when we have this other photograph image that we're gonna have here later but it would be nice for instance if there was some type of way to denote like if this is clicked so I in that case we can come back here let's go back to open menu and we're gonna click on a style right here for this blue background and we're gonna make it slightly darker blue kind of like that alright so we're gonna see if this works or not so I let's go back here to publish publish to selected domains click on it there we go very cool awesome stuff okay so now going back here let's add kind of like a hero section which is kind of like a big section underneath to go back to desktop and to do that we're gonna add first we're going to add a section alright so if you understand HTML you understand there's a section element and its purpose which is just to kind of divide your content into sections duh geez all right so let's left-click and drag it just right here you see it places it just underneath the nav bar which is what we want again we can come out here we'll see it's down here this section at the bottom here just inside a body so now we also want a way to make sure that it's centered if you come down here and you click on this show light guide overview you can kind of see the the the guides that they have set up so we want our content to start here because otherwise if we start putting in for instance it's like say like an h1 element like a heading element it's gonna start all the way over there we don't want that control-z to undo that if you followed so what we want is another section called a container so we place that in there and then it has this centered to where we would actually want it in a real scenario so so now we're going to I before we start adding this we're going to click back onto our section and we're going to add a background image so our background image we're going to choose that plus sign and then we're going to choose image that brings up our assets and choose upload and I'm going to choose the big broad JBG and we don't want it tiled we want cover awesome awesome stuff now it looks kind of silly now cuz it's because vertically there's not a lot happening there but what we will do is I will adjust that momentarily but first let's choose our container and let's add an h1 LM a heading element for a title first of all we want to see it so let's make it white and let's change the type we're gonna say I don't know design like a pro alright hit escape so now we need to add some padding because this is way too close to this heading element right so we're going to take this element which is the section element and we're going to adjust our padding so if you left click and hold or drag down it'll just select it'll just affect the the top but if you hold alt it'll choose for both awesome awesome stuff or it'll affect both rather talk right here what are you doing so now after this let's have like a outside of a heading let's add like a paragraph so let's use typography text block right here so you don't always have to drag it'll just automatically add things after what is currently selected where you could drag - not a big deal let's make this white alright this is some text inside of a div lock let's make that a little bit more interesting when you learn with design course you become a damned good designer alright so I think I want the size to be a little bit bigger when it comes to typography and HTML and CSS properties for sizing prefer to use and by the way this is where allows you to change the units from pixels percentage DM I don't see REM units though that's interesting let's just do that um way too big so 1.3 yeah I like 1.3 eeehm units alright that's looking pretty solid alright so I by the way you can see there's uneven amount of white space or margin or padding from the top of design like a pro the heading element versus down here that's because h1 elements by default have margin that's applied to them Wow 12 app updates available I created cloud I have to update that let's see we're gonna take this one and I think we'll scale that down all the way to zero not negative you can of course go negative now I kind of wanted to select this and hold all in increase it a little bit here on desktop alright that's looking good I don't know about you that looks great ok let's add a call to action button underneath it though so what we'll do is select this last element come over here and come to compile let me see here on the treasure warrior is the button element this is where it'd be nice to have like a search feature I don't want to submit I just want a button oh right there I am blind all right so here's our button look it's almost the same color as our branding but it's not so let's come down here to color choose our royal blue there we go slightly different and then let's add some margin to push it away no not padding there we go margin I want my button have rounded corners so we come down here and we find borders there we go so just increase this perfect I don't want huge rounded so it's only four pixels I want this to be a bit bigger for the text so very simple we will come over here to size again choose em we'll choose like 1.3 again and we will make it bold let's change the button text just double click and I will choose her specify rather start learning also I want a little bit more padding a little bit different padding than what they have so make it a little bit I'll hold off by the way and then alt that way it's fun that is very fun all right this looks good to me so far yeah I like that let's let C me make this a little bit more I want don't you guys see the actual image just looks stupid like you like what is this you understand what it is though if you hold alt and we can see uh there's a keyboard there there we go that was a keyboard all right so now let's see what things look like now like on a tablet I don't really like this too much is not enough white space over here let's try a phone that definitely looks horrendous so we'll be able to make adjustments to that stuff momentarily but first want to get everything working here just on desktop so the last thing that we're gonna add I it's kind of like a section down here with latest videos so we could just get away which ass adding a container right here which would just be this there's a container element right here somewhere if you can't find a certain element that you know exists because we do have a containing element right here you just click on this and we'll see we have body section or we can come down to like a child element and then we can see our container is actually right there if we add just a container we want to be able to control this whole background behind it so we're going to once again here let's just select this element and then well once again choose a section oh I don't want the section to go inside of there it just told me yeah that's not what I want anyway let's try this again we'll just take it and just drag it there there we go that's our new section and now we can give this its own background so I I want a really light gray so all yz6 YZ for the hex color code all right I let's see here so now let's have a container inside of it no not there I'm just gonna start dragging things what am i doing here we go so now the container we're gonna have like an h2 element for a heading so we drag this in there make it a h2 because this is the most important element so h2 is just gonna say latest of it Jesus latest videos there we go it's too big though so we're gonna scale that sucker down switch to M units and we'll choose one point three I think no one point five there we go now this design-wise doesn't really make sense being this close up so we'll take our container and we will add some padding here actually we don't I don't want it to be I don't want to have even padding on the bottom just the top something like that now after this we're gonna add kind of like a bunch of thumbnail based images kind of for like the latest videos or something from my channel or something this is a completely fictional project by the way so to do that we'll use the grid so if you understand CSS and you know there's different ways to layout various elements the grid is one of them and it's one of the most awesome most flexible ways and this supports it very well there's system of on web flow so we're gonna choose add grid right here so now it takes you into this very strange interface or you not clue what the hell is going on if you if you don't know what the fr is I definitely advise checking out I have a couple videos on the CSS grid itself but really it's all over here what you can modify comes over here and the other stuff is grayed out what we want to ask ourself is how many columns do we want on the desktop viewport and Rose based on you know our needs so I think on here it would be nice to have three columns so I'm going to choose add very simple I that works well with me right here I kind of only want to have just six different elements just to show so we can hit done and now if we go back to our navigate or the layers we can see really if the grid is just one element on HTML element it's a parent element there's nothing inside of it even though it's showing these dashed outlines you actually you have to actually add stuff inside of it right so I think what we'll do is I kind of want to have a card-based I lay out here for each tutorial with an image like a thumbnail and then like a title below it and I want them to be white so it's gonna be white it's gonna be sitting on this background so we could see it so let's choose I think just a div block here drag that sucker right into there then we can come back to our Styles tab and we can give it a background of white sweet next we want to add into it an image so let's choose where's my image right here let's move this and let's choose image so I have one already kind of the same thing up there called thumb there we go alright so it gives you some options here we don't want to I don't want to scale this at all i but as you can see it takes up the whole space of the element the div block that's inside of it so if we select just the div block make sure that's selected what we want to do is come out here and we're going to add a number another div element and all in you'll see why so we choose DIF block all right so now this div block right here is allowing us to have you know space where we can still see this card layout if you wanted to you could do like padding inside of this element too but I kind of want just it to be this graphic right here the photo and nothing else again some of this is subjective so with this div block we can now add like a title or a link so with it selected we're gonna choose find it already there we go there's her link so I the links not going to go anywhere but I let's double-click into this I'm just gonna give it a fictional my title learn web flow in this crash course awesome looks like garbage though we have a padding issues so let's work with that so we're gonna select a div block and we're to add some padding now if you hold shift and alt you can affect all of them all sides which is what we want there we go now we're going to select that we don't want to underline so under typography we just choose X we also want this to be bold and the color is going to be a royal blue let's also make it just slightly larger so it's a it's like on two lines so again this is one of this things iam let's change that to one point two there we go like that and there we go that works very well now I want to have five more of these so what do I do well this is where we're gonna introduce I our components so if I select let's see here our div block right here now the div block is now selected all the stuff that's inside of it along with the child elements what we can do is come over here to add symbols and this is going to let you know where all your symbols are we can right click on this and choose create symbol we'll give it a name I'm going to name it tutorial create symbol and now there we go so now if we come over I if we select our grid and then we come over here to symbols we can just drag this right here do it again we can do it more so a few more times look how cool that is now of course I know what you're probably wondering well what if you want to make an adjustment to one of them specifically you can do that as well if you right click let's let's do this one we right click we choose unlink from symbol then you can make specific changes to this element without the other ones being affected so you can change this text and all that good stuff otherwise I'm gonna back up by the way if you make a change while it is still a symbol it'll make a change to everything else so check this out just like that so any of the CSS Styles as well in the side pan over here it will affect all of them so I'm going to just go back to that alright so this is almost good we can see if we choose our section here now our container here we have 50 on the top which we really should have 50 on the bottom too so right here I was it going to type 50 now we have some padding at the bottom all right so this is looking good let's go ahead and publish this we're not done yet though published a selected Dula means we're gonna check it out look at that now for some reason if I drag all the way in it's not getting us to the the the phone viewport if you want to do that hit ctrl shift I and we just choose like a galaxy let's see here yeah galaxy s5 actually yeah here's our nav this looks bad this really looks bad so let's start working on the responsive nature of everything so I'm going to close other tabs there we go okay so now let's go ahead and focus on the responsive nature of things so we'll click on a tablet any changes you make to any of these other you know device specific tabs up here are specific just to that tab and all the ones that are smaller than it then all the other devices that are small in tonight so let me just show you what I mean this is on a tablet this actually looks pretty good I don't think we need to collapse these and a single rose or single columns just yet I I kind of want to add more white space on the left and right especially on this section so we'll we'll take the selection which is the parent container of all this stuff and we will choose to add some padding so hold alt so we're just gonna move it in by 37 pixels that's good with me we could do the same thing right here to keep things more consistent so alt but that's not working let's choose the container so we make this come in I'm kind of eyeballing this one because there was already more padding on here there we go so now if we go back we can see now it's is maintain those changes and also if we come down like here to the smallest we can still we can see it maintain those changes here as well although we're still gonna have to fix those looking at this there's not really too much else I think would need to be changed necessarily you might want to fix this issue where it says damn designer and it's on top of this white keyboard so it's kind of hard to read I think we could change the width property so if we do a width based on percentage and change this I don't know it's a fifty that could work so now if we go back here again because this is a different this is the desktop it doesn't have that element but if we switch back it goes to fifty so I think that's pretty cool like that and again you'll see this doesn't really work though on this viewport right here so I will make a changes to that as well so going back here I think I'm happy with everything so far so now I'm gonna skip mobile lamps get landscape really just because I don't want this to be too redone you're gonna understand after doing these two how to how to adjust things but a lot needs to adjust it here for this to look correct so we're gonna select their selection there's too much padding or white space on the top in the bottom that's the first thing will change so our padding alt we're gonna drag down to around here this is way too big so we're gonna change the font size right here oh this is based on pixels it's no big deal though I'll just go back to um and we'll choose 1.5 I don't know looks fine to me we'll take this maybe one point one let's make it back to a hundred percent over here alright this let's make this I button span a hundred percent to the width of the containing element so we select a button element we choose 100 and just type percent and then also Center the text make it a little bit smaller all right I think that looks pretty good right there even though we have this issue here I'm not too concerned about that just for this tutorial now the big issue is down here these should definitely be collapsed into just a single eye column so it's going to be six rows instead of just two rows and three columns if that makes sense so the grid we want to make sure we have the grid selected and we click this button to edit it and now we just get rid of all the columns with exception two one oops why am i doing I just add one and there you go it freaking works like magic click done and there you go now there's too much white space here so we'll bring that up I'm holding alt to affect both the top and bottom and really when I do that I'm kind of looking at the top here on the top of this from the top from the bottom of this container as well as here just to make sure they're pretty pretty consistent alright awesome okay so now I'm what else is there oh yeah there's too much white space on the left and right here so let's bring these back here yeah something like that looks pretty good now let's check it out let's go to publish here we're not done yet by the way we're gonna have some interactivity let's publish it all right here's normal here's our menu coming in and unfortunately I can't get me to that size yet so I can just hit ctrl shift I in there we are we're at the mobile view port we have a galaxy s5 sitting here and it works so of course we if we switch to what's a pixel - that's a phone iPad pro there's the eye the eye the tablet view and there we go very very cool let's get out of there so now what if we wanted to add some sort of eye interactivity or animation let's say for instance if somebody hovers over this button we want it to I don't know animate in some strange way right so we select the button here we're gonna come out over here to this tab to the interactions so we're going to do an element based trigger and there's also page based trigger like if a page loads or something so let's choose plus we're gonna choose a mouse hover so you can choose you know if something you can make something happen if it clicks Mouse move or over a different element it'll affect this one scroll into view while scrolling in view very cool so let's go ahead and choose hover very simple so the action on hover what do we want to happen well we have appear and disappear I don't think we want that one but we have emphasis so we could choose like pop all right so let's click preview and that's what's gonna happen if somebody hovers over with that button let's try it out so let's publish and we're gonna click that works isn't that fun oh man that's so fun normally you'd have to be spending quite a bit of time working these animations in alright so let's also make it so that maybe on paper gonna have a page trigger so let's just choose this container the container is the parent element of all this stuff here and let's say for instance when the page loads I don't know we want this stuff to scroll from opacity zero so it's hidden into a hundred percent 100 percent opacity but also we want it to kind of go from down and then kind of move up so let's select that container on page load you can also do page scrolled so there's a lot of other things you can experiment with on page load so when the page starts loading what do we want to happen there's an action we want to start an animation so we don't have any animations we're gonna click + and here we go so let's click + on - time to actions so the first thing we want is opacity 0 now the opacity settings down here it's at the very bottom we're gonna hide it now I what we want to choose is timing for this initial one set as the initial state if you don't set this then what will happen when you load the page it's gonna show it and then it's gonna hide and then it's gonna show back again so we want the initial state of this element when the page loads to be the city's ero if that makes sense so we're going to choose that right there alright so now if we we also want another thing to happen though we don't just want the opacity to go from 0 to 100% we want the opacity and movement I to change as well so we click + right here and we're going to choose move alright so now for move we're going to change the y we have x y&z we're gonna change the Y value now you can see how it's moving up we're gonna have it maybe right around there about 74 pixels again you can changing units over here if you wish I and that looks pretty good to me right there okay so now what we want to happen is we're going to add hoops make sure we have our container selected on the end we're gonna change this opacity to we have a hundred percent we're gonna add another one remove and we're going to specify okay it looks like let's see here we want this to go from here all right so the move is not working let's choose zero oh that's why so now if we click play this is what it looks like there's a little bit jagged and that's okay we have a duration option down here which choose like two seconds for this and we'll just do an ease in you can see all these easing this will affect how the animation shows itself so I'm just going to do ease in alright and then we'll do the same thing here - you don't have to do the same thing they can be you know different values easing as well so if hit play yeah something like that I so now let's see what this actually looks like so let's publish this open it up look at that so freaking cool so in the little time that we worked on this which really it's been like what 40 45 minutes we've created a site here that is pretty solid and has even interactions and animations and some of which would even require a Java Script I well I don't think we did anything specific that would require that but if you use some of this other types of like the page scrolling based eye animations and triggers that would require JavaScript so which is really cool is that the you know you go to export code here's all the HTML that it generated and really it doesn't look that bad based on I because a lot of these these editors kind of will sometimes produce unnecessary elements same with CSS I know there's gonna be some unnecessary elements like this like this right here definitely don't want that stuff because I changed each color of those links even though they're all the same I wonder though if they're perhaps running some sort of minification on this anyways I'm not sure either way very very cool all right so hopefully you enjoyed that as you can see there we you know we really only really just touched the tip of the iceberg I but there's a lot that you can do with it very simple once you get a hang of how to adjust things so definitely check it out with my link here and I'll see you guys real soon goodbye [Music] [Music]

Channel: DesignCourse

Views: 101,784

Keywords: webflow, webflow tutorial, webflow course, webflow review, webflow guide, webflow responsive design, webflow interactions, webflow animation, webflow help, webflow tutorial 2019, webflow vs wordpress, webflow portfolio, web development, responsive web design, web design, content management system, webflow tutorial landing page, webflow tutorial animation, webflow tutorial beginner

Id: S67X-sfW0IA

Length: 43min 44sec (2624 seconds)

Published: Wed Jun 19 2019