Course Schedule
INFO 340 Client Side Development
Summer 2024 | Online
Instructor & TA Information
Instructor: Joel Ross
joelross@uw.edu
https://washington.zoom.us/my/joelross
Links to an external site.
Office Hours: Tue/Thu 2p-3:30p, or by appointment
(on Zoom
Links to an external site.)
TA: Shangzhen Yang
Section A
shangy24@uw.edu
https://washington.zoom.us/j/9566913672
Links to an external site.
Office Hours: Fri 4p-5p
TA: James Nguyen
Section B
jam860@uw.edu
https://washington.zoom.us/my/jam860
Links to an external site.
Office Hours: Mon 1:30p-2:30p
Course Schedule
For complete assignment listing and deadlines, see the Assignments page.
Getting Started
Just joining us? Start by doing the following:
WATCH the Welcome Video Links to an external site. (and the demo of some example projects Links to an external site.)
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!
COMPLETE the group-forming survey Links to an external site. to help us get you into groups. You can do this after you've chatted on Ed to find people to work with, but please do so by Wednesday Jun 19
-
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!)
-
REVIEW the command line and git—especially if it has been a while since you've used them. You are expected to be comfortable working with git, including managing branches and merging changes. You should review the following resources:
- Read Chapters 2, 3, and 20 (especially 20!) from the Programming Skills Links to an external site. textbook from INFO 201.
- Watch this command-line demo video Links to an external site.
- Watch this git demo video Links to an external site.
- Watch this GitHub demo video Links to an external site.
Week 1 (Jun 17-23): Intro, HTML, CSS
This week gets you set up and started doing web development with HTML/CSS basics. You'll learn how to write semantic and accessible HTML, and to style it with CSS.
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.)
- WATCH: Development Tools: npm and Jest 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.)
- COMPLETE: Problem Set 01 (due Tuesday)
- COMPLETE: group-forming survey Links to an external site. (due Wednesday)
- 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 Friday)
- COMPLETE: Project Proposal (due Tuesday week 2)
Week 2 (Jun 24-30): 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).
Tasks
- COMPLETE: Project Proposal (due Tuesday)
- 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
- 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 Friday)
Week 3 (Jul 01-07): JavaScript
This week introduces the JavaScript programming language, which we'll use to (eventually) make web pages interactive. You'll learn the basic syntax of the language.
The first draft of your project is also due at the end of the week!
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)
Week 4 (Jul 08-14): DOM Manipulation
This week covers using JavaScript to manipulate web page content and make them interactive. You'll also be learning some additional JavaScript syntax introduced in ES6 and beyond (which will be used in React)
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)
Week 5 (Jul 15-21): React Introduction
This week will introduce getting started with the React framework, and developing data-drive components. React is a big topic, so this material (and the associated problem set) will continue into next week as well.
Tasks
- READ: Chapter 15: Introduction to React Links to an external site.
- WATCH: Getting Started with React Links to an external site.
- 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
- BEGIN: Problem Set 07-b
Week 6 (Jul 22-28): Interactive React
This week covers how to make interactive apps with React by using events and state.
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 Friday)
Week 7 (Jul 29-Aug 04): React Libraries & Routing
This week covers how to use additional component libraries with React—specifically React Router to give an app multiple pages.
The second draft of your project is also due—most of your week will be focused on that.
Tasks
- 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.
- COMPLETE: Problem Set 08 (due Wednesday)
- WATCH: Hosting with Firebase Links to an external site.
- COMPLETE: Project Draft 2 (due Friday)
Week 8 (Aug 05-11): AJAX & Firebase
This week covers how to access external data using AJAX. It will also introduce the Firebase web service, which is used for storing persistent data.
Tasks
- WATCH: AJAX and Promises Links to an external site.
- WATCH: React Effect Hooks Links to an external site.
- READ: Chapter 18: AJAX Requests 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.
- WATCH: Firebase Authentication Links to an external site.
- WATCH: Firebase Image Storage Links to an external site.
Week 9 (Aug 12-16): Final Projects
It's the last week! This is your chance to catch up on anything you've missed and complete your projects. Final projects are due on Friday!!
Tasks
- WATCH: Conclusion
- COMPLETE: Final Project (due Friday!)