Schedule subject to change at instructor’s discretion.

---

Week of Monday, August 26

Lecture: Introduction

Introduction slides

---

Lab #1

Homework Due:

View the following Khan Academy videos on the fundamentals of the Internet and its material architecture (approx. 30 minutes)

• What is the Internet? (3:44)

• Wires, Cables, and WiFi (6:41)

• IP Addresses and DNS (6:44)

• Packets, Routers, and Reliability (6:25)

• HTTP and HTML (7:06)

---

Lab #2

Homework Due

• Read selected chapters from HTML & CSS Is Hard:

  • Introduction
  • Basic Web Pages
  • Links & Images

• Sign up for the class’ Piazza forums

---

Week of Monday, September 2

Lecture: HTML5

HTML5 slides

---

Lab #1

Homework Due:

• Lab Exercise 1: My first WebpagePRO TIP: Validating your HTML code is a good way to catch mistakes and malformed markup.

• Read the following:

  • W3schools.com “CSS Tutorial” - from the CSS Introduction section up to and including the CSS Fonts section)
  • Rachel Andrew’s “How to Learn CSS”

---

Lab #2

Homework Due:

• Read: “Hello CSS” from HTML & CSS Is Hard

---

Week of Monday, September 9

Lecture: CSS3

CSS3 slides

---

Lab #1

Homework Due:

• Read Chapters 10 - 13 and 16 - 17 from Duckett, J. (2011) HTML & CSS: Design and Build Websites. Indianapolis, IN: John Wiley & Sons.
• Lab Exercise 2: Site Architecture - First Steps

---

Lab #2

Homework Due:

• Review: “The CSS Box Model” from HTML & CSS Is Hard

---

Week of Monday, September 16

Lecture: Responsive Design

Responsive Design slides

---

Lab #1

Homework Due:

• Read:
  • “Floats” from HTML & CSS Is Hard
  • “Responsive Design” from HTML & CSS Is Hard
  • “Responsive Design with Viewport Control”
• Lab Exercise 3: Inline-Block Gallery

---

Lab #2

Homework Due

• Read: Ayush Gupta's “Beginner’s Guide To CSS Grid And Flexbox”

  • “Learn CSS Flexbox in 5 Minutes”
  • “Flexbox” from HTML & CSS Is Hard
  • CSS Tricks’ “A Complete Guide to Flexbox”

• Play Flexbox Froggy

---

Week of Monday, September 23

Lecture: Flexbox

Flexbox slides

---

Lab #1

Homework Due:

• Experiment with the Learn Flexbox sandbox environment

---

Lab #2

Homework Due:

• Watch: Grid By Example Videos
• Play CSS Grid Garden

---

Week of Monday, September 30

Lecture: CSS Grid

---

Lab #1

Homework Due:

• Read:
  • Varun Vachhar's “Learning CSS Grid”
  • CSS Tricks’ “A Complete Guide to Grid”
  • Quackit's CSS Grid Tutorial

---

Lab #2

Homework Due:

• Lab Exercise 4: CSS Grid and Flexbox

---

Week of Monday, October 7

No Lecture: Fall Break

---

No Lab (Octber 7 - 8)

---

Labs! (October 9 - 11)

Workshop Midterm Websites

---

Week of Monday, October 14

Lecture: Animations – From GIFs to CSS3

CSS3 Animations slides

---

Lab #1

Workshop Midterm Websites

---

Lab #2

Homework Due:

• “CSS Transitions and Transforms for Beginners”
• “Using CSS Transitions”
• “Keyframe Animation Syntax”

---

Friday, October 185:00 PM

DUE: Midterm Websites

---

Week of Monday, October 21

Lecture: HTML5 Media (and a little Javascript)

HTML5 Media slides

---

Lab #1

Homework Due:

• “Video and Audio Content”
• “Adding Captions and Subtitles to HTML5 Video”

---

Lab #2

Homework Due:

• Lab Exercise 5: CSS Animations and HTML5 Media

---

Week of Monday, October 28

Lecture: Web Accessiblity

Web Accessibility slides

Monday, October 283:05 PM Deadline Extended to Lab #2 this week

DUE: Semester Project Proposal

---

Lab #1

Homework Due:

• Google's “Fundamentals of Web Accessibility”
• A11y Project's “Getting Started with ARIA”

In-class Lab

• Lab Exercise 6: Web Accessibility Testing

---

Lab #2

DUE: Semester Project Proposal

Homework Due:

• Understanding the DOM:
  • “What Exactly Is the DOM?”
  • “Understanding basics of DOM”

---

Week of Monday, November 4

Lecture: Javascript 101 (datatypes, variables, DOM manipulation)

Javascript 101: Introduction, Part 1 slides

---

Lab #1

Homework Due:

Watch and take notes on:

• Selecting & Changing Website Elements (DOM manipulation) [05:39] - CodePen Code

• CSS Styles in Javascript [06:38] - CodePen Code

• DOM Events [06:04] - CodePen Code

• addEventListener() Event Handler [05:32] - CodePen Code

• DOM Nodes [05:05] - CodePen Code

---

Lab #2

Homework Due:

Complete and take notes on:

• freeCodeCamp's Basic Javascript Curriculum → from Introduction to Javascript up to and including Shopping List

---

Week of Monday, November 11

Lecture: Javascript 101, continued (functions, logic, iteration)

Javascript 101: Introduction, Part 2 slides

---

Lab #1

Homework Due:

• Begin work on Lab Exercise 7 - MadLibs in Javascript

• Complete and take notes on: freeCodeCamp's Basic Javascript Curriculum → from Write Reusable Javascript with Functions up to and including Accessing Object Properties with Variables

---

Lab #2

Homework Due:

Complete and take notes on:

• freeCodeCamp's Basic Javascript Curriculum → from Updating Object Properties up to and including Use Recursion to Create a Countdown

---

Week of Monday, November 18

Lecture: Javascript 101: Objects / Plugins and Libraries

Javascript 101: Introduction, Part 3 slides

Read:

• Object-Oriented JavaScript for Beginners
• Javascript Object Basics

---

Lab #1

Homework Due:

• Due: Lab Exercise 7 - MadLibs in Javascript

• Research Javascript Plugins and Libraries

---

Lab #2

• Begin work on Lab Exercise 8 - Javascript Library Implementation

---

Week of Monday, November 25

Lecture: Fetching Data with Javascript

Fetching Data with Javascript slides

Homework Due:

• Lab Exercise 8 - Javascript Library Implementation

• Read:

  • What is JSON?
  • Working with JSON
  • Using Fetch - First section only: “Getting Data with Fetch”
  • Fetch API

---

No Labs This Week!

(You're welcome. Work on your semester project!)

---

Week of Monday, December 2

Lecture: The Future - WebAssembly, WebXR, Pyodide, etc

Homework:

• Work on your semester project!!

---

Wednesday, December 11th @ 12:00 PM

DUE: Final Websites