DEV Community

A Ramesh
A Ramesh

Posted on • Edited on

Day-11 : My YouTube Home Page Design – Beginner Front-End Project....

My YouTube Home Page Design – Beginner Front-End Project

Date: May 25, 2025

Created By: A Ramesh


Introduction

Today, I worked on designing a YouTube home page clone using basic front-end technologies. This was a part of my learning journey in HTML, CSS. The idea was to understand layout design, alignment, responsiveness, and how real websites like YouTube are structured.


What I Used

  • HTML: To structure the page elements like header, search bar, sidebar, and video cards.
  • CSS: For designing and styling the layout, colors, fonts, and spacing.
  • Font Awesome / Icons: For using icons like search, bell, user, etc.
  • Images & Video Cards: I used one video thumbnail and duplicated it for layout purposes.

My Objective

My goal was to recreate the look and feel of the YouTube homepage, especially:

  • The top navigation bar with a logo, search bar, mic icon, and user profile icons.
  • A left sidebar for navigation (Home, Shorts, Subscriptions, etc.).
  • A video grid section showing video thumbnails with titles and views.

This helped me understand real-world layout structures, and how responsive websites are designed using flexbox and grid.


Project Screenshot

Image description


Features Implemented

  • Left sidebar navigation
  • Search bar and mic icon
  • YouTube-like video cards in grid view
  • Tags/filters like “Music”, “Tamil Cinema”, “Java”, etc.
  • Responsive layout (partially)

What I Learned

  • How to divide a web page into components like header, sidebar, content
  • How to use CSS flexbox to align and space elements
  • How to create a responsive video card layout
  • How YouTube’s UI is designed for user interaction and ease

Future Improvements

  • Add real video links using YouTube iframe embeds
  • Make the layout more responsive for mobile view
  • Add hover effects on video cards and icons
  • Use JavaScript to add dynamic search or sidebar toggle

Top comments (0)