Recreating the YouTube UI with Tailwind CSS [Suboptimal Clone #1]

Recreating the YouTube UI with Tailwind CSS [Suboptimal Clone #1]

== [ Description ] ==In this video, I go over how to clone the YouTube home page UI using Tailwind CSS. This is the first of many Tailwind clones that I plan...

In this video, I go over how to clone the YouTube home page UI using Tailwind CSS. This is the first of many Tailwind clones that I plan build and make videos on, in the coming few weeks. I'm making this series to practice my UI/web design skills and explain my learnings along the way. So sit back, relax, and follow along as I struggle to recreate this YouTube clone live.

Note: I code this YouTube clone within Vue.js, but no prior knowledge of the framework is required to follow along. You can work with whichever framework you prefer. I'd also suggest watching it at 1.25 or 1.5x speed.

== [ Timestamps ] == 00:00 YouTube UI Clone Demo 00:50 Intro 02:47 YouTube UI Explained 04:22 Project Setup with Tailwind CSS 07:40 YouTube Clone UI Overview 10:00 YouTube Clone UI Base 14:20 Font Awesome Icons 21:39 Left Navbar UI 24:28 Search Bar UI 40:41 Tags UI 45:20 Videos UI 55:18 Unhandled UI Bugs 55:46 Fin

== [ Links ] ==

Tailwind CSS: https://tailwindcss.com/

FontAwesome: https://github.com/FortAwesome/vue-fo...

Subscribe: https://www.youtube.com/c/SuboptimalEng/featured

tailwind css

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Tailwind CSS tutorial

Start learning about Tailwind CSS with this guide which covers installing via a package manager, generating the configuration file, building a website and reducing the final CSS file.

Tailwind CSS Cheatsheet

Master Tailwind CSS with this Cheatsheet. Tailwind CSS allows us to build modern websites with the respective classes without writing a single native CSS. Tailwind is amazing since we have to only to specify the respective classes and Tailwind CSS will take care of everything. We will see the most basic CSS classes and their relative properties in CSS.

How To Install Tailwind CSS | Install Tailwind Via NPM | Tailwind Tutorial | Learn Tailwind 2 CSS

In this video you’ll learn how to install Tailwind CSS via NPM. Before you could install it, you do need to have Node.JS installed.

Introduction to Tailwind CSS | Tailwind CSS Tutorial

This video is created as an introduction to Tailwind. Tailwind is a utility CSS framework to make your life as a developer easier. You will see what the advantages and disadvantages are of using Tailwind and what the difference is between Tailwind and Bootstrap.

Tailwind CSS v2.2 – Tailwind CSS

Tailwind v2.2 was just released. We take a tour of some of the most exciting new features in Tailwind CSS v2.2. Tailwind v2.2 with a brand-new Tailwind CLI tool, a ton of new features using the JIT engine, and more.