MPCS 52553 Web Development (Winter 2022)

Course Description

This course is intended to prepare students with a general programming background to work on teams producing modern web applications. Students will learn a strong foundation of core web technologies and protocols, an overview of the major design patterns in the history of web development, and a detailed introduction to the current industry standard. We will have an emphasis on learning from publicly-available documentation, so that students are equipped to learn new techniques and frameworks in this rapidly-evolving field. 

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. We will work as closely as possible to how software is developed in industry, and all work is asynchronous, open-note and open-internet, with collaboration encouraged.

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 PHP
• Database-driven application development
• Content Management Systems
• REST API development in Python and Flask
• Single-page application development in React
• Debugging tools and techniques

Exercises

Students will be expected to complete:
8 take-home quizzes about the material covered in class (40 points)
6 programming exercises due before class on weeks 2, 3, 4, 5, and 6, 7 (30 pts)
1 final project due by the end of finals week (30 pts)

Textbooks

MDN Web Docs: https://developer.mozilla.org/en-US/
PHP Documentation: https://www.php.net/docs.php
SQLite Documentation: https://www.sqlite.org/docs.html
Flask Documentation: https://flask.palletsprojects.com/en/2.0.x/
React Documentation: https://reactjs.org/docs/getting-started.html

Office Hours

TBD

Contact Info
trevoraustin@cs.uchicago.edu

Grading Policy
Grades are not curved in this class, and instead are based on the sum of all points students have earned on their quizzes, excercises, and final projects:

• 93.0 and above: A
• 90.0 and above: A-
• 87.0 and above: B+
• 83.0 and above B
• 80.0 and above B-
• 77.0 and above C+
• 73.0 and above: C
• 70.0 and above C-
• Below 70.0: Dealt with on a case-by-case basis

Late Policy

Exercises and quizzes are due at the start of the 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, the Box Model, the Inspect panel. Exercise #1: Static Pages: A Resume
• Week 2: HTML5 Accessibility, Screen Readers, Visual Alerting, Captioning, CSS3: Media Queries, Mobile-First Design, Icons, Web Fonts, Modern Layouts with Border-Box, Flexbox, and Grid. CSS 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: Timers, Asynchronous Functions, Promises, Intro to Python and Flask Exercise #5: Watch Party
• Week 6: Secure Logins, Single-Page Applications 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: Keypress handling, Continuous Integration, Cloud Hosting

Core Programming

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

This course requires competency in Unix and Linux. Please plan to attend the MPCS Unix Bootcamp (https://masters.cs.uchicago.edu/page/mpcs-unix-bootcamp) or take the online MPCS Unix Bootcamp Course on Canvas.

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

MS in Computational Analysis in Public Policy (Year 2) MA in Computational Social Science (Year 2) Bx/MS in Computer Science (Option 1: Research-Oriented) Bx/MS in Computer Science (Option 2: Professionally-oriented - CS Majors) Bx/MS in Computer Science (Option 3: Profesionally-oriented - Non-CS Majors) Masters Program in Computer Science