HDTutorial
EN
How To Design A YouTube Clone With HTML/CSS

Playback starts YouTube’s embedded player (privacy-enhanced mode).

How To Design A YouTube Clone With HTML/CSS

149,635 views October 12, 2020 36:12

Watch on YouTube
ChannelWeb Dev Simplified

Chapters

Description from the creator

🚨 IMPORTANT:

Free CSS Selector Cheat Sheet: webdevsimplified.com/specificity-cheat-sheet.ht…
Learn CSS Today Course: courses.webdevsimplified.com/learn-css-today

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:

GitHub Code: github.com/WebDevSimplified/YouTube-Design-Clone
Icons: material.io/resources/icons
attr Blog Article: blog.webdevsimplified.com/2019-10/use-data-attr…
Emmet Tutorial: youtu.be/V8vizNQKtx0

🧠 Concepts Covered:

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


🌎 Find Me Here:

My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: patreon.com/WebDevSimplified
Twitter: twitter.com/DevSimplified
Discord: discord.gg/7StTjnR
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified


⏱️ 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

About this tutorial

Web Dev Simplified published this 36:12 video tutorial on October 12, 2020. It has been watched 149,635 times on YouTube.

Category
Education
Duration
36:12
Published
October 12, 2020
Views
149,635
Likes
4,152

Share

This tutorial in other languages