Building the 2021 Tesla homepage from scratch - Live Webflow Tutorial

[Music] so [Music] [Applause] [Music] [Applause] [Music] so [Music] do [Music] [Applause] [Music] oh [Music] [Music] [Music] [Music] mama [Music] [Music] [Music] again [Music] oh [Music] okay [Music] [Music] awesome [Music] uh hey everyone welcome to another pixel geek live stream i'm your host nelson thank you for joining me we made it to another weekend and again when i don't stream for one weekend it feels like forever in a day but i'm glad you're still here and you're still part of the no code community i appreciate you all if you're watching live right now in the chat room shout out uh your name if it's not the same as your youtube screen name and um also where are you from and if you're the type that likes to lurk you just like to watch and you don't want to chat that's totally fine as i say all the time in all my streams as long as you're getting valuable uh resources uh for spending your time with me that's all that matters all right and if you're watching a recording of this again cool thank you for watching uh these streams happen every saturday from 10 a.m to 12 p.m pacific time and we just talk about no code stuff mostly webflow stuff because that's my bread and butter that's what i've been teaching since 2013 when i first laid eyes on it uh at a web flow no sorry at a web design conference and uh this one speaker was talking about past present and future web design tools and yeah that's when i first saw it and i was like all right let me try it out and when i did [Music] just craziness in my head i was like wait you can code websites without coding websites and the code is being done for you in real time what so that's when it all started all right who's in the live chat room right now first one in the door thank you so much to jake my live stream producer extraordinaire helping me run these live streams you're awesome well you're saying may i suggest the midnight silver metallic model y for the featured image in the remake um and i asked is that what you got so congrats on your silver metallic model y tesla model y awesome awesome uh alexander from france welcome julian is here penny is back welcome pablo is back pablo my community manager speaking of community join the pixel geek community over at pixelgeek.com check it out um say hi and that's where in between streams i help you out jake and pablo help out and um the wrestling community just helps people together and um yeah we're creating a small type tight-knit community and um i'd rather like the community small so more people can get their questions answered and actually have real tight community uh relationships rather than a very large one where you feel like your message gets lost in the noise all right uh sebastian wolf hey everybody watching right out of the gym you're watching at the gym nice okay well get your games in and yeah keep it up uh who else is here who else is here uh nicholas welcome julians from uh germany ezekiel from tennessee rio from netherlands oh no no it's jordy from netherlands welcome glendale california scotty welcome welcome back steven love the marine from texas who's actually in florida welcome back i am glad you are here you are healthy and you are doing well i honestly with my whole heart welcome back uh fran alexander's from france daniel welcome and brian what up guys what up to you as well uh yeah yeah so last minute change from today's topic i wasn't really feeling today's topic and i know i changed it last minute but i was like i wanna go back to my roots i wanna it felt like it wasn't going to be fun and um i've been doing a lot of the past couple of streams we've been doing a lot of advanced things and i'm like let's let's take it back let's go back to the old school days and a lot of people have been asking me about this saying uh nelson can you do a full website or web page build from scratch like you used to do i've seen your old streams when you're building uh apple's uh apples page from scratch or um i did an airbnb page from scratch and so people like can you do that again and i've been holding that off and i'm like you know what yeah let's do tesla's homepage that one seems pretty simple all the rows are exactly the same just a change of background image change of some buttons and yeah so i want to do that and if we have time i'm going to keep going and make it responsive i haven't done a stream where we actually make something mobile responsive and everyone is on mobile so why am i shying away from that web design is only halfway done if you only do desktop so let's get it um now before we get into the topic the tutorial at hand let's see here uh oh steven is saying nelson you got you got to see the spacex nasa launch live that is one of my bucket lists to watch one live um yeah i'm actually wearing nasa's shirt yeah this is one of my favorite shirts it's a long sleeve pretty cool yeah big big fan and the whole like you got to see the the is it yeah cold gas thrusters in the separation from first stage and second stage and you saw all that i mean we saw that on the west coast i was able to see that live in the west coast and it brought tears to my eyes so i don't know how you reacted but man just seeing that science happen in real time all autonomous nutty nutty those the people in the dragon capsule the dragon uh crew dragon don't have to do a thing they just ride as if it's an airplane but it's like auto and oh god it's science anyways um no jake i am not facial fashion can't talk fashion modeling i'm not starting that no all right so uh cool let's go to my screen and the first thing i want to talk about for morning announcements uh yesterday last night i went with my wife to cheer on her fitness coach her fitness coast coach did a competition and those people are crazy like oh my gosh you know doing obstacle course it's like a it's kind of like a ninja warrior but smaller space and they have to do all these different uh workouts in within 30 minutes uh anyways so i saw this sign on their wall and um i'm gonna scroll in and it says our creed and it's in four quadrants and it says we own our success and well i'll back up the reason why i'm talking about this is because i was thinking about the no code community like i was reading this and i was like how do how can this connect with the no code community and after reading i was like this is what the no code community should be uh this is what we should hold ourselves to every day all right so we own our success we set smart goals so thinking about in web design setting smart goals not something that is completely out of reach for anyone like i'm going to build the most massive company in the world that'll like make thousands of websites in months or you know setting smart goals um utilizing available resources this one made me laugh because i was like there are times when i have to tell people especially in customer support google it i mean in the simple google search terms may help you find it and there's so many resources out there besides google there's the webflow forums the facebook group the pixelgeek community webflow does have a subreddit um there's an unofficial webflow discord and there's so many no code communities maker pad um listening to visual dev fm mackenzie's flamingo community there's so many resources and don't be afraid to utilize them because if you're only asking for help and you're not searching for it you're not you're not doing the the work to try to find it first then nothing's gonna come to you you have to go for it and use every available resource you can find um and most of them are free uh we take accountability for our results so yeah um if something works celebrate that celebrate what works and share what works but also if you fail share that you fail it's it's a result and you learn either way you learn more from failure than successes um yeah this part seemed i think it's staying too long but let's just keep going really fast have and don't have an undefined picture of success struggle to follow the instructions abdicate uh responsibility so we are willing and relentless we face new challenges head on and what what that one i like about that sentence is try something new even if it scares you like you're about to click a new button in webflow you're about to try to add custom code from fin suites cms library or try jet boost or or or something a third party plugin integration you're scared of it but just put yourself in there and try it you know and you may learn a thing or two and that goes straight into we adopt a growth mindset you know you can't expect to grow if you're never going to step foot out of your comfort zone and if you if you just stay the course the web design the no code community and technology will pass you by quickly if you're in this community if you're in this industry of technology thinking i can just do the bare minimum every day then uh you won't get anywhere yeah it it moves so fast it started with uh crt monitors then became flat screens wide screens steve jobs showed the iphone and then the ipad came out and we just had to keep growing and it you know grow with technology how we take massive action so yeah respect the process we are patient we embrace change we check the ego this one this one hit me because i was thinking about a fellow pixel geek community member who i chatted with a while um uh in our member only session and this person was uh left the tech community for a while because the programmers were making fun of the code this person has created rather than helping this person understand how this person can do better like i never make fun of anyone who is trying to use webflow for the first time for the first hour first minute and i'm like i am proud of you for signing up if you just signed up that's a big step and if you've learned to move a div from one area to another that's another huge step but people who make fun of other people it just shows how insecure you are check that ego get rid of it there's no such thing as an expert there's just people who are nerdy enough to click buttons for a long time and that's why i never call myself expert it's how can i help someone learn something that i've learned a while ago that's it you know and and like no one no one is born already walking that would be weird you know everyone starts off as a baby and then you have to learn how to crawl and then you learn to walk yeah anyway you know and we inspire others so that's me that's why i do these streams every saturday i do these streams to inspire people to just keep learning because again we have a finite amount of time on this planet and there's so much of this planet and so much of the universe that we don't understand and so learn as much as you can before you can't and leave that as a stepping stone for others to learn from you and learn from themselves so they can give it to someone else um yeah we celebrate every win we show empathy yeah so i'm probably going to translate this or or post it on the on the pixely community and have it pinned somewhere but this i feel like is us if it's not us it should be us um and it should be us now anyways so that's that that really inspired me and uh yeah next thing i want to talk about let's see here hold on there's a question from rio are you also standing while you work on projects i sit and stand i sit and stand uh oh i almost tripped all right uh yeah so if you didn't see my latest youtube video wix sent me a box of bose noise canceling headphones 700. so here's the packaging that i ripped off but um i haven't touched it since that video it's still here i promise i'd give it away and i forgot to do a video about the giveaway so jake if you can start if you can make a clip of about this uh yeah so here's my video for the giveaway so in two weeks starting today in two weeks anyone who's a pixel geek member uh will have a will be in the raffle to to be sent this yes it's an open box but we only used it once for like three minutes or so and it was during that video and then we quickly put it away my wife and i and we haven't opened it since it was just cluttering up the the corner of the room i already use my own headphones my wife has her own and we're like we're totally fine we don't need new headphones so if you want this come join the pixel geek community pixelgeek.community and uh we'll see you there so two weeks from now today is april 24th so someone tell me the date hold on calendar so okay so may 8th when i do a live stream again i will announce the winner okie dokie so sign up it's more valuable since you touched it no it's not it's less valuable because there's an open box yeah next time i go to best buy or something and then i want to return a package i'm going to say you owe me money because i touched it sign it pablo you just want my signature so you can forge things right no i'll have my daughter sign it all right me hey thank you steven all right eli is here welcome you made it on time yes you did all right um next thing i wanted to talk about oh yeah we have a referral program so if you are already a pixel geek community member we do have a referral program um one of our community members suggested we should have an uh affiliate program so that they can bring people into the community and get paid for it so yeah jake if you want to if you want to link that we have that going on and also if you have a future live stream topic idea please let us know over at pxlgk.com ideas there's a lot of them and we may get to the point where we have to uh put a voting on so we know which priority which one to do first in the list so it's getting to that point and i'm glad i love all the ideas i welcome them all and uh yeah that's it shall we move on to building tesla yes we shall tesla.com if you haven't heard of this company i mean yeah it is 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 in 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 going to choose we're going to 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 webflow 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 s3 xy 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 press down model x okay um this one is solar panels is it solar panels and solar roof or so okay roof is first nope anything else okay no and then the rest are over there so i'm gonna do is i'm going to split wait wait for it 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 going to 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 all right 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 um 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 i have 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 gonna flip that with a filter invert so i can go to this brand i'm gonna 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 uh font but i don't want to use ariel ariel is old school so i'm gonna 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 and uh all caps right there if you can't find all caps it's under this drop down right here more type options 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 to read up on that but what i saw our lead brand designer at 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 the ways please web flow in a nutshell what's what flown in the shell 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 net a 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 going to 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 100 uh vh on the height and yeah that's it for that uh cool now inside of there i'm going to 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 a hundred 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 gonna 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 hide 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 class name of hide right christopher i like your middle name ark welcome um okay so we have slide one slide 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 webflow 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 going to 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 gonna 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 to 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 the first one i'm going to 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. all 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 light something like that light gray and give this cool simple right 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 all 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 [Music] 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 gonna do is i'm going to do this 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 you 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 um 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 i want you to be on top so absolute full 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 um 100 100 percent 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 gonna 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 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 all right um and now i'm going to make it a symbol with 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 this 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 um the link i'm going to create a new field i'm gonna say dark link and this one right here i'm gonna 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 going to call it product name and this right here oh 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 this 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 we're just um uh supporting copy we'll just say supporting copy like that and see what happens all right i'm going to 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 three so i'm gonna 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 three 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 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 wordpress 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 three so there you go and so i can just copy and paste this 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 uh am i doing this wrong s three 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 now 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 you 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 say 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 web flows 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 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 no 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 going to go to the top right element trigger plus and then with slide one selected this new option shows up all 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 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 going to set it to ease save and i'm going to go back to the this one name it this one needs ease and that one's going to 100 there we go and now 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 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 0.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 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 cue up your questions jake if you want to add 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 if i 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 um hold on it's because okay can i make this one bigger like a hundred percent i can okay so i'll set the width to eighty percent and there we go this background 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 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 after i watch what i do i always when i'm doing responsive i always start from the tallest or the widest break point 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 to 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 flex is that going to 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 [Music] 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 fix 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 we'll 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 all 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 it 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 there has to be a way wait a minute is my margin well i mean yeah how come this is like doing things that i oh okay because i need them to be flexi 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 you're all published 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 hmm yeah 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 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 turned off the share link my bad let me delete that all right all right while you're all doing that let's go look at questions where do i find questions again links for review oh sites for a review there we go all right we have two from arca our arcadias all right let's take a look all right arcadias let's see what you're doing ooh ooh loader ooh feels very sketch i just realized what i said so uh the slang term of sketch means sketchy as in like uh not trustworthy but i didn't mean that i meant the product the uh designer ux product called sketch because their logo is orange and they have a diamond and those are the vibes that i'm getting so i'm not saying that your company or this website is sketch i'm just saying that the look is yeah i explained it you get it right um anyways oh connor is here welcome connor welcome back so yes uh scrolling down it's nice it's very sass this is this has a very sketch feel it's very sassy in these terms anyways sas as in software as a service um i like your interactions i like your illustrations it's nice the the spacing of everything is cool um yeah i've uh one thing i would do with this is not center oh okay we have uh oh because yeah okay i wouldn't uh yeah i wouldn't center this would not center i would make this smaller yeah i'd do it that way because when you center it um it just looks weird and the word experts uh is by itself it becomes a is it a widow or an orphan it becomes an orphan right is it whatever typography so it's a typography thing that i learned from my wife uh yeah i would do it like this instead font size 30 text align left uh but again subjective this is your thing don't have to listen to me all right cool i like it that's the same font that wix used to make it look like they wrote a letter to me this one right here i feel like it's the same font i don't know if it is but yeah um nice like how you fade to black and then becomes black a black card nice nice nice not oh that one was nice yeah so you're using scale that's cool and we're following the line down loving it i mean besides that one thing like this is great yeah man i love the glow the inner inner drop shadow like yeah okay good job all right be right back my ears are like itchy or annoying me be right back and then a could says he fixed the issue we're having with the tesla nav bar but uh let me play some music i'll be right back [Music] um all right we're back you know something was annoying my ear but yeah okay so we were looking at our kids and he says uh yeah change the copy from three word to 30 words so it should be smaller plus one okay cool cool yeah oh yeah speaking of connor yeah connor's videos subscribe to him connor um where's your link i'm shouting you out right now youtube connor finlayson okay this yeah yeah yeah yeah all right um where are you at there subscribe to connor's channel he produces great no code videos he has a lot look at this pro tutorials and yeah you've been busy three days ago five one one two weeks two weeks if you're not subscribed to connor why this is see going back to the first thing i talked about in our morning announcements about use all available resources right there clicky subscribey do it all right i appreciate you conor great work with your channel thus far all right hey 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 floats is bad floats are bad oh geez logo image 100 percent of it's 100 of his parent but this is a width of a hundred fifty why is it a hundred percent what [Music] wanna 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 take off the float and then flex jesus okay what else did you do logo height 100 to make it flex center wait 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 all right 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 except failure but know that you'll get back to it later oh let's look at someone who knows what they're doing like like arkan arcadia's his other website smart lunch um lunch all right let's look at what he's doing so we don't have to look at what we're doing right now ooh that loader though all right all right uh i can't jump on discord right now but school me on twitter like make a tutorial video or something and school me on twitter i want to learn all right so here we go all right now you're just showing off arcadia's this is really nice oh you got a marquee bar at the bottom and man and then the navbar floats with the drop shadow like what like what like it's so nice tabs it's tabs wait it's hover tabs it's so nice wait is this parallel it's look at the leaves look at the leaves look at the leaves i was like this could be really good for parallax if there are there is well oh the circles are parallax too the yellow circles or orange orange yellow that's really good it's so simple well these are the times where i'm like i wish i could be this good oh really good great job great job wait i have nothing to say about this i have nothing to say except i should rethink my career no i'm just kidding this is really good all right oh oh and 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 cut 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 net 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 pretty at the top so that means navbar is fixed but absolute confined fix as well okay um and the 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 uh this logo is not floating this one's not floating but it has extra div inside and this one is okay um why is i 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 geez that was 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 um and yeah let's start winding down uh did i miss any questions let me check is there any questions i don't see any questions all right sites for review just double checking nope we got them both it was all arcadia's flexing yeah um cool so that was fun we made it through a whole page build and uh and we made it responsive so i mean it's been a while since we did that so that was fun let's see here where's my all right so yeah don't forget to submit your ideas for future live streams if you're like hey nelson how do you rebuild this page that i saw here it was pretty cool and i'll be honest i can't rebuild everything because there's like sites that use like i don't know like 3js or webgl and some other craziness and i'm like i'm a no coder and until that becomes a no code thing then yeah i'll rebuild it but anything that's like in the realm of stuff that webflow can do yeah i'll definitely do a build uh don't forget to join the pixel geek community over at pixelgeek.com and if you join within the next two weeks this opened box uh bose noise canceling headphone 700 uh could be yours so join at pixelgeek.com i will not sign it um yeah i'll probably put a put a shirt in that box too a pixel geek shirt so if you win tell me what size and yeah you can get a pixel geek shirt too on top of that so yeah um what else what else yeah that was a smooth stream really fun i got nothing else on my mind but thank you all so much let's go ahead and play some music where you at my music oh the whole time i was on b right back music wasn't playing i thought it was my bad [Music] whatever sounds like well whatever thank you all so so much um another shout out to connor finlayson subscribe to his youtube channel search him up connor finlayson either than that these streams happen every saturday from 10 a.m to 12 p.m pacific time if not every saturday just follow me on twitter at the pixel geek for uh upcoming stream dates we usually stream uh we usually put these up on the channel ahead of time so yeah let me wait is the music too loud holy crap [Music] sorry i'm not a good streamer if the music tool was too loud i'm sorry let's try this again what did you hear what did you not hear okay there we go uh yeah these streams happen every saturday from 10 a.m to 12 p.m pacific time uh yeah stay on top of my twitter feed at the pixel geek you'll know when i stream you'll know my thoughts about things but other than that i appreciate you all whether you're in the live stream you're watching a recording or you're a lurker that you know who just wants to watch again i hope these are valuable to you i hope you learned something and i hope you keep learning something new uh every day all right so thank you all so so much i'll see you next time and as always make the web beautiful together see ya [Music] you

Channel: pixelgeek

Views: 1,507

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

Id: tZC7cZqpLj8

Length: 116min 50sec (7010 seconds)

Published: Sun Apr 25 2021