Next JS Application : Build a Modern website using Nextjs 13, Framer-motion, Tailwind CSS

Portfolio websites with React.js, Next.js, Tailwind CSS, Framer Motion, Three.js and Chakra UI - Next JS Application : Build a Modern website using Nextjs 13, Framer-motion, Tailwind CSS

5.0 (2)

37 learners

What you'll learn

This course includes

82.3 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

next js application next 13 next 13 tutorial next js next.js next.js 13 next.js 13 application next js application example modern next js website tailwindcss nextjs next js tutorial next js 13

Full Transcript

🚀 Ready to take your web development skills to the next level with Next js Application? Join me in this step-by-step tutorial as I will guide you through building a sleek and modern website using the latest technologies. Learn how to create a stunning web experience with Next.js 13, harness the power of TailwindCSS for responsive design, and add captivating animations with Framer Motion to properly visualise the power for Next js Application. 🌐 Live Website: https://studio.reactbd.com/ 📦 GitHub Repository: https://github.com/noorjsdivs/studioyt 📥 GitHub Clone: https://github.com/noorjsdivs/studioyt.git In this tutorial, you will: Set up a project with Next.js 13's new app router. Create a visually appealing and responsive design with TailwindCSS. Add smooth and captivating animations with Framer Motion for Next js Application. Stay up-to-date with the latest web development technologies. Don't miss this opportunity to enhance your web development skills and create a professional-grade, modern website. Subscribe for more coding tutorials and stay on the cutting edge of web development! #WebDevelopment #NextJS13 #TailwindCSS #FramerMotion #ModernWebsite #CodingTutorial #ResponsiveDesign #ProfessionalWebDev #WebDevSkills #NextRouter #Subscribe #StayUpdated #WebDevJourney #CreateWithCode 🕐 TIMESTAMPS: 00:00 Introduction 03:45 Starting the Build 06:14 Cleanup the Default Project 10:45 Creating RootLayout 19:30 Header Start 59:45 Font Optimization 1:03:00 Footer Start 1:26:45 Hero Section Start 1:28:35 Creating the Pages 1:40:25 Clients Start 1:46:40 Testimonials Start 1:53:05 Services Start 2:10:50 Contact Section Start 2:15:30 Process Page Start 2:16:35 Discover Section Start 2:27:45 Build Section Start 2:29:49 Deliver Section Start 2:36:00 Value Section Start 2:41:40 Contact Page Start 2:44:09 Contact Details Start 2:49:59 Contact Form Start 2:57:37 About Page Start 3:00:40 Cultures Section Start 3:03:10 Pushing to github 3:05:15 Conclusion