Building a hero section with the Client-first Style System - Live Stream - 11/29/2021

foreign [Music] [Music] all right uh hello everyone uh john here and welcome to the live stream sorry about that uh the the the uh the earlier conversation my dog was in here and we were just kind of having a little bit of fun um but but yeah i'll go ahead and get started um these live streams there's not much i can edit out so i'll just get started um so welcome everyone uh to the live stream my name is john and um welcome to everything webflow so i run these live streams every monday through thursday from 12 p.m to 1 p.m and we go over everything webflow how to build in webflow creating interactions and animations and yeah anything related to web design and web development so today what we have on the agenda is we're going to create a homepage hero section and i'll field any questions about the recent build so we're going to build the hero section within the first half hour then we'll take 10 minutes to field any questions and then we'll have a general webflow discussion and i'll field any super chats as well so super chats are if you need uh support with your website or a personal project and you want me to take a look at it and help you out i do request a super chat which is just like a small donation uh to help support the channel so yeah i wasn't here i don't think wednesday or thursday because of the holiday so it's been a few days but yeah we'll go ahead and get started so today we're going to build a similar hero section to this site here i like how they added this image kind of in an oval and so we'll be creating this today this is from a ar shakir on dribble and it's landing page uh heaven hey i'm car welcome welcome welcome um so yeah this is what we what we will be building today and one little caveat for those of you who have come to my live stream quite a bit you'll know that we worked with the client first system and initially i kind of poo-pooed it because i had my own system that i liked but the more i thought about it the more i thought it might be a good idea to use the client first style system for these builds and there's a few reasons for that and i actually mentioned this when i was going over the the client first system the reason i kind of like it is is that it gives us a universal class naming convention is it the best i don't know maybe that's debatable um and actually you know the more i've used it the more i've come to like it in a way so and it it's not too different than any other class naming convention it just has its own particular ways of kind of structuring a site that's a little different but overall i think i'll be using it for these live streams because it does give us a uniform base of a class naming convention which i think will be helpful um as you follow these videos you know you can just go to the client first style system and check out the documentation and then you can get an idea for how i built it right like you can see how i'm using these class names how i'm structuring the website and all that good stuff plus the client first system does start off does it start us off with a style guide which is just a really great thing to have so um yeah so we'll just be using the client first system i think i'll be using it moving forward in a lot of my builds for the live stream and yeah kudos to defense week because they did recognize there was kind of that gap missing for webflow users of like where do i start with class naming so they did fill that gap and i think i'll be using it in my live streams so with that said let's go ahead and go to the resources and we'll just clone the cloneable for the client first system so we'll clone the project and let me call it web dev for you live stream uh today's 11 29 2021 all right hello lmtw welcome welcome um so yeah we're going to be using the client first system and we're going to be building a similar hero section to this here so let's go ahead and get started so i'm car wrote from my experience client first is good for simple website but wizardry for more designer interactive sites a hundred percent agree with that omkar and actually i'm working on a new site for web dev for you that's going to include a membership and i'll be using i believe i'll be using the wizardry method because i have some really interesting design concepts that would work well with the wizardry method as far as like scaling up different elements so wizardry i feel is definitely more like you can use it for more design designy things client first is really kind of structured kind of in the box type of layouts but i do feel yeah that wizardry is kind of like you can do anything and then have a beautifully scalable site and then on tablet and mobile you can have a bit more structure to the site on tablet and mobile mobile um yeah totally agree amkar great point so yeah i'm just going to delete everything that was in the main wrapper here for the client first and let's just go to the style guide first and let's just style a few of the headings so looking at this landing page i think the font i'm going to use is playfair display it is a google font so let's go ahead and install it let's go to fonts and we will install it so for anyone who is curious about the the um the membership that i'm going to be releasing it will include a discord channel where we can have conversations about webflow the other thing i wanted to mention i think i'll be changing the time of the live stream from 12 p.m central to 4 pm central i find that i have a lot of things going on in the morning right now that i do need kind of the the morning portion of the day to to work on a few other projects uh but then after i'm done working on these projects i can come to the live stream around 4 p.m so it's not official yet but i think this might be the last week where i do it at 12 p.m and then next week i'll be moving to 4pm so just wanted to give a heads up on that cool so i installed the playfair display font and let me know if 4pm works better for you or if that's kind of late i'd be curious to hear what you think about that so yeah let me style the heading i'm going to leave the the uh the sizes the same and i'm just going to change the text so play fair display so i'll just do it for the h1 through h3 and play fair display okay cool and then for the body text we can leave we can leave it at system ui that's fine all right let's go to the home page and let's get started so we have the main wrapper so this is the structure of client first you have the body the page wrapper the main wrapper then you have your section so i'll add a section and i'm going to call this section hero and for this section i'm actually going to make it 100 vh so it fills the entire viewport and that's all good let's check out the design here um yeah we're gonna put the nav bar in the hero section so let's add the nav component in the hero section so i'll add a navbar and there's our nav bar looks good we have about how it works so we have kind of and let me zoom in a little bit yeah perfect so we have this section here and let me hide this here so we have more real estate so we have these nav items here then we have this center nav item and then we have this right nav item so the way i'm thinking of doing this let's go into the container and i'm gonna call this nav underscore container and i'm gonna give it a max width or uh let's see i think i can say container large yeah so we'll say nav container and i'll make it container large which is 80 rems i'm actually i'm going to do 90 rems which is 1440. it will be late for me but i also have one suggestion rather than keeping same name and changing dates for live stream titles you can keep title as what we've gone through uh yeah that's that's a good uh good point yeah great point i'm car um i'd usually do it after the live stream like i changed the title after the live stream but i do see that it could be more helpful to name it before we get started so so you have an idea of what we will be working with during the day uh so great point um definitely we'll we'll take that into consideration all right so uh we have the nav container so i'm gonna add a div block in here and i'm gonna call this nav left ah gotcha um yeah i'll do better with the naming for sure um yep great point um so we have the nav link and i'm gonna paste that in here okay so we have this for the brand i'm gonna put it in the center so we have i'm gonna say nav left then we have the brand and uh nav container nav left okay so nav all right so yeah so the nav container i'm going to set it to actually let me remove this class and i'm going to go ahead and add 90 rem here so [Music] because it's specific to the nav container i just want to focus i don't want to add the container large div because we're going to use that for other containers all right so i'll set it to flex horizontal justify left and right okay uh your views on webflow new design system can you share that webflow new design system yeah what is it called uh pavish i don't think i've checked it out yet [Music] and actually i'm gonna center this nav container and then for the nav left i'm going to position it absolute and to the left and give the nav container position of relative so we have the nav links on the left and then for this nav menu i'm going to call it nav underscore rate position it absolute and to the right and perfect and then we have the brand element so i'm going to call this nav underscore brand and in here we're just going to add a text block for the logo text block it's on youtube let me check it out for a second [Music] [Music] um yeah i'll check it out i do see from um it looks like from the no code conf so yeah i'll check it out pavish so let's see here so we have the text i'm going to call this nav logo yeah nav logo and we're gonna set the font to play fair display and i think it was called like fashion or something here yep fashion um yeah that looks good let's make it three rem or maybe two rum and let's see nav left absolute all right okay so let me see here nav left let me change it to relative [Music] and let's see nav container let's change this to relative yeah the nap um this nav bar always causes me issues okay let's try that nav left position absolute yeah there we go then that right position absolute that's set to relative container okay so i guess i'll just do something like this and then for the nav left we'll set it to flex center there we go now right center all right cool so we have our nav links our nav bar and let me go ahead and set it to a background of transparent and i think that looks pretty good yeah i'm cool with that so we have about how it works in contact i love these lives brother any advice on how to increase conversion rates on websites um [Music] yeah that that uh gets a bit more involved as far as conversion rates um that would require like seo um webflow makes it really easy to to add seo call the snap link [Music] but yeah seo is not something i cover too much but you can just go into the pages and add a title tag and description you can add open graph for like facebook and instagram and uh yeah i would do like a search like webflow seo and that should help with uh getting more traffic to your site [Music] or conversions or um you know whatever you're trying to um get users to do on your site all right contact okay let me delete these and i'll just paste that in there so here we have let's see sign up and log in so once we get memberships we can do sign up and log in that'll be fun log in and then we do have a cart so i'll add e-commerce near the end but the one thing i want to focus on is this image here of this dog so let's go to unsplash.com and let's find a image of a dog [Music] um yeah this one could be fun and yeah this one could be fun too let's see this might be cool yeah i like this one all right so we have a few images let me go into the finder i'm just going to resize them so they're a bit smaller maybe like 2500 [Music] 1.4 megabytes okay we'll use this one all right so there we go um so now for the hero for that image the way we're gonna add it is we're gonna add a div and i'm gonna call this uh hero back or just hero underscore top image so i'm using uh kind of the bem model for my class naming convention so if you're not too familiar with that again just check out the client first documentation joe from pinsweet created a lot of videos on how to use the system so definitely check that out if you're curious uh on what i'm doing here um so for the width of this image i'm going to say 50 i'm going to set it to auto so it's in the center uh auto this button right here and for the height let's set it to let's see here i'm gonna set it to 80 vh and i'm going to say position absolute and position it at the top this section here i'm going to say relative so it's positioned relative to the section so now we have this div block where the image is going to go so i'll just add the background image choose the image we'll add this one here i'll set it to cover position it in the center and that's basically it so now i can just go ahead and add a border radius to the bottom left and bottom right so we'll go into the border radius i'll click the individual corners and we'll just do something like i think i can do fifty percent yeah fifty percent on the bottom left and fifty percent on the bottom right and just like that we have this uh this image so i do want it to be a bit rounder let me see if i can get it to be a bit more round which i can so maybe 100 and 100 uh not quite let me try pixels yeah maybe pixels will be better [Music] yeah pixels looks good so i just did like really large pixels i might be able to do i wonder if i do like 80 vh and 80 bh yeah it seems to work nice and let me make it a bit taller so maybe like 90. [Music] yeah i kind of like that 90 and then i'll change the radius so basically i'm giving it the same radius as the height so we have this nice oval at the bottom uh nice so it looks pretty good i might reduce the font size of these nav links to maybe like 0.9 0.9 oops [Music] how much will the discord server be that you're going to launch um i think yeah so for now i have it set to like uh ten dollars a month um and then i have different tiers that give you access to more things so it's going to be a patreon membership and there's going to be a few different tiers so that's currently in the works at the moment um we call it pets pets makes more sense all right so we have that the way discerning lifestyle not sure what that means but okay so let's just see how i want to structure this so we have kind of the these menus here on the right and we have this text here on the left so [Music] yeah all right let's see how i want to do this here all right so i'm going to add a div [Music] hero top image so nav container i'm going to just call this nav underscore component [Music] uh can you give us access inside of what kind of info we get access to and the difference for tier um yeah let me let me look up what i have so far um brent and it's still a work in progress so that's why i haven't really shared it um okay just grab it here all right so so far brent um i have yeah it's for beginners as well um so i have uh four different memberships so i have the relative member so i'm using basically the memberships are titled by the position property here so there's relative absolute member fixed member and sticky member which i thought was a fun way to create the tiers and the relative member which is the 10 a month it gives you early access to any videos i post on youtube you get access to all my interactions and animations and you get access to my patreon feed as well as the discord server that i'm i'll be creating the absolute member gets everything from the relative membership and you get you get access to behind the scenes footage of me working on interactions and websites and webflow and i shout out i give you a thank you shout out at the end of my next video uh fixed number it includes everything from the relative and absolute and you get an invitation to a live class of a website rebuild and as part of this tier you can request what website you want me to rebuild and then the sticky member is everything of the previous memberships and you get a a personal two-hour one-on-one session uh with me where you can ask me anything and it's just a one-on-one session so still working on that and yeah i could be launching maybe in a couple weeks i just have to see time-wise how much time it's going to take to have this membership because i do have a few projects going on so i want to make sure that i'm available for everyone um once i launch so there's just a few logistics i have to work out but i know quite a few users have been asking about a membership and a discord server so i want to be able to offer that it's just taking a moment for me to kind of wrap my head around it and make sure i have time for all of it pablo wrote what did you think about the no code conf um i thought it was amazing um i saw kind of like just the first video the keynote and i saw timothy ricks but super excited with the features webflow is releasing like memberships and logic flows and subscriptions it's something the community has been asking for uh for quite some time so yeah i think i thought it was amazing all right cool so yeah i'll go ahead and continue with this but uh yeah feel free to ask any more questions and brent i'll definitely announce once the the membership is available i'll create a whole video around it and kind of um give a bit more information as to as to what it includes all right so we have uh this div block um let's see here i'm going to let's see how do i want to do this here yeah i'm going to set it to i'm going to call it [Music] hero underscore heading um i'm just going to call it a rapper for now nice thanks omkar appreciate it um so the hell wrapper i'm going to position absolute and full so it fills the entire section and then i'm going to set it to a display setting of grid and i only need one row so we have the left and the right and then i'll add a div block in here and i'll call this hero underscore left and we have the left section and this is where i'm going to add the heading and all these all this text here so we'll add an h1 so i'll add a heading and for this hero left i'm going to set it to flex and put it at the bottom yeah and that's it or center let me center it and ah i definitely forgot something yeah so let's see yeah i need to add a container so the hero wrapper will add a div no um okay so in the section hero we'll add a div and this will be container large [Music] and we'll set it so my container is going to be 90 rem instead of 80 and then in the container we're going to place the hero rapper let me see if i'm doing that right no the hero yeah the hero wrapper and then for the position i'm just going to set it to relative rather than absolute and let's see container large hero wrapper okay um no i do want the hero wrapper to be positioned absolute and full then we have the hero left so the container large needs to be positioned relative and okay just trying to figure out how i wanna style this container [Music] okay so section hero container large so section here i'm going to set it to flux centers and center then for the nav component i'm going to set it to absolute and top there we go okay so we have the container then we have the hero wrapper and i'm just going to set it to relative okay that's much better all right yeah and then we have the hero left okay and we're just gonna give it the weight i don't know what that stands for um the way [Music] this surname [Music] all right [Music] and i'll just remove this class i'll call this hero underscore heading we'll make it maybe a little bit larger maybe six rems and i'll make this a span element we'll say hero heading underline and we'll just give it an underline all right um okay so we have that let me add a paragraph element let me set it to vertical left i'll add some margin to the bottom of this actually not uh yeah two rems so i'm kind of deviating from the client first system a little bit let me just add a max width here of medium how about small not less to medium yep for sure bruh medium okay and we'll just do like this all right so we have a little blurb and then we have a button so let me add a div i'm going to call this button wrapper i'll just call it button component and then in here we have the button and i'm just going to set it to um let me remove this class [Music] yeah we'll just do button and we'll give it a specific width and height so 40 by 40. so there's a bit of a creative license when using the client first system which i'm currently taking um so i'm just dialing the button right now max with and then let me add a div place it in here i'm going to say margin bottom and then margin small [Music] maybe margin medium there we go okay so we have the button component and explore now so let me set it to flex and center then i'll add a text block and i'll just say explore now yeah explore now we have the button so for this button i'm gonna add a div and we say margin right [Music] margin small cool i don't have the arrow but just picture an arrow in here so let me set it to center center and i'll add a text block and just add kind of something like that it's not a very nice arrow but um but an underscore arrow we will see if we can find like a nicer not really [Music] uh something like that picture like a nicer arrow in there um but yeah so far not bad let me change the font weight here to semi bold cool and let's try using some filters actually so we have these new blending modes for the images i think so i have to give a background color i think maybe no i haven't really worked with the blending modes yet all right so i'd have to i'd have to put this in a parent element let me try that hero top image so div and i'll give a background to this hmm okay never mind i'll just do that i'll have to work with um the blend modes a bit more all right cool so we did that uh now we have the menu here on the right so let's see hero wrapper container all right cool yeah so then i'll add a div in here and this will be menu [Music] or uh just hero underscore right [Music] set it to flex and to the right so we position these menu items here on the right okay so um i'll add a div i'm gonna call this hero list item wrapper and we'll set it to flex and vertical and then we'll just add text they're not going to be links because i don't really think it's a menu or it might be we'll make it a menu so we'll add a link block and this will be hero list item link block [Music] actually let me rename this so it's going to be list dash item wrapper and this will be list item underscore link block okay then we'll add a text block in here and this will be list item text all right so we have office where [Music] somewhere [Music] [Music] all right so we'll do those four and i will say margin bottom let's do margin medium nope hey ivan how's it going so i'm gonna have to add a [Music] oh i did this wrong here so let me delete this and i'm going to add margin replace this dip block in here i'll say margin bottom play margin medium okay so i'll copy this margin small cool [Music] thanks yvonne appreciate it office where and then let's make it 2 or 1.5 and we'll do something like that so yeah this is from ar shakir it's a dribble page so just using that type of design there so we get medium office wear this actually doesn't quite go with the dog theme this text [Music] uh let's see here yeah i do want more spacing so let's see margin bottom most margin medium [Music] all right yeah so i think we're pretty much there uh let me make this nav link a bit bolder maybe semi-bold yeah there we go uh cool yeah i kind of like that i feel it's pretty close to this um we just need this arrow here so i probably just find like a nice arrow to replace it i don't think the client first system has arrows no uh feeling stuffed from off yet definitely custom class on that list item next time that way you don't need to adjust each one uh custom class oh yeah true true [Music] yep yeah that would have made sense instead of yeah i could use the custom margin i think margin do they have a yeah margin custom uh great point kevin yep um i haven't tried their attributes for the cms library no yeah so uh i mentioned it earlier in this live stream um i think i will be using the client first system a bit more uh probably one of the main reasons is because it gives us like a universal class naming convention so for those who want to follow along with me they can go through the client first documentation and just you know see how it works and you get a better idea of how i'm naming my classes that's the reasoning behind it and also it's kind of a nice system you know i kind of said things about it initially but it does have a good some good best practices in there nice all right yeah so this is a nice little site kind of inspired off this triple shot and they have this little section down here which we can do maybe tomorrow or you know another day but i like it the user can click on these different categories we can make it e-commerce so i can add e-commerce and then up here in the nav i can in the nav right i can add a cart oh i can't place it in the nav menu okay so we add the cart and let's see where we can place this cart so i'm gonna have to add a div put the cart in here and the nav right inside of this div and i'm gonna set it to never you can set it to a position of relative this div block nav right wrapper set this to absolute and to the right and then flex center cool and then i'll say cart text change this to black in the cart we're gonna change it to cart icon change this to black and the cart quantity i'm going to change the text to black and then this background i'm just going to call it cart cart component excuse me i'll remove this background cool so we have a cart nice definitely want an arrow there let me see if do i have any arrows i feel like i should yeah i definitely do but it might take me time to to download it know the use embed code for the icons is great for hover effects nice all right i think we're done i mean we would have to make it responsive right now it's not responsive this image what i might do here is position it to the left and then change the borders so i would remove this right border and maybe add a top border top right border [Music] yeah something like that and then for the hero wrapper i would set it to i would edit the grid and just make it one column and then i would position this to the right or i would say left and let's see and position the content to the right like this for the hero wrapper i might make it smaller so maybe 70 percent and let's see so i want this to be on the right nope no i think that's a better way to do it let's see pushing this to the right so yeah this would be a bit interesting to make responsive but i would definitely kind of work on this a bit hero left i might have to do like 80 percent [Music] and i would have to yeah definitely make this text smaller basically let me say is mobile and the max width would make it 20. yeah i'd have to give this more thought but i might do something like that where we have the image here on the left and yeah we have these nav items here this will need to be worked out so nav left i would hide it and this i would put to the right so i'll call this mobile menu position absolute into the right now that wouldn't work out too well hmm yeah this would need a lot of work here anyway i'm gonna spend too much more time on it but that would take some time to to make it responsive for sure um yeah i think that's it for the live stream uh thanks for watching um i know i moved a bit not slow but i was kind of introspective on that one there's a lot that kind of goes into creating a nice layout like this um yeah the last thing missing is a nice arrow to kind of finalize it but overall i think looks pretty good it was inspired off this site here it's a little bit wider so i might make this like 40 percent [Music] yeah that's better the way discerning lifestyle they have the links here and yeah looks good all right i think that's it for this live stream uh if there's any questions let me know i appreciate the super chat yvonne yeah we'll work more with client first this week and i'll keep you posted on the membership and and all that good stuff so yeah if there's no questions or no comments or questions or you know any discussions i can go ahead and end the super or the live stream kind of early here [Music] [Music] all right yeah thanks everyone thanks for joining i will be here tomorrow at 12 as well i'll let you know about the time change once that's done so i think by next week i'm going to be switching the time to 4 p.m um yeah but uh have fun designing and developing in webflow and i'll see you tomorrow thanks bye uh where did did you master webflow uh so brent uh yeah i just practiced myself i did work for webflow for two years which gave me a lot of experience as well so yeah working for webflow and just practicing you know pretty much every day made me a bit proficient in it there's still things that you know i need to to work on uh when it comes to responsive design there's just so many ways to approach it um but it is an art i feel like what you know web design and development is let me see if i can think about this on the fly i would say it's yeah i'd say 50 technical and 50 art because like once you have the technical side down there's many different ways to approach a build because you have all these display settings and options and it's just getting comfortable with learning the technicals to be able to apply it artistically to what you want to achieve and to make something responsive and understanding units and how things work together yep uh yeah so definitely come back brent if you're new to webflow we cover pretty much everything in webflow you know design content management system e-commerce um the whole spectrum of web flow so yeah it's a lot of fun and hopefully once we get the community going we'll we'll have even more fun we can discuss and help each other to to build and design and web flow all right thanks everyone uh have a great rest of the day and i'll see you tomorrow thanks bye i

Channel: WebDev For You

Views: 608

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, hero section in webflow, client first design system, client first in webflow

Id: tTZDULfra5M

Length: 57min 15sec (3435 seconds)

Published: Mon Nov 29 2021