Build a Netflix Landing Page Clone with HTML, CSS & JS

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below hey what's going on guys so in this project we're gonna be building the netflix landing page or the netflix home page and I didn't use any of the code from the actual website it's all I did was look at it and then recreate it using HTML and in my own CSS styling so we'll be using a lot of the CSS grid system will be using overlays shadows and stuff like that so this is it here this is the project and then we'll look at the actual Netflix site so we have this main showcase area at the top we have the logo the sign-in button the main text call-to-action and then we have this background overlay with an image and we have this shadow this inset shadow around the edges which gives it kind of a cool look and this goes down about 93 viewport Heights or Heights or so normally I would have this go all the way down but the regular site the real site you can see they don't so I just kind of wanted to mimic that and then down here we have the tabbed area so we will be adding a bit of JavaScript to give it this effect basically we have a tab the active tab has a red border at the bottom if we click this one you'll see we get this content so we'll be using the grid to align all this stuff pick your price this is a style table we'll be creating so we will be adding a little bit of JavaScript and then down at the bottom we just have a footer where again we'll be using CSS grid so pretty simple as far as looks but there is a lot of styling that we have to do it is responsive which I'll show you in a second so this is the actual Netflix site which you can see is very very similar the icons are different they used SVG icons I used font awesome so you can see that this you know this stuff is pretty much the same this is the same at the table here and then the footer at the bottom so very similar and if we check the responsiveness out let's make it go down to about 960 and you can see it changes up a little bit so the logo goes over here the text gets smaller the viewport height gets smaller and you can see the tabs still look pretty good and the footer so once we hit about 700 then this gets smaller this will stack up this content stacks up here table looks pretty good but when you get to a certain you know if you go too small it kind of get it gets cut off a little bit but you can mess around with the container if you want but all in all I think it's a pretty pretty neat project and I think will sharpen your CSS skills I might even add it to my modern HTML and CSS course on udemy which I'll have the link to in the description if you're interested all right so let's go ahead and get started I'm gonna jump into vs code and I have some files created here but I haven't written anything basically I just have my index.html my CSS folder with a style dot CSS my J's folder with a main dot J s and then I have my images folder and then the images folder I have the background the Netflix logo the tab one image and then tab two has these three images here so you can get these I'll have a link in the description probably to a code pen where you can get the images or you can just get them off the actual Netflix site alright so let's get started we're gonna jump into the HTML and I think the way I'm going to do this is in sections we'll do the showcase area first doing the HTML and the styling and then we'll jump to the tabs and then we'll jump to the footer I'm gonna save the JavaScript for last though okay we'll do that last so let's start off here with just some boilerplate using Emmet so I'll do exclamation enter or tab and I'm not gonna explain every little thing I'm expecting that you guys have at least a little experience with HTML and CSS if you don't I would suggest going and watching my crash courses or even taking my udemy course but just get from with the basics all right so let's say Netflix just copying the title that they have so watch TV shows online and watch movies online okay so we also want to link our stylesheet so CSS slash style.css and then we're also using font awesome so I'm gonna go and grab that CDN that font awesome comm start using free and then we'll just grab this right here and let's paste that right here okay and that should do it for the head area so I'm gonna open this up now you can open it you know three or file system if you want I'm using an extension called live server 4 vs code so I'm going to right click and open with live server and we just get a blank page for now okay and I'm just gonna close up the finished version I'm gonna keep the original Netflix landing page open though just for reference so we're going to work on the showcase area which is this whole area here basically we're gonna have a showcase top which will be this part and then a showcase content which will be this part and then obviously we have to style the you know the overlay and background and stuff like that so we'll start with the HTML so inside of our body where I'm gonna use a header tag here html5 semantic header tag and let's give it a class of showcase and we're gonna have our showcase top and inside the top showcase top we're gonna have an image which is going to be our logo for the alt I'll just put Netflix and then under that we're gonna have our button now this is the sign-in button and I like to use utility classes if you've watched me do any CSS you know that I like to create classes for buttons alerts badges all all types of utilities so we're gonna have a utility class called BTN and it's going to be rounded so I have a class of BTN rounded that will create as well and this isn't actually gonna go anywhere so under showcase top let's do showcase content and we're gonna have an h1 here we're gonna say see what's next and underneath the h1 we're gonna have a paragraph and we're gonna say watch anywhere cancel anytime and then under that we get we have that big button with that you know watch free for 30-days so let's do an a tag it's going to have the BTN class and this is gonna be a very large button so we're gonna have a BTN - XL class oops alright and then inside here we're gonna have watch say watch free for 30 days and then I'm gonna have a chevron icon so I'm going to use font awesome I'm going to put eye dots I'm using Emmet here a class of FAS and then a class of FA - Chevron - right and then I'm also gonna have a custom class of BTN - icon so that I can push it over a little bit alright so let's just see what that gives us okay not much we can see we have the little icon here the logo we're gonna change the size and all that stuff don't worry about that but that's it for the show case as far as the HTML goes so now we're gonna turn this into this using CSS alright so let's jump into style.css and before we do stuff with the showcase let's just add some some some base styling alright now I'm gonna actually use a variable so I'm gonna use CSS variables or custom properties they're actually called so I'm gonna say on the root scope I'm gonna have a primary color just just in case you want to actually change the Netflix red to something else you can easily do it by just changing this variable so the color is e what is it 5-0 904 so that's that that red color alright and I think that's the only variable we need I had a dark color and light color but I don't think we actually use it so I don't think we use it so I'll just leave this for now all right now I want to add a reset so I'm gonna say for everything let's do box sizing and said that to border box so that with doesn't affect I'm sorry padding doesn't affect width or anything like that I'm also gonna take off the margin and padding from everything all right so that's our reset and then for the body we're using font-family:arial it's actually Helvetica but I can't find Helvetica for free so we're just using Arial and then we're also gonna add the font smoothing anti-aliased so we're gonna add the vendor prefix of WebKit's - font smoothing and anti-aliased alright and then we're gonna add a background so the body background I'm actually gonna make black and let's say the color I'm gonna make a grey so triple nine all right so that's the body unordered lists I'm gonna just get rid of bullets so this style no and these are just some some base styling that I do for pretty much everything for the headings i text is gonna be that light grey but for headings I want them to be white so I'm gonna do H 1 through 4 H 4 and let's do color white all right and for the links so any links let's make the color white and take away the underline so I'm gonna do text-decoration:none all right I'm just gonna turn on format on save I don't think I have that so I have the prettier extension installed which is a formatter but I wanted to format on save and I think I have that shut off I do so I'm just gonna check that so that way if I save it just kind of formats things for me there we go okay so let's see paragraphs remember we turned off the margin and padding for everything however paragraphs I do want to have a default margin on the top and bottom of 0.5 Ram okay and I'm using REM units for the most part if you're not familiar with REM units I have a video explaining em in REM units basically one REM is equivalent to whatever the number of pixels of the font size of the route HTML element which is this right here which by default is 16 so one REM is going to be 16 pixels in our case 0.5 is going to be 8 pixels because half of 16 is 8 2 REMS would be 32 pixels because 16 times 2 is 32 if I were to change the font size of the HTML element explicitly like let's say the 10 10 pixels then one REM would be 10 pixels but in our case it's going to be a multiplier of 16 hopefully that makes sense and then any images we have are going to take up a hundred percent of the width of its container alright so those are the base styles if we save that and take a look should look like this you can see the pad the margins gone from the body and the headings and stuff like that all right so let's grab the whoops this should be a semicolon let's do the showcase so showcase I want this to have a width of 100% and then the height I'm gonna have this be 93 VH okay which is a viewport height so basically you can think of and ignore the size of this logo for now but you can think of the viewport height here so the height of the window as 100 slices across and I'm taking up 93 so it'll leave a little bit of room at the bottom just like if we look right here so it's basically gonna take up you know down to the around this area if you want it to take up the whole thing which I would prefer then you would do a hundred viewport Heights but I'm just trying to stick to the format of Netflix all right so let's see what else do we want on showcase we want a position:relative because we are going to position some stuff absolute within it and then we're gonna add the background image here so the background is gonna be a URL and it's gonna be we want to go dot dot slash outside of the CSS folder into images and then we want background jpg we just want to add some other attributes here so no-repeat we're gonna Center Center on both the XY axis and then we want to cover and that should be good so if we save that and take a look now we have the background image all right so you know what let's deal with the let's deal with the showcase top because this this logo is gonna aggravate me so let's do showcase - top and let's position this relative because I'm actually going to position the logo absolute within it the logo and the link or the button so the the showcase top we want he's I will do that after the z-index so I can explain it but this is going to have a height of I'm gonna do 90 pixels all right and then let's do the image so we want the showcase top image and let's cut that sucker down big time let's do 170 pixels so if I save now you can see that it's it's much smaller it's around the same size as this alright so as far as the image we're going to position this absolute which means we're just we're positioning positioning it inside of its closest parent element that has a position relative which is showcased top okay so we're positioning inside that and we want to say from the top we want to go down 50% and from the left 50% now if I save that we take a look you can see that it's it's it's down 50% because remember the showcase top is 90 pixels high right so it's 50% down and 50% over however this also at the length of the actual image is included in that you know in that positioning so it looks further over to the right than it should be so what I'm gonna do is add a transform translate property here to kind of put it into place so let's say transform and we're gonna say translates and this will kind of make up for the the actual height and width of the the image so we're gonna do negative 50% when you do negative it's basically going to go up in left so we want to do negative 50% here as well so now if I go ahead and save now it's pretty much smack-dab in the middle which is where we want it all right now the link which is I can aware is the link can we even see it well the heck you know what maybe we should style the button because I don't even know where the link is watch anywhere cancel oh it should be the sign in link did I forget to add it oh I didn't put any text in it should say sign in there we go so there's our link so I guess we'll position it and then we'll do the the button utility class after so let's add underneath showcase top image let's do showcase top eh okay cuz it's the only it's the only link in the showcase top and we're also gonna position that absolute and we're gonna say from the top 50% move it down and then from the right zero okay and I'm also gonna add this transform translate here just to move it to where I want it alright so if we take a look now you can see that there it is right there and it's pretty much in the middle of the logo which is where I want it okay so let's see let's do the let's do the button class just so this you know we want it to look like this somewhat like that and we'll be using the button class quite a bit now usually what I like to do is have our utility classes at the bottom so we'll continue on up here but then at the bottom we'll have our utility classes like button our buttons so let's do class of BTN and we're gonna have quite a bit here I'm going to display it as an inline block so basically it's it's it's in line but we can add height with stuff like that the background is gonna be background is going to be our variable so the way that we do custom properties is we define it above like we did and then we use VAR parentheses and then we can put in our primary color variable okay and then the text color let's do white I'm gonna add some padding I'm gonna use REMS so I'm going to do 2.4 Ram yeah that's the top and bottom and then 1.3 R M left and right and font size is gonna be one REM and let's align to the center so text align to the center and we want to remove any border and the cursor should be a pointer because you want to think of you want to think of making you know making your your code scalable so we might use this button class on a form at some point you know obviously in this particular project we're not but you want to think of the future so we don't actually need this on a link but if we'd use it on a button somewhere we would want it to be a pointer so we're also gonna add in margin right I usually add margin right just in case we put buttons you know in in line next to each other and let's see let's add an outline of none because we don't want that annoying looking outline and then we'll add a little box shadow here so let's do box shadow 0 1 pixel 0 and then RGB a which is RGB alpha so it's gonna be black 0 0 0 and then the alpha the transparency is going to be 0.45 and then let's just add a little bit of a roundedness to this so border radius 2 pixels okay now on hover let's do BTN hover I'm not going to change the color or anything all I'm gonna do is make the opacity 0.9 so just make it a little see-through which will give it that effect of changing the color and remember we have that button rounded so by default it has two pixel border radius but what I want to do is if it's rounded if we add this class I want to make it five pixels so it's a little more rounded alright let's also do our sizes so we have BTN - XL and for that I'm gonna make it to Ram which in our case is 32 pixels because remember one room is 16 pixels padding let's do 1.5 RAM top and bottom 2.1 ram the left and right and then we want it to be uppercase so text transform uppercase which is it's better to do it this way than to actually you know type in uppercase letters in your HTML alright so we have a button Excel we're also gonna have a button large so I'm just going to copy that and the only difference here is gonna be this is gonna be one room and then the padding will be a little less will do 0.8 and let's do 1.3 all right so let's check that out so you can see our sign-in button looks pretty good this should be bigger did I use large oh wait a minute this should be large LG there we go alright so trying to think if I want to do the overlay you know what let's let's handle this part first and then we'll do the overlay last so this needs to be in the middle and the text needs to be bigger so let's think here yeah let's do the showcase content because all this is wrapped in a class of showcase content so we'll go back up here let's go right below the showcase top eh and I'll say showcase contents and we're gonna position this relative and let's do a margin Auto ok you want to move it to the middle we're gonna do a display flex but we don't want it to be a flex row if I save this and we take a look you can see that everything is now lined up horizontally which we don't want we want it vertically so to do that we just change the Flex direction to call them instead of row which is the default okay we also want to justify the content to the center and align items to the center which will move everything to the center also the text itself also make that Center okay and if we save that and take a look good now we need to move it down quite a bit so I'm gonna add a actually you know it's do a margin top of nine rim which is quite a bit okay so bow right here yeah now this we want to work on this part the h1 and the paragraph obviously that's way too small the button looks good but the text needs to be bigger so let's add that right here will say showcase content h1 I'm going to text transform text transform to uppercase and we're gonna change the actually I'm sorry the this isn't gonna be uppercase because if we look at the actual site this is the only text that is not uppercase so we don't want that actually what I do want to do is change the font weight to 700 and then let's increase the font size big time so we're gonna do 5.2 REM and then let's add a line height of 1.1 REM are just 1.1 which is M and then margin I just want margin bottom to REM zero everywhere else so - all right let's check that out good so now we want this text which you can barely see so that's a paragraph so we'll just do showcase content P and this I actually do want to text transform upper case and let's make it white and font weight I'm gonna do 400 and font size so font size we're going to go with 1.9 REM and line height 1.25 and then again margin:0 0 to REM and that should do it ok good so obviously the background image is way too bright so we need to add an overlay we're also gonna add some inset shadows so there's many ways to do this we're actually going to use a pseudo class or pseudo element I forget what exactly what it's called but we can use before and after so basically we can add kind of like a ghost element to style inside of our you know CSS by using before or after so I'm gonna go right into the showcase which is right here and let's do showcase and then we want to do double double : you can also do single that will work as well and then after now before and after you want to have a Content property but we don't actually want to insert any content so we're just gonna put just quotes here and then the idea is that we want to position this inside of our showcase because our showcase is positioned relative so we want this to be positioned inside of it absolute okay and then we want it to go from the top zero top zero position and left zero position which is the top corner top-left corner and we want it to span the entire thing so one hundred-percent wide and a hundred percent height all right now the z-index I'm gonna set that to one and then the background if I let me just show you real quick if I do like background red and we take a look it's just covering the whole thing right so we positioned it absolute top zero so it starts here it goes all the way across all the way down Z and X 1 makes it so that it's on top of everything now the way that I'm gonna do this is the background color instead of setting it to a solid color I'm going to set it to an RGB a value which is basically a transparent color so I'm going to do black zero zero zero for a red green blue and then for the Alpha value I'll do zero point six so now if we take a look you can see through it all right now we have an issue here and that is that the text is under it's underneath that showcase after we need to bring it up this is part and the showcase top so the way that we can do that is by increasing the Z index on those properties alright so let's go to showcase top and let's set the z-index to two okay if you're not familiar with z-index basically the higher it is the closer it is to you so if I save that and now we go back now it's on top okay because the the overlay has a Z index of one so now this part the Showcase content we want to do the same thing so go here we'll say Z index two and now if we go back now it's on top all right so the last thing we need to do here is the Box shadow so I'm actually gonna paste this in because it's quite a bit to type in here actually no I want to show you guys kind of how this works so let's go to our showcase after so our overlay and I'll just paste this this part in so this is giving us a box-shadow:inset this is basically going to be the the left and the top and these values are gonna be how how thick the shadow is so if we take a look at this you can see that it's the this part you can see the shadow here and then at the top okay there's no shadow on this side and if we increase these values like let's say 320 and look now you can see how far the shadow comes out so if you're not happy with what I have here you can always mess around with it and change it I think that looks pretty good though however I also want the shadow on this side so what we want to do is we'll take this whole thing here we can put a comma and paste that in now since we want on the other side we want to put a negative value here in here okay but I'm gonna keep it at 120 and 109 see we have it on the bottom and the right so it goes all the way around all right so I think that that looks pretty good so now we're going to do the tabs which is this area these three tabs with the icons so we're going to jump back into our HTML and let's go underneath the header and we're gonna have a section with the class of tabs and we're gonna be using a container because if we look at the Netflix site notice how these these don't go all the way over to the side same thing in here so that we're gonna have a container to restrict that so we have a class of container and then each tab is going to have an ID of tab - one through tab - three and also a class of tab - item now the reason for the ID is because we need to target this within the JavaScript okay basically we need to have an event to click these things and have the content change so within here we're gonna have a actually you know what this yeah let's add the tab border class as well by default because that's this red border right here is gonna be a class of tab border and what we want to do in the JavaScript is when we click another one of these we want to switch it over basically take that class off of here put it on to here but this will be the default so we can put that you know the first one we can have a class of tab boarder and then we're gonna have an icon this is gonna be FAS so font awesome and then FA - door - open and with font awesome you can change the size by adding FA - you can do 2 X 3 X 4 X we're gonna do - 3 X okay so that'll give us the icon and then let's have a paragraph here and I'm gonna give this a class of hi - SM which I'll show I'll tell you why in a second and then let's say cancel anytime so hide SM just means that we're gonna have a media query that will make this disappear on us when it's on a small screen so it'll just show the icon alright so we can use this class anywhere where we want it to not show on small screens because it just gets too cluttered so we're just going to remove on mobile screens so I'm gonna just grab this div here and copy it down twice and then this next one will be tab to tab 3 and then we want to remove the tab border from these two and then for the icon the second one is gonna be FA - tablet - alt and the text is gonna be watch anywhere and then let's see this one here the icon is gonna be FA - tags and this text is gonna be pick your price actually it's not - an uppercase here or here alright so we'll save that that's the tab section let's take a look so it looks horrible right now so we're gonna style that so we'll jump into our CSS and we'll go underneath all the showcase stuff but above the buttons like I said I want to keep the the utility stuff down at the bottom so tabs so tabs itself we're gonna have a background oh we are going to use a variable here so let's do a dark color variable so we have a primary color I'm just going to copy that down and change this to one four three times and we're gonna call this dark color all right and then we'll go back down to our tabs and we're gonna use this right here by doing VAR dark color all right and I'm gonna push it down a little by just adding padding top of one rim and then we want to border bottom so this is the border for the whole entire section it's gonna be three pixels solid and let's do 3d three times what we need a number sign here okay and then let's see I think that should be good so let's save that so you can see that it has this this color or this lighter it's not the black background it's a little lighter now these three icons these sections we want to just use the grid to align them like this now the way that the grid works is you have a parent container let's just look at the HTML you have a parent container that you display as grid and then you have the grid items directly inside now we don't want the class tabs to be the grid because if we do that only the container div that's the only direct child so that would be the grid item we want these three to be the grid items these three divs so what we'll do is we'll put the grid on this container on tabs container okay so let's do that let's say tabs container and display grid and we're gonna use grid template columns now we want three even rows so we could do one fi which is a fraction unit we could do that three times or we could just say repeat and we could say repeat three times one fr and that will make them all even and then I want a little bit of gap in between so grid gap I'm gonna do one room okay I also want to line everything to the center so aligned items Center and justify content to the center and also text line to the center whenever you're using flexbox or the grid you use this quite a bit so let's save that let's take a look all right now we haven't we haven't specified the container yet that's why it's you know these are so far over so let's actually do that let's create the container class actually should have some padding here as well padding top oh you know what I'm gonna add the padding on each individual div that's why alright so anyways let's let's create the container class which is take technically a utility so I'm gonna go down we'll just go right above buttons because the container we're going to use in a couple different places so I'm gonna give this a whoops we should probably create the class first so I'm going to give this a max width of 70 percent of the screen all right and then we want everything in the middle so we want to do margin auto and then let's do overflow:hidden I want everything to stay within the container and then padding I just want on the on the left and right I want to rem so I'm gonna do zero top and bottom two Ram left and right so let's save that and go back and now you can see that these are now within the container which is 70% of the screen if I were to make this smaller you can see that it shrinks up alright so back to our way back to the tabs so let's see we have tabs container that's all set for the font I want to make it a little bigger and add a little bit of padding to the top so let's do tabs paragraph let's do font size will do 1.2 REM and then padding top let's do let's do point 5 room all right so check that out so these are that's a little bigger now and we get some padding on the top now let's see I want padding on the top and bottom of these so what I'll do here is I'll say inside tabs or rather the tabs container the direct div so each div I want to add padding will do 1.5 REM on the top and bottom so now if I save that we go back now we have some spacing on the top and bottom so we just targeted each div I also want to have a hover effect here so basically when we hover over these I want I want the text to be white the text and the icon and also have a pointer cursor so we can grab this and just say hover and say color whites and cursor:pointer okay so now we get that that effect all right so let's see the tab border class which we only have on the first one right now I don't even know if we'll be able to see it because we have no content under it but it's going to be that red border so we might as well add that I'm just going to go right here and say class of tab - border and we're gonna say border bottom and it's gonna be the the red color which is our primary color we have that in a variable and it's gonna be four pixels solid okay and there you go you can see the red border at the bottom alright so now I think we're all set as far as the tabs now we want to do the tab content which is you know this stuff here so there's three different tab content areas so let's go to our HTML and we're gonna create another section and give this a class of tab - content and we're gonna have a container we want to contain everything in here as well and we're gonna have three like I said three different sections so whoops I'm actually gonna put a comment here and say tab content one just so we know we're dealing with so this is gonna have an ID of tab content one it's also gonna have a class of tab - content item and the way that the when we do the JavaScript what's going to happen is when we click on an on one of the tabs it's gonna add a class of show to the correct tab content now the first one we always want to show first so we can initialize it with the show class that makes sense and it will make sense more sense later now in here let's see we're gonna since we're adding a show class here the show is basically going to be display block right however we're going to be using the grid two for this to align this part of tab one tab content one in this part so we need a grid wrapper basically so I'm going to create another class of let's call this one what do we want to do let's do tab content or it'll just say tab one yeah tab one - content - inner alright actually I said tab content one it should be tab one - content this is important you'll see why later when it comes to the JavaScript okay so we have this inner this is gonna be the grid container and then we're gonna have two grid items one is gonna be this this part here the text in the button and one will be the image so within here let's do a div and we'll have our text so I'm gonna do a paragraph now I want this text to be quite large so I'm gonna have a class of text - LG and then in here I'm just gonna paste this text in you guys can copy it so it just says if you decide Netflix isn't for you no problem no commitment cancel online anytime and then under that paragraph within this div because this div is the first grid item we're gonna have a link with the class of BTN and let's do BTN - LG alright and then the text is gonna say watch free for 30-days so this div is the first grid item and then the next is just the image which is going to be in the image folder and it's gonna be tab content 1 dot PNG alright so if we save that and we go to our project it's gonna look like this because we haven't added any CSS so let's do that we'll just do one tab at a time so in our stylesheet let's go let's see let's go under the tab border and we have an ID of tab - one - content now there's not actually any styling I need to put on the ID I need to put it on the inner because remember that's where the grid is displayed is this right here so I'll just grab this class tab one content inner and we want to display elements inside of it as a grid let's add our grid template columns and I have a crap a crash course on the grid system if you're interested if this makes no sense so basically we just want to even columns so we're gonna say repeat twice one fraction and we'll add a grid gap give it a little spacing of two REM and then again align items Center and justify content center okay so if we save that and we take a look there we go let's see we haven't added the text styling so this is really really small and remember we gave it a class of text LG so I think that this is a good time to add our text utilities so let's go I'll go right under container and let's say text styles all right so we're gonna have a text - Excel which I don't I don't believe we even use this class in this project but again I like to build things to scale if we for some reason need to have really large text we can use it later so let's say font size let's do two R M and let's do margin bottom one alright I'm just gonna copy this and let's do text LG and LG is just gonna be a little smaller it's gonna be 1.8 and margin bottom one Ram while we're at it though let's add a text center in case we just want to simply add you know align it to the center so we'll do text align Center and I'm also going to have a text dark class that will just give it a color of triple nine which is just a light gray alright so we'll save that let's go back and now you can see we have the larger text now I do want this to be white right yeah so let's actually give the large text hmm actually yeah let's we'll just add the color white to these classes here oops all right there we go okay so that's pretty good we do need some padding though so tab yeah the tab one content oh you know what let's add padding to this class here tab content I should've did that first so let's go back up to write right above where we did the tab 1 stuff and we'll actually put a comment here cuz this is all the tab content stuff and let's say class tab content and let's do padding let's do 3 REM top and bottom and then the background should be black and yeah that's what we'll do is we'll make the color white here instead of doing it on the text classes like I just did I'm gonna get rid of that all right so let's check that out so now we have spacing here at the top and bottom all right good so that's our first tab now we have two more to do so the way that I'm gonna do this since we don't have the Java Script to implement it is I'm just going to comment out for now tab content 1 which ends here okay so I'll just temporarily comment that out and let's add our tab to content which actually has a lot more markup because we have those three areas with the images so let's I guess we could I'll just I'll just type it out so let's do an ID of tab 2 content I'm gonna have a class of tab content item and in here we're gonna have basically two sections let me just show you so if we go to the actual Netflix site we have this top area and then we have the bottom so we're gonna have tab to content top tab to content bottom and we're gonna use the grid and both areas so let's first do a class of tab to content top and in here we're gonna have a paragraph we're going to use our text - LG class and I'm just going to grab the text real quick okay and then underneath that paragraph we're going to have a link with the class of BTN and we're gonna use BTN LG here a large button okay and for the text we're gonna say watch free for 30-days so that's the tab to content top now we need the bottom so directly under that let's do class tab - content bottom and this is gonna be a grid as well with three items so we're actually gonna do three divs so this is the first one and each div is gonna have an image and two paragraphs so if we look at this the Netflix site we have the image and then this will be a paragraph and then this will be a paragraph I believe yes okay so let's do image and the first image is going to be it's gonna be this tab content two one PNG so that's the image then we'll have a paragraph here and we'll say watch on your TV and then I'll have a paragraph this is kind of long so I'm gonna paste this in and this one I want to have that remember we have that text dark class I'm gonna add that here so that this this one is white and this one is dark all right so if we take a look at what this looks like now you can see it doesn't look very good but we'll fix that so that's the first grid item what I'll do now is just copy this div okay that's the first grid item let's paste in this change the image to 2-2 the heading here I'm just gonna grab real quick and text okay so and then again oops just copy that all right so this is gonna be - three image and it'll say use any computer and watch right on Netflix calm alright so those are that's that's it for a tab two content as far as the HTML now it doesn't look very good so we're gonna go ahead and style it so let's jump into our CSS and go under the tab one content so right here and we want to first target the content top so we have ID tab two content and then a class of tab two content top okay and we want to display as a grid and let's do grid template columns now the part that I that I'm styling right now if we look on Netflix is this top part and I don't want even columns here this the text should be longer than the area with the button so what we'll do is we'll say for the template columns let's do two fr for the first and then one fr for where the button is alright we'll add a grid gap of one rim and justify content to the center and align items to the center so let's take a look at ours which is right here and that looks pretty good so that's the top now we want to do this part at the bottom which is the three images which we want to look like that so let's you know what we'll just copy this whole thing we just did and then change this to bottom and we're gonna display grid I do want to add a margin top just to move it down a little but we want display grid however we have three even columns so we want to do repeat let's say repeat three times one fr and grid Gap I'm gonna do two REM just separate it a little bit more and let's do a text align to the center all right let's take a look so there we go so that little bit of styling me to look a hell of a lot better this text right here I do want to be bigger but not as big as our text large or text extra large so let's actually create a text let's do it text medium so in our HTML let's go to these sections here so right here watching your TV will do class text MD okay we want it here and here all right we'll just add that down here to our text classes I'll just copy this for the text MD let's do 1.5 REM so let's see what that looks like excuse me why is that not working oh I didn't change that all right so that looks pretty good so that's tab content - or I should say tab - content so now we want to do tab 3 content which is the table so table suck I always hate doing tables but I'll probably paste in some of it just because there's a lot of markup when you when you create a table so let's go back to index.html and now let's comment out tab 2 content which ends here so we're just gonna comment that out and I meant to put a comment here that says tab 2 content and then directly under it will say tab 3 alright so for tab 3 same idea we're gonna do an ID tab - 3 - content and also a class of tab content item okay and this is gonna be let's see we're gonna have above the table let's go to the Netflix site above the table we're gonna have this right here however I'm not going to align it like this I'm just gonna have them on top of each other just to save a little time so let's have our class of text Center and then we're gonna do a paragraph with the class of text LG which is our large text it will say choose one plan and watch everything on Netflix and then below that we're gonna have an a tag with BTN and BTN LG okay and this text is going to say same thing as all the other buttons watch free for 30-days alright so if we take a look at that whereas ours so that's ours right here so now we're gonna create the table so let's go directly under where we did the text center and let's create our table so I'm gonna give this class or give us a class of table because I don't like styling elements directly you know unless it's gonna be a base style so we'll have a tea head which is the table head whoops tea head and table row so since these are headings we want to use th tags the first one is gonna be empty and then we want our plans so we have basic we have standard and Premium okay so that's the tea head and then we're gonna have the tea body now I'm gonna just kind of pace these in these rows one by one and you can copy them and of course you can get it from the description link in the description so this just you know monthly price whatever and then the price is here so let me grab next row so these are just features HD available and then we're just using font awesome either a check mark or a x which is the x mark for each one so we have HD available we have Ultra HD available we just grab the rest of these all right so let's go back up here Ultra HD available and then we have screens you can watch on the same time one two for watching your laptop so on unlimited movies and then these are all checks cancel anytime first month free so that's our table so let's save that and if we take a look it looks absolutely horrible so we're gonna go ahead and style this so let's jump into our CSS and go let's go underneath I'll go right here and dial our table so the table itself let's do a width of 100% and let's move it down so margin top to REM and I think that's all we need for the table itself now for the table head so if we do class table T head and then th we want those to be upper case this is the plans so text transform upper case and then let's add some padding so padding is gonna be 0.8 mm okay so if we look you can see that these are now upper case these plans right here so let's see let's do basically the table these T DS here all these so we'll say table and T body and then TR TD so I'm gonna change the color to be a little darker the text color and then add some padding so 0.8 REM and let's do 1.2 REM and I want to line everything to the center okay so if we save that and take a look okay now the issue here is I don't want I want all this stuff centered but not this if we look at you know over here same thing you see how this is all centered but this is not so what I'll do is I'll use a pseudo class of first child so we'll basically grab the first TD so what we can do is copy this because this grabs all of them but we we just want the first so we can you do : first child and then we'll just say text a line to the left so now if we look all this is not centered but all this stuff is alright now we also want every other one to have this gray color so we can use another pseudo selector called enth child and we can do odd we can do even or odd along with many other things and if you're in more interested in this stuff you can check out my you know my course my modern HTML and CSS from the beginning but let's go ahead and let's grab we just want the TR which is the whole row rather than just the column and we're gonna say nth child we want all the odds and we want to add a background of two to two all right so let's save that and go back alright so this looks good but I don't want these see these lines these spaces here so what we can do is go back into where we styled the table and let's just add here a border border collapse and set that to collapse and then I'm gonna set border spacing to zero so now you don't have that that division it's just all one row alright cool so that's all set now the last thing the last element is the HTML I'm sorry the last element in the HTML is the footer or the last part so let's go under the section here and we're gonna go ahead and put a footer semantic tag here and give it a class of footer as well okay now the footer is pretty simple we're gonna have a paragraph here that just says you know questions call I'm just gonna grab this real quick so questions and then we're just gonna have a div with the class of footer - calls that are just gonna have a bunch of you ELLs bunch of unordered list with links so I'm gonna grab those real quick there's gonna be four of them so ul and then each one you know we have faq Investor Relations ways to watch so if you want to just if you want to grab this from the code in the description or copy it whatever you want to do is fine all right so let's save that now if we look at what that looks like it doesn't look very well so we need to fix this so let's go to our CSS and let's go under the table save footer so class footer I'm gonna set a max width here I didn't use a container because I want the footer is gonna be a little wider than the container so let's do a max width of 75% let's do margin do one REM top and bottom and then auto on the left and right so it's in the middle and then overflow will do Auto okay and then the text both links and text I'm gonna style so I'm going to say footer and footer links I want the color to be a little darker and I want the font size to be a little smaller so we're gonna do 0.9 room all right and then the paragraph the questions in the phone number basically let's just add a margin bottom to that of 1.5 REM okay so if we look at it now you can see that it's now inside of a container it's a little wider than the rest so now this these you ELLs remember these are in a div called footer calls and that footer calls I want to display as a grid so we can display the UL is across in columns so let's grab footer for the calls and it's to display grid and grid templates columns we're gonna repeat four times one fraction and let's add a grid gap of two R M okay and then I just want to add a line height on the on the list items because they're gonna be too close together so foot our ally let's do a line height of 1.9 and there we go all right so we're pretty much all set as far as the CSS aside from the responsiveness is a few things we need to do because right now I mean it's not too bad but we want to change some things here so we're gonna add a couple media queries so I'm gonna go down in the CSS to the very bottom and we're gonna have one media query for 960 pixels or less and then one for 700 pixels or less so let's do at media and we'll say for max with 960 pixels first thing I'm gonna do is make the showcase the height of the showcase normally is what 93 viewport height so I'm going to change it to 70 I'm gonna push it up a little bit okay and then remember we have that high - sm where our icons are and there's some text the text I don't want that to display so I'm gonna say display:none so if I save that and you see this text right here when I make it 960 or less you see that the text goes away also this go this gets higher because it goes from 93 viewport heights to 70 okay another thing I want to do is the the logo the image here I want this to move over to the side so let's do showcase top image we're gonna say from the top 30% and from the left 5% and then I'm gonna set the transform translate to zero so now if we go back now it's over to the side let's see this the h1 we want all this stuff smaller basically so let's do that let's say showcase content h1 let's set the font size think it's 5.2 by default we're gonna do three point seven and change the line height to just one alright and then the paragraph showcase content paragraph let's change the font size to 1.5 REM and save okay so looks pretty good the button is too big so let's say for our button XL let's do font size 1.5 REM will lessen the padding a little bit so one point four and two actually yeah I think that should be good let's try that alright so now it's a little small or good also the text sizes I want to be a little smaller so let's grab text XL and we'll make that 1.5 and we'll take LG and let's make that one point three and then MD let's make that just one one rep okay and then the excuse me the footers so the footer I actually want this to be just two columns instead of four so what we can do is take the footer X let's put this above the utility stuff so footer calls it's already displayed grid we just want to change the grid template columns to repeat instead of four we're gonna do two 1fr which will do two columns but in two rows so if we go isn't that working for the calls or I think I have to add footer since I did that up above - there we go so now you can see that it's in two columns instead of four so break points right there alright so now I mean things look pretty good here or where is it here but if we go to I mean we can't see the rest so all we can see is the table here so I'm gonna uncomment this stuff so tab two and tab one so we'll be able to see them all at the same time for now but it won't be for long basically once we get to 700 which is like around here I want these to stack all right so let's let's do that let's create one more media query for 700 pixels so max width is gonna be 700 pixels and let's see so we have tab 1 content tab - 1 content and we want the inner because remember tab 1 content enter the class is the grid that's what we put the grid on so we just want to say grid template areas I'm sorry grid template columns we just want to set to 1fr which will just stack everything and then let's text a line to the center all right and that should do it so if I save that we take a look now I know it's kind of hard to tell what we're looking at cuz it's all we have everything showing it once we're looking at this right here this section so instead of being side by side like it is here now it's stacked all right now we want to work on tab 2 which is this right here and we want that to be stacked I remember there's top so tab to content top and tap to content bottom so let's add those in actually you know what I'll just pay season cuz we look this is last in this video was lasting a long time so I'll just go over it so tab to content top we're displaying block instead of a grid now and just centering it okay the bottom we actually don't need all this stuff we just want to do one fr which will stack everything so now you can see everything is nice and stacked good now for the utilities I think the only thing I want is the extra extra large button actually know that we should be okay we should be alright but the the inset shadow here see how dark it is like it looks good here but as it gets smaller really small the I think we should change the the inset shadow to not be so deep so what I'll do is grab let's just put in here showcase after because that's where we have the shadow let's copy from way up here the background in the Box shadow and put that in here and what I'll do actually we don't need this if you want to make it lighter you can you can make that less but I just want to change the box shadow to be instead of 120 let's take both of these and make them 80 so 80 and then this one's negative 80 this one here you know what let's just make this all 80 so yeah we'll just do 80 and then negative 80 so now if we go back now we have less of a shadow on smaller screens all right so I think our CSS our HTML and CSS is all set this looks really weird because all of this is showing but now we're gonna add our JavaScript to prevent this from happening and add the tab functionality here alright so let's go to our Jay s main Jay s and there's a lot of different ways you can do this this is just a pretty easy way that that I decided to do this so that people could understand it that aren't you know JavaScript gurus so I'm basically gonna grab all the tab items and all the tab content items from the Dom so let's say tab items and what I mean by tab items is you know the icons that you click on so we're gonna document dot now there's more than one so we're gonna do query selector all and we want to grab the class of tab - item and if we look in our HTML it's these okay each of these has a class of tab item so that'll grab all of those and that'll put it into what's called a node list which is similar to an array so basically we have to loop through it and do what we want to do now the tab content item I'm just gonna copy that down and call this tab content items we want to do query selector all and we want all the tab - content - item classes which if we look in our HTML is each one these okay so each tab content so those of what I want to grab from the Dom now we need an event listener for when we click on a tab item now since this is like I said a node list it's like an array we're gonna loop through it so let's say tab items and I'm gonna use a for each year so for each item I'm going to actually don't even need curly braces I'm just gonna take that item and add an event listener I'm gonna listen for a click and when it's clicked I'm gonna call a function called select item alright so I'll just put a comment here we'll just say listen or tab click and then we're gonna create a function let's put a comment here we'll just say that this will select tab content item so add a function here of select item takes in an event parameter okay now we're gonna start off with just the border changing the border now I can simply add the border say add border to current tab and we can do that by taking this since we used a function here so we're clicking we get we have this function we can access whatever the particular item were clicking with this and we can add a class by using the class list dot add method and we want to add tab - border alright now if I save this and I go back and I click this ok nothing's happening oh did you know what I don't think I included that I didn't include the JavaScript file so down at the bottom right above the body let's do script script source je s main je s alright so now let's go back and if I click this we get the border but the problem is the border stays on the other ones as well so what I'm gonna do is I'm gonna call a function here called remove border that will remove the borders from all of the items before this happens and then I'll create that function so remove border and what I'm gonna do is loop through the tab items again so I'll do a for each and I'll say for each item I'm gonna go ahead and take that item and take class list and remove tab border okay so if I save that and now I go back and I click that you can see what happens is it removes it from any other removes it from all of them but then it puts it on the one I click ok so simple way to to get that functionality all right now we have that done the next thing we need to do is initially hide all of our tab content items okay so these right here we want to hide all these by default and we're going to do that within the CSS so let's go in our style CSS and go up to the area where we have or we're dealing with these content items so right here we'll go right under tab content let's say hide contents initially so I'm going to grab the ID of tab 1 content and I'll just copy this down we want all three of them so 2 3 and let's set this to display:none so now if I go back you can see that there's there's none showing now we want to show the correct one when we click on the correct tab right so what I'll do actually we need to add our show class as well so right under that in the CSS we're just gonna have a class of show and instead of displaying none it's gonna go to display block and I'm just gonna put an important here so that it always works so that it takes precedence okay and the idea is to just get this show class onto the correct content now if you remember if we look at the first tab content right here we added the class show so that should actually show right now if I go back which it does but we want to be able to switch to different tab contents so to do that let's go back to our JavaScript and just like we removed the border from the rest we want to remove the show class from all of them first otherwise it's just going to add the show class to all of them and they're all going to show as we click so it's gonna be very similar to remove border except I'm gonna call it remove show and again we're instead of going through the tab items are going through the content items and for each one we want to remove the class of show all right and then we want to call that right here remove show and then down here we need to grab content item from the Dom now I'm gonna use a little trickery here to select what I need when we click on an item we can get its ID right in fact let me just show you if I console.log I can say this dot ID and I'm gonna go back here and open up my console and if I click one of these you'll see I get tab two I click that I get to AB three tab one of the the content it's tab one content tab two content tab three so I'm going to dynamically select those in the way that I'm going to do that is by creating a variable here called tab content item always do that with OHS for some reason I don't know why but I'm gonna set this to document dot query selector or I could use get element by ID what it doesn't really matter and then I'm gonna use back ticks in here because this is gonna be dynamic I'm gonna select the ID and then I needed my this dot ID variable so I'm gonna use my template literal syntax here to get the ID now remember this is going to be tab - 1 or tab - 2 or tab - 3 and the item that I want to target is going to be tab - 1 - content so I'm simply gonna put in - content that way it grabs the correct one alright then we just need to add the show class to that specific one so we can then say tab content item class list dot add and we want to add show all right so let's try it out so it's gonna show this one initially because it already has the class of show we added that in the HTML let's click this one and there we go it what it does is it hides or it takes away the show class from everything and then it targets whatever because this is tab one I'm sorry tab two as an ID it's gonna then show tab two content I'm gonna hit this one which has an ID of tab three and it's gonna show tab three content okay this one is tab one content so now we can just go to each one okay and then like I said there's a million different ways to do this I thought that this was a pretty easy way to to make this happen and I didn't want to use jQuery or anything like that either but yeah that's that's pretty much it guys one thing I forgot to do is the icon here remember we gave it a class of BTN icon it's because I wanted to move it over a bit if we look at the Netflix site you can see it's over quite a bit so let's go let's add that real quick I'm just gonna put it with our utility classes our button utility classes chai right here so we'll just say BTN icon and let's do margin left one room okay so that pushed it over a little bit so that's it guys congratulations if you went through this whole video and completed it I know it was a long one but that's it if you like this please leave a like please share if you can become a patron patron for $1 per month that would be fantastic YouTube ad revenue isn't isn't doing too well and I really love providing free content for you guys so if that's something you're interested in there's always a link in the description so thanks thanks for watching and I will see you next time

Channel: Traversy Media

Views: 392,196

Keywords: html, css, js, javascript, build a website, css grid

Id: P7t13SGytRk

Length: 92min 19sec (5539 seconds)

Published: Tue May 21 2019