Learn Claude at PCS

Part A · Make a brand page from an old website

1. Pick your template. Choose the old website whose look you want to keep. You don't have to like all of it; you'll fix the rest in step 4.
2. Show Claude the look. Either open the old site in Chrome and ask Claude in Chrome to read it with the first prompt below, or take screenshots of two or three of its pages and attach them to a Claude chat.
3. Ask for the brand page. Send the second prompt below. Claude builds it as an artifact you can see and click.
4. Tweak it. Tell Claude what to change, one or two things at a time. For PCS, we changed the page background from white to ivory (#FAF7F2) and ruled out black buttons, so the athletics pages stay light and easy to read.
5. Save and share it. Share the artifact link with your team, or put it online with Lesson 6 like brand.plumstead.ooo. This page is now the rulebook.

Look at this website as a design template. List its logo and where it sits, every main color with its hex code and what it's used for, the fonts and sizes for headings and text, and how buttons, cards and corners look. Don't click or change anything.

Using that design (or my attached screenshots) as the template, build a one-page brand guide for [school or business name].
Include: logo rules with do's and don'ts, color swatches with names and hex codes, the two fonts with sizes for each use, buttons, cards and corner sizes, and a block of CSS code I can copy into new pages.
Mark anything you had to guess so I can check it. Make it one HTML file that works on phones.

Before and after

The same little page, before and after the brand rules. Spot the five differences.

Before

Our School

Book FairThursday in the librarySign up

After

Plumstead Christian

Book FairThursday in the librarySign up

Part B · The PCS rules every page follows

These come from brand.plumstead.ooo. This training page follows them too.

The brand block. Copy this and paste it at the top of every prompt, so Claude follows the same rules each time. If you use a Claude Project, add it to the project's knowledge so every chat in that project starts with it.

PCS brand rules (follow on every page; reference: brand.plumstead.ooo)
- Crest: use the crest file as is. On a crimson bar it sits in a white circle. Never redraw, recolor, stretch or crop it.
- Colors: crimson #BD2041 for buttons, top bar and labels; dark crimson #8E1530 for hover; soft crimson #FBECEF for pills; ivory page #FAF7F2; white cards #FFFFFF; warm gray #F1ECE4 for quiet panels; lines #E8E1D6; muted text #6B6560; ink text #1E1A18. Green #2E7D4F is for wins and status only.
- Fonts (Google Fonts): Cormorant Garamond 600/700 for headings; Libre Franklin 400–800 for body, buttons and labels. Body text 17px or larger.
- Shapes: cards white with 18px corners, a soft warm shadow and no border. Buttons 12px corners, at least 48px tall, primary always crimson. Quick-link tiles 20px corners. Pills fully round.
- Never use black backgrounds or black buttons.
- Build for phones first.

Checking a new page? Open it next to the brand page and compare the crest, colors, fonts, corners and button sizes. Ask Claude to fix anything that doesn't match.

Part A · Build a page in a chat

1. Go to claude.ai and start a new chat.
2. Copy the prompt below, fill in the parts in [brackets] with a real event, and send it.
3. Claude builds the page as an artifact, which opens next to the chat so you can see and click it.
4. Ask for changes in plain words, one or two at a time: "Make the date bigger" or "Add a map link".
5. Artifacts start private. When you're happy, use Share to send a link to a colleague for review.

Build a one-page website for a Plumstead Christian School event.
Event: [event name], [day, date and time], [place].
Audience: parents, many reading on their phones.
Include: a short welcome, the date and time, what to bring, and a big "Questions? Email the office" section.
Follow these brand rules exactly: [paste the PCS brand block here]
Make it one HTML file that works on phones.

Part B · Add Claude to Chrome

1. In Chrome, open the Claude page in the Chrome Web Store and click Add to Chrome.
2. Sign in with your Claude account when it asks.
3. Pin it so it's easy to find: click the puzzle-piece icon at the top right of Chrome, then the thumbtack next to Claude.
4. Allow the permissions it asks for.
5. Click the Claude icon to open the side panel. You chat with Claude there while it sees the page you're on.

On a school plan? With an Enterprise plan, an account owner has to turn Claude in Chrome on first, and Team or Enterprise admins can limit which sites it works on.

Part C · Use it on a real page

1. Open one of the PCS sites from the tour, such as the Hub.
2. In the side panel, paste the prompt below. Claude reads the page and reports back.
3. Save prompts you use often as shortcuts: type / in the side panel.

Look over this page. List any typos, buttons that are hard to tap on a phone, and links that look broken. Don't click or change anything; just give me the list.

Steps

1. In a Claude chat, send the prompt below. Asking for "one file with the CSS inside" matters, because Google Sites needs everything in one piece.
2. Click Claude's copy button on the code.
3. Open your Google Site in edit mode. Click Insert, then Embed, then the Embed code tab.
4. Paste the code, click Next, then Insert. Drag the box's corners to size it.
5. For a page that's entirely Claude's work, go to Pages, hover over Add and choose Full page embed, then paste the code there.
6. Preview it, go through the Before you publish list, and only then click Publish at the top right.

Make a "This week at PCS" card for a Google Sites embed.
Show three items, each with a day, a title and one line: [item 1], [item 2], [item 3].
Follow these brand rules exactly: [paste the PCS brand block here]
Give me one HTML file with the CSS inside it, no outside files, and make it fit any width.

Let Claude in Chrome guide you

With your Google Site open, open the side panel and ask Claude to point things out on the screen. It reads the page you're on, so it can tell you where a button is or why an embed looks squished. You still do the publishing yourself.

I'm editing this Google Site. Tell me, step by step, how to add an embed code box below the first section. Don't click anything; I'll do the clicks.

Changing it later? Edit the code in your Claude chat, then in Google Sites click the embed, choose edit, and paste the new version over the old one.

Steps

1. Make a new Google Sheet. Rename the first tab Events and type these headings in row 1: Date, Event, Place. Add a few rows.
2. In the sheet, click Extensions, then Apps Script. A code editor opens in a new tab.
3. Delete the sample code, paste the code below, and click the save icon.
4. Click Deploy, then New deployment. Click the gear next to Select type and choose Web app.
5. Set Execute as to Me. For Who has access, pick the narrowest choice that works for your page; choosing anyone means anyone with the link can read the sheet's data.
6. Click Deploy. Google asks you to allow access to your sheet; read what it asks before you agree. Copy the Web app URL, which ends in /exec.
7. Open that address in a new tab. You should see your rows as text. That's your backend working.
8. Send Claude the second prompt below with your address, and it builds the page that shows the events.

function doGet() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Events');
  const rows = sheet.getDataRange().getValues();
  const headers = rows.shift();
  const data = rows.map(r => Object.fromEntries(headers.map((h, i) => [h, r[i]])));
  return ContentService
    .createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}

