. Create a YouTube Clone UI with HTML and CSS (Source code)
Create a YouTube Clone UI with HTML and CSS (Source code)
Create a YouTube Clone UI with HTML and CSS (Source code)

Create a YouTube Clone UI with HTML and CSS (Source code)

Learn how to create a YouTube Clone UI with HTML and CSS. This tutorial is perfect for beginners in front-end development.

Read Also Create Interactive Add/Remove Cards with HTML, CSS, and JavaScript

Table of Contents

Front-end development is a crucial skill for anyone looking to build a career in web development. It involves building the visual and interactive parts of a website, using technologies like HTML, CSS, and JavaScript. In particular, HTML and CSS are the building blocks of front-end development, forming the foundation of every website and web application.

In this tutorial, we will show you how to create a YouTube Clone UI using HTML and CSS. This tutorial is aimed at beginners in front-end development, but it will also be useful for those looking to improve their skills. By the end of the tutorial, you will have created a functional YouTube Clone UI, and you will have gained a deeper understanding of how HTML and CSS work together to build websites.

Cloning a website or application can offer several benefits, especially when you're trying to learn new development skills or build a new project. Some of the benefits of cloning a website like YouTube include:

  1. Learning new skills: By cloning a website, you can learn new development skills and techniques that can be applied to your own projects. You can see how the website was built, the technologies used, and how the different elements are integrated to create the final product.
  2. Time-saving: Cloning a website can save you a lot of time and effort, especially if you're building a similar application or website. Rather than starting from scratch, you can use an existing website as a template and build upon it.
  3. Testing and experimentation: Cloning a website can be a great way to experiment with new features or design elements, without the risk of damaging the original website. You can test different layouts, colors, and functionalities to see what works best.
  4. Inspiration and reference: Cloning a website can also provide inspiration for your own projects. You can examine the design and functionality of the website and incorporate elements into your own work. Additionally, cloned websites can serve as a reference point for your own projects, providing a clear example of what you're trying to achieve.

We will guide you through the process of planning and setting up the HTML structure, as well as adding basic styles to the video player. This tutorial is a practical and engaging project that will help you learn by doing. We will provide step-by-step instructions, code examples, and screenshots to help you understand the concepts. Whether you're a beginner or an experienced developer, this tutorial will help you improve your HTML and CSS skills and take your front-end development to the next level.

Let's start making an amazing YouTube clone UI using HTML, and CSS step by step.

Join My Telegram Channel to Download the Projects Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our YouTube clone.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

The code begins with the html element, which specifies that the language is English. The head element contains metadata, such as character encoding, viewport, and links to external stylesheets and fonts. The body element contains the main content of the webpage.

Inside the body element, there is a nav element that contains the navigation bar. It includes a menu button, a YouTube logo, a search field with a search button and a voice button, and other navigation options, such as create, YouTube apps, notifications, and user avatar.

Next, there is a div element with the class name chips, which contains a list of categories or tags. Each category is displayed as a div element with the class name chips__item. The selected category has an additional class name of chips__item--selected.

Finally, there is a div element with the class name sidebar that contains a list of links to different sections of the website. Each link is displayed as an a element with the class name sidebar__section__link. The selected link has an additional class name of sidebar__section__link--selected.

This is the basic structure of our YouTube clone using HTML, and now we can move on to styling it using CSS.

Read Also How to Create Stunning Transitional Buttons using HTML and CSS

Step 2 (CSS Code):

Once the basic HTML structure of the YouTube clone is in place, the next step is to add styling to the YouTube clone using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our clone website.

Here is a breakdown of what each section of the code does:

body: This is a selector that targets the entire body of the web page. The properties inside the curly braces set the margin and padding to 0 and set the font family to "Roboto", "Arial", or a generic sans-serif font.

svg: This selector targets all svg elements on the page and sets the fill color to a dark grey color.

.navigation: This is a class selector that targets a navigation bar element. The properties inside the curly braces set the padding, display, height, position, and background color of the navigation bar.

.navigation__button: This selector targets all buttons within the navigation bar element. The properties inside the curly braces set the border, padding, background color, and cursor to change to a pointer on hover.

