MPCS 52553 Web Development (Spring 2024)

Section 2
Instructor(s) Cohen, Jeffrey (jeffcohen)
Location JCL 011
Meeting Times Wednesday 2:30pm - 5:20pm
Fulfills Elective Specialization - Application Development (APP-1)

Syllabus

Course Description

IMPORTANT: This section is somewhat different than other sections of MPCS 52553 in 2024, with less emphasis on back-end development.  We will focus on areas of web architecture that are also applicable to other kinds of tech stacks.

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, asynchronous programming models, constraints of single-threaded event-driven programming, interacting with remote resources using HTTP and REST, client-side interactivity with modern Javascript, and the creation of single-page applications with Javascript frameworks like React.

This course uses agile software techniques to build real, working software each week. We will work as closely as possible on how software is developed in the industry, and all work is asynchronous, open-note, and open-internet, with collaboration, encouraged.

NOTE: This section is in-person and attendance is paramount.  Lectures are generally NOT available via Zoom or recording.  Students who must miss a class due to illness are encouraged to catch up on material from classmates.

Textbooks

There are no required textbooks, but I do recommend https://store.wizardzines.com/products/http-learn-your-browsers-language for $12.  All other reference material is freely available online.

Course Outline

  • Fundamentals of HTML5, CSS3, and JavaScript/ES6 for front-end programming
  • Visual Design and Responsive Web Design
  • Building Web Applications
  • Event-Driven Paradigms
  • Asynchronous Programming
  • Single-page application development with React
  • Server-side page rendering with Python
  • Debugging tools and techniques

Tentative Weekly Course Schedule

Week 1: 

  • Web foundations
  • HyperText Markup Language (HTML)

Week 2: 

  • URL and Links
  • Cascading Style Sheets (CSS)
  • Responsive Web Design

Week 3: 

  • JavaScript Basics
  • JavaScript Programming

Week 4: 

  • Document Object Model (DOM)
  • DOM - Events
  • Forms
  • HTTP mechanics and API calls

Week 5: 

  • Holding state in JS applications
  • HTTP is stateless!
  • Cookies

Week 6: 

  • ES7 classes
  • ReactJS part 1

Week 7: 

  • ReachJS, part 2
  • Holding state in React applications
  • Concepts of state vs representation
  • JSX language details

Week 8: 

  • Storage Tier
  • Cookies and Session
  • Input and Validation

Week 9: 

  • Full-Stack live demo with Ruby on Rails
  • The Future of Web Development
  • WebAssembly

Exercises: Students will be expected to complete:

  • 5 programming exercises due the day before class
  • 4 in-class quizzes

References 

 

Course Prerequisites

Core Programming

Other Prerequisites

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

This course requires competency in Unix, Linux, and GitHub. If you attended the MPCS Unix Bootcamp you covered the required material. If you did not, please review the UChicago CS Student Resource Guide here: https://uchicago-cs.github.io/student-resource-guide/.

Overlapping Classes

This class is scheduled at a time that conflicts with these other classes:

  • MPCS 51215-1 -- Topics in Software: Making an Impact

Eligible Programs

MS in Computational Analysis in Public Policy (Year 2) MS in Molecular Engineering MA in Computational Social Science (Year 2) 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