Thread by @codingnninja

If you have been struggling to build a real website with HTML & CSS, you're so lucky.

I am here to reduce that struggle by teaching you step by step.

Today...we will start with:

How to make YouTube clone step by step with HTML & CSS. Fast. Easy and Free.

Let's get started:

Please wait, if you're a beginner and you don't know how to operate a computer properly...

Watch the video below first: 👇



Now, let's continue.

The first thing to think about while building a website is to break it down into smaller pieces like 👇

In this YouTube clone, the website has about 6 units

✔️ Header
✔️ Main

✔️ Header: header is divided into three (3 column layout).

◽left-content
left-contains menu & logo

◽center-content
center-content contains search-box with two icons

◽right-content
it contains some navigation icons

✔️ Main is divided into 2 sections ( sidebar & content). That is two column layout.

In short, we have:

✔️ Header
✔️ Main
✔️ Sidebar
✔️ Navigation link
✔️ Navigation icon
✔️ Video card

You should have noticed one thing.

Looking at the YouTube clone above, I don't know what you see

l only see six things I said above and some of them are only repeated

◽ Navigation icon is a thing which copied and pasted, then edited to create other icons.

◽ Navigation links in the side bar is just a thing.

We copied and pasted and edited it to create others.

◽The video card is one but copied and pasted and edited to create others

or it is just repeated with different information.

Yeah...that is doing what every developer does. Copying and pasting like a PRO😆.

Today, not to overwhelm you, we will only create the layout for this YouTube clone.

If you remove everything in the header, sidebar and content; you have the layout below. 👇

Yeah...that is what we're going to create today. I show you how to make a two-column layout.

How are you going to do that?

Just say, "Ayamatanga" 🤪 and everything will be created auto-magically.

Oh, sorry: Let's get started.

If you want an article, read it here: youtoocancode.hashnode.dev/how-to-create-…

Or continue reading.

We need to first create the basic HTML structure of our website as in below image:

If you don't understand, what is in the image, please watch this 👇

That will not show anything by the time you put it in your browser.

No let's style it with CSS to have YouTube's two-column layout.

Step 1: import a font-family

The first thing is to make a font-family called Roboto available on our website

by using the @ import to it .

In short, the link in the image only import a font called Roboto to our web page.

Step 2: remove preset margin, padding and reset box-sizing.

Normally, some tags tend to have preset styles that may not be suitable for what we want...

Then we reset them to what we want.

We want all tags on our page to have zero margin & padding.

And we want width or height, border, margin and padding to be sum up to be the total length.

This is what I meant...in css.

If a box has width of 100px and padding of 10px, the width of the box will now be 110px

but will don't want that, we want everything to 100px.

So by setting box-sizing to border-box, we tell the browser.

See, "I don't know how you will do it, whether you use 🔥or not; I don't know,

all know is subtract padding, margin or border from the width or height."

For example, if width is 100px and margin is 10px; year, width

Width will still be 100px including the margin of 10px instead of making it 110px.

That is what box-sizing: border-box does.

Note: when you're using it, you will understand better but that gives an insight a beginner can quickly relate with.

Step 3: We setting font

We set the font-family of the body tag to Roboto.

But as we always expect unexpected.

Roboto may not be available

so we set a fall back font-family as "sans-serif"

I don't want to go deep into font and typography. I am a novice in that area, trust me

Step 4: styling the header

We select (connect to) the header section of the web page with

Its class name .header and we set its display property to flex.

What does that mean, it creates a layout out of the header. That is means, we tell the browser it the header has divisions.

justify-content: is used to put an equal space between/among the children of the header tag and

we will create a three column layout out of it by adding three sections to it later.

align-item: center moves the children of header to center-left of your screen.

A computer screen has left-top, center-top, right-top, center-left, center-center, center-right, bottom-left, bottom-center and bottom-right.

I explained this graphically in my Udemy course, I am still giving free access...DM me if you want before tomorrow.

I will not explain height.. because most people know what it means

And I will explain padding later in a separate tweet.

Step 5: Style the main

We set the `height` of the main section to `calc( 100vh - 70px`)...What does it mean?

h= height
V = viewport
viewport is the part of a web page you can see on a browser without scrolling.

A value of 1vh is equal to 1% of the viewport height.

And we use calc function to calculate a subtraction of 70px from 100vh.

display:flex as I have said before means we make a layout out of the main section.

background-color: #f9f9f9 adds a background color of something somewhat ash or silver to main

Step 6: styling the sidebar

We select (connect to) to the sidebar of the page with its class name (side-bar).

Note: the dot in .side-bar shows we're selecting a class.

We set it height to 100% of the height of its parent, that is, it is as tall has its parent 🤪.

We set its width to 17% of the width of its parent.

Hey! What is overflow-y:hidden? Your cup overflows 🤪.

Let me explain...when twitter displays 10 tweets at a time, you can't see everything at a time, right?

You have to scroll to see the rest.We hide the scroll bar instead

If you reduce the size of you browser to like mobile, the layout will not be okay

So, we hide the side-bar when the screen of our device is less or equal to 768px.

That will hide the sidebar on mobile and some tablets. That is call responsive design.

We're done! Please retweet