.navigation__menu, .navigation__search, and .navigation__options: These are class selectors that target specific elements within the navigation bar element. .navigation__menu targets a menu element, .navigation__search targets a search bar element, and .navigation__options targets a container for other navigation options. The properties inside the curly braces set the display to flex and align items to center for each of these elements.

.navigation__options .navigation__button: This selector targets all buttons within the .navigation__options container. The property inside the curly braces sets the margin-right to 8px.

.navigation__menu img: This selector targets all images within the menu element. The property inside the curly braces sets the margin-left to 5px.

.navigation__menu__button svg: This selector targets an svg element within the menu button element. The property inside the curly braces sets the height to 24px.

.navigation__search input: This selector targets the input element within the search bar. The properties inside the curly braces set the width, height, border, font size, and padding.

.navigation__search__icon: This selector targets an icon element within the search bar. The properties inside the curly braces set the border, height, width, and border-left to none.

.navigation__search__icon:hover: This selector targets the same icon element but changes the background color to a light grey on hover.

.navigation__search__icon svg: This selector targets an svg element within the icon element. The properties inside the curly braces set the height and width.

.navigation__options: This selector targets the container for navigation options. The property inside the curly braces sets the display to flex.

.navigation__icon and .navigation__avatar: These selectors target icon and avatar elements in the navigation bar. The properties inside the curly braces set the dimensions and styling for each of these elements.

.chips: This is a class selector that targets a container for "chips" or tags on the web page. The properties inside the curly braces set the border, display, position, top, right, left, and background color for the container.

.chips__item: This selector targets each individual tag or "chip" within the container. The properties inside the curly braces set the border, background color, font size, padding, line-height, border-radius, margin, and cursor for each chip.

.chips__item:first-child: This selector targets the first chip element within the container and sets the margin-left to 24px.

.chips__item--selected: This selector targets a selected chip element and changes the background color to black and the text color to white.

.sidebar: Applies styles to a sidebar element. It sets the width to 240 pixels, fixes its position, and aligns it to the left of the page. The sidebar stretches from the top of the page (56px from the top) to the bottom. It also applies padding to the top and bottom of the sidebar, and sets the height of the sidebar to be equal to the viewport height minus 80 pixels. Finally, it adds a vertical scrollbar to the sidebar.

.sidebar__section: Applies styles to sections within the sidebar. It adds padding at the top and bottom of each section, and a border at the bottom of each section with a light gray color.

.sidebar__section h3: Applies styles to the headings within the sidebar sections. It adds padding to the top and bottom of the headings, sets the font size to 13 pixels, makes the text uppercase, and sets the text color to a dark gray color.

.sidebar__section__link: Applies styles to the links within the sidebar sections. It sets the display property to flex, which makes the links behave like a flex container. It also sets the link color to a dark color, removes the underline from the link, and aligns the link items to the center. It adds padding to the left and right of each link and sets the height of each link to 40 pixels.

.sidebar__section__link svg and .sidebar__section__avatar: Applies styles to SVG icons and avatars within the sidebar links. It sets the height and width of the icons and avatars to 24 pixels and adds margin to the right of the icons.

.sidebar__section__avatar: Applies styles to the avatar images within the sidebar links. It adds a circular border radius to the avatar and sets a gray background color.

.sidebar__section__link--selected: Applies styles to the selected sidebar links. It sets the background color of the selected link to a light gray color and increases the font weight to 500.

.sidebar__section__link--selected svg: Applies styles to the selected link's SVG icons. It sets the fill color of the icons to red.

.sidebar__section:last-child: Applies styles to the last sidebar section. It adds padding at the top and bottom of the section and removes the border from the bottom of the section.

.sidebar__section:last-child p: Applies styles to the paragraphs within the last sidebar section. It sets the font size to 13 pixels and the text color to a light gray color.

.sidebar__section__link--small: Applies styles to the smaller sidebar links. It sets a smaller margin to the right of the link, sets the font size to 13 pixels, increases the font weight to 500, and sets the text color to a gray color.

