Week One
The Web in 2021; Dev Environment Setup
Course overview
Course policies
Course projects
Asking questions publicly on Basecamp
Setting up a development environment
The state of the web
Assigned Work
Due Monday, August 30
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
Week Two
Core Web Languages, RWD, & Version Control
File systems and the basics of version control/Git
Git fundamentals and concepts
Introduce the first Production Problem and
walk through turn-in procedure
Deeper into Git: working with remotes
Speed run through HTML, CSS, and JavaScript syntax & fundamentals, with a Git
assist
Assigned Work
Due Wednesday, September 8
Week Three
Valid, Well-Formed Semantic HTML
Monday, September 6
No class. Labor Day Holiday
Introduce Project One
Valid, well-formed semantic HTML
The importance of referencing solid Web documentation
HTML documentation, sectioning elements
Assigned Work
Due Monday, September 13
To Read
Jeremy Keith & Rachel Andrew, HTML5 for Web Designers, 2nd ed. ,
Chapters 5-6
Ethan Marcotte, Responsive Web Design, 2nd ed. , Chapter 5
To Do
Participate in Week Three reading discussion on Basecamp
Week Four
HTML: Advanced Structures and Linting
Phrasing elements (formerly known as inline elements)
Developing reusable semantic HTML patterns
Microformats
Global structural attributes: class
and
id
HTML linting with htmllint
(CLI); .htmllintrc
configuration
ITMD 361 house-style
.htmllintrc
Semantic powerhouses: nested lists
Assigned Work
Due Monday, September 20
To Read
Jason Santa Maria, On Web Typography , Introduction; Chapters 1–2
To Do
Participate in Production Problem 01 discussion on Basecamp
Participate in Week Four reading discussion on Basecamp
Week Five
CSS Syntax and Style
Monday, September 20
No class. Stolley finishing comments on Project One drafts.
Remote Class . See Basecamp for details.
Emergency organizational Git/file-system review
Foundations: working with reset styles
CSS syntax: selectors, properties, and values
CSS style
CSS and Mobile-First Responsive Web Design
Assigned Work
Due Monday, September 27
To Do
Catch up on Week One thru Four reading-discussions on Basecamp
Week Six
Typography Foundations and Relative Units; Stylesheet Organization, Media Queries
Pulling Production Problem 02
HTML topic: navigation and paths
Using a single stylesheet across an entire site
Spending some time on the history and theory of typography
Review: working on a css branch in Git
Assigned Work
Due Monday, October 4
To Do
Production Problem 02
Participate in Week Six reading discussion on Basecamp
Week Seven
Typographic Grids; Accessible, Responsive Images and Media
Remote class. See Basecamp
for details
Preventing caching problems in Firefox and Chrome
Setting text on a baseline grid
Two key values: font-size and line-height
Working with modular scales
Assigned Work
Due Wednesday, October 13
To Read
Stolley, Project One
feedback for everyone
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
Stolley, Image Accessibility,
Part I and
Part II
MDN,
Responsive images
To Do
Production Problem 02 (take another week)
Participate in Week Seven reading discussion on Basecamp
Have a relaxing fall break; you are required to take at minimum
a couple of hours to do something relaxing and fun for yourself. No exceptions.
Week Eight
CSS: Remaining Fundamentals
Monday, October 11
Fall Break (No Class)
Mobile-first styles and media queries
Converting from absolute to relative units
Organizing stylesheets (SMACSS)
Selector specificity
CSS linting with
stylelint ; ITMD 361
.stylelintrc
Snippets in Atom.io
Thursday, October 14 Project
One : Email instructor with final project deliverables.
Assigned Work
Due Monday, October 18
To Do
Participate in Production Problem 02 discussion on Basecamp
Week Nine
CSS: Modern Page Layout
Introduce Project Two
The sordid history of layout on the web
CSS box models
Remote class.
CSS approaches to layout, past and present
CSS Flexible Boxes (flexbox)
Assigned Work
Due Monday, October 25
To Read
Rachel Andrew, The New CSS Layout , Chapters 3–8
Jason Santa Maria, On Web Typography , Chapter 5–6
Jen Simmons, Videos on
CSS Grid [Playlist of 15 videos; watch as many as you can]
To Do
Production Problem 03
Participate in Week Nine reading discussion on Basecamp
Week Ten
JavaScript Syntax & Fundamentals
Remote class.
JavaScript as a language
Language-learning fundamental tech: the REPL
JavaScript syntax
Fundamental data types and structures
Basic arithmetic and comparison operators
Truthiness and falsiness in JavaScript
Fundamental programming structures in JavaScript
Function declaration
Object creation via constructor functions
Assigned Work
Due Monday, November 1
To Do
Participate in Production Problem 03 discussion on Basecamp
Participate in Week Ten reading discussion on Basecamp
Week Eleven
Return to CSS Layout: Flexbox vs. Grid
CSS Grid and @supports
Why grid-based design?
Flexbox vs. Grid
Converting to relative units
Setting up
GitHub Pages
Typographic grids and layout:
font-size and line-height and how everything comes
back to those two values
Week Twelve
Page Layout and Responsive Images; Work Day
Revisiting paths for navigation, assets, etc.
On-page navigation (e.g., “Back to Top”) with URL fragments
Modular scales for multi-column layouts
Revisiting responsive images in a layout
The srcset and
sizes attributes
The <picture>
element
Wednesday, November 10
No class.
Assigned Work
Due Monday, November 15
To Do
Production Problem 04
Week Thirteen
The Document Object Model and Unobtrusive JavaScript; HTML Form Elements
The Document Object Model (DOM)
Traversing the DOM
Manipulating the DOM
Unobtrusive JavaScript
JavaScript linting with ESLint;
361-style .eslintrc.json
HTML form elements
Progressive enhancement
JavaScript events and event listeners
Frameworks: The good, the bad, the ugly
Thursday, November 18 Project Two : Email instructor with final project
deliverables.
Assigned Work
Due Monday, November 22
To Read
Jeremy Keith & Rachel Andrew, HTML5 for Web Designers, 2nd ed. ,
Chapter 4
Haverbeke, Eloquent
JavaScript
To Do
Participate in Production Problem 04 discussion on Basecamp
Participate in Week Thirteen reading discussion on Basecamp
Week Fourteen
Feature Branches, Web APIs
Remote class.
Introduce Project Three
Working with feature branches (Project Three)
Enrichment: Web APIs and feature detection
Wednesday, November 24
No class. Thanksgiving Break
Monday, November 29
No class.
Stolley available for one-on-one help
Wednesday, December 1
No class.
Stolley available for one-on-one help
Thursday, December 9 Project Three : (Firm deadline. )
Email instructor with final project deliverables.
Course Information
Dr. Karl Stolley
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.
Anthea Gonzalez (an-THAY-ah GON-za-lez) , Co-terminal Student in Information
Technology and Management, Cyber Forensics and Security
agonzalez2@hawk.iit.edu
In-person office hours on Thursdays, 10am to 12pm 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.
Navigation