Schedule subject to change at instructor’s discretion.
Week of Wednesday, May 13
Lecture: Introduction
For Next Monday:
Skim:
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)
-
HTTP and HTML (7:06)
-
Read selected chapters from HTML & CSS Is Hard:
-
Sign up for the class’ Piazza forums
-
Sign up for weekly presentations
Week of Monday, May 18
Lecture: HTML5
For Wednesday:
-
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”
- Paul Ford, What is Code?
- Read: “Hello CSS” from HTML & CSS Is Hard
Wednesday Lecture: CSS3
For Tuesday:
- 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
- Review: “The CSS Box Model” from HTML & CSS Is Hard
- Alex Galloway's "Protocol", Chpt 1 (sakai)
Week of Tuesday, May 26
Tuesday Lecture: Responsive Design
For Friday:
- 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
For Friday:
-
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”
- Jason Huff, Interface Aesthetics
-
Play Flexbox Froggy
Friday Lecture: Flexbox
For Monday:
- Experiment with the Learn Flexbox sandbox environment
- Watch: Grid By Example Videos
- Play CSS Grid Garden
Week of Monday, June 1
Monday Lecture: CSS Grid
For Wednesday:
- Read:
- Lab Exercise 4: CSS Grid and Flexbox
Wednesday Lecture: Animations – From GIFs to CSS3
Wednesday: Workshop Midterm Websites
For Friday:
June 8
DUE: Midterm Websites
Week of Monday, June 8
Monday Lecture: HTML5 Media (and a little Javascript)
For Wednesday:
- Lab Exercise 5: CSS Animations and HTML5 Media
Wednesday Lecture: Web Accessiblity
For Friday:
- Complete Example on “iframe embeds”
- Google's “Fundamentals of Web Accessibility”
- A11y Project's “Getting Started with ARIA”
- Lab Exercise 6: Web Accessibility Testing
For Monday: DUE: Monday 6/15 Semester Project Proposal
For Monday:
- Understanding the DOM:
Week of Monday, June 15
Monday Lecture: Javascript 101 (datatypes, variables, DOM manipulation)
Javascript 101: Introduction, Part 1 slides
For Wednesday:
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
-
Begin work on Lab Exercise 7 - MadLibs in Javascript
For Friday:
Complete and take notes on:
- freeCodeCamp's Basic Javascript Curriculum → from Introduction to Javascript up to and including Shopping List
Friday Lecture: Javascript 101, continued (functions, logic, iteration)
Javascript 101: Introduction, Part 2 slides
For Monday:
-
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
- Begin work on Lab Exercise 8 - Javascript Library Implementation
- freeCodeCamp's Basic Javascript Curriculum → from Updating Object Properties up to and including Use Recursion to Create a Countdown
Week of Monday, June 22
Monday Lecture: Javascript 101: Objects / Plugins and Libraries
Javascript 101: Introduction, Part 3 slides
Read:
For Wednesday:
-
Research Javascript Plugins and Libraries
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
Date TBD
Lecture: The Future - WebAssembly, WebXR, Pyodide, etc
Homework:
- Work on your semester project!!
TBA
DUE: Final Websites