.feed: Applies styles to the main content area of the page, which is located to the right of the sidebar. It sets the margin from the top of the page to 140 pixels and the margin from the left of the page to 240 pixels. It sets the display property to flex, which makes the content behave like a flex container, and allows it to wrap onto multiple lines.

.feed__item: Applies styles to individual items within the main content area. It sets margins on all sides of each item.

.feed__item__thumbnail: Applies styles to the thumbnail image within each item. It sets the width and height of the thumbnail to 360 pixels by 202 pixels and sets a gray background color.

.feed__item__info: Defines the styling properties for the information section of a feed item. It has a display property of flex to make its child elements align horizontally, a font-size of 14px, and a color of rgb(96, 96, 96) for the text color.

.feed__item__info h3: Styles the heading element within the information section of a feed item. It has a font-size of 16px, a font-weight of 500, a margin-bottom of 4px, and a color of rgb(3, 3, 3) for the text color.

.feed__item__info a: Styles the anchor elements within the information section of a feed item. It removes the underline from the text with text-decoration: none and sets the color to the default value with color: unset.

.feed__item__info p: Styles the paragraph elements within the information section of a feed item. It sets the margin to 0 to remove any default margins.

.feed__item__info__avatar: Styles the avatar within the information section of a feed item. It sets a height and width of 36px, border-radius of 50% to create a circular shape, a background-color of grey and a margin of 12px 12px 0 0.

.feed__section: Defines the styling properties for a feed section. It has a border-top and border-bottom of 3px solid lightgrey and a margin of 24px 35px 48px.

.feed__section h2: Styles the heading element within a feed section. It has a margin-left of 8px.

.feed__section__items: Defines the styling properties for a feed section's items. It has a display property of flex, so that its child elements align horizontally, flex-wrap of wrap to wrap items to the next line if there is not enough space, and justify-content of center to align the items in the center of the section.

This will give our YouTube clone UI an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

body < margin: 0; padding: 0; font-family: Roboto, Arial, sans-serif; >svg < fill: rgb(96, 96, 96); >.navigation < padding: 0 16px; display: flex; justify-content: space-between; height: 56px; position: fixed; top: 0; right: 0; left: 0; background-color: white; >.navigation__button < border: none; padding: 5px 10px; background-color: transparent; cursor: pointer; line-height: 5px; >.navigation__menu, .navigation__search, .navigation__options < display: flex; align-items: center; >.navigation__options .navigation__button < margin-right: 8px; >.navigation__menu img < margin-left: 5px; >.navigation__menu__button svg < height: 24px; >.navigation__search input < width: 360px; height: 32px; border: 1px solid rgb(211, 211, 211); font-size: 16px; padding: 3px 8px; >.navigation__search__icon < border: 1px solid rgb(211, 211, 211); border-left: none; height: 32px; width: 65px; >.navigation__search__icon:hover < background-color: #e4e4e4; >.navigation__search__icon svg < height: 20px; width: 20px; >.navigation__options < display: flex; >.navigation__icon < width: 24px; height: 24px; >.navigation__avatar < width: 32px; height: 32px; border-radius: 50%; background-color: grey; >.chips < border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: flex; position: fixed; top: 56px; right: 0; left: 240px; background-color: white; >.chips__item < border: 1px solid rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.05); font-size: 14px; padding: 0 12px; line-height: 30px; border-radius: 16px; margin: 12px 12px 12px 0; cursor: pointer; >.chips__item:first-child < margin-left: 24px; >.chips__item--selected < background-color: black; color: white; >.sidebar < width: 240px; position: fixed; top: 56px; left: 0; bottom: 0; padding: 12px 0; height: calc(100vh - 80px); overflow-y: scroll; >.sidebar__section < padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); >.sidebar__section h3 < padding: 8px 24px; font-size: 13px; text-transform: uppercase; color: rgb(96, 96, 96); >.sidebar__section__link < display: flex; color: rgb(3, 3, 3); text-decoration: none; align-items: center; font-size: 14px; padding: 0 24px; height: 40px; >.sidebar__section__link svg, .sidebar__section__avatar < height: 24px; width: 24px; margin-right: 24px; >.sidebar__section__avatar < border-radius: 50%; background-color: grey; >.sidebar__section__link--selected < background-color: rgba(0, 0, 0, 0.1); font-weight: 500; >.sidebar__section__link--selected svg < fill: #f00 >.sidebar__section:last-child < padding: 16px 24px 0 24px >.sidebar__section:last-child p < font-size: 13px; color: #909090; >.sidebar__section__link--small < margin-right: 8px; font-size: 13px; font-weight: 500; color: #606060; text-decoration: none; >.feed < margin-top: 140px; margin-left: 240px; display: flex; flex-wrap: wrap; justify-content: center; >.feed__item < margin: 0 8px 40px 8px; >.feed__item__thumbnail < width: 360px; height: 202px; background-color: grey; >.feed__item__info < display: flex; font-size: 14px; color: rgb(96, 96, 96); >.feed__item__info h3 < font-size: 16px; font-weight: 500; margin-bottom: 4px; color: rgb(3, 3, 3); >.feed__item__info a < text-decoration: none; color: unset; >.feed__item__info p < margin: 0; >.feed__item__info__avatar < height: 36px; width: 36px; border-radius: 50%; background-color: grey; margin: 12px 12px 0 0; >.feed__section < border-top: 3px solid lightgrey; border-bottom: 3px solid lightgrey; margin: 24px 35px 48px; >.feed__section h2 < margin-left: 8px; >.feed__section__items Read Also A Beginner's Guide to Creating a Custom Bootstrap Carousel

