ZHDK 2024 [last update: 27 Sep 16:05]

---

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

---

• Javascript

---

1. Slider
2. Row, lines and image reveal

---

• Boilerplate

---

1. Basic website 1
2. Basic website 2

---

• 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