OIM3690 - AI-Powered Web Development

2026 Spring

Session 01 (1/20)

contain

Agenda

About Me

  • Instructor: Zhi Li (李直)
  • Email: zli@babson.edu
  • Office Hours (Babson Hall 216D):
    • Wednesday: 11:00AM - 12:00PM
    • Thursday: 2:30PM - 3:30PM
    • Online via Webex: by appointment
  • Required: Meet with me in person at least once this semester.

What is this course about?

Well, let me first tell you that this course is NOT about...

  • Web3 / Blockchain / Crypto
  • Back-end / Fullstack / App Development (we'll touch on this briefly)
  • UI/UX Design Tools (Figma/Sketch)
  • Computer Science Theories
  • Data Structures and Algorithms
  • SEO / Web Analytics

Topics We'll Cover

  • How the Web Works
  • HTML5 & Semantic HTML
  • CSS Essentials & Layout
  • Flexbox & Grid
  • Responsive Design
  • Using GitHub & Deployment
  • Chrome DevTools
  • JavaScript Basics
  • DOM Manipulation
  • Event Handling
  • Working with APIs
  • Local Storage
  • AI Tools (Copilot, Claude, Cursor)
  • Building Real Products
  • ...

What ultimately matters in this course is not so much where you end up relative to your classmates, but where you end up relative to yourself when you begin.

Syllabus Overview

Component Weight What It Means
Checkpoints 40% Mini projects, exercises, learning logs
Understanding Assessment 20% Paper quizzes + in-person interviews
Final Project 25% Your main portfolio piece
Participation 15% In-class, office hours, collaboration

Read the full syllabus on Canvas/GitHub. Ask questions!

This Course May Be Different

  • No traditional homework → Mini projects + irregular checkpoints + interviews
  • Paper-based Quizzes: test understanding and judgment, not memorization
  • Markdown everywhere: docs, learning logs, notes all in markdown
  • Learning logs after every class: can be short, but personal
  • AI tools are encouraged: experiment freely
  • Office hours & async communication count: participation matters
  • Learn and Build in public: public GitHub repos from Day 1

Learn and Build in Public

  • Share your progress: GitHub commits, learning logs
  • Ask questions openly: in class, during office hours, via GitHub Issues
  • Help others: peer review, study groups
  • Build your portfolio: every project is a showcase
  • Embrace mistakes: they are part of learning

Your GitHub profile is your resume. Start building it now.

Software

  • Visual Studio Code and extensions:
    • Live Server
    • Prettier
    • GitHub Copilot (Pro with Student Developer Pack)
  • Google Chrome (primary browser)
  • GitHub Desktop

How to Learn Web Development in 2026?

Programming is hard... at least in the old days...

...and you must have heard of "vibe coding"

... even with vibe coding

The Big Shift in Learning to Code

Old Way

  • Memorize HTML tags
  • Remember CSS properties
  • Write everything from scratch
  • Small, stable stack

"I know all the syntax by heart"

New Way

  • Understand core concepts
  • Know how HTML/CSS/JS work together
  • Use docs and AI to generate code
  • Large ecosystem, ever-changing

"I know what to build, how to evaluate code, and where to look"

What Actually Matters Now

  • Understanding fundamentals and underlying concepts
  • Syntax will naturally stick after repeated use
  • Learning to evaluate and debug AI-generated code
  • Building taste for what's good code vs bad code
  • Knowing when and how to use AI as a tool
  • Vibe coding responsibly and effectively

No More "Couch Potatoing"!

Learn and Build

Understand Before You Paste

  • You CAN use AI-generated code
  • But you MUST understand what you submit

If I ask "what does this line do?", you should be able to explain it.

Ask Questions

Ask Questions The Smart Way

DO NOT PANIC!

  • Almost everyone hits a rough patch in the course at some point.
  • Don't let it discourage you.
  • It's normal!

What if you got "stuck"

  • Take a break
  • Break the problem down
  • Keep trying
  • Debug
  • Ask for help

Expect the Unexpected

  • Code will break. That's normal.
  • Errors are feedback, not failure.
  • The real learning happens when you debug and understand why.
  • AI can help, but you make the final call.

What Counts as "Cheating" in This Course?

💀 This IS cheating

  • Submitting code you cannot explain
  • Not documenting AI usage when required
  • Copying from classmates
  • Having someone else do your work

👌 This is NOT cheating

  • Using AI to help you learn and build
  • Looking things up, asking questions
  • Collaborating on ideas
  • Getting help in office hours

The bottom line: Can you explain what your code does and why?

Collaboration & AI Policy

  • AI tools are encouraged: Copilot, Claude, Cursor, Replit
  • Document AI usage when required (in learning logs, project docs)
  • Study groups are great: discuss ideas, help each other debug
  • Don't copy code from classmates without attribution
  • Final projects will be individual work but require peer review

Remember: AI helps you build faster, but understanding helps you build better.

Full policy details in the syllabus.

From Problem to Prototype

Before You Leave

  • Note down your web app idea
  • Write down questions you have about the course
  • Prepare for next session (install software, create GitHub account)

global styles