Skip to content

OIM3690 AI-Powered Web Development

Esc

↑↓ navigate ↵ open esc close

Course Info

Syllabus
AI Policy
FAQ
Guides
Downloads

Community

Class Board
Lightning Talks

Schedule

Table View
Calendar

Week 1 (5/18 - 5/24)

5/18 M Course intro · GitHub setup · Build your first website
5/20 W How the web works · HTML essentials · MP1 launch

Week 2 (5/25 - 5/31)

5/25 M Memorial Day (No Class)
5/27 W HTML essentials · Reading AI's code (Part 1)

Week 3 (6/1 - 6/7)

6/1 M CSS essentials: selectors · cascade · properties
6/3 W Box model · CSS review · MP1 mid-demo round

Week 4 (6/8 - 6/14)

6/8 M AI Agents Update · CSS Layout: Flexbox + Grid · MP1
6/10 W Responsive · Forms · HTML/CSS Recap

Week 5 (6/15 - 6/21)

6/15 M MP1 Final Showcase · Spotting the generic AI look
6/17 W DOM + events · MP1 Class Favorite vote · MP2 launch

Week 6 (6/22 - 6/28)

6/22 M JS essentials · build and read a to-do app
6/24 W JavaScript essentials: data types, functions, and conditionals

Week 7 (6/29 - 7/5)

6/29 M Arrays + loops · MP2 Showcase (Part 1) · MP3 launch
7/1 W fetch + live data · MP2 Showcase (Part 2) · API keys + security (if time)

Week 8 (7/6 - 7/12)

7/6 M API key safety · Calling an LLM API · MP2 Class Favorite
7/8 W Calling an LLM API (part 2) · code organization · MP3 work time

Week 9 (7/13 - 7/19)

7/13 M FP kickoff · Browser APIs · Real-World Tech Stack
7/15 W MP3 + FP-idea showcase · Class Favorite vote · Proposal peer review

Week 10 (7/20 - 7/26)

7/20 M Final project work · learning-journey kickoff · browser extensions with Claude Code
7/22 W DEMO DAY · Final project voting · Course wrap-up (last class)

Topics

Foundations

Tools

Deployment: GitHub Pages
Version Control and GitHub
How the Web Works
Where Do You Start? (Build Process)

HTML & CSS

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

JavaScript

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

AI Track

Markdown + Prompt Basics
Reading AI-Generated Code
AI Tool Comparison
API Keys, .gitignore, Security
Calling an LLM API
Tech Stack & Deploy Workflow
Intro to Claude Code / Agentic Workflows
AI Code Review + Refactoring
AI-Assisted Debugging + DevTools

Gallery

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

Home / Gallery / Mini Project 2: Interactive Web Tool

Mini Project 2: Interactive Web Tool

Each student built an interactive tool with JavaScript. Project instructions →

Sign in with GitHub to view student sites

Adityavardhan's site

Adityavardhanrun_tracker

Advikalift-tracker

Allymeal-planner

Aravstudioforma-tracker

Arthurtip-splitter

Jordanworkout-tracker

Marimeal-decision-helper

Mirbosit's site

Mirbosithabit-tracker

Natalieworkout-tracker

Shivmaximise-card-optimizer

Tylerpopup-bagels

Ylanfitness-journey-tracker

YoungCPA-progress-tracker

Mateotempo-trainer

Sultansubscription-audit

OIM3690 · Summer 2026 · Zhi Li · Babson College

Cold Call Groups

Course Assistant

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