Building a website with the Client-first style system from Finsweet - Live Stream - 10/20/2021

all right we'll be starting shortly in about a minute [Music] hello everyone and welcome we'll start exactly at 12. audio visual check uh anyone all right um it is 12 o'clock p.m uh central and yeah let's get started uh so hello my name is john from web dev for you um welcome to the live stream i do these live streams every monday through thursday from 12 p.m to 1pm central and we discuss everything webflow from building entire websites creating unique layouts working on animations and interactions and i also provide support via super chat if you need help with a specific issue or something within your personal project you can drop a super chat and i'll be happy to help all right hey dale welcome welcome um yeah hopefully we get more trickling in um yeah so uh today is going to be a fun uh live stream uh i have the agenda here we're gonna start building a site with the client first system from fin suite and yeah i haven't built the site before but i've been just kind of studying the client first system and yeah i want to attempt a build with it and see how it goes so we'll start with that then from 12 30 to 12 40 i'll field any questions about the build and then from 12 40 to 1 pm we'll have a general webflow discussion and i'll field any super chats there's a super chat i'll be covering for akilah i think if he does drop a super chat i think he sent me an email so i'll cover that uh hey tim tamir uh how's it going time mirror yep hopefully i said that correctly uh welcome yes this is the this is the web dev for you live stream i do these every monday through thursday uh so dale wrote uh sorting my way through the client first system i see the value and i'm looking forward to this awesome for sure yeah uh same here same here uh hi yvonne how's it going um so yeah without further ado let's go ahead and get started with the build let me just minimize this here so i have a few things set up this is the client first documentation i've pretty much pretty much watched all of joe's videos and yeah it's interesting uh i want to give it a you know kind of a fair shot here and really work with it uh so within the client first joe has some resources or fin suite has some resources they have wireframes they have templates and some live builds and right down here we have the cloneable for the uh the client first system so i'll just click here and i'll go ahead and clone this project so i'll clone it and then we'll start with the client first system i'll showcase all the classes and everything that's included so right up here it starts with this page just intended to be blank pre-built classes are on the style guide page this homepage is ready for you to start your custom webflow build okay so if we go to the classes panel the style manager we have the style manager right up here we can see all these classes are already in the project and they're available for use so we can just use them and build our site and then here in the pages we have the home and we have the style guide so i can go to the style guide and here is where i can customize the different headings and the excuse me sorry about that i can customize the different headings and the paragraphs and the different text here and the text weights and all that good stuff uh i've been i've used the client first design system and it helps you keep organized yeah so yeah that's what i'm hoping to share in this live stream just to see if it it's a it's a good way to stay you know organized with class names so we have the colors and everything here so uh for me the first thing that i want to do as the designer of the site and by the way we're going to be building this figma file here it's just a layout it doesn't have any images or colors we'll be adding that ourselves but we'll build this layout using the client first system so the first thing i want to do for this build is and i have a few uh templates using the client first system these are fin suite templates in case we need to reference them and get an idea for for the build so the first thing i want to do is style the text to match the style of my site so to do this yeah let's first go into the figma file and this template or this sigma file is using playfair display for the heading and it's using enter for the text so i want to go into web flow i want to go into the project settings and let's install those fonts so i'll go into the font section i might have to close some tabs here all right cool okay so let's see playfair display i don't think that's a default font no so play fair display and i'll do italic i don't think i'll be using it but i'll add it add font uh how's my audio everyone does it sound clear i know i've gotten a few mentions about that recently then we have enter so i'll install enter and add font and cool so we have playfair display and enter so i'll go back into the designer and i'll go into the style guide and i'll go ahead and update the global classes here so for the h1 i'm going to leave everything the same so you know under typography if we go to the client first documentation and we go to classes and go to typography here are the different sizes for all the typography all i'm doing is changing the font so that we can have all the styling preset before we start building the site cool thanks dale appreciate it so we have the heading so i'm going to style the all heading and let me actually hide my bar here okay cool so i'm going to style the all h1 headings and for the font i'm going to say playfair display same for h2 we'll say play fair display and h3 i don't think i'll be using h4s so i won't style that for now so we have the h1 h2 and h3 all in play fair display we can see it updated here and for the paragraphs let's select the all paragraphs and i'll change it to enter okay so it updated for all the text on the page in the style guide and we don't have to worry about the text weight here uh nice so that's the rich text it is using inter now which is great oh no let's see the paragraph i won't be using any list items but if i did i would want to update it here i could just select all list items and i can do it now and set it to enter paragraph is enter and the block quote let's do all block quotes and say enter okay for the colors um yeah let's go ahead and go to coolers dot co i think this will be a good practice we'll go to coolers dot co and we will pick a color palette hey abhinav hello yes today we're working with the client first system and we're building a site using client first okay so let me see here let's use um yeah let's use this color palette here so we'll just copy these colors and let's go to the global swatches so this will be the primary color let's see if that's what i want to use for the primary um no this will be the primary color here this beige and we will add a global swatch i'll paste that color or just paste the color in here and i think webflow will give it a name so i'll click create and it called it light yellow the secondary color we'll say this red and we'll add the global swatch and i'll create the text color is just going to be black or 333 let me add that as a global swatch the background actually let's see here background uh primary secondary let's see yeah i want these to be the background or let's see yeah let's make this the background so i'm going to set this to this and then this is going to be blue or red no we already did that so let's do blue okay i'll go back in here and we will add a new global swatch let me remove this and click create so we have steel blue and then we have let's do background too okay all right so we'll see if that color palette works we don't need a sixth color here but for the button um let's change the color i'm going to change it to this red and the secondary let's change it to the red as well and change the the border to red the button text i'll change it to this red color okay and then we have the white gray and black backgrounds sizes and forms and different web flow elements alright so we have the base for our styles let's see here for this image let's see what all fit captions let's set this to enter as well and cool so just like that we have a nice style guide for our site that matches this figma file so that's step number one when you jump into client first you do want to go into the style guide because i don't know how likely it is that you'll be using the those fonts the heading font which is system ui like that's the default that's being used so if you do start a project with client first i'd recommend going into the style guide and update updating those classes you don't want to change the the size like the font sizes just change the font types and the colors and you should be good to go hey kavita hello hello all right so let's go into the home page and we can start building so the first thing i'm going to do is delete the this home text i'll just delete that we don't need it so if we go into the client first and we go into the structure this is how the site should be structured so we have the page wrapper we have the nav component then we have the main wrapper and then we have the sections and the padding every element has a parent element with a padding or margin and not every single element element but most elements so let's go ahead we can see in the cloneable they've already started with the page wrapper and the main wrapper so let's go ahead and add the nav so i'm going to hit command k and add the nav bar and i'll put this above the main wrapper so it follows the structure so we have page wrapper and the nav component and the main wrapper are inside of the page wrapper okay so let me go into the figma file and i'll go ahead and export or let's see here this is a actually just playfair display so i can just add some text for the brand so for the nav bar we're going to go ahead and rename the classes right away using the components structure that's recommended by client first so him and all yeah we're going over the client first system today uh so i'm gonna go through each one of these and i'm gonna use the uh the recommended class naming convention so if we go to components this is what they recommend here they recommend a keyword and then you know what that element is so for example for the container here i could say nav as the keyword and then underscore container all right and let me just reference one of their sites just to see okay so they called it nav underscore component also for the nav bar yep that makes sense so nav underscore component [Music] and then we have nav underscore container and then we have nav underscore brand then we have nav underscore menu then we have nav underscore menu dash button and then we have nav underscore icon okay so we've renamed the classes and that looks good all right so let's just dial this a bit more and for the nav container let me see if this works so i want to make the knife container a bit larger and not use the 960 default size so i want to grab a larger container so i think i can act i can do that with the the structure maybe main wrapper section okay so we have container size we have container large container medium and container small so let me try adding a combo class of container large to the snap container alright cool so that did work it applied 80 rems to this container and let me move this nav bar or this navigator and we can see that the container is quite a bit larger if i if i were to remove the container large the container is a lot smaller so i'll be using container large for desktop and great so now for the nav brand i'm going to add the nav logo and this is just going to be a text block i don't want to use a heading for the nav logo because that's going to be for the main content of the page so for the nav brand let's call it nav i'm going to call it nav text text mark okay because it's kind of like the mark of the site yvonne wrote i've created my own nav container which renders a better result nice uh are you using 80 rems or are you using rums for the container yvonne um because i'd think you'd probably want to stick with the rem's idea and if you are using rums what value are you using for your container okay so we have that the nav brand and then we'll just go in here and the name is very air for the name of the site so i'll say very heir i don't know if i'm pronouncing that correctly also for the nav brand i do want to set it to flex center center and let's see and let's set the height to 100 percent no okay nav container okay so this is where i get a little bit confused or no this might still work i'm gonna try this i'm gonna set it to flex center and space between or to the left i'm gonna put it to the left um yeah and here we go with the nav element which i you know if you've seen my live streams you know that it's that it's my favorite element no i'm being sarcastic i always have issues with the webflow navbar um yeah okay cool yvonne um nice so let me style this text mark i'm gonna say play fair display and the size in the figma file is 24. i feel like we're gonna have to make that bigger but so 24 and this is in rems one rems equal 16 pixels so let's do two rems for the nav text mark oh and that does look nice okay so i'm going to grab the nav menu and i'm going to hmm yeah this is why okay so the nav container i want to justify space between or let me justify right and then for the nav brand i'm gonna set actually oh no okay so we have this button okay i see so let's try that again the nav container we're gonna justify it to the left then to the nav brand okay so this is where i want to add some spacing to the nav brand and this is where if i'm using the client first system okay so yvonne uses specific max widths okay cool nice um so i want to add some margin to the right of this brand element so what i would do is add a div block and i would place the nav i had a div block in the nav container and i would place the nav brand inside of this div block and then i would give it the classes so in the client first for margin and padding we have spacing and i want to apply margin to the right and then i want to say a specific margin so for this div block i'm going to say margin and then we have a list of margins i'm going to say margin right and then i'm going to say margin let's try margin medium and here i'm going to pin this nav bar so we can see everything i'm going to say margin medium perfect that worked well it added two rums to the right and i like it okay um margin right cool nice and then we want to add a button in the nav bar so we want it to look like this so i'll add a button and i'll place it right up here and i'll call this primary or button or just button yeah i'll say button okay button and then i'll say is navbar [Music] that way i can set position absolute and place it to the right and for the nav container i'm going to set a position of relative and then for the nav for this button i'm going to set the top and bottom to auto okay so that it centers it in the nav bar all right so if i preview um it's starting to look like this which is great and nice so let me see here um okay so let me add the elements here so home services how it works and contact so home services how it works and contact okay and let me remove the background color from the nav bar so the nav component i'm just going to say transparent for the color and great okay so i do want to add more padding to the nav component so for this what i'll do is add a div block place it above the nav container and then place the entire nav container in this div block and i'll call it i'll give it some padding so again we're going to use the spacing and we're going to use padding so i want padding all around so padding is down here it's pretty much the same as margin kavita writes is rem better to use than pixels um so after watching client first all joe mentions is that it's better for accessibility and that's all i got out of it i didn't get the full reason why but it just seems like a standard for accessibility uh like you want to use rems for accessibility so i guess i'll just take that to face value and be like okay so rems are better for accessibility apparently i guess i'll have to do more research on that but i have heard that before so i i think it's true and it probably is true um so yeah and it's not too difficult to use so if it doesn't make things more accessible then i don't mind kind of moving in that direction if necessary um i still use pixels for my templates just because users understand pixels more than than rems yeah so they'll wrote rem scales proportionally better yeah so i've heard that quite often so i haven't run into situations where my sites haven't scaled correctly on different devices so i'm kind of playing devil's advocate a bit uh but i know rems are are good i just haven't had the experience of see or having that aha moment where i'm like rems are far superior better to pixels and after you know i still have to do my research with it but in the client first system they are using rems it's not difficult to use so we are going to use rems in the client first so dale you probably heard me say it a few times but i'm not knocking rums i just haven't had that moment where i'm like rems they're way better because of x x and x and if you have any more thoughts on it feel free to to share share it and it'll probably change my mind uh or have me go in the direction of of rams all right cool don't wanna harp on that a bit more um all right so back to the build when i go off these t on these tangents i don't know how clearly i'm communicating so i should probably just stick to the builds okay so we added the div block and placed the nav container in here and yeah cool or maybe i'm stuck in my ways with pixels i don't know all right so we added the div block so we're going to add padding all around so i'll add padding and i'll say padding let's try padding medium no that's too much padding so we'll remove it and we'll say padding small cool nice so we added padding small and nice so let's close that so that's looking good so i'm already starting to like the client first system right it just takes a little bit of practice um so initially and it does it does take the willingness to say i'm going to watch all of these videos that joe has here i'm going to read the documentation and i'm going to try it out because to me if you don't watch the videos if you don't read the documentation this system would be very hard to understand in a way like you're jumping in and you're trying to build a site with the new system i feel like you'd have to watch all the res all the materials that joe has put out and even if you're working with a client the client i feel would have to watch these videos so that you and your client can be on the same page but other than that i am liking the system i'm liking the organization uh it took me a moment i'm not gonna say my face didn't cringe a few times as i was watching it and not cringing like a bad way but just because i'm so used to doing things a certain way where i was like what wait why would i do that for example adding a parent element to a lot of my elements and only applying the padding to those elements i get the idea which is to have a uniform system and have global classes so in that sense my mind is opening up to the idea and that's why i'm enjoying actually building the site because as i'm as i'm building it i'm like oh this isn't so bad this is actually kind of cool all right nice so i like hawk hello hello hello cool name um nice so let me rename this button so i'm going to say get in touch okay and we would probably link that to like um like a contact form so this system it reminds me of the bem model a lot so i think that's what joe based client first on b and model css so if we look at the getba bem.com you can see let's see um let me look here bm css tricks like you know they have buttons dashes underscores and it's just a way to keep uh class names organized it's not exactly like the ben model but it kind of reminds me of of that idea and then bem stands for uh with this bem let's see block element modifier so you first start with the block then you have the element and then you have the modifier and that's just like classes and combo classes type of idea or no uh yeah more like keywords in the client first joe mentions it as keywords so you start with your keyword and then you get more descriptive as you go on so under components you can see if you go to learn more you know you start with your keyword which is home header company team nav and then as you uh add more elements you get more descriptive so yeah and let's go back in here so now we have the main wrapper so pavlo wrote hey john quick comment yesterday you had an issue with a clip path project i didn't watch it live but i think the issue was that you had the custom code inside the head instead of before the body oh my god yeah thanks so much pablo i didn't even realize that um i'll get to that um today and we'll just quickly update that nice appreciate you watching and and uh commenting thank you all right um so now yeah let's build this hero section so the way we we would do that let's go into client first let's go back to the structure and i'll close this here so we have the main wrapper and then we have the section so we'll start with the section and we can close the nav component we're done with that we'll go into the main wrapper i'll add a section and i'll call this section would it be section underscore no section dash home header and let me see if i did that yeah section identifier cool then we have the page padding so then i'll add a div block in here and let's do for this let's call it padding let's do padding large let's try that and that's padding large is three rums so i like adding a good amount of padding to my element actually for the nav bar we did padding small so this is where i run into a bit of an issue because um i want my padding to be smaller smaller at the top and the bottom but larger on the left and the right so essentially for this padding small i guess what i would yeah i might have to add a custom class here so let me remove this padding and i'm gonna say padding custom one and i'm gonna do one rum from the top one rem from the bottom and three rems from the left and the right okay and i just i feel that works better because i don't want so much padding uh for the nav bar so it's super like far from the top of the site and so within the section we added padding large and this is three rems and that's okay for the home section um yeah and then the the alignment will match with the nav bar so that's why we want the same padding for the nav bar as well as the section okay so let's go next uh so we have the padding now let's add the container so i'm going to add the container and i'm going to give it the class container large okay so it's going to match our navbar so yvonne row if you have time today i created these layouts using client first to understand the system and structure format yeah rashid they have the classes of padding horizontal and vertical yeah i did think about that but so how would i do that necessarily would i add both like would i say would i say padding horizontal right and then we have let me remove this padding was padding vertical oh i see so you would say yeah and this this is the issue i ran into because if i were to say padding horizontal right if i said padding horizontal and then i said padding large it does add the padding to the left and the right but now i want padding to the top and the bottom and that's kind of the issue like i guess could i do padding vertical as well and then do padding small i don't think that would work no no that's too many classes uh there so the padding custom i feel works the best here because i can just add my custom padding okay um so yeah now we have the container and we have the heading we have this paragraph and we have this get in touch uh section here so in the container i'll go ahead and do that let me pin this here so we can see it i'll add the heading and i'll add the paragraph so let's see here paragraph and i'll add the button okay and we'll right away give this the class button [Music] very nice so for the heading let me copy this text nope that's not the text i wanted to copy here it is okay so we have that heading and very nice we have the heading and we have the paragraph so for the paragraph let's copy this text uh yvonne did you send me an email um if there's an email that or if there's a site you want me to look at just send me an email and i will check it out uh paragraph let me paste this in here cool and the button what does the button say get in touch get in touch okay so now we want to add some spacing right so for this container large um let's see okay yeah that's fine uh the container large i'm going to add a div block and place it right up here and put the heading in here and for the block i'm going to say margin bottom and we'll give it a margin large yeah margin large yep and we'll also give it we'll give this heading a max width so i'll say max with medium um let's see no that's too too small let's do max with large okay that's better and this heading is very large so i'm going to give it a custom class so it's 64. and here we have 48 rams i know we have four rems so 64 divided by 16 is for actually yeah that's actually the right size okay cool so why let me see here design so let's do let's remove this max width max width uh so we don't have a a custom max wood so we'll just do max with large uh could you guys try to get yes uh yes uh dylan we'll get to that in about five minutes yep i'll definitely check that out dylan my apologies um actually yeah i wanted to go through the um the client first system first before we got into super chats so this paragraph i'm going to add a div block and place the paragraph in here let me put this out here okay and we're gonna say margin large or margin bottom bottom and margin large cool so that looks good and nice i'm happy with that and we'll add a max width to this paragraph we'll say max with [Music] large and nice actually i might do max with small max with small okay so our medium sorry uh so as i'm building i mean it's cool i mean it's a cool system i i feel a bit stifled creatively because i feel like everything is already preset for me as i'm building something i like experimenting with different units and just getting a feel for how things look uh there's my dog so yeah i mean i i guess i would use the system and even ivan said he made his own custom elements and i think as as your designer as designers or developers of a site sometimes you do want to experiment and so i do feel a little bit closed in using the system but that would be with any system right like any system you decide to choose if you decide not to go the more creative route if you you know if you feel like you don't maybe have a good handle on using classes and you want to use a system then that kind of comes with that territory you won't have the flexibility of your own naming system because you are using a system that has predefined values and predefined settings okay so yeah i think that looks okay i'm still not super happy with this i think i would want it more to the left let me see if i can add a max width to the entire container max with small oh no because then it centers it um but yeah i'll leave it at that i'm going to to the container uh no see this is where it gets a little bit strange i want to add some padding to the container well yeah this is what this is so let me do uh let me see here let me do padding extra large actually maybe that'll help a little bit padding extra large that's a little bit better i don't mind that and then for the container large i'm going to give it a combo class of is header and i'm going to give it a background of like a light gray so like something very light and i'm going to set the border radius to 30. no let's do eight let's give it a little border radius um and then i want some padding inside of the container so i would add another div block and i would say padding a padding medium and i would place everything in here and i would make this a bit lighter this background to the container slightly almost not visible a little design element there uh okay so yeah um we're kind of getting there uh let me say pattern padding i'm gonna say padding large for this uh yeah we're starting to to get there um cool so yeah we'll continue with the this is not aligned properly uh we'll continue with this system tomorrow as well um if you have any questions let me know i'm going to jump into super chats now uh let's see here we have some interesting things going on nav text mark nav link nav menu these elements are not aligned let me see no it doesn't look bad okay and then also for the buttons i would want to add some type of hover state so maybe for the hover state we could say you know a different color we could say blue right so hover it turns blue hover and blue okay cool i'll publish it and cool so by the time we're done building the site we're gonna have plenty of practice with the client first system and yeah i'll continue using it and yeah so there's the site and cool and let's see if it's responsive right away yeah it does look pretty responsive yeah the text gets responsive and all the elements so yeah it's kind of growing on me a little bit uh i i'd still have to decide if it's what i want to use but as far as a system that kind of makes everything responsive you know kind of right away and it's all preset it's interesting cool so yeah props and kudos to fin suite i know they probably put a lot of time and energy into this and um i see where they're coming from because i know that's kind of a pain point in web flow like you jump into webflow and you're like what do i name things like what you know how do i want to design my site and what ends up happening is users just throw in div blocks and they don't name their div blocks and div blocks end up turning into div block 10 div block 15 div block 106 div block div block div block and there's no organization to the site and nobody really wants that so i get it i get why they did it and for me i just have experience with webflow i've been using it for a while so i kind of like the system that i got going plus as a template developer they do kind of give you a system that you have to follow which i've gotten a bit used to so yeah let's go into super chats i definitely want to get to um to dillons so dylan the site i'm going to look at it on my phone right now so it's uh let's see where see where it seems uh did i get that right where seems.webflow okay so let's see all right so the question is um if you if you click to view wires and right click inspect and mobile viewport you will see the cart goes tiny even though in editor it looks fine okay so the first thing i'm noticing dylan uh right off the bat is that i can't close the menu so if i open it i'm not sure i'm not sure if that's intentional but i have to click to another page to cloak to get out of the menu there's no close button for the menu that's the first thing i notice the uh let's see if you inspect in mobile viewport you will see the card goes tiny even though in the editor it looks fine oh okay i got you i got you yeah yeah okay so let me jump into your site i know you sent me an email yesterday uh so let me grab it um uh dylan all right so it's right here uh sorry i just have to find the read only link i've gotten quite an email quite a few emails lately so i'm gonna have to work on organizing it correctly um okay here it is all right dylan so the cart becomes very tiny i do see that i'm saying for it okay no worries so let's go to the mobile and actually we can probably do it on desktop so let's go into the cart and the cart button or the cart here let's see cart button and i'm just gonna take a look here cart cart cart let's get cart button yeah i might try hmm i might try setting the cart button to 100 or maybe let me look at the cart header cart form the cart button let's see image let me see 100 no car quantity yeah i think i try hmm yeah try setting it to a hundred percent no but that changes this the layout a bit i think it probably has to do with this image because the images usually want to be a hundred percent so they don't get smaller and then for the cart you could set a specific width to maybe like 100 pixels or uh let's see 50 pixels and maybe try that dylan try setting the cart button to like 60 pixels and then the image set it to 100 and that should solve that issue yeah sometimes images get a bit funny like that like where if it doesn't if it's not set to 100 they get smaller i remember being in support and uh that question would get asked a lot so just set the image to 100 and set a specific width to the cart button you should be good to go okay and we can see here the cart button is a lot smaller oh because of this margin so let me remove this margin and let me set the cart button to 40 pixels something like that and then i would i would apply the margin to the cart give me like eight pixels of margin i might make this logo smaller maybe 28 and that gives us a bit more breathing room for the cart do like 10 pixels all right sounds good awesome let me know if that works um pavish i'm gonna check this out in a second but yvonne had a message um so yvonne uh i'm experimenting with a mixture of wizardry method and client first design system so let me check out your email yvonne and okay so we have it here excuse me uh so this is the site you sent yesterday and the question was if you have time today i created these laos using client first to understand the system and structure format yeah okay so i'm looking at this great job yeah this is exactly what the client first system would look like yeah i'd probably recommend cloning the let's look look here right so i can see you added your own classes um it doesn't look like you you're using let me see here um the class name and conve convention is spot on so great job um yeah yvonne i'm curious to see what your what you design in like a month or two because you're on a very fast track right now with learning web flow um so very very good job um so we can see the only thing you want to do is add a page wrapper so um the client for a system starts with a page wrapper and then everything goes inside of the page wrapper so you can just you know pop that in there and let me call this um yeah sometimes this happens where you can't place elements inside other elements uh killer if you're here i did get your email so i'm just if you want to drop a super chat feel free to do that yeah call this page page wrapper and then i don't know if the html embed needs to go on the page wrapper but it could yeah okay cool page wrapper we have the section team great then we have the container the container doesn't have a max width so i'm a little curious about that if you did want to use like the the client first their container would be like container large you know or container medium or container small so i definitely i would clone this clonable here that has all the classes from client first and that way you're not um oh it was a different link so it's not this site so let's see um okay so sorry about that uh yvonne let's go back to this so this is the site correct uh so it was a different like cool so you probably did everything i mentioned yep so this is exactly what you did perfect um so the question was okay i created this layout so yeah page wrapper um navbar great section cover cover image wrapper cover image perfect yeah great job oh the container you're missing the container so i would just add a div block and i would say like container i don't know large and maybe it doesn't need a container it depends you know some some elements or sections don't need a container but you can just add that in there and this cover image wrapper width is eighty percent um i might make this 100 unless you wanted to add padding so i would remove this width and maybe just add padding uh so i would add a div block in here and it all depends right like this is where i don't know what design you were going for so it's hard for me to to say but you know i do like padding large here uh yeah to this div so i place it in there and say padding large right so now this is large uh nav bar let me see here section cover nav bar 0.5 rem um so yeah i probably wouldn't apply the padding to the nav bar cover i would probably remove that there and then to the this padding page padding let me just take a look here page padding container large i'm trying to understand this here container large page padding let me let me remove this and say padding medium or padding large let's try that okay and then we have the container then we have the nav bar let's see nav bar tap our menu wrapper nav bar cover menu button uh i'm trying to understand why this container or these elements are not quite in the container unless these are absolute or something oh this is fun container large uh yeah container large padding large nav bar cover this is fixed maybe is that why relative no not quite yeah i would kind of work with this here let's see so the container it doesn't have a specific height so i'm curious about that let me undo that and redo this okay so padding large right so we have the nav bar we have the padding we have the container and these elements should be in the container which they're not here let me try this huh i think i'd have to spend some time with this evon i'm not exactly sure how you built this container cover image uh it's just an intro page if you preview get to see the other three builds yeah work thanks john okay awesome happy to hear that dylan happy to hear that awesome yeah let me let me view on my phone too yep there it is it looks great i like the size it's a great size great design good stuff excellent very nice yeah and if you're if you're selling shirts dylan you probably know about the printful integration that webflow has i'm sure you're probably using that um [Music] yeah i'm just trying to understand this one here yvonne if you preview so first build okay i got you oh wow and sweet first build second build are these did so did you build this from scratch yvonne or are these that'd be pretty impressive if you built it from scratch because that's a lot of elements oh and we have the menu good stuff oh look at that great job um yeah i'm going through it and page wrapper navbar main wrapper section home header great yeah this is following the exact convention i don't know if there's anything i can critique here yvonne um if you are using the finn suite system it's all it sounds and looks like you you're following the the guide um so as far as me critiquing anything i don't know if i have anything there like slide nav maybe just name it to slide dash nav you know to follow that component structure but you are following it very nice or you could just say you know rather than that you could say slider like you already did slider underscore and then nav awesome great job yvonne yeah you're you're on the right track this is excellent um great great stuff and these are great images um hopefully they're not licen like i don't know if it's possible to use these images because they're most likely licensed so i just be careful like i mean you're not selling it or distributing it or promoting it but these images belong to really big brands so when you're in web design that's something you always want to be aware of you never want to use images that are not licensed correctly that's why you'll see me i always use unsplash.com these are license free images you can use them for whatever you want and they're high quality it's the same with pixels p e x e l s dot com you know free images and videos and you can just use them for any of your projects um yeah just wanted to note that there because you're using kind of like big brands like xbox and things like that uh yeah so this is the second build cool yeah there's not much i can critique really um yvonne just keep going it it looks like you're following the the um the client first system very well so you know you have page wrapper main wrapper components padding all that is is great um cool so yeah i just leave it like that um let me actually go to the resources here yeah so these are resources so maybe you follow along with the live build if you did great job because that would take some you know definitely take some time to go through the live build with them and and build it you know unless you copied and paste which i you know again i'm not sure how you did it um yeah the first two build was within suite lifestyle did you build following along the the live stream or the live session because yeah that deserves major props if you did that like because they if you go to live build you can see the live stream and let me just meet this here yeah if you followed along and you did this entire video i mean that deserves applause definitely you if you did that like you can definitely see you want to learn webflow like you want to get consistent at building and web flow so great job you know continue let me go back to the site where was it not this one yeah this one um just continue building like this you you'll be building professional sites in no time yeah i didn't think you were selling the move on i was just yeah i just wanted to make that cappy out there that quick mention i don't see this uh this kind of video game site or maybe it was no so if you built this video game site where is it i keep here it is like maybe you just referenced uh another site or microsoft site yeah this looks like the microsoft site microsoft great job great job yvonne super impressive so microsoft that is probably their xbox yeah xbox yeah okay great great stuff yeah i see what you did so you kind of tried to rebuild it in webflow good stuff i'm super impressed yvonne this is awesome container large perfect yeah wow let me know if you built this yourself because i i want to know now like if you did then you're on your way to like hiring or getting clients to build for you know obviously you want to keep learning and maybe build a few practice sites i'd probably pick a figma file and build a site from a figma file because a lot of times you want to work with a designer and get a figma file and then build it from that file oh man congrats yvonne like yeah you're well on your way well on your way um you're like an intermediate user now after seeing this like you're yeah you're definitely you said you've been building since 2019 so i think you probably have a good handle on webflow but this just this just shows me that you know you're you're building very well so great job yeah i don't i don't have anything to critique because if you're doing this then you you pretty much you know what you're doing or you have a good understanding of what flow yeah that's the same thing i'm saying manuel like to build all these elements and like let's just open up the classes right like this is just without the symbols and then there's symbols in here with tons of elements just super impressive yeah it's a lot of work yeah show a client this and you know they'd probably be impressed yeah yeah we all we're all on the same page with uh with the amount of work you put into this yvonne great stuff yeah yeah i think yvonne might be showing up a lot of stuff a lot of us up but that's great you know that's that's the kind of dedication and commitment you would want if you want to like get super serious about web design and development i mean you probably don't have to go to this length you know to or yeah maybe you do you know or or start building more practice sites you know but as far as the attention to detail and the amount of different elements in this it's just i don't know what to say it's super impressive yeah so i'm glad i've been part of your growth yvonne um you you seem very studious and very on point as far as like dedication and and building and practicing in web flow so i don't have much more to say about that just very impressed great stuff if this was a class you'd get like an a plus like just really cool good stuff um awesome so yeah cool i was gonna say something about like if i had like gold stars or something like i don't know yeah uh yeah but that's a gold that's worthy of gold stars definitely it sounds kind of tacky for me to say that but just very impressed i know i've said that a few times already okay so i'm done with the live stream um before i get off into like strange tangents as i sometimes do i'm going to end it here thanks everyone uh abhinav i know you had mentioned oh so pavish wrote how to do smooth scrolling without using luxie or smooth wrapper and can you make preloader to appear on first visit only yes pavish let's get into that tomorrow please just remind me of the super chat tomorrow and we'll get into it and abhinav i know you had another question and i want to get into that as well but yeah that's it for this live stream uh so tomorrow we're going to continue with the client first system um definitely kind of it's growing on me a little bit but i'm not sure i'll be using it for my personal builds but i'm kind of liking the system you know i like that i'm spending the time with it and actually understanding it and and you know with any system i think it just takes practice right it just takes time to start using it so you get comfortable with it right we want to get comfortable with the systems we're using whether we're just building a style guide initially or whether we're using the client first with the style guide it's just about getting comfortable with the system to the point where you can you can communicate what you're doing to your clients or to or to whoever is using your website or if you're if it's just for you then you want a system that's easy to understand for yourself and that works well and makes your site responsive across all devices and doesn't over complicate things with using too many div blocks and too many and too many class names okay so it is an art it is a practice you know this is not something that comes out of the box with webflow you do have to take the time to learn class naming convention or to find a system that works for you so you're not just adding div blocks and you you never want a class name that's just called div block right and i know some of us can be guilty of that sometimes at this point i never i never have an element that's called div block just because i've been using webflow for a while and i know i never want to see that but uh yeah in all your builds you want to name your classes and if you need a class naming convention you know there's things like client first and there's a few other ones out there as well and if you know if you just want to name your classes like use capital case that's fine too and be descriptive with your class name so there's many different ways to approach it uh props to you know thin suite taking the time to to actually create a system which is interesting and i'm gonna be following this and it'd be interesting to see where this goes as far as like how many users start using it and what's the consensus and you know could this be one of one of the more used systems so i know there's a few other systems so maybe after i'm done using this system we'll look at a few other ones and just see the pros and cons maybe of different systems i don't know but yeah this is what the live streams are about just getting more proficient in web flow covering different topics and just having fun having fun building in webflow uh so killer wrote why did i just wake up uh yeah just come back tomorrow killa and uh i did get your email and we'll we'll cover that uh so oh i missed a few chats here uh so okay tomorrow i will show two of my pages nice nice nice looking forward to it cool uh yvonne nice they hope to be here tomorrow as well schedule permitting for sure thanks dale appreciate it hey john my emails underneath kenneth i'll set an alarm tomorrow she's in super chat for project awesome thanks cola i'll look for it tomorrow i did get the email so we'll definitely cover that after the super chat um yeah if you want to send a super chat for it all right everyone i went over again uh thanks for joining again uh it's becoming a great live stream uh welcome if you're new hopefully you enjoyed this live stream i do these every monday through thursday from 12 p.m to 1 p.m central and we cover everything webflow all right so yeah have a great day and i'll see you tomorrow um yeah peace bye

Channel: WebDev For You

Views: 506

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, webflow client-first, finsweet client-first

Id: 8JpSHXK4ia4

Length: 72min 40sec (4360 seconds)

Published: Wed Oct 20 2021