Course Calendar

All code written in class available on GitHub.

  1. Course Overview; Valid, Semantic HTML Week One

    1. Monday, January 9 Video

      1. Welcome & introductions
      2. Course policies & calendar
      3. Course technologies
    2. Wednesday, January 11 Video

      1. Valid, semantic HTML
      2. MDN HTML reference
      3. Forbidden tags/patterns
      4. HTML linting

    Assigned Work

    • To Read

      1. Course policies, calendar, and projects [Online students]
      2. Wroblewski, Mobile First, Introduction & Part 1 (Ch. 1-3)
      3. Get familiar with the contents and organization of the Mozilla Developer Network’s Web technology for developers
    • To Do

      1. Submit ITMD 362 Survey and Contract (link in your @hawk.iit.edu inbox; email instructor at karl.stolley@gmail.com if you did not receive it)
      2. Create Basecamp account (invite will arrive after you submit the Survey and Contract)
      3. Technology setup (Editor; Git, Node.js)
  2. Mobile-First, Relative-Unit CSS Week Two

    1. Monday, January 16

      1. No Class; MLK Holiday
    2. Wednesday, January 18 Video

      1. MDN CSS reference
      2. Relative units in CSS
      3. Media queries
      4. CSS linting

    Assigned Work

    • To Read

      1. Marcotte, “Responsive Web Design
      2. Jehl, Responsible Responsive Design, Introduction; Chapters 1 & 2
    • To Do

      1. Production Problem 01
  3. Unobtrusive JavaScript; Responsive Design Week Three

    1. Monday, January 23 Video

      1. Introduce Project One: Onboarding
      2. MDN JavaScript and DOM references
      3. Unobtrusive JavaScript
      4. Events and the event loop
      5. JavaScript hinting and linting
    2. Wednesday, January 25 Video

      1. Responsive Web Design review
      2. Finding (not choosing) breakpoints
      3. Sizing and layouts with form elements

    Assigned Work

  4. Touchscreen Interfaces, Form Elements, and Responsive Layouts Week Four

    1. Monday, January 30 Video

      1. HCI of touchscreens
      2. Form elements: accessible HTML structures
    2. Wednesday, February 1 Video

      1. Form elements: CSS styling and the road to hell
      2. The form portion of Normalize.css
      3. Useful accessibility article for reference
      4. Form elements within responsive layouts

    Assigned Work

    • To Read

      1. MDN, HTML Forms Guide
      2. Clark, Designing for Touch, Ch. 4 & 5
      3. Winograd & Flores, from Understanding Computers and Cognition (see Basecamp)
      4. Lupton, ed., Type on Screen, Ch. 01
    • To Do

      1. Production Problem 03
  5. Typography: Content, User Interface Week Five

    1. Monday, February 6 Video

      1. Resources at fonts.com
      2. Type classification and anatomy
    2. Wednesday, February 8 Video

      1. Working with web fonts
      2. Typekit reference on OpenType features in CSS
      3. Setting type for content readability

    Assigned Work

    • To Read

      1. Lupton, ed., Type on Screen, Ch. 02, 04
    • To Do

      1. Submit Project One drafts to Basecamp by Weds. 2/8 11:59pm CT
  6. Interface Typography Week Six

    1. Monday, February 13

      1. No Class
    2. Wednesday, February 15 Video

      1. Typography of user interfaces
      2. HCI of selectable form elements: radio buttons, checkboxes, selects

    Assigned Work

    • To Do

      1. Finish responding to peer drafts
  7. Color and Material Design Week Seven

    1. Monday, February 20 Video

      1. Color interaction
      2. Developing palettes
      3. CSS color models
    2. Wednesday, February 22 Video

      1. Material design

    Assigned Work

  8. Spring Break; No Class Week Ten

  9. HCI Guidelines; Ethics, Activity Theory, and Project Scoping Week Eleven

    1. Monday, March 20

      1. Taking stock of where we’ve been, and where we’re going
      2. Activity theory and RWD
      3. HCI guidelines
    2. Wednesday, March 22

      1. Ethics and users
      2. Scoping and planning a full-scale site

    Assigned Work

  10. Usability: Guiding Principles Week Twelve

    1. Monday, March 27

      1. Designing usable content
    2. Wednesday, March 29

      1. Designing usable interfaces

    Assigned Work

    • To Read

      1. Krug, Don’t Make Me Think, Introduction; Ch. 1-5
      2. Lupton, ed., Type on Screen, Ch. 03
    • To Do

      1. Production Problem 07
  11. Emotional Design; Responsive Media Week Thirteen

    1. Monday, April 3

      1. Designing for emotion
      2. Responsive media with srcset and <picture>
      3. JavaScript polyfills, such as Picturefill
    2. Wednesday, April 5

      1. Helping users focus
      2. Project Two draft due at 11:59pm

    Assigned Work

    • To Read

      1. Krug, Don’t Make Me Think, Ch. 6-7, 10-11
  12. Usability: Testing Methods Week Fourteen

    1. Monday, April 10

      1. Testing your project, not users
    2. Wednesday, April 12

      1. Fundamental testing methods
      2. Project Two Due, 11:59pm

    Assigned Work

    • To Read

      1. Krug, Don’t Make Me Think, Ch. 8-9, 12-13
    • To Do

      1. Production Problem 08 & 09
  13. Agile Development, Remote User-Testing, and Experimental Builds Week Fifteen

    1. Monday, April 17

      1. Testing at a distance
    2. Wednesday, April 19

      1. Experimental builds
      2. A/B testing

    Assigned Work

    • To Read

      1. TBA
    • To Do

      1. Production Problem 10
  14. Parting Material: Assessing Front-End Libraries and Frameworks Week Sixteen

    1. Monday, April 24

      1. Assessing libraries and frameworks
    2. Wednesday, April 26

      1. Building your own libraries and frameworks

    Assigned Work

    • To Do

      1. Finish Final Projects, Due Wednesday, May 3 at 11:59pm