SUPSI 2025 [last update: Sep 15 13:58]

---

Download resources
Figma

---

1. Basics

---

1. Structure
2. Box model
3. Positioning
4. Main tags

---

• Grid [Flex]

---

1. Horizontal alignment
2. Vertical alignment
3. Dimensions
4. Wrap
5. Responsive
6. Preset + variables

---

• Typography

---

1. Headings, paragraph, italic, bold
2. Alignments, kerning, letter spacing, word spacing, size, weights, columns
3. External fonts
4. External fonts + Flex

---

• Transform + Motion

---

1. Transform
2. Transform + Transition 1
3. Transform + Transition 2
4. Transform + Transition + Javascript
5. Transform + Transition + Javascript 2
6. Animation 1
7. Animation 2

• Javascript

---

1. Lesson 1: Click, Double Click, Mouseenter
2. Lesson 1: Click, Double Click, Mouseenter, Mousemove, Mouseleave, Resize
3. Lesson 1: Mousemove x, Mousemve y, Video play, Video pause, Video speed
4. Lesson 1: Window resize, Video volume
5. Lesson 1: Window resize, Video speed
6. Lesson 1: Mouseenter, Mouseleave, Array images
7. Lesson 1: Mousemove, Variable font
8. Lesson 1: Mouseenter, Mouseleave, Sound play, Sound pause
9. Lesson 1: Mouseclick, gallery


10. Lesson 2: Mousemove x
11. Lesson 2: Mousemove y
12. Lesson 2: Mousemove y, scale, Transition
13. Lesson 2: Mousemove x, reveal
14. Lesson 2: Mousemove x, reveal in y axis
15. Lesson 2: Mousemove y, reveal in y axis
16. Lesson 2: Resize x
17. Lesson 2: Resize y
18. Lesson 2: Window move x
19. Lesson 2: Window move y


20. Lesson 3: Face detection + div
21. Lesson 4: Hand detection + video
22. Lesson 4: Hand detection + sound
23. Lesson 4: Hand detection + sound + volume
24. Lesson 4: Hand detection + div + y


25. Lesson 5: Facial expressions
26. Lesson 5: How many people
27. Lesson 5: Proximity
28. Lesson 5: Mix of expressions + sound
29. Lesson 5: Proximity II
30. Lesson 5: Proximity III
31. Lesson 5: Posenet
32. Lesson 5: Object detection
33. Lesson 5: Mic

---

• Electron (only on your computer)

---

1. Electron JS (CPU, Ram, Battery...)
2. Electron JS Composition (CPU, Ram, Battery...)
3. Electron JS Variable font (CPU, Ram, Battery...)
4. Electron JS 1 Clock (CPU, Ram, Battery...)
5. Electron JS 2 Clock (CPU, Ram, Battery...)
6. Electron JS Realtime
7. Electron JS Realtime + DeepSeek
8. Electron JS Realtime + DeepSeek
9. Electron JS Realtime + DeepSeek + Eleven labs
10. Electron JS Hand tracking
11. Electron JS Hand tracking + Notifications