Animate Websites with Framer-Motion (Hands-On 2+ Portfolio Projects with React, TailwindCSS, NextJs)
Czero, Backend Developer
Schau dir diesen Kurs und Tausende anderer Kurse an
Schau dir diesen Kurs und Tausende anderer Kurse an
Einheiten dieses Kurses
-
-
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
-
-
- --
- Anfänger-Niveau
- Fortgeschrittenes Niveau
- Fortgeschrittenes Niveau
- Jedes Niveau
Von der Community generiert
Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.
10
Teilnehmer:innen
--
Projekte
Über diesen Kurs
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.
Praxisnahes Kursprojekt
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
Kursbewertung
Warum lohnt sich eine Mitgliedschaft bei Skillshare?
Nimm an prämierten Skillshare Original-Kursen teil
Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen
Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare
Lerne von überall aus
Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.
