Creating a Netflix clone using HTML and CSS

#webdev #beginners #programming #css

Just from the heading, I know you are pumped. Yes! Today we would be creating the Netflix clone just using HTML and CSS.
This should be the end result.

You ready? Then let’s get started.
First off we start with creating our folder, after creating our folder we open it in our IDE in my case I’m using VSCode.

As you can see in the picture above, I’ve created my index.html and my style.css. You should do same.
Once you have done it, you type in exclamation mark and press enter it will be auto-completed because of the emmet abbreviation. Once you have done that, you should see this

In mine, I’ve already linked my CSS to my html. You should do same. Having done that, let’s start coding.
Before we start, let’s create a folder where we can store our images. To get the images so that you can follow along here’s the github link(https://github.com/Reyghosa/Netflix-Clone.git). You can find the images used there.
First off, we start by targeting our universal class in CSS using asterisk(*). We give it the following styling



  padding: 0;
  margin: 0;
  box-sizing: border-box;

This is how it should look

Having done that, the next thing we need is our background image. You target your body in style.css and use a background with an image as its value.



body{
    background: url('/Images/background.jpg');
}

Now when you open up your page on Liveserver it should look like this

We create a div with the class of Container because this is the div that would contain everything. Inside our container div we create another div with a class of header. This div would contain our Netflix Logo and a button with the value of Login. Something like this

If you have followed along correctly until now then your webpage should look something like this

Now let’s style it. We start off by styling our container div first. Give it a height and width of 100view-port height and 100view-port width respectively. In the body we add a position of absolute while we add a position of relative to our container div and a background-color of rgba(0, 0, 0 0.5). Check the Image below

We are doing this because we are trying to make an overlay on the background to give it a kind of dark view.
If you have done it correctly your site should look like this

As you can see in the snippet above we have a scroll which we don’t want. So to take care of that we simply add this line of code



body::-webkit-scrollbar{
display: none;
}

This line should take care of that. Now we can focus on styling our logo and login button.
We give our header the following styling. Check image below.

Now we move on to style our login button. We add a class of login-btn to our login button then we can target it to style it.

This is how your site should look like now

Now we are done with styling our header it’s time to go to the text.
To do that, create a div with a class of text-container let it be nested inside the div with the class of container but outside the div with the class of header. Create an h1, h4 and h5 tag with the text. Check Image below

As you can see in the image above, I also created another div that contains our Input and get started button. Now let’s get started with styling.
First off, we style our div with the class of text-container because it contains our texts. We give our text-container a color of white so that the text can be visible and also add the following styles. Check Image below

As you can see in mine, I gave it a gap of 1rem this is because I want to separate each header tag from the other.
After styling the text-container div we move on to target each header tag and style them by giving it different font-sizes. Check Image below

As you can see our h1 tag is having a line-height this is to put some line spacing in between the h1 text.
Our Netflix Clone is taking shape already. Hope your text section looks like this too.

After that we create a div with the class of form this div is not placed inside the text-container div but outside it. Take note the div should be contained in the container div just like this. Check Image below

As you can see, an input tag has been created with a type of email and a placeholder. Any value you give the placeholder is what would appear inside the input box. Inside that div a get started button was also created and outside the div a login button was created. You can go back and check very well so as not to get confused or mix it up. That’s all for the HTML and as you can see we used not more than 30 lines or at least I did.
Now let’s get straight to styling it. Don’t worry we are almost done and if you have made it this far then kudos to you. Let’s get to styling. First we would style the div with the class of form that contains the input and the get started button. Check Image below

It’s just a simple styling but notice we gave it a margin-left. Right now, it might not look like much but later on you would see why we did so. After styling our form, let’s move to our input.

Let me explain what the input:focus is for. If you notice without the input:focus if you enter the input field there is a black border around it and we don’t want that so that’s why we use the input:focus and give it an outline of none.
Just few steps more techies and our Netflix clone would be created. Let’s style our buttons.
We would start with our getstarted-btn and we would give it the following styles. Check Image below

Now when you open it on your Liveserver. It should like this. Check Image below

Now without the margin-left in our form container our input field and get started button would not have been positioned well to how we really want it to be.
Now to the last part.
Styling our downlogin-btn. It’s very easy all you need to do is to copy and paste the login button styles. We should have named it same classes but we didn’t because we need to add two extra lines of code to our downlogin-btn to make it look good and position it to where it ought to be Just add these two lines of code.



 margin-left: 850px;
 margin-top: 20px;

And with that we have created our Netflix clone which should come out looking like this.

Well-done we just created a Netflix-clone using HTML and CSS.
You can follow me for more insights on Front-end development. If you have any questions You can ask in the comment section and I will be sure to leave a reply. Don’t forget to leave a like If you found this useful you can also share for others to benefit. Do make sure you follow me for more.