Summary
Keywords
Full Transcript
In this tutorial you will learn how to build Modern Animated 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://plusdemic-tcj.netlify.app/ 📂 Source code : https://buymeacoffee.com/thecodingjourney/e/313757 🎉Free Source code : https://github.com/dilshad-ahmed/plusdemic 🎁 Join our community to start your journey. 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 Complete Landing page. 👉🏻 Modern Animated website using Framer motion. 👉🏻 Fully Responsive Hero page( All device supported ) 👉🏻 Modern Animated card 👉🏻 Responsive Footer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - What you will learn: 🔥 How to build Responsive Navbar using ReactJS. 🔥 How to build Modern Responsive Hero page using ReactJS, Tailwind CSS and Framer motion. 🔥 You'll learn how to animate website with framer motion. 🔥 You'll build fully responsive website in reactJS using Tailwind CSS 🔥 Best practices and debugging skills. 🔥 How to build Responsive Sliding Testimonial using ReactJS. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ⏱ Timestamps 00:00:00 Intro 00:02:12 Project Setup 00:08:57 Navbar section using React and Tailwind CSS 00:15:10 Animated Hero Page using Tailwind CSS 00:25:47 Services Section 00:35:50 Uses Cards section 00:38:16 How it Helps Section 00:40:43 Why to Trust Section 00:48:17 Footer Section 00:55:00 Animation section 01:09:30 Final Design 01:11:54 Build & Deployment ("npm run build") 👍 Thanks for watching! Make sure to like & Subscribe for more! 💜 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 💼 Packages : tailwind: https://tailwindcss.com/ reactjs: https://react.dev vitejs: https://vitejs.dev/guide/ react-icons: https://react-icons.github.io/ framer-motion: https://www.framer.com/motion/ Design-credit: https://dribbble.com/shots/16178296-Plus-Medicine-Website/attachments/8036149?mode=media - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - #reactjs #tailwindcss #medicalwebsite #medicinewebsite #framermotion #uidesign #gym #gymwebsite #yoga #yogawebsite #webdesign #website #modernwebdesign #animatedwebsite #html #htmlcss #htmlcssjavascriptproject #reactwebsite #reactjstutorial #responsivewebsite #websitedevelopment #webdesign #webdevelopment #frontend #frontenddevelopment #thecodingjourney #tcj #coding #codingtutorial
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
