The Web in 2020; Dev Environment Setup
Week One
Monday, August 24 Video
Course overview
Course policies
Course projects
Wednesday, August 26 Video
Asking questions publicly on Basecamp
Setting up a development environment
The state of the web
Assigned Work
Due Monday, August 31
To Do
Sign up for a GitHub account , if you don’t already have one
As soon as possible: Submit ITMD 361 Contract and Survey (link in your @hawk.iit.edu inbox)
As soon as possible: Create Basecamp account (invite will arrive after you submit the Contract and Survey)
Dev environment setup (Firefox Developer Edition, Atom.io, Node.js, Git); follow these instructions
Participate in Week One reading discussion on Basecamp
Core Web Languages, RWD, & Version Control
Week Two
Monday, August 31 Video
File systems and the basics of version control/Git
Walking through HTML, CSS, and JavaScript syntax & fundamentals, with a Git assist
Assigned Work
Due Wednesday, September 9
To Do
Production Problem 01: Cloning and Committing to a Git Repository
Participate in Week Two reading discussion on Basecamp
Valid, Well-Formed Semantic HTML
Week Three
Monday, September 7
Labor Day (No Class)
Wednesday, September 9 Video
Introduce Project One
Valid, well-formed semantic HTML
The importance of solid Web documentation
Snippets in Atom.io
Assigned Work
Due Monday, September 14
To Read
Jeremy Keith & Rachel Andrew, HTML5 for Web Designers, 2nd ed. , Chapters 5-6
To Do
Participate in Week Three reading discussion on Basecamp
From HTML to CSS: Syntax, Mobile-First Approaches
Week Four
Monday, September 14 Video
Semantic powerhouses: nested lists
HTML documentation, sectioning elements
Developing reusable semantic HTML patterns
Global structural attributes: class and id
HTML linting with htmllint (CLI); .htmllintrc
configuration
ITMD 361 house-style .htmllintrc
Wednesday, September 16 Video
ITMD 361 house-style .htmllintrc
From HTML to CSS
Foundations: working with reset styles
CSS syntax
CSS style
CSS and Mobile-First Responsive Web Design
Working on a css
branch during Project One
Assigned Work
Due Monday, September 21
To Read
MDN, CSS syntax and CSS selectors
Ethan Marcotte, Responsive Web Design, 2nd ed. , Chapter 5
Jason Santa Maria, On Web Typography , Introduction; Chapters 1–3
To Do
Participate in Week Four reading discussion on Basecamp
Project Deadlines
Project One: Post draft project-repository GitHub link to the Project Showcase Basecamp (Due by Thursday, September 17) Project One: Respond with helpful feedback to at least 3 other student projects on the Project Showcase Basecamp . (Due by Monday, September 21)
CSS: Typography Fundamentals; Relative Units
Week Five
Monday, September 21 Video
Project One feedback overall; the state of the course
Source formatting: semantic indentation, empty lines
Working with system and web-available typefaces
Two key values: font-size
and line-height
Setting text on a baseline grid
Wednesday, September 23 Video
Why grid-based design?
Working with modular scales
Converting from absolute to relative units
Assigned Work
Due Monday, September 28
To Read
24 Ways, Compose to a Vertical Rhythm
Ethan Marcotte, Responsive Web Design, 2nd ed. , Chapter 2
Jason Santa Maria, On Web Typography , Chapters 4–6
To Do
Production Problem 02: HTML Antipatterns, Typographic Grids
Participate in Week Five reading discussion on Basecamp
Project Deadlines
Project One: Email instructor with final project deliverables. (Due by Monday, September 28)
Site Scoping and Planning; Stylesheet Organization, Media Queries
Week Six
Monday, September 28 Video
Pulling Production Problem 02
Scoping and planning a site: assets, paths
Using a single stylesheet across an entire site
Site-wide typography and type selection
CSS signatures
Selector specificity
Wednesday, September 30 Video
Organizing stylesheets (SMACSS)
Mobile-first styles and media queries
Assigned Work
Due Monday, October 5
To Do
Participate in Production Problem 02 discussion on Basecamp
Participate in Week Six reading discussion on Basecamp
Accessible, Responsive Images and Media
Week Seven
Monday, October 5 Video
Preventing caching problems in Firefox and Chrome
Rich media features in HTML
The <figure>
element
Accessible images and media
Exploring the accessibility tree in Firefox
Assigned Work
Due Wednesday, October 14
To Read
Jeremy Keith & Rachel Andrew, HTML5 for Web Designers, 2nd ed. , Chapter 3
Ethan Marcotte, Responsive Web Design, 2nd ed. , Chapter 3
Rachel Andrew, The New CSS Layout , Foreword, Chapters 1–2
MDN, Responsive images
Stolley, Image Accessibility, Part I and Part II
Marquis, Responsive Images
To Do
Participate in Week Seven reading discussion on Basecamp
Have a relaxing fall break; at minimum, you are required to take at least a couple of hours to do something relaxing and fun for yourself. No exceptions
CSS: Intro to Page Layout
Week Eight
Monday, October 12
Fall Break (No Class)
Wednesday, October 14 Video
The sordid history of layout on the web
CSS approaches to layout, past and present
Assigned Work
Due Monday, October 19
To Read
Rachel Andrew, The New CSS Layout , Chapters 3–5
MDN, Learn CSS Layout (all Guides listed in the main column)
Jen Simmons, Resilient CSS (playlist of seven videos; watch them all)
To Do
Participate in Week Eight reading discussion on Basecamp
CSS: Modern Page Layout
Week Nine
Monday, October 19 Video
Revisiting the typographic grid and line-height
CSS Grid and @supports
CSS Flexible Boxes (flexbox)
Wednesday, October 21 Video
More CSS Grid
Revisiting responsive images
Assigned Work
Due Monday, October 26
To Do
Participate in Week Nine reading discussion on Basecamp
JavaScript Syntax & Fundamentals
Week Ten
Monday, October 26 Video
JavaScript as a language
JavaScript syntax
Fundamental data types and structures
Basic arithmetic and comparison operators
Truthiness and falsiness in JavaScript
Wednesday, October 28 Video
Fundamental programming structures in JavaScript
Function declaration
Object creation via constructor functions
Assigned Work
Due Monday, November 2
To Do
Participate in Week Ten reading discussion on Basecamp
Project Deadlines
Project Two: Post draft project repository, video, and GitHub Pages or other public link to the Project Showcase Basecamp . (Due by Thursday, October 29)
Catch Up and Review Week
Week Eleven
Monday, November 2
No class. Stolley finishing draft comments.
Wednesday, November 4 Video
A big review day, based on recurring Project Two issues and the Week Eleven Q&A thread
Stolley’s Megapost of Project Two feedback for everyone
Typographic grids: font-size
and line-height
and how everything comes back to those two values; modular scales
Assigned Work
Due Monday, November 9
To Do
Production Problem 03 (Flexbox Froggy)
Project Deadlines
Project Two: Respond with helpful feedback to at least 3 other student projects on the Project Showcase Basecamp . (Due by Thursday, November 5)
Finish Review; Unobtrusive JavaScript with Event Listeners
Week Twelve
Monday, November 9 Video
Flexbox, especially for navigation
Basic handling of images in different orientations (portrait, landscape)
CSS Grid: rows, columns, and item placement
Wednesday, November 11 Video
JavaScript events and event listeners
Manipulating the DOM
Assigned Work
Due Monday, November 16
To Read
Jeremy Keith & Rachel Andrew, HTML5 for Web Designers, 2nd ed. , Chapter 4
Marijn Haverbeke, Eloquent JavaScript , 3rd ed. , Introduction; Chapters 5–6
To Do
Production Problem 04
Production Problem 03 Discussion
Participate in Week Twelve reading discussion on Basecamp
HTML Form Elements; JavaScript: Progressive Enhancement
Week Thirteen
Monday, November 16
HTML form elements
Progressive enhancement
Frameworks: The good, the bad, the ugly
Wednesday, November 18
No class. Finish projects.
Assigned Work
Due Monday, November 23
To Do
Production Problem 04 Discussion
Participate in Week Thirteen reading discussion on Basecamp
Project Deadlines
Project Two: Email instructor with final project deliverables. (Due by Thursday, November 19)
Feature Branches, Web APIs
Week Fourteen
Monday, November 23 Video
Introduce Project Three
Working with feature branches (Project Three/PP-05)
Web APIs
Feature detection
Wednesday, November 25
Thanksgiving Break (No Class)
Assigned Work
Due Monday, November 30
To Do
Production Problem 05
Monday, November 30
Open Q & A
Stolley available for one-on-one help
Wednesday, December 2
Open Q & A
Stolley available for one-on-one help
Assigned Work
Due Thursday, December 10
To Do
Production Problem 05 Discussion
Project Deadlines
Project Three: (Firm deadline. ) Email instructor with final project deliverables. (Due by Thursday, December 10)
Dr. Karl Stolley ,
Associate Professor of Information Technology and Management
kstolley@iit.edu
Office hours via Basecamp Chat or Pings on Tuesdays, 4pm to 5pm Central Time (America/Chicago), or by appointment or chance. If you’d like to audio or video chat, we can of course do that, too. Just message me first. I’m always signed into Basecamp and closely monitor my notifications. Message or email any time—I make students a priority, and I will respond as soon as I am able.
Shruthi Bhavaraju ,
Graduate Student in Information Technology and Management
sbhavaraju@hawk.iit.edu
Office hours via Google Meet on Tuesdays and Thursdays, 2pm to 3pm Central Time(America/Chicago). I am always signed into email and Basecamp, so message or email me any time and I will respond as soon as possible.