INFO 340 A Client Side Development

Autumn 2024 | M/W 8:30a-10:20a (DEM 104)

Instructor & TA Information

Instructor: Joel Ross
joelross@uw.edu
https://washington.zoom.us/my/joelross
Office Hours: Wed 2p-3p (MGH 330-Y), Thu 2p-4p (Zoom), or by appointment.

TA: Shangzhen Yang
Section AA Mon 12:30p - 1:20p (MGH 430)
shangy24@uw.edu
https://washington.zoom.us/j/9566913672
Office Hours: Wed 3:30p-4:30p (on Zoom)

TA: James Nguyen
Section AB Tue 9:30a - 10:20p (MGH 430)
jam860@uw.edu
https://washington.zoom.us/my/jam860
Office Hours: Tues 3:30p-4:30p (on Zoom)

Informatics Tutors:
https://canvas.uw.edu/courses/1736469/pages/informatics-tutors
see link for details and availability.

Quick Links

Course Book

Q&A on Ed

Code on GitHub

Lecture Zoom

Lecture Recordings

Lecture Demo Code

Student Resources

Course Schedule

For complete assignment listing and deadlines, see the Assignments page.

Getting Started

Just joining us? Start by doing the following:

READ the course syllabus. This will orient you to the course structure. THIS IS REQUIRED—DO IT!
COMPLETE the intro survey
JOIN the class Ed Discussion board. Once you join, please post a reply to the Introductions thread to say hello!
READ Ch 1: Getting Setup in the course book and install all the required development software. If you need help with something, let us know!

(You may also want to bookmark the course book, so you can quickly get back to it!)

Week 1 (Sep 25-29): Intro to Web Development

This short week gets you set up and started doing web development with HTML and CSS basics.

Lecture Recordings

Wed: Introduction (recording) (slides)

Resources and Tasks

READ: Chapter 2: Client-Side Development
WATCH: The Web and the Browser (slides)
READ: Chapter 3: HTML Fundamentals
WATCH: Intro to HTML (slides)
READ: Chapter 4: CSS Fundamentals
WATCH: Intro to CSS (slides)
WATCH: CSS Classes (slides)
READ Using the Command Line (Ch 2 in PS4DS)
WATCH: Command Line Basics
WATCH: Development Tools: npm and Jest

Assignments Due

No assignments are due this week, but you want to get a head-start on learning the tools (command line and Git/GitHub). Next week will go very fast!

Note that we won't cover command line in lecture, so make sure to try it out on your own following the video!

Week 2 (Sep 30-Oct 06): Git/GitHub; HTML Semantics

This week you'll learn to use web development tools, including version control with Git/GitHub and automated testing with Jest. You will also practice writing semantic and accessible HTML.

Lecture Recordings

Mon: Git & GitHub (recording) (slides)
Wed: HTML, CSS, & Accessibility (recording) (slides)

Resources and Tasks

READ Version Control with git and GitHub (Ch 3 in PS4DS)
WATCH: Starting with Git and GitHub
WATCH: Tracking Changes with Git
WATCH: Working with GitHub
READ Working Collaborative (Ch 20 in PS4DS)
WATCH: Git and Branching
WATCH: Branches on GitHub
COMPLETE: Problem Set 01 (due Wednesday)
READ: Chapter 5: Semantic HTML
WATCH: Writing Semantic HTML (slides)
WATCH: Headings and Semantic Sectioning (slides)
COMPLETE: Problem Set 02 (due Friday)

Assignments Due

Week 3 (Oct 07-13): More CSS

This week you'll dive deeper into CSS, learning to work with different selectors and properties (including using flexbox for layouts).

You'll also create a project proposal!

Lecture Recordings

Mon: CSS Selectors (recording) (slides)
Wed: CSS Properties and Flexbox (recording) (slides)

Resources and Tasks

READ: Chapter 6: CSS Selectors
WATCH: CSS Selectors (slides)
WATCH: Pseudo-classes (slides)
WATCH: CSS Specificity (slides)
COMPLETE Problem Set 03-a
READ: Chapter 7: CSS Properties
WATCH: CSS Fonts (slides)
WATCH: CSS: The Box Model (slides)
COMPLETE Problem Set 03-b
WATCH: Flexbox (slides)
COMPLETE Problem Set 03
COMPLETE: Project Proposal (due Friday)

Assignments Due

Week 4 (Oct 14-20): Responsive CSS; JavaScript

This week you'll learn to make pages responsive and to use CSS frameworks (particularly Bootstrap). This week also introduces the JavaScript programming language, which we'll use to (eventually) make web pages interactive. Here you'll learn the basic syntax of the language.

Lecture Recordings

Mon: Responsive CSS and Frameworks (recording) (slides)
Wed: JavaScript (recording) (slides)

Resources and Tasks

