Build and Deploy Navbar Dropdown Navigation with Tailwind CSS, React and Next.js

Published: 02 January 2024
on channel: react with utkarsh

11,227

251

#reactjs #nextjs #tailwindcss #typescript #nextjs13 #reactwithutkarsh #frontendmentor #frontenddeveloper #responsive #landingpage s #darkmode #props #usestate #dashboard #challange

Channel -    / @reactwithutkarsh   - Subscribe

Resource's
Challange Link - https://www.frontendmentor.io/challen...
Live Demo - https://dropdown-navigation-tau.verce...
Code Repo - https://github.com/whoisseth/dropdown...

Other Video's
React-Wrap-Balancer -    • How to Create Dynamic and Responsive ...
Weather App -    • How to Building a Weather App from Sc...
Social Media Dashboard -    • Build Dark | Light Social Media Dashb...

Ever wondered how websites have those menus that adjust beautifully no matter what device you're using? In this video, we'll show you step-by-step how to create one of those cool responsive Navbar Navigations. Join us as we use Tailwind CSS and Next.js to make your website look great on every screen size. Let's make your site awesome together!

Social Details
GitHub - https://github.com/whoisseth
LinkedIn -   / utkarshseth2019
Instagram -   / reactwithutkarsh

Timestamps
0:00 - 0:47: Intro & Project Overview
0:47 - 1:26: Setting up Next.js
1:26 - 3:57: Initial Project Setup
3:57 - 6:01: Creating Navbar & Styling
6:01 - 14:06: Building Navbar Sections
14:06 - 24:15: Dynamic Data for Navigation
26:27 - 28:04: Tailwind Debug Screens
30:00 - 33:03: Mobile Navigation Logic
39:49 - 46:17: Responsive Hero Section Design
46:17 - 48:04: Deployment to Vercel

Watch video Build and Deploy Navbar Dropdown Navigation with Tailwind CSS, React and Next.js online, duration hours minute second in high quality that is uploaded to the channel react with utkarsh 02 January 2024. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 11,227 times and liked it 251 visitors.

3,605

128