Welcome & Introductions; The Web in 2020

Week One

Agenda for the Week of January 13 Video

  1. Welcome and overview
  2. Course policies & calendar
  3. Introduce Project One
  4. Technology setup

Essential Languages Overview; Content Preparation and HTML Structure

Week Two

Agenda for the Week of January 20 Video

  1. Text editors
  2. Version control (Git)
  3. Overview of HTML, CSS, JavaScript
  4. Basic source-formatting rules
  5. HTML structure and semantics

CSS and Basic Typography and Typesetting

Week Three

Agenda for the Week of January 27 Video

  1. Working small
  2. CSS syntax
  3. CSS’s relationship to HTML
  4. HTML validation
  5. Typesetting concepts
  6. Modular Scales
  7. Foundational typography in CSS

Progressive Enhancement; Responsive Media and Accessibility Basics

Week Four

Agenda for the Week of February 3 Video

  1. Review: commit messages, source formatting, and validation
  2. Building the accessible web
  3. Basic accessible, responsive images
  4. Understanding progressive enhancement
  5. Executing an accessible, progressively enhanced site design

Sketching and Executing Mobile-First Design; Stylesheet Organization

Week Five

Agenda for the Week of February 10 Video

  1. Introduce Project Two
  2. Foundations for understanding CSS layout
  3. Conceiving a site design from the smallest possible screen
  4. Building with min-width media queries in CSS
  5. Organizing CSS (SMACSS)

Grids and Layout I

Week Six

Agenda for the Week of February 17 Video

  1. HTML foundations: sectioning structures; in praise of lists
  2. Theorizing layouts: macro and micro
  3. SMACSS: Base, Layout, Module, and State
  4. Legacy CSS layout (floats, positioning)
  5. The new CSS layout: Flexbox, CSS Grid
  6. Reasoning through the use of one layout method over another
  7. Grids: bespoke and columnar/modular

Grids and Layout II

Week Seven

Agenda for the Week of February 24 Video

  1. Deeper into conceiving and executing CSS layouts
  2. Building layouts as slowly as possible
  3. Isolating experimental or exploratory work in throwaway repos
  4. Coordinating legacy and new CSS layout methods

Q&A and Catching Our Breath

Week Eight

Agenda for the Week of March 2 Video

  1. Stolley responds on weekly video to all questions posted to Basecamp Q&A thread by 3pm Tuesday, March 3

Responsive Media; Color and Texture

Week Nine

Agenda for the Week of March 9 Video

  1. Basics of color theory
  2. Selecting and auditioning colors
  3. Use of textures (gradients, tessellation)
  4. Responsive images with srcset and <picture>
  5. Responsive audio and video

Spring Break

Week Ten

Agenda for the Week of March 16

  1. No class

Site Architecture and Organization; Navigation

Week Eleven

Agenda for the Week of March 23 Video

  1. Triage the rest of the semester
  2. Introduce Project Three
  3. Refresh and review a bunch of issues that came up in the Project Two drafts
  4. Understanding site architecture
  5. Understanding paths and URLs
  6. Building robust site navigation

Creating Reusable Markup Patterns; Revisiting Responsive Topics and Typography

Week Twelve

Agenda for the Week of March 30 Video

  1. Creating reusable markup patterns
  2. Leveraging the Snippets package in Atom.io
  3. Navigation: structure and styles
  4. Deeper into web typography
  5. Taking another look at RWD and responsive media

JavaScript: A Fuller Introduction

Week Thirteen

Agenda for the Week of April 6 Video

  1. JavaScript fundamentals

Unobtrusive DOM Scripting: JavaScript + the Document Object Model (DOM)

Week Fourteen

Agenda for the Week of April 13 Video

  1. Manipulating HTML with JavaScript via the DOM

JavaScript-powered Image Slideshows

Week Fifteen

Agenda for the Week of April 20 Video

  1. Introduce the final project
  2. Student request: JavaScript-powered slideshow/carousel

Work Week

Week Sixteen

Agenda for the Week of April 27

  1. Stolley available for help and feedback