HTML CSS and Javascript Website Design Tutorial - Beginner Project Fully Responsive

yo what is up everyone so today i'm gonna show you how i created this website using html css and javascript so pretty simple project here but pretty much let me just go through the design and we've got some cover action over here and then also we've got a little hover animation on this button right there and then let me scroll down here and then also we got a little little service card looking thing right there with some images and then when i hover over it you can see that they increase in size and that the last part we have is a footer and then also if i were to shrink all of this let me just go up to the top and i'll shrink this and you can see it goes into responsive tablet and then also the mobile and then i can just scroll down you can see we have all of our stuff here as well and then the footer here and then last but not least the part that uses actual javascript is just a couple of lines but we got a little animation drop down for the menu so you can see there clicking like this and then also you can go and navigate to additional pages and then you can fill in anything you'd like on these pages here and that's pretty much we're going to make today so if you want to learn how i did this then be sure to watch this video all the way to the very end without further ado let's hop into my code editor and let me show you how i made this all right so here i am in my code editor i'm going to be using vs code for this tutorial and i already created a folder so if you have not created one go ahead and create a folder for your project and i'm just going to click here and then now i have my icon showing so i'm going to click on this first icon here and i'm going to create a new file called this index.html and the next file i'm going to go and create is called styles.css and i'm also going to create an app.js file so app.js and then since we're here already let's just create a folder so the second icon and just type in images and then last one i'll create is the tech and actually let's go outside make sure you're in the actual root and then just do tech dot html and this is just to show an example page that we can navigate to and now go and ask the html and then i'm gonna press shift one make an exclamation mark and then once i press tab it'll autofill for me and then boom you don't have to sit there and type everything out like manually and then for the tile let's just say um let's just put like next website here and then also under the title but still inside of this head tag i'm going to type link press tab and it automatically types it out for me and then inside the href i'm going to just add in the styles.css styles.css and we can save that by pressing command s on my keyboard and then in the actual body tag i want to just type in h1 and press let's say hello save this and then also i want to show you some extensions that you need to install so one is live server so just go ahead and type in live server and let's see which one we got this is the one i have right here live server and this one by rit wig day and then also if you don't have prettier we just type in right there this is also another extension i have so whenever i auto save it automatically makes my code fit and look made cleaner so in case you're wondering how is that happening and yours isn't this is one of the extensions i have here and there's a lot of other customizations you can do as well but those are just the two ones that you'd probably want to have in case you want to follow along with what i'm doing so now before we actually go ahead and load this up let's go to styles.css and let's just type h1 curly brace let's just say color red just to make sure that everything is working properly and let's go back to the index.html file right click and then once you have live server installed i can just click here open with live server and then this will automatically open up perfect now we have it right here showing that our website's live so now i can go ahead and edit this and be like yo and then perfect now everything looks like it's working and notice that once i save it automatically updates so that's pretty cool to have there and now let's go ahead and actually start adding in our html so the first thing i'm gonna do is actually i'm going to press command b to close out my slide tab so you can see this better i'm going to erase this h1 and we're going to create the nav so i'm just going to create this and let's just do nav and then i'm going to press dot and then nav bar and once i press tab this automatically creates a nav with a class of nav bar and that's because i have emit and just perfect like that and then now under here let's create a nav bar container so i'm going to create a div so for divs you don't have to actually type the word div you can just do a dot and then the class you want to name it so i'm going to say nav bar underscore underscore container and once i press tab you can see we have a div with the class name nav bar on the scroll underscore container and then underneath here i want to create the logo so ideally you use a image but for this example i just hard coded this by typing out the actual words but here i'm just going to type in a for the a tag and then i have an id so for ids you use hashtag i'm gonna say hashtag and i'm gonna say navbar underscore underscore logo and then once i press tab you'll notice that we have the id navbar logo and then it has the href so over here i'm just going to put a slash for that value because we're not linking anywhere yet and then in here i'm just going to go ahead and just type in next with the capital letters and then just press save and now you can see it updates over here now underneath this a tag i'm going to go under it so press enter and then i'm going to do a div and i'm going to say dot nav bar underscore underscore toggle and then i'm going to do hashtag mobile dash menu and this is going to be the javascript we're going to be targeting so that whenever we click on the actual icon it will change from the bars to the x and then just press tab here and what that did is just created a class and an id at the same time and then i press enter so now we're inside of this div and then i'm just going to create a span with the class of bar and do this three times so i'm just gonna say span dot bar press tab and this is just me the first bar a cool little trick you can do shift alt and then the down arrow and then it just copies it down and then do it two more times we have three total here and if that didn't work for you just simply just copy and paste it three times like this and now outside of this div right below the span press enter here and then i'm going to create a ul with the nav bar menu class name so i'm gonna say ul dot nav bar underscore underscore menu press tab so now we're inside of a ul so i'm going to press enter and now inside this you want to create our first menu item so this one's going to call it li for the tag and then the class name is going to be nav bar underscore underscore item then i press tab here then press enter and now inside this li tag we're going to create the a tag so i'm saying a dot and then i'll say nav bar underscore underscore links then i press tab here for the href let's just put a slash for now and then go inside of this a tag press enter here twice and now i have the space you can see better and then i'm just going to simply have home and then pretty much if i save this i'll bring it back on the same line here but now you can see we have essentially a a tag with home when i click it it just reloads a page because we're going to the slash and now what we can do is actually just copy and paste this so i'm just going to take the li tag with the a tag press enter under paste it once and then we can change this one to let's do tech and then here i'm gonna put tech dot html and press save so now what this is going to do since we have a tech.html page we just simply click it and now you can see in the actual uh address bar that it has the tech.html and there's nothing showing because we currently have nothing on the actual tech.html page and then let's go back here and then let's simply go under the li that we just copied let me scroll up here let's just paste this again and let's just change this to let's do products and for this for my thing you know the spaces doesn't really do anything but i'm uh for my reason mine is like saving with spaces but yours probably doesn't have that and then underneath this l i'm gonna do command v again so pasting it one more time and except for the last one i'm gonna change this from navbar item to nav bar btn and then also nav bar and i'm just gonna put this as take that class completely out and just straight up say button and then here let's erase this word home let's just say sign up so we can save that there and now we have our essential nav menu prior to styling so now let's actually go into styles.css so i'm going to be here and let's go to styles.css here and let me um close out the size you can see better let's just cross this out and now let's do uh the first thing so i'm gonna have a little shift eight symbol a little time symbol curly braces enter and then i'm gonna say box sizing border box and then i'm going to say margin to be called zero padding to be zero and then i want the font family to be k u m b h sounds and if i save this right now we can see that our change our text has changed but we will have to import this from google fonts but i'll do that in a little bit for now i'm just going to finish up the actual nav bar so now let's target the actual navbar class so dot nav bar curly brace i want something background to hashtag 131313 and then i want to set the height equal to 80 pixels i'm going to say display flex and what this is going to do is going to bring all of these essentially onto a row so if i were to save this now you can't really see it yet but let me just go ahead and just do justify content center so now you can see it moves it over here and then align dash items to be centered and then also let's do font size and i'm going to do it in rem so essentially one ram is equivalent to 16 pixels by default but if you were to change the initial value then obviously you can change that but for now i'm going to do 1.2 ram so now you can see the increase in set size and then position let's do just keep it sticky and then the top i just want to have zero and then the z index which essentially is think of this in like three dimensions in terms of like stacking and i want it just to be 999 which is just an outrageous number but that's to ensure that no matter where i am on my site wherever i scroll it will always be above every other part of the website's content that way it's not blocking it's not being covered by anything and then we'll just save here and now let's press enter and let's do navbar underscore underscore container and i'm just gonna say display flex here so now you can see it moved it to the side and then let's do justify content i'm gonna do space between so that you won't see or see yet because it's kind of on all its mobile but once we'll finish this you'll be able to see everything let's set the height let's do 80 pixels here let's put the z index just to make it above everything to one and let's do width to be a hundred percent and let's make the max width so i don't want it to go past 1300 pixels and then let's do margin and let's do right here pretty much colon and so the shortcut is if you just do margin instead of doing like margin top or margin right or left etc if you do margin the first value is essentially the top and then the second value is right then bottom and then essentially left but i want only the top and bottom to be zero so if you only do two the first top the first one does top and bottom and then the second one will do the essentially right and left so i'm gonna say auto here and then i want to do the same for padding so i'm gonna say padding and then i want the top and bottom to be zero and then i want the right and left to be 50 pixels save here so now we see you got some space action going on here and then let's go ahead and target the nav bar logo and if you remember that was an id which is let's see where i put it right here this one the next so i'm gonna do a hashtag since it's an id and do navbar underscore just go to logo and then let's do the background let's set the color and this is just in case because we have a linear gradient but in case it failed well at least we'll have something so let's do ff8177 and then let's do background dash image this is how i got that effect where the actual logo was a different color i want to say linear and i have it already auto complete here so i'm just press tab so linear gradient and then inside here i'm going to say to top so essentially it's going to top direction and then i'm saying hashtag ff0844 that's the color and then zoom in zero percent comma and then i'm gonna say hashtag ffb199 and then a hundred percent and then i'm gonna do a semicolon after this and let's save that there so you can see we got a little gradient effect on the background color now i want to do background dash size to be a hundred percent and then i'm gonna do dash webkit dash background clip i want this to be text and then let me save that there and then also i want the dash moz dash background clip i want that to be text as well and then under here i want to do web kit dash text dash fill dash color to be transparent so now you can see it shows up and then saying we dash moz dash text fill dash color to be transparent as well and then under there i'm just going to say display flex and we're going to add an actual icon from font awesome so this is where it's going to make even but right now since we don't have it it won't really make sense but you'll be able to see this after let's do a line items to be center cursor i want it to be the pointer so it has a little hand symbol when i hover over it and then let's do text decoration to be none now just see text decoration get rid of the underlines it's an a tag and then let's do a font size of two rim so you can see you got a little cursor when i hover and then underneath this we're gonna have the actual icon so let's just i'm gonna add it right now just say the class is going to be called fa-gem and it's gonna be curly braces and i just want the margin dash right to be 0.5 ram so we haven't had this yet but once we go and add it it'll automatically be updated with the css and the other here let's do dot nav bar underscore underscore menu curly brace here i'm going to say display flex and then i'm going to say align items to be center then do list style i want that to be none and then i want text align to be centered so now you can see our little nav menu items changed and then let's do dot nav bar underscore underscore item let's do a height of 80 pixels and then under that let's go ahead and target the navbar links let's do dot nav bar underscore underscore links and then curly brace here and let's change the color let's make that to white so hashtag fff and let me see you can see that and then let's do under right here let's do display flex align dash items to be centered and then let's do justify content i want that one to be center and then let's do text decoration let's put that as none and then let's do padding i want that top and bottom to be zero and then the left right to be one ram and then let's set the height equal to a hundred percent so you can see it's starting to look a little better and now let's target the button now so nav bar underscore underscore btn and curly brace here and i want this to say display flex then i want justify content to be centered then i want to align items to be centered and then let's do padding zero and then one ram and then let's do width to be a hundred percent and they didn't do much yet but let's go ahead and now target the actual the class dot button and now let's do display let's do flex justify content center let's do a line items center text decoration to be none and then let's do padding 10 pixels by 20 pixels let's set the heights to 100 the width to a hundred percent and let me scroll up really quick and let's do border to be none outline to be none and then border dash radius to be for pixels and then i want the background to be hashtag f77062 and then i want the color of the text to be just hashtag fff which is simply whites and now you can see we have some button action going on here and then when i scroll it out we have it like this and whenever we shrink it the that's going to disappear because the hamburger menu is going to pop up but that's what we got going on right now and now let's finish up our nav menus let's just do dot button and to do a hover effect you do a colon and then say the word hover and then curly brace under and then simply let's just say background let's do hashtag four eight three seven ff and then transition so instead of being it like instantly i want it to be delayed so i'm gonna say all 0.3 seconds and then let's just say ease and it's like i misspelled transition so transition here save so now you see we hover over it we got something going and now let's do the last hover so that nav bar underscore underscore links then colon hover then the curly braces and i'm gonna set the color equal to hashtag f77062 and then transition is just going to be the same exact thing all s e's so now if i hover over the nav links we got cool orange ish looking effect right there now let's do the actual mobile responsive tablet responsive part which is media query so essentially for that you just type in at media and then say screen and and then parentheses and then max dash width and essentially right when this hits 960 pixels is when i want to trigger these classes so first thing i want to do is do the nav bars let's just say the nav bar underscore underscore container and then here i'm going to say display flex justify content to be space between and then for the heights let's set that equal to 80 pixels z index to be one let's do the width to be a hundred percent max width let's do 1300 pixels and then padding let's set that equal to zero so underneath here let's do the nav bar menu so let me just simply go and say dot nav bar underscore underscore menu curly brace let's do display grid let's do grid templates columns i want to set that value to auto and then let's set the margin equal to zero let's set the width equal to 100 percent and then let's do position absolute and let's set the top and i'll say equal to minus 1000 pixels so if you saw in the previous one essentially the animation is coming from the top so the top i said to negative a thousand so just ensure that it's never going to be seen and then whenever i click it it essentially sets the top back to a value to where we can see it so here that's what we're doing right now with this code and then under let's do opacity select to one transition let's set that equal to all 0.5 s ease actually let's set the opacity to zero because i don't want to be seen and then let's do the height of 50v h so that means viewport height and then z index the other set to negative one just so that way i should be able to click on the icon to trigger this so now you can see that nothing is showing so now we're gonna have the navbar menu active class so dot nav bar underscore underscore menu dot active so this is going to be the javascript that's going to trigger this and essentially whenever we click it this one i want this to trigger so i want to set the background equal to 131313 and then almost at the top equal to 100 so this value right here is going to essentially show the entire active menu and then let's set the opacity to one so we can actually see it and then let's do transition let's see transition and that's going to be all 0.5 s e's and then let's do z index to be 99 and then set the height again 250v h and then font size will be 1.6 ram so right now you can't see anything yet because we still have to actually edit the menu bars now so let's go underneath the navbar menu active and let's do hashtag navbar underscore underscore logo let's set the padding dash left to be 25 pixels and then you can see it's slightly moved over and then under here let's do dot nav bar underscore underscore toggle dot bar so now we're targeting the actual bars now so let's say width i want it to be 25 pixels height to be 3 pixels margin i want that to be 5 pixels auto and let's do transition let's do all 0.3 s e in dash out and i misspelled transition again so make sure i fix that and then let's just set the background equal to hashtag fff which is white and now we should have this done here and then let's simply add the navbar item so dot nav bar under underscore item let's set the width to 100 percent and then underneath this let's do dot nav bar underscore underscore links i'm gonna set the text align to be centered want the padding to be too rem the width to be a hundred percent and then the display to be table so right now looks like let's see yeah the bars aren't showing up right now so let me see make sure i have everything oh yeah yeah so let's add this right here so we can actually see what's going on let's do hashtag so id mobile dash menu and then here i'm going to say position absolute top i want to be 20 right i want it to be 5 and then i want to transform translate 5 comma 20 let's save that there and then it looks like i need to actually add the um let's see what else do we got so we have our links let's do navbar btns let's do dot nav bar underscore underscore btn let's do padding dash bottom to b2 ram and then for the button let's see dot button plus display flex and as you justify content to be centered and then let's see if i can actually make this uh visible one sec let me just take this out so now you can see what we've been editing so far and it's essentially just the mobile menu so right now i actually put this background on here now you can see it much cleaner and i'll go back and re-comment that out later but pretty much let's go back to the bottom and let's go back to our button now and let's do a line items to be center let's set the width to 80 so i shrink the button there let's do the height to be 80 pixels here and then let's set the margin to be zero all right so here's what we got going on right now and then let's see you got the mobile menu and let me make sure i got all my classes just one second yeah it should be fine here yeah so now let's go underneath this and then let's hear the toggle so now let's do dot nav bar underscore underscore toggle and then space dot bar and then here i'm going to say display to be block and then cursor to be pointer and now we can see we got our little bar action here so now let's go underneath this and here's the little effect to where it actually we got a little animation effect so you saw back on the original site it like animates it so this is the way i did this so pretty much what you do is you just do the id so i hashtag mobile dash menu and then you say dot is dash active which is going to be a javascript we're going to add this in javascript and then space dot bar and then colon and dash child of the second so this essentially targets the second child and then i just want the opacity to be zero so i just don't want it to be visible at all and then let me just go ahead and copy and paste this again so command c command victory v and i want to target now the top bar so one and then i'm inside erase opacity i'm gonna say transform set equal to translate so translate y i want that to be 8 pixels and then i'm going to set rotate to become 45 degrees and then let's copy this again and then essentially let's change this child so now i'm going to target the um i'm going to target the third bar now and then i'm going to change the y to negative 8 and then negative 45 degrees so i'll save it now so right now when i click it nothing is happening and also we have this here so what i'm going to do is actually let me uncomment this out so it disappears and then let's go to our app.js now so here this is so simple and super easy but pretty much what we're going to do is add the effect the click effect so it actually animates so i'm going to say const and then i'm going to say menu so i'm just naming this whatever i want to and my actually target is saying document dot query selector and then the parentheses and then i have to do the quotes and what i want to target in the index.html is the this is the actual nav the bar is right here right and it's wrapped around this div navbar toggle and i put id mobile menu so i can target with javascript so now i go back here i'm going to say hashtag for the id mobile dash menu and then underneath there i'm going to target another class this time some say cons menu links with a capital s i mean a capital l so the equal to documents dot query selector and then parenthesis quotes and then say dot nav bar underscore underscore menu press enter here you go back again now you can see this is the actual ul that's what we're going to be targeting here so that we can actually have that trigger too and to simply target this we're going to say menu which we just created i'm going to say dot i'm gonna add event listener and essentially what we're going to do we have quotes and we're going to listen for a click event so once we click it i want a function to run and what this function is going to do is simply going to toggle so i'm going to say menu dot it's going to toggle and add a class list so i want to say menu.classlist.toggle and i want to toggle this one is dash active and then underneath that i want to do menu links dot class list so i want to add this class list.toggle and i'm going to toggle the active class so we did everything properly we save and it looks like something is not working so let me make sure oh yeah the one thing i forgot to do always make sure you have this go to the bottom of the nav right below before the body tag and let's simply do scripts and i press tab it automatically has it auto type and then inside the opening script tags do src equals to quotes app.js save it so now this should work all right so perfect now we have our entire mobile navbar effect also when we scroll out here you can see that everything looks like this and then again boom just like that so there is the nav bar so one last thing i want to do is actually add the font awesome to here so let me just bring that side up really quick so here i am on font awesome so if you've signed up for this site then you probably already know but if you don't want to add icons then don't have to follow this but this is just in case you wanted to copy and also on the footer this work out the icons as well and simply just sign up with an account and then just click on this icon and click on font awesome cdn and it'll lead you right to this page and then once you have it you'll have this little cdn here so i'm going to copy this let me just shrink this back over and then i'm going to simply paste this inside the head tag so let me just do this right under the styles.css let me save it and now we can do is actually add this icon into our logo so right here right between the navbar logo and the word next i'm going to add this icon here so i'm just going to say opening tag actually i'm just going to say let me space this out so you can see it better so i'm going to say i dot f a s dot f a dot gem press tab and now you can see that i created this i tag right here which essentially is a little diamond icon we got going on and that's right in front of the word next but it's within the actual a tag so let me if i um press enter you can probably see a little better so you can see like that so this is essentially how it's written like this and now we have a little icon so that's good right there save it here and now let's go ahead and let me i'm just going to comment this for you guys to see this but this isn't you know how to copy this i'm just saying that bars section here and now underneath this nav let me press enter and let's create the hero sections let me just say hero section and let me just press enter and now let's go ahead and create the hero section all right so now i'm gonna go under here start adding the html here so first i'm going to do is dot main so now we have a div with the class of main and then say dot main underscore underscore container so now we have a main container and then i'm gonna say dot main underscore underscore content and it's going to be essentially our content with our text so i'm gonna say h1 then press tab and then i'm just gonna say all caps next generation then underneath the h1 would say h2 and let's just say technology and underneath this h2 let's just say p tag and then let's do see what makes us different and then boom i think i misspelled in the original version i think i said what's let's see let's say see what makes up see what makes up different yeah it doesn't matter just text here and then underneath this p tag let's just say button and then say dots and let's do main underscore underscore btn and now we have this main button right here the class and then on inside of the button i'm going to do a and just press tab now we have an a tag and let's put a slash here and then inside of the a tag i just want to say get started save it and now we have a beautiful looking site just kidding so let's go underneath so here's the button underneath this div and press enter and then i'm gonna say dot main underscore image img dash dash container and then inside here i'm just gonna do image so img with an id of main underscore underscore img press tab and for the src we're going to do images slash pick one dot svg and i'll show you where i got these pictures from and then for the alts let's just do um what was my picture i don't even know let's just do pick for now doesn't matter and let's save it so right now let me command b if you can see everything this is pretty much all the html we need to actually add in a picture to the images so let me show you the site that i got this from so this site is called andro.co and essentially these are free illustrations so when you're on here you just hit return and then just click on browse now and what you can do is you can actually go ahead and pick a color so let me see what color i use for the actual image so you want to copy my exactly i just got you just click on the color and just paste it in so i got f8671 just put a hashtag and then you pretty much look like this and then from here you can just scroll in here click on any of these and then just download svg for your project so go feel free to pick one i think i put uh messages let me see or message and i just clicked on here and then i just went ahead and downloaded the svg for my projects and then uploaded that into my file so what i'm going to do i already have it downloaded so go ahead and download that and let me drag that into my actual project so give me one second let me find it and i'm going to drag this over in here into the images folder and now you can see we have our svg here and i named it uh pic. oh just name it pic1.svg so just make sure you rename it and then you'll have it here showing up just like this and now let's go ahead and add the styles so i'm gonna go to styles here and then let me command b so you can see more and then what i'm gonna do is comment so let me say let's do hero section css and now under here let's just target the main so let's do main curly brace let's set the background color equal to one four one four one four see that there and let's do the main underground score container and let's do display to be grid let me do grid template columns and i want it to be one fr one fr so it's essentially like a 50 50 even split in terms of the screen space and let's do align items to be centered just to justify let's do self center margin this is going to essentially center it so zero auto and then let's do a height i want it to be 90 viewport height so essentially 90 of the screen and then let's do background color let's just do one three one actually let's do one four one four one four one four and then let's do z index to be one let's do the width i want to be 100 let me just save it and make sure we got stuff okay as you can see they're side-by-side right now let's do max with i'm going to be 1300 pixels and then let's do padding and i want the top to be zero and bottom to be zero and then i want the left and right to be 50 pixels each all right so now i have the container done so now let's do the main content so if i were to actually let me see i actually brought that out you can see it's like this and now let's just do dot main i'm just gonna underscore content h1 and then i'm simply going to say font size is going to be for rem background dash color i want that to be hashtag ff8177 and then let's do background dash image to be linear dash gradients to top comma ff0844 zero percent comma hashtag ffb199 100 and then let's do background dash size to become let's do 100 here and then let's do webkit background clip let's do text then let's do moz background clip to be text let me spell text and then let's do webkit aussie text fill color and let's just do transparent and then dash moz dash text dash fill dash color let's do transparent as well so now we have the text it's nice and gradient looking and now let's go ahead and add the h2 now so let's just do dot main underscore underscore content h2 and notice in case you're first time confused like how am i coloring this essentially here's the main content that wraps all of this text in here so i could have just went in here and just like added a class here custom like class you know whatever mean unscrewing content you know heading or like yeah whatever text but the thing is it's just so much easier and less code if i just straight up targeted essentially the child's in here so essentially next generation so it's main content h1 main content h2 main content p button etc so essentially this is what i'm doing here in case you haven't seen this style and let's just do pretty much we're just going to copy and paste this the only difference so we're going to change the um the colors so here let's do uh erase this let's say b7 two one ff and then for this one looks like i can even yeah i can't see it but this one let's just do uh 2 1 d4 fd save it so now you can see we got some color action going on there let's press enter and now let's target the p tag the paragraphs let's just do dot main underscore underscore content p and let's just do margin dash top 2b1 ram font size to b2 ram and font weights to b700 now we're going to add in um the different font sizes soon so actually let's just go do that right now so i went ahead and googled google fonts kumbh so let me just bring this over so simply just google this click on google fonts and all i need to do is get the regular so select this style and then also i want the bold and then what you do is you go to embed and then what you want to do is copy this link tag right here so i'm going to copy this go back to our index.html file so now i'm index i'm gonna go to the top and the head tag i'm gonna go right underneath the font awesome and just paste this in and just save it there and since we already added that to the top of our our um css earlier it should automatically fill out for us so now if i simply just go let me go back to our bottom go back to your site you can see it updates here and essentially how you can add any font feel free to whatever you want to and then let's do the dot main i'll just underscore btn and then curly brace here i'm going to say font size b1 rem background dash image to be linear gradients to top comma hashtag f77062 zero percent and then hashtag fe5196 a hundred percent and then let's do padding to be 14 pixels by 32 pixels so you can see it's starting to go up and i think i should add actually color on the p tag to be white so you can see it alright yeah perfect there and now for the underpadding let's do border to be none let's do border dash radius to become 4 pixels let's do color hashtag fff let's do margin dash top to become to rem cursor to be pointer and then let's do position relative and let's do transition make sure i spell the transition let's do just all 0.35 s and let's do outline to be none so there's our button right there so now we need to do is actually target the a tag inside of the button to get rid of that little underline the purple text so i'm gonna do dot let's do main underscore underscore btn and then a tag and then we're going to do position relative here and let's just do z index and the reason we're doing this is because of that hover effect so it's normally not necessary but since we're doing a little hover effect action we're doing in the previous let me show you sure like that we have to do all these like c index stuff and then let's do color to be hashtag fff and then text decoration to become none all right looking a little cleaner unless your dot main underscore underscore btn colon after and this is essentially going to place these values after in the actual you see in the html when you inspect the page let's do position absolute content you want this to be empty string so that when you actually see the hover effect like nothing's there except what the color is top you have to set that to zero for the left you're gonna set that to zero for the width you're gonna set that to zero and then for the height i'm gonna set that to 100 and then background is going to be hashtag four eight three seven ff and then transition going to be all 0.35 s and then border dash radius is going to be four pixels now underneath this let's do the hover now let's do dot main underscore underscore btn colon hover and let's do color the hashtag fff let's do the width to be a hundred percent actually my bad delete the width let's do um dot main underscore btn colon hover colon after and then let's do width to be 100 percent and then let's do dots main on it's going to score img dash container and let's simply just do text align to b center let's see if this actually pulls off so now we've got a little hover animation going on awesome cool cool and now let's finish off this before we go to our mobile responsiveness let's just do hashtag mean that i'm just going to score img and let's just do heights to be 80 and then the width to be a percent so let me scroll this out to see what i got going on right now so it's pretty much the first part but it's not more responsive so let's go and finish this up so right now you can see nothing happens yet so here underneath this let me just say this is like mobile responsive here and now let's go ahead and let's target the media queries let's add media screen and let's do max with to become 768 pixels and let's just target that main underscore underscore container and let's do display grid let's do grid templates columns i want that to be auto let's do a line items to be center justify self center and let's do with a hundred percent margin zero auto and then let's do height to be 90 viewport height so now we got some little media query action going on so now let's finish this all let's do let me scroll up let's see dot main underscore underscore content and let's just do text align to be centered margin dash bottom to be for rem and now let's do dot main honest underscore content h1 and let's do font size 2b 2.5 rem and then margin dash top to become 2 rem and then let's do dot main underscore underscore content h2 and let's put that as font size to be three rem and then let's do dot main underscore underscore content p and let's simply do margin dash top to become one rem and then font size to be 1.5 round and now let's go under here and let's do another media query so let's do add media screen and let's do max width to be 480 pixels so these are for like the smaller screens and let's just copy the content h1 h2 and the p tag so i'm not going to sit here and copy this again so let's just copy these paste them and now we're going to do is going to change this to let's do two ram and then three rem and then for the h2 let's do two rem and then for the p tag let's do um two ram font size one fiber and then underneath the pizza house pizza.main one is going to store btn and simply let's just do padding to be 12 pixels by 36 pixels and then margin to be 2.5 ram by zero so let's save that and we are pretty much set with this hero section right now and we can scroll got nothing yet but we can see you got a move menu and that's pretty much this section let's now go ahead and command b go to the nxhtml and let me actually go ahead and finish and let's add the services section so underneath the hero section let's go here and let's just call this one services section all right so now i'm going to go under here and let's just start adding this so i'm going to say dot services press tab and then in services let's do h1 and let's just say see what the hype is about and then outside of this h1 press enter and let's do dot services underscore underscore container and then in the container i'm going to create a services card so let's do services i'm just going to score card press tab there and let's just do h2 press tab x oh certificate experience experience bliss and then let's do p tag right there ai powered technology and then for the button let's just do button let's do get started all right so now underneath this so we have essentially a service card i'm just going to copy and paste this copy paste and then i'm just going to change this text here so let's just do um let's just say r u ready question mark and then let's just say take the leap and then simply get started that's pretty much all the index html so now let's go to the styles.css and under here let's just call this services css our services section css so now i'm going to do the services and then simply we're going to say background i want the color to be hashtag 141414 save this there let's see okay and then let's do display to be flex let's do flex direction 2b column and then i want the actual item so a align dash items to be center and then the height to be 100 viewport height and now underneath here let's do dot services h1 and let's just do uh here's going to be a pretty crazy one let's just say background-color want to be hashtag ff8177 and then background dash image colon linear gradient and then i want to say to write comma and then hashtag ff81777 zero percent and then simply let me put this on another line so you can see all this code i'm still inside the parentheses and i'm gonna do hashtag ff867a zero percent and then hashtag ff8c7f 21 and then comma f 99185 52 and then hashtag cf556c 78 and then last one hashtag two a five b with a hundred percent so i'll save that there and i can see we got the grading right there and now let's go underneath that let's do background dash size to be a hundred percent and simply having to copy and paste this every time let me finish this let's do margin dash bottom to be five ram and then font size to be 2.5 rem so now i'm going to go back to the top where we did our original ingredients let me see if i can find one like right here and i'm going to copy these last four lines here so essentially webkit background text everything here let me just copy these four go down below and then just simply enter here all right now we got the text looking like this so now let's do dot services honestly underscore container and then in here i'm going to do display to be flex justify content to be centered and then the flex wrap is just going to be wrapped so you can see they wrapped and now for the card let's do the we actually have to get images so let me show you the side i got these images from so this is just one of the sites there's multiple ones you can use but simply i think i just typed in like vr and you can go here click on this guy right here download it for free and then simply drag that over to your project and then i think there's another let me see this person should be on um the front page but you get the point you could really pick whatever you want but let me make sure i can find it so that you can actually um utilize this somewhere over here let me make sure yeah this one right here just click on that one and then just free download here and then you'll have the exact same pictures i use which were once it was yeah these two right there so let me scroll this back so download those and then rename them so i simply got pick simply pick two and three and then i'm actually gonna drag in the other picture for detect that's that's not uh mandatory because um i'm just showing this for example purposes but if you wanted to do it let me bring back my images folder and then let me just drag these over to the images so i simply got a another picture so you can download this as a keyboard i cut typed in and then we got the pick 3 which is the one guy of the vr and then only one girl here so now we need these images because we're going to actually add this into our cards now so i'm gonna say dot services i'm just gonna underscore card and then i'm gonna say margin one rem so it's the margin one run let's do a height of 525 pixels let's do a width of 4 pixels and then let's do border dash radius to be 4 pixels and let's do background dash image linear gradients to bottom comma and let's just do rgba parenthesis zero comma zero comma zero comma zero and then outside that parenthesis we're gonna say zero parenthesis our zero percentage sign and then we're still inside of this so let me maybe you can see what's going on drag this up so then i'm going to say comma let's see yeah comma here and then i'm going to say rgba parentheses 17 comma 17 comma 17 comma 0.6 and you're probably like what the heck is this essentially it's a linear gradient on the background to make it a little darker because it's when it was too bright when i had the text that you couldn't even read it so this is essentially doing that right here this effect and then while we're still actually let me make sure i have the right um parentheses yeah so we're still in the background image but we went outside the linear gradient so come after that i'm going to say url parentheses and we're going to target the image so slash images actually you have to put codes like make the quotes first slash images slash pick i'm going to use pick i think three at dot jpg and then semicolon after and let's save this and you can see now we have the images showing up but they look really crazy so what we're going to do is going to say background let's do back dash size and i want that to say cover so now you can see we got our images nice and snug and you're like wondering why is they both the same because we haven't added the other one let me just say position relative here because i want to actually um i'm going to fix this position relative i want to make sure i can position the text where i want it and then just say color hashtag fff so this is the first services card here and now what i'm going to do is i'm going to say dot services underscore underscore card colon actually no we don't need this let me just do dot services underscore underscore card colon and dash child and i'm gonna target the second one so obviously this is our second card and let me just copy this exact stuff here with this um background image so just copy this one right here paste it there and just change your picture to i have mine as pick four but whatever you named your girl vr pick is what you name here and then let's go underneath this and i was gonna say dot services h2 position absolute let's do a top i want to bring it down i want to bring down 250 pixels so if i say let me show you what's happening you should bring this over a little bit so i save that now you'll notice that our experience our h2 just went down there and then i just want to have it left 30 pixels so 30 pins from the left and now you can see it's hard to tell but on your computer you can probably see it better but it's 30 pixels from the left and then let's do dot services i'm just going to underscore card p tag and let's just say position absolute again so position absolute let's do top 400 pixels and then let's do left to be uh 30 pixels and now let's do dot services underscore underscore card button and let's target the color let's make it um fff so texas white and then under here let's do padding to be 10 pixels by 20 pixels let's do border to become none let's do outline to become none and then let's do border dash radius to be 4 pixels background is going to be hashtag f77062 position is absolute top is four four zero pixels and then left is 30 pixels and then font size is one red so now let's check it out we've got a little button action going on here and the same on this bit uh picture or the card there and then simply let's just do um cursor pointer too so let's make sure it actually has it there so perfect all right cool and then now let's just do a little effect so when we hover over it let's do services owners underscore car colon hover and this is going to scale it so increase the size so transform and i'm going to say scale parenthesis 1.075 make sure we go outside here and let's do transition to b transition that should be 0.2 s e's dash in let's do cursor pointer here and now if we hover over it you can see that is increasing in size and now let's go ahead and just add in the midi degree so right now if i were to go back let's just see what we built so far got this and then we got this right here with the little hover effect so now let's go back and let's do at making sure at media screen and max dash width to be 960 pixels and let's just do dot services and let's make that a height of 1600 pixels and let's do dot services of h1 and let's just do font dash size 2b to ram and then let's do margin dash top to be 12 rem and i just wanted that because it's like a little close when you shrink it and i want to make sure that i have height and then also on the footer when we create that i want the bottom to have spacing two and then that's the last one at media screen and max width to be 480 pixels to where the smaller screens let's do dot services uh let's do a height of 1400 pixels and then let's do dot services h1 and let's do font dash size of 1.2 ram and then let's do dot services honestly underscore card and let's do width off 300 pixels and looks like we're good here and now let's go ahead and let me add another comment here it's going to say footer css so now let me command b and cool trick 2 is um see all these tabs open if i click on open editors if you don't have that setting click on these three dots and just click on it check it i can just click the x here and it cleanses out everything so now i have a fresh uh slate so now going back to index.html let's go ahead and go under here and let's just do a footer section so now let's just simply go to in this html alright so let's start adding the code for the footer so let me close this out and scroll up so here i'm going to say dot footer underscore underscore container and then create a div called dot footer underscore underscore links and then inside here i'm going to have dot footer underscore underscore link dash dash wrapper and then let's do the footer under underscore link dash dash items and then in here is where we actually start to add the uh footer stuff so let's do h2 i'm just going to say this about us and then in here let's just do an h or an a tag with the slash for here and then let's just say how it works and then we can simply just copy and paste this so let's do one shift again it's shift alt and down arrow to do what i'm doing here so two three four so five times total and then simply let's just go here and let's just say test and mode let's see testimonials the next one let's change this to uh careers and then let's do uh see let's do investments and then let's just do um turn off service now this pretty much is what we need to do for this so now i'm going to go ahead and take these four link items with the all the things we just created command c and then paste that so now we both we have the photo link wrapper and then we have two of these inside of it now all we need to do is get the photo link wrapper now and then highlight so i have a plug extension for this to highlight this but pretty much get everything wrapped with the photo link wrapper command c then go below and then paste that again so now if i save it we should have essentially at the bottom all of our stuff here now i already have my code with all the custom uh the custom like text in between so so you can go in and do that yourself or you can just simply just leave them like that and edit it later but what i'm going to do is just going to go ahead and let me just copy this and let me just go here and let me just paste mine in so that it actually fits i think i misspelled this one invests save it and now we have everything different now here so that's pretty much what i got going here and basically for the last one you can change this to but again it really doesn't matter it's just uh you can name it whatever you want so now after this so let's see we have let's see where is the folder the links so i want to go so the second to last div press enter and now we're going to create the social media so let's do dot social underscore underscore media press tab and then let's just do dot social underscore underscore media dash dash wrap and then here i'm gonna say dot footer on the screen let's go to logo and then let's do a tag and let's just say hashtag footer underscore underscore logo and then here i'm gonna have the href let's put a slash and then for the a tag let's just say i dot fas dot f a dash gem press tab and then outside this closing i tag and right before the closing eight tag let's just say next and then let's do underneath this div here let's go ahead and just type in the p tag with the class of website underscore underscore rights and then in here let's just do i have the coverage name but you don't have to just say next uh 2020 dot and let's just say all rights reserved i forgot i forgot the shortcut key for the copyright symbol so i'm just going to copy and paste mine but i'm pretty sure i forgot the one vs code but you can literally just a quick search and should be able to show you but again it's not necessary and then let's do uh underneath this p tag let's do dot social underscore underscore icons and then in here let's do a dot social underscore underscore icon dash dash hrev let me just put a slash and then let me go inside of the a tag and then i just put in this so inside here let me just say i dot and let's do f a b dot f a dash face book press tab and let me save this and this should show us a facebook icon down here which you can see very tiny and in the a tag let me just finish stuff up and let me just say um target equals quotes and then let's just say underscore blank so this makes it where you can open this in another browser so let me just save it here and then let me just go ahead and just copy this stuff here so let's copy this and then simply paste it under so here i'm going to say paste here so that's essentially instagram and then let's do another one enter this would be uh twitter enter linkedin and youtube so now let's go and edit all that stuff so we have um here second one is instagram and all the icons they're the same minus the social domain so you can just change this whatever you want to so let's just say twitter let's do um and and then let's do see youtube save it there and i can see we have all the logos there so that's pretty much the footers um html and i think let me make sure yeah we're fine okay so now i'm gonna go command b now let's go edit these styles so here close this back out and let's start editing the folder styles and then we can call it a day so now let's do dot footer underscore underscore container i'm gonna say background dash color to be hashtag one four one four one four let's say padding to b let's do five ram zero let's do display to b flex flex direction two b column uh let's do justify content to be center and then let's just do all see align items to be centered so let's see so we got some some movement going on and now let's target the hashtag footer honest going to score logo let's just do color to be hashtag f display to be flex align items to be centered cursor pointer let's do text decoration to be none and font size to be to rem let me just scroll it up here and then let's do dot footer under underscore links let's do a width of a hundred percent let's do max width to be a thousand pixels display is flex and then justify content is centered so we got some stuff happening here and now let's do dot footer underscore underscore link dash dash wrapper and let's just say display to be flex so you can see here now that it brings them over to the side and now let's just do um under here dot footer underscore underscore link dash dash items and let's just say display to be um flex then under here let's do flex direction to be column and let's do a line items to be flex start and then let's do margin of 16 pixels let's do text align to be left to be 160 pixels and box sizing to be border box save that there and scroll down and then let's do dot footer underscore underscore link dash dash items of h2 let's do margin dash bottom to be 16 pixels i put two t mates here okay and then let's do dot footer on a square underscore link dash dash items and greater than h2 and this is going to just target the hashtag so now we're targeting essentially the h2 is there and then let's do dot footer launcher underscore link dash dash items a and it's going to say color hashtag fff decoration is going to be none and then margin dash bottom is going to be 0.5 round let's go down here so now we've got some more color action here and now let's do um dot footed on a screen is called a link dash dash items a colon hover let's say color equal to hashtag e9e99 and then is going to be 0.3 s e's dash out so here and then let's do um this is social icon so essentially the bottom section now so let's just comment say social social icons and then let's go up and let's do the social underscore underscore icon dash dash link i forgot the period in the front so let's do dot here and let's just say color hashtag fff and then font size to be 24 pixels see down here and then let's do da social i want to underscore media and let's just say max dash with 2b 1000 pixels and then width to be a 100 and then under here let's do um dot social underscore media rap let's say display flex justify content space between let's do a line dash thinking type right now to be center width to be 90 max width is 1 000 pixels and let's do margin uh 40 pixels auto zero on toe save that let's see how that looks now okay look a little better and then let's do uh let's see we've got wraps let's do social underscore underscore icons now display is flex uh justify content space between align dash item center and then with 240 pixels so we got some spacing here and then let's do odd c dot social underscore underscore oh should we spell this i'm just going to logo and let's just do color hashtag fff let's do justify self okay here and let's do um flex start margin dash left to be 20 pixels cursor pointer and let's do all let's see text decoration to be none let's do font size to rem display flex align items to be center and then margin bottom to be 16 pixels let's see we got going on right now so i don't even think is the icon not even in here hold on let me even have the logo in here for sure oh that's why misspelled gym should be the actual the next should be f a s dot f a dash gem so now we have little diamond okay now let's make sense so now let's do the last one dial website i'm just going to go rights and let's just say color ff so it's not changing what the heck so let's go back right so this should be website rights and now we've got the color changing perfect all right so now let's do the media creators now so let's do add media screen and max width of 820 pixels curly brace here and let's just show you what we got so far it looks like like this but we need that to be responsive so let's go ahead and dot footer underscore underscore links and that should be padding dash top to rem and let's see dot oshie hashtag footer underscore logo margin dash bottom to b2 ram and then let's do dot websites underscore rights and let's do margin dash bottom up to around here and let's do dot footer honestly underscore link that dash wrapper and let's do flex dash direction to be column oh what happened okay i'm tripping out what happened okay is it working okay cool and then under this let's do the social underscore media dash dash wrap and let's do flex dash direction column as well and then let's go under here and let's simply add this line add media screen and max uh let's see medium screen and max dash width 480 pixels and let's do dot footer honestly underscore link dash dash items and let's just do margin of zero padding to be 10 pixels and the width to be 100 so now let's save this and now you can see it's nice and clean so let me scroll up to make sure everything looks good and then also here oh and one thing too let me show you if we go to um tech it's actually just copy go to nxhtml command a command c so copy all of this just go to tech and then literally let's go um let's say in the home section on the tech html let's just say this is the tech page and then for the image uh i think i put let me check my images if you didn't have yeah i have a second one so this just you can just watch this one just to see what i'm doing and let's do jpg and now when i go over click on tech now you can see that i actually switched the page and it showcases essentially the same thing because we just copy and pasted this but ideally if you were to make a new page then that would be essentially what you have here let's go back home and this pretty much is what we have built today so if you did enjoy this video definitely give this video a thumbs up subscribe you are new to the channel i'm pretty much document myself learning code building projects and showing you what i'm creating so if you want to follow me along that journey then come feel free to subscribe and then comment down below what you think and let me just show you again we have the mobile responsive close it out then you go in here and then we scroll down we got the images and then the footer here so if you did enjoy this feel free to share this with your friends and i will see you in the next video peace

Channel: Brian Design

Views: 228,252

Keywords: html css javascript website tutorial, html css website design tutorial, html css javascript tutorial, html css project, how to make a website using html and css, html css website design tutorial for beginners, html css javascript, html css, javascript, css project, css grid, css flexbox, html css javascript project, html css website project, html css website from scratch, css tutorial, css website, css tutorial for beginners, website design tutorial, css html website tutorial

Id: FazgJVnrVuI

Length: 85min 42sec (5142 seconds)

Published: Mon Sep 14 2020