READ: Chapter 8: Responsive CSS
WATCH: Responsive CSS
COMPLETE: Problem Set 04-a
READ: Chapter 9: CSS Frameworks
WATCH: Bootstrap (slides)
WATCH: Responsive Bootstrap (slides)
WATCH: Interactive Bootstrap (slides)
COMPLETE: Problem Set 04 (due Friday)
READ: Chapter 10: JavaScript Fundamentals
WATCH: Hello JavaScript
WATCH: JavaScript: Variable Basics
WATCH: JavaScript: Data Structures
WATCH: JavaScript: Control Structures
COMPLETE: Problem Set 05-a and 05-b

Assignments Due

Problem Set 04

Week 5 (Oct 21-27): DOM Manipulation

This week you'll continue learning the JavaScript language, including using JavaScript to manipulate web page content and make them interactive.

The first draft of the project is also due this week!

Lecture Recordings

Mon: Functional JavaScript (recording) (slides)
Wed: DOM Manipulation (recording) (slides)

Resources and Tasks

READ: Chapter 11: Functional Programming in JS
WATCH: Functional JavaScript
WATCH: JavaScript: Functional Looping
COMPLETE: Problem Set 05 (due Friday)
READ: Chapter 12: Document Object Model (DOM)
WATCH: DOM Manipulation
COMPLETE: Problem Set 06-a
WATCH: DOM Interactivity
COMPLETE: Problem Set 06-b
COMPLETE: Project Draft 1 (due Sunday)

Assignments Due

Problem Set 05 (due Friday)
Project Draft 1 (due Sunday)

Week 6 (Oct 28-03): React Introduction

This week will introduce getting started with the React framework! You'll learn some additional JavaScript syntax introduced in ES6 and beyond which is used in React, as well as how to set up and create applications in React using data-driven components

Lecture Recordings

Mon: ES6+ Syntax (recording) (slides)
Wed: React Introduction (recording) (slides)

Resources and Tasks

READ: Chapter 14: ES6+ Syntax (note: skips Ch 13!)
WATCH: Arrow Functions
WATCH: Destructuring and Spreading
WATCH: ES6 Modules
COMPLETE: Problem Set 06 (due Friday)
READ: Chapter 15: Introduction to React
WATCH: Getting Started with React (check Wed lecture recording)
WATCH: JSX
WATCH: React: Components
WATCH: React: Props
COMPLETE: Problem Set 07-a

Assignments Due

Problem Set 06

Week 7 (Nov 04-Nov 10): Interactive React

This week covers how to make interactive apps with React by using events and state.

Lecture Recordings

Mon: React Apps (recording) (slides)
Wed: Interactive React (recording) (slides)

Tasks

It may seem like a light week, but the videos are long and the concepts take some time to sit!

Assignments Due

No assignments due this week, but you should finish most of problem set 07 to stay on track.

Week 8 (Nov 11-17): Interactive React II

This week you'll finish practicing making interactive React apps.

NO CLASS or LAB MONDAY due to holiday

Lecture Recordings

Mon: No class!
Wed: Interactive React II (recording) (slides)

Resources and Tasks

This week again is light because of the holiday, so you have lots of time to work on the project draft! You can also get a head-start on next week's material.

WATCH: React: Forms
WATCH: React Chat - Adding Messages
WATCH: React Chat - Changing Users
COMPLETE: Problem Set 07 (due Friday)

Assignments Due

Problem Set 07

You also should work on your project draft that is due next week!

Week 9 (Nov 18-24): React Libraries & Routing; AJAX

This week covers how to use additional component libraries with React—specifically React Router to give an app multiple pages. You will also learn about accessing external data using AJAX

The second draft of your project is also due!!

Lecture Recordings

Mon: React Router (recording) (slides)
Wed: AJAX (recording) (slides)

Resources and Tasks

WATCH: React Libraries
READ: Chapter 17: Client-Side Routing
WATCH: React Router
COMPLETE: Problem Set 08 (due Wednesday)
READ: Chapter 18: AJAX Requests
WATCH: AJAX and Promises
WATCH: React Effect Hooks
COMPLETE: Project Draft 2 (due Friday)

Assignments Due

Problem Set 08 due Wed
Project Draft 2 due Fri
Problem Set 09 due next week

Week 10 (Nov 25-Dec 01): Firebase

This short week introduces the Firebase web service, which is used for storing persistent data and that you'll use with your project.

Lecture Recordings

Wed: Firebase Database
Wed: No Class (Thanksgiving)

Resources and Tasks

REVIEW: Chapter 18: AJAX Requests
COMPLETE: Problem Set 09 (due Wednesday)
READ: Chapter 19: Firebase
WATCH: Firebase Configuration
WATCH: Firebase Database
WATCH: Firebase Authentication
WATCH: Firebase Image Storage

Assignments Due

Problem Set 09 due Wed

Week 11 (Dec 02-08): Conclusions

It's the last week! We'll finish going over Firebase, and otherwise wrap up the course. This is your chance to catch up on anything you've missed and complete your projects.

Lecture Recordings

Mon: Conclusions
Wed: TBD (work time probably)

Tasks

COMPLETE: Final Project (due next Monday!)

Assignments Due

Final Project (due next Monday!)

Week Finals (Dec 09-13)

Finals week! Final projects are due!

Assignments

Final Project!!