View All Pages
Front Page

Course Schedule

INFO 340 A Client Side Development

Winter 2025 | M/W 10:30a-12:20a (JHN 175 Links to an external site.) | Lab (by section)

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.

Tameem Hassan head shot

TA: Tameem Hassan
Section AA Mon 1:30p - 2:20p (MGH 430 Links to an external site.)
tameem@uw.edu
https://washington.zoom.us/my/tameemh Links to an external site.
Office Hours: Fri & Sat 10a-11a, Sun 7p-8p (on Zoom)

James Nguyen head shot

TA: James Nguyen
Section AB Tue 12:30a - 1:20p (MGH 430 Links to an external site.)
jam860@uw.edu
https://washington.zoom.us/my/jam860 Links to an external site.
Office Hours: Tue 1:30p- 2: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 (Jan 06-12): Intro to Web Development and Tools

This week gets you set up and started doing web development with HTML and CSS basics. We'll be focusing on web development tools, including version control with Git/GitHub and automated testing with Jest. It's a busy week since there is a lot to get started with!

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.
  11. READ Version Control with git and GitHub Links to an external site. (Ch 3 in PS4DS)
  12. WATCH: Starting with Git and GitHub Links to an external site.
  13. WATCH: Tracking Changes with Git Links to an external site.
  14. WATCH: Working with GitHub Links to an external site.
  15. READ Working Collaborative Links to an external site. (Ch 20 in PS4DS)
  16. WATCH: Git and Branching Links to an external site.
  17. WATCH: Branches on GitHub Links to an external site.
  18. COMPLETE: Problem Set 01 (due Friday)

Assignments Due

  • Problem Set 01

    • Week 2 (Jan 13-19): HTML Semantics; CSS

    Week 3 (Jan 20-26): 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 learn to make pages responsive and to use CSS frameworks (particularly Bootstrap).

    This is a VERY busy week!

    Lecture Recordings

    Resources and Tasks

    1. READ: Chapter 7: CSS Properties Links to an external site.
    2. WATCH: CSS Fonts Links to an external site. (slides Links to an external site.)
    3. WATCH: CSS: The Box Model Links to an external site. (slides Links to an external site.)
    4. COMPLETE Problem Set 03-b
    5. WATCH: Flexbox Links to an external site. (slides Links to an external site.)
    6. COMPLETE Problem Set 03 (due Wednesday)
    7. READ: Chapter 8: Responsive CSS Links to an external site.
    8. WATCH: Responsive CSS Links to an external site.
    9. COMPLETE: Problem Set 04-a
    10. READ: Chapter 9: CSS Frameworks Links to an external site.
    11. WATCH: Bootstrap Links to an external site. (slides Links to an external site.)
    12. WATCH: Responsive Bootstrap Links to an external site. (slides Links to an external site.)
    13. WATCH: Interactive Bootstrap Links to an external site. (slides Links to an external site.)
    14. COMPLETE: Problem Set 04 (due Sunday)

    Assignments Due

    There are two problem sets due this week, but you should have most of PS 03 done already.

    Week 4 (Jan 27-Feb 02): JavaScript

    This week introduces the JavaScript programming language, which we'll use to (eventually) make web pages interactive. This week focuses on the syntax of the language.

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

    Lecture Recordings

    Resources and Tasks

    1. READ: Chapter 10: JavaScript Fundamentals Links to an external site.
    2. WATCH: Hello JavaScript Links to an external site.
    3. WATCH: JavaScript: Variable Basics Links to an external site.
    4. WATCH: JavaScript: Data Structures Links to an external site.
    5. WATCH: JavaScript: Control Structures Links to an external site.
    6. COMPLETE: Problem Set 05-a and 05-b
    7. READ: Chapter 11: Functional Programming in JS Links to an external site.
    8. WATCH: Functional JavaScript Links to an external site.
    9. WATCH: JavaScript: Functional Looping Links to an external site.
    10. COMPLETE: Problem Set 05 (due Friday)
    11. COMPLETE: Project Draft 1 (due Sunday)

    Assignments Due

    Week 5 (Feb 03-09): DOM Manipulation

    This week you'll learn to use JavaScript to manipulate web page content and make them interactive. You'll also learn some additional JavaScript syntax introduced in ES6 and beyond which is used in React.

    Lecture Recordings

    Resources and Tasks

    1. READ: Chapter 12: Document Object Model (DOM) Links to an external site.
    2. WATCH: DOM Manipulation Links to an external site.
    3. COMPLETE: Problem Set 06-a
    4. WATCH: DOM Interactivity Links to an external site.
    5. COMPLETE: Problem Set 06-b
    6. READ: Chapter 14: ES6+ Syntax Links to an external site. (note: skips Ch 13!)
    7. WATCH: Arrow Functions Links to an external site.
    8. WATCH: Destructuring and Spreading Links to an external site.
    9. WATCH: ES6 Modules Links to an external site.
    10. COMPLETE: Problem Set 06 (due Friday)

    Assignments Due

    Week 6 (Feb 10-16): React Introduction

    This week will get you started with the React framework! You'll get set up and learn how to create pages in React using data-driven components

    Lecture Recordings

    Resources and Tasks

    1. READ: Chapter 15: Introduction to React Links to an external site.
    2. WATCH: Getting Started with React (check Mon lecture recording)
    3. WATCH: JSX Links to an external site.
    4. WATCH: React: Components Links to an external site.
    5. WATCH: React: Props Links to an external site.
    6. COMPLETE: Problem Set 07-a

    Assignments Due

    No assignments due this week, but you will need to make progress on problem set 07 to stay on track.

    Week 7 (Feb 17-23): Interactive React

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

    Note that Monday is a holiday so we won't have lecture (nor either lab section); you'll need to check out the video demos instead. This is somewhat unfortunate timing.

    Lecture Recordings

    Tasks

    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
    5. WATCH: React: Forms Links to an external site.
    6. WATCH: React Chat - Adding Messages Links to an external site.
    7. WATCH: React Chat - Changing Users Links to an external site.
    8. COMPLETE: Problem Set 07 (due Sunday)

    Assignments Due

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

    Week 8 (Feb 24-Mar 02): React Libraries & Routing

    This week covers how to use additional component libraries with React—specifically React Router to give an app multiple pages.

    There isn't a lot of new content this week, giving us a chance for some review and for you to catch up if needed.

    The second draft of your project is also due!

    Lecture Recordings

    Resources and Tasks

    This week is light in order to make space for the project work.

    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. (slightly out of date; check lecture and textbook!)
    4. COMPLETE: Problem Set 08 (due Wednesday)
    5. WATCH: Hosting with Firebase (check lecture recording)

    Assignments Due

    Week 9 (Mar 03-09): AJAX; Firebase

    This week you will also learn about accessing external data using AJAX. We'll also introduce 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. READ: Chapter 18: AJAX Requests Links to an external site.
    2. WATCH: AJAX and Promises Links to an external site.
    3. WATCH: React Effect Hooks Links to an external site.
    4. COMPLETE: Problem Set 09 (due Wednesday)
    5. READ: Chapter 19: Firebase Links to an external site.
    6. WATCH: Firebase Configuration Links to an external site.
    7. WATCH: Firebase Database Links to an external site.

    Assignments Due

    Week 10 (Mar 10-16): More Firebase and Conclusions

    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. WATCH: Firebase Authentication Links to an external site. (see lecture for updates)
    2. WATCH: Firebase Image Storage Links to an external site. (see lecture for updates)
    3. COMPLETE: Final Project (due next Monday!)

    Assignments Due

    Week Finals (Mar 17-21)

    Finals week! Final projects are due!

    Assignments