Summary
Keywords
Full Transcript
🚀 Download this template from here ( FREE Download ) 🔗 https://templatesee.com/template/business-landing-page-template Fully responsive, modern, and easy to customize. Explore more premium & free templates on our website! 🔥 🔗 https://templatesee.com ✅ For Startups & Businesses – Build a stunning online presence effortlessly. ✅ For Developers – Customize & use it in your projects. ✅ For Learners – Perfect for practicing and improving your web development skills! 🔥Responsive Modern Website Using ReactJS, Tailwind CSS and vite || Build Web Development Company website description: In this tutorial you will learn how to build Modern website using ReactJS and Tailwind CSS. From creating folder to writing code and debugging, you'll learn everything in easy way. We use latest technology and methods to create fully responsive website. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 👁️ Live Preview: https://cozweb.netlify.app/ 🧡 Get Source Code || Assets absolutely Free 😍 https://github.com/dilshad-ahmed/modern-website-react-tailwind 💬 Join our community WhatsApp :- https://chat.whatsapp.com/Hu643OfjQax7zgqQdlok2C Telegram :- https://t.me/the_coding_journey - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Features: 🟠 Dark and Light mode 🟠 Responsive Dropdown with full width dropdown (like pinterest) 🟠 Animate on Scroll 🟠 Number Counter 🟠 Fully responsive app ( All device supported ) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - What you will learn: 🔥 How to build Modern Dropdown using reactjs and Tailwind CSS. 🔥 You'll implement Dark/Night mode feature. 🔥 You'll know how to implement Animate on scroll feature in react app. 🔥 You'll build fully responsive website in reactJS using tailwind CSS 🔥 Best practices and debugging skills. Components you build: 1- Navbar 2- Hero 3- overview Counter 4- Banner details 5- Simple Banner 6- Blogs 7- Footer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ⏱ Timestamps 00:00 Demo 02:05 Project Setup 05:36 Responsive Navbar 21:58 Dropdown Menu 14:22 Navbar Dropdown using Tailwind CSS 30:20 Navbar Modern Dropdown (full width dropdown) 43:36 Night mode feature in React JS 52:55 Mobile Responsive Menu 01:09:31 Hero Section 01:23:09 Number Counter Section 01:32:15 Banner Details Section 01:41:14 Simple Banner Section 01:49:17 Blog Card Section 02:01:24 Footer Section 02:25:31 Fixing Minor issue 02:27:46 Animate On Scroll Features 02:33:45 Final Result - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 💼 Packages : tailwind css - https://tailwindcss.com/ react - https://react.dev vite js - https://vitejs.dev/guide/ Aos (animation) - https://michalsnik.github.io/aos/ react icons - https://react-icons.github.io/ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - #reactjs #tailwindcss #tailwind #responsivewebsite #websitedesign #css #webdesign #webdevelopment #frontend #frontenddevelopment #uidesign
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
