Animate Websites with Framer-Motion (Hands-On 2+ Portfolio Projects with React, TailwindCSS, NextJs)
Czero, Backend Developer
Regardez ce cours et des milliers d'autres
Regardez ce cours et des milliers d'autres
Leçons de ce cours
-
-
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
-
-
- --
- Niveau débutant
- Niveau intermédiaire
- Niveau avancé
- Tous niveaux
Généré par la communauté
Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.
10
apprenants
--
À propos de ce cours
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.
Projet de cours pratique
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
Notes attribuées au cours
Pourquoi s'inscrire à Skillshare ?
Suivez des cours Skillshare Original primés
Chaque cours comprend de courtes leçons et des travaux pratiques
Votre abonnement soutient les enseignants Skillshare
Apprenez, où que vous soyez
Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.
