MPCS 52553 Web Development (Winter 2021)

Section 2
Instructor(s) Austin, Trevor (trevoraustin)
Location Online Only
Meeting Times Wednesday 1:50pm - 4:50pm
Fulfills Elective Specialization - Application Development (APP-1)


*This course will be conducted remotely and will be online only for Winter 2021*

Course Description

This course is intended to prepare students with a general programming background to work on teams producing modern web applications. It is necessarily a survey, but aims to cover the major design patterns, their origins, and their motivations, to give students a strong foundation they can use in this rapidly-evolving field. We will take time to highlight often-counterintuitive features of languages and frameworks (“wats”) without emphasizing mastery of arcana.

Specifically, the course will cover content layout and styling with HTML and CSS, dynamically generating page content on the web server, interacting with databases, interacting with remote resources using HTTP and REST, client-side interactivity with modern Javascript, and the creation of single-page applications. This course uses agile software techniques to build real, working software each week.

Course Contents
  • Fundamentals of HTML5, CSS3, and JavaScript/ES6 for front-end programming
  • Visual design, accessibility requirements, and assistive technologies
  • Mobile website development
  • Essentials of HTTP 1.1 and 2.0
  • Server-side page rendering in Python
  • Database-driven application development REST
  • API development in Python and Flask
  • Single-page application development in React
  • Debugging tools and techniques

Students will be expected to complete:
6 programming exercises due before class on weeks 2, 3, 4, 5, and 6, 7 (30 pts)
1 final project due by week 10 (20 pts)


($12) "HTTP: Learn Your Browser's Language", Julia Evans, 2019
(Free online)

Office Hours


Contact Info

Grading Policy
Grades are not curved in this class. Assignments are graded on a 5-point scale, including the final project, which is weighted 4x more than regular assignments. Scores on the assignments are averaged to set of grade boundaries:
  • 4.5 and above: A
  • 4.0 and above: A-
  • 3.7 and above: B+
  • 3.3 and above B
  • 3.0 and above B-
  • 2.7 and above C+
  • 2.3 and above: C
  • 2.0 and above C-
  • Below 2.0: Dealt with on a case-by-case basis
Late Policy

Exercises are due at the start of the next class. Late Exercises are accepted, but penalized 1 point, and 1 additional point for each full week they are late.

Tentative Weekly Schedule

Web Pages as Documents
  • Week 1: HTML5: semantic markup, elements, attributes, and the DOM CSS3: Fonts, colors, borders, ids, classes, and the box model The inspect panel Exercise #1: Static Pages: A Resume
  • Week 2: HTML5 Accessibility: screen readers, visual alerting, and captioning CSS3: media queries, mobile-first design, icons, web fonts CSS3: Modern Layouts with border-box, flexbox, and grid CSS3: frameworks Exercise #2: Advanced Layout: a Landing Page
Web Pages as Catalogs
  • Week 3: HTTP network basics, CRUD operations, URL parameters, forms and validation Intro to the LAMP stack Intro to databases Exercise #3: Web Journal
  • Week 4 ES6: Functions, callbacks, DOM manipulation, page state Connecting to REST APIs Advanced databases Exercise #4: Mood Board
Web Applications
  • Week 5 CORS Timers, asynchronous functions, Promises Intro to Python and Flask Exercise #5: Watch Party
  • Week 6 Custom elements Exercise #6: Watch Party 2: The Single-Page Experience
  • Week 7 Intro to React: Components, props, state, JSX
  • Week 8 React: Classes, Composability Database migrations
  • Week 9 Event Handling: The Enter Key Databases: securely storing passwords
  • Week 10 Continuous delivery: automated tests, continuous integration, feature flags FINAL PROJECT DUE

Course Prerequisites

Core Programming

Other Prerequisites

Students must be fluent in at least one programming language, preferably an object-oriented language.

Overlapping Classes

This class is scheduled at a time that does not conflict with any other classes this quarter.