INFO 340 A Au 24: Client-Side Development

Course Schedule

INFO 340 A Client Side Development

Autumn 2024 | M/W 8:30a-10:20a (DEM 104 Links to an external site.)

spider web with dew

Instructor & TA Information

Joel Ross

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

Shangzhen Yang head shot

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

James Nguyen head shot

TA: James Nguyen
Section AB Tue 9:30a - 10:20p (MGH 430 Links to an external site.)
jam860@uw.edu
https://washington.zoom.us/my/jam860 Links to an external site.
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.

Course Schedule

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

Getting Started

Just joining us? Start by doing the following:

  1. READ the course syllabus. This will orient you to the course structure. THIS IS REQUIRED—DO IT!

  2. COMPLETE the intro survey Links to an external site.

  3. JOIN the class Ed Discussion Links to an external site. board Links to an external site.. Once you join, please post a reply to the Introductions thread to say hello!

  4. READ Ch 1: Getting Setup Links to an external site. in the course book Links to an external site. 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

Resources and Tasks

  1. READ: Chapter 2: Client-Side Development Links to an external site.
  2. WATCH: The Web and the Browser Links to an external site. (slides Links to an external site.)
  3. READ: Chapter 3: HTML Fundamentals Links to an external site.
  4. WATCH: Intro to HTML Links to an external site. (slides Links to an external site.)
  5. READ: Chapter 4: CSS Fundamentals Links to an external site.
  6. WATCH: Intro to CSS Links to an external site. (slides Links to an external site.)
  7. WATCH: CSS Classes Links to an external site. (slides Links to an external site.)
  8. READ Using the Command Line Links to an external site. (Ch 2 in PS4DS)
  9. WATCH: Command Line Basics Links to an external site.
  10. WATCH: Development Tools: npm and Jest Links to an external site.

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

Week 3 (Oct 07-13): More CSS

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

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

Resources and Tasks

  1. READ: Chapter 11: Functional Programming in JS Links to an external site.
  2. WATCH: Functional JavaScript Links to an external site.
  3. WATCH: JavaScript: Functional Looping Links to an external site.
  4. COMPLETE: Problem Set 05 (due Friday)
  5. READ: Chapter 12: Document Object Model (DOM) Links to an external site.
  6. WATCH: DOM Manipulation Links to an external site.
  7. COMPLETE: Problem Set 06-a
  8. WATCH: DOM Interactivity Links to an external site.
  9. COMPLETE: Problem Set 06-b
  10. COMPLETE: Project Draft 1 (due Sunday)

Assignments Due

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

Resources and Tasks

  1. READ: Chapter 14: ES6+ Syntax Links to an external site. (note: skips Ch 13!)
  2. WATCH: Arrow Functions Links to an external site.
  3. WATCH: Destructuring and Spreading Links to an external site.
  4. WATCH: ES6 Modules Links to an external site.
  5. COMPLETE: Problem Set 06 (due Friday)
  6. READ: Chapter 15: Introduction to React Links to an external site.
  7. WATCH: Getting Started with React (check Wed lecture recording)
  8. WATCH: JSX Links to an external site.
  9. WATCH: React: Components Links to an external site.
  10. WATCH: React: Props Links to an external site.
  11. COMPLETE: Problem Set 07-a

Assignments Due

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

Tasks

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

  1. WATCH: React Chat - Components Links to an external site.
  2. READ: Chapter 16: Interactive React Links to an external site.
  3. WATCH: React: Events & State Links to an external site.
  4. COMPLETE: Problem Set 07-b

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

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.

  1. WATCH: React: Forms Links to an external site.
  2. WATCH: React Chat - Adding Messages Links to an external site.
  3. WATCH: React Chat - Changing Users Links to an external site.
  4. COMPLETE: Problem Set 07 (due Friday)

Assignments Due

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

Resources and Tasks

  1. WATCH: React Libraries Links to an external site.
  2. READ: Chapter 17: Client-Side Routing Links to an external site.
  3. WATCH: React Router Links to an external site.
  4. COMPLETE: Problem Set 08 (due Wednesday)
  5. READ: Chapter 18: AJAX Requests Links to an external site.
  6. WATCH: AJAX and Promises Links to an external site.
  7. WATCH: React Effect Hooks Links to an external site.
  8. COMPLETE: Project Draft 2 (due Friday)

Assignments Due

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

Resources and Tasks

  1. REVIEW: Chapter 18: AJAX Requests Links to an external site.
  2. COMPLETE: Problem Set 09 (due Wednesday)
  3. READ: Chapter 19: Firebase Links to an external site.
  4. WATCH: Firebase Configuration Links to an external site.
  5. WATCH: Firebase Database Links to an external site.
  6. WATCH: Firebase Authentication Links to an external site.
  7. WATCH: Firebase Image Storage Links to an external site.

Assignments Due

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

Tasks

  1. COMPLETE: Final Project (due next Monday!)

Assignments Due

Week Finals (Dec 09-13)

Finals week! Final projects are due!

Assignments

CC Attribution Non-Commercial Share Alike This course content is offered under a CC Attribution Non-Commercial Share Alike Links to an external site. license. Content in this course can be considered under this license unless otherwise noted.