Tech Setup

From laptop to live portfolio.

Zero experience required. Start with an AI guide, then use this page as your reference.

Start Here — Before Anything Else

Open an AI chat session first.

Before you install anything, open a separate browser tab and start a chat with an AI assistant. That AI session will be your guide through the entire setup process: it will walk you through each tool, explain what you are doing and why, and help you troubleshoot anything that breaks. This page exists as a reference and context, not as a replacement for that conversation.

Recommended: Use claude.ai. The free version works for this — it can guide you through VS Code setup and everyday use, and even help you find free tools and extensions to pair with VS Code. Other capable AI assistants work too. This is enough to get through the whole competition independently.

Copy the prompt below and paste it as your very first message. The AI will take it from there. 

You are my setup guide for the Gonzaga Portfolio Competition. I am a Gonzaga student and I may have zero experience with GitHub, VS Code, or any developer tools. Please help me get everything working from scratch.

Here is what I need to accomplish:
1. Create a GitHub account (if I have not already)
2. Install Visual Studio Code
3. Install an AI coding assistant inside VS Code — either the Claude Code extension (requires a Claude Pro subscription) or the GitHub Copilot extension (free with my GitHub account)
4. Create a new public GitHub repository for my portfolio
5. Enable GitHub Pages so my repository is live at my-username.github.io
6. Build and publish a practice "Hello World" page in my personal colors to confirm everything is working end to end

Please start by asking me two things:
- Am I on a Mac or Windows laptop?
- Which of these steps have I already completed?

Then guide me through each step one at a time. Explain what each tool is in plain English before asking me to install it. If something goes wrong, ask me to copy and paste the exact error message before suggesting a fix. Do not skip ahead or give me more than one step at a time. I am in no rush — I want to understand what I am doing, not just follow instructions blindly.
⚡ How to use both at once

Keep your AI chat open in one tab and this page open in another. Use the AI to guide the actual work. Use this page to understand the bigger picture of what each step is for. They complement each other.

Before You Start

What You Will Need

  • A laptop, Mac or Windows, both work fine
  • An email address you check regularly
  • 2 to 4 hours of patience, which you can split across multiple sessions
  • A willingness to search for answers when something does not work
💡 Note

You do not need to know how to code. You will learn just enough to get your portfolio live, and more importantly, you will understand why each step exists.

The Setup

Six Steps to Live

Your AI guide will walk you through each of these. Use this section as a reference.

Create a GitHub Account

⏱ 10 to 15 minutes

What GitHub is: GitHub is a platform where developers store, share, and collaborate on code. Think of it as Google Drive for code, except the files are version controlled and publicly visible by default.

When you publish a portfolio through GitHub Pages in Step 5, anyone with your URL can see your work. That is what makes it a real artifact, not a class submission.

  1. Go to github.com
  2. Click Sign up and enter your email address
  3. Choose a username. This becomes part of your portfolio URL, so pick something professional. firstname-lastname or firstnamelastname works well.
  4. Verify your email address
🎯 Why this matters

Recruiters look at GitHub profiles. The earlier you start building one, the more history you have when it matters. Your GitHub profile from this summer is infrastructure for the rest of your career.

Install Visual Studio Code

⏱ 10 minutes

What it is: VS Code is a free code editor made by Microsoft and used by millions of developers. You will use it to write HTML and CSS for your portfolio, and to run your AI coding assistant.

  1. Go to code.visualstudio.com
  2. Download for your operating system, Mac or Windows
  3. Install it like any other application
  4. Open VS Code. Left sidebar is your file explorer. Center is your editor. Bottom bar has the terminal.
💡 Tip

Press Ctrl + ` on Windows or Cmd + ` on Mac to open a terminal directly inside VS Code. You will use this for git commands.

Install Your AI Coding Assistant

⏱ 15 to 30 minutes

You need an AI assistant inside VS Code. It reads your actual files, writes code alongside you, explains errors, and keeps context with what you are building. This is not optional, it is how you will do most of your work on this project.

Pick the option that fits your situation:

Recommended

Claude Code

The most capable option for a project like this. Reads your files, holds context across a conversation, and reasons about decisions rather than just completing code.

Requires a Claude Pro subscription at claude.ai (~$20/month). If cost is a concern, reach out to John Spencer directly. This should not be a barrier.

Claude Code Guide →

Free with GitHub

GitHub Copilot

A solid AI coding assistant built by GitHub and included free with your GitHub account (students qualify automatically). Less conversational than Claude Code, but genuinely useful for writing and editing code.

Install the GitHub Copilot extension inside VS Code, then sign in with your GitHub account. That is all it takes.

Copilot Extension →
⚡ How to use it going forward

Once your AI assistant is installed, do your work through it. For the remaining steps on this page, and for everything you build after, tell the AI what you want to do and let it guide you through the commands and code. You do not need to memorize git syntax. You need to be able to describe what you want clearly.

