INFO 340 A Wi 25: Client-Side Development
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)
Instructor & TA Information
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.
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)
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:
READ the course syllabus. This will orient you to the course structure. THIS IS REQUIRED—DO IT!
COMPLETE the intro survey Links to an external site.
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!
-
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
- Mon: Introduction (recording Links to an external site.) (slides Links to an external site.)
- Wed: Git & GitHub (recording Links to an external site.) (slides Links to an external site.)
Resources and Tasks
- READ: Chapter 2: Client-Side Development Links to an external site.
- WATCH: The Web and the Browser Links to an external site. (slides Links to an external site.)
- READ: Chapter 3: HTML Fundamentals Links to an external site.
- WATCH: Intro to HTML Links to an external site. (slides Links to an external site.)
- READ: Chapter 4: CSS Fundamentals Links to an external site.
- WATCH: Intro to CSS Links to an external site. (slides Links to an external site.)
- WATCH: CSS Classes Links to an external site. (slides Links to an external site.)
- READ Using the Command Line Links to an external site. (Ch 2 in PS4DS)
- WATCH: Command Line Basics Links to an external site.
- WATCH: Development Tools: npm and Jest Links to an external site.
- READ Version Control with git and GitHub Links to an external site. (Ch 3 in PS4DS)
- WATCH: Starting with Git and GitHub Links to an external site.
- WATCH: Tracking Changes with Git Links to an external site.
- WATCH: Working with GitHub Links to an external site.
- READ Working Collaborative Links to an external site. (Ch 20 in PS4DS)
- WATCH: Git and Branching Links to an external site.
- WATCH: Branches on GitHub Links to an external site.
- COMPLETE: Problem Set 01 (due Friday)
Assignments Due
Week 2 (Jan 13-19): HTML Semantics; CSS
This week you'll practice writing semantic and accessible HTML, as well as learning how to style web pages using CSS.
You'll also create a project proposal!
Lecture Recordings
- Mon: HTML, CSS, & Accessibility (recording Links to an external site.) (slides Links to an external site.)
- Wed: CSS Selectors (recording) Links to an external site. (slides Links to an external site.)
Resources and Tasks
- READ: Chapter 5: Semantic HTML Links to an external site.
- WATCH: Writing Semantic HTML Links to an external site. (slides Links to an external site.)
- WATCH: Headings and Semantic Sectioning Links to an external site. (slides Links to an external site.)
- COMPLETE: Problem Set 02 (due Wed)
- READ: Chapter 6: CSS Selectors Links to an external site.
- WATCH: CSS Selectors Links to an external site. (slides Links to an external site.)
- WATCH: Pseudo-classes Links to an external site. (slides Links to an external site.)
- WATCH: CSS Specificity Links to an external site. (slides Links to an external site.)
- COMPLETE Problem Set 03-a
- COMPLETE: Project Proposal (due Friday)
Assignments Due
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
- Mon: No lecture (holiday). Catch up with videos instead!
- Wed: CSS Review, Media Queries, and Frameworks (recording) Links to an external site. (slides Links to an external site.)
Resources and Tasks
- READ: Chapter 7: CSS Properties Links to an external site.
- WATCH: CSS Fonts Links to an external site. (slides Links to an external site.)
- WATCH: CSS: The Box Model Links to an external site. (slides Links to an external site.)
- COMPLETE Problem Set 03-b
- WATCH: Flexbox Links to an external site. (slides Links to an external site.)
- COMPLETE Problem Set 03 (due Wednesday)
- READ: Chapter 8: Responsive CSS Links to an external site.
- WATCH: Responsive CSS Links to an external site.
- COMPLETE: Problem Set 04-a
- READ: Chapter 9: CSS Frameworks Links to an external site.
- WATCH: Bootstrap Links to an external site. (slides Links to an external site.)
- WATCH: Responsive Bootstrap Links to an external site. (slides Links to an external site.)
- WATCH: Interactive Bootstrap Links to an external site. (slides Links to an external site.)
- 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
- Mon: JavaScript (recording) Links to an external site. (slides Links to an external site.)
- Wed: Functional JavaScript (recording) Links to an external site. (slides Links to an external site.)
Resources and Tasks
- READ: Chapter 10: JavaScript Fundamentals Links to an external site.
- WATCH: Hello JavaScript Links to an external site.
- WATCH: JavaScript: Variable Basics Links to an external site.
- WATCH: JavaScript: Data Structures Links to an external site.
- WATCH: JavaScript: Control Structures Links to an external site.
- COMPLETE: Problem Set 05-a and 05-b
- READ: Chapter 11: Functional Programming in JS Links to an external site.
- WATCH: Functional JavaScript Links to an external site.
- WATCH: JavaScript: Functional Looping Links to an external site.
- COMPLETE: Problem Set 05 (due Friday)
- COMPLETE: Project Draft 1 (due Sunday)
Assignments Due
- Problem Set 05 (due Friday)
- Project Draft 1 (due Sunday)
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
- Mon: DOM Manipulation (recording) Links to an external site. (slides Links to an external site.)
- Mon: ES6+ Syntax (recording) Links to an external site. (slides Links to an external site.)
Resources and Tasks
- READ: Chapter 12: Document Object Model (DOM) Links to an external site.
- WATCH: DOM Manipulation Links to an external site.
- COMPLETE: Problem Set 06-a
- WATCH: DOM Interactivity Links to an external site.
- COMPLETE: Problem Set 06-b
- READ: Chapter 14: ES6+ Syntax Links to an external site. (note: skips Ch 13!)
- WATCH: Arrow Functions Links to an external site.
- WATCH: Destructuring and Spreading Links to an external site.
- WATCH: ES6 Modules Links to an external site.
- 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
- Mon: React Introduction (recording) Links to an external site. (slides Links to an external site.)
- Wed: React Components, Props, and Apps (recording) Links to an external site. (slides Links to an external site.)
Resources and Tasks
- READ: Chapter 15: Introduction to React Links to an external site.
- WATCH: Getting Started with React (check Mon lecture recording)
- WATCH: JSX Links to an external site.
- WATCH: React: Components Links to an external site.
- WATCH: React: Props Links to an external site.
- 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
- Mon: No lecture (holiday). Catch up with videos instead!
- Wed: Interactive React (recording) Links to an external site. (slides Links to an external site.)
Tasks
- WATCH: React Chat - Components Links to an external site.
- READ: Chapter 16: Interactive React Links to an external site.
- WATCH: React: Events & State Links to an external site.
- COMPLETE: Problem Set 07-b
- WATCH: React: Forms Links to an external site.
- WATCH: React Chat - Adding Messages Links to an external site.
- WATCH: React Chat - Changing Users Links to an external site.
- 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
- Mon: React Libraries & Router (recording) Links to an external site. (slides Links to an external site.)
- Wed: React Review / Work Time (recording) Links to an external site. (slides Links to an external site.)
Resources and Tasks
This week is light in order to make space for the project work.
- WATCH: React Libraries Links to an external site.
- READ: Chapter 17: Client-Side Routing Links to an external site.
- WATCH: React Router Links to an external site. (slightly out of date; check lecture and textbook!)
- COMPLETE: Problem Set 08 (due Wednesday)
- WATCH: Hosting with Firebase (check lecture recording)
Assignments Due
- Problem Set 08 due Wednesday
- Project Draft 2 due Sunday
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
- Mon: AJAX (recording) Links to an external site. (slides Links to an external site.)
- Mon: Firebase Database (recording) Links to an external site. (slides Links to an external site.)
Resources and Tasks
- READ: Chapter 18: AJAX Requests Links to an external site.
- WATCH: AJAX and Promises Links to an external site.
- WATCH: React Effect Hooks Links to an external site.
- COMPLETE: Problem Set 09 (due Wednesday)
- READ: Chapter 19: Firebase Links to an external site.
- WATCH: Firebase Configuration Links to an external site.
- WATCH: Firebase Database Links to an external site.
Assignments Due
- Problem Set 09 due Wednesday
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
- Mon: Firebase Authentication Firebase Authentication Links to an external site. (slides Links to an external site.)
- Wed: Conclusions (recording) Links to an external site. (slides Links to an external site.)
Resources and Tasks
- WATCH: Firebase Authentication Links to an external site. (see lecture for updates)
- WATCH: Firebase Image Storage Links to an external site. (see lecture for updates)
- COMPLETE: Final Project (due next Monday!)
Assignments Due
- Final Project (due next Monday!)
Week Finals (Mar 17-21)
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.