Building Google.com in 5 minutes using Webflow (Webflow Micro-Course)

Key Takeaways

for today's video i'm going to teach you how to build google's website in just five minutes with webflow let's [Music] rock hey designer friends what is up my name is ron sego welcome back to flux for this video ismail challenged me he said hey you should do a five minute webflow tutorial these things these five minute things work really well on youtube and i was like dude what can you actually teach how deep can you go in five minutes that being said challenge accepted so i'm gonna try and do my best to teach you something and make this video as valuable as possible so before we dive into building google's home page in webflow and i'm gonna put a timer i'm actually gonna take my phone and put a timer five minutes to see that i can actually do this in five minutes first i wanna explain the concept that we're gonna use here because that is really important i'm gonna cover most of these things most of how i'm going to lay out this page i'm going to use a super powerful web development concept that is called a flexbox and let me just explain what this concept means so flexbox basically means the relationship between you might know that on the web everything is basically boxes within boxes if you're not familiar with that concept we have a few videos explaining it so check them out but assuming that you understand the web is boxes within boxes flexbox basically explain or set the relationship between the parent the outer box and the children which are the box that are within basically they determine hey you know all of you children should align to the top or all of you children should align to the bottom or you should be aligned to the center or you should be stacked one on top of the other not horizontally but vertically or you should align to the center you basically understand right maybe you want to take up the whole space and so when i'm going to look at so i'm looking at the google home page before i'm even going to go down and start developing it i i want to understand basically what are the key components here and you can see that basically we have three things here we have this top navigation bar then we have a middle kind of component with the main things and then we have footer that are is aligned to the bottom of the page so using the concept of flexbox i can define that the children we're gonna have a you know an outer box which we usually call a wrapper which is a box that has boxes inside and we're going to define it as a flexbox that says we want to have all the boxes within um equally spaced and so one at the top one at the middle and one at the bottom because that's basically the layout that we want to have and then the only thing that we need is to put other boxes within these boxes this box at the top we want it to align to the right right this navigation is aligned to the right this one aligns to the center and here basically we have one you know part is aligned to the left and then to the right and there's actually this one as well but for simplification basically it's kind of like justified one to the left and one to the light this is basically the structure that i'm going to go ahead and try to build because basically that's the structure that we have here so ready to go now is the time when i'm starting off my timer and i'm gonna set it for five minutes and boom let's rock and roll so here i am in webflow i don't have anything here i'm going to basically drag in a div block that's going to be the main wrapper so i'm just going to call it wrapper and basically all i want this to be is height of a 100 vertical height meaning it's going to be from top to bottom that's basically all i want to do with it right now and i'm going to turn it into a flexbox this is the second set of display options in the layout here and then i'm going to throw basically three div blocks inside one i'm going to copy and paste two three first one i'm going to call it top and then the second i'm going to call it middle uh these namings are just for you to understand what i'm doing quickly otherwise this one will call bottom otherwise if i would develop i would probably give them like top knob and content and footer or whatever now i'm going to go back to my wrapper and define how i want them to stack so i don't want them to be horizontal i want them to be vertical one on top of the other and i want the justification to be this one space between so now you see i have one at the top one in the center and one at the bottom so we already have most of the layout kind of like we wanted so now we want our content here on the left right so we're gonna create another box which will wrap all of the elements and the box here i just want to have this top navigation i'm actually going to do this turn this into a flex box as well and i'm going to set the justification on the right so that we have here this one let's call this top nav wrapper um let me see how long do i have all right so that's going to be here on the left um and let's put some three things so there's two uh two images here and then two links let's very quickly um take links so there's tech clicks here one and then two and then also going to have image links right so it's actually just going to take an image and for the images we have here this is going to be one image actually i'm just gonna drag it here okay so one and this one actually is going to be this one so now we have all of these things here and this one i want them to be stacked one next to each other i'm going to turn this into a flexbox as well you can see everything is flexbox this one let's call it dots and set it to i don't know like 50 50 maybe even less like 30 30. i don't know the sizing right now this one let's turn it this is profile profile pro file i'm going to turn that into 30 30 in terms of sizing and i'm going to give it radius because so it's kind of like round shape and then we have the links let's call this what does this say gmail and images so this is going to be gmail and then images and in general i'm going to turn the links not to blue because i want them to be kind of like blacks and i'm going to space them out a little bit so i'm adding spaces in between actually these ones should have spaces in between as well so now the only thing we need to give this top nav wrapper a little bit of padding and we have pretty much the top bar we do need to take off the underline actually but if i'm going to go down into all of these details i'm taking down the text decoration from here if i'm going to try and do this perfect i'm not gonna hit five minutes so let's move on into the next section which is the middle one in the middle one i'm gonna add another div block because i want this to be centered right so i'm gonna turn this middle box into a flex box and i'm just gonna center everything both vertically and horizontally so now we have the content here and now i want to bring in the google logo so let's bring in the google logo damn time really stresses me out i'm not gonna be able to do this in five minutes ah so i'm just gonna throw in a form and i want to move as fast as possible i need to bring a whole form here i guess and then just remove the things that i don't really need and the submit actually will have to change it i'm not going to make it in five minutes and also i need a few more boxes so let's do the footer i just want to move as fast as possible so this footer first of all let's give it a background color of light light gray and i'm gonna turn put two boxes within it ah five minutes are over okay i have completely failed at building the google homepage in five minutes but i think we are maybe 55 percent there but we do have i think the main structure in place and hopefully with this video you've understand some of the basic concepts which are boxes within boxes and then the flexbox which is how you rearrange the children inside of the bigger boxes the wrappers which is super super important with this tool you can achieve any layout that you want now obviously we're limited with what we can do with five minutes but if you're interested in diving more into webflow and all the amazing capabilities and learning how you can do this actually if you're watching this video today wednesday we're exactly opening the doors today to the webflow masterclass which is really in-depth not a five-minute course um it's 12 hours of video and community and challenges and tons and tons of other things so you might want to check that out if you're watching this later and we've already sold out the seats we'll open up again probably next month so make sure you join the waitlist i'll see you in another video peace out