Animate Websites with Framer-Motion (Hands-On 2+ Portfolio Projects with React, TailwindCSS, NextJs)
Czero, Backend Developer
Assista a este curso e milhares de outros
Assista a este curso e milhares de outros
Aulas neste curso
-
-
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
-
-
- --
- Nível iniciante
- Nível intermediário
- Nível avançado
- Todos os níveis
Gerado pela comunidade
O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.
11
Estudantes
--
Sobre este curso
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.
Projeto prático de curso
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
Nota do curso
Por que fazer parte da Skillshare?
Faça cursos premiados Skillshare Original
Cada curso possui aulas curtas e projetos práticos
Sua assinatura apoia os professores da Skillshare
Aprenda em qualquer lugar
Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.
