Making a site responsive using Flexbox in Webflow - Live Stream 9/15/2021

hello everyone welcome welcome to the live stream um we'll go ahead and get started and yeah looks like we're all good uh so yeah looks like the viewers are coming in more and more which is super exciting uh definitely want to build momentum with these live streams and the more that users use webflow i think the more beneficial these live streams will be and i'll be here to answer any questions regarding webflow or if you need help with your project i'll be here as well uh so welcome if you're new uh to the these live streams um i do these live streams every monday through thursday from 12 p.m to 1 p.m um central time and basically i go over everything webflow from creating layouts uh building websites from scratch creating interactions and animations as well as providing support if you need help with your personal projects for personal projects i do ask for a super chat and that just makes your question a priority and allows me to answer the question and it also supports these live streams and my youtube channel so so yeah hello alex uh alex and bass welcome bailey hello hello oh this is so great uh yeah i love seeing new new folks come in um yeah super exciting so hopefully you caught my intro uh if you have any questions regarding webflow definitely let me know amkar uh thanks for for your consistency and and just appearing and just showing up very cool nice um so so yeah if you didn't catch my live streams earlier this week uh we're basically going to stick with the theme of yesterday and the day before and we're just building out this uh this website here um with this parallax effect and this heading and basically we're building out uh the sigma website uh so it's not gonna take us too long to build the rest of this today um and it's just like a site here with these mountains so it doesn't look exactly like this because i cropped these images myself in photoshop and and yet ideally i would have liked more contrast with some of these images but i just got them from unsplashed and then cropped them in photoshop so so yeah if you didn't catch that that's in that was in yesterday's live stream where i used photoshop to crop these mountains we have a sky in the background and then i cropped this image here of this this person on the mountain and we just added a small parallax effect in webflow so today we're going to be added the adding the content below here to to finish out the site um so yeah i might just you know this shouldn't take too long because basically we just have to add you know a div block here and add all this text and this image and that'll be a good practice so if you're new to webflow you'll get kind of an idea of how to structure content how to add content and you'll get an idea or a look at how i structure uh my content and use flexbox and things like that omkar wrote i have marked my calendar for this every day awesome very cool so yeah we're just going to keep learning webflow so it's it's just a great live stream for me i personally like it because it it just builds the habit for me of continuing to work with webflow and getting even more more uh proficient with it and there's just so so much to webflow and you know they're not going to stop adding new features new um yeah new features and different things you can do in webflow that you know there's no shortage of things to learn in webflow and web design and development in general so we'll continue learning we'll continue practicing and yeah all right so i'll go ahead and start this build right here um and one thing i note in the sigma file is that they have oh no that's the [Music] oh the width here yeah the width is 1462 for this container that's a little bit large i don't like to work with containers that large maybe on larger break points we could have a container that large but typically i like to keep my containers around 1200 pixels i have been looking at using vh for containers lately but i haven't messed with it enough to to recommend that practice yet so we're just going to use pixels for this container we'll set it to a 1200 max width and then we'll add this content in here so i'll go into webflow and let's just go to this bottom section here so this is the content section we have the hero section and then we have the content section if we have some time too i might change out the sky and some of these images but for now we'll just go ahead and and work with this so we have the content section so let's look at the content section we added this hero gradient and we just set it to absolute and moved it to the top so let's go ahead and add the container so i like using the shortcut command k to add elements but you can also go to the elements panel here click the plus and select a div block so i look using my own personal containers i don't really use the container element here in webflow it has a max with i think like 920 or 960 but i like using my own container so i just add a div block manuel welcome great to see you alright so i added a div block and we'll just call it container i'll set a max width here of 1200 and we'll set it to auto so for the spacing i'll click on this uh yeah this auto button and it just centers the container so let me let me uh resize this navigator here so we can see this better so prior to clicking on the spacing icon right here um it's it's aligned to the left so i just want to click it right here and we have a centered container that looks good and then i'll just add some padding to actually let me add some padding to the section i know some users add like five percent padding uh to the section and that might be something to do but i'll just add like 40 40 pixels of padding to the left and the right of the section so that our content um yeah so when we resize the browser so here if i resize the browser and actually let me add the content first and this could be a good topic to cover today like what i haven't really focused on that idea like what what's the best way to apply padding to the container or or to the section so that as the screen gets smaller the content isn't touching the sides so anyways i don't want to dive too deep into that concept right now but once we add content we'll we'll take a closer look at that all right so we have the container and basically how i'm going to create this um yeah i'm not going to draw it out here but basically we have a div block so i'm gonna put all of this in one div block so i'm gonna call this uh what would that be it's not a section but it's more of like um i'll just call it uh it's not really a card either let's see this is more of a i'll call it an info [Music] an info section sure so we'll add a div block so i'll hit command k i'll add a div and we'll call this info wrapper alright and then i'll add another div block in here and i'll call this info left okay and then in the wrapper i'll add another div block and i'll call this info right so i think i will actually draw this out so that we can see it a little bit better so let me open miro it's kind of this program i used to like just draw and yeah you can see that i had something drawn there before let me close this and we'll close this um so yeah let me delete all of this and delete it so basically in figma so if we go to this figma section so i'm going to create this card here so we have this text it says get started what level hiker of hiker are you and we have some paragraph text and we have this read more uh text here and we have this image on the right so basically how i look at this and i cover this in a lot of my live streams so it's using the box model so picture things in boxes so i'm going to use the rectangle tool so we have one box and um [Music] i'm still getting used to this tool here i definitely want some stroke to the box um yeah okay let me just draw it out then with the marker i'll use the marker so we have um maybe notice the highlighter we'll use the marker here okay all right so we have that box right so we have this box i called it the info wrapper and this box is going to contain all this information so we have a left side on the left side i'm going to add the text here and on the right side i'm going to add this image so here in miro basically the way i'm going to do it i'm going to add another box in here right and this is going to hold the content and then we have another box in here and this is going to hold the image so this i called left info left and this one's info right okay so this is gonna be the the image um yeah image and then here we're gonna have the the text right so we're gonna have this text up here we're gonna have the heading the uh the paragraph text in here that was a bad example there so we have the paragraph text in here and we have like this little button thing here um and then we have a number here and i'm gonna position it absolute it's like zero one i'll get better at using this uh software here but that's basically the gist of it that's the box model so we have like boxes and boxes and that's why you'll see me call things like a rapper so basically this outside box is just a wrapper you know that's why i like calling it a wrapper because it wraps the content inside of it and then to this wrapper we can add flexbox so the left and the right are horizontally aligned all right for anyone who's proficient with webflow i'm sure that's very familiar and like you know but i do want to to uh reach all audiences like you know if you're new to webflow i definitely want to explain uh what i'm doing so like i mentioned before we can see that the left info left and info right are just on top of each other and the way we can align them horizontally is by selecting the info wrapper and selecting flex right up here this display setting and here i can set it to justify left and align stretch so now the left and the right are are horizontally aligned so what i can do here is i can look at my figma file and i can kind of gauge the percentage percentages of these different elements so yeah there's a few ways to approach this but basically what i'll do here i can see this image is about i don't know 30 percent of the width of this container so i'll say 70 for the left and 30 for the right so here for the width of info left i'll say 70 percent and then for the info right i'll say 30 percent all right and that's it so now i can start adding content to the left side actually one thing we can do to make this visually easier as i'm building is we'll add the image first so i'll select this image in figma and then i'll just export it as a png so i'll just click export and i'll show it in my downloads and it's 594 kilobytes that's a bit large but one thing i recommend i like keeping my images at 300 kilobytes so we'll just run it through this compression so it's compresspng.com i'll go ahead and type it in here in the chat compresspng.com or i'll just paste the link so that it's clickable all right so uh yeah so i'll download it and again if anyone has any questions as i'm building uh please feel free to add it in the chat and if you want me to create anything specific if you have something in mind that you want to learn how to build definitely leave it in chat and you know i can i can look it over alright so now the image is 183 kilobytes that is much better depending on if the quality gets lost too much you know we might not want to use the compressed image but i think it should be fine all right so now in the info right i'll go ahead and add an image element so add an image choose image and i'll select this image here bam so now we have the image it's on the right side and i'll say info image just give it a class name and i will start adding the the content here on the left so i'll go into figma let's go ahead and add some div blocks here so let's see one two three four so how do i wanna do this um john how do you approach the vertical padding margin if you build a structure like this the vertical padding margin i don't typically add vertical uh padding well it depends on the sections i'll add padding um and to the to the uh actually yeah i i'll add padding to the sections and depending on the entire build like usually i'll reference the design so here we can see that each of these uh info wrappers there's some spacing in between so what what i'll do here is just add some margin actually to the bottom so when working with spacing you can either add padding or um or margin so for example here when we get to the to the footer i'd probably add some padding to the bottom of this section so all the info wrappers are going into the content section so for the content section i'll probably add like i can do it now actually i can add padding of like maybe 200 pixels so that when the user scrolls they don't just finish right at the bottom of the footer text and you asked do you use m or pixels also when for example headlines have top margin do you adjust a container around reducing the inner top padding also when headlines have top margin do you adjust the container around reducing the inner uh that's a good question i think i'll have to just start building to answer that because a lot of my decisions are based as i'm building the layout um and i just try to go through the path of least resistance meaning that if i can add margin or padding to an element without affecting necessarily other elements that i don't want to affect i'll take the ladder or yeah i'll take i'll take that over trying to change the properties of elements that i know maybe don't all need the same property if that makes sense so for example if i know i just want to add some spacing from the top here rather than adding margin to the info wrapper like rather than adding a top margin to the info wrapper i could just select the content section and add let's say 100 pixels of padding from the top and that moves all the info wrappers down without me having to affect the individual info rappers if if that makes sense um someone i'm always struggling with this a bit and often end up in a big mess yeah i understand i think that comes with the territory of building websites you know like trying to figure out that that good balance of where to add padding or where to add margin um that's all part of it and i think it just comes with practice but maybe a good rule of thumb is to use the the outermost element that's not going to affect individual elements if you only want to change a specific setting i don't know if that didn't quite make i didn't communicate that clearly but in this example like how i said if i know i only want to add margin or add spacing to the top of this section and and uh this might be better demonstrated when i add more info wrappers um so let me continue with the build and then we'll we'll uh kind of harp on that concept a little bit more um so so yeah so let me just build this i'm gonna build this out real quick so i'm just trying to think how i want to do this um [Music] yeah so let's see i'm going to add three div blocks in here so top middle and bottom because these uh these little design elements this has a line and this has an arrow i need i need to put them in a div block so i can uh align them horizontally um yeah within the design so basically i'm just going to add a div block so div div and i'm gonna call this info left top i'll add another div and i'll say info left middle and i'll add another div and i'll say info left bottom okay so for the top i'm actually just gonna let's let's go ahead and go through it again so let's see so get started it has a line so we'll add a div block here and i'll call this do they all say get started nope i'll call this um yeah excuse me i'm not uh my class naming today isn't great i'm just trying to info i'll call this info uh i'll just call this top left top text yeah left no wait this will be this is going to be the line so left top line all right yeah class naming can be uh that's another thing uh left top line and we'll make it the width we'll make it 30 pixels in width and the height will make it 2 pixels all right and then we'll grab the color here so this color is this yellow color and so i'll give it the background of yellow all right you can't really see it right now so let me and let me make it a little bit uh wider maybe like 50 pixels and let's see what i did for this one it's 60 pixels so let's just keep it consistent uh it's so hard to see right now 60 pixels and in the info left top let's go ahead and add the text uh it's get started so i'll hit command k and i'll just add a text block and we'll say get started and i'll give it the same color so for the text color we'll just make it yellow let me clear this out here at the bottom so we'll make it yellow and i'm using dm sands for this and then for the more type options let's make it um all all caps and we'll add some letter spacing of like three pixels that looks good so now for the we see that the line is on top of the text so we just want to select the info left top give it a flex setting and we'll say align center and that looks good so for this get started text i'll just give it some left margin maybe 20 pixels and that looks good and i'll just call this left top text okay so that looks good there hello tori welcome welcome welcome welcome to the live streams i'm not sure if you've if you've been here before but basically i do these live streams uh every monday through thursday from 12 pm central to to 1pm uh central time and we cover everything webflow how to build sites in webflow uh you know i go over how to create animations and interactions in webflow and i also field any questions that you might have regarding uh webflow and i provide support as well and if you have a particular question relating to your project i do answer those via a super chat uh within youtube here all right so welcome uh feel free to ask any any questions in chat all right so so yeah we're just building out this figma file here and i'm going through the process of adding div blocks and using flexbox to to add this content so now we have this heading here and it's what level of hiker are you so this is going to be i'm going to give this an h3 heading i feel like these are h3s rather than h2s because they there's three of them and i guess it could be h2s but i don't feel they're that important to bh2 so we have this is the h1 heading and then the h2s there are the h3s the reason i don't want to give them h2s is because there's not really another level below it or like i'm just trying to gauge the importance of these headings here yeah i'm just gonna go with h3 if you feel like they should be h2 let me know but um yeah let's just go for h3 for now and we can even research that like heading hierarchy like h1 through h6 this is something that i'm always kind of debating in my mind too so um let's see yes it doesn't give us a good example here we go h1 yeah heading level heading level two i guess they would be h2 because they're the next headings in line so so h1 yeah common yeah so one thing that i learned recently uh you want to add for your navigation like if you're building a menu your your navigation items should be h1 that's something i didn't know before cool so let's see primary navigation right right and here we go h1 h6 headings yeah let's just let's just do h2 because of the next kind of headings in line but this is something that i might read over a bit more you know having used h1 and h h1 through h6 tags like and i'm still not familiar that that's more on me type of thing but uh yeah i'll set it to h2 and then we'll style the global tag all h2 headings and uh we'll set the font here to let's say play fair display and i'll set it to white there might be more typography experts in this live chat that might want to chime in but uh yeah so we'll do play fair display here and we'll set it to let's set it to medium for the font here and i mentioned that i would be using ms so for the body let's just go ahead and the body all pages the global tag uh how how about making get started h2 because it's basically a higher level um yeah i don't know if i to me that this get started feels more of like a decoration type of text and or maybe yeah where you go is the key yeah like so where you go is the key isn't really descriptive yeah i think these larger texts are more descriptive of an h2 tag so what level of hiker are you like if you're searching for this uh online i think this would be a more important title to like focus in on and picking the right hiking gear is definitely something that's more searchable i feel so is hiking essentials and understand your map and timing yeah so i think these larger texts would be the the h2s um so yeah we'll go for that we'll go with that for now all right um i just like with h2s um or no h1s are usually the main topic of the page and then any subsequent headings would be like h2 and any headings within the h2s would be like the h3s and so on and so forth so it's just like a a heading hierarchy so yeah in in in theory these i guess these would be h2s because they're the next headings after the main heading here which is be prepared for the mountains and beyond all right cool so let's go ahead and so we added the heading i'll go ahead and add the text here and let me see what the size is so it's 64 pixels so basically we're using rems and m's for this build and if you're not familiar with rems and m's i just recommend doing a quick google search and it's basically using um yeah let me let me we're getting a little bit in depth in this live stream so rem and m's definition um so yeah this could be a good article uh to to read and uh yeah here it says while m is relative to the font size if it's direct director nearest parent rem is only relative to the html root font size so and i think essential mentioned this in in the live stream a few days ago using rems and ms is better for responsive design because it uses the device's base font size and it keeps all the the fonts uh all the font sizes relative to each other um i butchered that but basically we're going to use rems and m's if if you like using pixels feel free to use pixels there's nothing wrong with that but i'm just going to go ahead and just kind of start getting familiar with rums and ms because i do think i want to start teaching this this way of using fonts uh throughout my live streams all right so i know i'm digressing a lot as we're trying to build this it's just a simple build and i'm going into all these different avenues but bear with me we're gonna get through uh building this uh section here all right so what level of hiker are you let me go ahead and just type this in what level of hiker are you and is it sentence case cool all right so to the body this was i was working on this we're going to apply it to the global tag of the body and we're going to apply a font size of one rem so it's going to use the base unit of the browser so the body is going to use and usually it's 16 pixels and then the line height i'm going to make it unitless so it's basically 100 and that looks good so this heading to me is a bit large so let's just make it four m's so for any of the of the fonts inside of the body we're going to use m's instead of rem so the body has the one rem which is the base font size which is typically 16 pixels and then we're going to use m's inside of the body and it's relative to the rem so 4 m's would be 16 times 4 which would be 64. so this heading is essentially 64 pixels all right and then for this heading for the h2 heading let me remove this class because i want to style the global tag so we'll do that again dmsons oh no this is um playfair display set it to medium and we'll set the color to white okay for this let's set it to two m's all right which is actually the same size that we had it at so two m's and i can see here that it's 64 pixels in the sigma file so let's see 64 pixels so this would actually be 4m which to me feels a little bit too large let's just try 3m 3m looks pretty good or i'll say 2.5 yes now i'm just kind of eyeballing it we're not going to necessarily use the exact font sizes from this design i'm going to eyeball it and see what i feel comfortable with and i'm going to say one for the line height and make it unitless so it's essentially yeah 100 all right so that looks pretty good um let me go ahead and add the paragraph text so in the info left middle i'm going to add a paragraph and for this text i'm just going to copy it here from the figma file and let's just dial the paragraph text so all paragraphs we're going to make them dm sounds we're going to change the color to white and the the size we're gonna set it to uh let's do 1.5 m or 1.2 let's see what it is here uh so it's 18 pixels so it's about 1.1 m's that looks good um line height we'll leave it at one or actually the line height for this paragraph let's set it to 1.2 we'll set it to m's as well uh 1.2 um i set it to 1.4 so i'm just kind of eyeballing it and just seeing what feels good for the for the text this ms looks too large so i'm going to say 1.125 ms or 1.025 for the paragraph all right that looks pretty good and we'll adjust the size of this left section so that it's a little bit smaller uh so let me go ahead into figma and i'll just add this read more with this arrow all right so in the info left bottom we'll add a text block and i'll call this read more text and we'll say dm sons let me grab this yellow color and we'll change it to that yellow and we're going to make it capital case even though it's not in the figma file so i'm taking some creative license with this uh build let's let's see how it looks all lowercase yeah let's leave it all lowercase and we'll say one m [Music] for this font size yeah i'm cool with that and let's go ahead and export this arrow which is a svg icon so go to export let's preview it yep looks good i'm going to export it as svg we're going to export it and let me show it in the finder oops that's not it right here okay there we have the icon and let me place it in the assets panel perfect and then i'll just click hold and drag and place that in here and then for the info left bottom we'll set the setting to flex and perfect and then i'll just give this image so i'll just call it left arrow and give it some margin from the left maybe 10 pixels and i am happy with that that looks good all right so now i'll just focus on some of the spacing so what level of hiker are you i'm going to first yeah first let me add some oh i can see that this text is not perfectly aligned to the left here so for this left info left section i'm going to give it let's see yeah i'm going to give it margin from the left and the right in percentages i'm going to say 20 percent or maybe ten percent and ten percent no don't quite like that here i got a better idea so for the info left rather than seventy percent let's set it to fifty percent and let's see here [Music] yeah it's actually smaller than that thirty percent maybe forty percent something like this yeah that looks good forty percent yeah i'm happy with that and then for that's a line to the right so i'm going to say for the simple wrapper i'm going to justify to the right so all the content goes to the right and then for the info left i'm going to give it a lot of margin let's say 80 pixels something like this maybe even more maybe 100 pixels all right and then i'll just work with the spacing here so what level of hiker are you definitely want to add more um line height to this so let's go ahead and select the alt all each two headings and for the line height let's say 2.5 m we'll say 1m we'll say 1 1.3 ms and we'll add some more line height to the paragraph here 1.6 ms and that's looking good and i'll add some margin to the bottom here of this heading so i'll call this yeah we'll just style the h2 heading we'll give it 20 pixels from the bottom and get started we'll also add some margin to the bottom of this get started actually yeah let's see here yeah oh it's a margin here maybe here install all the h2 headings and let's add 30 pixels of margin that looks good and then to this paragraph text let's add 30 pixels as well all right so i'm kind of styling the global tags that's not a necessity like you can give individual classes to the paragraph and the different elements here but by pl by adding specific styles to the global classes we don't have to [Music] continuously add new classes and i'll explain this in in a second uh i'm really going all over the place today with it but uh hopefully you're learning something as i'm building um yeah that looks good i like the way that looks we set this to 30 percent so that this text is you know we don't have any kind of like what do they call those widows and um [Music] or basically so the text is is aligned well here and we can actually [Music] let me let me set the width of this heading so i'm going to give this heading actually a specific class so we can work with the heading so i'll call this um i'll call this getting started heading and we'll give it a specific width of let's say 30 ch or maybe 20 ch how about 16. all right cool because i want it to look similar to this where like what level of hiker are you where ru is at the bottom so i'm using the ch unit which is the character unit and it basically denotes how many characters you can have within the width of the div so right now we have 16 characters so one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen uh it might not count spaces so i don't think it's counting spaces but yeah we change the width to ch units um cool so that looks good i like the way that looks even though i went down many different paths to kind of explain that but typography is an important aspect to web design so that's something you want to familiarize yourself with as well so you know i always recommend this course um if i go to resources it's called learn ui design and it covers everything about user interface design and typography like is one of the main sections like he goes over everything about typography and it's it's by eric kennedy and there's also another book that i highly recommend um web typography ebook and it's uh this one here so i'll leave these links in the uh in the chat so one of these is my affiliate link here for um for learn ui design and then this book uh i highly recommend it's uh how to create better web typography so i'll leave that in there as well and hopefully you guys can see those links all right so that took quite a while um but we did it we built this section and let's convert this bottom div block to a link block so i'm going to right click and say convert to link block and then i'm going to remove some of the underline here from this link block there we go so we can link this out to to another page if we want all right so we built out the info wrapper um that looks good everything looks aligned very nice and they're using a different font here that's why it's a little bit wider i don't think i want to do let me try to add some letter spacing here to this font no i don't like that we'll just leave it as is all right so i'll copy this info wrapper three times and we'll immediately add some margin to the bottom let's say 40 even more let's say 100 okay and basically what i want to do here is like the opposite oh we forgot to add the number here let's do that real quick too so in the info wrapper in the info left i'm going to add a div block and if you're new to webflow and you're watching the stream like don't get intimidated um you know i'm just going through many different facets and things about web design and development i do highly recommend that you kind of get familiar with some of the topics i'm covering or talking about but if you're new all you really need to know is basically how to structure content in webflow and the box model is probably the most important concept that i'm covering in today's live stream so you've seen me put things in boxes and and other things in boxes to basically create the layout that i'm looking for and webflow to me has the best tools to create different layouts we can also use grid and i'll cover grid in a few other live streams and i've covered it before but basically if you're if you're new to webflow you know you'll just want to familiarize yourself with how i'm building the site how i'm adding div blocks you know how i take a figma file like this how i look at this content and how i think about this content so basically it's just like you know boxes and boxes and boxes to create the box model and the reason why the box model is so effective and important is because and i'll showcase this in this live stream is that once we get to the responsive version of the site it's going to be really easy to make this responsive for desk for tablet and mobile and that's why we have to think in terms of boxes right because what if i want to take a specific layout and stack the boxes vertically rather than horizontally on tablet for example we need to move those boxes relative to each other so that we can achieve a responsive design within our site all right cool so let me go ahead and add this last bit actually i don't want to add a div block i want to add a text block because it's just for decoration and i'm going to call this info number okay and i'm going to give it the font dm sons let's make it three m's so really large and we'll set the color to white and i'll just say one here and let's make it dmson's bold give it some letter spacing of like two or three and it's actually gonna be like six m's okay and then i'm gonna set the opacity of this text so i'll go to the opacity option here and i'll set it to like 16 and then for this info number i'm going to set the position to absolute and top left and then for the uh the the info left section i want it to be a position of relative so that this number is relative to this info left section so now for the info number i'm just going to move it a little bit let me look at the the design here i'm just going to move it up like this and that looks good i can make it a little bit larger maybe eight m's and then i'll move it up here something like that maybe down a little bit yeah it might be too big maybe seven and again i'm not specifically going exactly from the figma file but just going for what i feel looks looks best as i'm building all right so we have the number i'll go ahead and uh delete these two info wrappers and i'll just copy and paste again so we have the number here um yeah so basically now we have this section and all i want to do here is kind of reverse the content so i'll open this info wrapper so info wrap info right is actually going to be on the left i'll just move it up here in the navigator and then for this info right section or let's see actually i'll do it for the info left i'm going to give it a combo class of second so we can apply unique stylings to it and i'll remove this 100 pixel margin and then for this info image or actually for this info wrapper i'll say i'll give it a combo class of second and align it to the left and then for the info left we gave it a combo class of second so for this i'll give it a 100 margin from the left yeah that looks good and and we actually want to do more than 100 i'm gonna have to do something like 200 pixels yeah that doesn't uh not okay let's see uh-huh yeah this is an interesting design uh it feels like this container is much smaller hmm okay i'm just kind of thinking out loud here uh got to go see you in the next stream it was great learning for sure thanks amkar appreciate it i think for tomorrow's stream we're going to take it a bit lighter we'll create some nice interaction for this stream i'm diving deep into layouts and stuff and you know layouts is is not the easiest task i would say um there there's quite a bit of thought process that goes into creating a good layout you know what i'm going to do here actually i'm going to make these info wrappers let's see yeah because something's not quite lining up so the images are the same size because basically what what we want to do so let me take uh take this info wrapper i just did to the right actually no that looks that does look good i was wrong yeah no that looks fine okay so yeah we want the text to be aligned flushed with this image to the right so scratch what i said we can leave everything just as it was and this image is aligned pretty well with this info number you know we're looking for alignment here and it's not bad the alignment isn't bad i might move this info number to the left a little bit so we have a little bit more alignment here with this image okay something like that yeah we'll go with that for now all right so the image doesn't have okay cool so we added to the left we added 200 pixels let me see if i had 100 yeah okay no i want i want 200 pixels there i'm liking that and then we'll just change the text here so hiking essentials hiking essentials and picking the right hiking gear oh is it the same oh shoot yeah picking the right hiking gear you can gear okay i don't know why hiking gear is capitalized all right that looks good and definitely going to add some more margin here to the bottom like let's say 220 yeah that looks good all right and that looks good okay right hiking gear and then this last section is perfect so we just have to change the text where you go is the key where you go is the key and actually i think the paragraphs are different too yeah so let me just go in here inspect i'll copy this paragraph text and let me paste it in here okay all right and then here this text is understand your map and timing or understand yeah understand understand and timing okay that looks good and i'll just copy this text here and that's it okay so i'm going to remove this let's see why do we have so much padding there let's just say 100 or zero nope we'll add 50 or like 60 pixels of padding there's a lot of okay yeah because this is 220. all right cool um yeah and i'll change this to o3 and that's it and then i just have to export the images really like the color palette how do you choose your color palettes uh this color palette yeah i just grabbed it from the figma file so this figma file um i left it in yesterday's live stream there's a link to it so i think i just typed in free figma [Music] website files or something like this and it's um ui is it ui store maybe no it could be is it this one no uh yeah i'll find it and uh yeah so so you can build build this out yourself as well free figma [Music] or figma website templates yeah uh it was something with ui in it ui sleek ui here it is okay close this so it's right here it's this first one so i'll copy and paste this into the chat and it's this first one here and you can just grab the figma file you do need a or you will need a figma account but it's free and then you can just kind of if you want to follow follow along with what i've done here you can practice uh here as well so again this is only one way to approach the build there's probably like 10 different ways to approach this build there might be like an infinite number of ways to approach it but i'm just approaching it this this way at the moment and i'm going to export this image and export this image okay let's go into webflow and i'll call this image two and this image three okay and yeah i should compress them let me go to compress png and compress them because they're over 300 kilobytes they're about almost 700 700 kilobytes each so compress them download and i'll show in the finder let me just go in here and now they're less than 300 kilobytes each which is how i like it i'll click hold and drag place it into webflow and you can probably give your images more descriptive names but i'm just trying to speed through this build here so we'll give it this image and then we'll replace the image and give it this image and you can add alternative text so in webflow you can go inside the image and you know give it alternative text on screen readers it'll let the user know what the image is about so you can say hand with compass in it for the alt the alt text and this one i can say man on a mountain and then for this one i could say a person person riding a bike all right cool so i think that might be it for this build um yeah it looks pretty good yeah this feels more centered i'm not sure why because it probably is more centered let's see let's see if for the flux setting i do center and i'll remove this margin and let me try something like this no show yeah i think i want to do something more like this and then i'll add some margin to this section info left yeah oh that looks good mm-hmm i'm kind of liking that a bit more because i kind of like the content to be centered and then this i'm going to remove this here and then set it to the left oh no centered here and add 100 pixels to the right or take this section yeah it looks good maybe even more 200. uh yeah i'm just looking for some more centering here for the site yeah that doesn't look bad all right let me go ahead and publish we might touch on this a little bit more tomorrow are you taking suggestions for the websites you recreate on the live on these live streams yes i am yep for sure alex definitely and this one's pretty much done so if we move on to something else that's that's cool too so yeah that does look pretty good i would maybe focus more on the alignment of the the content in the center and i might play with that a little bit more while we have a few minutes here in the live stream so let me just try this how i had it before it's centered to the right 100 pixels that's too far off from the image and then this one let's do the right side and then this one yeah let's see to the right yeah no that looks good that looks good yeah all right cool we're going to leave it at that so yeah alex if you have a site that you'd like to see me recreate just post it in the chat um one thing to note i haven't set the chat i'm gonna look into the settings but uh links currently don't work in the chat so you'll either have to like just write the link as like the name and then not use dot com or just write out dot com instead of the actual dot um in in the chat poolsweet.net looks really interesting okay let me check it out um let me check it out over here first fullsuite.net all right uh i'm i'm gonna have to do some more research on this before i get into it yeah this is really design intensive like it's like the old school mac i know someone from webflow who did something similar his name is matthew p munger and yeah i guess this would be a really intense thing to build like if you drop me a super chat like and it would have to be pretty generous i might start showing how to build that but that would be really intense to build so basically i'll go to it full suite net so yeah this is the the site that alex is referring to and uh yeah it's using like this dos type effect where it's like this animation and then it's using like this mac layout so i think it's let me see if i can find him matthew p munger nope let's see if i can find it here okay so he did have a site that he built let me see if i can find it on here almost not oh here it is so he built he built this site here in webflow to look like the ma the mac ui which is similar to the uh the site i just showcased the the pull suite site but yeah that's uh that's something that would take quite a while to build it would take a few live streams to build that um but yeah it can be done in workflow all right so yeah i think i'm gonna conclude this this build here so we have the parallax effect at the beginning i'll add some more spacing here at the top so for the hero or this content section i'll make it 200 pixels from the top and yeah let's see what else oops history yeah we didn't add a menu and things like that so yeah we might do that that wouldn't be too hard to add these little accents or these little designs but we'll see if we want to get into that and then we have to build the footer but yeah let's quickly make these sections responsive here these info wrappers uh christian hey i would have a suggestion for the next live stream maybe i ran into some issues with line breaks within collection list text blocks would be interesting how you can solve this issue yeah chris christensen uh feel free to drop me uh drop the read only link or send it to me via email just send it to webdevfree.com uh it is related to your personal project so this would be a super chat request um or if it's a if it's a bug in webflow or something or something's not working correctly i might just take a look at it but feel free to send me the the read only link to to via my contact form until i fixed the uh the super chat linking here all right so cool we we built something right cool yeah we built this and uh yeah so let me just quickly make this responsive here sorry if i kind of screamed a little bit into the mic there i felt like that was kind of loud uh cool so let's make it vertical and [Music] this is what i want to do here yeah let's make it vertical this image i'm gonna let's let's make this text here or the info left let's make it uh 60 in width and then we'll center this content something like this we'll remove the margin from here and we'll make this this info image i want to make it the first thing we see so let's see flex oh it usually gives me the option to uh alignment in order so i want this to be last okay so the image goes first and then let's give the image let's say 300 pixels can i make this image larger i should be able to oh because the info right we'll set it to 100 and we'll set it to flex center and we'll add some margin to the bottom of this image 60 or maybe 80. okay and this image in full right let's say info rate 100 percent why is this image so much larger oh let me set the max width maybe no so this image yeah i guess we'll just make it 200 pixels maybe 300 pixels yeah okay that looks good and then for info left second we'll remove this here and that's it very cool so we just made it responsive i'd have to make this heading responsive so let's make the font size two m's or three m's and that's it cool so yeah that's why we use the box model because you just saw how easily i made it responsive i just had to stack things vertically and resize a few things for for tablet so we scroll and that looks good even the font size looks nice on on tablet all right so i might change the the height of this hero content or this hero section so rather than 150 vh on tablet i'll set it to 100 vh so that this uh this guy on the mountain isn't as isn't so far down and we just start kind of higher so yeah that was actually pretty cool so hopefully you caught that because to me this is probably the one of the brighter moments of the stream was when i uh just changed it to tablet made it responsive and that's why we went through the whole kind of struggle of like adding all these div blocks and you know aligning things and so we can make it responsive right because the last thing we want to do is build something and i've seen i've seen quite a few developers do this like who you know maybe just get into webflow and they just throw div blocks around and then when they get to responsive design they have a really hard time making things responsive because they didn't start with a good layout initially so i but as you just saw because i spent so much time with the layout initially in less than five minutes i think i was able to make it responsive on tablet and then i can just go into mobile landscape take a look all right it's still you know this i can make smaller this uh heading you know two to two m's and it still looks good look at that i don't have to change anything here if anything i could change the uh this paragraph or the the info left middle let's see here the simple left section i could make it 80 instead of 60 or like 70 percent so it's a bit wider because we have a lot of real estate on the left and the right on this device and this text you know i would kind of update as well maybe give it like two [Music] let me work with if i'm working with or no we'll leave it unitless for the line height i might do like 1.3 or 1.4 there for the line height and i'll make this heading smaller we'll make it two for mobile landscape maybe add a little bit more line height i'm going to stick to unit list for the line height 1.4 or no i think the line height should be m's as well at 1.4 m all right and then for mobile landscape we will make the font even smaller maybe 1.7 1.4 yeah looks good and then here for the info wrapper or actually the the margin so this is when like yeah adding padding to the content section actually works well so notice we have 40 pixels of padding here on mobile and like even on uh mobile landscape if we try to scoot in we're always going to have 40 pixels of padding on a mobile landscape i could change this to 20 so we can use more of the real estate on the device so i like the idea of adding padding here on tablet it looks fine but on mobile yeah even mobile we could add like no 20 pixels is good is good on mobile yeah and then for this info number let me make it smaller and i can move it down a little bit i can make this text smaller this should be m's not runs all right maybe even smaller 0.6 0.5 no 0.7 i'll make this text smaller we'll make it 1.2 ms maybe 1.3 yeah and then for the info info left we'll say 100 on mobile yeah we'll just move this number up a little bit something like this and the same for this info let's see yeah we'll make this 100 and yeah there we go so we made it responsive for mobile as well and then i'll just remove some of this margin here maybe set it to 140. so when we're working with less real estate we want to make things a little bit tighter so like padding and margin you can just make those a little bit tighter so that the user doesn't have to scroll as much uh let's see thank you manuel appreciate it uh he writes yamanoro wouldn't it be great if you could also adjust the height of the preview window for adjusting it for mobile especially landscape yeah that would be a great feature i think that's a like a requested feature for webflow is to be able to like change the height here let me change this to 0.7 ms all right so i'm going to conclude the live stream and we'll publish and we'll just check the responsiveness of the site so we have this interesting parallax effect as we scroll then we have the content looks good and then i'll go into the responsiveness of the site so we'll just resize we have tablet looks nice and we have mobile looks good we can just drag this out just to see how it would look start here yeah perfect that looks good all right so yeah i might build the footer tomorrow if not we'll just we might take a take it easy tomorrow since we went over so many different topics today especially around typography um but yeah i highly recommend if you're new to web typography to kind of read this book here or uh take a look at this learn ui design course uh he goes over typography let me look at the sections so in typography he goes over an intro to typography the good fonts table choosing fonts choosing body fonts the basic rules of styling text brand and letter form styling text on interactive apps and pairing fonts and styling text three as uh editorial like styling editorial text all right uh yeah thanks alex appreciate it and uh yeah i'll conclude the live stream if i'll leave a few minutes if there's any other questions i'll be happy to answer them all right and yeah i'll be going over let me see if i can access it yeah i'll showcase it maybe later actually you know i can access it let me showcase it here um yeah so this project one second so by this week i think it should be this week i'm going to showcase how to build this this slider here with this clip path and i'm going to be designing this a bit more but it's a really interesting effect and we're going to be using this clip path property a lot more so so yeah if you like animations and design definitely stay tuned to my other live streams um some of them so some of my layout builds can be a bit intense if you're especially if you're still new to webflow or you're just getting started i know it's a lot of information to to kind of grasp and if you are new to webflow i highly recommend taking the webflow 101 crash course so let me just find it real quick like this is to me i i tell everyone about this uh crash course uh especially if they're getting started with webflow like this is like the foundation like you really i'm not going to say should but if you want to get proficient with webflow these this course covers all the fundamentals that you'll need to to get started and then you can just get into more advanced topics into more advanced layouts and there won't be any website that you won't be able to build you know having a good base here by taking the the course and then you know joining my live stream asking questions and just watching me build you know because there's there's no one way or right or wrong way to approach a build um there are best practices to approaching a build and yeah there might be a wrong way i would say like just maybe throwing div blocks without a clear structure it's probably not the way you want to go because it makes designing a responsive website more difficult but um there are many different ways to approach a build especially with the features that webflow offers like flux and and grid thanks christian thanks for joining appreciate it thanks everyone i will end these at one because and you know i value everyone's time and i don't want you to feel like you have to stay on the stream after one o'clock so moving forward i will get better at just ending at one o'clock and not going over but usually i just have these little rants that i want to do at the end of each stream or not rants but like just an overview of web design and development and what i just covered in the stream in general so yeah i'll go ahead and end it you know everyone enjoy the rest of your day tomorrow i'll just create a nice and light animation we'll keep it light tomorrow and yeah and just have fun in webflow so thanks everyone for joining appreciate you and i'll see you tomorrow thank you

Channel: WebDev For You

Views: 284

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: UtByIP0igJs

Length: 79min 25sec (4765 seconds)

Published: Wed Sep 15 2021