WFC Internal css Gratis

Learn CSS Animations

Add motion with CSS animations while keeping usability in mind.

185 materi 8 sesi Belajar penuh di WFC Diperbarui 26 Mei 2026

Login untuk Mulai Lihat Kurikulum

Learn CSS Animations

Kurikulum internal

Materi, practice, quiz, dan lab disusun agar selesai langsung di dalam WFC.

Total item 185

Semua materi yang tersedia di kurikulum ini.

Practice 133

Latihan langsung untuk mengasah pemahaman.

Quiz + Lab 48

Kombinasi evaluasi cepat dan praktik terstruktur.

Overview

Tentang kursus ini

Add motion with CSS animations while keeping usability in mind.

Level: advanced
Topik: css
Estimasi jam: 2
Total sesi: 7
Total item kurikulum: 139

Curriculum

Materi dan sesi belajar

185 item

Sesi

Animations and Accessibility

2 materi 2 aktivitas

Materi Bacaan

Baca dulu inti pembahasannya sebelum lanjut ke pengerjaan.

What Are CSS Animations, and How Do They Work?

Animations and Accessibility

Setelah ini Mulai Aktivitas

What Are Accessibility Concerns Around Using Animations, and How Can prefers-reduced-motion Help?

Animations and Accessibility

Setelah ini Mulai Aktivitas

Aktivitas Terpisah

Practice, quiz, lab, review, dan evaluasi ada di area kerja tersendiri.

Animations and Accessibility Section Quiz 1

Animations and Accessibility

Animations and Accessibility Checkpoint Quiz

Animations and Accessibility

Sesi

Build an Animated Ferris Wheel

0 materi 38 aktivitas

Aktivitas Terpisah

Practice, quiz, lab, review, dan evaluasi ada di area kerja tersendiri.

Step 1

Build an Animated Ferris Wheel

Step 2

Build an Animated Ferris Wheel

Step 3

Build an Animated Ferris Wheel

Step 4

Build an Animated Ferris Wheel

Step 5

Build an Animated Ferris Wheel

Step 6

Build an Animated Ferris Wheel

Step 7

Build an Animated Ferris Wheel

Step 8

Build an Animated Ferris Wheel

Step 9

Build an Animated Ferris Wheel

Step 10

Build an Animated Ferris Wheel

Step 11

Build an Animated Ferris Wheel

Step 12

Build an Animated Ferris Wheel

Step 13

Build an Animated Ferris Wheel

Step 14

Build an Animated Ferris Wheel

Step 15

Build an Animated Ferris Wheel

Step 16

Build an Animated Ferris Wheel

Step 17

Build an Animated Ferris Wheel

Step 18

Build an Animated Ferris Wheel

Step 19

Build an Animated Ferris Wheel

Step 20

Build an Animated Ferris Wheel

Step 21

Build an Animated Ferris Wheel

Step 22

Build an Animated Ferris Wheel

Step 23

Build an Animated Ferris Wheel

Step 24

Build an Animated Ferris Wheel

Step 25

Build an Animated Ferris Wheel

Step 26

Build an Animated Ferris Wheel

Step 27

Build an Animated Ferris Wheel

Step 28

Build an Animated Ferris Wheel

Step 29

Build an Animated Ferris Wheel

Build an Animated Ferris Wheel Section Quiz 1

Build an Animated Ferris Wheel

Build an Animated Ferris Wheel Section Quiz 2

Build an Animated Ferris Wheel

Build an Animated Ferris Wheel Section Quiz 3

Build an Animated Ferris Wheel

Build an Animated Ferris Wheel Section Quiz 4

Build an Animated Ferris Wheel

Build an Animated Ferris Wheel Section Quiz 5

Build an Animated Ferris Wheel

Build an Animated Ferris Wheel Section Quiz 6

Build an Animated Ferris Wheel

Build an Animated Ferris Wheel Section Quiz 7

Build an Animated Ferris Wheel

Build an Animated Ferris Wheel Section Quiz 8

Build an Animated Ferris Wheel

Build an Animated Ferris Wheel Checkpoint Quiz

Build an Animated Ferris Wheel

Sesi

Build a Moon Orbit

0 materi 3 aktivitas

Aktivitas Terpisah

Practice, quiz, lab, review, dan evaluasi ada di area kerja tersendiri.

Build a Moon Orbit

Latihan lab singkat. Fokus langsung ke pengerjaan.

Build a Moon Orbit Section Quiz 1

Build a Moon Orbit

Build a Moon Orbit Checkpoint Quiz

Build a Moon Orbit

Sesi

Build a Flappy Penguin

0 materi 131 aktivitas

Aktivitas Terpisah

Practice, quiz, lab, review, dan evaluasi ada di area kerja tersendiri.

Step 1

Build a Flappy Penguin

Step 2

Build a Flappy Penguin

Step 3

Build a Flappy Penguin

Step 4

Build a Flappy Penguin

Step 5

Build a Flappy Penguin

Step 6

Build a Flappy Penguin

Step 7

Build a Flappy Penguin

Step 8

Build a Flappy Penguin

Step 9

Build a Flappy Penguin

Step 10

Build a Flappy Penguin

Step 11

Build a Flappy Penguin

Step 12

Build a Flappy Penguin

Step 13

Build a Flappy Penguin

Step 14

Build a Flappy Penguin

Step 15

Build a Flappy Penguin

Step 16

Build a Flappy Penguin

Step 17

Build a Flappy Penguin

Step 18

Build a Flappy Penguin

