I created a fully functional YouTube homepage clone using just HTML and CSS! This project helped me improve my front-end development skills and understand how layout, responsiveness, and design come together. If you’re learning web development or want to use a cool template for your own site, check it out!
YouTube
tailwind.config={theme:{extend:{colors:{primary:'#ff0000',secondary:'#606060'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Roboto', sans-serif;
}
.video-duration {
right: 8px;
bottom: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar {
width: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.category-scrollbar::-webkit-scrollbar {
height: 0;
display: none;
}
3
Home
Shorts
Subscriptions
Library
Subscriptions
Tech Insider
Music Vibes
GamersHub
Cooking Masters
Science Now
Fitness Pro
Explore
Trending
Music
Gaming
News
Sports
More from YouTube
YouTube Premium
YouTube Movies
Live
All
Music
Gaming
News
Live
Podcasts
Technology
Comedy
Sports
Education
Travel
Cooking
Fitness
12:34
Ultimate Review: The New iPhone 15 Pro - Everything You Need to Know!
TechReviewPro
1.2M views • 3 days ago
18:42
How to Make the Perfect Homemade Pasta - Simple Italian Recipes
Cooking With Julia
845K views • 1 week ago
2:05:18
LIVE: Epic Fortnite Tournament - Road to Champion Division!
GameMaster Pro
325K views • Streamed 2 days ago
4:26
Midnight Dreams - Official Music Video (New Release 2025)
Horizon Band
2.8M views • 5 days ago
28:15
30-Minute Full Body HIIT Workout - No Equipment Needed!
FitLife with Sarah
1.5M views • 2 weeks ago
22:47
Exploring Hidden Gems in Bali - Ultimate Travel Guide 2025
Wanderlust Adventures
687K views • 3 weeks ago
15:32
10 Mind-Blowing Science Experiments You Can Do At Home
Science Explained
4.2M views • 1 month ago
8:53
When Your Boss Catches You Sleeping at Work - Comedy Sketch
Laugh Factory
7.5M views • 2 months ago
10:05
Breaking: Major Technology Breakthrough Announced - What This Means For The Future
Global News Network
1.1M views • 12 hours ago
14:22
Unboxing the PlayStation 6 - First Look and Impressions!
Tech Unboxed
3.4M views • 1 day ago
42:18
The Secret Life of Arctic Wolves - Full Documentary 2025
Nature Discoveries
2.3M views • 2 weeks ago
1:12:45
Interview with World-Famous Entrepreneur: Secrets to Success and Future Plans
The Deep Dive Podcast
895K views • 4 days ago
// Infinite scroll simulation
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
// Would load more content in a real implementation
console.log("Load more content");
}
});
// Tooltip functionality
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function(e) {
// Would show tooltip in a real implementation
});
button.addEventListener('mouseleave', function(e) {
// Would hide tooltip in a real implementation
});
});
Enter fullscreen mode
Exit fullscreen mode
👉 Coded from scratch 👉 Fully responsive design 👉 Perfect for practice or portfolio useLet me know what you think in the comments and don’t forget to like & follow for more projects like this!
YouTubeClone #HTMLCSS #WebDevelopment #FrontendProject #CodingJourney #WebDesign #DeveloperLife #ResponsiveDesign #CloneProject #CodeNewbie #100DaysOfCode #LearnToCode
code link | 👉 |https://codepen.io/Abdullah-Web/pen/raaeNEL