AWWW I

last class: peer feedback

block 3 (class 7 - 13) ^{April 17 - June 5}

• assignment: Scrolls
• code example: Editorial (primer for Scroll assignment)
• code example: position: sticky;
• code example: change image on scroll (Javascript)
• code example: change image on scroll (CSS only)
• code example: small scrolls
• code example: set time out
• code example: Scroll to div
• code example: Scroll Event
• code example: Changing image or text on scroll
• archive: semester 1 2022-2023

External links

Typography Basics

CSS Variables ^{W3 schools}

Multiple Columns ^{W3 schools}

Hyphenation ^{MDN Web docs}

ScrollTo

Draw on Scroll

---

block 2 (class 3 – 6) ^{march 6 - April 3}

• assignment: VJ
• cheat-sheet: JavaScript Basics
• cheat-sheet: JavaScript events
• cheat-sheet: Document Structure
• code example: HTML boilerplate/Basic page
• code example: HTML boilerplate with keyPress
• code example: Toggle
• code example: Pushbutton
• code example: Toggle + Pushbutton Combination
• cheat-sheet: Keynames
• code example: How to add audio
• code example: KeyPress + Image
• archive: semester 1 2022-2023

external links

• Adding Images (or music) to Glitch ^{Glitch Help}
• HTML Images ^{W3 Schools}
• Styling Images ^{W3 Schools}

block 1 (class 1 – 2) ^{feb 6 + feb 13}

• assignment: Coding en plein air
• code example: Positioning
• code example: Landscape
• code example: Landscape 2
• code example: Landscape 3
• code example: Landscape 4
• code example: Landscape 5
• code example: CSS animaiton

external links

• Styling a Div ^{W3 Schools}
• Positioning of Elements ^{MDN Docs}
• Shapes ^{W3 Schools}
• Border ^{W3 Schools}
• Rotate ^{MDN Docs}
• Colours ^{W3 Schools}
• Colours ^{W3 Schools}
• Gradients ^{MDN Docs}
• Linear Gradients ^{MDN Docs}
• Hover ^{MDN Docs}
• CSS animation ^{MDN Docs}
• CSS animation ^{W3 schools}
• CSS animation example ^{W3 schools}

AWWW II

last class: peer feedback

block 4 ^{may 8 - june 5}

assignment: Portals
• code example: basic boilerplate

block 2 ^{march 20 - april 24}

• assignment: Never Repeat the Same Code Twice
• code example: Vitamin collection website
• code example: JSON file
• code example: Flexboxes
• code example: Script Hints

External links:

• CSS Variables ^{W3 schools}
• A Complete Guide To Flexbox

---

block 1 ^{feb 6 - march 4}

• assignment: time + interface = ?
• code example: Basic Digital Clock
• code example: Basic Analog Clock
• code example: Basic Digital Clock with conditions
• cheat-sheet: JS refresh
• cheat-sheet: If Statements and Operators
• code example: Playing Audio
• code example: Drawing lines with HTML Canvas

external links

• Open Are.na Channel


• Javascript Date(); ^{W3 Schools}
• Javascript getHours(); ^{W3 Schools}