Skip to content

OIM3690 Web Development with AI

Schedule Guides Topics Lightning

Esc

↑↓ navigate ↵ open esc close

Course Info

Syllabus
AI Policy
FAQ
Guides
Downloads

Community

Class Board
Lightning Talks

Schedule

Table View
Calendar

Week 1(8/31 - 9/06)

9/01 Tu Course intro, GitHub, and your first deployed site
9/03 Th How the web works, DevTools, and your course repo

Week 2(9/07 - 9/13)

9/08 Tu HTML essentials; Markdown and prompts
9/10 Th Reading AI-generated code; working with an agent

Week 3(9/14 - 9/20)

9/15 Tu Semantic HTML; CSS essentials
9/17 Th CSS: selectors, the cascade, and layout

Week 4(9/21 - 9/27)

9/22 Tu Running a project: from an interview to a PRD
9/24 Th Reading and debugging AI code

Week 5(9/28 - 10/04)

9/29 Tu MP1 showcase
10/01 Th Forms; a to-do app

Week 6(10/05 - 10/11)

10/06 Tu JavaScript: the DOM, events, and essentials
10/08 Th JavaScript essentials

Week 7(10/12 - 10/18)

10/13 Tu Fall Break (No Class)
10/15 Th Arrays and loops; debugging JavaScript

Week 8(10/19 - 10/25)

10/20 Tu Arrays and loops; debugging your MP2 code
10/22 Th MP2 showcase

Week 9(10/26 - 11/01)

10/27 Tu MP2 showcase and fetch; MP3 starts
10/29 Th API keys and calling an LLM API

Week 10(11/02 - 11/08)

11/03 Tu Browser APIs and extensions
11/05 Th MP3 showcase

Week 11(11/09 - 11/15)

11/10 Tu Adding a backend with Supabase
11/12 Th MP4 showcase

Week 12(11/16 - 11/22)

11/17 Tu Final project launch and proposal workshop
11/19 Th Final project: developing the proposals

Week 13(11/23 - 11/29)

11/24 Tu Thanksgiving Break (No Class)
11/26 Th Thanksgiving Break (No Class)

Week 14(11/30 - 12/06)

12/01 Tu Final project work and individual check-ins
12/03 Th Final demos, part 1

Week 15(12/07 - 12/13)

12/08 Tu Final demos, part 2; how an AI agent works; wrap-up

Topics

Foundations

Tools

Deployment: GitHub Pages
Version Control and GitHub
How the Web Works
Running a Real Project

HTML & CSS

HTML Essentials
CSS Essentials
CSS Layout (Flexbox + Grid)
Responsive Design
HTML Forms
Advanced CSS

JavaScript

JS Essentials
JS Intro: DOM + Events
JS Arrays + Loops
JS Async + Fetch
Browser Extensions
JS Browser APIs
Code Organization
Frontend, a Backend Perspective
JS Image Processing

AI Track

Markdown + Prompt Basics
Reading AI-Generated Code
AI-Assisted Debugging + DevTools
API Keys, .gitignore, Security
Calling an LLM API
Tech Stack & Deploy Workflow
AI Code Review + Refactoring
How an AI Agent Works
AI Tool Comparison

Gallery

Personal Sites
Mini Project 1
Mini Project 2
Summer 2026
Personal Sites
Mini Project 1
Mini Project 2
Mini Project 3
Final Project
Spring 2026
Personal Sites

Home / Gallery / Mini Project 2: Interactive Web Tool

Mini Project 2: Interactive Web Tool

Each student built an interactive tool with JavaScript.

Sign in with GitHub to view student sites

Alisamini-project-2

Ashinternship-application-tracker

Azrastudy-session-tracker

Charlesgrade-goal-tracker

Evandaily-productivity-tracker

Ishandegree-planner

Olympiarestaurant-adviser

RaniaMini-Project-2

Royceai-data-leak-firewall

Samgrade-calculator

Vegalesson-prep-planner

Zaydtrade-check

OIM3690 · Fall 2026 · Zhi Li · Babson College

Cold Call Shuffle Groups Students Podium

Course Assistant

Sign in with your GitHub account to chat with the course assistant.

This chat saves your questions without your name, and I read them to improve it.