ReactJS Responsive website with Login Popup Modal | Tailwind CSS

Lección 24 de 5841%

Sigue así. Cada lección te acerca más a tu certificado.

Sobre esta lección

Learn how to make Responsive Login and Signup Form Popup Modal using ReactJS and Tailwind CSS for beginners. you will learn how to make modern responsive hero section with responsive Navbar . you will learn the uses of useRef which is the hook of react js to close the popup modal by clicking the outside of the modal. - Responsive ReactJS website with Login & SignUp Page || Custom Popup Modal using ReactJS and Tailwind 🧡 Get the source code absolutely Free || Don't forget to LIKE & SUBSCRIBE😍 https://github.com/dilshad-ahmed/traveu 👁️ Live Preview: https://traveu.netlify.app/ 💬 Join our community WhatsApp :- https://chat.whatsapp.com/Hu643OfjQax7zgqQdlok2C Telegram :- https://t.me/the_coding_journey 🎬 Playlist ( Full website Build from scratch + Free Assets + Free Code ) https://www.youtube.com/playlist?list=PLt2fZkYs6q_l2WebLGr6biyk551rLUtLV - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Features: 👉🏻 Responsive Login / signin page Popup Modal in ReactJS. 👉🏻 Click Outside of modal to close the Modal. 👉🏻 Responsive Navbar 👉🏻 Fully responsive Hero page( All device supported ) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - What you will learn: 🔥 How to build Responsive Navbar using ReactJS. 🔥 How to build Modern Responsive Hero page using ReactJS. 🔥 You'll build the Login and Signin Form page with Popup modal. 🔥 Uses of useRef to click outside of to close the Login Modal. 🔥 You'll build fully responsive website in reactJS using Tailwind CSS 🔥 Best practices and debugging skills. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ⏱ Timestamps 00:00 Demo 01:34 Software Download 01:55 Project Setup 04:40 configure/install tailwind CSS 07:03 Responsive Navbar for desktop 17:30 Hero Section 21:32 Google Font for Hero Text 25:24 Login form Popup modal 48:38 Show-Hide password 50:30 Signin form page 58:00 Closing the Popup Modal with outside of click 01:00:21 Bluring the Popup Background 01:01:22 Final Result - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 💼 Packages : tailwind css - https://tailwindcss.com/ react - https://react.dev vite js - https://vitejs.dev/guide/ react icons - https://react-icons.github.io/ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Facebook - https://m.facebook.com/thecodingjourney Instagram - https://www.instagram.com/the.coding.journey Twitter - https://mobile.twitter.com/thecodingjourny - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -#reactwebsite #loginpage #tailwindcss #popupmodal #reactjs #tailwind #responsivewebsite #websitedesign #css #webdesign #webdevelopment #frontend #frontenddevelopment #uidesign #thecodingjourney #tcj #coding #howtocreateloginpage

Sobre este curso

Lección 24 de 58Nivel: principianteDuración total: 105h 29m

Lo que aprenderás en este curso:

  • Dominar la sintaxis moderna de JavaScript (ES6+)
  • Manipular el DOM y gestionar eventos del navegador
  • Trabajar con funciones asíncronas, promesas y APIs
  • Implementar estructuras de datos y algoritmos en JavaScript