Summary
Keywords
Full Transcript
In this tutorial you will learn how to Build and Deploy Fully Responsive Fruits Selling Ecommerce website with React + Tailwind CSS and Framer-motion. 👁️ Live Preview: https://fruits-selling-tcj.netlify.app/ 📂 Source code (Support 💖) : https://buymeacoffee.com/thecodingjourney/e/286262 👨🏻💻 Develop the project : https://github.com/dilshad-ahmed/fresh-fruits-starter 👆 Download (files + images) - Click on the GitHub link - Click the green button (code) - Click Download ZIP 💬 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 Complete Landing page. 👉🏻 Modern animation with Framer-motion. 👉🏻 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 and Tailwind CSS. 🔥 You'll learn to animation on websites. 🔥 You'll build fully responsive website in reactJS using Tailwind CSS 🔥 Best practices and debugging skills. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ⏱ Timestamps 00:00 Demo 01:32 Responsive Demo 02:56 Software Download 03:45 Project Setup & Configuring tailwind CSS 09:32 Responsive Navbar Section Taiwind CSS 18:34 Mobile Responsive Sidebar menu 23:58 Animated Hero section with Reactjs & Tailwind CSS 40:00 Our Menu section 49:33 Responsive Banner Section with Tailwind CSS 01:01:37 Responsive Footer section with Tailwind CSS 01:88:49 Deploying the app 👍🏻Make sure to Like and Subscribe for more amazing tutorials 🔔 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 💼 Packages : tailwind css - https://tailwindcss.com/ react - https://react.dev vite js - https://vitejs.dev/guide/ react icons - https://react-icons.github.io/ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - #reactwebsite #framermotion #fruitseller #groceryshopping #responsivewebsite #ecommercewebsite #tailwindcss #reactjs #tailwind #websitedesign #html #css #html5 #css3 #htmlcss #webdesign #webdevelopment #frontend #frontenddevelopment #uidesign #thecodingjourney #tcj #coding #reactjstutorial #codingtutorial #uiux
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
