Beginner Three.js & GSAP Tutorial | Build and Deploy an Apple Website using React
Recreate the Apple iPhone 15 Pro website, combining GSAP animations and Three.js 3D effects. From custom animations to animated 3D models, this tutorial covers it all.
⭐ Hostinger - https://hostinger.com/mastery10
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
🌟 Sentry - https://bit.ly/4abT6PG
📙 Three.js & GSAP Guide - https://resource.jsmastery.pro/threejs-gsap-guide?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=threejs_guide
📘 ESLint & Prettier Guide - https://resource.jsmastery.pro/eslint-prettier-guide?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=eslint_guide
🌟 Become a top 1% Next.js 14 developer: https://www.jsmastery.pro/ultimate-next-course?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=next14
🚀 Skyrocket your career in 4 months: https://jsmastery.pro/full-stack-web-development-bootcamp?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=masterclass
📚 Materials/References:
GSAP Workshop Starter: https://github.com/JavaScript-Mastery-Pro/gsap-cc-starter
GSAP Workshop Final: https://github.com/JavaScript-Mastery-Pro/gsap-crash-course
GitHub Repository (give it a star ⭐): https://github.com/adrianhajdin/iphone
README (assets & code): https://github.com/adrianhajdin/iphone/blob/main/README.md
GLTFs into JSX: https://github.com/pmndrs/gltfjsx
💻 Join our Discord Community - https://discord.gg/n6EdbFJ
🐦 Follow us on Twitter: https://twitter.com/jsmasterypro
🖼️ Follow us on Instagram: https://instagram.com/javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 — Intro
00:01:47 — GSAP and 3D Crash Course
00:11:23 — GSAP Workshop
00:39:33 — Setup hosting & domain
00:42:00 — Project Setup
00:54:50 — Navbar
01:01:37 — Hero section
01:16:39 — Highlights section
01:23:19 — Video Carousel
02:02:53 — 3D Model section
02:50:00 — Sentry Performance
03:06:30 — Features section
03:27:51 — How it works section
03:41:16 — Footer
03:47:12 — Deployment
Видео Beginner Three.js & GSAP Tutorial | Build and Deploy an Apple Website using React канала JavaScript Mastery
⭐ Hostinger - https://hostinger.com/mastery10
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
🌟 Sentry - https://bit.ly/4abT6PG
📙 Three.js & GSAP Guide - https://resource.jsmastery.pro/threejs-gsap-guide?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=threejs_guide
📘 ESLint & Prettier Guide - https://resource.jsmastery.pro/eslint-prettier-guide?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=eslint_guide
🌟 Become a top 1% Next.js 14 developer: https://www.jsmastery.pro/ultimate-next-course?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=next14
🚀 Skyrocket your career in 4 months: https://jsmastery.pro/full-stack-web-development-bootcamp?utm_source=youtube&utm_medium=video&utm_campaign=apple_website_tutorial&utm_content=masterclass
📚 Materials/References:
GSAP Workshop Starter: https://github.com/JavaScript-Mastery-Pro/gsap-cc-starter
GSAP Workshop Final: https://github.com/JavaScript-Mastery-Pro/gsap-crash-course
GitHub Repository (give it a star ⭐): https://github.com/adrianhajdin/iphone
README (assets & code): https://github.com/adrianhajdin/iphone/blob/main/README.md
GLTFs into JSX: https://github.com/pmndrs/gltfjsx
💻 Join our Discord Community - https://discord.gg/n6EdbFJ
🐦 Follow us on Twitter: https://twitter.com/jsmasterypro
🖼️ Follow us on Instagram: https://instagram.com/javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 — Intro
00:01:47 — GSAP and 3D Crash Course
00:11:23 — GSAP Workshop
00:39:33 — Setup hosting & domain
00:42:00 — Project Setup
00:54:50 — Navbar
01:01:37 — Hero section
01:16:39 — Highlights section
01:23:19 — Video Carousel
02:02:53 — 3D Model section
02:50:00 — Sentry Performance
03:06:30 — Features section
03:27:51 — How it works section
03:41:16 — Footer
03:47:12 — Deployment
Видео Beginner Three.js & GSAP Tutorial | Build and Deploy an Apple Website using React канала JavaScript Mastery
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
JavaScript ES2020 - The Most Requested Feature Explained in 10 MinutesMUST USE Websites & Tools for Web DevelopersReact Hooks - Most Used FeaturesBuild and Deploy a Fully Responsive Website with Modern UI/UX in React JS with TailwindMaster the use of APIs and API Testing | Complete Crash CourseLearn Docker in 1 Hour | Full Docker Course for BeginnersFull Stack MERN Project - Implement MERN Comments | React + Redux, Node, Express, MongoDBBuild and Deploy a Full Stack AI SaaS Platform with Next js 14, TypeScript, StripeFull Stack MERN Project - Pagination & Search | React + Redux, Node, Express, MongoDBBuild and Deploy an ARTIFICIAL INTELLIGENCE React App | Alan AI, JavaScriptBuild and Deploy a Full Stack Video Conferencing App with Next JSBuild and Deploy a React Admin Dashboard With Real time Data, Charts, Events, Kanban, CRM, and MoreMaster Async JavaScript using Async/Await | Quokka JSThe Story of JavaScript MasteryWeb Scraping Full Course 2024 | Build and Deploy eCommerce Price TrackerBuild and Deploy a Full Stack Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSSBuild and Deploy 5 JavaScript & React API Projects in 10 Hours - Full Course | RapidAPIBuild and Deploy a Modern Real Estate App | React Website TutorialBuild and Deploy an AI-Powered 3D Website Using React | 2024 Three JS Course Tutorial for BeginnersExclusive First Look at GitHub Copilot - All you need to know