In conclusion, we have shown you how to create a YouTube Clone UI using HTML and CSS. We hope that you found this tutorial informative and engaging, and that you were able to learn new skills and improve your existing ones.

By following our step-by-step instructions, you were able to create a functional YouTube Clone UI, which can be used as a starting point for your own projects. You also gained a deeper understanding of how HTML and CSS work together to build websites, which is a crucial skill for any front-end developer.

We encourage you to continue learning and practicing HTML and CSS, and to explore other front-end development technologies like JavaScript and React. The world of web development is constantly evolving, and there is always more to learn.

Thank you for following along with our tutorial, and we wish you the best of luck in your front-end development journey!

Code by: Shamim Imtiyaz

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox Latest Components Modern Responsive Header with Search Bar: Free HTML, CSS, & JS Code Snippet by Faraz - February 02, 2026

Elevate your website's UX with this premium, responsive header featuring a mega-menu, search bar, and animated hamburger menu. Get the free code snippet now!

Email Template Free Modern Christmas HTML Email Template (Responsive Code)

December 23, 2025

Build a Premium Animated Thank You Card with HTML & Tailwind CSS

December 19, 2025

Free Construction HTML Website Template (Tailwind & JS)

December 18, 2025

Free Lawn Care HTML Website Template

December 11, 2025

Animated Login Buttons with HTML, CSS & JavaScript by Faraz - August 25, 2025

Learn how to create animated login buttons using HTML, CSS, and JavaScript. Step-by-step guide for stylish and interactive login buttons.

Animated Brochure Template using HTML CSS JavaScript Create Toggle Switch Variants using HTML, CSS & JavaScript Create Modern Profile Card using HTML and CSS Create Razorpay Payment Button using HTML and CSS Create Neon Brick Breaker Game using HTML CSS JS by Faraz - April 05, 2025

Learn how to create a Neon Brick Breaker game using HTML, CSS, and JavaScript. Simple steps for beginners to build a glowing arcade-style game.

Create Asteroid Game using HTML, CSS, and JavaScript Create Pop It Game using HTML, CSS, and JavaScript

October 08, 2024

Create Trivia Quiz Game using HTML, CSS, and JavaScript

September 25, 2024

Create Dice Rolling Game using HTML, CSS, and JavaScript Build a Password Generator with HTML, CSS & JS - Easy Guide by Faraz - October 08, 2025

Learn how to make a random password generator using HTML, CSS, and JavaScript. This beginner tutorial includes step-by-step code and tips for strong passwords. Start coding today!

Create HTML Layout Generator Tool with Tailwind CSS & JS Tooltip Hover to Preview Image with Tailwind CSS Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js

