Build 6+ Animated Websites: Framer-Motion,TailwindCSS,NextJs

Download an integrated development environment (IDE) to write and manage your code, with VSCode the recommended standard for building sites in React and Tailwind.

Explore how Node.js lets you run JavaScript outside the browser and powers development tools, with npm for managing packages and starting a local server via npm run dev.

Discover Tailwind CSS integration with React and Next.js, using Wheat for rapid setup and live updates. Follow framework guides to build fast, single page websites.

Learn to set up a React + Vite project, install Tailwind CSS, and structure a website with components (navbar, hero, sections) in App.jsx, exporting and importing to compose the page.

Set up a Next.js project and leverage built-in routing for smoother frontend development. Build Tailwind CSS UI with a navbar and hero, highlighting SEO and image optimization benefits.

Master the GitHub desktop app: login, manage repositories with drag and drop folders, commit changes, push to the cloud, and fetch to stay up to date across devices.

Clone a GitHub repository to your local machine by selecting a local path and initiating the clone, then view the commit history.

Initialize a fresh local repository by removing the dot git folder before copying a project, then use GitHub Desktop to publish it, and learn to discard changes.

Master source control with GitHub Desktop by reviewing, discarding, and committing changes across files, safely testing AI-generated updates, and keeping projects under versioned control.

Master motion basics in a react project by importing the motion package, applying tailwind classes, and using initial, while in view, animate, duration, and hover or tap interactions.

Explore the motion library on motion.dev, use the quickstart for react, and leverage reusable components to implement hide and show animations for our projects.

Learn animations in challenge 1 by animating a box from y -100 and opacity zero to y zero and opacity one, in view, with hover rotate 90 and tap 360.

Animate left and right paragraphs using motion paragraph tags, tailwind classes, and a 0.6 second transition to create visible slide-in effects.

Apply contrast, repetition, alignment, and proximity with white space, design a consistent navigation bar with reusable buttons and cards, and use a four-color palette for readability.

Create a responsive portfolio with changing colors and a starry background from react three library, featuring a navbar, about, interactive projects, contact, and footer with hero animations.

Create a Next.js hero section by exporting components, importing framer motion templates, styling with TailwindCSS, and integrating a color-changing background with 3D stars, a profile image, and animated buttons.

Build a stack section as a client component, using Framer Motion for animations and Tailwind CSS for a responsive grid of icons with color-changing hover effects.

Extend the about section with a client component and framer motion for animated elements, mapping a skills array to show icon, title, and description.

Create a continuous logo ticker in a Next.js component using framer-motion and tailwind, mapping an images array to scroll logos with an infinite translateX animation and subtle fade.

Reuse the contact and footer components from the previous project by importing them into page six, leaving only icons in the footer and keeping the email in the contact section.

Edit and reuse the navbar, assign ids for about, portfolio, and contact, remove hashtags, and test for smooth scrolling and responsive behavior.

Explore why Next.js suits frontend-first sites, with SEO advantages, and learn to structure folders, create components, and set layouts with fonts to efficiently build a portfolio website.

Set up the project by running the install, create assets and components (hero, navbar) with ES6 TSX, export hero, and run npm run dev to view on localhost.

Create a dynamic hero section using Framer Motion, Next.js, and Tailwind CSS in a client component, featuring a planet backdrop, gradient backgrounds, and animated profile image with call-to-action buttons.

Create an about section component in a Next.js app using Tailwind CSS, a responsive three-column grid, a progress component, and images to showcase skills, front end, back end, and DevOps.

Create a logo animation component with framer motion and next/image, building an infinite horizontal scroll by mapping duplicated logo images and styling for responsive hero placement.

Create a client-side portfolio section on the home page by importing React, using useState and useEffect, and mapping projects to render selectable items with images and descriptions.

Create a responsive key metrics component using Framer Motion and Tailwind CSS in a Next.js project, animating metrics on viewport with id, value, label, and description.

Build a stack component and animate it with Framer Motion using an Intersection Observer to reappear on scroll, featuring stack items such as Framer, Figma, React, Node, MongoDB, and Docker.

Create a services section by building an array of service objects with id, title, and description, then map them into a responsive Tailwind layout with a sticky heading.

Create a responsive contact section and footer with Framer Motion animations and interactive hover effects, featuring a two-column grid, contact details, and an embedded Google map.

Build a responsive footer using React Icons, a predefined social links array, and absolute positioned decorative elements; learn to map links, style with flexbox, and adapt for mobile and desktop.

Learn to build a responsive navbar with Next.js link components for client-side navigation, manage mobile state with useState, and implement desktop and mobile layouts with toggle and smooth hover animations.

Test and fix the website by validating the nav bar, portfolio, and stack sections, and implement ids and smooth scroll, with reduced motion considerations in global css.

Build a responsive animated portfolio with framer-motion driven hero, a rotatable background object, name and title, metrics, a text reveal, portfolio, services, and a contact footer with social icons.

Set up a Next.js project by creating app, components, public, and images folders; add a profile placeholder image; install Framer Motion and React Icons; proceed to the hero section.

Import the grain image, place a fixed, low-opacity background behind the hero component, and apply a dark gray global background to add the grain effect to the portfolio.

Create a wall hero with a centered profile picture over rotating decorative shapes powered by framer motion, mapping sizes behind the image, and displaying John Doe, full stack developer.

Build a client component that renders a services section with Framer Motion, animating an array of services with staggered, wave-like entrances.

Build an animated contact section for a Next.js site using Framer Motion and Tailwind, with hover and viewport animations, featuring phone, email, address, and an embedded Google map.

Create a footer component with social icons and an email link, exported for reuse and added to the page, using responsive flexbox and tailwind styling.

Reuse the existing navigation bar to run final testing and fix white space with overflow-x clip, while enabling smooth scroll and responsive tweaks for about and services.

Begin in VS code to set up a Next.js project, create and export components, then import them into page six, and build the section and hero components sequentially.

Create a reusable section component with consistent borders and padding, using Tailwind merge to resolve conflicts, and apply it to the hero section with id, border top, and padding props.

Create a call to action button with a glowing tailwind style and chevron right icon that links to the portfolio section; define its text prop and optional ref.

Create a reusable button glowing component for the hero section in a Next.js project, using TSX props for text and href with a chevron icon and hover glow.

Create a responsive hero section with framer motion, gradient heading, and a glowing button with hero image, plus npm package setup and icon links to contact and portfolio.