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

      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

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

      1. Material design

    Assigned Work

  8. Motion Week Eight

    1. Monday, February 27

      1. CSS3 motion and animation properties
      2. JavaScript’s limited role
    2. Wednesday, March 1

      1. Keeping motion accessible
      2. Working with time
      3. Project One Due, 11:59pm

    Assigned Work

    • To Read

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

      1. Production Problem 06
  9. Accessibility: HCI Guidelines; ARIA Roles, Responsive Media Week Nine

    1. Monday, March 6

      1. HCI guidelines
      2. ARIA roles and attributes
    2. Wednesday, March 8

      1. Responsive media with srcset and <picture>

    Assigned Work

    Spring Break; No Class Week Ten

  10. Ethics, Activity Theory, and Responsive Web Design Week Eleven

    1. Monday, March 20

      1. Ethics and users
    2. Wednesday, March 22

      1. Activity theory and RWD
      2. Project Two Due, 11:59pm

    Assigned Work

    • To Read

      1. Jehl, Responsible Responsive Design, Ch. 3 & 4
  11. 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
  12. Emotional Design Week Thirteen

    1. Monday, April 3

      1. Designing for emotion
    2. Wednesday, April 5

      1. Helping users focus

    Assigned Work

    • To Read

      1. Krug, Don’t Make Me Think, Ch. 6-7, 10-11
    • To Do

      1. Production Problem 08
  13. Usability: Testing Methods Week Fourteen

    1. Monday, April 10

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

      1. Fundamental testing methods

    Assigned Work

    • To Read

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

      1. Production Problem 09
  14. 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
  15. 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