YouTube

by shahed shabbir shaikh

HTML CSS
The YouTube Website Clone is a front-end web development project created using HTML5 and CSS3. It recreates the visual layout of YouTube with a dark theme, organized navigation, video sections, and a Shorts-style content area. The project focuses on building a familiar video-streaming interface while practicing webpage structure and styling.

The sidebar includes navigation options such as Home, Shorts, Subscriptions, History, Playlists, Your Videos, Watch Later, Liked Videos, Downloads, Trending, Music, Films, Gaming, News, Sports, and Settings. It also displays subscription channel names, profile images, and additional informational links.

The top section features a search bar, microphone icon, Create option, notification icon, and user profile image. A category navigation bar contains topics such as Music, Gaming, Live, Science Fiction, News, and Nature Documentaries. The main content area displays video cards with video previews, channel images, titles, channel names, view counts, and upload information. A separate Shorts section presents vertical video content with captions and view counts.

HTML5 is used to structure the webpage, including the sidebar, navigation areas, video elements, images, and content sections. CSS3 manages the dark interface, typography, spacing, element positioning, dimensions, and layout using properties such as floats, margins, padding, and background colors. Remix Icon provides icons for navigation and interface elements.

This project demonstrates practical skills in HTML structure, CSS styling, multimedia embedding, icon integration, and recreating a popular website interface. It serves as a learning project for understanding how different sections of a video-sharing platform can be arranged on a webpage.

**Technologies Used:** HTML5, CSS3, Remix Icon, Google Fonts, HTML Video, and external images.
← Back to shahed shabbir shaikh
Ready to build, learn, or ship?

Join 500+ students and businesses who trust Versatile Technology
for education, development, and cybersecurity.