Learn to create a responsive Microsoft clone website using Tailwind CSS in this comprehensive tutorial video. Follow a mobile-first approach to build a fully functional and visually appealing site, including a responsive navbar with hamburger menu, logo, cart, and search icons. Create a dynamic slider, structure content containers, add interactive buttons, and implement promo components. Master responsive design techniques, fix common issues, and finalize your project with expert guidance throughout the 1.5-hour hands-on session.
Overview
Syllabus
Introduction:
Setting up Tailwind:
Microsoft: Clone Reference:
Mobile First Approach:
Creating Navbar:
Adding Hamburger:
Adding Logo, Cart and Search Icon:
Adding Responsiveness:
Adding Navigational Elements:
Responsive Navigational Elements:
Creating Slider:
Structuring the Slider:
Creating the left and right container:
Creating Shop Now button:
Assigning Proper Size and Position:
Creating the Promo Component:
Fixing Issues:
Finalising:
Taught by
CodeWithHarry
Related Courses
-
Front End Portfolio Website Tutorial - Next.js, Three.js, Tailwind CSS
-
Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase
-
Portfolio Website with Tailwind CSS - Tailwind Tutorial for Beginners
-
Designing with Tailwind CSS
-
Animated Hamburger Icon, Mobile Menu & Responsive Navbar with Tailwind CSS
-
CSS Animated Responsive Navbar - CSS Animations for Beginners
