Lectures

Lecture 1.1 & 1.2: Introduction to HTML and CSS

Lecture slides will be updated during the course.

• Slides
  • Lecture 1.1 Web version, Searchable version (HT24)
  • Lecture 1.2 Web version, Searchable version (HT24)
• Code
  • Trinket 1: Basic HTML
  • Trinket 2: Basic CSS
  • Trinket 3: More CSS
  • Trinket 4: Multiple classes
  • Trinket 5: Layout sandbox
  • Trinket 6: Flexbox
• Reading material (tips)
  • MDN web docs - Getting started with HTML
  • MDN web docs - Getting started with CSS
  • MDN web docs - CSS Building blocks, The box model
  • MDN web docs - CSS Layout
  • A Complete Guide to Flexbox
• Videos (tips)
  • Inspecting the CSS Cascade using Firefox DevTools
• Other
  • Flexbox Froggy
  • Flexbox Defense

Lecture 2: Introduction to JavaScript

• Slides
  • Lecture 2 Web version, Searchable version (HT24)
• Code
  • Trinket, functions
  • Trinket, template for demo
  • Trinket, final state of demo files
• Reading material (tips)
  • JavaScript Guide in the MDN web docs
  • Using the console in Google Chrome link1, link2
  • Using the console in Firefox link 1, link 2, link 3

Lecture 3: More on event handling + animation

• Slides
  • Lecture 3 Web version, Searchable version (HT24)
• Code
  • Box sliders using id
  • Navigate DOM using event.target
  • Event bubbling demo.
  • Global event listener
  • Animating CSS properties
  • Animate when clicked
  • Animating transforms
  • Animation parameters
  • Easings
  • Click and hide

Lecture 4: Web Components

• Slides
  • Lecture 4 Web version, Searchable version (HT24)
• Code _ Web Component without shadow DOM
  • Web Component with shadow DOM
  • Web Component using a template
  • Web Component using attributes
  • Web Component using named slots
  • Web Component moving elements into the shadow DOM
  • <p-highlight>, highlightable paragraph
  • <image-selector> creating elements in shadow DOM
  • Animated door
  • Animated door + dispatching events
  • Christmas calendar
• Online resources
  • Bootstrap
  • INK
  • jQuery UI
  • Semantic UI
  • UIkit
  • Shoelace
  • Elix
  • PatternFly Element
  • Printable grid pages, https://sneakpeekit.com/
  • bestofjs.org

Lecture 5: Project Q/A, Wireflow diagrams

• Slides
  • Lecture 5 Web version, Searchable version (HT24)
• Reading material
  • Wireflows: A UX Deliverable for Workflows and Apps
  • Which UX DEliverables Are Most Commonly Created and Shared
  • Lim, Y., Lee, S., & Kim, D. 2011 Dec 30. Interactivity Attributes for Expression-oriented Interaction Design. International Journal of Design. http://www.ijdesign.org/index.php/IJDesign/article/view/718/370, http://www.ijdesign.org/index.php/IJDesign/article/viewFile/718/354
• GUI libraries, etc.
  • bestofjs.org
  • Bootstrap
  • INK
  • jQuery UI
  • Semantic UI
  • UIkit
• Tools for diagrams
  • Printable grid pages, https://sneakpeekit.com/
  • Penpot
  • Axure - installed on Windows computers at IDA
  • Figma
  • MockFlow
  • NinjaMock
  • Pencil
  • Wireframe.cc
  • Draw.io
  • Inkscape
  • Vanila Wireflow
  • yEd
  • MS Visio (Log into Lisam first!)