MPCS 52553 Web Development (Spring 2023)

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 webserver, 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 on how software is developed in the 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 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
• HyperText Markup Language (HTML)

Week 2 (Exercise #2): 

• URL and Links
• Cascading Style Sheets (CSS)

Week 3 (Exercise #3): 

• JavaScript Basics
• JavaScript Programming

Week 4 (Exercise #4): 

• Document Object Model (DOM)
• DOM - Events
• Asynchronous Functions, Promises

Week 5 (Exercise #5): 

• Intro to Front End Programming
• Introduction to ReactJS
• Introduction to Angular
• Single Page Applications

Week 6 (Exercise #6): 

• Responsive Web Design
• Building Web Applications
• Client/Server Communication

Week 7 (Exercise #7): 

• Web Servers / Intro to the LAMP Stack
• Node.js/ExpressJS
• Apache/PHP

Week 8 (Exercise #8): 

• Storage Tier
• Cookies and Session
• Input and Validation

Week 9 (Exercise #9): 

• Web services
• REST API development 
• SOAP API
• XML

Week 10: 

• Web App Security
• Network Attacks
• Large scale applications
• Cloud Hosting
• Data Centers

Exercises: Students will be expected to complete:

• 7-9 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, 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/.

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

• MPCS 51400-1 -- Functional Programming
• MPCS 51260-1 -- Human-Computer Interaction

Masters Program in Computer Science 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)