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
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
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
CSS Layouts
- CSS units and media queries
- Flexbox and CSS Grid
- Responsive design techniques
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 low-fidelity prototyping.
- Figma Wireframe Tutorial for Beginners. Aliena Cai
- Low-Fidelity Prototypes. Interaction Design Foundation
UX/UI Design: High-Fidelity Prototypes
- Visual design principles: color, typography, spacing
- Creating high-fidelity prototypes in Figma
- Design systems and consistency
- Peer review and feedback
Exam 1 Review
- Exam 1 review: HTML/CSS/Web Architecture/Design
- Slides
Topic 6: Exam 1: HTML/CSS/Web Architecture/Design
Comprehensive exam covering web/internet architecture, HTML, CSS, design principles, and accessibility.
Exam 1
- Web and Internet infrastructure
- HTML structure and semantic markup
- CSS styling, layout, and responsive design
- Design principles and accessibility
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
- Introduction to the DOM
- Accessing and modifying DOM elements
- DOM manipulation basics
- Event handling in JavaScript
- DOM traversal and manipulation
- Creating and modifying DOM elements dynamically
- Slides
- DOM manipulation practice (part 1)
- DOM manipulation practice (part 2)
- 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 Link
- Understanding the DOM Tree and Nodes. Digital Ocean
- How to Traverse the DOM. Digital Ocean
- How to Make Changes to the DOM. Digital Ocean
- Tutorial 4: Instagram High-Fidelity Prototype in Figma
- Tutorial 4: Instagram Wireframes in Figma
Tutorial 5: JavaScript: Event Handlers
Topic 8: JavaScript: Programming Review & OOP
Review of JavaScript programming fundamentals and introduction to object-oriented programming concepts in JavaScript.
JavaScript Programming Review
- Review of JavaScript concepts covered so far
- Variables, functions, and control structures
- Practice problems and exercises
- Slides
- JavaScript Review So Far
JavaScript Classes (OOP)
- Introduction to object-oriented programming in JavaScript
- Classes and instances
- Constructors and methods
- Slides
Tutorial 6: Programming Review with JavaScript
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
- Slides
Higher-Order Functions II: create your own + closures
- Advanced higher-order function patterns
- Understanding closures
- Data manipulation 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
Async/await + Fetch API Practice
- Async/await vs Promises
- Making GET, POST, PUT, DELETE requests
- Error handling and response parsing
- Slides
- Fetch Examples
- Hughes, Noah (2023). Async Await vs Fetch.Then().
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
- Slides
- Hands-on React Activity
- Tic Tac Toe. You are strongly encouraged to do this on your own.
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
Topic 13: Exam 2: JavaScript & React
Comprehensive exam covering JavaScript (DOM, OOP, 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: OOP classes, higher-order functions, closures
- Review of JavaScript: Async/await and Fetch API
- Review of React: Components, props, state, effects
Exam 2
- JavaScript: DOM manipulation, event handlers
- JavaScript: OOP classes, higher-order functions, closures
- JavaScript: Async/await and Fetch API
- React: Components, props, state, effects
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.
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
- Tutorial 10: Design your own API
- HW 4: React Client
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