# Video Tutorials > Step-by-step web development video tutorials covering React, Next.js, JavaScript, and developer tooling. - **Source:** DevDreaming (https://devdreaming.com) - **Canonical URL:** https://devdreaming.com/videos --- - [Build an Amazing Personal Portfolio Website with Next.js, Three.js & Tailwind CSS](https://devdreaming.com/videos/3d-portfolio-using-nextjs-threejs-tailwindcss) -- Learn to build a responsive personal portfolio with Next.js, Three.js & Tailwind CSS! Add 3D visuals, smooth animations, and interactive features step-by-step. ([watch](https://www.youtube.com/watch?v=T5t46vuW8fo)) - [How to Build an Awesome 3D Landing Page for Apple iPhone with ReactJS, ThreeJS, and GSAP](https://devdreaming.com/videos/build-3d-landing-page-reactjs-threejs-gsap) -- Learn how to build an amazing 3D landing page for Apple iPhone using ReactJS, ThreeJS, and GSAP. This tutorial will guide you step by step to add and animate 3d model of iPhone in your website. ([watch](https://www.youtube.com/watch?v=cT160dOzpGY)) - [Build & Deploy a Full Stack AI Sass application using Next.js 15, Supabase, Replicate API and Stripe](https://devdreaming.com/videos/build-ai-saas-app-nextjs-supabase-replicate-stripe) -- Build a Fullstack AI SaaS app like PhotoAI using Next.js, Supabase, Replicate, and Stripe. Learn AI model training, payment integration, and deployment step-by-step. ([watch](https://www.youtube.com/watch?v=7AQNeii5K7E)) - [React Website Tutorial: Build Feature Rich Crypto Screener App with Tailwind CSS](https://devdreaming.com/videos/build-crypto-screener-app-with-react-tailwind-css) -- Learn how to create a feature-rich Crypto Screener App using React, Tailwind CSS, Context API, React Router and Recharts. Follow this step-by-step tutorial to build this multi-function application. ([watch](https://www.youtube.com/watch?v=JPlVb3t6kx8)) - [Build a Stunning Fashion Studio Website with ReactJS (locomotive-scroll + gsap + framer-motion)](https://devdreaming.com/videos/build-stunning-fashion-studio-website-with-reactJS-locomotive-scroll-gsap) -- Build a stunning Fashion Studio website with React JS and enhance user experience with Locomotive Scroll, GSAP and Framer Motion. Follow along with the video tutorial to learn complex animations and scrolling effects. ([watch](https://www.youtube.com/watch?v=Ra1Fsa9YJCk)) - [Creating an Amazing Portfolio Website with React JS, Framer-motion, and Styled-components](https://devdreaming.com/videos/build-stunning-portfolio-website-react-js-framer-motion) -- Learn how to build a professional portfolio website using React JS, Framer-motion, and Styled-components. Follow this step-by-step guide and create next level React JS portfolio website! ([watch](https://www.youtube.com/watch?v=jcohAIaSy2M)) - [Create a Mobile Responsive NFT Collection Website with ReactJS](https://devdreaming.com/videos/create-nft-collection-website-reactjs) -- Learn how to create a mobile responsive NFT collection website landing page with ReactJS in this step by step tutorial. Discover the use of GSAP, styled-components, React-Confetti, and more to create unique animations and background effects. ([watch](https://www.youtube.com/watch?v=edr2o59Twrs)) - [Build Deep Research AI Agent with Next.js, Vercel AI SDk and LLMs like Gemini, Deepseek & Gpt-4o](https://devdreaming.com/videos/deep-research-ai-agent-nextjs-aisdk-exasearch) -- Learn how to build a powerful Deep Research AI agent like Gemini or ChatGPT using Next.js, Vercel AI SDK, and Exa Search API. Create an intelligent system that generates follow-up questions, crafts optimal search queries, and compiles comprehensive research reports. ([watch](https://www.youtube.com/watch?v=zKN18GQBxCM)) - [Next.js Blog Tutorial: Build SEO Optimized Blog with Next.js, Contentlayer, and Tailwind CSS 🔥](https://devdreaming.com/videos/nextjs-seo-optimized-blog-tutorial-with-contentlayer-and-tailwind-css) -- Build a stunning static blog with Next.js, Tailwind CSS, and Contentlayer. Achieve top-notch performance, SEO, and elegant design with dark/light modes and Markdown support. ([watch](https://www.youtube.com/watch?v=1QGLHOaRLwM)) - [Nextjs Tutorial: Build a Mobile Responsive Portfolio with Tailwind CSS and Framer-motion](https://devdreaming.com/videos/nextjs-tutorial-build-portfolio-tailwind-css-framer-motion) -- Learn how to build a professional portfolio website using React JS, Framer-motion, and Styled-components. Follow this stLearn how to create a visually stunning, mobile-responsive portfolio using Next.js, Tailwind CSS, and Framer Motion in this tutorial. Follow step-by-step instructions, from setting up the environment to building the site. ([watch](https://www.youtube.com/watch?v=Yw7yWHigGKI)) - [Build a Responsive ReactJS Website with GSAP & Styled-Components🤩](https://devdreaming.com/videos/responsive-reactjs-website-gsap-styled-components) -- Learn to build a responsive Agency Landing Page in ReactJS using GSAP for cool scrolling animations and parallax effects. Learn React Hooks, folder structure, GSAP, and CSS animations from the video tutorial. ([watch](https://www.youtube.com/watch?v=aAEfBxcGpJ8)) - [Implement Smooth Scroll & Parallax Effect in Next.js using Lenis and GSAP](https://devdreaming.com/videos/smooth-scrolling-parallax-effect-nextjs) -- Learn how to add smooth scrolling with a parallax effect in Next.js using Lenis Scroll and GSAP. Build modern websites with animations that captivate users. ([watch](https://www.youtube.com/watch?v=QNh0MH-G3OM)) --- _This is the Markdown twin of a page on **DevDreaming** -- free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._