How To Design A YouTube Clone With HTML/CSS

How To Design A YouTube Clone With HTML/CSS

🚨 IMPORTANT:

Free CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html
Learn CSS Today Course: https://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: https://github.com/WebDevSimplified/YouTube-Design-Clone
Icons: https://material.io/resources/icons
attr Blog Article: https://blog.webdevsimplified.com/2019-10/use-data-attributes-in-css
Emmet Tutorial: https://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: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://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

Powered by WPeMatico

About Guaripete Solutions

Guaripete Solutions SEO Agency in Charlotte North Carolina, with personalized SEO Consulting Services, Small and Medium Business Social Media Marketing Services, and Website Builder Experts oriented to our Customers.