Build the 2021 Tesla homepage from scratch in Webflow — Tutorial (2021)

tesla.com if you haven't heard of this company i mean yeah it's a crazy company ran by a crazy person and it takes a crazy person to go against all these industries and make them change anyways what we're going to try to do today i'm probably going to speed run if possible we're going to do a nav bar and that's a fixed nav bar at the top full width with a logo and content center and content on the right so i'll try that and then we're gonna try um you know a content centered with a background image and then um that's jake's car so it's really nice of him to let them do a photo shoot with his car but yeah so we're gonna do that and so notice how they're all the same it's just that the content within each slide is different all right and they're using css scroll snap and i've tried to do css scroll snap for example if i scroll halfway down it slides to the next row on its own i've tried to do that in webflow with custom code wasn't i wasn't successful with that so i'm gonna have to keep trying later but we're gonna choose we're gonna go with a different route for these slides but yeah it's all the same super duper simple and i think we can get it done within an hour and a half so instead of css scroll snap if you remember from a couple streams ago uh two people from the community in the live chat helped me create a vertical slider and connect it to the mouse uh scroll wheel so this is a web flow slider that we've flipped on its side and then it we made it vertical so it's pretty dang cool um i forgot how we did it you know it's just like a muscle you got to keep training and if you don't train it you'll forget so um i'm going to cheat and just copy what we have and uh paste it into my blank project all right so um yeah or should i just yeah let me just try to copy the styles and build it from scratch and and see what happens i think i could do that okay there's a rotation do i have a magnifier on yeah okay the mask nothing there slide nothing there which one's which one turns it back this slider is flipped 90 degrees okay the slider content is what's flipped back negative 90 degrees that's what's up okay okay a good is here welcome all right let's build it from scratch going back here so the only thing i have on this page on this project is the image assets that's it so that's how far scratch we are so first thing let's put in a fixed nav bar let's wait hold on i think i'm forgetting oh yeah i forgot my buy me a coffee my alert box and my logo there we go all right cool all right gotta have those branding all right here we go command or control e type in nav press enter that's for your quick find and now inside of this brand i'm going to put in the tesla logo so command e control e type in image enter choose image click on your logo and there we go so um also in here we have some content so oh they spelled out sexy nice so model s three x y solar roof and solar panels so let's double click this model s wait is it all caps yeah it's all caps i'll fix that later let me delete all of these real quick so we have the model s and i'm going to click nav link press enter press down to go to the end uh three copy paste pressed uh press right arrow and press down model x okay um this one is solar panels is it solar panels and solar roof or so okay roof is first no anything else okay no and then the rest are over there so i'm gonna do is i'm gonna split wait wait for it uh-huh am i doing this right can i have two nav menus hold on i can okay okay so i only need how many one two and then a hamburger three so let's just do two i'll do with the hamburger later it's right here this is shop and then tesla account cool cool all right so i always tell people do not have to get closer do not use the webflow container element it is finicky the webflow container has pre-styled css within it that webflow doesn't tell you about you have to see it from the uh from a developer tool or the the inspect tool that chrome has or firefox yeah you have to see it from there so just get rid of it and replace it with div so do not use this do not use it ever all right cool now that got that out of the way so how do you replace the container click on your nav bar command or control e type in div and a div block has no styles on it you you do everything all right so i'm gonna drag all the elements from the nav bar from the mav bar container into this new div block and then do the best thing ever delete that alright so that's delete and now we have full control over the styles so this div block um what we want to do is i'm going to call it nav flex and now we're going to make sure that everything is is fine wait yeah we're gonna we're gonna do flex right here keep it horizontal we want everything to align vertically centered and then also we want to justify to the edges and watch what happens boom we have our logo centered content and right content the reason why it's doing this is because nav if you do the space to the edges it'll do the math for you and say okay the first one is going to go to the very left and then the second one is going to the very right but if there's a third thing then the second element which is this will go to the center and the third element will go to the right but nelson you have a fourth one it says menu button well menu button is actually hidden by default because this is a responsive nav bar oh also pro tip this layout's right here you may have seen it sticky nav don't use that it's not responsive i thought it was but it doesn't have the hamburger menu it doesn't have the pre-styled javascript to make it responsive no you have to do it all on your own using interactions and it's like it's useless so don't use sticky nav just use the old school navbar it's tried and true and it gives you the most flexibility and it's already responsive all right so this nav bar right here we're going to call it nav add some spacing to the right and left and i'm holding alt on my keyboard while dragging in the padding so when you hold alt it does it on both sides if or if you go on the top and hold alt it does the top and bottom if you hold shift it does all four sides so there we go all right next notice how this nav is pre-styled with a background color ddd let's remove that with transparent and there you go um this brand uh notice how the the logo is already white so i'm going to flip that with a filter invert so i can go to this brand i'm going to give it a class name of logo scroll all the way down to filters right here press plus change this to invert and now it's black boom all right let's give this a max width of 150 oh okay i was just guessing at a number 150 looks good we can make it smaller later i don't know uh so yeah there we go let's change um i know i don't have the official tesla font but i don't want to use ariel ariel is old school so i'm going to go to body and click on html tag body so this is the body tag and i'm going to change this to my personal favorite montserrat and there we go and now for the nav link let's make everything well let's see here okay it's kind of bold so let's make all the nav links semi-bold uh all caps right there if you can't find all caps it's under this drop down right here more type options all caps cool all right and so because i have navlink in the selector but this one doesn't have a name i can just control com control enter and type in nav go to nav link another shortcut you can do is click inside of the selector copy that and then control enter paste go to next one control and then paste see how fast that is much easier bam bam bam cool all right are you using m's okay i'm gonna be honest i've never used m's and i'm completely confused about m's i need a read up on that but what i saw our lead brand designer and webflow use is 1.3 dash still don't know what that means but i'll use it if someone smarter than me uses it and doesn't seem doesn't seem like it's hurting anything i might as well use it but jordy if you want to teach me of the ways please web flow in a nutshell what's what flown in a nutshell all right so yeah that's cool so last thing we need to make this fix so we want to fix it to the top so all you have to do is position fixed and to the top and set the z index to like i don't know some crazy number navbar done in probably five minutes here we go so uh let's go ahead and do our slider so let's make our vertical slider how we did this how did we do this i need cheat guide okay all right so we have a slider wrapper okay so first thing i'm gonna do is i'm going to put a div and i'm going to call this slider wrapper and this is going to be the full height and width of the page so i'm going to say 100 on the width 100 vh will almost drop my mouse a hundred vh on the height and yeah that's it for that uh cool now inside of there i'm gonna put a slider component the webflow slider component and this one is going to have a height of 100 vh wait let me double check oh okay yeah yeah because we're turning it the width is 100 vh and the height is 100 vw that's where things got weird because we're flipping this all right let me show you so this slider is 100 vh whereas the height is 100 vw and then we're going to flip this guy uh there we go rotate on the z axis 90 degrees am i doing it wrong no wait did i do well this one's flex okay hold on this slider has to be flex ah okay so this slider needs to center the thing get it um let's remove the arrows so i'm just going to call this give it a class name of hide because i don't need the arrow so hi just means display none i'm going to give this the same class name and then the slider now if we don't need it so i'm going to give it a classroom of hide all right christopher i like your middle name ark welcome um okay so we have slide ones like two uh what am i missing here this one there's nothing okay it's a slider content wrapper that hmm slider con okay i'll just cut if okay oops i'm gonna put a div i'm gonna call it slide wrapper so we have the slider wrapper and we have a slide wrapper this one's going to be uh flex as well and center centered with a width and height of 100 and then the content within it that's what is flipped okay but the width and height so the height is 100 vh width is minimum okay oh geez div slide content okay here we go so the height 100 vh 100 vw oh and then i got okay and then i gotta flip it so we're gonna rotate it back negative 90. there we go okay cool i know it looks like i'm not doing anything but i promise you i am so what we did was i made a slide a web flow slide component rotate 90 degrees and then with these tricks that i learned from a cut is you the slide content you flip it back all right so there we go um cool so in the slide content what are we doing uh yeah so the slider also has a preset background color i'm gonna set that to display or transparent and there we go so everything's white now it looks like i've done nothing but just like building a building you got to do the the foundational work first before you can start building the walls and adding color to them and putting in the furniture all right so we're just doing we're doing the plumbing first you know gotta get that out of the way all right so slide content and let's see here we'll say give it a combo class of one because this is the first one and we're gonna give a background of the first one is the s beautiful bam that's a crazy car before the roadster comes out it's crazy all right so next we need to put some content so we need center all that so what i see is a flex box with two divs inside of it a div for this row and a div for this row and then we're gonna space it vertically to the top and bottom so that's what i'm seeing so let's go ahead and do that um and i think that happens for all of them so let's so i'm going to set it to slide content and vertical center vertical center and then push the top and bottom and i want some padding at the oh no it's not supposed to be that way oh i'm so confused but we'll just keep notice how i'm going like this and you see the green line at the bottom but yet when i hover it's on the sides confusing but whatever just keep going who cares we'll learn something today i'm going to use a heading and we'll use a heading two yeah so it did work oh wait don't want it there i want it i wanna on the parent class that's so weird i'm playing with the top and bottom but it's happening on the sides what is life i don't whatever okay we'll put it here for now and and see where life takes us all right there we go let's say model is it all caps or nope and it's kind of thinner so let's do this all the h2s there we go and this is probably bigger let's give it like a oh too big 42 yeah probably 42. okay and then it has some like order online for touchless delivery so i'm going to just use a regular text block and oh i forgot to put these in a div let me do that so this okay so this is my first div with my heading two and then not a link but with a text block there we go and all the slide content should be centered text center there we go and then i'm going to have another div block down here and it's going to have a button it's going to have two buttons so there we go so we're getting there it's looking like it all right so now we have an inline link so what i need to do is give this class name of line link we don't want to use so notice how this is blue that is the default browser link blue now if you go to your typography and you're like wait it shows gray but that thing is blue you just have to override the css code by clicking on this and going like this and then putting it back and there you go all right so just a little stuff right there cool so that's done button text what does it say custom order existing inventory custom order existing inventory cool all right so we have two types of buttons we have a dark one and a light one so yeah we'll just call it dark and light so first one i'm gonna call this since they're using kind of the same style it's just the only thing that's different is the background color i'm just going to give it a class name of button and let's go ahead and minute minimum width let's go and force the align center and then i'm going to set a minimum width of i'm going to take a guess 250 give it a border radius of 20 all caps i wonder if the font is small yeah i won't say 12. that's too small we'll leave it at 14. right yeah we'll leave it like that and i'm where is it 12 yeah whatever and then um let's put some margin so we have a gap in between so i'll say 12 margin on both sides of the button and then i'm going to go to this button the second button and give it the same class name boom now i can go to this button and call this dark and give it a different color there we go and then go to this button give another class name and give it oh not white uh light something like that light gray and give this cool simple right yeah yeah is this centered yeah it's centered all right cool boom so now that we have the foundation of the first slide done we can just rinse and repeat for the rest right so check out how fast we can do this and bonus points we're going to use oh wait i wanted to use symbol overrides to make this even faster hold on thinking all right i'm going to revert this to symbol override to make this faster so i'm going to remove my remove my combo class and uh hold on thinking thinking what should i do with it yeah uh-huh thinking okay so what i'm going to do is i'm going to do hold on hold on brain can i push in the background maybe all right well listen yeah no no but i need a so i i feel like i need to play around with with um oh gosh with position absolute so i can put the image as a background but still have it as an inline image and then do like a z index negative one or something so that it's a background so i can use symbol overrides so i don't have to keep putting combo classes like combo class one two three four like that um because i'm thinking about the content editor in the future i'm pretending there's a content editor and we tell that content editor hey you need to change the image of the car and rather than doing it through css this content editor would do it through symbol overrides stay with me stay with me i hope i don't break anything right here but i'm gonna try i'm gonna try to keep it all right so let me try this okay uh i want you to be on top so absolute full ah i knew i was gonna break something can i go like this oh my god yeah that's not gonna work all right that's fine i can still do this i think image wait wait wait maybe this is it hold on if this works then i'll explain just let me work bg image absolute full white um 100 100 and then the image the index back oh okay okay okay or should this be 100 vw and this one's 100 vh this is cover okay i think i got it yeah so let me change this to you cool wait let me do one more thing so i can explain and then we're good i'm gonna go here create some okay getting happy home page slide and then we're going to do some overrides let me go here here here this one is yes okay i did it i know some of you are like wait what's going on nelson well i'll explain what's going on let me unlink and delete that slide or symbol all right so whenever you're building websites not only do you have to think about the user experience from the user's point of view when they're going through the site and you're making it easy for them to gain content or convert to do something you got to think about the people on on the other side who's doing the business is it easy for them to maintain their site if it take if to be honest if you're the type that likes to charge for monthly maintenance fees on websites and you rely on your clients to call you up and say hey can you add a new blog post for me or hey can you change this word on this page for me and you're charging your clients for that you're done wrong that's my opinion uh i don't charge my clients any monthly fees i give them the whole site i transfer it to their account and i give them tutorial videos on how to maintain their site because in the back end i've made the co the collections and the symbols so easy to use and reuse that they don't call me they only call me when they're like hey we have a new landing page because we're doing a new product launch or something i'm like cool let's go those are more interesting to me than can you change the heading on this page if that happens i've done wrong but uh yeah so what i'm doing is instead of using a background image a css background image using this i'm using an inline image and with that inline image i'm setting that as a background by using position absolute z index negative one to push it behind the content setting the width and height and setting the fit to cover and so it's acting like a back a css background image but it's actually in line and what's good with them about this is that you can also set alt text for it you can't do alt text for background images so this is the better better way alright um and now i'm going to make it a symbol with uh symbol overrides so that way when a content editor comes in this person doesn't have to know code this person all all this person has to do is just click change content and move on with their day so let's get to it so my slider wrapper i'll create symbol and call it slide content and there we go and now i'm going to set my symbol override so i'm going to click on this button and the link i'm going to create a new field i'm going to say dark link and this one right here i'm going to give it a new field and call it light link and for this background image i'm going to add a new field and call it bg image this one right here we're gonna call it product name and this right here this might be tough but do all of them say order online yeah they all say order online that one's the order online uh oh that one doesn't say order online so this money back guarantee so and that one doesn't have anything so might be hard but we'll just keep going let me remove the link here and see what happens with life i'm going to delete this versus um uh supporting copy we'll just say supporting copy like that and see what happens all right let's call it supporting copy there we go so we have everything set up basically all these purple things that i've done is like templates like this section is a template now so i can just copy and paste and change what's ever in here so i'm gonna leave the instance i'm gonna copy this go to slide two and paste and now say i'm a content editor and i have to go in here i'm like okay i have to change stuff so slide one is model s slide two it needs to be the model 3 so i'm going to go here click on this once and look what happens on the right it's all my instance overrides so what i can do is just say this is now the model 3 and there we go and this one right here let's say order online oh you can't put it you can't put a link here excuse me i guess we have to we'll figure that one out later hmm i guess it's not gonna work hmm i gotta think about that but all right jordy do you make new videos for every client or do you have standard tutorials i make new videos i add that to my uh my quotes and contracts because every website is different and every website um that i've done has like varying of animations and sometimes animations has content that the editors want to change or there's like custom modals pop-ups um or the collection structure i mean collection structures are different across the board so i gotta teach people how to get through their site um and and maintain it in under five minutes if they can maintain their site under five minutes yes that's it because i don't want them to stress over logging into webflow and being like how do i do oh god here we go i i don't want them to have the word pressed fatigue the wordpress fatigue yeah so here we go so order online so we have a link for that we have a link for that i'm not going to change it but for this we have the model no yes model 3 so there you go and so i can just copy and paste the slide and now we're on slide three and change this to the model model jake let me do that right here this is the model jake wait did i change it the wrong s3 hey what the oh because i copied the same wait am i doing this wrong s3 hello mcfly what happened how come let me drag you in what slide am i on three right there oh okay web flow was being laggy it didn't get to three so now i'm on slide three there we go so this is the model jake and asks jake for a test drive no not not acid schedule a test drive with jake and then change it to there we go um hello props channel all right and now we need to add a new slide so i'm just going to click add slide copy this slider content there we go i want to make sure that we're on slide four so let me slide and slide and there we go and this one will be oh you know the third one was supposed to be the model x so let me go back here x replace with that that's so cool all right so there we go we got the model jake and then now we need the solar panels let me just copy paste that okay yeah let's go to five there we go we're on slide five see how easy it is to just change stuff when everything's a symbol all right and this one will be solar roof is that what they say oh no this one's solar panels so we can just copy that and say that one and then their money back guarantee and this one it just says order right oh order now learn more oh i didn't set the oh let me let me edit this real quick so this button also has a text field so uh button text dark link this one button text light link and now we can set those words however we want so this one doesn't say custom order it says order now and learn more we'll do now and the other one says learn more change the background easy peasy copy pasta go to next slide and this one says no cool and this one's like cool just like that we're now learn more uh replace all right last one accessories copy paste go to next slide let's go ahead and change the image to a wall charger and what's this a shop yeah shop now oh it doesn't have oh there there's conditionals now oh we'll just deal with that shop now um accessories doesn't have anything so can i just delete it yeah it'll be gone we'll just leave it like that uh yeah so now we need to control the so if i were to just go here and publish i can't scroll up and down because webflows webflows uh slider is not controlled by the mouse wheel but we can add some custom code to listen for the mouse wheel and i did that right here so i'm going to add it here save and publish refresh bam okay didn't work so i'm just staring at the camera and looking at failure why you no work i went too fast oh i didn't give a uh an id to my arrows so left arrow is go up and down arrow is go down publish there we go okay let's with more confidence this time and please cool it works up down up down and there it is all right let's go even further let's add interactions to this um notice how in here we have the content the the the content the buttons and the words they s uh they fade out and fade in so we can do that let's do that um let's see here i'm going to edit this and let's give these things uh class names oh no we don't we don't have to use that right well do we yeah hold on okay yeah so we'll call this uh i already gave it con slide content okay i'll rename this slide content rapper nelson is the best at class naming slide content slide content the reason why i'm giving these two the same class name is because i want to use oh jesus there we go so i want to use webflow interactions to look for classes named slide content so that way i can say fade out slide content fade it back in all right all right so let me go here and let's go ahead and create interactions let's see here do i have to do it on the slide let me see here all right so okay so i've clicked on slide so i'm targeting slide one and then i'm gonna go to the top right element trigger plus and then with slide one selected this new option shows up right so animate when slide is in view or out of view i'm clicking on it and we have the in view so start animation and what i want to do is press plus and slide show content and let's see here can i double click in here oh i can slide content is what i want to target i'm going to press the plus sign this one's going to set the opacity to 100. uh yeah only children with this class so children of this slide will with the class name of slide content will have opacity go to 100 right so that happens on both even though i only clicked on this one it's gonna happen to both because both of them have the same class name and they are a child of this all right so save and slider out of view i'm going to just duplicate that one and say i named it show show content slide hide content all right whatever set the opacity to zero oh and i need to make sure the ease not is not linear so i'm gonna set it to ease save and i'm gonna go back to the this one name it this one needs uh ease and that one's going to 100 there we go and now uh i can make this even easier watch this all these slides right here i'm going to give them the same class name of slide all right i'm not going to add any classes to them i'm just going to name them slide and i'll show you why after i'm done so you get a slide and you get a slide you all get slides all right now that they're all named slide i can go to this interaction right here for the slider change and check it out i can set this interaction to trigger on all elements with the class name of slide that way i don't have to go to each slide and add the interaction to it i add the trigger to it i don't have to do that all i have to do is do it once and it happens to all of them and because of that we might be done with the desktop refresh cool it i don't know if it's happening let's add some delay um let's add a delay of 0.5 and that one can go away fast it doesn't need a delay so let's try that the reason why i say 0.5 is because it takes .5 seconds half a second for the actual animation of the slide up and down to happen so i think that's why we don't see it happening aha did it that easy yes multi-select layers would be super nice i mean you can do multi-select inside of webflow interactions but you can't do multi-select elements in the navigator let me throw this in the live chat so you can play around yay all right and while i'm doing the mobile version of this site go ahead and queue up your questions um jake if you want to have the form where people can ask questions so go ahead and ask your questions and we'll cue them up for the end of the stream and i'll answer as many as i can but yeah this has been fun so far let's keep going uh so i don't need you anymore you're gone you're gone all right inspect what you look like smaller all right all right yeah you look this yeah it's such a simple layout that it's just the same okay but the buttons stack yeah yeah we can do this let's go all right so go here we're fine all right now let's go ahead and stack so i'm gonna double click on the slider content so i can edit the edit the main instance go here slide content and set this to vertical sweet and then the buttons will also have a margin like say say 12 on the top and bottom and this one can we hmm hold on it's because he oh okay can i make this one bigger like a hundred percent i can okay so i'll set the width to 80 percent and there we go let's back on how can this background image is annoying i feel like it's not center centered well i guess it's okay i think it works so that's that so if i scroll down oh i can't actually i think we're done with responsiveness uh let's go ahead and double check our nav so our nav click it once i can go to open menu and fyi watch what i do i always when i'm doing responsive i always start from the tallest or the widest break breakpoint because css cascades down you don't want to make your changes here and then you have to change make the same changes here and then here you want to do it at the largest one so this one doesn't have a hamburger menu but if i go here it does so i'm going to start from here when it comes to editing my mobile menu i'm going to click on open menu and uh tesla's version it comes off through the side like that so i'm going to do it from the side so instead of drop down i'm going to do menu right and there we go and it looks like there's a things are just broken uh oh it's because it this now flex is set to hmm now flex is set to flex is that gonna hurt me i don't think so let's just keep going all right nav menu what if i set this to flex vertical oof nothing's working okay we have problems let's see if i set this to display block we have problems we have problems no why is all my content like all the way to the top what oh gosh okay well here we go all right just set it to fixed the nav menu should be set to fixed no i don't wanna i don't wanna break some of the webflow pre-styled code to me it should have been working already but let's just work our way through it and what i mean by work our way through it is click random buttons until something works that's how i live my life does this random button work no well try something else um i feel like flex is causing issues but then it collapses at the top what what is it because i don't have a wrap like a like a chicken wrap a chicken wrap supreme keep clicking buttons click on the things and then delete when it doesn't work if i set this wait hold on is it because i'm not on the open state no all right this is the part where i don't trust okay well okay let's let's publish and and see what's going on whoa that's so broken we'll get to that all right oh okay it's because i have two nav menus see i knew i was gonna have a little bit issue i kind of hesitated at the beginning of the stream like am i allowed to have two menus and i was like oh yeah sure why not but now i'm like oh no i just broke it because i have two nav menus okay so what if i delete this nav menu what happens yup see i deleted one of my nav menus and then it works i'm gonna have to rethink the structure because i need that center and then do we use grid because then it's perfect one-third and then i don't oh yeah okay well maybe i won't get to your questions all right i'm going back here and we're gonna no flex nav grid the reason why i'm choosing grid is because i can get a simple three column thing without having to do flexbox stuff all right so i'm gonna leave it like that and these two links let's see here in this nav menu i'm gonna ah jeez and this nav menu gonna put a div hold on let me figure quiet in the back let me let me figure it out and then i'll explain okay open no div and then all right you two over there who is playing with the paper airplane stop wait i'm gonna figure it out calm down jimmy jimmy stop okay all right so that one i'm gonna go like this and then this nav menu i'm gonna flex and then we're gonna push it to the sides we're not gonna wrap um it's not centered ah freaking out life is not supposed to be easy but okay i mean it looks good there but eric welcome back yay i had to create two menus one for desktop and one for mobile yeah i want to see if i can do it with just one see there has to be a way wait a minute is my margin well i mean how come this is like doing things that i oh okay because i need them to be flexy expendi no no yeah sure acre give me assistance i'm about to throw my mouse no i would never throw my mouse i need it it's been good to me because when i get here i want to be able to just say two columns and then this guy is on the right and then that way when i go like this we're all good to go oh yeah so if i can just fix it here like with all this this yeah this nuttiness here i'll publish if you want to look at the code but oh and if you want to follow along here let me yeah actually yeah um hold on hold on wait if i do four columns i can center the middle no i can't what is life [Music] there's the link everyone class assignment pop quiz why does nelson suck at this all right so there's your pop quiz um all right but hey we got the mobile working so there's that all right well center it giving position absolute and margin auto i'm i'm not a fan of position absolute i'm not a fan of it darshan but welcome to the stream i appreciate you chiming in because position absolute makes it float i don't like floaty things oh i turned up i turned off the share link my bad let me delete that all right a cut we're back here nav grid display okay nav grid display block okay so this one shouldn't be a grid all right cool well i'm going with it nav menu with 100 okay i think it's because this has a float oh wait wait wait wait wait what remove the floats is bad floats are bad oh jeez logo image 100 percent of its pa 100 of his parent but this is a width of 150 why is it 100 what [Music] want to see in the life of a no coder this is the true life it's not glamorous it's not glorious don't expect to make money real quick think of all the stress you'll go through when you tell it that the logo is 150 pixels but it goes a hundred percent of the width of its container this is true web design right here max with i'm gonna say none why did that work whatever whatever all right so this nav menu how come i can't change the float yes take off the float and then flex jesus okay what else did you do logo height 100 to make it flex center so we're doing flex instead of grid right left margin but the first child has an empty div oh i didn't want to use empty divs oh what wait what put as first child empty div in the div block with all the links okay okay well all right all right hey good i didn't what what did i alright empty div this nav menu is gonna yeah okay and then we're gonna spread those and then all of these that one that one and that one nav grid blocked the split what are you doing to me i don't know i don't know anymore sometimes accept failure but know that you'll get back to it later the master tells me a little bit more what if i did this as grid and the first column you're saying is 20 vw the second column is 1fr and the third column is 20vw and done i said it's done and then this whole nav menu takes up two columns but it's also flex to this okay it's flexing to the sides but it's not like is this not supposed to be like oh okay yeah okay how do we solve for that okay i'll check twitter let me copy and paste this all right a good with the save once again let's see what you did show your work to the class all right all right i see you so we got this div okay yep and that okay yeah we have flex and we want to center that and then off to the sides okay cool oh wait no that one's what yeah logo is that oh the logos absolutely all right you want to see me learn this is me learning and going what it doesn't make sense position absolute putty at the top so that means nav bar is fixed but absolute confined fix as well okay um and then div block three oh you're ah you're adding padding inside to to account for that what is this for can't you just delete it and oh you can't okay so okay oh he could with the save once again all right there we go uh simple as relative yeah simple is relative all right so this didn't need to be a grid and this one's fixed this one uh remove this and then put a div in here and i probably lost you all already so this was kind of a tutorial or just a watch nelson strip wait what why how i have no idea does that happen to you guys too you get logged out of webflow i need to go eat now otherwise my mom will kill me no go eat you can watch these later bye thanks for the help all right let me delete that this one's gonna be how do i get the let's try this okay the nav grid this logo is not floating this one's not floating but it has extra div inside this one is okay okay um why is i the the absolute in the logo is tripping me out oh because okay i get it okay let me do that and then here with this nav menu add some padding 150 what but how come this is not do i center this content i think that's it oh that's just looking janky this one right here watch when i uh ugh the logo is no go she felt bad vertically center it there we go there we go and let's just add some padding inside there we go cool now we are done with it so if i preview and i bring it in we still have a wrapping but that could be fixed maybe with some padding maybe the padding is just way too big on the sides oh sweet we did oh my god that gets so close but it's okay we did it we finished it in time everyone all right okay thank you again to a cut for the assist [Music] you

Channel: pixelgeek

Views: 2,043

Keywords: webflow, web design tutorial, webflow tutorial, graphic design, web development, pixelgeek, pixel geek, web design, web designer career

Id: cKrPBieMPjM

Length: 74min 31sec (4471 seconds)

Published: Tue Apr 27 2021