Course Schedule
This schedule will definitely change over the course of the semester. Please continue to check back for updates.
Topic 1: Intro to the Web
The web and the internet are interconnected systems that facilitate the exchange of data across computers worldwide. Web browsers communicate with servers using the HTTP/HTTPS protocol to fetch and display content, while the internet provides the infrastructure for this communication. Understanding IP addresses, DNS, and how websites are hosted provides a foundation for developing web applications.
Intro to the Course
- Course introduction and overview
- Understanding the web development landscape
Web & Internet Infrastructure
- Understanding the Internet and how it works
- Web infrastructure and protocols
- How browsers and servers communicate
- Intro to the Internet: Watch How We Made the Internet. 2022. Nation Squid
- The Internet Explained. Timothy B. Lee, 2015.
- 40 Maps That Explain the Internet. Timothy B. Lee, 2014
- Intro to the Web: Watch The Internet: HTTP & HTML. Code.org
- HW 1: The Internet and the News
The Internet & Society
- Discussion of Internet and society issues
- Net neutrality, privacy, and current events
- Watch: Black Mirror. Joan is Awful (2023), Season 6, Episode 1. Netflix.
- If you don't have Netflix, you can purchase the episode for $1.99 on Amazon.
- Content warning: some profanity, nudity, and irreverent scenes. That said, the broader point of the piece surfaces many important socio-technical themes that are worth thinking about.
- NPR's All Things Considered (January 6, 2025): What may be next after a federal court struck down the FCC's net neutrality rules
- NPR's All Things Considered (January 7, 2025): Meta says it will end fact checking as Silicon Valley prepares for Trump
- NPR Podcast (26 minutes): The history and future of the cookie
- NYT's Ezra Klein Show (1.5 hrs): "Will A.I. Break the Internet? Or Save It?". Ezra Klein and Nilay Patel.
- Erik Hoel Opinion Piece (Feb, 2024): Here lies the internet, murdered by generative AI
- Wall Street Journal (7 mins): Third-party cookies, explained
- HW1: The Internet and the News
Topic 2: HTML
HTML (HyperText Markup Language) is the backbone of web content, structuring information on web pages. HTML can be used to create semantic, accessible layouts using elements like headings, paragraphs, lists, links, and media. This topic emphasizes the role of HTML in the broader web development process and how it integrates with CSS and JavaScript.
MLK Day - No class
Introduction to HTML
- HTML basics and structure
- Text markup, images, and media tags
- Form elements and compound tags
- Tali Garsiel and Paul Irish. How Browsers Work: Behind the scenes of modern web browsers. html5rocks.com, 2011
Introduction to HTML (Continued)
- Hyperlinks and linking
- Semantic HTML tags
- Git and GitHub setup
- Tali Garsiel and Paul Irish. How Browsers Work: Behind the scenes of modern web browsers. html5rocks.com, 2011
Topic 3: CSS
CSS (Cascading Style Sheets) is used to control the layout and visual presentation of HTML elements. It allows developers to define styles such as colors, fonts, and spacing, enhancing user experience. CSS also includes techniques like Flexbox and Grid for responsive, modern web designs.
Introduction to CSS
- HW 1: The Internet and the News
CSS Layouts
- CSS units and media queries
- Flexbox and CSS Grid
- Responsive design techniques
- HW 2: Make the Photo App Interface: Part I
Topic 4: Design and Accessibility
Design refers to the process of creating an aesthetically pleasing and functional user interface (UI) and user experience (UX). It encompasses layout, typography, color schemes, and interactivity to ensure the site is intuitive, visually appealing, and accessible. Good design is crucial for engaging users and meeting their needs effectively. While design is a huge topic in its own right, we will briefly review some important design principles, and take a quick look at some design tools and systems.
Design with Accessibility in Mind
- Design principles and visual design
- Accessibility best practices
- Color selection and style guides
- Williams, Robin (2015). The Non-Designer's Design Book, Chapter 1.
- Groves, Karl (Sept., 2013). The 6 Simplest Web Accessibility Tests Anyone Can Do.
- Williams, Robin (2015). The Non-Designer's Design Book, Chapter 2.
- Please skim the Accessibility Resources.
Topic 5: Mockups & Wireframes
Students will create mockups and wireframes for their PhotoApp project.
UX/UI Design: Wireframing
Part 1 of a two-part tutorial on prototyping: Creating low-fidelity wireframes.
- Figma Wireframe Tutorial for Beginners. Aliena Cai
- Low-Fidelity Prototypes. Interaction Design Foundation
UX/UI Design: High-Fidelity Prototypes
Part 2 of a two-part tutorial on prototyping: Creating high-fidelity prototypes in Figma.
Exam 1 Review
Exam 1 will be completed during class on Monday, 2/16. It is due at the end of class.
- 1/3 of the exam will paper-based:
- For this portion, you will not be able to use a computer, but you may bring a 1-page cheatsheet.
- 2/3 ot the exam will be coding exercises. For this portion of the quiz:
- You MAY use the course website, as well as any notes, lecture files, or internet reference materials to complete the quiz.
- You MAY NOT (a) use any Generative AI tools or (b) communicate with another human being during the quiz.
- HW 2: Make the Photo App Interface: Part I
Topic 6: Exam 1: HTML/CSS/Web Architecture/Design
Comprehensive exam covering web/internet architecture, HTML, CSS, design principles, and accessibility.
Exam 1
A link to the exam will be posted here at the beginning of class. The first 1/3 of the exam will be written. The second 2/3 of the exam will be coding.
Topic 7: JavaScript: DOM Programming
In this unit, we will use JavaScript to manipulate the Document Object Model (DOM) and respond to user-initiated events. By the end of this section, you will know enough to start building simple, interactive web applications.
Working with the DOM
- Intro to the DOM. Digital Ocean
- How To Access Elements in the DOM. Digital Ocean
- How to Modify Attributes, Classes, and Styles in the DOM. Digital Ocean
- Understanding Events in JavaScript. Digital Ocean
- Sarah's interactive DOM manipulation worksheet
- Understanding the DOM Tree and Nodes. Digital Ocean
- How to Traverse the DOM. Digital Ocean
- How to Make Changes to the DOM. Digital Ocean
Topic 8: JavaScript: Intro to the Language & Programming Review
Review of JavaScript programming fundamentals and introduction to object-oriented programming concepts in JavaScript.
Intro to JavaScript + Programming Review
- Review of JavaScript concepts covered so far
- Mapping Java concepts to JavaScript concepts
- Practice problems and exercises
JavaScript Fundamentals: Functions & Control Structures Practice
- Hands-on practice with functions and control structures
- Function declarations vs arrow functions
- DOM manipulation practice
Topic 9: JavaScript: Higher-Order Functions & Closures
Functional programming concepts in JavaScript, including higher-order functions, closures, and working with data using map, filter, reduce, and forEach.
Higher-Order Functions I: map, filter, reduce, forEach
- Introduction to higher-order functions
- Working with arrays and data
- Practice with real data sets
- Array Methods Practice with DOM
- Slides
Higher-Order Functions II: create your own + closures
- Advanced higher-order function patterns
- Understanding closures
- Destructuring and spread operator
- Data manipulation practice
- Destructuring & Spread Operator Practice
- Destructuring & Spread Practice
- Slides
Tutorial 7: JavaScript: Practice with higher-order iteration functions
Topic 10: Spring Break
No class
Spring Break - No class
Spring Break - No class
Spring Break - No class
Topic 11: JavaScript: Async/Await & Fetch
The Fetch API is a modern JavaScript interface for making HTTP requests to servers and handling responses. Understanding how to use the Fetch API, handle response statuses, and work with data formats like JSON is key to building dynamic, data-driven web applications.
Intro to HTTP & Fetch API
- Introduction to HTTP protocol
- HTTP methods and status codes
- Using the Fetch API
- An introduction to HTTP: everything you need to know. Free Code Camp
- HW3: Building a "Vanilla" JavaScript Client
- Tutorial 7: JavaScript: Practice with higher-order iteration functions
Async/await + Fetch API Practice
- Async/await vs Promises
- Making GET, POST, PUT, DELETE requests
- Error handling and response parsing
- Fetch Examples
- Slides
- Hughes, Noah (2023). Async Await vs Fetch.Then().
- HW 3: Building a "Vanilla" JavaScript Client
Tutorial 8: Get Started on HW3: GET, POST, and DELETE
Topic 12: React
React is a popular JavaScript library for building user interfaces, especially single-page applications (SPAs). It allows developers to create reusable components and manage the state of an application efficiently through a virtual DOM. React's declarative approach simplifies UI development and is widely adopted in modern web development.
React I: Components, JSX, Props
- Introduction to React
- Components and JSX
- Props and component composition
- Building user interfaces with React
- Hands-on React Activity
- Slides
- Tic Tac Toe. You are strongly encouraged to do this on your own.
- HW 4: React Client
React II: State & Effects
- State management and component hierarchy
- useState and useEffect hooks
- Thinking in React
Tutorial 9: React: Custom & Third-Party Components
React III: Sharing State & Syncing with External Data
- Sharing state between components
- Effects and side effects
- Syncing with external data sources
- Slides
- Tutorial 9: React: Custom & Third-Party Components
Topic 13: Exam 2: JavaScript & React
Comprehensive exam covering JavaScript (DOM, higher-order functions, closures, async/await, Fetch API) and React (components, props, state, effects).
Exam 2 Review
- Review of JavaScript: DOM manipulation, event handlers
- Review of JavaScript: Higher-order functions, closures
- Review of JavaScript: Async/await and Fetch API
- Review of React: Components, props, state, effects
- Tutorial undefined: Final Project
Exam 2
- JavaScript: DOM manipulation, event handlers
- JavaScript: Higher-order functions, closures
- JavaScript: Async/await and Fetch API
- React: Components, props, state, effects
- HW 3: Building a "Vanilla" JavaScript Client
Topic 14: Servers & APIs
Understanding how to design and build RESTful APIs, including HTTP methods, endpoint design, authentication, and security. Students will learn to create their own API endpoints using a config-driven approach.
HTTP & REST Fundamentals
- Server-side templates vs REST API
- Understanding REST architecture
- HTTP methods and RESTful design
- Slides
- Server Side Templates vs REST API and Javascript Front-End. Janetakis, Nick (Oct., 2017).
- Avraham, Shif Ben (Sept. 5, 2017). What is REST — A Simple Explanation for Beginners.
- HW3: Building a "Vanilla" JavaScript Client
Defining Endpoints: Config-Driven API Design
- Introduction to config-driven API design
- Designing your own API endpoints
- Creating API configuration files
- Slides
Tutorial 10: Design your own API
Topic 15: React + APIs Integration
Integrating React applications with custom APIs, working with student-designed endpoints, and building full-stack applications.
Final Project: API Design Workshop
- Final project assigned
- API design workshop
- Designing your own API endpoints via config
- HW 4: React Client
- Tutorial 10: Design your own API
React with Custom APIs
- Using student-designed endpoints in React
- Connecting React components to custom APIs
- Handling API responses and errors
- Slides
Advanced React Patterns & Project Work
- Advanced React patterns
- Final project work time
- API integration troubleshooting
Final Project Work Day
- In-class time to work on final project
- API endpoint testing and debugging
- Frontend-backend integration
Topic 16: Final Project
Students will design their own API endpoints using a config-driven approach and build a React application that consumes those endpoints. This project integrates all concepts learned throughout the course.
Security & Authentication for APIs
- Web security fundamentals
- Authentication headers and security
- JWT tokens and session management
- Slides
Final Project Work Day
- In-class time to work on final project
- Final touches and testing
Final Project Due
- Final project presentations
- Course reflection and synthesis
Topic 17: Final Exam
The final exam will take place from 11:30am to 2:30pm on May 6th in 008 Whitesides (same class as our regular classroom).
Final Exam