FREE SNO GUIDE · FOR ADVISERS & STUDENT JOURNALISTS
Make your SNO site feel like your newsroom.
A beginner’s guide to using ChatGPT for design: what to ask, where to paste the code, and how to put the old version back.
This fall, The Gator’s adviser and student journalists worked with ChatGPT to improve the design of BMGator.org, the student news site of Brimmer and May School in Chestnut Hill, Massachusetts. This free guide shares the process, including the attempts that needed another pass.
AI helped with design code. Student journalists retained responsibility for reporting, editing, and publication.
WATCH FIRST, THEN TRY ONE SMALL CHANGE
A video introduction.
Watch the walkthrough, then use the guide below at your own pace. You can enlarge the screenshots, copy example requests, and check the undo instructions before changing your own site.
A REAL SPRING BASELINE · A DETAILED FALL WALKTHROUGH
What changed—and what it accomplished.
See The Gator before the fall redesign, then explore 19 specific design decisions. Each example explains what to notice, how it can help readers, and how another SNO newsroom could try it.
BEFORE · MAY 2, 2026
The spring site had a strong foundation.
Its recognizable masthead, large photographs, clear News and Opinion columns, and image-led Features row already gave student journalism a visible home. The fall work refined that foundation: stronger lead-story emphasis, clearer format labels, more deliberate multimedia presentation, and easier routes to newsroom tools and people.
Assessment: The most useful changes make an editorial choice clearer: what leads, what kind of work this is, who created it, and what a reader can do next. Those are more meaningful goals than adding effects for their own sake.
Spring homepage opening · May 2, 2026 archive. The complete lead photo and text are included.
Current homepage opening · freshly captured October 24, 2026.
About these images and the assessment
The spring images come from the Internet Archive’s May 2, 2026 capture of BMGator.org ↗. The current homepage, About page, and staff images were refreshed on October 24, 2026. The article stills also date from October 24. The poll example is a past poll with real results viewed in the current archive. The GNN comparison uses the same Multimedia page in July and October. The staff comparison contrasts the legacy directory with the new Meet the Staff page. Each exception is labeled directly beside its image. Detail images are crops of those actual browser stills; they are not generated reconstructions. Dates, stories, rosters, and photographs changed between captures, so this is a comparison of presentation across two periods, not the same stories in two layouts.
Wayback does not preserve every image, embedded service, font, or script. Missing thumbnails, blank video areas, and poll errors in the replay must not be treated as evidence that the spring live site was broken. Current-only examples are labeled below where a reliable matching spring still was unavailable. The full replay retains its archival limitations; the comparison cards use complete, verified frames or explicitly labeled excerpts.
The reader benefits described here are design assessments based on the visible layout, not measured improvements in traffic, reading time, accessibility, or loading speed. Stills do not demonstrate motion, playback, mobile behavior, or backend functionality. The adaptation routes are starting points; the existing guides explain code placement and recovery.
Read one comparison at a time. Every still can be enlarged.
EXAMPLE 01 OF 19 · SPRING → FALL
One lead, with two supporting stories
Look for this: Compare the single spring feature with the fall lead plus the two cards on its right.
BEFORE · May 2, 2026 spring archive · One lead, with two supporting storiesAFTER · October 24, 2026 still · One lead, with two supporting stories
What the spring image shows
The spring lead paired a large lacrosse photograph on the left with its headline, byline, date, and summary on the right. It gave one story an uncluttered introduction.
What the fall design shows
The fall lead puts the solar-panel photograph above a broad headline and summary. A narrower column carries Senior Spotlight and a Homecoming photo gallery alongside it.
What this can accomplish
Readers can identify the main story and discover two different kinds of coverage in the same opening area. The large photograph establishes a clear first stop.
The tradeoff to watch
The bigger lead also occupies more vertical space. More prominent does not automatically mean less scrolling; test whether the next sections still begin at a sensible point.
EXAMPLE PROMPT · THIS CATEGORY
Copy this into ChatGPT’s message box.
Use my existing SNO homepage code to put one main story on the left and two smaller supporting stories on the right. Put the main headline and excerpt below its photograph. Keep every story link, byline, date, and existing format label. Stack in a sensible reading order on phones. Ask for my current code and screenshots before choosing selectors.
Add your existing code and screenshots. Ask for the exact destination, whether to add or replace, what to preserve, and the steps to restore the original.
Where to install, what to check, and how to undo
Where to start
Site Designer for the surrounding column area; Widgets for story selection and the existing homepage code; scoped CSS for the layout.
Check the result
Try a long headline and both portrait and landscape lead photos. Reload Safari and Firefox and check for a brief stacked layout or empty space.
Keep an undo path
Save the entire original field before editing. Make a SNO Design Backup before changing widget layouts. If the test fails, restore the saved contents of that field; use the named Design Backup when the layout or multiple widgets changed.
Keep the editorial purpose first. Test one change, then keep it only if it helps your readers.
NO CODING BACKGROUND NEEDED
Your step-by-step field guide.
Start with the beginner exercise. Use the guide’s menu to explore the screenshots, individual design changes, model choices, cost estimates, and undo options. Use the page’s normal scroll to read the guide.
Freely shared for schools of any type. Historical code is for study and adaptation; it is not a guaranteed replacement for your current site. This independent resource is not affiliated with SNO Sites or OpenAI.
03Check & undoLook at the public page; keep a backup.
TWO COMPLETE PAGE MODULES
Revise your About page or staff directory.
Use current Gator examples, copy a starting prompt, then follow the installation and undo steps for your own SNO site.
About page: mission, policies, and contact
Organize the page while preserving the editors’ approved wording and working contact form.
Staff page: people, roles, and biographies
Feature student leadership, use real staff records, and preserve every biography link.
What “vibe-coding” means here
You explain a design idea in ordinary language, ask AI to help write the code, and test the result. The Gator used ChatGPT for design work. The Gator does not use AI to create its original journalism or artwork.
YOUR FIRST SMALL EXERCISE
Add a welcome box. Then remove it.
Optional practice • about 15 minutes
Use a new Custom HTML widget for this exercise. You are adding a separate content box, so there is no need to rewrite the homepage layout. You will still make a backup first.
In ChatGPT—not in SNO
1. Tell ChatGPT what you want
Start a new conversation. Click the message box where you normally type a question. Paste the request below. On a Mac, use Command-V; on Windows, use Ctrl-V. Press Send. Your design description goes in this message box. It does not go in Custom CSS.
You should receive an explanation and a separate box containing code.
PASTE THIS INTO CHATGPT’S MESSAGE BOX
I am new to coding and use a SNO student news site.
I want a small green-bordered box that says “Welcome to our newsroom.”
I want to add it as a NEW Custom HTML widget, so my existing design code stays intact.
Please tell me exactly what to click, where to paste the code, which Save button to use, what I should see, and how to remove the box.
Return one complete code block. Explain any technical words in plain English.
This is a request for ChatGPT, not code for SNO.
A FEW WORDS YOU WILL SEE
The small glossary.
Dashboard
The private WordPress/SNO control area where you edit your site.
Public page
The page your readers see. Open it in a second tab to check your work.
Widget
One content box on a page, such as a story list, a poll, or your welcome box.
CSS
Instructions for appearance: colors, type, spacing, and picture sizes.
HTML
Instructions that organize content: text, links, images, and boxes.
JavaScript
Instructions for actions, such as loading headlines or adding a label.
Prompt
The request you type into ChatGPT’s message box.
Snippet
A small piece of code. Keep its placement instructions with it.
Append / add to
Keep the old contents and paste the new code at the bottom.
Replace
Swap the contents of the named field for the complete new version.
Revision / backup
An earlier saved version you may be able to restore. Each backup tool covers different things.
Token
A small unit AI uses to measure input and output. It is not always one word.
Ready to change one real element?
Start with where the code goes, then choose one guide. Larger layout and staff-page changes can wait.
