MPCS 52553 Web Development (Autumn 2024)

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 as this rapidly-changing field continues to evolve. 

Specifically, the course will cover content layout and styling with HTML and CSS, dynamically generating page content on the webserver (in our case, Python and Flask), interacting with databases, interacting with remote resources using HTTP and REST, client-side interactivity with modern Javascript and Typescript, 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 on how software is developed in the industry, and all work is asynchronous, open-note, and open-internet, open-LLM, with collaboration encouraged. Course material from prior quarters is available on https://github.com/UChicagoWebDev

Course Contents

• Fundamentals of HTML5, CSS3, and JavaScript/ES6 for front-end programming
• Visual Design and Responsive Web Design
• Client/Server Communication
• Building Web Applications
• Single-page application development
• Server-side page rendering
• Database-driven application development
• Content Management Systems
• REST API development 
• Network Attacks & Web App Security
• Debugging tools and techniques

Tentative Weekly Course Schedule

Week 1 (Exercise #1): 

• Web foundations
• URL and Links
• HyperText Markup Language (HTML)
• Cascading Style Sheets (CSS)

Week 2 (Exercise #2): 

• Advanced layouts: flex and grid
• Media queries and responsive design
• Accessibility
• CSS resets and frameworks

Week 3 (Exercise #3): 

• HTTP protocol details
• Server-side rendering
• Databases
• The LAMP stack
• Flask

Week 4 (Exercise #4): 

• Javascript
• Document Object Model (DOM)
• DOM - Events
• Using REST APIs

Week 5 (Exercise #5): 

• Asynchronous Functions, Promises
• The Router design pattern

Week 6 (Exercise #6): 

• Secure login
• Cookies
• Web storage APIs
• Single-page epplications

Week 7 (Exercise #7):

• Intro to React
• One-way data flow

Week 8 (Exercise #8): 

• Typescript
• State management libraries (e.g. Redux)
• Database migrations

Week 9 (Exercise #9): 

• Continuous Integration
• Cloud hosting

Exercises: Students will be expected to complete:

• 6 programming exercises due the day before class
• 1 final project due by the end of finals week

References 

• 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
• Angular Documentation https://angular.io/start
• NodeJs Documentation https://nodejs.org/en/docs/guides/getting-started-guide/
• ExpressJs Documentation https://expressjs.com/en/starter/installing.html
• TypeScript Documentation https://www.typescriptlang.org/docs/
• MongoDB https://docs.mongodb.com/
• W3schools Documentation https://www.w3schools.com/

 

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. 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/.

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) 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