Building a website from scratch in Webflow - Part 2 - Live Stream 9/06/2021

hey what's up everyone john here let's just wait a few more minutes till it's exactly 12 p.m central yeah so another session today another live chat i'm excited um i'm getting into the swing of things with you know doing one every monday through thursday so it's been it's yeah it's been a lot of fun so happy to to continue this all right i'm hoping at some point we'll have a hundred viewers in the chat that would be awesome i appreciate the likes for sure nice nice all right it's 12 on the dot so welcome everyone to the super chat i call him super chat because you can leave a super chat and i can help with your website or answer any questions you might have about webflow this is a live stream that i do every monday through thursday so monday tuesday wednesday thursday at 12 pm central anyone's welcome to join um you can type in the chat ask me questions um and in these videos if i'm not answering questions i go over how to build in webflow i cover some some tips and techniques that i use and we just discuss everything about webflow and everything about web design and development so if you're building a site or if you want to learn how to build a site hopefully this this is a good resource to to kind of help help facilitate that all right so so yeah so today i'll just go ahead and get started uh feel free to to leave a chat and i'll be looking at chat and answering any questions so in the last live session on thursday we we were building this so we're going to continue to build this so it's this figma file that i got from onepagelove.com and you can find it under free templates and you can download the figma file or get access to the sigma file so you can follow along if you want to or or kind of see what i'm working with um so in the last session we did have a bit of struggles with the navbar but luckily we got through it um i added this heading this subheading and these buttons so in today's live session i'm going gonna go ahead and add these three images and i'm gonna add like a cool floating interaction to them so it has like a cool effect when the user first visits the page uh so for this i'm gonna i'm gonna place it in a 100 width section so it spans the entire viewport and i'll just add a little bit of padding on the left and the right for these images so i'm going to go ahead and just export these images so in figma to export images you just you know select the image so here in the layers panel within figma you can find these images so it's here under screens and they're right here so i'm just gonna select them all by holding down shift and i'm gonna export them at two times here in figma and i'm gonna export these three layers so i'll click export and it downloads to my downloads folder i'll just double click and double click in here i'll just check out the images make sure they look good and yeah those look good and they'll look really good when when they're smaller because right now they're big and they look pretty decent um and yeah usually with graphics i like to use svg but this this graphic has so many different elements that adding it as a png works well so i'll go ahead and just add them to webflow one practice that i like to use and i might not do do it in this one but sometimes i rename my images it doesn't really matter actually because webflow it uploads the images to a cdn and the the file name in the url gets renamed anyways and then you can add alternative text to the image within the website um it's just for me it helps me stay organized if i rename my images but right now because i didn't build this figma file i'm okay with using the the uh the image names they have here so boards chat bot and dashboard so i'll go ahead into the assets panel in webflow and let me open that window and i'll click hold and drag and place into here all right that looks good so the next thing i'll do now that i have the images there i'm going to go into figma actually and just see how i want to do this um yeah so i see that this is going to be interesting actually because the images they're rotated in a specific way so that's going to be interesting so let me go into webflow and within the page wrapper i'm going to add an element i'm going to add another section because this bottom section is going to be 100 width and we're not going to put it in a container because looking at the sigma file this area down here is much wider than the content here in these buttons so i'll go ahead and add these images so i'm trying to think how i want to do this let's see all right so here i'm going to go into mirror i'm going to try this tool out and just draw things out so you can kind of get an idea of what i'm thinking about so because there's four images so right we have let's see the nav bar and then we have this container and this container has the heading the subheading and the buttons okay i'm just trying this out so let's see if it works out all right and so then for the images there's there's three images but i'm gonna put them in um and i could put it in a grid actually let's try that let's try working with grid today i'm gonna put it in a four in a two by two grid and then rotate that grid so let's try that i don't typically work with grid but in this case i feel it could work really well actually i'm going to yeah i think this should work well yeah i'll use flexbox and i'll wrap the images let's try that so let me add an element i'm going to add a div block and i'm going to call this image wrapper and i'm going to set the position to flex align center and justify center and then i'll go ahead and place those two in those three images in so let me see one so we have this one image and i'm gonna say image is high dpi so it just resizes it and then i'll place the second image set it as images high dpi so because we saved it at two times it's just resizing it and condensing it so the image is actually a higher quality it's just resizing it and using i think more pixels within the image all right so we have those two let's see we have the workboard this one and let me add one more image and i'll add this one okay image is high dpi so right now there's three images so what i'm going to try to do select this image wrapper and then for the children i'm going to say wrap and yeah that kind of works [Music] so except we want this image to be aligned to the right so let me select this image wrapper and set it to vertical nope let's set it horizontal and i want this image to be positioned all the way on the right side so let me try something like this no okay so yeah this should be fun to to figure out here um and it looks like these images are a lot smaller here so i'm gonna have to i'm gonna have to change that as well um yeah i'm gonna rotate them individually first and then and then rotate it so yeah this is going to be fun to watch me figure this out um let's see so workboard yeah should be able to so what i'll do is i'll i'll add another div block actually so it's going to be an empty div and i'm going to place this div on the left side and let me expand it let me try to set it to 50 okay cool so we have this empty div here that's 50 because i want to move this image all the way to the right so yeah and i feel like these images are a lot smaller so let me just look at the size here so the width and the height is 466 by 429 so it looks like the width is 466. so i'll go ahead and add a specific width here i'll say 466 as as we can see it's a lot smaller and then i'll just call this hero image and i'll apply that same class name to this image and the same class name let me remove this class call this hero image okay um yeah so let me set this div block to 466 instead of 50 466 and i'm going to let me set this image wrapper to a spacing of auto so it centers it or it should center it and let's see okay um i think grid might be the solution here i feel like i feel like that would be the best the best thing for for this design hey what's up manuel how's it going so i'm gonna i'm currently creating um this kind of grid here or this uh these images um so yeah so let's grab everything i did and i'm going to go ahead and add or within this div block i'm going to set it to a display of grid instead of flux so i'll use grid and grid just places elements in their own grid cell so that looks good i don't want any gaps here for for this and i'm cool with that that looks good so let me select done and then for this grid cell i'm going to justify it to the right so we have this option here justify end and this one looks okay so yeah it looks pretty good so [Music] ah this is going to be interesting very interesting okay all right so let's see workboard yeah this needs to go up here okay got it so this one can go there and i'm gonna place this one up here and this one actually needs to go all the way here okay so i don't need to rotate it nice okay so what i'll try to do here is place this one so i'll try a position of absolute and let me add a combo class actually to this image so i'm going to say give it a combo class of absolute set the position to absolute and i'll say top right no yeah you know what i'm almost thinking yeah i'm almost thinking of something different for this instead of using grid entirely because these are diagonal so i'm going to use just position absolute so again i'm going to remove this grid setting from that and i'm just going to place i'm going to delete this div block we don't need this and i'm going to set the the display for this image wrapper to flex center center and i'm going to set each hero image i'll remove this combo class i'll set each hero image to a position of absolute and yeah and center and let me make sure that the image wrapper is set to a position of relative okay and that looks pretty good for the height so i do want to add some height to this so i'm going to say for the image wrapper let me add let me set it to like 500 pixels okay all right so that this uh these images are in the center okay so now i'm gonna set it uh give each image a combo class and then move it with the position of absolute so i'll add a combo class of one to this first one or this one is actually the third image so let me remove that and just say three and then i'll just move it with with the position of absolute let me see if i can use percentages a hundred percent nope uh fifty percent let me try that on the left side and then this one is number two so i want number three let's see this one's on top so i'm guessing it's this one so this is going to be number one and i'll move it 50 from the right something like that and 50 down okay so we're getting there i just have to move it a little bit more so maybe so this hero image i'll move it down fifty percent yeah something like this oh that's gonna work perfect i'm like 52 yep that's going to work really well all right so we didn't use um we didn't use grid or flex at all i just uh absolutely positioned everything um so just to backtrack a little bit and let me not wrap here as well so i added the image wrapper i set it to a flex setting of center center and i gave it a specific height uh let me try removing this height to see to see what will happen yeah so it just moves everything up because it's positioned absolute so i think i'm going to give it a height of maybe 100 vh that's too much um oh no that's that's actually a pretty big section maybe something like 80 vh so it fills 80 of the viewport and then for the flex setting i'll justify to the top or no this should be this should be 100 vh okay and then if i justify to the top then i'll have to move these up so these yeah that's easy enough and i'll move this cool yeah and then i'll add some padding to the image wrapper oh okay i see so let me place these three in another div block um to so that i have a little bit more control of let's see div block hero hero so i'll have to set a flux heading to center center yeah let me set it to position relative and oh that's fun um okay with 100 no that's that's doing the same thing let me undo that we don't need that extra div block okay so yeah instead of padding to the image wrapper i'm just going to add some margin there we go maybe 80. so we're doing increments of 20 for this build so yeah it looks pretty good so we have the three images and the images feel a little bit no they're the same size here okay and maybe it could have gone in a container actually you know what i'm gonna do that i'm gonna place in this section i'm gonna add a container so i'll add a div block give it the class name container and place the image wrapper in the container okay not sure what happened there so let me set this to 100 there we go all right so yeah it's in the container that looks good all right so yeah that took a moment but basically we're using position absolute to to position these images kind of in different positions all right and this one's 21 so i'll do the same for this one 21. okay so cool that looks good so now what i want to do is like add this cool effect of the images hovering so i'm just going to add a page load animation so i'll go into interactions under page trigger i'll click the plus i'll say page load and when page i'll say when page finishes loading i'll start an animation click the plus and i'll call this images hovering okay then i'll select this first image i'll say move um let's move it twenty percent no that's too much so it's going to be very subtle so five percent move it five percent down and then move it back to zero percent okay and five percent might be too much so maybe like three percent i just want them to like subtly move and then this one we're going to say move let's move it negative 3 and we'll start it yeah start it after this one and then we'll move it back to thank you rain appreciate it back to zero percent so let's see how that looks yeah so these these should be hovering at the same time so it moves and yeah it looks that looks good and then this one will will move it negative five percent let's try that start it at the beginning and then we'll move it back to zero percent yeah okay and then i'm just going to add easing to all of these so i'm going to say like ease and out or just ease and then duration we're going to make it like two seconds so very long yeah and then this third one needs to move a little bit differently so this one i'm going to move it negative seven i don't like that it moves similar to this one so i'll add a delay to this one i'll add a delay of 0.5 and i'll add a delete to this one to let's say 0.25 um no i don't quite like the delay either so delay i'm going to set it to zero that actually doesn't look bad i'm gonna move this one let me try seven let's try that yeah i like that i like that a lot so this is gonna be negative five okay yeah yeah i like that so actually what i'm gonna do i have another idea here so zero goes like this and then yeah let me try okay so i'm going to do the opposite i'm going to say 3 and then negative three so i want them to hover up and down this second one is negative five i'm gonna say five this third one is seven so i'm gonna say negative seven instead of zero so it goes like this like that okay that doesn't look bad we'll we'll finesse it but i'm going to loop it now and see how it looks goes like this yes that's not bad um i like this one i feel like this top one can move a bit more so let's select it and i'm going to move it let's move it 10 i know that's kind of that could look cool though so first one 10 and then i'll move it back negative 10. okay [Music] and then let me see if this works let me select these three right click duplicate oh that's awesome and set it to zero okay it's just gonna do its thing i don't think i think it needs the zero so we're going to delete that um but the easing i'm not quite a fan of the easing let's do let's do easing out yeah kind of like that and we'll make it slower so the duration will say four seconds and then for this one i'm actually going to move it down something like this yeah this one's a little bit too far no no don't like that they can't overlap hey craig how's it going i'm just creating this little animation here so we're rebuilding this figma file and i'm creating like this hover effect for this section here for these three images i just want to create kind of like some dynamic movement here this one's moving a bit too much so this is image two so instead of five let's do negative three and three okay let's try that yeah i just want it to be really subtle and this one's moving too much okay this is the last thing i'll do so as you can see like this is my thought process behind creating interactions you know i want everything to look nice and smooth and kind of makes sense yeah that doesn't look bad all right we'll we'll come back to it i don't want to spend too much time i could spend the whole the whole video working on this interaction um but yeah just want to add some dynamic things there and this one should not okay last thing so one um let me set it to five and initially let me set it to negative five and then back to five okay all right we'll come back to it but you get the idea i'm trying to get this to hover correctly let's move on to the next section or actually there's one more piece here there's a gradient here at the bottom so the images are covered by this gradient so i'm going to go ahead in this section so we have where we have the container and let's see yeah i'm going to add it to the section here so the section i'm going to add a div block and i'm going to give it the class name gradient bottom and i'll set the gradient let's see here so the height is uh 500 let's set it to 50 vh and i'm going to set the container relative i'm going to set the position of this to absolute and bottom okay so this gradient bottom should be let's see section container gradient bottom why isn't it at the bottom and let's see uh section oh because the section needs a position of relative okay so now it's at the bottom and i'll give this the background of yeah select the background here or image ingredient click the plus and i'll choose a gradient and the bottom we want it to be black and the top transparent okay and there we go and i can move this up a little bit something like this i'm gonna make um i'm gonna make let's see this image wrapper a little bit smaller so maybe like 80 vh yeah and that way there's like a a dark gradient here which looks good nice and for this image i'm going to give it a higher z index so i'm going to say 50 so it comes to the front this one i'm going to say 49 and this one i'm going to say 50 as well i'll say 51. okay so this this top image is behind these two let's see how that looks yeah not bad not bad this one's moving too much okay um yeah so so far so good if there's any questions let me know i'm gonna change this bottom gradient to the same color as the website background which is one eight one eight one eight and yeah that looks good and then for the top instead of transparent i'm going to do white but give it a like really low alpha of like 10 and then i'll set the z index of this div block to 99 so it goes in front and that's not quite what i'm looking for so let's work on this a little bit this is black actually i'm gonna do one eight one eight one eight and then here i'll set the alpha to really low yep that's it okay cool so there's the both colors on the same end except i reduced the alpha or the opacity of the top gradient so that these bottom images feel like they have a little bit of a covering underneath and it's just a subtle effect but i think it's kind of nice all right it's looking good very nice so yeah we're finished with this top section now let's move on to this section which is uh features and yeah that looks good so let's go into the designer into the navigator i'm gonna add another section and i'm going to let's see this is a heading we have a subheading and this is an h2 heading a secondary heading so this is the h1 and then we're going to add a secondary heading so let's go and add a heading and go ahead and add a heading in here i'm going to set it to h2 and actually before i do that in the section i'll add a div block and give it the class name container so we'll have a container and then in here we'll add a heading perfect and we'll make this an h2 heading all right i'll style the h2 heading so this is let's look at the properties here so this heading is let me get some water here um let's see secondary heading it's 52 pixels and 62 pixel line height okay so i'm going to say all h2 headings i'm going to set the font to roboto set the color to white set the size to 52 and line height to 62 and the font weight is 400 so 400 and then i'll say features cool all right and then i'm going to go ahead and copy this subheading because i think it's the same size yep so i'll just copy this subheading paste it in here and i'll grab the text so this text here copy it and paste in here cool so far so good and then we have this section here so for this i'm just going to add a div block um and two other div blocks so so for example let me just open this and i'll delete this so excuse me so for this we have we're going to add one div block and then we're going to add a div block in here and another div block here this is going to have a flex setting so the parent wrapper is going to be flex and it's going to be horizontal so that these sit side by side and then within this div block i'm going to add this image so we're going to add an image in here and then i'm going to add another image set it to position absolute and here we're going to just have like three div blocks to add these different bullet points okay so let's go ahead and do that let me go into webflow and so the first thing i'll do is add a div block and i'm going to call this features wrapper i'll set it to a width of 100 and i'll add another or actually yeah let's set the flux setting to flux horizontal align stretch and justify left will work here and i'll add another div block and i'll call this uh features left this is going to be the left side and i'm going to set this to let's say 70 percent and then just so we can see this better i'm going to temporarily temporarily add some height to this so we have this features wrapper and let's see let's set it to sixty percent actually sixty percent and i'll add another div block and i'll just say grow if possible right here so it fills the available space and i'll call this features right okay so we have this left of block and we have this right one so in this left one we're going to add the image so i'll go ahead in here and i'll look for those images so it's right here so i'll just select both of these go into export two layers at two times okay showing finder and let's see so it's this one so i have these two images and go into my assets panel and drag and drop right in there very nice and i'll go ahead and remove the height from this features wrapper we don't need it once we add the image it's going to add height automatically so in the left side i'm going to grab this image click hold and drag and place on the left and there we have the image i'm going to say image is high dpi looks good and i'll call this features left image and then for the features left for this div block i'm going to set it to a position of relative and then we'll add that other image in so i'll select add an element i'll add another image in here choose image and i'll i'll choose this line chart image set images high dpi and i'll position and i'll say features second features left second image i'll set this position to a position of absolute and bottom right okay and then i'll just move this down and to the right something like this okay i don't like that it has a white border but that's how the image is set up here all right we don't want it that far off nice uh for this section i'm just gonna add some padding temporarily or some margin or just add some height temporarily 1000 so we can we have some scroll space there while we're building okay so that's the left side let me go ahead and start adding the right side so for this right side we have these icons here so i'm just double clicking in and going into the icon here so we have this vector so i'm going to select it and go to export as svg we can preview it so we have that icon there i'll click export and then i'll find these other icons in here okay i'm gonna export this icon and this icon here okay so yeah let's go back into here and i'm gonna add those icons into the assets panel and i'm just going to click hold and drag place them there we have the icons uh yeah so hopefully everyone's been able to follow along well i know it's kind of a lot of information i'm covering but um yeah at least you got you get to kind of see how i approach uh a build in uh in webflow okay so we have this area here so for this i'm gonna add let's see three three div blocks in here um let's see one two yeah so let's see okay yep so i'm gonna add a div block i'm gonna call this um i'm just gonna call it feature uh feature and then uh where's a good resource to learn flexbox i get confused with which settings apply to the parent versus the children it's always trial and error for me so i get it working but it's normally luck um yeah that's that's a really good question uh craig let me go ahead and we'll just we'll just run through a quick example of using flexbox so i just created a new page let me add a section set this to 100 vh so when using flexbox you want to apply it to the parent element so let's say i wanted two columns in this section or you know let's add a container just to to stay consistent with the design i'll add a max width of 1200 and set the spacing to auto so let's say within this container i wanted two columns i would apply the flex setting to this container so here i would select flex and horizontal align stretch and justify start so you can align it and justify however you want in here and then once i add a div block so i'll add a div block and then i can add another one it'll put them side by side because it is positioned flux so let me let me give this a specific width and height so [Music] yeah i'll give it let's say 300 by 300 okay and we'll make it sure red if i were to paste we see that these two div blocks are side by side and that's because this div block i'll call it the parent has a flex setting of horizontal and align stretch and justify start if i were to say justify center we can see these two blocks move to the center and i'll add a border here so these two blocks move to the center if i were to add vertical to the parent element it aligns them vertically and if i were to align center it aligns them to the center i can align them to the right left and if i say horizontal it'll do it horizontally so i can keep adding div blocks in here and i could even wrap these so if i selected the parent element and i said wrap well actually the div block would have to be smaller but if i set a specific width to this div block um it would kind of create like a grid so let me try like 600 yeah um so that was a bit confusing um sorry about that but yeah basically you want to apply it to the parent element and then these are the children anything inside of it are the children um so these two are the children and then you apply the flex setting to the parent element so horizontal vertical another kind of cool thing i like to show instead of giving a specific width to the children so i'm going to remove this with you could set the sizing here to grow if possible and then whatever div block is in the parent element it'll try to fill that available space so let's say i wanted six columns i could just apply the growth possible property to the children and then i can just paste as many div blocks in there and they'll just fill the available space and you don't have to do do any math or calculations with it because we're saying yeah phil fill the parent element you know and use up the available space if i wanted 12 columns you know 1 2 3 4 5 6 7 8 9 10 11 12 yep or three columns just like that and then you can set the height for these columns or add content and it would automatically adjust the height of the content or the adjust the height of the of the div block hopefully that was clear yeah and then i could copy this parent element and have more columns and things like that i could add padding or margin to the children element to create spacing and we could create a really nice website layout using flexbox uh you can also use grid um i don't use grid as often i like flexbox because what's great about flexbox and grid as well you know you just have to get proficient with grid but now that i have these three columns i can go into tablet and on tablet i can be like hey i don't want it to be horizontal i want it to be vertical um and then we'd have to if there was content in these columns would um and i have to set the width to 100 with no that's the parent sorry let me go into the children because the children didn't have any um yeah okay got it so yeah let me shrink if possible um so i do have to change the flux setting here because i changed it to vertical for the parent and i had to change the growth possible setting here for the children and then i'll apply you know width of 100 and for these i can give them more margin um so with or the parent element i can add some padding of like 40 and then i can give margin to the children element so on desktop it's horizontal on a tablet it's vertical okay so yeah hopefully that was clear i know with the the sizing property it can get a little confusing when going to you know from desktop to tablet but you do want to apply the flex setting to the parent and then you can apply um you know different settings to the children cool thank you i guess i get confused when we start adding divs within these children yeah so if you were to add divs inside of here so i'll go ahead and go into the the desktop if i were to add a div block in here and let's just set it to 300 or to 100 by 100. so we have that div block i'll change the color and also add a border here to three okay so we have a div block in here so if i wanted to move this div block relative to so so now this child becomes the parent of this div block right so this div block is a child of this div block and this red div block is a child of this parent div block so now this becomes apparent as well and this becomes a child so if i wanted to position this div block somewhere in here so i could select this div block and then give this one a flex setting and then i can move this one around inside of this red one so if i wanted that to be centered i could do that and because these all have the same class name i'm able to they all have the same properties so we see it has the class name children i could say child child would be better and yeah so now that now because this is the parent it wouldn't be positioned relative to the grandparent so yeah hopefully that helps um yeah it's it's some interesting concepts there with parents and children these are actually siblings so these two children are siblings and in in interactions you can select sibling elements so these these red these red div blocks are all siblings these yellow ones are not siblings because they're each inside of the of a parent element if i were to copy and paste these two yellow ones these two would be siblings right but each these one this one has its own parent this one has its own parent these two have the same parent and these three have the same parent all right cool that was an interesting concept to cover hopefully that helped and yeah let's go back in here um yeah for this features wrapper let me go ahead and add some margin to the top like 40. so we have this feature i'll go ahead and kind of finish this up here um so we have this icon this text and it's just a title and this paragraph okay so i'll add a div block in here for the feature and i'll call this feature top and in here i'll add an image choose image i'll select this icon and then we'll add a text block and i'll just copy this let me just get this text copy and i'll paste in here and then for the features top i'll give it a flex setting of flex and horizontal excuse me and align center so that the icon and the text are aligned correctly for sure happy to help uh craig cool so um here the font weight is 500 and the size is 20 and pixel line height is 30. so for the size of slate 20 line height 30 the color i'll say white and then for the font i'll say roboto all right single source of truth and the font weight 500 and we'll move it give it a margin of 10 and nice that looks pretty good all right so then within this features wrapper uh or the feature i'm gonna set a flux setting of flex and then vertical and then i'll add another div block so it goes below it and i'll call this feature bottom okay and then i'll just copy this text and i'll add a paragraph text and i'll call this feature text and the size is 16 line height is 24. um yeah and then that looks good okay let's see and then the margin we'll say 20 pixels from the top very nice and let me see something here so let's see features right let me set a flex setting just if i write no center no yeah no that looks good so what i'll do for this features right is just add some margin so maybe like 60 from this left side and yeah that looks good so i know i just covered a lot there with this feature section um call this feature heading so i'll draw this out just to kind of explain what i did so this little box let me draw an arrow over here and i'm still learning this program so bear with me while i move it okay cool so for that i'll get better with drawing as i do more of these so this is the feature box right it's just a box and we added a top section to it and a bottom section our bottom div so for the parent this is the parent we gave it a flex setting of vertical so that these two boxes stacked on top of each other and then inside this top one we gave it a flex setting of horizontal so that the image and the text aligned horizontally to each other and we set it to center so there's consistent um alignment there and then for this bottom one we didn't do anything we just added the paragraph text in here all right so again the the feature wrapper then the top and the bottom and then for the top we added a flex of horizontal and this one the parent has a flex of vertical okay so it's kind of like legos in a way like building blocks you're kind of okay can't um sorry about that that was vertical okay it's kind of like legos and you know if you if you do have legos or you have like some physical things that might help you understand this that that could work or like maybe just take a piece of paper and you know create squares and then you could think of it as like building blocks right we're putting blocks inside of blocks and we're aligning blocks in this specific way to achieve a specific result in this case it's to create this this feature section it does seem like a lot just to create that but that's the box model and it does make it easier easier once we get to responsive design like i could i could completely change the layout of of this in on tablet or mobile and i might showcase that we're getting near the end but what i'll do is i'll just copy each feature so we have this feature and i'll just copy and paste it three times so i'll have to select the features right and say vertical and that's it and then for each feature so i'll select it down here i'll add some margin from the bottom of like let's say 30. let me go to desktop features right yeah vertical okay there we go and select feature and apply margin to the bottom maybe 40. and then i'll just replace the image here for each one replace image call it that and then i'll replace this image okay and i'll go in here and just copy the text intuitive interface and copy this paragraph text okay copy and paste in here oh they all have the same text so that's fine and cool all right so yeah that section looks good and i might add some more margin to this one maybe 80. okay so that's looking very similar to this and actually i can see that this is aligned to the top and this is aligned to the bottom so to the center so i'll select the features right and justify center so it moves it down a bit cool cool features wrapper container and section so let me remove this height from the section reset nice i'll just add some padding to this section something like this yeah we'll work with the padding um so features let's see features heading i'm just going to give it more margin from the top there so it's a little bit more separate from this top part all right so let's see how that's looking um not bad let me select the features wrapper and add like 80 pixels okay all right yeah that's looking very similar to the figma design i'm happy with it very nice so let's go ahead and publish and just see how it looks in the browser uh any questions before i end the live stream so i'll go ahead and preview and we animated these three images we have the feature section with this kind of weird border on this image down here but that's how it was exported so i'm not going to worry too much about it and one last thing i'll kind of cover so like i was saying because because we're using flexbox it makes it really easy to adjust the flex setting let's say on tablet so on tablet what i'm going to do is select the features wrapper and instead of horizontal i'm going to say vertical and then i'll say center okay and actually let's do justify left and then for this features right i'm going to say just align center and remove the margin and i can make it wider so i could let me set the sizing here i can set this to 50 percent and yeah and then let's see so for this image i could so features left i could set this to a hundred percent for features left it makes everything larger and then for this features bottom or features right i can add some margin like this and let's center the content yeah so i would you know work with the alignment here on on uh tablet but that that just gives you an idea of how easy it is to readjust things from desktop to tablet using flexbox i can on tablet i can align things vertically whereas on desktop i'm doing more horizontal alignment because we have more real estate or more space to work with the website so yeah so far so good we have the top part working at this work at the speed of thought then we have the features section and then uh tomorrow we'll go ahead and create this content section so as i add more sections i'll work on the spacing in between each section and you know let me see this first section doesn't have a class name yeah so i'll call this features features section and then here i'll call i'll do this um just to stay organized i'll call this hovering images section in this section we'll call it hero section okay so in the navigator i kind of have it a bit more organized so i know which section is which so it's in a page wrapper then we have different sections each section has a container and then within within the container we have the elements that we're building for each section okay so it's just a nice way to stay organized you'll see that a lot in web design you'll see a section being added then a container and each container has a max width of 1200 pixels so if the screen does get larger than 1200 pixels the content will still say nice will still stay nice and centered so the user is not seeing the the website expand if they have a really large uh monitor you know i could like for example if i preview this i'll go ahead and publish and then i'll preview all right so if i zoom out here on chrome like the the screen is there's more real estate but we can see the content is nicely in the center right it's not trying to fill the entire uh viewport okay so so yeah so far so good um we'll adjust the spacing in between the different sections once everything's built out and and fine-tune little things so as we're building um you know i might not fine-tune a lot because i'm just focused on each section individually but once all the sections are built we'll just go through and you know like a fine toothed comb and just add you know specific margins and and more width and and spacing in different places okay so that's it for today's live stream um yeah kind of a slower paced one because i was working on the interaction and we're just adding elements but but yeah this is just an open space for anyone who has any questions about webflow or wants to learn webflow and wants to see someone build live in webflow so yeah thanks for joining joining everyone thanks manuel rayne craig thanks for for the chats and uh yeah hope you have a good one and i will be here tomorrow at the same time 12 p.m to 1 p.m all right cool thanks for watching and yeah check out webdev4u.com check out my templates i have a ton of free cloneable projects if you like cool animations you can go to webdevff.com go to interactions these are all free you can copy and paste them or clone them into your webflow dashboard this is the latest one here that i created it's just a animated menu button but there's over 100 yeah 150 interactions that you can take a look at like let's see i like let's see this one right here is pretty cool it's a it's an interesting menu that opens up and then you know disappears and then there's also another cool one i like this one here [Music] it's like a gooey menu that pops out from the right you know so you can clone this into your dashboard and just see how i built it you know i did use illustrator to to build something like this and and after effects but just to give you an idea of like how i added the elements and stuff like that yeah for sherman wall um definitely yeah happy to help yeah thanks craig alright so so yeah that's it for today's uh video thanks everyone and i'll see you tomorrow thanks bye cool

Channel: WebDev For You

Views: 357

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design

Id: jmzF5xh-B4k

Length: 69min 5sec (4145 seconds)

Published: Mon Sep 06 2021