Privacy notice: When you use Claude — by text, voice, or Claude Code — your inputs are sent to Anthropic's servers. Do not share passwords, credentials, or sensitive information in any Claude session. See the Anthropic Privacy Policy.

GSCG Claude Code Guide
Step 2 of 2 · Day-to-Day Workflow

Using VS Code, Claude Code, and GitHub Together

Three tools. One workflow. Once you understand how each one fits, building and sharing projects becomes fast and repeatable. This page shows you how it all works with real examples tailored to business students.

The Big Picture

Think of it as three roles working together — an editor, an assistant, and a storage system.

VS Code is where you work. Claude Code is your AI assistant inside VS Code — it reads your files, writes code, and runs commands when you ask. GitHub is where your finished work is saved online, so it has a permanent URL you can share with anyone.
Your Day-to-Day Setup
💻
VS Code
Your editor — open your project folder here
↔
🤖
Claude Code
AI panel inside VS Code — ask it to build things
→
🐙
GitHub
Online storage — your project gets a shareable URL
Your three tools and how they connect. VS Code is your workspace, Claude Code is your AI partner inside it, and GitHub stores and publishes your work.

Understanding GitHub Repositories

GitHub is where your projects live. Before you can use it, you need to understand what a repository is and why it matters.

🐙

GitHub

Online storage and version history for your projects

A repository (or "repo") is a folder that lives on GitHub. Every project you build gets its own repository. Think of it like a shared Google Drive folder — except every version of every file is saved automatically, and the folder can be published as a live website.

When you push your code to GitHub, it uploads your local project files to the repository online. When you pull, you download the latest version back to your computer. These two commands are how your local work and GitHub stay in sync.

Repository

A project folder stored on GitHub. Has a URL like github.com/yourusername/project-name. Contains all your files and their full history.

Commit

A saved snapshot of your files at a specific moment. Every time you commit, GitHub records exactly what changed. You can always go back.

Push

Sending your local commits up to GitHub. After a push, your changes are live online and visible in the repository.

GitHub Pages

A free feature that turns a repo into a live website. Your project gets a public URL like yourusername.github.io/project-name.

github.com / your-username / your-project
🐙 Screenshot: A GitHub repository page Shows the file list, commit history, and the green "Code" button.
This is what your project looks like on GitHub after your first push.
A GitHub repository. The file list shows every file in your project. The commit history on the right shows every change ever saved. The green button lets others download your code.

Working in VS Code

VS Code is your workspace. This is where you open project folders, view and edit files, run terminal commands, and interact with Claude Code.

💻

VS Code

Your editor — where all your work happens

When you open VS Code, the first thing to do is open your project folder. Go to File → Open Folder and select the folder where your project lives. VS Code treats that folder as your workspace — every file inside it appears in the Explorer panel on the left.

The Terminal panel at the bottom is where you type commands — like pushing to GitHub. You can open it from the View menu or by pressing Control + ` (backtick). Claude Code can also run terminal commands for you when you ask it to.

VS Code — my-project
Explorer
📁 my-project
📄 index.html
📄 styles.css
📄 data.csv
<!DOCTYPE html>
<html>
  <head>
    <title>My Project</title>
  </head>
Terminal — ask Claude Code to push to GitHub
VS Code layout. The Explorer panel (left) shows your project files. The editor (center) is where files open. The terminal at the bottom runs commands. Claude Code appears as an additional panel on the right.
Explorer Panel

The left sidebar showing all files in your project folder. Click any file to open it in the editor. Drag files to reorganize.

Editor

The main area where files open. You can have multiple files open in tabs. Claude Code edits files here when you ask it to.

Terminal

A command-line panel built into VS Code. Use it to push to GitHub, run scripts, or install tools. Open with View → Terminal.

Source Control

The git icon in the left sidebar. Shows what files changed since your last commit. Use it to stage and commit changes.

Talking to Claude Code

Claude Code is a panel inside VS Code. You type what you want to build — in plain English — and it reads your files, writes code, and runs commands on your behalf.

🤖

Claude Code

Your AI assistant — lives inside VS Code, reads your project files

Once installed, Claude Code appears as a chat panel inside VS Code. The key difference from claude.ai is that Claude Code can see your actual project files — it knows what's in your folder and can read, edit, and create files directly without you having to paste anything.

You communicate by typing tasks in plain English. Be specific about what you want. "Add a bar chart to index.html that shows monthly sales from data.csv" works much better than "add a chart." The more context you give, the better the result.

VS Code — Claude Code Panel
index.html — editing
<canvas id="salesChart"></canvas>
<script>
  const ctx = document.getElementById('salesChart');
  new Chart(ctx, {
    type: 'bar',
    data: salesData
  });
</script>
Claude Code
Add a bar chart to index.html that shows monthly sales from data.csv
I've read data.csv and added a Chart.js bar chart to index.html. The chart displays January through June sales. I also added the Chart.js CDN link to your <head>. Open index.html in your browser to see it.
Ask Claude Code anything...
Claude Code panel (right) alongside the editor (left). You type a task in plain English, Claude reads your files, writes the code, and explains what it did. The changes appear in your editor immediately.
The key habit: Give Claude Code one clear task at a time. "Add a navigation bar to index.html with links to About and Contact" works well. "Build me a whole website" is too vague. Break big goals into smaller, specific asks.

A Typical Session

Here's what a normal working session looks like from start to finish — opening your project to pushing your finished changes to GitHub.

1
Open your project folder in VS Code

File → Open Folder → select your project. All your files appear in the Explorer panel. Claude Code can now see everything in that folder.

2
Describe what you want to build or change

Type your task into the Claude Code panel in plain English. Be specific: mention file names, what the output should look like, and any data you're working with.

3
Review what Claude Code did

Claude Code shows you what it changed. Open the file in your browser or editor to check. If something looks wrong, describe the issue and ask it to fix it.

4
Commit your changes

When you're happy with the result, save a snapshot. Ask Claude Code: "Commit my changes with the message [describe what you built]." It runs the git commands for you.

5
Push to GitHub

Ask Claude Code to "push my changes to GitHub." Your project updates online immediately. Share the GitHub URL or GitHub Pages link with anyone.

Terminal — pushing to GitHub
$ git add .
$ git commit -m "Add monthly sales chart"
[main a3f29c1] Add monthly sales chart
2 files changed, 48 insertions(+)
$ git push
Enumerating objects: 5, done.
To https://github.com/yourusername/my-project.git
main → main ✓
The terminal after committing and pushing. Each line confirms a step: files staged, snapshot saved with a description, changes uploaded to GitHub. Claude Code runs these commands for you when you ask.

Example Prompts for Business Students

Copy and adapt these for your own projects. The more specific you are, the better Claude Code's output.

Build a data dashboard

Point Claude Code at your spreadsheet and describe the visualization you need.

I have a file called sales_data.csv with columns: Month, Region, Revenue. Create an index.html with a bar chart showing Revenue by Month for each Region. Use Chart.js and make it look clean and professional.

Create a portfolio page

Describe your background and Claude Code builds the page.

Build a simple personal portfolio page called index.html. I'm a junior business student. Include sections for: About Me, Projects (with placeholder cards), and Contact. Use a clean, professional design with navy and white colors.

Save and share your work

Once you're happy with what you built, push it to GitHub.

Commit all my current changes with the message "Add sales dashboard" and push to GitHub. Then tell me the URL of my repository so I can share it.

Fix something that's broken

If something doesn't look right, describe it and Claude Code investigates.

The chart on my index.html isn't showing up when I open it in the browser. The page loads but the chart area is blank. Can you look at the file and figure out what's wrong?