Web Design AI Header

Lesson 3: Making Changes with Claude Code

Learn to effectively use Claude Code AI assistance to modify Flask applications while managing Python virtual environments and running applications.

Lesson Objectives

  • Setup and manage a Python virtual environment
  • Run a flask app within multiple terminals
  • Apply modifications to a Flask project using Claude AI
  • Customize the site's design
  • Add a static page
  • Verify changes in the running app

Watch: Making Changes with Claude Code Tutorial

Making Changes with Claude Code - Notes

Project Setup

Start by cloning the repository and setting up the virtual environment.

Windows:

python -m venv venv
venv\Scripts\activate

Mac:

python3 -m venv venv
source venv/bin/activate

Confirmation: the terminal prompt shows (venv) at the beginning.

Installing Dependencies

Install all required packages:

pip install -r requirements.txt

This may take several minutes to complete.

Running Claude and the App

Start Claude in the first terminal, then open a second terminal to run the Flask app:

python app.py

The app displays a simple starter page showing "Georgia College" as the title.

Making Changes with Claude

Key modifications demonstrated:
  • Add instructor name to site title - Claude updates base.html
  • Change branding from GCSU to UGA - Updates homepage content
  • Apply school colors - Changes CSS to Georgia red and black
  • Add new static page - Creates animals.html with UGA mascot info