Create Your Portfolio Repository

⏱ 10 minutes

What a repository is: A repository is a folder on GitHub that contains all your project files and the full history of every change ever made. Think of it as a save file for your entire project that never loses anything.

Do this through your AI chat. Tell it: "Help me create a new public GitHub repository named my-username.github.io." It will walk you through every click and explain why the naming matters.

If you prefer to do it manually:

  1. Log into GitHub and click the + icon, then New repository
  2. Name it your-username.github.io exactly, with your actual GitHub username
  3. Set visibility to Public
  4. Check Add a README file
  5. Click Create repository
⚡ The naming is important

If your username is jsmith, name the repo jsmith.github.io. That exact pattern tells GitHub to serve it as your personal site.

Enable GitHub Pages

⏱ 5 minutes

GitHub Pages is free hosting built into GitHub. Once enabled, every file you push to your repository becomes a live web page at your-username.github.io. No servers, no hosting fees, no configuration beyond this step.

Do this through your AI chat. Tell it: "Help me enable GitHub Pages on my repository." It can walk you through the settings or guide you through doing it directly from the terminal.

If you prefer to do it manually:

  1. In your repository on GitHub, click the Settings tab
  2. In the left sidebar, click Pages
  3. Under Branch, select main and click Save
  4. Wait 60 to 90 seconds and reload. You will see a live URL appear.

Your First Commit

⏱ 20 to 30 minutes

A commit is a snapshot of your files at a moment in time, with a message describing what changed. Every time you push work to GitHub, you create one. Your commit history is part of your portfolio.

Do this through your AI chat. Tell it: "Help me clone my repository to my laptop, create an index.html file, and push my first commit." It will provide the exact commands for your operating system and explain each one.

The basic flow, for reference:

# Clone the repo to your laptop
git clone https://github.com/YOUR-USERNAME/YOUR-USERNAME.github.io
cd YOUR-USERNAME.github.io

# Create a file, commit, and push
git add index.html
git commit -m "First commit"
git push
🎯 What just happened

You staged the file (git add), labeled the snapshot (git commit), and sent it to GitHub (git push). Within 60 to 90 seconds, your live URL reflects the change. This is the workflow you will repeat throughout the summer. It gets fast.

Before You Build the Real Thing

Practice Build: Hello World

Prove to yourself that the entire workflow works before you invest time in your actual portfolio. This exercise takes 20 to 30 minutes and teaches you more than any explanation could.

The exercise

Tell your AI assistant to help you create a simple HTML page that says "Hello World" in your personal colors, and publish it live at your GitHub Pages URL.

Use this prompt in your AI chat:

Help me build a simple "Hello World" HTML page and publish it at my GitHub Pages URL.

The page should:
- Say "Hello World" as a big heading
- Use my two favorite colors as the background and text color
- Have my name somewhere on the page
- Be clean and simple

My favorite colors are [YOUR COLORS HERE — for example: navy blue and orange].
My GitHub Pages URL is [YOUR-USERNAME].github.io.

Walk me through creating the file, writing the HTML, committing it, and pushing it live.
Explain what each step does as we go.
🎯 Why this matters

When you see your own words in your own colors at your own URL, the workflow becomes real in a way that reading about it never does. You will also have proof that your tools are connected correctly before you invest serious time in your portfolio.

The workflow you just practiced, create a file, write content, commit, push, and see it live, is the exact same workflow you will use to build your entire portfolio. You have now done it. Everything from here is doing it again with better content.

Once your Hello World page is live, head to the Process page to start thinking about what your real portfolio will contain.

Read the Process Guide → Review the Categories
When Things Break

Troubleshooting

Things will go wrong. Here is how to handle it.

git push is asking for a username and password

GitHub no longer accepts passwords over HTTPS. You need a Personal Access Token or SSH authentication. Tell your AI assistant: "git push is asking for a password and failing. Help me fix this." It will walk you through the right solution for your operating system.

My GitHub Pages site is showing a 404

Two likely causes:

  • Pages is not enabled. Check Settings → Pages and confirm the branch is set to main.
  • No index.html file. GitHub Pages looks for a file named exactly index.html in your repo root. If it does not exist, you get a 404.

Wait 2 to 3 minutes after any change, then force refresh your browser with Cmd + Shift + R on Mac or Ctrl + Shift + R on Windows.

git commit says "Author identity unknown"

Git does not know who you are yet. Run these two commands in your terminal:

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

Use the same email address as your GitHub account, then run your commit again.

I got an error I do not understand

Copy the exact error message. Then:

  1. Paste it to your AI assistant. Say "I was doing X and got this error" and include the full error text. It will diagnose and fix it.
  2. Search the exact error text. You are almost certainly not the first person to hit this. Stack Overflow and GitHub Docs are excellent resources.

Diagnosing an error you have never seen before is exactly what employers pay people to do. You are doing real work right now.