Step 19

Build a Flappy Penguin

Step 20

Build a Flappy Penguin

Step 21

Build a Flappy Penguin

Step 22

Build a Flappy Penguin

Step 23

Build a Flappy Penguin

Step 24

Build a Flappy Penguin

Step 25

Build a Flappy Penguin

Step 26

Build a Flappy Penguin

Step 27

Build a Flappy Penguin

Step 28

Build a Flappy Penguin

Step 29

Build a Flappy Penguin

Step 30

Build a Flappy Penguin

Step 31

Build a Flappy Penguin

Step 32

Build a Flappy Penguin

Step 33

Build a Flappy Penguin

Step 34

Build a Flappy Penguin

Step 35

Build a Flappy Penguin

Step 36

Build a Flappy Penguin

Step 37

Build a Flappy Penguin

Step 38

Build a Flappy Penguin

Step 39

Build a Flappy Penguin

Step 40

Build a Flappy Penguin

Step 41

Build a Flappy Penguin

Step 42

Build a Flappy Penguin

Step 43

Build a Flappy Penguin

Step 44

Build a Flappy Penguin

Step 45

Build a Flappy Penguin

Step 46

Build a Flappy Penguin

Step 47

Build a Flappy Penguin

Step 48

Build a Flappy Penguin

Step 49

Build a Flappy Penguin

Step 50

Build a Flappy Penguin

Step 51

Build a Flappy Penguin

Step 52

Build a Flappy Penguin

Step 53

Build a Flappy Penguin

Step 54

Build a Flappy Penguin

Step 55

Build a Flappy Penguin

Step 56

Build a Flappy Penguin

Step 57

Build a Flappy Penguin

Step 58

Build a Flappy Penguin

Step 59

Build a Flappy Penguin

Step 60

Build a Flappy Penguin

Step 61

Build a Flappy Penguin

Step 62

Build a Flappy Penguin

Step 63

Build a Flappy Penguin

Step 64

Build a Flappy Penguin

Step 65

Build a Flappy Penguin

Step 66

Build a Flappy Penguin

Step 67

Build a Flappy Penguin

Step 68

Build a Flappy Penguin

Step 69

Build a Flappy Penguin

Step 70

Build a Flappy Penguin

Step 71

Build a Flappy Penguin

Step 72

Build a Flappy Penguin

Step 73

Build a Flappy Penguin

Step 74

Build a Flappy Penguin

Step 75

Build a Flappy Penguin

Step 76

Build a Flappy Penguin

Step 77

Build a Flappy Penguin

Step 78

Build a Flappy Penguin

Step 79

Build a Flappy Penguin

Step 80

Build a Flappy Penguin

Step 81

Build a Flappy Penguin

Step 82

Build a Flappy Penguin

Step 83

Build a Flappy Penguin

Step 84

Build a Flappy Penguin

Step 85

Build a Flappy Penguin

Step 86

Build a Flappy Penguin

Step 87

Build a Flappy Penguin

Step 88

Build a Flappy Penguin

Step 89

Build a Flappy Penguin

Step 90

Build a Flappy Penguin

Step 91

Build a Flappy Penguin

Step 92

Build a Flappy Penguin

Step 93

Build a Flappy Penguin

Step 94

Build a Flappy Penguin

Step 95

Build a Flappy Penguin

Step 96

Build a Flappy Penguin

Step 97

Build a Flappy Penguin

Step 98

Build a Flappy Penguin

Step 99

Build a Flappy Penguin

Step 100

Build a Flappy Penguin

Step 101

Build a Flappy Penguin

Step 102

Build a Flappy Penguin

Step 103

Build a Flappy Penguin

Step 104

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 1

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 2

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 3

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 4

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 5

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 6

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 7

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 8

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 9

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 10

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 11

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 12

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 13

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 14

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 15

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 16

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 17

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 18

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 19

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 20

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 21

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 22

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 23

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 24

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 25

Build a Flappy Penguin

Build a Flappy Penguin Section Quiz 26

Build a Flappy Penguin

Build a Flappy Penguin Checkpoint Quiz

Build a Flappy Penguin

Sesi

Build a Personal Portfolio

0 materi 3 aktivitas

Aktivitas Terpisah

Practice, quiz, lab, review, dan evaluasi ada di area kerja tersendiri.

Build a Personal Portfolio

Latihan lab singkat. Fokus langsung ke pengerjaan.

Build a Personal Portfolio Section Quiz 1

Build a Personal Portfolio

Build a Personal Portfolio Checkpoint Quiz

Build a Personal Portfolio

Sesi

CSS Animations Review

0 materi 3 aktivitas

Aktivitas Terpisah

Practice, quiz, lab, review, dan evaluasi ada di area kerja tersendiri.

CSS Animations Review

CSS Animations Review

CSS Animations Review Section Quiz 1

CSS Animations Review

CSS Animations Review Checkpoint Quiz

CSS Animations Review

Sesi

CSS Animations Quiz

0 materi 2 aktivitas

Aktivitas Terpisah

Practice, quiz, lab, review, dan evaluasi ada di area kerja tersendiri.

CSS Animations Quiz

CSS Animations Quiz

CSS Animations Quiz Checkpoint Quiz

CSS Animations Quiz

Sesi

Evaluasi Akhir

0 materi 1 aktivitas

Aktivitas Terpisah

Practice, quiz, lab, review, dan evaluasi ada di area kerja tersendiri.

Final Exam: Learn CSS Animations

Evaluasi Akhir