== [ Description ] ==In this video, I go over how to clone the Reddit UI using Tailwind CSS. This is the second of many Tailwind clones that I plan to releas...
In this video, I go over how to clone the Reddit UI using Tailwind CSS. This is the second of many Tailwind clones that I plan to release in the coming few weeks. I'm making this series to practice my UI/web design skills and explain some of the learnings along the way. So sit back, relax, and follow along as I struggle to recreate this Reddit clone.
Note: I code this Reddit clone within Vue.js, but no prior knowledge of the framework is required to follow along. I'd also suggest watching it at 1.25 or 1.5x speed.
== [ Timestamps ] == 00:00 Reddit UI Clone Demo 01:42 Intro 02:48 Project Setup 03:28 GitHub Template + Code 04:01 Navbar - Base Code 05:46 Navbar - Reddit Logo 10:01 Navbar - Dropdown Button 14:18 Navbar - Dropdown Div 18:36 Quick Reddit UI Recap 19:23 Navbar - Search 21:20 Navbar - Common Actions 24:28 Navbar - Reddit Coins 27:26 Navbar - Profile Section 31:16 Trending Today 36:02 Popular Section - Filter 41:08 Popular Section - Posts 45:52 Reddit UI Clone Recap 46:25 Fin
== [ Links ] == Tailwind CSS: https://tailwindcss.com/
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.
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.
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.
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.
Check out this list of popular and open-source Tailwind CSS Plugins and Extensions to help you expand the features of the framework.