Making a website responsive and working with Grid in Webflow - Part 4 - Live Stream 9/09/2021

hello hi everyone john here uh just gonna wait for a few more uh viewers to come in but uh but yeah i have a really fun um demo to showcase today and yeah so hello hello hello everyone welcome so this is my uh daily live stream uh the live stream is from monday through thursday where we go over everything webflow so the live stream does start at 12 so it goes from 12 to 1 pm and yeah i cover how to build a site in webflow i cover how to create certain interactions in webflow and i also provide support so if you need help with your website you can drop a super chat and i can take a look at your site or showcase how to build something specific that's tailored for your site yeah i think i said that correctly but basically yeah i can help with anything with any of your personal projects uh with a super chat all right so so yeah i'll go ahead and get started um hopefully a few more viewers trickle in as i'm kind of showcasing this demo and as we're building in webflow uh so this demo here uh so yes if you were in yesterday's session if we preview we were trying to recreate something like this so this is from code drops and i think her name is mary lou she created this interaction and she was using the clip path property and it just kind of creates a circle and then expands so i'll showcase my version of this so we go and we can see it's working nicely so it's almost working perfectly but there is a little glitch that i'm trying to iron out and that's that's if we reload the page the initial second slide so if i click through oh and actually that looks okay i'm not sure why it's working now let me try to publish again hey bill fazal uh as promised i'm here on time excited excited to learn something new from you thank you for sure uh we're gonna cover i'm not gonna rebuild this entire thing right now but let me just see if it oh it's working correctly now that is bizarre why wasn't it working not that i'm complaining but yeah so here in this preview it's doing it does something a little strange but on the live site it works perfectly so let me refresh oh it did it once yeah okay and if we click multiple times i might be able to add a piece of code that adds a delay to the click so we can't click on this next button multiple times but essentially we did get something very similar to this i just have to fine tune it to make sure that there's no little glitches with it so what i did in after effects and i'm just going to cover what i did i'm not going to go too in depth because i'm going to create an interaction video on how to how to do this once i iron out all the little details so basically in after effects i added yeah i added so we have this animation that scales in and i added two masks so these are the two masks and one just goes up and one comes into view and then it expands again and then it repeats so it starts off the ending and the beginning are the same we just have these two masks moving up all right so that was me just duplicating the mask and then animating it in after effects and it gives us uh this effect where you know it zooms in and then zooms out and then what i did for the slide out view i added an an interaction so we have these three slides so one two and three we see them there and then for each slide i created an out interactions we have slide one out and then on slide the second slide we have slide two out and the third slide slide three out and basically i added a delay so when slide one goes out of view we move slide one um oh wait i think i might have figured it out wait hold on one sec no this is slide three out never mind okay so let's go to slide one and it slide one out so basically after a delay of 0.55 seconds hey manuel how's it going um so i was able to kind of figure out that interaction we were working with yesterday there's still a few glitches but i think we're getting pretty close um yeah so this is slide one out so we have slide two moved to zero percent so it moves into view and slide one moves negative a hundred percent so it moves up out of view and then i have slide one go immediately down a hundred percent with no duration so we can't see it but basically it goes up and then immediately goes down so we don't see it and that way it just creates a cycle where it goes up then immediately goes down and then loops back in the middle um manuel yeah uh hope you're doing well and trying to avoid this wordpress clients cool so yeah then we go to slide the second slide and we've applied um slide two out and basically it's the same thing where we move slide two up negative 100 so it moves up on the y-axis and then slide three moves to zero percent so it comes into view and then we just drop slide two all the way down to the bottom with no duration so it just it's able to cycle through and loop again and then we have slide three and the same thing so we move slide one into view slide three goes up negative 100 percent and then drops down to 100 so we reset the animation um so that's all working well and then for this right arrow we have the lottie animation playing from zero to a hundred percent and then back to zero so it resets um each time we cycle through and yeah that makes the effect work and also for the slider um i took off i set it to slide over and no duration um so that's zero there let me try setting the duration to point to one millisecond i just want to see what happens here maybe it'll fix this glitch nope made it worse okay all right so we set the duration to zero so basically the slide is just triggering the interaction so when we click when the slide goes out of you right away it triggers the the interaction and we get pretty close so when we click except this first slide this the first one has some glitch that i'm trying to figure out but after that first one it works beautifully all right so we're very close and i'm hoping to to have this ironed out by this weekend and i'll be creating an interaction video on how to build this in a in webflow as far as responsive it's kind of responsive but as you can see when we get to lower screens the slotty animation gets too small so i might only recommend this for desktop browsers there might be ways with like the preserve aspect ratio to get it to fit across all screens but i'm not sure at the moment so i think i think this is just like a desktop animation because even on this demo if we make it responsive we can see it's not it's not really like super responsive kind of cuts off and you know it's mostly for desktop all right so so yeah that's exciting i'm pretty happy with how this is turning out if i can't figure out that first little glitch in the interaction i might have to let me see yeah i might have to try to create this interaction without the slider but i'm not sure how i would do that honestly because the slider the sliders will give allows me to have consent consecutive interactions one after another by clicking one button so we click the button and it triggers the slide as well as the lottie animation um it's just this first one like if you kind of see the slide comes in from the top to the bottom this second slide so i'll have to work on that but yeah i'm happy with how that's turning out and stay tuned for the interaction video that i'll be creating on that it was actually really simple in after effects like yeah just creating two masks so manuela what you mentioned yesterday about those two circles i had to create two circles in after effects and it worked out well all right cool so let's finish this build here this [Music] this build and we just have a few more sections here so we have this section um yeah it's a cta uh some text and an image so let's go ahead and finish the build and again if you have any questions as i'm building uh feel free to ask and i'll be happy to go over anything in webflow and yeah so so far so good this is the website we've built in webflow it's looking good and let's go ahead and add this section so i'm going to call this section uh cta section so call to action section so in the page wrapper i'll add a section then i'll add a div block and we'll call this container okay and then for the section let's give it the class name cta section to stay organized and then in here i'm just going to add a div block um yeah so this is going to be a div block so i'm going to call this we'll add a div block and i'm going to call this cta wrapper set it to 100 and then we'll add two div blocks we'll have this left one and this right one with the image so i'll add a div block in this wrapper add a div block call this cta left and we'll say for the cta wrapper we'll give it a flex setting of flex horizontal justified left and the line stretch and then for the cta left we'll say growth possible and or actually i'll just call this a cta column and we'll have two of these so i'll copy and paste and yeah i think that should work you know what i'm going to i'm going to give them their own class name because i'm going to assign different properties to each so i'll call this cta left and we'll call this cta right okay so we have left and right and then in here i'm going to add this text so this text is it's a headline okay so let's copy this h2 heading we'll paste it in there and i'll call this open type feature and variable fonts so open type features and variable fonts i get that right all right cool so we have that um that looks okay and then we have a button so i'm just going to copy this button here actually this button because it says try for free yeah let's add that into the left section so try for free and that looks okay um so for this i'm gonna remove the content combo class and i'm gonna give it the cta combo class so we can style it a bit more i'm gonna remove this margin i'm going to add and for this i'm going to duplicate this class and call the cta heading so i can assign different properties to it i'm going to say like 40 pixels and that looks okay and i'm gonna add some more padding to this button because for some reason it's a lot larger for this section so try for free that looks good um yeah so that part is done let's add some padding to the top of this section so 140 to kind of separate it from that and then for the cta wrapper let's set the background color so this has a specific background color of is it three four three four that looks darker yeah i guess so yeah content three four three four three four so i'll go ahead and to the background uh can you tell us when you we when should we use flexbox and when should we use grid um honestly uh a bill um i don't use grid that much i know i should probably should but the only time i would use grid is if i had like a really unique layout that required like specific blocks to be entered and some blocks not filled i haven't come across a great example yet where i would want to use grid but if you see a layout that you would want me to build in grid i can i can try to do that like during this live stream and we can all get more familiar with grid because grid is a feature that like i've used it a few times but it's not my favorite like i to me flexbox is just so intuitive and easy to use that i just gravitate towards flexbox and maybe i should start using grid more there's probably some some um really cool features that uh that it has all right so let's see for the border radius let me set this to so it's 33 so i'll set this to 33 and i'll add some padding to the cta wrapper maybe like 40. that looks good uh grid is so underrated still it is and maybe yeah i should probably start using it more i'll make i'll make an effort to start working with great a bit more during these live streams so we can all get a bit more familiar with it all right so cool so i'll go ahead and let me see here so yeah we added some padding to the top and so in the cta right i'm going to add this image so let me go ahead and double click get into this image so it's line chart here i'm going to go to design go to export line chart do you use grid a lot manual and let me get the info just to see how large this is under 70 kilobytes that works for me and let's go ahead and drag and drop this in here and then i will drag and drop this image in here cool all right so let's see yeah let me remove the padding from here so i'm going to remove this padding and okay i'm going to remove that padding and then to the column i'm going to add its own padding so 40 and 40. actually no that's fine and it looks good and then for the cta wrapper i'm going to set the overflow to [Music] hidden so we get this nice corner here on the bottom right oh that was easy uh let me just move yeah i will add some padding to the cta left like 40. something like that yeah that looks pretty good and let me add some margin to the bottom of this button nope let's try adding some padding to the bottom here yeah let's do 40 here and then for this image let's see cta write um i'll set it two hundred percent no uh oh okay i got it so let me add the padding to the cta left or margin no i guess to the button oh it's a margin there we go 80. uh so i used to use grid just because i didn't know how to use flexbox but as i'm getting better at flexbox i think for me personally it's just as easy as grid nice is it true that flexbox has more browser support than grid i think so let's check that out so let's go to canius.com and let's type in flexbox so flexbox is supported across pretty much all browsers except ie six to 9 opera mobile 12 and opera 10 to 11. for the most part it is supported in all the latest browsers let's try grid uh grid has a slightly less support but for the most part it is supported we can see on opera mini it's not supported and i never used this browser by do browser um but yeah grid seems supported yeah and all the major browsers grid is supported and flex is supported as well uh yeah cool so i started to use wait is it okay i started to use grid just recently because somebody explained to me how to use it and the more i use it the more i understand it that it's very useful especially to set up general layout and the responsive behavior it's so easy to rearrange all the content on different screen sizes with grid dope nice so yeah i guess i'll start looking more into that maybe i'm a bit behind but that's okay yeah so let me set this image to 100 and i'm gonna do something like uh for the fit i'm gonna say cover and there we go and that looks better it's looking good looking good i'm gonna add some more padding to the cta left maybe something like that yeah that looks good all right i'm liking it let me set this as high dpi cool all right maybe the next section i'll try grid or we can try building a few of these sections with grid yeah i can't say i mean i have used grid i have used it a bit but i don't know i guess flexbox i've just used a bit more um cool so let's this last section i'm not even sure if i'm going to build it i mean it's just a border it looks like an image is missing from it so this is just some text and icons it's not even that well designed so we'll just skip this one grid is amazing it feels like it like it makes things easier and you are much more control of the website okay so i think i'm getting the hint i should start working with grid um cool so i think i'm gonna end it here for this build let's just make this last section responsive here so all i'll do here is for the cta wrapper set it to vertical and centered and then i'll remove the padding here from this and i'll also set this to flex vertical and centered and the image there looks okay all right that was pretty easy um yeah when i've gotten so kind of efficient with flexbox like i'm uh hesitant to you know try to perfect another layout system but that's just my laziness i guess all right so let me center this and this still looks good there mobile let's just make this a bit smaller and something like this and yeah let me remove the margin here from this cool that looks good looks good and looks good all right this image i'd probably make larger um yeah this image is okay there i'll just kind of leave it like that for now but for the most part it's responsive what i would do for the headings actually the headings on mobile landscape look okay yeah there's there's this section that we need to kind of adjust i'm going to remove this image on tablet or no actually here i'll just move it a little bit up more like this on tablet and then this section i want it to be centered so this features a section i'm going to say align center and that looks that looks okay i don't mind that now let's go to yeah feature that looks okay this paragraph let me change the font size to like 16 and the line height to like 26 and i'll make the heading here a little bit smaller yeah it looks okay work at the speed of thought those buttons still look good features that looks good i'm okay with that cool and this will definitely need to be smaller maybe 48. and 56 sure and then these buttons i'm going to stack them vertically and then just give them some margin from the bottom that looks okay i'm going to remove a mobile landscape i'm going to remove this image here so we just have this image yeah that's not bad okay this button is not centered so here i'll just remove that margin that looks okay you know obviously if i was designing for a client i'd be more way more specific as far as like my you know my detail detail to design but because um because this is just like a you know i'm just showcasing how to work with webflow um i'm just taking some liberties here okay uh it's amazing can you teach us how to create those menus that you taught us on your minimalist website video in which you use caribbean green and charcoal blue but design the menu with different layout um i'll have to check out that site again but i will in a second let me just fix this menu button here and [Music] nav bar so i guess i'll just set this to a position of absolute and place it to the right and then give it some margin like 40. and then for the navbar container or the nav bar we'll give it some height some specific height like a hundred and navbar container and i guess flex no okay never mind that why is this button in the middle okay navbar container uh let me try this there we go so i just have to justify it to the right and this must be positioned absolute this brand yep absolutely to the left so all i did was change the flexbox settings for the navbar to put the menu button on the right okay so for this brand i'm going to remove the margin on uh mobile landscape and mobile portrait and tablet looks okay all right so i would style this menu um yeah this menu needs some styling but yeah we built we pretty much built this layout i didn't even look at this mobile section but i pretty much followed what it was here oh here yeah maybe we could use grid for this let's try building this with grid this um these logos uh yeah let me try this real quick a bill and then and actually for this section that looks okay let me just change these features uh to 100 percent there that's better hey what's up jonathan how's it going just uh having fun in webflow here there was a request from a bill so i'm gonna um get to that in a second um yeah yeah jonathan i was showcasing this animation that i recreated in webflow that i'm going to create an interaction video probably this weekend on how to do this but it still needs some fine tuning all right so yeah let's for this logo wrapper let's let's change it to grid instead of flexbox so we'll do grid and oh that worked out well um [Music] so for desktop i just want one row so i'm going to delete this first row no sorry uh yeah one row and one column and i actually i don't yeah let's see um dude so i actually want each logo in just one grid cell so one column i have one it looks like i have six rows yeah this is fun can i place it i guess i can't do that uh so add a grid a line distribute i think well actually let's just flexbox let's do flexbox for desktop and tablet and then here let's try grid and let's add two columns that looks pretty good and center and let's remove the gap i don't need a gap here for the actually i need a gap for that and for the grid item yeah let's make these logos 50 you can limit the amount of items shown in grid and settings okay cool um so 30 percent and you can limit the amount of items shown in grid yeah can you elaborate on that uh each money factory and also great to see you cool cool so yeah i think i think i created the grid layout let's add some spacing there and let's try centered and i'm going to do something like um yeah that's okay yeah cool that looks pretty good and let me change the width of this wrapper to 80 percent so they come in closer maybe 60 percent and then i'll change the logo to 50 oh look at that grit is not bad wow i didn't know that we could turn flux into grid on different break points that is amazing yeah for sure um so so yeah that was actually a pretty cool exercise so i just used grid to make a grid of images so like i said like i have worked the grid before that's why i was like able to kind of intuit how to build this and you know what i kind of liked how easy that was maybe maybe i'll have to let go of my flex uh i don't know the word for it but oh there's a good word for that but i can't think of it but yeah i still think for like sections and containers i'm still going to apply flex settings to those for like if i want to center something in a container i don't see any need to use grid for that but like when creating like yeah a layout of like uh logos or images grid to me feels like it's a really good option for that and this is not centered so let me just remove that margin wow that was fun that just blew my mind thanks everyone for recommending grid i really like how easy that was and then we go to uh mobile and we have that nice layout which actually looks more like this and you know what let's try to make it look exactly like this so we have two rows and three columns so let's go into grid so i want another column oh wow yeah okay uh excellence that's the word biases or tendencies bias my flexbox bias for sure uh so vic wrote well uh quite a few people this is awesome uh what are the big limitations of fluxbox i prefer it over grid but i know people love grid i just don't see the benefit for most applications uh you know that's a really you know i was just kind of talking about that i i don't know if there's too many limitations with flexbox not that i can think of unless like i mean in this case there would be some limitation to creating something like this in flexbox like you'd have to add more div blocks to create this with flexbox like you'd have to add two div blocks and then stack them on top of each other and then place the logos in the two diff blocks with grid i was able to do it with instead of like two or three steps i did it in one step so cool thanks thanks excellence appreciate it uh make sure you have 375 on mobile 375 on mobile uh yeah i'm not sure what that means but uh yeah let me change the size of the logos here on mobile and change the this to 100 and let me resize the logo here to 60 or maybe 50. wow oh man my mind is blown right now look how easily we just designed this uh these logos to look more like this that was awesome that looks good i might add actually a bit more gap to the bottom of the rose okay i i think i'm i might have converted to grid just now i'm a grid what do you call somebody who's converted to something uh so yeah some added team gap so so i just want to kind of talk about why i i might just have converted right because in order for me to make something like this in flexbox like a grid layout like this i would have to add two more div blocks and then work with two different div blocks right to add two rows in grid it was just i just did it here i added the columns and the rows here with just a few clicks so yeah okay you're going to see me use grid more often in the live streams i'm surprised it took me this long to see the the value of it yeah i was just so stuck in my ways with flexbox and also like flexbox has specific things that i think grid might not like but at the same time okay let's i'm gonna i'm going to do something wild here okay so let me add a page yeah this is gonna be really cool i'm going to add a new page and let's go to the desktop and i'm going to add a section set the section to 100 vh and set the flex setting to center center confer a believer or if you want to tell others about grid's evangelist yeah i was thinking of the word evangelist yeah thanks excellence appreciate it um so let me set the background to this to white and in here i'm going to add a div block and let's make this i don't know a thousand pixels by a thousand pixels or by by 500 pixels okay and i'm gonna apply a grid setting to this so we have four grid cells and yeah let's remove the uh the gaps so done and then in each grid cell i'll add a div block so we'll just copy this div block all right so i have a grid of four that looks good and i'll just add some text in each div block so in the div block i don't want to add another grid cell and so what's cool about grid is that you can use grid and flexbox together so for example i have a grid of a two by two grid and in each grid cell i have a div block and for each div block i can just give it a flex setting so i can add uh flex inside of grid yeah flux inside of grid yep um so i'll just give this uh this this class name of grid cell grid cell oops grid cell here we go remove class grid cell and grid cell so i'm just giving it the same class so it automatically applies the flux setting created cell and then you know just copy and paste this text in here and then i'll call this cell 1 cell 2 cell 3 cell 4. okay so in in this div block i can add i can even add another div block right so we can style or create another like a card we could create cards inside of a grid and use flexbox for the card or even use grid inside of grid so in here let's say i had let's see if let's see if i can do this i'm going to copy this this grid of logos go back to that page and i can paste i can paste that this in here and let me just give it a grid display setting and yeah just like that we have that going on and let me just center the content in here and before i do that let me uh let me paste again and the partner's logo wrapper i'm just going to duplicate it so we don't affect the the site we built so i'll say 2 awesome and then i'll just do the grid display setting okay cool and we'll remove the the uh the rows have it be centered and then we'll make these logos a bit smaller so i won't do that there but you get the idea so we have a grid of four uh a two by two grid and then in the each grid cell which is a div block we applied a flex setting and then we also added a div block with grid inside of the grid cell so it's called grid grid ception that's what i like to call it grid section so a dream within a dream within a dream or a grid within a grid within a grid all right so yeah that's i mean come on why would you ever want to go to wordpress when you can do stuff like this in webflow like any layout that you can think of can be done with either grid flexbox or flexbox and grid or grid and grid and grid or flexbox and grid and grid flexbox and you know like the sky's the limit there's no barriers in webflow imagine like i remember in going into wordpress and seeing a website that i liked and seeing that it had a really unique layout and being like how would i do this in wordpress like i'm sure like elementor has probably made that easier but like to me i just wanted this type of functionality and power like with a web design tool and that's why i love webflow like nothing comes close to being able to do at least not that i've looked you know i haven't looked at a lot of other things but i mean come on like it's it's right here like we can do all of this in webflow it's just it's to me it's just amazing like mind-boggling okay um so cool so i'm gonna read through the chat here really quickly uh cool excellence convert believer nice read that yeah uh a bill wrote uh bill fazel super chat is not available in my country is there any way i can support you like do you have patreon any other way i can support you um i do have buy me a coffee so in the description area below um there should be a link you'll you'll see it says uh buy me a coffee let me just go to that link by yeah so i have it here and i'm gonna write a bit more description here but yeah if you go to this link a bill you can you can hook me up with a coffee hopefully it's supported in your country as well uh but much appreciated a few people have bought me coffees and again that just helps support this channel and the inter the free interactions that i make available and again yeah if you if you have questions about you know your personal project you know feel free to drop me a super chat and we can spend time going over that in these sessions yeah monorail you can do this all in wordpress two just have to write the css by yourself yeah uh i'm not gonna be snarky but i guess i will like good luck with that i mean i'm sure if you're good with code you can do it and any of us here could probably do it but i i wouldn't want to go back to code for what like i can just a few clicks and i can just do this you know but i have to be careful because i don't want to like offend coders and things like that which that's not what what flow's about because if we look at the code that's being outputted let's just look at that real quick that this will be fun so let's look at this and obviously this is not a great layout but look at the code that workflow output it's like a coder building this like just look at this so we have the section 100 vh centered centered we have the flex settings here then we have the div block and this has grid applied so grid template column 1fr 1fr so all the code is just as if a coder would have hand coded this using all the grid settings and it it even adds like the the different um web kit options here and i think for firefox like the the fallbacks and then we go into this grid cell boom like you know flex is applied here we can see the flex setting uh it's just beautiful the code that webflow outputs is beautiful like what's touching that i don't know maybe there is something that's touching that if there is i don't know about it and i'm not i'm so like into webflow that i don't know if i want to branch out to look but uh yeah so elementor you still have to go a long way ahead stay blessed more power to webflow for sure uh let me backtrack a little bit i think there was a few other comments um so manuel wrote yeah what okay uh terrific from my point of view the real power of good comes with rearranging content structure for responsive you can change the order as you like and that way it's not possible okay with flexbox yep so big row i see what you mean in terms of rearranging the order grid is very nice i use both but usually end up using flexbox for ease of use yeah vic stay tuned to this channel uh i think i'm gonna be working with great a bit more and we can all learn together on how to how to get proficient with with grid and the university has a lot of great videos on grid you know i might just go to it if i get really stuck but i've worked with great a few times now that i feel i can just intuit how to use it and and use the different settings to kind of kind of learn how to use it more in my my designs but with that said the videos are awesome too because there's just little details that you know could be missed when working with grid grid has all these amazing alignment features and distribution there's also you know you can also create grid areas and um and yeah and use this dense feature and when creating a column you can set it to min max or default and set the fr uni you can set different units instead of fr you can use pretty much all the units available for web design uh for the sizing and and things like that all right auto and here autofit can't be enabled when there are auto flexible fr min max auto fr min max auto auto other or other auto fit columns or rows cool cool all right someone over yeah both grid and flex make sense just depends on what you need to do and what you are more familiar with too i guess grid is like inception movie yeah for sure uh you can do this all in wordpress two you just have to write your css by yourself uh elementary used to have to always have to go a long way ahead stay blessed more power to webflow i once convinced my client that i won't be using code to build the website and i was hired immediately awesome i love i love hearing that a bill still a coder programmer but the interactive possibilities from webflow are greater than wordpress or elementor for sure yeah although i have respect for coders they are doing amazing job uh out there for sure yeah like there's still things that i think coders are still needed and full stack developers like to integrate apis and all of that like within webflow like the design functionality is amazing but then when you get outside to like integrating things like developers are still recommended and webflow developers can consider themselves full stack developers i feel because you can use things like zapier and parabola along with the webflow api to integrate third-party applications with webflow it just takes a bit of a learning curve to like work with parabola and zapier and and really map out what you want to do with the webflow api and what requests you want to send back and forth but once you learn that like you could literally go to like any business and be like yeah i'm a full stack developer yeah i use webflow but it outputs similar code as to any developer would use it would just be like how comfortable you are with ex like mentioning to your client that you use a no code tool and honestly i think no code is going to gain more traction where clients and businesses won't even care like they'll just want the end result and if you can give them a good end result and webflow does do that you can show them the code and be like it's clean code it's it's great you know i don't think the client should have any real issue with it christian thank you i believe you sent me a coffee a few days ago i was going to leave a comment i'm still getting used to the uh the coffee like comment feature but super appreciate it for sure i don't know if you just sent me another one if you did super appreciate it but i i did get the one you sent a few days ago um manuel wrote it definitely also helps to understand html css to work with webflow since it's basically just putting together code visually absolutely absolutely that's one thing like that i feel kind of uh i don't know if it's an advantage but it has helped me build and webflow the fact that i that i have worked with code a lot i mean when i built plugins for muse that was all code that was css javascript javascript html so i had plenty of practice working with web design and development concepts so once i got into web flow it was like second nature of like yeah i do know all this terminology like it makes a lot of sense uh with that said it's not a prerequisite to like have to to know a lot about the web design terminology and the web development terminology if you're new completely new to web development i would say just start with the webflow university like that's all you need and as you start getting more comfortable with webflow you can start maybe looking at interaction videos you can join these live streams monday through thursday and if you're just starting out and you have questions something's not making sense just drop the question and that's what i'm here for that's what we're all here for because i see we have a lot of pretty proficient or i could say proficient web flow users here uh manuel seems like an expert so so yeah like we're all here to help each other and and to help get you started with webflow if you're if you're new here um cool so abel fazal wrote can you teach us what is zapier used for in webflow a live stream about zapier would be really helpful oh christian thank you appreciate it awesome awesome oh i just i appreciate the support uh yeah it definitely it helps to to keep the momentum going and for me to to continue to provide you know great interaction videos and and and great live streams so thank you yeah and christian if you have a question just let me know uh cool so yeah can you teach us zapier um yeah let me let me put together something with zapier a bill i think that might be a super chat feature or like if you want to get me a coffee like because zapier is way more in-depth and i have to find like maybe we can use like like excel like i can do something with excel and and also zapier is a paid feature or paid application so there's that i think i do have a zapier account so and i might be able to do something with a free free account but i haven't had the need to pay for zapier but um but yeah i digress a little bit i i can i can definitely go go over zapier a bit um there was something and let me see if i can i think it was muhammad he sent me an email yesterday uh christian oh thanks christian i just saw my uh saw the the coffee much appreciated um so let's [Music] see muhammad wrote yesterday he sent me a link uh yeah so muhammad i'm not sure if you're you're here in this chat sorry i haven't had the chance to go over um what you sent yesterday but let's see i haven't seen muhammad in here today so muhammad wanted wanted me to create some of these interactions here on this oreo website and it is built in webflow like so any of this can be easily done and yeah i'm just curious what uh what you would like me to cover muhammad there's there's quite a few different interactions here i see a lot of circles yeah it's a cool site definitely uh cool hello craig how's it going yeah muhammad if you're here let me know uh what you would like me to cover in this interaction on this website yeah a lot of cool things here oh it's making me want oreos okay uh cool so so yeah i think we're nearing the end of this live stream we went over some awesome stuff i think this has been one of my favorite ones i know i've only done a few they've all been my favorite actually i love doing these live streams but the fact that uh that i've pretty much have converted to grid i'm gonna mess with it a bit more before like and get more proficient with it before like i start promoting grid even more but right now i'm still like i promote flexbox a lot because i think you should get started with flexbox because uh there's just a lot of power behind using it and for simple layouts and for sections and containers i think flex is great creating like specific cards flex is great for creating grid layouts though grid is just it's just awesome really really happy with it with that little bit that we did so yeah we finished this build i don't think i'm gonna spend more time on it but if you have a website that you want me to build for the next session so like i like the idea of like for each live stream i have a main build that i'm working on and then outside of that build like if there's questions i can answer those questions but to always have a base to go back to like if there's just you know no questions or anything i can just build and you can watch me build in the meantime between questions and discussions so if there's a site that you like and you want me to rebuild send it through yeah so i like how the site turned out as far as responsive yeah it looks pretty good obviously like i mentioned earlier if it was for a client i might do a few other things one thing i would do here actually for this feature section is change the width maybe to 75 percent and let's see feature um i want this to okay got it all right it's just the text has been changed like that i won't mess with the text too much one thing that we could do here this might be a cool thing for anyone who's not familiar with it the ch unit is a really cool unit so so here rather than use like uh and the uh what i want to call it the break like rather than breaking the text like this i can give this text a ch unit so i can say like uh 40 ch or it would be more than that 72 oh no um less than that 22 ch 23. we just go up 20 okay it doesn't really work well here uh scrap that idea but basically the ch unit lets you select how many characters you want within the paragraph and that will set the width of the uh the div all right so i'm just gonna do something like this let me just undo that okay cool all right so yeah that's why it looks like this on tablet if i wanted to adjust the width of this on tablet excuse me i was just cracking a little bit if i wanted to just the width on this on tablet i would rather use ch units or width here and not have a break a manual break in the text here um yeah so that's the ch unit cool so yeah this looks good there was one thing actually here let me test this okay that looks good yeah it's not bad actually for this i'd probably let's use grid for this you know let's yeah let's use grid because i want these images to be a bit closer so let's uh let's do that so rather than this grid image wrap this gallery image wrapper let's let me take out all these images all right let's uh let's do the thing here all right so there we go and i'll delete all these image wrappers so for this i'll just create a grid give it the grid setting oh my god this is awesome i love it zero zero oh no i do want a gap actually i do want to get for all of these 16 let's say 24. i don't need a a column gap and then for the yeah for the grid cells center too easy too easy oh my goodness all right so there is one other thing i kind of want to let's see yeah oh oh man stop it stop it just stop it and then i can add a gap here oh just stop it that's that's just nonsense that's just too easy look at that look at that oh my god we can even like if i wanted to add the images add these in here and have a yeah this could be a good example of this actually obviously if i was if this was a real like build i would i would add one more image so we have an even number of images here we have kind of this awkward these awkward three images just there and actually that's not that's not bad because the images are different sizes here but if i was the designer i wouldn't have these three different images down here they just don't make a lot of sense but we'll leave it like that but that was super cool like hopefully everyone caught that basically instead of using flexbox and adding wrappers and things like that i just used grid you know 2x2 grid gave it 24 gap between the column and the row and then for each grid cell like i could literally select the image and i just justify it however i want within the grid cell so these two i justified to the right and these two i justified to the left and that just condensed everything and put them closer together and the the the con uh the control that you have with grid is is amazing like you know to easily adjust spacing like that and alignment and justification this is blowing my mind this is awesome so let's go to tablet uh mobile landscape that looks good and then mobile portrait alright so let's let's turn this into one column uh so here on mobile landscape let's select grid and i'll just remove the uh a column so let's try it remove the column boom and let's go back to mobile landscape oh my god so on mobile landscape and prior it's using two call two yeah two columns right up here and then on mobile we removed one of the columns and now what i can do is just center all of these images in the grid cell so they're perfectly aligned wow oh this is so cool so cool and look at that perfectly everything just lines up beautifully look at that amazing let's check out desktop okay so desktop all we have to do here is yeah we could use flex on desktop because it's just one row so like just justify it space between done and then tablet done mobile landscape done mobile done oh awesome that sounds like a great challenge abil fazal let's do it find me a site and we'll build it um if if there's no reque if there's not a site that's requested i'll just find one on one page love or maybe i'll go on dribble today and just reach out to a designer and ask if uh if they want me to build their site on these live streams dribbble has a lot of awesome websites wow i am a grid what i'm trying to find the word i know um excellence wrote like believer evangelist can uh when when you convert to something there's a specific word for that what's the word when you convert to something transmute convert transfigure um convert influence propagate not yeah there's a word for that awful yeah maybe it's convert or something uh cool how about creating yep that would be huge for sure vic let's do it let's do it and here there's too much uh too much margin here or padding let's change it to zero or ten all right yeah and if you find a site that has a design system that would be that would be awesome too like i definitely want to cover like working with a design system it just makes building much easier and there's things we can do like applying global swatches uh styling global tags and we would get first into preparing webflow for the build which i think is a super important step to building a website you want to have your color palette your your fonts you know your headings all that styled prior to building the site and we could even build a short little style guide prior to the site build so you know what uh yeah let me look on dribble over the weekend and see if i can find a good designer who has a style guide and a site that they want to to build a disciple yeah maybe a disciple of grid that kind of works yeah yeah uh yeah yeah we'll keep working on this excellence um that kind of works it's not quite the word i was looking for yeah it seems a little excessive it does yeah evangelist kind of maybe i gotta go but love your channel man epicness thank you excellence appreciate it every monday through thursday i'll be here 12 to 1 p.m yep thank you thank you uh cool 117 playbacks today that is awesome yeah spread the word you know if you know anyone who's getting into webflow or anyone that needs help with webflow send them my way to the live streams and we'll get them helped you know we'll and we'll cover everything together and it'll be a lot of fun and this is a place for like support to like anyone who's struggling or if you have a deadline like tomorrow and you're like i can't figure this out you know webflow has an amazing support team as well so reach out to them but if you want to cover some want me to cover something in the live stream you know that's what i'm here for uh cool so awesome stream just to recap you know we're currently i'm currently working on on this animation uh building an after effects in after effects inspired by this code drops animation and i'll be fine tuning this because they're still yeah so let me just go back to this i'll be uh fine-tuning this animation and hopefully by this weekend i'll create a video on how to build this with after effects lottie body moving and then adding to webflow and creating interactions to trigger things when other things are triggered and all that good stuff oh it didn't mean disciple was excessive just zealot or support is that like maybe that's too aggressive supporter yeah yeah um our fan maybe a fan like a fan of grid that could work like it's nice and light and i could just be a fan of grid uh but if we have more words definitely uh you know post them yeah vikro i didn't mean disciples too excessive just the containers as grids yeah yeah that's uh i i i agree with you on that that's why i think flexbox is better for for uh for con uh for containers just because to me containers are more like the the macro level of the layout and you don't want to get too detailed with like specific layout on the macro level you just want to use like small little adjustments so that as you're building out different sections you're not worried about completely changing the small little details of a grid but what i would do is like start with the sections then in the section use a flux setting for the container or use a flex setting to center the container and then for the container i might use another flux setting to initially place specific elements either to you know center left to the right and then i would use wrappers with or yeah wrappers with grid settings applied to those to get more detailed into the the build a convert yes that's it that's it yeah yeah i think this did we did we mentioned convert before maybe we did converter convert but yeah convert feels like the word i'm a grid convert that's oh that feels right that's it sorry if somebody else mentioned that but uh right now it's just landing for me like it that feels like the right word um so yeah we'll we'll get into grid and and flex and we'll see what what's the best situation or scenario for for each layout um but yeah so it seems like it's working great now this animation but like if you refresh the page we have a little glitch in this and right on that second slide and i have no like i don't know why yet so that's something i'm gonna i'm gonna work on and then i'm gonna change the easing of the animation make it smoother and yeah it's just a really fun build so just to showcase like this is what that uh okay here we go this is what the animation looks like in after effects so this was built in after effects and it looks super smooth in after effects but the reason it doesn't look as smooth here is because i adjusted the timing i made it longer and uh and after in webflow so yeah there's little things we're going to tweak there um yeah we finished this build i i think we're done with this i mean we had we had fun with it and uh oh funny funny enough on the mobile here for the sigma design it looks like they have different images and they remove the second row yeah that's not something that i don't think any designer well so a designer might do that to to condense the information on mobile but yeah we made it look pretty close to this on mobile if not almost exact yeah we could adjust this image here there's a footer here we're not going to get into the footer for this one we'll just go ahead and and get into a new build but uh yeah let's publish this and i'm gonna show everyone this uh this tool that i use it's called sizzy uh it is paid but you get 14 days free and i really like using it i just used it recently but you can check the responsiveness on of your site across different screens so like i can check does this look good on an imac 27 inch yeah that looks pretty awesome i'd be very if if this was for a client i'd be very happy with this build this feature section is too far so let's go ahead and adjust that really quick on desktop it's way too far so features [Music] the container yeah so on this feature section i'm going to remove that padding from the top because i think we have a lot of space here we added some padding or something to to this i don't know uh it's just how it was built so yeah i just removed the padding from the features i think it's how we built this uh these hero images or this animation here and then this gradient bottom yeah where we ended up with a lot of space here at the bottom so let me republish and then i'll refresh and then we'll check the responsiveness on the different uh different devices so it's sizzy and it's sizzy.co i'll leave a a link in case anyone is interested in working with this uh bill thank you thank you for joining uh uh bill wrote thank you for another great stream appreciate the value you provide here related to webflow yes for sure thank you let me refresh and that's better i like features a little bit closer not too close so that the user can kind of take this in take this animation in and then we go into the site looks good so let's check a small laptop or a medium laptop i would add more padding here to the menu that's too close and even on yeah that menu is too close to the top so we would adjust that medium laptop looks good small laptop yeah that's kind of large but a small laptop would probably be like a chromebook or something but we can see everything fits nicely and i am using a 1200 pixel container which i think i might use from now on i really like how that container works i'm using a 1200 pixel container with um 40 pixels of margin from the left and the right uh macbook pro 15-inch looks good then we have an ipad 12.9 yeah i want to adjust that menu that's so close to the top look at that that i like that a lot so like on ipad you see how this hero section fits nicely and then there's enough space to kind of go into the next section right we give the user like a visual visual uh a visual breath before we get into the feature section and then we get into contents then we get into the gallery then partners then testimonials and then this last part here we would have a footer i didn't finish the footer there but oh and i didn't design the the mobile nav maybe i'll do that tomorrow because we've we've gone over quite a bit on the time this section here i kind of would adjust because that's too much space on the left and the right but that looks good on ipad liking it yeah you see how there's a bit of space here that's i'm not sure if we change the uh the margin on uh on tablet but yeah that looks good oh this looks really good wow quite pleased with that last section there that looks awesome okay nice and yeah we you'd want to make sure all the alignment is looks good on the site yeah and this design doesn't call for too much alignment on each section i mean we have these logos here you know these cars are nicely aligned but this isn't aligned here yeah some of the alignment isn't perfect but it's not bad and then iphone 12 yeah this this figma land here on the iphone 12 looks good the buttons look good i would make these buttons the same width they look a little bit different there in width this looks okay even if even though it's like off the canvas that still looks good i don't mind it this i would adjust the text because like the uh the widows and the we call them there's like that terminology for overhanging text i don't know why there's that glitch there my iphone my simulated iphone 12 is glitching um cool yeah look at that this is where we use grid i love that looks awesome and we use grid for that love it and we use grid for these images to appear yeah all right and this i would add more padding here at the top um iphone 12 max i'm not going to spend too much more time uh because they're pretty similar iphone 12 yeah but yeah this is sizzy daco like it's a great uh application yeah it would work with the text that's one thing like i entered manual breaks when i was writing text that's not the way to go when designing a site you want to use either character units or with to adjust the width of the paragraph or add new paragraphs so that you have more control over how the paragraphs look on different devices you don't really want to use breaks because look at this that just looks wonky like one word here like you know i could maybe adjust the width of the this paragraph to have it not look this way but you know you'll want to use character units or specific widths for uh paragraphs yeah it just gives you more design flexibility if you have multiple paragraphs or things like that and if you do have two paragraphs it might be worth adding two paragraphs you know because then you can adjust the width for individual things and you know typography is super important when designing a site because you want users to to be able to digest the information clearly and when they're reading you want them to read in a good way like here i'm reading like boom and then i have this line here this middle text you work like that doesn't doesn't really fly as far as legibility and this here i might go back and adjust that tomorrow we'll see but yeah so looks pretty good the the only thing i want to change real quick is the spacing of the nav bar this nav bar was tedious wasn't it if you watched the first video when i built this uh it you'll see kind of how long i spent on on this nav bar so i'm just going to add 40 40 pixels from the bottom and the top to the snap bar make it a bit wider not sure if i need to add 40 to the bottom let's just add 20 to the bottom and publish and then let's check that out on the imac 27. yeah that's a little bit better um still i still want more space than that i don't know why laptop maybe maybe 60 padding all right we're nearing the end i mean we're 20 minutes over but this has been a lot of fun yeah there we go that's good amount space oh this uh this logo got left by itself oh this is where yeah this is where the so i'm gonna do 30 from the top no uh 40 from the top and bottom something like that so that this logo stays centered um yeah i would play with that a little bit more because i did like 60 60 was the kind of spot for the menu or you know what instead of applying it to the nav container no i do want 20 pixels of padding 20 pixels of padding and then to the nav bar we'll add some padding as well so we'll say 40. 40 from the top and zero from the bottom okay that's it that way the logo and the text is centered uh responsively is free alternative to sizzy i'll take that out real quick omkar thank you for the suggestion and let's see we're publishing this will be the last thing okay let me close this and suzy yeah i like it noise looks good all right everyone that's that concludes the stream let me check out responsively and oh it was a number one product of the day on product hunt responsively app okay download now it's free oh my god this is awesome i'm learning so much from everyone in just this live stream this has been an awesome live stream everyone check this out responsively.app download now and use it for free is there any gotcha is there any catch to it are there any upsells let's check out the road map look at that they have a road map that's awesome all right so i'm guessing for now it's free then they're going to have upsells with more features down the line at least that's that would be the smart business move because obviously it costs time and energy to build something like this but for now it looks i mean i'm gonna look at this it looks like everything i would need uh sizzy did like one thing i do want to mention with like if you're looking for super super super advanced features like check out because before was super basic and i just recently updated it because i started using it again but let me see if i can showcase some of the features here uh i might not be able to show it all here but yeah like okay i can show all of the screens at once i don't really like this view i don't i don't need to see all the screens at once yeah i like this view uh but yeah sizzy offers a lot of advanced features like and they also have a console you can check everything out in the console and [Music] yeah they have a lot of good stuff all right so i'm going to conclude the stream that is it for the stream uh how do you yeah it's open source okay so maybe there won't be any upsells for it uh awesome how do you yeah it's an open source not as good as sizzy but will work cool cool um how do you do interactions like the responsively website that shows features in a window when you scroll down are those screen recording as gifs uh let's see so let's let me refresh those features okay uh these look like gifs let's uh let's inspect that yeah it's a video it's a video it's an mp4 video like you can click on it yeah it's a video i found your channel today been following you on webflow i'm gonna be regular from now on awesome thanks omkar yeah this this live stream is growing this is awesome super excited it's very cool all right uh i think that's what you're referring to vic their their videos here and they added a border radius to the videos yeah got it thank you i'll be tuning in awesome uh so i'm gonna conclude this live stream again i seem to go over like 20 30 minutes on my live streams but that's okay because they're they're very enjoyable for me and love hearing from from the community from everyone who's using webflow and all these little you know tips and tricks we're learning uh together and yeah stay tuned for tomorrow i'm going to find another no not tomorrow there's no live stream tomorrow next live stream is monday uh today's the 9th 10th on the 13th monday the 13th will be the next live stream tell everyone you know about this live stream anyone who's interested in web design who's interested in web flow tell them about the live stream let's keep growing this uh community this uh discussion and uh yeah let's keep learning webflow together and uh becoming proficient with all the different features in webflow alright thanks everyone have a great rest of the day and i'll see you monday later peace okay cool

Channel: WebDev For You

Views: 322

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: 47kGwPHHOLw

Length: 89min 15sec (5355 seconds)

Published: Thu Sep 09 2021