Lectures

Lecture 1.1 & 1.2: Introduction to HTML and CSS

• Slides
  • Lecture 1.1 Web version, Searchable version (HT25)
  • Lecture 1.2 Web version, Searchable version (HT25)
• 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

  • We recommend drawing wireframes and wireflows with pen and paper first to quickly sketch out ideas. Once you have a basic idea of the structure of your application, you can use one of the following tools to create more formal wireframes and wireflows.

  • Note: Many of these tools try to pull you towards building hi-fi prototypes. Don’t waste time on that. Focus on wireframes and wireflows only! The point here is to quickly sketch out ideas and later to finalize them into a consistent and easily accessible specification, not to create polished designs that require special tools to view/edit or are too detailed and difficult to translate into code given the time constraints and your previous experience. You can consider the implementation part of the project as building a hi-fi prototype using HTML/CSS/JS.

  • Printable grid pages, https://sneakpeekit.com/

  • MockFlow

  • NinjaMock

  • Pencil

  • Wireframe.cc

  • Draw.io

  • Inkscape

  • Vanila Wireflow

  • yEd

  • MS Visio (Log into Lisam first!)