You are about to have a real website, live on the internet, with your name on it. You do not need to install anything and you do not need to know how to code. Everything below happens in your browser.
One thing to have first, it's free: a GitHub account.
Note
This session moves in five parts, and each one ends at a STOP. When you hit a stop, wait there. We move as a room. If you are early, help whoever is next to you, that is the fastest way to get everybody through.
Top right of this page. Choose Create a new repository.
Any name works. my-first-site is fine. Leave everything else alone.
In your new repository: Settings → Pages (left sidebar) → under Source choose Deploy from a branch → pick main → Save.
Refresh the Settings → Pages screen. A link appears at the top that looks like:
https://YOUR-USERNAME.github.io/my-first-site/
Click it. That is your website. It is live. Anyone in the world can open it.
If you get a 404, wait another 30 seconds and refresh. The first build is the slow one.
Important
Do not move on until your link opens and shows a page that says It's live.
Nothing after this point works without it. If yours is not up, hand in the air. If yours is up, look left and right before you keep going.
In your repository, click index.html, then the pencil icon at the top
right of the file. Find YOUR NAME HERE near the top and change it to your
name. Scroll down, click Commit changes, then refresh your live site.
You just edited a real website and shipped it. That loop, edit → commit → refresh, is every change you will ever make today.
Go to calpolyvibecoding.com. Scroll down until the nav bar appears, click Login, and create an account.
Fill in your info. Three things matter:
- Use an email you actually check. Everything, including Claude seat invites, goes to the address you sign up with.
- Tick the box if you want a Claude seat. You will not be considered without it.
- Paste your live link. The one from Part 1.
If it asks what you are building and you have no idea yet, put TBD. That is a real answer today.
Important
This is the step people skip, and it is the one that decides who gets a Claude seat. Account made, seat box ticked, link pasted.
Done early? Ask the person next to you if they got theirs in.
Open Gemini and sign in with a Google account. The free version is all you need today.
Ask for a website in one sentence. Anything you want. Then paste the block underneath it:
make me a personal website
Give me one complete HTML file. All CSS in a
<style>tag. You may link one Google Font. No frameworks, no other external files, no build step. Return only the code.
Then put it on your site:
- Copy the code with the copy button on the code block. Do not click and drag, you will grab the explanation text too.
- Open
index.htmlin your repository and click the pencil icon. - Ctrl+A (Cmd+A on Mac), then Delete. Clear the whole file.
- Paste, commit, refresh your live site.
Deleting everything is correct. You are replacing the page, not adding to it.
It'll be okay. Not great. That's the point.
Important
Your site should now look nothing like it did ten minutes ago.
If your page looks wrecked, see the table at the bottom. It is almost always one thing and it takes ten seconds to fix.
Open SPEC.md and fill in six lines:
| T — Thing | What it is, one sentence |
| A — Audience | Who it's for, a specific person |
| R — Requirements | The two or three things it must do |
| G — Guardrails | What it must never do |
| E — Experience | Sections in order, one accent color, one reference |
| T — Test | What "done" means |
Commit the file when you are done.
The line people write worst is E. It is tempting to write moods: "forest aesthetic with beach vibes." Models turn moods into generic layouts. Write structure instead: "hero, story, three highlights, contact. One accent color, deep green. Full-height hero, lots of whitespace. Should look like a clean personal site, not a resume." Same line, completely different result.
Important
This is the actual lesson of the session. Everything else today is logistics.
Do not skip to Part 5 with a half-filled TARGET. The comparison only works if you wrote it down properly.
Back to Gemini:
Build me a website from this spec: [paste your six TARGET lines]
Give me one complete HTML file. All CSS in a
<style>tag. You may link one Google Font. No frameworks, no other external files, no build step. Return only the code.
Copy, select all in index.html, delete, paste, commit, refresh.
Now open round one and round two side by side. That comparison is the entire lesson. Same tool, same model, same person, twenty minutes apart. The only thing that changed is that you wrote it down first.
Important
Everybody has a live site built from their own TARGET. That is the session.
Anything past this point is yours to keep going with during open build time.
The round people skip. Ask for one specific change:
make the hero full height, tighten the spacing, and use one accent color instead of three
Copy, paste, commit, refresh. Iterating isn't cheating, it's the last step of The Loop, and it's where output stops looking generated.
Then add it to your phone: open your link in Safari or Chrome, hit Share → Add to Home Screen. It opens like an app.
| What you see | What it is |
|---|---|
| 404 page not found | The first build takes about a minute. Wait and refresh. If it persists, check the file is named exactly index.html, all lowercase. |
| Site did not change | It caches for a minute. Hard refresh: Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac. |
| The page looks wrecked | Gemini gave you a fragment, not a whole page. What you paste should start with <!DOCTYPE html>. Go back to Gemini and ask for "one complete HTML file, return only the code." To undo: open the file, click History, open the version before your change, copy it back. |
| Half the page is Gemini's explanation | You click-and-dragged instead of using the copy button. Clear the file and paste again. |
| Cannot find the pencil icon | Click the file name first, then look at the top right of the file box. |
| No laptop | Pair up with whoever is next to you. Put both names in the footer and both of you ship it. |