Learn how to transform a Figma design into a fully functioning website using Next.js, Framer Motion, and Tailwind CSS, build Metaversus, and gain the skills to build any website you can imagine!
⭐Special Black Friday Hostinger Deal - https://hostinger.com/javascript10
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
🔥ULTIMATE BLACK FRIDAY DISCOUNT ON JSM PRO COURSES
💻 JS Mastery Pro - https://jsmastery.pro/black-friday
✅ A unique BLACK_FRIDAY discount code is automatically applied!
📚 Materials/References:
GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/project_metaverse
Starter Code: https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/adrianhajdin/project_metaverse/tree/main/starter_repo
Figma File - https://www.figma.com/file/EyzNoOFak1Nb1bBx9ZKI7E/Modern-UI%2FUX-Framer-Motion?t=U27Izw4pXMDE1r3r-0
_app.js: https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/adrianhajdin/project_metaverse/blob/main/pages/_app.js
While developing this app, you'll learn the following:
- React project architecture and Clean Code best practices
- Next.js application structure
- Fundamental CSS properties to master flex using Tailwind CSS
- From soft and pleasant animations to complex gradients using Framer Motion
- Perfectly placed media queries for satisfactory responsiveness covering almost all devices
- Finally, you'll learn how to deploy your website to extremely fast servers and give it a custom domain name.
💻 Join JSM on Discord - https://discord.gg/n6EdbFJ
🐦 Follow JSM on Twitter - https://twitter.com/jsmasterypro
🖼️ Follow JSM Instagram - https://instagram.com/javascriptmastery
💼 Business Inquiries: [email protected]
Timestamps:
00:00:00 Intro
00:07:26 Layout
00:13:33 Navbar
00:27:08 Hero section
00:41:40 About section
00:55:04 Explore section
01:14:18 Get Started and New Features
01:31:05 World and Insights
01:47:06 Feedback and Footer
02:06:09 Deployment