Build a one-page "Upcoming Events" site for Plumstead Christian School.
Load the events from this Google Apps Script web app address: [paste your /exec address].
It returns a list with Date, Event and Place. Show them as cards, soonest first, and hide events that have passed.
Follow these brand rules exactly: [paste the PCS brand block here]
Make it work on phones. One HTML file.

Changed the script later? Go to Deploy → Manage deployments, pick your deployment, click edit, choose a new version, and click Deploy. The address stays the same, so your page keeps working. The address ending in /dev is only for testing and works only for the sheet's editors.

Let Claude write the script

You don't need to write Apps Script yourself. Describe what you want, and paste Claude's code in step 3 instead.

Write a Google Apps Script for a sheet with a tab called "Sign-ups" (columns: Name, Grade, Activity).
I want a web app that returns only the Activity column and a count for each activity, as JSON. No names should leave the sheet.
Explain each step of deploying it in plain language.

Make a repository and add your page

1. Sign in to GitHub. At the upper right, click +, then New repository.
2. Give it a short name, like event-page. Choose Private for drafts. Turn on Add README, then click Create repository.
3. Click Add file, then Upload files, and drag in your index.html. Each file can be up to 25 MB.
4. Type a short note about the change, like "First version of the event page", and click Commit changes.
5. To edit later, open the file, click the pencil, make your change, check Preview, and click Commit changes… again.

Connect GitHub to Claude

1. In a Claude chat, click + and choose Add from GitHub. Pick your repository and the files you want Claude to see.
2. For a private repository, GitHub asks you to give the Claude GitHub app access to it.
3. Inside a Claude project, you can add a repository to the project's knowledge the same way, and use the sync button to pull in your latest changes.

Here's my event page from GitHub. Add a "Volunteer" section with three time slots, keep everything else exactly the same, and give me the whole updated file.
The new section must follow these brand rules: [paste the PCS brand block here]

Good to know: In chat, Claude reads your files but doesn't save changes back to GitHub; you upload the new version. Claude Code, Anthropic's coding tool, can make commits for you, which is how the PCS sites are updated.

Never put passwords or keys in a repository, even a private one.

Option A · Netlify Drop

1. Put your index.html in a folder on your computer.
2. Go to app.netlify.com/drop and drag the folder onto the page. A zip file or a single HTML file works too.
3. Netlify gives you an address ending in netlify.app. If you didn't sign in, it's protected by a temporary password until you sign up and claim the site.
4. To update it, open your project's Deploys page and drag the updated folder onto the production deploys area.
5. To use your own address, go to domain settings: Add domain → Add a domain you already own → Verify → Add domain. For an address like learn.yourschool.org, add a CNAME record at your domain provider pointing to your-site.netlify.app.

Option B · Firebase Hosting

1. Install the Firebase tools once: npm install -g firebase-tools
2. Sign in: firebase login. A browser window opens for your Google account.
3. In your site's folder, run firebase init hosting. Pick your project and name the folder that holds index.html (often public).
4. Put it online: firebase deploy --only hosting. Your site appears at your-project.web.app.
5. Optional: firebase init hosting:github connects your GitHub repository, so each proposed change gets its own preview link and approved changes go live automatically.
6. For your own address, open Hosting in the Firebase console, click Add custom domain, enter it, and add the records it shows at your domain provider. It can take up to 24 hours to work.

I have a folder with index.html and I want to put it online with Firebase Hosting. I've never used a terminal.
Walk me through it one step at a time. Tell me exactly what to type, what I should see, and wait for me to say "done" before the next step.

Keep a draft out of Google

Put this line inside the page's <head> section, or ask Claude to add it. Every PCS draft has it.

<meta name="robots" content="noindex">

Don't block the page in a robots.txt file at the same time. Google has to be able to visit the page to see the tag. This robots.txt lets it in:

User-agent: *
Allow: /