How to Build Responsive Netflix Clone using HTML and CSS - Beginners Tutorial

hey everyone this is gowdar from future quartus in this video we are going to be building this netflix clone using just html and css so let's have a look at it as you can see this looks exactly like the netflix right so this is what we will be building we will also be implementing this smooth hor functionality as you can see over here and we will also be implementing this small scroll functionality as you can see over here we will be building this banner section with these buttons we will be building these various sections documentaries horror movies action movies these are all scrollable as you can see and you might have already observed the navigation bar observe when i scroll down as you can see it's turned to black right as you can see okay guys this is what we will be building in this video guys one more thing this build is going to be completely responsive so let me show you so guys this is what it will look like in the table sorry in the laptop screen laptop screens and when i switch to tablet screens as you can see it's completely responsive okay when i switch to mobile last screen as you can see it's responsive guys so guys this is what we will be building in this video using just html and css if you haven't subscribed to our channel please make sure you subscribe to our channel for more videos like these previously we also built youtube clone linkedin clone gmail clone google clone facebook loan tick tock loan real clone instagram wheels clone actually so guys we actually built these using just html and css so please make sure you watch those videos also to make sure you improve your html and css skills so let's get started building this netflix clone now inside of our visual studio code let's import the folder i have already created a folder for this project so i will be just importing that folder and also attached to this video in the description of this video you will also find this images folder these are all the images that we will be using in this project so make sure you get those you will get these in the description of this video okay now let's create the files before that please make sure you install some of these extensions which i show you the first one is going to be this live server make sure you install this and also one more is going to be prettier this is used to format the code please make sure you install these two extensions which are going to help us a lot so back to our project let's create the files not inside of our images folder let's create index.html and styles.css this is what we need guys okay index.html and style.css so let's generate some boilerplate by pressing exclamatory and pressing enter i'm gonna name the title as netflix clone okay now right click before that let's also link the css file which we have here link and style.css okay now right click and open with live server remember the acting extension that we installed just now live server this is going to allow us to do that right click and open with live server this is going to open our project on in the live server there we have it okay we are start as you can see we are starting from the scratch a complete blank screen okay now let's start by building the movies section right as you can see in the as you might already seen in the final version that there was a netflix originals section right so let's start by building that we are going to have a due with the class name of row here inside of the row we are going to have some images right the first before that we are going to have an s2 saying netflix originals okay now let's save and check as you can see there we have netflix originals okay uh right after that we are gonna have those bunch of those movie posters right so let's define those i'm gonna define a separate container for that which are gonna have which is gonna have all those images i'm gonna name it as row posters okay instead of this instead of this division we are gonna have all of those movies so here i'm going to define img tag with the class name of row underscore row poster and we are also going to have another class row post sorry row poster large as you might have already observed that in the final build we saw in the beginning the netflix originals uh posters were actually bigger right so this is why i will be providing a separate class for them so here the source is going to be in the images folder and i'm going to select the large movie one so let's save and check now okay there we have our images similarly like that i'm gonna just copy paste this eight more times okay let now i have to change the movie posters okay now let's save and check okay there we have all our images loaded right so here uh let me check this class okay row poster and we have a row posted large that's it guys for readability i'm just gonna add some comments over here by saying this is where netflix originals content is here okay let's turn that into comment that's it okay now right after the netflix originals we also had so many uh categories right the trending note operated action movies comedy movies so let's also define those for time being i'm just gonna minimize this okay not minimize i'm just gonna copy this that's a very simple to save some time i'm just gonna copy this i'm gonna add i'm just i'm just minimizing it for readability okay okay here i'm gonna define one more comment uh this is going to be for the trending now right trending now let's turn that into comment i'm just gonna paste it over here okay this s2 is going to say trending now right let's define that trending now okay now this is not gonna have this poster large class name so let's remove that i'm just going to remove all of these classes okay and also let's also change these images this is they are not going to be large movie they are going to be small movies small movie posters okay small movie one i'm just gonna copy this guys i'm just copy pasting nothing more than that because the same code is used everywhere we will take care of this in the styling okay now let's also change these numbers okay now we have our trending section let me show you what okay the this is this doesn't look right good now okay let's continue adding some adding our html right so now we have the trending section the the next one is going to be the top rated section right so i'm just gonna copy this not this this comment over here and this is going to be top rated okay i'm just gonna copy this and paste it over here and now this is gonna say to operate it okay okay now we have our top rated section okay to have few more movies i'm just gonna i'm just gonna copy this and paste it paste this few more times of course you can change these images as however you want for the time being to save some time i'm just using i'm just reusing these images okay okay now we have 16 in the netflix originals let's also have the same over here let's copy the copy paste these okay let's also [Music] copy paste these to save some time okay now that we have our top rated section now let's define the next section that's going to be action movies it's going to be action movies don't worry you will understand what we are doing in the styling section okay i'm just copy pasting okay okay this is now going to say action movies everything is gonna remain the same row poster this is your poster everything are gonna remain the same okay okay right after we have action movies we are gonna have comedy movies i'm just gonna copy paste this i'm also minimizing okay okay here it's gonna say okay sorry for this here i'm gonna say comedy movies and this is also going to say comedy movies okay now let's minimize this also now let's copy this we're gonna have a horror movies over here i'm just gonna change it to horror movies okay right after horror movies we are gonna have romance movies okay right after we have this romance movies we are gonna have documentaries this is going to be the final section right after after this we are gonna move to css okay i'm just gonna copy paste this documentaries okay now we have document these various sections okay these are all minimized so that we can read them make sure we read them easily okay now inside of our sites or css let's head over there here i'm gonna say target everything i'm gonna set the margin to zero and box sizing to border box okay now we are going to target the whole body and for the body i am going to set the font family to aerial helvetica sans serif and i am also going to change the background color to this gray sorry this blackish color let's check this out okay this is going to be this color okay now it's time to target the individual images which are having this class names row poster all of all of our images have this class so i'm just gonna target that to a poster for that i'm gonna say width to 100 percent and object fit contain max height is going to be 100 pixels and margin to the right 10 pixels and transition transform 450 ms so if i save that and check okay there we have all of our images as you can see over here don't worry we are gonna style this further okay right after we are done with row poster let's target the container having all of these images remember all of these sections have this row poster same class guys so let's target that and for that i'm going to set the display of flex overflow y to hidden and overplay overflow x to scroll and i'm also going to set the padding to 20 pixels okay there we have our netflix clone this is not done yet we are gonna style it further let's add the whole functionality to the images over here so that when we when i hover on the image we actually see something over i'm going to set the transform scale to 1.08 now if i save that and check as you can see now we have the whole functionality as you can see we have these ugly scroll bars right we don't want those right so what i'm gonna do is i'm just gonna paste some bunch of paste some snippet of code so that we can get rid of this scroll bars ugly looking solvers that's going to be this row poster webkit scroll bar and set it to display none if i save that and check as you can see the scroll bar is actually gone okay now right after we have done it let's target these as you can see these are actually we have become small right we want them bigger than these okay for that okay this whole functionality is working okay now for that remember guys we in the netflix originals we gave it a separate class right row poster large let's copy that to target and for that i'm gonna set the max height to 250 pixels sorry 250 pixels okay as you can see there we have our netflix original section they are much bigger than these sections okay and i also observed that this whole functionality is actually not smooth right so we need to actually fix that so inside of where we okay here i actually misspelled that should be transform okay now if i save that as you can see we have our smooth over functionality okay now let's also target the poster large for functionality where we have the poster large we need to also make sure we have different whole functionality to this one okay i'm just gonna say transform this one i'm just going to copy this transform scale to 1.09 so that it expands more okay that's looking great now let's target the whole row this one let's target that i'm going to set the color to white and margin to the left 20 pixels now if i save that okay there we have our netflix clone guys we are done with the movie section now it's time to build the banner section so let's head over there where we have the banner we are not that defined those yet so let's define those i'm just gonna over here inside of the body i'm just gonna add a comment saying header okay insider in in the header we are going to have a due with a class name of banner and inside of that i'm going to have a another container saying banner contents here over here i'm going to define an h1 saying i'm just gonna have a class name for that so that i can style it differently here i will say banner title and i'm gonna name the title as money heist this is a series name okay right after that we are gonna have a banner buttons i'm gonna define a button the class name of banner button this is going to say play i'm just gonna have one more button and this is gonna say my list okay over here we are gonna have a banner description banner description inside over here we are gonna have the movie plot so i'm just gonna copy paste this this is actually the plot of the money heist okay okay right after that okay that's it guys this for the banner now we need to style it let's see what we have over here as you can see this is what we actually have and we are going to convert it to banner okay let's do that let's target the whole banner this one i'm gonna set the background image to url and that's going to be inside the images folder this banner.jpg now let's save and check okay there we have our banner image ok now i am going to set the background size to cover and background position to center center i'm going to set the color to white object fit content and i'm gonna set the height to this 448 pixels now let's save and check this okay there we have our banner we further need to still style this so let's do that i'm gonna target this banner contents where we have this banner title these buttons and whole everything description everything i'm gonna target that banner content for that i'm going to set the margin to the left 30 pixels padding to the top 140 pixels and height to 190 pixels now let's save that and check okay that's looking nice now let's target the banner title for that i'm going to set the font size to three rems font weight to 800 and padding to the bottom 0.3 rms okay okay there we have our title now let's target the banner description this one i'm going to set the width to 45 rm line height to 1.3 and padding to the top i'm going to set the one rem and font size let's set it to 0.88 rms max width is going to be 360 pixels let's also set the height to 180 pixels okay now let's save that and check okay then we have our description okay now let's target those button right as you can see these are looking very ugly we need to fix that too so over here let's copy this class name to target banner button i'm going to set the cursor to pointer okay also to pointer color to white we are not going to have an outline so let's add it to none we are not going to have any border none font weight 700 and we are also going to have a border radius of 0.2 view width padding to the left let's add the padding to the left to two rem and padding right let's set it two rams okay i'm also going to set the margin to the left let's set it to okay not margin to the left let's actually set the margin to the right i'm gonna set it as one rem i'm gonna also gonna set the padding to the top point five rm padding bottom point fire arm background color rgba 51 51 let's let's say we have okay 51 and alpha value is going to be 0.5 now if i save the words that as you can see we have these nice looking buttons okay of course we need to add some more functionality so let's add that to this banner button let's add some more functionality to that i'm going to set the color to this blackish and background color background color is going to say this whitish okay now transition so that it happens very smoothly transition all 0.2 seconds okay now if i save that and check as you can see there we have our smooth for functionality and one more thing guys is going to be we are going to add a fog over here so that it looks very so that it looks nice so let's add that where we inside of our index.html we need to actually define one more do it's going to say banner fade bottom okay now let's target that and over here i'm gonna say um let's say banner okay banner fade bottom for that i'm gonna set the margin to the top to 145 pixels and height to 7.4 rms and i'm going to set the background image to linear gradient 180 degree and it's going to be transparent and it's going to have an rgb of value okay that should be a comma and it's going to have an rgba value of 37 37 okay one more 37 and the alpha value is going to be 0.61 okay 0.61 okay and we are gonna have this color it should be a comma okay now if i save that and check as you can see there we have our fog that's looking nice now okay guys we are done with the banner we are done with the movie section we are also added this function functionality okay now it's time to add the navigation bar right so to do that let's head over to our index.html i'm just going to minimize this banner section okay where we have the body right at the top we are gonna have a navigation bar for that i'm gonna define a division with the class name of now and it's gonna have an id of now okay inside here we're gonna have a two images one is going to be image with the class name of now logo and source is going to be images slash this netflix logo okay one more image is going to be this class name is going to be now avatar okay this image is going to be netflix avatar okay now let's save and check okay there we have our logo and this avatar we need to fix that so over here inside of our style.css let's target the nav logo first that's going to be this one now logo i'm gonna set the width to 80 pixels object fit contain now let's have a look okay we also need to target the nav avatar i'm going to set the width to 30 pixels and object fit content okay there we have our navigation bar we still need to fix it okay now let's target the whole now that's going to be this one with the class name let's target that i'm gonna set the position to fixed and i'm gonna set the top to zero and also gonna set the width to 100 and display of flex justify content to space between that should be space between i'm gonna add the padding of 20 pixels all around i'm also gonna define a jet index of one i'm gonna set the transition now this one transition timing function is in and transition all 2.5 seconds so that whenever we scroll we haven't added the that functionality yet so that whenever we add it happens smoothly so if i check that as you can see there we have our navigation bar of course when i scroll down nothing happens no this navigation bar doesn't uh doesn't have the background black back black so we need to actually add that for that i'm gonna define one more class over here so that when now so that we want the navigation bar to turn black right so i'm gonna set the background color over here background color to this gray blackish color we are going to add it using javascript so over here in the inside of our index.html right after this body tag ends we are going to define a script tag instead of here i'm gonna get the now by saying now we can get it by saying document dot get element by id remember we gave it an id so i'm just gonna grab it by using the id and for that i'm gonna set the window add event listener i'm gonna add an event listener to the window i'm gonna look for scroll and i am going to call this function so whenever if window dot scroll y let's crawl y is greater than or equals to 100 i don't want okay i want to add a class class list class name right we just defined it as in our style.css i'd want to add it so i'm just gonna say class list dot add this class name now black else i want to remove it so here i'm going to say class list dot remove now black so if i save that and check now if i scroll as you can see the navigation bar is turning black whenever i scroll so guys that's it guys for this build if you hope you guys enjoyed building this netflix clone we just built this with using just html and css so guys if you have if you enjoy this video please make sure you like make sure you like this video and don't forget to subscribe to my channel for more videos like this so i will see you in the next one you

Channel: Future Coders

Views: 10,032

Keywords: html, css, html and css, tutorial, learn html and css, learn html, How To Design netflix Clone With HTML/CSS, Let's Build a netflix Clone with REACT JS for Beginners, website html css, html5, html editor, w3schools html, codepen, w3schools, html tags, web development, html tutorial, netflix design clone, clone, netflix clone with html and css, build a netflixclone, netflix clone

Id: 9nywQdjKnJI

Length: 34min 51sec (2091 seconds)

Published: Tue Jun 01 2021