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 (HT25) (This is a merge of actual lecture slides and the recovered broken slide deck I had planned to use, hopefully the order makes sense. The examples have now been run and have actual outputs.)

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

Videos (tips)

• JavaScript Quirks for Python Developers
  • For those of you familiar with Python, JavaScript is just about similar enough to give you a false sense of security, but different enough to trip you up. This covers some of the most important differences to keep in mind.
• JavaScript var, let, and const explained
  • Why you should prefer let and const over var. (And maybe const over let too.)
• The different types of JavaScript functions explained
  • Useful for understanding function expressions vs declarations vs arrow functions.

Lecture 3: More on event handling + animation

Slides

• Lecture 3 Web version, Searchable version (HT25) (Now with updated anime.js examples compatible with version 4.x!)

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 using onComplete
• Click and hide using promise

Lecture 4: Web Components

Slides

• Lecture 4 Web version, Searchable version (HT25)

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

Videos (tips)

• Learn Web Components In 25 Minutes

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!)