In this video you'll learn to Build and Deploy Complete Responsive Animated Headphone Store website using ReactJS + Tailwind + Freamer-motion.
👁️ Live Preview:
headphone-tcj.netlify.app/
📂 Source code: buymeacoffee.com/thecodingjourney/e/277926
👨🏻💻 Develop the project : github.com/dilshad-ahmed/playing-market-starter
👆 Download (files + images)
Click on the GitHub link
Click the green button (code)
Click Download ZIP
- - - - - - - - - - - - - - - - - - - - - - - - -
💬 Join our community
WhatsApp :- chat.whatsapp.com/Hu643OfjQax7zgqQdlok2C
Telegram :- t.me/the_coding_journey
🎬 Playlist ( Full website Build from scratch + Free Assets + Free Code )
• Complete Responsive Websites ReactJS and T...…
- - - - - - - - - - - - - - - - - - - - - - - - -
Features:
👉🏻 Responsive Animated Headphone Store website.
👉🏻 Framer-motion Animation.
👉🏻 Custom animated cursor.
What you will learn:
🔥 How to build Animated Responsive Navbar using ReactJS + Tailwind + Framer.
🔥 How to build Modern Responsive Hero page using ReactJS and Tailwind CSS.
🔥 You'll learn to Animate the website using Framer-motion.
🔥 You'll build custom cursor follower.
🔥 You'll build fully responsive website in reactJS using Tailwind CSS
🔥 Best practices and debugging skills.
- - - - - - - - - - - - - - - - - - - - - - - - -
⏱ Timestamps
00:00:00 Project Intro
00:01:55 Responsive Demo
00:03:38 Software Download
00:04:11 Project Setup
00:04:34 Tailwind config, fonts, globals.css
00:06:25 Required Extenstion
00:07:20 Navbar section
00:19:45 Mobile Sidebar section
00:22:20 Home Page
00:46:52 Services Page
00:54:04 Banner section
01:08:03 Blogs section
01:06:19 Contact Page
01:14:25 Footer section
01:24:03 Preview before deployment
01:26:46 Deployment
👍🏻Like and Subscribe for more tutorials 💖
- - - - - - - - - - - - - - - - - - - - - - - - -
🔔Follow us on
▫️Instagram -
www.instagram.com/the.coding.journey/
▫️Facebook -
m.facebook.com/thecodingjourney
▫️Twitter -
www.twitter.com/thecodingjourny
- - - - - - - - - - - - - - - - - - - - - - - - - -
💼 Packages :
react: react.dev/
tailwind: tailwindcss.com/
framer-motion: www.framer.com/motion/
vite: vitejs.dev/guide/
react-icons: react-icons.github.io/
- - - - - - - - - - - - - - - - - - - - - - - - -
#reactjs #tailwind #framermotion #ecommerce #headphone #responsivewebsite #tailwindcss #reactwebsite #websitedesign #html #css #webdesign #webdevelopment #frontend #frontenddevelopment #uidesign #thecodingjourney #tcj #coding #reactjstutorial #codingtutorial #uiux
コメント