HTML CSS Javascript Website Tutorial - Responsive Beginner JS Project with Smooth Scroll

yo what is good everyone so today i'm going to show you how i created this website using html css and javascript so this one is a little different from my previous design because i utilize a lot more javascript in this website so my previous one if you've seen it already it had like three lines of code or whatnot but this one has closer to a hundred lines of code of just javascript and i'll show you really quick what the design looks like right now and then also the effects i use with javascript too so pretty much you can hear see a standard hero section and i just added a bunch of gradient colors in this one just messing around with random colors and pretty much whenever i scroll check out the nav bar once i start to scroll and you'll notice that it actually has this little uh little bottom border action going on and it's essentially telling you that hey we're on this particular section so if i were to scroll down to the about you can see that it actually is highlighted and this essentially my about section i don't have like the word but just assume it's here and then these are like just standard just random like um design you can see it on most websites and then also note on anything with gradient you can p pretty much replace this with an actual image or svg icon whatever you want to but i just use gradients just for different uh design here and then also this would be like a server section and you can replace these with images icons whatever you want to and then you can see here too it actually follows and says hey we're on the services uh position so essentially it's scrolling and letting me know and then here is essentially the sign up uh section of my site and this is the button so it doesn't actually i have a um line of code where it doesn't display any sort of um design on there you can make it like um add a class to here and like make it bored or whatever but since it's a button i want to take it off and then here we've got a typical footer down here and then watch this cool when i click on the actual uh website logo watch the nav bar when i click it on here that it will actually scroll back and looks like pretty cool effect there and then instead of actually scrolling you can also click on it too so that's cool little effect i wanted to add here and you can see that everything updates like this and then last but not least when i actually shrink this over you can see that we have it little tablet hamburger menu action i'll click on this and then we have our menu like that and then let me just shrink this a little more so you can see the responsiveness here and so i'll show you like this and then we got our typical card stacking on top with some grid action and then we got the footer here and then also if i were to click on the actual menu and then like change it on to something else it scrolls up and also it closes out so that way you'll click it and doesn't like just leave it there and then same thing with the logo here and then last but not least if i want to right click this and let's do inspect and i can't make my screen like super small because of the uh like the size of my computer but let me just go to like moto g4 and then let me just show you this is what 360 by 640 so it's super tiny and you can see that everything still fits in it's nice and clean and then i'll go down here the footer too you can see that and then for all my let's see we got iphone 5s series out there shout out to you and you can see that it still fits within these like tiny with phones here and then also like if i click on the um navman you can see it's like that and then last let's slash this let's do ipad pro typical tablet and you can see there so that's pretty much what we're going to create for today so without further ado let me hop into vs code and let me show you how i made this alright so here i am on vs code and i already created a folder to make this so if you haven't go ahead open up your code editor and then go and create a folder for this project and over here i'm just going to simply click on this little new file icon and let's start off with the index.html and then let's go ahead and make a new file again let's do styles dot css and then let's click it one more time and let's just say app.js all right so now let's go to index.html and on my shortcut i'm just gonna press shift one exclamation and then when i press tab i'm just basically boom is emit but we have it like this and then title we can just say this like i don't know let's just say scroll website just because of the little scroll effect i have and then let's go ahead and let's do a link to the style sheet so under the title let me just go and say link and press tab here and then basically hrep's going to say the name of the css file which is styles.css and then let's go into our body section and let's go ahead and start creating the actual website design so first things first is i'm gonna create the nav bar so let's do i'm gonna do command slash just to make a comment you don't have to make these comments i'm just doing it since um i'm making this tutorial so you can actually see it better but i'm gonna say like navbar section and in the nav bar let's see what do we want to have here i'm gonna go ahead and create a nav and i'm going to call it with the class of navbar so in order from the shortcut you can do nav dot and then say the class name so nav bar and press tab and look at that auto creates for us and then let me press enter here and then let's create a navbar container so i'm going to say dot nav bar underscore underscore container and then when i press tab it automatically creates a div with the class of navbar container because i didn't actually specify anything before the actual dot so it just makes div by default so i'm going to press enter here and feel free to name your class whatever you like to i'm just doing it this way and then for the a tag so let's create an a tag so i'm gonna say a and that would say for an id this one's gonna have an id so for ids you do a hashtag and then i'm just gonna say navbar underscore underscore logo press tab here and then for the href since we're using html css this is the easiest way to do the little scroll effect i know there's a way with javascript in terms of like scroll positioning but i just wanted to make it easy on you but pretty much i'm gonna put the hashtag symbol or the hash whatever you wanna call it and then home is what i'm gonna call it here i'm gonna press command b on my keyboard for mac not too sure on windows but this closes out this like the file tab here so you can see it better and then inside of this a let's just say color i'm gonna go ahead and save this for one second and then what cool little tricks let me reopen this if you don't have this extension installed go to this left section extensions and then just type in live server and let me see i think this one here go ahead and download this one by ritwik day click on this one install it and then a cool little thing we can do now is if i were to right click this and click on open with live server guess what it's going to do it's going to automatically open this website right there and then also it has like live um like hot reloads let me actually see if i can can i shrink this more no let me put this over here so you can see it better and if i want to put like just random numbers save it now you can see that it automatically updates without me having to uh restart and everything so let's just erase these numbers and let me do command b and now underneath this a tag let's go ahead and create the actual the nav bars the icon you see with like the three line the hamburger menu so for this one i'm gonna have this in a div so i'm just gonna say dot and then a class will be nav bar underscore underscore toggle and there's also gonna have an id so instead of having to press tab yet you can do shift uh three so the hashtag and then do mobile on i'll just do mobile dash menu for this one and then press tab and you can see that creates a class and an id at the same time so super clean super easy and now in here this is ideally you want to put a icon but this is just a cool effect you saw the animation if i go back like the way it like spins i used it like that in order to do that you have to create a little span bar so i'm just going to say span dot bar press tab and now i have a spam to class bar and it's gonna leave it empty and a cool little shortcut if you do shift alt and the down arrow and i press it it automatically copies it down so that's on mac i'm not sure on windows but um pretty much that's what you do here or shift i think that shift uh option on mac yeah and then basically we're good and set these are our three little hamburger bars here and then underneath this div press enter and let me scroll up you can see more and now we're gonna do is create the actual nav menu so i'm going to say ul so under the list i'm going to say dot nav bar underscore underscore menu press tab and we got the ul so press enter now inside of this ul let's create the actual list item some say li dots and let's do nav bar underscore underscore item class name press tab and then press enter and then inside of the li we're gonna do a tag so i'm going to say a dot class name will be navbar underscore underscore links id let's do hashtag let's just say home dash page and then i'm press tab here so now it's gonna put me in the href so i'm gonna put hashtag home and then let me make this a little yes like that and then inside of this actual a tag let's just put the word home let me save this now you can see we got a little home action going on here and i click it nothing really happens okay so now what we need to do is actually copy this so instead of us writing this every time basically copy the li with the a tag so command c and go underneath this press command victory v so that's one and then two and then three times okay so this second one the class is the same the actual href is going to be about this time so change the second one to about class name still the same here id is going to be about page and then this one's going to say about and now for the li this one this hashtag is going to be services unless i'm naming it name it whatever you naming your websites and then this id is going to be services page and then inside the a tag we're just going to say let's see services and then the last one we have to actually change the class name so this one's the button so i'm going to say navbor our navbar underscore underscore btn href we're gonna change this one to hashtag sign dash up class is actually just gonna be button and then id is going to be sign up so let's do sign up and then right here is going to simply say sign space up save it here and then we've got our amazing little nav bar here so now let me do command b open it back up and let's start styling this so let's go to style.css and let's start adding some some fanciness to this alright so the first thing i'm going to do is do the shift 8 the little asterisk symbol with curly braces and i'm going to set these initial settings so box sizing border box let's do margin of zero padding of zero and if you watch the html css uh tutorial pricing this a million times and for the font family let's just write this here we're going to actually import a google font eventually but for now let's just say here so font family and i'm going to keep this one as k-u-m-b-h-s-a-n-s and then comma sans serif and then the actual scroll behavior how i got to look clean and scroll smoothly you have to add scroll dash behavior and let's just put smooth here all right so now we can good we're good here so i say this now you notice that everything's moved all the way to the corner because we took away the paddings and everything so now start actually styling this stuff so let's do nav bar curly brace here and let's do background colon let's do hashtag one three one three one three height let's do 80 pixels display i want it to be flex and then let me show you so i save this now you can see nothing happening yet but what i want to do is basically have under display effects justify content and i want to make sure everything's centered so now you can see on the right actually centered everything and then line items will be center and if you don't have display effects these won't actually help you work that won't work out for you and then font size let me just do 1.2 ram so essentially if you've never seen a rem before default is 16 pixels but you can actually update it and make it a different size but by default it'd be basically 1.2 times 16 that's the size as you can see there the increased position let's see position i want to be sticky the top just make sure it's at the very top so zero and then z index i want to make sure that this thing is above everything so z and x think of it like a dimensional three-dimensional type where it's like sticking out so we'll put just 9.99 some ridiculous numbers that we know that doesn't matter what i do on my site it's always going to be above the additional um items in my actual website and then let's do the navbar container now so dot nav bar underscore underscore container let's do display flex and then let's do justify content space between what this is gonna do is gonna add some spacing you can't really see right now because we're um on mobile but eventually once i finish everything up it's essentially gonna give like a nice little space action going on here let me just make sure the height is at 80 pixels and then let's do the index of one and then let's do a width of a hundred percent so you can see add some um differentiation to it and then let's do a max width so i want this to not span farther than 1300 pixels and then let's just do margin and let's see i have for margin right i have auto and margin left at bottom so top and bottom so if you just do margin it's essentially top right bottom left but if you were to do like margin that's right you do like this so instead i want to do so top and bottom are the same so it's going to be zero and then left and right are the same so i'm just going to say auto so essentially these are first ones top and bottom second one's left and right if you just do margin and then let's do padding and it's the same thing so padding top bottom is zero and then left right will be 50 pixels save it here and then after that let's go ahead and target the navbar logo so right now we got nothing yet but let's just add some stuff so hashtag nav bar i'm going to underscore logo because i put an id on it let me scroll up so you can see and let's do a c background dash color will be hashtag ff8177 and this is a gradient so let's just go ahead and do background dash image and let's do linear gradients of to top let me close this command b as you can see better and let's do ff0844 zero percent and then hashtag fff b199 100 now if you don't like typing this out there are websites where i got all of my ingredients they they just give you like a css a copy but let me just do this couple of ones first ones now and then i'll do everything after this let's do background size let's do a hundred percent now let's just do dash web kit dash background dash clip colon text and let's do moz dash background dash clip colon text here and then let's do dash webkit dash text dash fill dash color colon transparent and then last one for this probably dash moss dash text dash fill dash color colon transparent again let's save it let's check it out now we've got a little gradient logo going on and then under here let's do display flex and then align items center cursor i wanted to have a little pointer when i hover and let's do text decoration to be none and then font size would be to ram so originally other designs have like a little icon logo so this one can be nice and centered but since we don't have one for this then you have to worry about that but at least we'll have the settings there and then let's do that bar menu now so dot nav bar underscore underscore menu curly brace let's do display flex let's do a line items to be center let's do list style to be none and let's save here so now you can see a little navbar flex action going on and let's do let's see the nav bar underscore underscore item i want that height to be 80 pixels let's say that here and let's see let me just go up more we got nav bar links let me do dot nav bar owner underscore links and do the curly braces let's say let's color these white to hatch like fff and then let's do display flex align items to be center let's do justify content center and then let's see let's do a width of 125 pixels and text decoration get rid of the little underline do none and then i want the height to fill 100 percent so it's nice and centered so you can see we got a little cleaner look in that bar here i'm gonna make it desktop view in just a second let me finish this up and then we can see the little masterpiece we made and then let's see we got um dot nav bar see underscore underscore btn curly brace i'm gonna go ahead and say display colon flex got justify content to be centered align items to be centered and let's see let's do padding 0 1 rem so that's essentially 16 pixels so that's top bottom 0 left right one ram and then let's put the width at a hundred percent and right now you can't see anything because the button is like way over here but just know it's chilling it's doing this thing now she's not a butt all right so here is where it actually goes and gets pretty crazy but let's just do dot button curly brace i'm gonna say display flex and i'm gonna say justify content to be center and then let's just do a line items to be center text decoration to be none let's do padding to be 10 pixels top bottom left right 20 pixels height so let me scroll this back up i want it to be a hundred percent let's do with to be a hundred percent border is none outline is none border dash radius is for pixels and let's do background so this is where it gets fancy so let me write it out first for you and then let me show you a site that i actually got these because in case you don't have um you just don't go to the site basically gonna say background colon and this is essentially like a fallback so if the gradient doesn't pop up this will just replace it so be hashtag eight three three a b four and then we're gonna say background colon dash webkit dash linear dash gradient so i'm just press tab auto fills and then we're going to say to write comma then hashtag fcb045 comma f d1d1 d1 comma and let me see that messed something up fd1 d1 so just replace the elastic should be just six one two three four yeah so fd1 d1d and then last one be hashtag a b a33ab4 all right so now if i see i save this here it's quite crazy long but um then i press enter again and basically let me actually go let's do go back to this line do uh shift alt or shift option down arrow and then let's update these again so let's do um this one we'll just straight up say erase the webkit is gonna say linear gradient and then pretty much we just keep everything here and then let's do underneath this one let's just say color to be white so hatch f and let's make a transition so transition to be all 0.3 s e's save it here and now you can see we got a little button action all right so that is how you manually type out the gradient but let me show you this side here so this one's called ui gradients i think there's like a couple if you type in uh just like gradients online if you click show gradients it'll show you like all these different fancy gradients right and i think uh i don't know can i search i don't think i can search but let me see i can't i think this one was called literally called instagram but i can't i don't know where it's at but anyway so pretty much let's just say you want to pick a grade like okay this one be the sunset looking clean you click it and then you go to this little like uh get css thing right here you click it and then it basically tells you to copy just click copy and then if i were to go back and basically if i um oh it doesn't die right here i can just straight up copy and paste this into our code and save it and you can see it's literally it changes the button color but i'm going to use the original one i think that one was cleaner but i mean just it's gradient but you're the point so if you don't want to type it out just go to that website and just straight copy paste it boom you're done and i i think there's another side too so there's other sites that have different gradients but that one is just one of them and now let's continue finishing up our nav bar we're almost done let's do some hover action now so let's do under the button.nav bar underscore just go to links colon hover and let's just say color hashtag let's see what 9518fc and let's do transition position let's do all 0.3 s e's and then let's do dot button actually no we'll keep the button we don't need actually this so let's just save this first let's just see what happened so you can see here we got a little purplish action going on and then let's start editing our media query and actually notice too one little trick if you notice when i hover over it it like it's like instantly so let's actually go copy this line of code go back to the nav bar links and let's add it there save it and let's see if it works so you can see it's more cleaner because it like it's almost like a bounce up down effect where it it transitions in and out if i removed it it's like instantly see how it's like instant and then i put it back so this is a way if you want to add like the effect where it's like nice and smooth and clean that's how you essentially do it you have to have a another transition on the original code and then one on the hover so it has a nice clean smooth effect and now let's mess around with the media queries let's do at media screen and max let's do dash with colon 960 pixels curly brace and let's do the nav bar i'm just gonna underscore container and i'm i'm using 960 because of that break point that's where i had issues with the design so i wanted to essentially do this once it hits this breakpoint so every website is different you might have different um breakpoints but this one for this design does it some say display here want to be flex justify content let's do let's see space between and let's see let's do heights will be 80 pixels the index will be one aussie width to be a hundred percent and i want to set a max width of 1300 pixels with padding of zero all right so let me just shrink this back again you can see what's going on so then under the navbar container we're still in our media query let's target the nav bar menu so let's do dot nav bar underscore menu and curly brace here and let's just say display 2b grid grid template columns want that to become let's do auto let's do margin of zero let's see with a hundred percent position so this i'm using position absolutely because of the um for the actual effect here so let's do position absolute i want the top to be negative a thousand pixels because uh this is the drop down effect i mean there's different ways to do this but this way just works and i just make sure that it's not showing so in case you're like what the heck is happening pretty much like the drop down effect it's like weight of the top and then i click it on active it will bring it down to whatever i set it and you can't use top on the jeff position absolute or you're just going to be frustrated why it's not working and let's do opacity let's make it one and transition to be all 0.5 as ease with a z index let's do negative 1 here and now let's do our navbar menu active so this essentially is the active menu so whenever you click on the icon it actually showcases that so let's do dot nav bar underscore underscore menu dot active and when we trigger this i want the background of the map mobile menu to be hashtag one three one three one three top is gonna be a hundred percent let's do opacity to be one transition my transform to b let's see what i put all 0.5 s e's z index to be 99 and then let's set a height i want it to be 60 of the viewport height so this is the view will be 60 vh and then font size will be 1.6 ram save that here and right now nothing is happening because we haven't toggled the actual nav menu so essentially what's happening is it's basically negative 100 1 000 so if i were to close this out you can see like our nav and if we put a background here you can see it better you see our navs right here but since i have active set it's basically gone so that's pretty much that's just showing you what it is but let me just keep these here so um you can see the styling action we're doing and let's see let's do okay so under here let me bring this over so you can see what we're actually doing all right so let's do hashtag so the id in that bar underscore logo i want the padding left to be 25 pixels because it's like all the way on the edge now we fix that and now let's do dots snap bar underscore underscore toggle space dot bar curly braces and now we're creating the actual hamburger menu now so let's do with 2b 25 pixels height to be 3 pixels margin to be 5 pixels auto transition to be all 0.3s ease in outs and background will be white and then let's go under here let's do dots nav bar underscore item let's do a width of 100 and then underneath that item let's do dot nav bar i'm just going to score links text align to be center i clicked off then we gotta see uh padding to be two ram with to be a hundred percent and i want to display to be table so now we've got a little center action going on and let's see what else we got in that part button so let's do here let me scroll up so dot nav bar under underscore btn let's just say padding bottom to b2 ram okay we got a little spacing right there let's do dot button curly brace display conflicts let's do justify content center align item center width will be 80 percent height will be 80 pixels and margin will be zero all right buttons a little thicker now looking at it right now and then let's see we got move menu so id will be hashtag mobile dash menu curly braces absolute top 20 percent right 5 so if i say this right now you can't see it because i didn't add this last line transform translate 5 comma 20 i think it's actually hidden because of the um the background so you can see the the mobile menus i'm gonna uncomment this now so it goes away and i'll just close this out here and we still cannot see our um our menus let me actually oh yeah i forgot this last line here so let's do uh let's do dot nav bar i want to underscore toggle and then space dot bar and let's do display block and cursor pointer all right there we go there's a little hamburger menu and now let's do the little effects so that has a little animation so let's do hashtag let's see mobile dash menu dot is dash active space dot bar colon nth dash child parentheses of two so if you're like what in the world is this alien writing basically we're adding a class is active and essentially whenever we click it i want this to be toggled and then also on the bars and that's child of two so i go back to index.html this should be on like three lines it's hard to see but essentially this is the first child this is the second and this is the third and reason repeat depending how many you have so i'm targeting essentially this second one and i wanted to do a little cool spin so that like if you see here look at the second one it spins and it goes like diagonally up and then the top and the child one goes down and then the third end child is just like bye-bye and disappears so that's essentially what we're doing here so now i go back the second actually i think the second child disappears okay let me see let's see opacity zero so that one's just disappears there and then let me just copy paste these let's do command c and then you can just change the child to one and then erase opacity and then just put transform colon translates what is that y yeah capital y parentheses 8 pixels and then row t 45 deg which is degrees and then we can just copy this and paste it one more time change this to the third child and i want to just put a negative sign in front of the translates and negative sign from the rotate and then let's go ahead and save it and now when you click it guess what happens nothing because there's no javascript so you want to add that let's see let's see what we got yeah let's go ahead and add that let's do command b add that js go to that fox maybe here and let's target the first thing so let me just call this const menu you name this whatever you want you name this taco if you want to and so you go to document.queryselector and i'm using queryselector instead of like id or document.getclass etc because it's just i can never always switch it if i have a class in my in this html i can switch it easily just by putting a dot instead of a thing so queer selector and what are we targeting we're targeting the mobile menu so it's going to be hashtag mobile dash menu now where the heck is this let me command be back on the end of the html we put an id right here on our actual hamburger menu so i put id so i can target with javascript so right now we're targeting essentially this entire little icon thing we made right there and then we're calling it the name menu all right you'll name it taco bell let me name it taco bell too whatever you want to and then i want to target the actual navbars the uh ul's which are these guys right here so what that is is essentially i'm just call this cons let's just say menu capital l links equals document dot query selector parentheses and this one is actually a class so for classes you dot nav bar underscore underscore menu which is what we named the class we go back you can see here this is our ul so essentially this entire div it's called the class we have is nav bar on the screen for menu which has all of our home about service etc buttons and we're targeting it here and we're calling it menu links the name of this you want to call this fried chicken call it that but that makes more sense called menu links and then we can actually toggle this so what we do now we have to write a function so let me actually see let's see um i'm gonna do comments so you can just ignore this coming by the comments just say display mobile menu now how are we gonna do that well we have to actually write a function that adds a class that we have either active or is active which is the ones we have in our css so let me just go back way down here we have this one that we want to trigger for the menu and then also for the actual uh little animation effect the classes is active so how we're going to do that where i want to create a i'm going to essentially create an arrow function so in order to do that you simply just say const the name of your function so by function i'm going to call this mobile menu and then obviously it's an arrow function so we said that you go to parentheses with the arrow and then it curly braces here and then now so i want to write my actual code here so we have the menu which is targeting the actual menu section so what i'm going to do is say menu and then this is javascript where you say class list and then i want to toggle so essentially it's like true or false true or false think of it as like active not active active not active and for this one i want to toggle the class that we put which called is dash active and then underneath this we have menu links msa.classlist.toggle and i want to set that to the class active so essentially whenever i click the little icon i want to toggle these two classes here and then how do we even toggle this well you have to actually add an event listener so i'm going to say menu so now we're targeting the actual div of the uh hamburger menu section the icon i'm gonna say dot add event listener parentheses and it takes in some sort of action so this one's gonna be a click and then i'm say comma and then i'm just going to pass in the name of the function that we created up here now there's additional way that people do like function parentheses and they do like this and they write the logic there but i already wrote my function above so all i have to do is literally i just have to say mobile menu press save and everything works out right now watch is gonna happen if you guessed it i click it nothing happened you know why because i didn't import the script tag on the html at the bottom so right right before the closing body div just do script and then let's do src equals to quotes app.js let's save and let's see if this works now so boom just like magic we got our little action right now and here nothing is happening because we haven't had the additional effect so if i click it like it doesn't close the only way it closes if i put the x because that's the only thing we target in the javascript but as you can see for the terms of the first section i mean not too bad we're pretty much almost there just can't we got a bunch to go but you can see here this is how it looks and then when i scroll back we got a little nav menu here all right so now let's go under this nav section and let's start editing our next one which i just call this the hero section so the main the first one so let me just spread this a little bit as you can see it and i'm comma so i do command slash to write a comma and i'm just going to call this the hero section and then let's go ahead and let's start writing our html all right so this one is fairly easy for the html so let's just go ahead and let's do dot hero and then hashtag home hashtag home here press tab so we got the class of hero with the id of home and let's do hero container so let's do dot hero underscore underscore container press tab there scroll up a bit and then let's do the hero heading so i'll just call this h1 dots and let's say hero underscore underscore heading press tab there and let me say choose your and i'm gonna say a span tag here press tab and then i'm going to say color so that's how i did the effect with like the uh first part of like white in the second gradient and then underneath this h1 here let's go and do a p tag with a class of so dot hero underscore underscore description press tab here and i just pull what unlimits head possibilities and then underneath that's we're gonna have a button with the class of mate underscore underscore btn press tab there and then inside of the button i'm gonna have an a tag which is simply just going to say a press tab a stretch for the hashtag and then let's just put explore save it there and boom here sessions done now we just need to add some styling to it so this one shouldn't be too bad but let's go to styles and let me go under here let me do command slash so we can add a comma call this the hero section all right so let's do let's see dot hero curly brace background is let's see hashtag zero zero zero zero zero zero so basically black here and then let's do background that's the fallback again so this one's gonna be the linear gradient this time so linear gradient i'm gonna say two rights hashtag one six one six one six hashtag zero zero zero zero zero zero and then done with that and then the save padding should be 200 pixels by zero save it all right now we've got something going on here um now let's go under hero section let's do dot hero honors underscore container and let's do display flex flex direction column let's do justify content center align item center see i want the max width to be let's set that to 1200 pixels let's do margin zero auto and so that one essentially makes it center the margin zero auto and then let's do heights let's just do 90 percent should be semicolon and i want the line so text align center i want my text to be center and i want padding to have 30 pixels so it has like a little spacing on the sides and you can see we've got some progress everything centered now hard to see but it's there and now let's see we got the hero heading so let's just do this the um dot hero underscore underscore heading curly brace here let's just do font dash size to be 100 pixels margin dash bottom 2b 24 pixels and then color to beat check ff all right so we got some slides going on here and since it's on mobile i haven't had the media queries it's quite a big but it shouldn't be that big on that size and then for the hero span let me actually let's see so let's do hero underscore underscore heading space span curly brace and this is gonna be so essentially i got this from the same size showed you right so i just clicked on like um like literally you can just click on this it'd be the sunset and just copy this and i this should work i mean i think it's a different one but it's really the same concept save it here and then we go back and you can see that the background now is like this now if you're like well i don't get this you can literally go back to the top where we did it up here just copy the background three lines and then just like delete these last two and change the hex codes to whatever matches mine or you just don't even have to put a gradient this is just preference here but basically what we need to do now is add the background dash size to be a hundred percent and then let's see dash webkit dash background dash clip to be text dash moz dash background dash clip to be text as well and dash webkit dash text dash fill dash color let's see transparent and dash mod color trans parent as well save it now we got little gradient color action all right so i think this one actually looks better than that when i had but it doesn't matter it's just gradient and then let's go underneath this one and let's see what we got going now so let's do dot hero underscore underscore description and let's see font size to be uh 60 pixels background yes i think this is the same let me say let me show you how to save some time so just copy this i know these are just comments telling you like different browsers for it so i'm gonna copy that one and then i'm just gonna update the actual hex code so basically this is going to be let's see d a 2 2 f f this one first one is going to be 9 1 1 f or 4ff and then this one's going to be let's see what da22ff and then underneath these let's see erase that it's going to be 8 f 0 e f f and then this one's going to be d a 2 2 f f and this is like a purple thing i mean you guys clearly copy another gradient from the site and just pick a random one it doesn't really matter and let's just straight up copy this text here save this bunch of time save it boom all right cool cool or you could just put like color purple same thing but uh trying to be fancy here let's do dot highlights let's do curly brace border dash bottom four pixels solid rgb one three two comma zero comma two five five see there and this this is our most important thing this is the code that whenever we click and scroll on our nav actually it's gonna update with this little border bottom right here now let's add the mobile responsiveness so at media screen and max with make sure i have this b what 768 pixels let's do dot hero underscore underscore heading i want that to be font size of 60 pixels so you can see on the right actually shrunk and then we have the die hero honestly underscore description this one's going to be font size of 40 pixels all right and then we're pretty much done with this the other thing we need to do is actually edit the button and we're actually going to let me see if i can put this somewhere else let me see yeah i'm actually going to edit this in the next section because i use the same button for pretty much the other two so let's just go and let's start creating that now so let's go back to index and there's html and underneath this let's see we got the about section next so let's go under here so do command slash to make a comment just call this one the about section and pretty much here is the main content so i'm just going to call this main names where we want to but uh i could call this about too it doesn't matter but let's do dot main for the class with the hashtag of about for the id and then in here let's do dot main underscore underscore container and that was your dot main underscore underscore image dash dash container and then this i called this image container just because originally i had images in it but i just replaced it with um straight up a gradient instead just to like save up space and loading speed but here let's just do dots main underscore underscore image card and then inside of here we're actually going to have a icon fun awesome icon so let's just put let's just leave it blank for now let's just put like um icon in the middle so you can see it and then i'll save it right now and you can see you got nothing going on yet and then underneath this div here press enter and then let's do dot main underscore underscore content and then h1 let's just say what what do we do because i don't know and let's go under here let's do h2 we help businesses scale and p tag would be schedule a call to learn to learn more about our services and then under here i'm simply just going to write the button again so i can just copy this original one here get it and just paste it and change this to schedule call save it and i can see a little hero action going on so that's pretty much that and it's pretty much the exact same thing as the um where's that the features section so since are here already now i know what let me do it later i don't want to confuse you guys let's just go back to styles let's call it this about section aka the main section doesn't matter what you name it and now let's start editing so let's see what do we have first the first thing is domain so let's do dot main curly brace background dash color let's see what hashtag one three one three one three and then padding to be ten ram zero let's see what happened we got a little main section okay let's do dot main honest container curly place display grid let's do grid template columns to be one fr one fr so essentially think of this as like two boxes side by side and they're equal in essentially dimensions so spreading out essentially think of it like 50 50 almost and then align items i want to make that to be centered let's do justify content to be centered uh let's see margin i want to center this to here so margin 0 auto height is going to be 90 z index will be one let's see what else we got with to be a hundred percent max width is going to be 1300 pixels and what we got padding let's do zero top bottom left right 50 pixels save it let's see what we got now so now you can see it's like the one f414 grids and even let me see if i can expect this so you can see actually i can't see anything so let me wait until i'm finished and you can see it let's see let's do dot main i'm just going to score content color hashtag f with a hundred percent and got some content color text now and then let's see what we got here dot main underscore underscore content h1 this was just a gradient let's say font size to rem and let's see let's actually go back up to [Music] yeah let's go i think i have it let me see if i have this i know i wrote this somewhere or maybe i haven't got to that point yet all right guys right here so go all the way back up to the hashtag navbar underscoring the logo and if you don't want to scroll up just do command f on your keyboard and just do hashtag navbar and you'll find it right there and actually wait what oh there's two the heck yeah to go to the first one nav bonus control logo and then basically go and copy all this background mods transparent text and then scroll all the way at the bottom or you need a little hack you see on the right side go like this now i'm at the bottom and then just paste paste that in there and let's just update the colors let's just say background color 2b f e 3 b 6 f and let's see let's change this one to f f 0 8 7 b and then this one's going to be hashtag ed1a52 and then let me go underneath this one mods and let's say text transform uppercase and then let's just say margin dash bottom 32 pixels i've got a little gradient action going on there and now let's go and this is the fun part so let's do dot main underscore content h2 this time and this one's very very very similar to the uh ones above let me scroll back up and just copy this just go back to here description and just take oh that should be mars this tire background color with the mos text command c scroll down and straight up before you paste let's say font size for ram and then we can paste that code in let's save it now now you can see you got some color so i think i have a different color on here uh let's see what i put for this let's change this first background color to ff eight one seven seven two right let's do what nine one one yeah four ff still good there d2 actually yeah i think i knew the same one all right cool that's a purple good there just the background color is different and then let's see i have background size everything okay scroll down here and then let's go underneath this one and let's do dot main underscore underscore content p tag and this one's just gonna simply be margin dash top of one ram fonts obviously font size of two ram font weight of seven hundred and we got let's see what we got okay font's bigger it's good and then main btn so this is the actual one now okay let's let's do dot main underscore underscore btn curly brace font size will be 1.8 rim and now we actually got to scroll all the way back to let's see let me do command f and see if i can find this hashtag three three oh yeah so do command f hashtag a33 so if you copy the original gradient on the beginning button or just type in dot button so i just do dot b-u-t-t-o-n and then way up here we need this exact gradient so let's see this one right here copy this go to the bottom paste and let's see save it here i'm gonna make sure we got the right one yeah i think that's the right one 83 fc oh yeah we're fine doesn't matter gradient color and now let's set the padding to be 20 pixels by 60 pixels much bigger border to be none let's do border dash radius to be four pixels color hashtag fff and let's do margin dash top two ram so spacing on the top let's do cursor pointer got a little hand pointer action and let's see what else we got i want to say position relative transition all 0.35 s and then a line to be none so it looks like oh yeah i need to actually do the um and we're adding position relative because we're gonna have a little hover effect too so in case you're like what the heck is going on but now i'm gonna say dot main honest core underscore btn a tag because i got rid of that little underline i'm gonna say position relative let's say z index o to color hashtag f so tell me we can get rid of this color because it didn't actually work and then text decoration none boom outline is gone and it's down here too okay so now you can see the button got it everywhere now and this is the little hover effect we got so i'm gonna say this goes up the main underscore underscore btn colon after position absolute content you need to make sure it's an empty string if else you're gonna have weird effects happening almost at the top to zero the left to zero the width to zero and the height to a hundred percent and then i want the background to be hashtag ff1ead and then transition all 0.35 s and then border radius 4 pixels so right now if you're confused that makes sense because we actually this does kind of complicate but basically this is a little effect to do the hover thing so once i show you once i have the hover then you'll see what happens so let me fix let me add that right now let's do dot main underscore underscore btn colon hover and i want to make sure the text maintains the white so acting ffff and what happened actually left semicolon and then we say dot main underscore underscore btn colon hover colon after i want the width to be a hundred percent let's save it and now you can see a little slide over animation action going on here still got a menu back in okay cool and then also we got the schedule call here too so now let's start editing additional things so right now let me see if i scroll over and see you don't have the actual gradient card so let's go ahead and edit that too so now i'm going to say dot main underscore underscore img dash container let's say text align to be center and zoo dot main underscore underscore img dash card want the margin to be 10 pixels want the heights to be 500 pixels width to be 500 pixels border radius to be 4 pixels let's do display flex flex direction column let's do justify content center and then color hashtag ffff and then let's set the background dash image to just be a linear gradient of two right comma hashtag zero zero d b d e zero percent comma hashtag f c zero zero f f one hundred percent and let's add a semicolon and save and let's see we got a little car action awesome all right so now we need to add actual icons so let's see let's go and edit this stuff so let me scroll this back over and let's head over to font awesome alright so now i'm on font awesome so if you don't want to use icons then you can ignore this but in case you haven't already go ahead and create fun awesome accounts then click on the little icon here and then go to fun awesome cdn and it'll lead you to this page and then simply just copy this right here and then let's scroll this back and then go back to your index.html file so click here and then let me go right below our style.css just paste that cdn in save it and now we can do is actually go into our let's see where's it at let me go back to our site so you can see what happened go into where's that icon here where we have icon and then we can just add in a class it's gonna use fun awesome basically you can just search up icons and just copy and paste them but for this sake um where's that oh yeah here's the icon i have essentially erase icon and then just do or you can just test i and press tab and then basically in the actual class so that equal to fas space fa layer dash group and then just hit save and you can see a little tiny icon here so now let's go back to styles.css and then i'm going to set all right under here i have i'm gonna have another icon eventually but let's just put it here for now so f a dash layer dash group comma and then the next one is f a dash users curly brace here let's just say font size um 14 ram and see ginormous now perfect right so that's what i want to have here and then for the second we're actually going to have um let's see let me go back and make sure because if i go back here all right yeah so we got going on right now so let me see if i'm the actual so i can have another card so since we're here let's just write it out for now it's gonna have an idea of hashtag card dash two and then lily i'm just gonna copy this just see let's see go up to just copy this random gradient here and let me just paste it down and then let me just change some of the colors so this one's going to be ff512f and this one actually we can delete i think she goes out you can delete this third color here complete that third color and then the second one will be let's see dd 2 4 7 6 and then i'm gonna change this one to let me get rid of this comma i'm going to say 1 ff512 f and then the bottom one let's get rid of this last color here it really it should be d still let's get rid of the second one here let's just erase this and just say f f 5 one two f and then for this one let's just say um dd2476 and we haven't created this card yet but that's the next i think it's the second and last section so we'll have it there just for now and then let's start adding let's put um more responsive this is just a comment to type this but now let's actually write the responsiveness so here i'm going to say let's see at media actually yeah media screen and max dash width 1000 so 1100 pixels and we say dot main underscore yeah may i just underscore container curly brace i'm gonna say display colon let's do grid let's say grid let's see grid template columns i want that to be one fr align items to be centered just like content center let's see we've got width to be 100 margin colon zero auto and then high will be 90 percent so right now you see you got a little column one fr action going because it stacks on top let me say dot main underscore underscore image img dash container display flex justify content center and then i want the main underscore image dash card to be height of 425 pixels with the width to be for 25 pixels so it's like a little smaller so we got a little side action going and then let's see we got dot main unsponsor content let's say text align center scroll over here now it's like this save it here text on center let me say margin dash bottom to be for rem and then under here let's do dot main underscore content h1 i want the font size to be 2.5 ram then margin match top to be to rend and that's your dot main underscore content h2 font size gonna be three rim and then let's do not main honest underscore content of the p tag that's the margin dash top of one ram and then font size will be 1.5 rim and save that here so far is what it looks like and then for the smaller screens let's just do add media screen and and max dash width of 480 pixels and let's do dot main underscore underscore img dash dash card let's set the width to be 250 pixels and scroll up and then let's set the height to be uh 250 pixels and let's see okay and then i want to have the under helis do f dot fa-users and then comma dot f a dash layer dash group so these are icons i want them to be smaller so let's just say font size forum and then main underscore underscore content h1 font dash size 2b to rim and then margin dash top to be 3 ram and let's just go ahead and copy the h2 and p tag from above let's paste this here let's change the h2 to b to rem the p tag margin top v2 rim font size is the same so tyler you can just leave that fine like this and then let's see dot main onscreen underscore btn i just wanted that to be padding 12 pixels by 36 pixels and then margin 2.5 ram 0 and i think we're set in terms of mobile responsiveness and everything so now let's go back and let's go ahead and let's do the services section now so go in as html under here command slash and we close it and let's just say services section here and basically we're going to say div of services with the hashtag services so i did class nid and here i have an h1 that says our services and then let's do dot services underscore underscore wrapper press tab here and then we have dot services underscore underscore card and then i'm gonna have an h2 which says the custom colorways then under the h2 is going to say p so a i powered technology and then underneath them i have dot services underscore underscore btn and then here's gonna have a button that just simply says get started and now we can go ahead and copy the services card div with the h2 the p tag and the services button and then underneath that card but still in the services wrapper just paste it one two three times we have four now and then basically we can change these so let's just say um are you ready and let's see we gotta take the leap and then here let's do all full gradients and see we got 100 combinations and then last last one will be just infinite choices and it's gonna say thousands of colors i just made up random text here we're pretty much good now with the services html so now let's go ahead and style this so go over to the style css all the way under here and let me comment and just say service section now under here let's do dot services background to be hashtag where the three one three one three let's do display conflicts flex direction column unless you justify content centered line item center heights to be 100 with a padding of 10 rounds of zero so now you can see we got a little section here and then under here let's do dot services h1 and this is basically a linear gradient so let me just go and command f really quick let me just type in webkit yeah here we go so the navbar logo i'm going to copy this background color everything and then scroll all the way to the bottom back to where we're at and let me just paste this in here let me change this background color to ff81777 and then let's change this to top to two right and this one has some crazy colors on here so let me just say this for now see what this looks like yeah i mean at this point doesn't really matter i don't care too much about the color too much but um yeah let's just make it like that for now just save some time and then let's just do a margin dash bottom to be five rem and then the font size to be 2.5 gram now we can save it now we got a little services section right there so now under the h1 let me see let's do a dot services underscore underscore wrapper let's say display grid let's say grid template columns so i want four columns let's say one fr one fr 1fr 1fr yfr let me say grid template rows 1fr and then underneath here let's do dot services underscore underscore card let me say margin 10 pixels heights to be 425 pixels with to be 300 pixels border radius to be 4 pixels display flex flex direction i want this to be a column justify content center color hashtag fff background image shows your background dash image linear gradients to rights comma zero zero d b d e zero percent fc00f 100 and then let's do on transition 0.3 s e's dash so let's see if anything happened so right now you can see we got a little gradient action going on right now and nothing's happening yet but basically let me see if we go down we're gonna have our next one so dot services underscore underscore card hashtag f dash child of the second one now the second container and you can literally go to the site and just go and pick like a bunch of colors so the ui gradient sites see you at greens.com and just click on random colors i mean literally just click on them and just paste them in here so i'm gonna click on stripe get css copy this and then basically just go paste and you can see you got another color here and then let's go to let's copy this again and then let's just say and child of three and now let's see this one i have a specific color for this one so as another website i use called web gradients that also works too but again these literally just example purposes so it doesn't matter but i'm just copying in here and you can see if you want to pause it and copy that you can write that down so that's the third one again these are just really doesn't matter for this part wait that's pretty much what i have like that i just kept the fourth one just the same just save like time but pretty much you get the point and then let's do dot services i'm just going to score card h2 let's say text align to be center and then underneath here let's do dot services under our underscore card of the p tag what happened msa text aligned to the centered margin dash top to be 24 pixels font size to be 20 pixels and then under here let's do dot services underscore btn for button display flex just like content center margin dash top 16 pixels and let's do dot services underscore card then button so now we're talking the actual button inside of this c color hashtag fff let's do padding 14 pixels by 24 pixels let's do border to be none outline to be none border dash radius 4 pixels back round 2b hashtag one three one three one three font size to be one round and then let's do dot services monitor underscore card button colon hover i want to have the cursor pointer and then the last one before the media queries would just simply be dot services honest ground score so 200 score card colon hover and let's do transform scale 1.075 transition 0.3 s ease dash in and then cursor pointer all right so now let's set before the midi crease and let's check out what we got so this is what we got going on now i put aleppo take the left leper all right it doesn't matter from here i guess here's a simple design nothing fancy and then again you can replace these with images so if you want to know how to do that you just literally where's that you just put an image tag in here i just believe that's it that's that simple and now let's go ahead and add the midi queries so say at media screen and max with 1300 pixels and i want to set the dot services honest underscore wrappers wrap up with the r i want to say grid template columns and i only want two now so one fr one and four so before i hit save you can see how it's like four or it's not like showing three right now if i save it now you can see the two so essentially one column here one column here and then under here let's do add media screen and max width of seven eight pixels bless your do services honestly underscore wrap burr grid template columns for fr so now even shorter now we're only one column all right so cool there and that shows you like simple ways to use grid and then the bottom is gonna be the footer css so um just call this footer css before let me save this now let me go back to in his html and i basically want to add the features section for the footer so underneath our services cards let's just say features section and then i scroll here and basically highlight this code here command c and then scroll all the way back down paste this and now we're going to do here is we're going to reverse this so essentially first thing is change the about to sign up so this is like our sign up now we're little we'll move to this section when we click the signup button and then what you need to do is pretty much get this main content highlight all of it command x and then inside of this main container right here go underneath it and there's paste and then you save and i'm pretty installed too if you don't have that go to extensions type in prettier prettier so you want to like want my how am i saving things in like auto formats that's this right here there's a bunch of videos showing like how to make it customized but that would be that for another video or what happened okay yeah so now we scroll down underneath this card section we basically have a similar actually yeah before we do that change this icon name to fa dash users and change schedule call to right here the a10 for the button to sign up put the um h1 let's change that to join our team h2 can be signed up today and then here just be um see what makes us different i think i put up again the original sign but okay so now i make this desktop view you can see like it automatically fill the styles but pretty much i think i forgot one thing too is add go back because i want it to be the same color the card main image card after the class add id equals to quotes dash card to save it and there okay perfect all right so now we got different colors so pretty much now we got majority of the side minus the uh footer so you can see it's like this and then also the font we haven't imported the font either but you get the point and now let's finish up with the footer and then we can go to the fun stuff which is javascript and add all our fancy effects all right so the footer section shouldn't be too hard basically we're gonna do footer section now i'm going to say dot footer underscore underscore container under here i'm going to say footer underscore underscore links and then let me scroll up let's say dot footer honestly underscore link dash dash wrapper and then here i'm gonna say dot footer underscore underscore link dash dash items and then here i'm just having h2 that says about us underneath them i have an h tag that simply just says slash sign i'm gonna put a slime dash up and then push put how it works then here i can just hold shift down and just basically copy and paste this and then you can change this one to like um testimonials and then here you can change this one to careers and then here you can change this one to terms of service now all i need to do now is literally copy and paste this so highlight the footer items div and then all the a tag aside and then just paste it below so we're still in the footer wrapper and then one and then two and pretty much it in terms of the actual thing only thing you do now is let me see i have another thing underneath this but let me add it after but right now you can see uses our footer and they're all the same thing so you can go in here individually change the headings and then the actual insides but since i already have mine coded out i don't want to waste time like individually typing all that stuff out for you so let me just go ahead and see let me paste this now one thing i forgot to do this is the big mistake every time is make sure after the here's the first photo link wrap then you have your second photo link wrap put a closing div tag for the actual um just put a closing div tag because you want the foot and link wrapper to wrap around only two so now underneath that second one i'm going to do another one so dot footer honest underscore link dash dash wrapper and then command x and then paste this one right below here so now you can see we have two wrappers here's one and then here is two so now i'm going to go ahead and actually paste mine from my original code so that we can actually save some time and basically it's just gonna have like the customized um footer text you paste that here save it and you can see i just have all this here and then underneath the uh see social media we got this div then the wrapper div and then we have this third div which is the footer links so underneath there press enter so we still have let's see folder container still inside the fur container and basically let me see what's this last dip go to actually i shouldn't even be there i'm not even sure that last div i think i have an extra div not sure where that div came from all right yeah so now this one is pretty much the social media links so let's just go ahead and just write this out so let me say let's see what i do section dot social underscore underscore media press tab let me say dots let me scroll up social underscore underscore media dash dash wrap and then let's see dot footer underscore underscore logo and then here i'm gonna have an a tag with the hashtag id so footer honestly underscore underscore logo intro should be a slash and then here let's just put um the name of our website which is called just color and then underneath this div press enter i have a p tag dots websites press tab and i think it's let's see i think it's option g the option g on mac something that's all g on windows and then just makes the copyright sign let's say color 2020 dot and then say all right reserved and then underneath this p tag i'm going to press enter and then have the social icons i'm going to say dots social underscore underscore icons press tab then a i'm going to have dots social on social underscore underscore icon dash dash link and then press tab here and then the slash is simply going to be a slash here and then we'll simply just put the facebook icon so it's going to say i press tab and then inside the opening tag and say class equals to fab space fa facebook let's save this here and then i can simply just copy the a tags over and over so simply here take this a tag press enter press enter press enter press enter so we have facebook next one let's just change this one to instagram and then let's change this one to youtube let's do facebook is um linked in and i think can i put another one yeah twitter twitter the other one twitter and then also since these are icons linking something off if you go and type the a tag we have to put target equals to underscore blank in order to make it open in a new tab so just note that if you want to do that that's how you'd have to do it you just add that to every single tag and then pretty much should be set so let me check below so now you can see way down here we got a little icon and i think yeah we got all five perfect all right so now let's see i got the div div section and then div and the script okay perfect so now let's go to style.css and then let's edit the footer css all right so the first one let's do footer honestly underscore container let me scroll up and let's just do background dash color to be hashtag one three one three one three let's do padding 5 ram 0 displays flex flex direction column and then let's do uh justify content center and then align items center and then let's go under here let's do hashtag footer underscore underscore logo and let's say color hashtag fff display flex align item center cursor pointer text decoration none font size to rem so far nothing's changed too much and then under the photo logo let's do dot footer underscore links let's say width a hundred percent max width i want it to be a thousand pixels display flex and then justify content center and then underneath here let's do dot footer underscore underscore link dash dash wrapper and let's just put um display 2b flex and then in here let's do footer honest underscore link dash dash items let's say display flex flex direction column let's do a line items that starts or flexstar event select start and then let's do margin of 16 pixels text line i want that to be left let's do with to be 160 pixels and then box sizing to be border dash box so let's see what's going on right now so now it has a little little frame to it and then now we can go ahead and let's target the h2s so i'm just going to copy this class here say h2 and then simply just say margin dash bottom of 16 pixels and then let's check it out here and then let me just say color to be hashtag fff and then we can do let's see dot footer underscore underscore link dash dash items a let's say color to be hashtag fff text decoration to be none and then margin dash bottom to be 0.5 rem and then through dot footer underscore underscore link dash dash items of a colon hover and simple you can change the color to e99 with a transition of 0.3 e's dash out then also i'm going to put it on the main so that we have little like bounce effects and i can see a little helper action it's kind of hard to see but it's there and now let's start targeting the uh social icons now so this one is let's see dot social underscore underscore icon dash dash link let me just say color to be hashtag fff font size to be 24 pixels and then dot social underscore underscore media let's say max width to be 1000 pixels width to be a hundred percent and then underneath here let's do uh social underscore underscore media wrap let's put display display flex justify content space between let's do a line items to be center and let's do a width of 90 percent and then let's do max with to be 1000 pixels and then margin will simply be uh 40 pixels by auto zero auto and then underneath the ramdoo.social underscore underscore icons display flex justify contents space between [Music] my item center and then width to be 240 pixels and then let's do dot social honest underscore logo and actually let me see if i even have um actually no we don't even have yeah i think i removed it earlier so let me just check this everything down all here so far everything's good should we just need to do website right now so let's do um that website underscore underscore rights say color hashtag fff and in terms of the footer everything is clean the only thing is it's not more responsive but you can see we got this here so now let's make it more responsive so at media screen and max width of 820 pixels this is the breakpoint where i had mine doing it so i just did it there i'm gonna say let's see um dot footer underscore underscore links padding dash top to be to ram and then let's see hashtag footer underscore logo is not actually we don't think don't even have a footer level check yeah we did okay logo this will be margin under on this underscore actually you're gonna underscore what i'm doing margin dash bottom two rim and then underneath there we'll see that website underscore rights margin bottom up to ram let me have dot footer ownership underscore link dash dash wrapper that's gonna be flex direction of column and then zoom social honors underscore media dash dash wrap flex direction column and then the last one on the mobile for 480 pixel add media screen and max dash width 480 pixels last two dot footer underscore underscore link dash dash items margin of zero padding of 10 pixels and then a width of 100 and now you can see we have our footer perfect so now what is next here is the fun stuff so right now everything clicks and everything goes the only problem is we don't have our fancy look at the original site we don't got a little animation we don't have the js right here so this is the part that makes it way cooler and way more fun to build so now let's go and edit that and also when you click on the menu um but they don't exit so you got to write those functions here too so let me command b let me go to at the gs and let's get started all right so this one's going to be quite quite interesting all right so if you never did javascript that much then this video will be really helpful but if you already know javascript then this should be a good refresher so let's see one thing i want to do is i want to bring in some things here so i'm going to bring in the cons it's going to be our navbar logo so i'm going to say nav logo i'm going to the equal to document.query door and i'm going to target the idea of navbar underscore logo and now let me go under here and now let's do the highlight menu first all right so this one's not too bad but okay basically i'm gonna create a function so let me just say let's see let's see i'm gonna do um show active menu when scrolling all right so here let's create a function so i'm going to do an arrow function and i'm just going to call this one um highlight menu so let's say const name of the function will be highly light menu so that you go to an arrow function with the curly braces and pretty much here i have to actually target all of the menu so like home about services so you go to the top i got these ids home page about page services page and sign up so right now i don't think i have to target sign up yes so only these top three so what i'm going to do is i'm going to say cons and also i need to target the actual class highlight so that's the little active border we have created in the css earlier so i'm just going to call this like lm short for like all right it doesn't matter you know what everyone do element whatever and then say document dot query selector and now i'm going to target the highlight class and then next let me just copy and paste these i'm going to say shift alt down arrow so i'm going to say home about services so basically there's three so this first one here let's change this one to i'm gonna name this home menu name whatever you want to and then in the query selector i'm going to have the id of home dash page for this one this one's going to be about menu and then the query selector is going to be targeting the hashtag about dash page and then we have the services menu and that's going to target the [Music] services dash page so again these are these ids on the nav that we created earlier right here just in case you're not getting it and then what i need to do is i have to essentially have a scroll position that shows me what we're actually positioned at so this one i'm going to call this let and then i'm going to say scroll pos for scroll position for short i'm going to set it equal to window.scroll of y so right now if i were to console.log this you would basically be able to see the positioning but i already did this earlier so let me actually let me see if i can um i don't think it's going to run yet because it's going to have some errors so let's actually do let's write the logic first and then we can do console.log after i'll show you how i did but let's do here and this pretty much adds the highlight class to my menu items so right now this is the logic we're going to write this the way i wrote it and it's just easy to read but feel free to factor it make it cleaner let me know how you did it in the comments below but basically we're going to have if statements if else whatever you want to call them say if and they want to say window dot inner width and the reason i'm doing this is because i wanted to only display the uh the highlight when it's on a desktop view on mobile i don't want the mobile nav to show highlights so i want to make sure if the width of the window is greater than 960 pixels so meaning my first breakpoint was at like around 960 so pretty much the minute you see the hamburger menu i don't want this class to work anymore so i have to make sure it's greater than 960. so once it hits right there right when you can see the actual menu navs i want this this um highlight class little hover effect to work only at that point anything after here with the mobile stuff i don't want it to work so that's this first line here and we're going to do the double and so i need this and i want the scroll pause which is again this is the one of the scroll i want our positioning to be less than 600 now you're wondering how to get this number i'll show you guys at the end but basically when you constantly log the um scroll or window.scroll y you can see like what pixels are all right particularly when you're scrolling on your website so again it's gonna be different on your design but for mine i have that 600 pixels which is pretty much let me show the main one as long as i'm once i get to here so once i get past 600 pixels it switches to about so right there you see that so like you could do it like here or i did a little earlier because on like at the very bottom it's like right here where it's touching like right there that's like 700 something pixels but i wanted to do like down here right there because like i'm not on home anymore i'm pretty much like on the next section so that's just what i'm doing right here so that's that line right there and then if that is true then i want to target home menu then i want to add a class so you say class list dot add and i want to add the class highlight but the thing is when you do this you end up when you scroll past the about section it ends up adding it to and then you scroll past the um the next section it ends up having it too as well so for this one i want to make sure i have the about menu now i'm targeting and i'm going to say classlist dot remove i'll remove the class from the about so when i scroll back up let me show you when i scroll from home down to sign up back up right now right when i get to home see how it disappears so it removes the class from about and then it adds it to the home so you see that like that that's what this client code is doing right here and then i'm going to return because if you don't return we have essentially an error where you have the click because i'm also going to have it where you click it too and then if you don't have the return it's going to look really weird and messed up your code so make sure you return it and then else if let me just copy this um this logic here this parentheses the window width is still gonna be the same but i want to change the scroll positioning to um 1400 and curly brace here and then now i want to target the about menu then i want to add the classlist.ad highlight now because now we're in the about menu section and then what i want to do is i want to do the home menu dot class list that remove and i want to remove the highlight class from the home and then also the services menu too i want to do classlist.remove the highlight class here too so i want to make sure that only the um the about menu has the class highlight everything else is removed it doesn't matter where i scroll and then i just simply return here and then uh copy let me just copy and paste this basically because it's pretty similar and then else if window less than 60 and then the scroll for the services is gonna be two three four five about media class list we're going to change add to remove home menu and keep actually we're going to delete home menu because it's when you scroll back up it essentially removes it in there right when you pass about it removes it so it's essentially clean and then services menu let's do add actually yeah let's do add and then let me make sure let me bring this one as the first one just to make sure so just change it up there and then returns and right now this works but the problem is the element i don't want it to actually keep it on here so let me show you i'm going to say if and then our little element the highlight class at the highlight class so l and window dot dot inner with is less than 960 and the scroll positioning is less than 600 or elements true then i basically want to do elm dot class list dot remove of highlight so essentially this when you do the click to you'll notice it that it essentially when i click on the uh the icon here actually show you like you click here it switches it here too then also when i go to the the mobile nav you can see that we don't have our little icon which is perfect and then at the bottom in order to actually get this to uh work so actually kind of zoom out it's gonna let me zoom out for a bit see if you can still see this but basically now what i want to do is how we can actually trigger this so in order to trigger this we need to actually call this function highlight menu because right now nothing's doing it so in order to do that we got to say window dot add event listener so let me zoom back in event oh what happened event listener and what we're going to do is we're going to listen for two things first one for this one's going to just be a scroll and then i want to call the highlight menu that we just created and then i'm gonna hold shift down air copy paste this and next i'm gonna have a click so i want both to happen so essentially scroll and click so let me go to our main again and let's see if this actually worked so now you can see scrolling and it's working everything's still fine here like this now let me make sure if i click on home okay so now for so far everything looks good but the problem is now is whenever we click on the actual uh mobile menu it see how it's still here i mean you get rid of that and then before i continue let me let me show you how i got these scroll wise in case you're wondering so go back up to the highlight under the scroll position i just console.log scroll position so pos and then do command shift c on your keyboard open the console let me just show you go to responsive and let me check this all right so so right now you can see actually 50 now you can see right here the minute i scroll look at the console it's updating so like right about look at my nav bar right here is about six seven hundred so i set it to be about here and then it switches to about so you can see here it's around six hundred ish and then it switches to about up here and then we keep going it gets to our services section which is about like 16 100 ish give or take and if you go back to the code you can see i set it to be like 1400 because i want it to be a little earlier because like right here we're like 13 and right at the bottom we finished off so i was like might as well put it there and then for the next one it's around like the 2400 mark and again if your site has a different design then you obviously have to create different um scroll positionings but you can see the points that's essentially how i came up with those numbers and how i got that and then you can see it's like 230 2345 or 2345 and then let me just calm this out and now let's go ahead and let's do the um click one two because if you notice um let me show you if i click it it works as well but the problem is let me see the problem is the mobile nav so let's go ahead let's write the code to actually make it to where when i click this it actually disappears so let's go ahead and let me just write this down here let me just say close mobile menu when clicking on a menu item so here i'm gonna say const hide mobile menu i'm calling the name of this function so they equal to parentheses so you go your arrow function and now it's pretty similar say const menu bars is equal to document dot query selector and we're going to target the dot is dash active class so essentially if i click on the icon then essentially i want this to close out the um the nas let me show you where is this that is active so right now you can see this divs here and then i dot is dash active you can see it's a little icon here so i want to make sure i have menu bars targeted and then pretty much what i'm going to say here watch so i'm saying if the window dot inner width is less than or equal to 768 pixels so you have to put pixels because it's just javascript let's just say the number and the actual menu bars is true which basically means whenever i click on this it's open now so now it's an x and now the the nav menu is down so that means this is true now because it's active it's basically activated the class is active which is right here so that's true i want to target this fine the menu and then say dot classless dot toggle is dash active and i'm also going to target the menu links which again if we go to the top this is our nav bar menu which is the ul which is essentially this snap bar menu in the ul which contains our home about services and sign up page this entire div wrapping it and i'm going to do dot class list that remove and the trigger for this one is active so the active is a class remember in the css that opens the nav from 1000 pixels so right now this is active not active active not active and then underneath here we basically have to uh trigger this so i'm going to say menu menu links yeah menu links dot add event listener and then you have the click events and then i'm just going to call the function so hide mobile mobile menu and i'm gonna do shift all down arrow again because right now if i save this click it see how it works right now the one thing we're forgetting is the icon i click the icon nothing happens so i have to change this to um nav logo which is what i call the navbar logo up here which is again over this id here which is basically the word color i'll save that there now click it test everything's okay icons okay then also if i click here about services home sign up color how about highlights shrink it again make sure there's nothing there and then looks like we're all set so this is the completed design that we created for today so if you did enjoy this video then definitely go down below and hit that subscribe button give this video a thumbs up share this with your friends comment down below and if you guys aren't the channel i'm pretty much docking myself learning code and just building projects sharing with you what i'm creating so if you did find some value in this let me know also feel free to refactor the code let me know alternative ways to make this better or any cool effects you guys want to add to it and again i have the source code in the bio 2 so in case you had some errors or anything all that stuff down below and some of that i will see you in the next video peace

Channel: Brian Design

Views: 256,122

Rating: 4.9561205 out of 5

Keywords: html css javascript website tutorial, html css website design tutorial, html css javascript tutorial, how to make a website using html and css, html css website design tutorial for beginners, html css javascript, javascript, html css javascript project, html css website project, html css website from scratch, javascript smooth scroll, smooth scroll html css, javascript projects for beginners, javascript project tutorial, responsive html css website, javascript project website

Id: 3-2Pj5hxwrw

Length: 125min 1sec (7501 seconds)

Published: Thu Sep 24 2020