Course Calendar

All code written in class available on GitHub.

  1. Git; HTML History, Syntax & Fundamentals Week One

    1. Monday, August 21 Video

      1. Welcome & introductions
      2. Course policies & calendar
      3. Course technologies

    2. Wednesday, August 23 Video

      1. File systems and basics of version control/Git
      2. A walk through HTML history, with a Git assist
      3. Major historical HTML specs: HTML 2.0 (1995, RFC 1866); HTML 3.2 (1997); HTML 4.01 (1999); XHTML 1.0 (2000/2002); HTML5 (2014)
      4. Current HTML specs: HTML 5.1 (2016); HTML: The Living Standard
      5. HTML Tags: Past, Present, Proposed

    Assigned Work

    • To Read

      1. Course policies, calendar, and projects [Online students]
      2. HTML5 for Web Designers, 2nd ed., Introduction; Chapters 1-2
      3. Pragmatic Version Control Using Git, Preface; Chapters 1-3 (Part I)
      4. Get familiar with the contents and organization of Mozilla Developer Network’s Web technology for developers

    • To Do

      1. As soon as possible: Submit ITMD361 Contract and Survey (link in your @hawk.iit.edu inbox; email instructor at karl.stolley@gmail.com if you did not receive it)
      2. As soon as possible: Create Basecamp account (invite will arrive after you submit the Contract and Survey)
      3. Technology setup; follow these instructions

  2. Well Formed, Valid Semantic HTML; Global Attributes Week Two

    1. Monday, August 28 Video

      1. Introduce first project
      2. Remaining major historical HTML specs: HTML 4.01 (1999); XHTML 1.0 (2000/2002); HTML5 (2014)
      3. Current HTML specs: HTML 5.1 (2016); HTML: The Living Standard
      4. HTML syntax & fundamentals
      5. Working with the HTML validator

    2. Wednesday, August 30 Video

      1. Academic Resource Center (Raiven J)
      2. Introduce first Production Problem & turn-in procedure
      3. Deeper into Git: remotes (set up course demos remote)
      4. Foundational well formed, valid, semantic HTML page
      5. HTML semantics and global attributes
      6. Developing reusable semantic patterns
      7. htmllint (CLI); .htmllintrc configuration
      8. ITMD 361 house-style .htmllintrc

    Assigned Work

  3. Responsive Web Design Overview + HTML Foundations Week Three

    1. Monday, September 4: Labor Day, NO CLASS

    2. Wednesday, September 6 Video

      1. Portable, offline documentation: Devdocs.io
      2. Walk through a web project setup
      3. Renaming/moving files with Git
      4. Deeper into Git: granular commits; branches; merging
      5. CSS preview: handling responsive images
      6. Developing reusable semantic HTML patterns
      7. Global structural attributes: class and id

    Assigned Work

  4. Course Refresher; Work Day Week Four

    1. Monday, September 11 Video

      1. Open Q&A and refresher
      2. De-borking a borked Git repo
      3. HTML anti-patterns and their remedies
      4. Resume markup
      5. Microformats: h-card

    2. Wednesday, September 13

      1. No class; work day. Put in a solid hour-plus on your project, commenting on peer projects.
      2. Stolley available in our chatroom

    Assigned Work

    • To Read

      1. Responsive Web Design, 2nd ed., Chapter 3
      2. HTML5 for Web Designers, 2nd ed., Chapter 3

    • To Do

      1. Review Project One description, requirements, and deliverables
      2. Respond to at least three other draft student projects on Basecamp
      3. Project One due by 11:59pm CT, Thursday September 21

  5. CSS Syntax & Fundamentals; Units of Measure Week Five

    1. Monday, September 18 Video

      1. Refresher on Responsive Web Design
      2. Setting the viewport, including for Safari 9.0 and later on iOS
      3. Foundations: working with reset styles
      4. CSS syntax
      5. CSS style

    2. Wednesday, September 20 Video

      1. Linter file updates (FYI)
      2. Using a single stylesheet across an entire site

    Assigned Work

  6. CSS: Typography Week Six

    1. Monday, September 25 Video

      1. New repo location at github.com/itmd-361-2017
      2. Introduce Project 2
      3. Organizing stylesheets
      4. Mobile-first styles and media queries
      5. Foundational typographic styles
      6. Typographic/modular scales
      7. Setting text on a baseline grid

    2. Wednesday, September 27 Video

      1. CSS style & linting; ITMD 361 style
      2. Mobile-scale page layout adjustments
      3. Setting text and colors in CSS
      4. Choosing & working with typefaces

    Assigned Work

  7. CSS: Page Layout (Fluid Grids), Feature Detection Week Seven

    1. Monday, October 2 Video

      1. Sizing type and baseline grid adjustments
      2. Introduction to media queries and layout grid terminology

    2. Wednesday, October 4 Video

      1. Building responsive fluid grids at media-query breakpoints
      2. Old-school page layout with position and float
      3. Feature detection with Modernizr
      4. New-school page layout with display: flex (Flexbox) and display: grid (CSS Grid)

    Assigned Work

  8. Responsive Images, Accessibile Media Week Eight

    1. Monday, October 9: Fall Break, NO CLASS

    2. Wednesday, October 11 Video

      1. Where we left off: feature detection with Modernizr
      2. Resetting old-school layout styles with feature-detection selectors
      3. New-school page layout with display: flex (Flexbox) and display: grid (CSS Grid)

    Assigned Work

  9. Responsive Images; JavaScript: Syntax, Fundamentals, Data Structures Week Nine

    1. Monday, October 16 Video

      1. Refresher: working with accessible image media in HTML5:
      2. Responsive images: srcset and <picture>

    2. Wednesday, October 18

      1. No class; project work/response day

    Assigned Work

  10. JavaScript: Syntax and Fundamentals; Functional Programming Style Week Ten

    1. Monday, October 23 Video

      1. MDN JavaScript Reference
      2. Working with the JavaScript console (node, browser)
      3. JavaScript fundamentals: syntax, data types, structures, style
      4. Collections: Arrays and object literals

    2. Wednesday, October 25 Video

      1. Using functions to control variable scope
      2. Single-responsibility principle and pure functions in functional programming
      3. Self-invoking functions to protect the global namespace
      4. Functional programming style in JavaScript
      5. JSHint (Web)
      6. ESLint (CLI)

    Assigned Work

    • To Read

      1. Eloquent JavaScript 2nd ed., Chapters 5-6, 8-10

    • To Do

      1. Finish Project Two by Thursday, November 2
      2. Production Problem 04: JavaScript Variable Scope
      3. Project Two Due 11:59pm CT on Thursday, November 2

  11. DOM Scripting: JavaScript + the Document Object Model; jQuery and Alternatives Week Eleven

    1. Monday, October 30 Video

      1. Introduce Project Three
      2. Essential Web APIs: window, document objects
      3. JavaScript DOM libraries:

    2. Wednesday, November 1 Video

      1. No class; Stolley will post course video here
      2. Overview of progressive enhancement and event listeners
      3. Working with accessible audio & video in HTML5:
      4. Audio & Video HTML media-element APIS

    Assigned Work

    • To Read

      1. Eloquent JavaScript 2nd ed., Chapters 12-14, 17-18
      2. HTML5 for Web Designers, 2nd ed., Chapter 4

    • To Do

      1. Production Problem 04: Basecamp discussion

  12. Unobtrusive JavaScript & Progressive Enhancement Week Twelve

    1. Monday, November 6 Video

      1. Refresher: Modernizr and feature detection
      2. Inserting JavaScript-dependent HTML into the DOM
      3. Unobtrusive JavaScript with event listeners

    2. Wednesday, November 8 Video, Supplemental Video

      1. Media-query-dependent collapsing navigation

    Assigned Work

  13. JavaScript: Non-Blocking Asynchronous Patterns, Page Performance Week Thirteen

    1. Monday, November 13 Video

      1. HTML forms and form elements
      2. Loading external assets and data asynchronously

    2. Wednesday, November 15 Video

      1. Progressive enhancement with HTML structure and data- attributes
      2. JSHint (CLI)
      3. JavaScript review and Q&A

    Assigned Work

    • To Read

      1. Eloquent JavaScript 2nd ed., Chapter 22

    • To Do

      1. Production Problem 05: Basecamp discussion

  14. HTTP 1.1, HTTP/2, and REST Architecture; Server-Side Web Development Week Fourteen

    1. Monday, November 20 Video

      1. HTTP 1.1, HTTP/2, and REST Architecture
      2. Assessing server-side libraries/frameworks, using Ruby on Rails as an example

    2. Wednesday, November 22: Thanksgiving Break, NO CLASS

    Assigned Work

    • To Do

      1. Work on final project

  15. Parting Material: Preprocessors Week Fifteen

    1. Monday, November 27 Video

      1. HTML preprocessing: Haml
      2. CSS preprocessing: LESS, SCSS
      3. JavaScript preprocessing: CoffeeScript

    2. Wednesday, November 29

      1. NO CLASS MEETING. Stolley available electronically to provide help on final projects.

    Assigned Work

    • To Do

      1. Project Three Due 11:59pm CT on Thursday, December 7