OIM3690 - AI-Powered Web Development

2026 Spring

Session 02 (1/22)

contain

Today's Agenda

  • Warm-up / Announcements
  • Software Check
  • GitHub Setup (includes Markdown basics)
  • Terminal Basics
  • Generate & Deploy Your First Website

Warm-up (5 min)

  • Have you tried any AI tools since last class? What did you use them for?
  • What's the most impressive (or disappointing) thing you've seen AI create?
  • Any questions about the syllabus or course policies?

Share with a neighbor!

Announcements

  • Email etiquette: include course number in subject
    • Example: "OIM3690: Question about GitHub setup"
  • Required: Meet with me in person at least once during the semester.
  • Check Canvas for announcements and updates

Software Check

Let's make sure everyone has:

  1. VS Code installed and working
  2. GitHub account created (with Babson email)
  3. GitHub Desktop installed and signed in
  4. GitHub Student Developer Pack applied (may take a few days)

Raise your hand if you need help with any of these!

Introduction to GitHub

  • Create GitHub account (if you haven't)
  • Create new repositories:
    • oim3690 (no spaces)
    • username.github.io (replace username with your GitHub username)
  • Work on the repository
  • Commit and Push
  • Please submit the URL of your GitHub repository oim3690 on Canvas.

Terminal Basics

You can also use the terminal (command line) for file navigation:

Command What it does
cd folder Change directory (go into a folder)
cd .. Go up one level
ls (Mac) / dir (Win) List files in current folder
mkdir folder Make a new folder
pwd Print working directory (where am I?)

Build & Deploy Your First Website

What do you want your personal website to be?

  • Paper & pen only (or just in Notepad)
  • Write 2–3 sentences describing:
    • Who you are
    • What this website is for
    • What you want it to include (sections, vibe, purpose, etc.)

From Idea → Code (with AI)

  • Now that you have your idea, we’ll use AI as a coding assistant, not a decision maker.
  • What AI will do:
    • Turn your text into HTML
    • Generate one file only for now: index.html
  • What AI will NOT do:
    • Decide who you are
    • Decide what your website should say
  • What should be your prompt?

Let’s Build it!

We will generate a simple personal website:

  • Open an AI tool (ChatGPT / Gemini / Replit / Claude / etc.)
  • Paste what you wrote on paper
  • Ask AI to generate only index.html
  • Open username.github.io folder in VS Code
  • Create index.html and paste the code
  • Preview it locally
    • Open index.html file directly in browser
    • Open with Live Server extension in VS Code

Example Prompt

Using the description below, generate a simple HTML file called index.html only.

Description:
I am [Your Name], a Babson College student.
[Paste your 2–3 sentences here.]

Requirements:
- One single HTML file (index.html)
- No external frameworks
- Clean and simple layout
- Include:
  - Header with my name
  - Short introduction
  - A section for skills or interests, ...

Commit and Push

Using GitHub Desktop:

  • You'll see your changes listed
  • Write a commit message: "Add initial website"
  • Click "Commit to main"
  • Click "Push origin"

🎉 Your website is now live at https://username.github.io!

Iterate with AI (Now the Fun Part)

  • Now you can go back to AI and iterate:
  • Examples:
    • “Change the background color to light blue”
    • “Make the layout more centered”
    • “Use a larger font for the header”
    • “Add a short About Me section”
  • Do you like this workflow?

Before You Leave (5 min)

  • Any questions so far?
  • Start your Learning Log for today
  • Work on in-class exercises (okay to continue later)
  • Note down questions for next time
  • Push your work to GitHub