Animate Websites with Framer-Motion (Hands-On 2+ Portfolio Projects with React, TailwindCSS, NextJs)
Czero, Backend Developer
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
1.
Intro
2:22
-
2.
IDE
1:59
-
3.
What is Node.js
0:48
-
4.
About TailwindCSS
2:21
-
5.
How to Setup NextJs Project
6:29
-
6.
Motion Basics
5:17
-
7.
Motion Library
0:35
-
8.
Challenge 1
1:51
-
9.
Challenge 2
1:38
-
10.
Create Reusable Navigation Bar
8:45
-
11.
Project 1: Intro
1:02
-
12.
Project 1: Setup
1:23
-
13.
Project 1: Grain Effect
1:35
-
14.
Project 1: Hero Section
6:16
-
15.
Project 1: Services Section
6:37
-
16.
Project 1: Contact Section
7:33
-
17.
Project 1: Footer Section
4:21
-
18.
Project 1: Navbar and Final Testing
4:28
-
19.
Project 2: Intro
1:26
-
20.
Project 2: Hero Section
23:58
-
21.
Project 2: Stack Section
14:50
-
22.
Project 2: About Section
11:50
-
23.
Project 2: Logo Ticker
4:42
-
24.
Project 2: Contact and Footer Section
0:43
-
25.
Project 2: Navbar and Final Testing
1:47
-
26.
Project 3: Setup
0:37
-
27.
Project 3: Section Component
5:41
-
28.
Project 3: Call to Action Button
4:57
-
29.
Project 3: Glowing Button
5:27
-
30.
Project 3: Hero Section
10:17
-
-
- --
- Nivel principiante
- Nivel intermedio
- Nivel avanzado
- Todos los niveles
Generado por la comunidad
El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.
10
Estudiantes
--
Proyectos
Acerca de esta clase
This course is for developers who want to bring their websites to life with smooth and modern animations. You’ll learn how to use Framer Motion with Next.js, React, and TailwindCSS to build animated websites from scratch.
Throughout the course, we’ll cover animation basics, advanced transitions, interactive UI effects, and how to make your site feel modern and polished. By the end, you'll know how to use Framer Motion to add eye-catching animations to any website or app.
Proyecto de clase práctica
Build an Animated Website with Framer Motion
In this assignment, you will build a modern animated website using Framer Motion.
Your task is to:
-
Create a Next.js website with React and TailwindCSS
-
Use Framer Motion to add animations to elements - Design at least 3 pages (for example: Home, About, and Projects)
To share your project, publish it to GitHub and include the link in "Submit Project". Here's how:
a) Create a GitHub Repository
b) Upload your project using GitHub Desktop, git commands, or manual upload
c) Share the Repository Link
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
