The Web in 2020; Dev Environment Setup

Week One

Monday, August 24 Video

  1. Course overview
  2. Course policies
  3. Course projects

Wednesday, August 26 Video

  1. Asking questions publicly on Basecamp
  2. Setting up a development environment
  3. The state of the web

Core Web Languages, RWD, & Version Control

Week Two

Monday, August 31 Video

  1. File systems and the basics of version control/Git
  2. Walking through HTML, CSS, and JavaScript syntax & fundamentals, with a Git assist

Wednesday, September 2 Video

  1. Git fundamentals and concepts
  2. Deeper into Git: working with remotes
  3. Introduce the first Production Problem and turn-in procedure

Valid, Well-Formed Semantic HTML

Week Three

Monday, September 7

  1. Labor Day (No Class)

Wednesday, September 9 Video

  1. Introduce Project One
  2. Valid, well-formed semantic HTML
  3. The importance of solid Web documentation
  4. Snippets in Atom.io

From HTML to CSS: Syntax, Mobile-First Approaches

Week Four

Monday, September 14 Video

  1. Semantic powerhouses: nested lists
  2. HTML documentation, sectioning elements
  3. Developing reusable semantic HTML patterns
  4. Global structural attributes: class and id
  5. HTML linting with htmllint (CLI); .htmllintrc configuration
  6. ITMD 361 house-style .htmllintrc

Wednesday, September 16 Video

  1. ITMD 361 house-style .htmllintrc
  2. From HTML to CSS
  3. Foundations: working with reset styles
  4. CSS syntax
  5. CSS style
  6. CSS and Mobile-First Responsive Web Design
  7. Working on a css branch during Project One

CSS: Typography Fundamentals; Relative Units

Week Five

Monday, September 21 Video

  1. Project One feedback overall; the state of the course
  2. Source formatting: semantic indentation, empty lines
  3. Working with system and web-available typefaces
  4. Two key values: font-size and line-height
  5. Setting text on a baseline grid

Wednesday, September 23 Video

  1. Why grid-based design?
  2. Working with modular scales
  3. Converting from absolute to relative units

Site Scoping and Planning; Stylesheet Organization, Media Queries

Week Six

Monday, September 28 Video

  1. Pulling Production Problem 02
  2. Scoping and planning a site: assets, paths
  3. Using a single stylesheet across an entire site
  4. Site-wide typography and type selection
  5. CSS signatures
  6. Selector specificity

Wednesday, September 30 Video

  1. Organizing stylesheets (SMACSS)
  2. Mobile-first styles and media queries

Accessible, Responsive Images and Media

Week Seven

Monday, October 5 Video

  1. Preventing caching problems in Firefox and Chrome
  2. Rich media features in HTML
  3. The <figure> element
  4. Accessible images and media
  5. Exploring the accessibility tree in Firefox

Wednesday, October 7 Video

  1. Introduce Project Two
  2. CSS linting with stylelint; ITMD 361 .stylelintrc

CSS: Intro to Page Layout

Week Eight

Monday, October 12

  1. Fall Break (No Class)

Wednesday, October 14 Video

  1. The sordid history of layout on the web
  2. CSS approaches to layout, past and present

CSS: Modern Page Layout

Week Nine

Monday, October 19 Video

  1. Revisiting the typographic grid and line-height
  2. CSS Grid and @supports
  3. CSS Flexible Boxes (flexbox)

Wednesday, October 21 Video

  1. More CSS Grid
  2. Revisiting responsive images

JavaScript Syntax & Fundamentals

Week Ten

Monday, October 26 Video

  1. JavaScript as a language
  2. JavaScript syntax
  3. Fundamental data types and structures
  4. Basic arithmetic and comparison operators
  5. Truthiness and falsiness in JavaScript

Wednesday, October 28 Video

  1. Fundamental programming structures in JavaScript
  2. Function declaration
  3. Object creation via constructor functions

Catch Up and Review Week

Week Eleven

Monday, November 2

  1. No class. Stolley finishing draft comments.

Wednesday, November 4 Video

  1. A big review day, based on recurring Project Two issues and the Week Eleven Q&A thread
  2. Stolley’s Megapost of Project Two feedback for everyone
  3. Typographic grids: font-size and line-height and how everything comes back to those two values; modular scales

Finish Review; Unobtrusive JavaScript with Event Listeners

Week Twelve

Monday, November 9 Video

  1. Flexbox, especially for navigation
  2. Basic handling of images in different orientations (portrait, landscape)
  3. CSS Grid: rows, columns, and item placement

Wednesday, November 11 Video

  1. JavaScript events and event listeners
  2. Manipulating the DOM

HTML Form Elements; JavaScript: Progressive Enhancement

Week Thirteen

Monday, November 16

  1. HTML form elements
  2. Progressive enhancement
  3. Frameworks: The good, the bad, the ugly

Wednesday, November 18

  1. No class. Finish projects.

Feature Branches, Web APIs

Week Fourteen

Monday, November 23 Video

  1. Introduce Project Three
  2. Working with feature branches (Project Three/PP-05)
  3. Web APIs
  4. Feature detection

Wednesday, November 25

  1. Thanksgiving Break (No Class)

Work Week

Week Fifteen

Monday, November 30

  1. Open Q & A
  2. Stolley available for one-on-one help

Wednesday, December 2

  1. Open Q & A
  2. Stolley available for one-on-one help