How To Design A YouTube Clone With HTML/CSS

🚨 IMPORTANT:

One of the best ways to improve your CSS skills is to clone existing websites. In this video I will be cloning the YouTube home page with just HTML and CSS. This clone is not 100% exactly like the YouTube homepage, but it is 95% the same which is good enough when you are creating a clone with the sole purpose of learning.

📚 Materials/References:

🧠 Concepts Covered:

- How to use CSS grid
- How to use flexbox
- How to get high quality icons for free

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:40 - Demo
01:28 - Video Section HTML
06:26 - Videos Section CSS
20:43 - Categories Section HTML
22:40 - Categories Section CSS
26:40 - Header Section HTML
30:51 - Header Section CSS
36:01 - Outro

#CSS #WDS #YouTubeClone

[japroz]

Seriously man. I will go into a comma. Stop creating these amazing tutorials.😂😂😂great job

[johnnamtae]

Not sure if this was mentioned in the video but for the nav pills, you guys can go ahead and add a style "overflow: scroll" attribute to the surrounding element so you can scroll.

[swallowedinthesea]

I tried cloning Steam once! It was a very enlightening experience!

[nwangasam]

At the end of watching this video, I had cloned YouTube.

SASS/SCSS has been saving lives.
I definitly learnt new stuff.

[Programmerevangadi]

I believe you're the one who developed the front-end page. Your skills are truly impressive, and you're an active developer!

[nsharma]

I learnt so many new things, like using unsplash better, that cool loading grey background trick, and white-space: nowrap! Thanks Kyle, for making learning CSS so easy and fun 😄

[AnirudhIsOnline]

The clone version of YouTube turned very similar to the original. Great tutorial 👍

[ntnurobert]

Saw your video and clicked on it immediately. Feels special to be the first one to view your video and give it a thumbs up!

[noahg]

with this rate kyle is going to invent another internet, nice video dude.

[gleisonsubzeroKZ]

just one little advice, if you type just "df" + tab emmet will automatically put display flex on css files.

[pgmattic]

Awesome tutorial. Did not know I could design a YouTube clone with just HTML and CSS

[bunnybloods]

Back to Home(from react to html) feels awesome.Thanks

[Gerry]

This was great! I know nothing about html and CSS yet (working on that starting tomorrow) but I understood a good part of what you were doing thanks to your explanation. You're a great teacher!

[themoroccanpianist]

man, you are awesome and effective ; I hope you are getting paid by youtube for these tutorials because you deserve it man ! keep up the good work !

[thedeveloper]

i'm a beginner and i learned tons with this video! thank you so much! much respect from korea for uploading a great video

[progettofuturo]

The comment section of this channel is wonderful. This stuff is so easy xD

[zakidzz]

create more of this clones like instagram facebook ....

[FarRow]

Because of you I’m lunching my own YouTube type website thanks man👍

[anujsawant]

Kyle!
You are so much creative!
I am glad that you are making such awesome progress.
You are more knowledgeable than my IT teacher.
Keep it up, buddy.
God bless you.

[shubhamujjwal]

Thanks Kyle. It brings back the lost confidence when I do something like this. 🥳🥳