January 23, 2024

Build a Responsive Screen Distance Measure with HTML, CSS, and JavaScript

January 04, 2024

Create Sticky Bottom Navbar using HTML and CSS by Faraz - August 29, 2024

Learn how to create a sticky bottom navbar using HTML and CSS with this easy-to-follow guide.

Creating a Responsive Footer with Tailwind CSS (Source Code)

February 25, 2024

Crafting a Responsive HTML and CSS Footer (Source Code)

November 11, 2023

Create an Animated Footer with HTML and CSS (Source Code)

October 17, 2023

How to Create a Responsive Bootstrap Footer Template About Us Useful Tools Case Converter Word Counter Scrollbar Generator Find and Replace Text Slug Generator Lorem Ipsum Generator Related Posts August 24, 2023 Design Weather App Interface using HTML and CSS (Source. July 21, 2024 Create a Survey Form with HTML and CSS (Source code) January 21, 2025 Create Movie Search App using HTML, CSS, and JavaScript July 21, 2024 Personal Portfolio Website: A Step-by-Step Guide with. April 14, 2024 Create a Responsive Customer Review Using HTML and CSS September 30, 2024 Create Time Table Generator Using HTML, CSS, and. December 12, 2023 Creating a Responsive Pet Store Landing Page using HTML. July 25, 2022 How to Create a Bottom Tab Bar Navigation Using HTML. January 22, 2023 Designing a Neumorphic Gradient Loading Indicator with. July 20, 2024 Create a Dark/Light Mode Switch with HTML, CSS and. August 21, 2024 Create Dice Rolling Game using HTML, CSS, and. July 12, 2025 Create Premium Flyer Template with HTML & TailwindCSS Hot Deals Laptops Desktops Mobiles Printers Computers Accessories Kitchen Products Programming Books Video Games Electronic Products Clothing & Accessories Headphones Smart Watches Car Accessories Health Care Beauty Products Toys Sports & Outdoors Furniture Categories
  • HTML (521)
  • Tailwind (55)
  • Blockquote (1)
  • Checkout Form (1)
  • Breadcrumb (2)
  • Sign up Form (4)
  • Notification (6)
  • Questions (1)
  • Email Template (8)
  • Toggle (8)
  • Chart (6)
  • Scroll to Top (2)
  • Countdown (7)
  • Portfolio (15)
  • Accordion (5)
  • Django (0)
  • Filter Menu (1)
  • Article Page (2)
  • Clone (25)
  • Chatbot (2)
  • Management (11)
  • To Do List (4)
  • Timeline (3)
  • Pricing Table (5)
  • Games (30)
Tags Python Projects July 22, 2024 Restaurant Management System in Python with Tkinter. May 16, 2023 Create Your Own Vending Machine with Python (Source. June 07, 2023 Create a Paint Application in Python using Tkinter June 12, 2024 How to Create an AI Calculator Using Python June 15, 2024 Create a Tambola Game using Python Tkinter Free Icons April 24, 2024 300+ Most Used Free SVG Icons - Electronics, Direction. April 24, 2024 Get High-Quality SVG Icons of Car Brands Logos for Free April 24, 2024 Emoji Copy and Paste: Expressive Emoticons for Every. April 24, 2024 Free Download SVG Icons: Bootstrap Icons Collection -. Instagram Popular Blogs July 16, 2024 30 Login Form Collection with Source Code in HTML, CSS. July 15, 2024 50 HTML, CSS & JavaScript Projects with Free Source. June 17, 2024 50+ Python Projects with Source Code: Beginner to. May 01, 2024 20+ Inspiring Gym Websites: HTML, CSS, and JavaScript. July 25, 2024 10+ Free Python Books in PDF Format for Beginners and.

Please allow ads on our site🥺

Get the latest news!

Don't be shy. Say hi 👋. Do you have a project or an idea that could use some help? Let's work together.

© 2022 - 2026 codewithFaraz., All rights reserved.

  • Terms & Conditions
  • Privacy Policy
  • Cancellation & Refund Policy
📎📎📎📎📎📎📎📎📎📎