Full Guide: Build a Class Website with Claude + Google Sites

The full guide

Step-by-step walkthrough

Your first website can be live in about 15 minutes.

Open Google Sites and create a blank site

Free website builder from Google. No downloads, no installs.

Open your browser and go to sites.google.com

Click the big + Blank site button to create a new site

Type a name for your site in the top left corner of the toolbar (e.g. "Ms. Rivera's Science")

You'll see the editor with your blank page and an Insert panel on the right:

Google Sites

🔒 sites.google.com/new

Your blank site is ready.

Click Insert on the right to add content.

The </> Embed button (highlighted above) is where you'll paste Claude's code. You'll come back to it in Step 4.

Open Claude and describe your entire site

In a second tab, tell Claude everything you want on your page in one message.

Go to claude.ai in a new tab

Start a new chat

Describe your site in one detailed message. Here's what it looks like:

claude.ai

How can I help you today?

Build me a complete class website for Ms. Rivera's 7th Grade Science class, Room 204. Use a dark blue and white color scheme. Include: a welcome banner...

↑

Copy and edit these example prompts:

"Build me a complete class website for Ms. Rivera's 7th Grade Science class, Room 204. Use a dark blue and white color scheme. Include: a welcome banner with the class name, my name, and room number; a row of quick-link cards for Textbook, Assignments, and Grades; a weekly updates section showing this week's quiz on Friday and lab report due Wednesday; and a contact footer with my email rivera@school.edu and office hours Tue/Thu 3-4pm. Make it a single HTML file with all CSS inline. Make it Google Sites embed-friendly: no 100vh, no position:fixed, use padding for spacing." Change the details to match your own class, links, and schedule.

"Build me a complete website for my research project about the solar system. Use a dark background with white text and a space theme. Include: a hero section with 'The Solar System' as the title and 'By Alex Chen, Grade 8' underneath; a section with cards for each planet showing its name and one fun fact; a resources section linking to NASA.gov and our class textbook; and a footer with my name and class period. Make it a single HTML file with all CSS inline. Make it Google Sites embed-friendly: no 100vh, no position:fixed, use padding for spacing."

"Build me a complete website for my school's Robotics Club. Use a modern dark grey look with green accents. Include: a hero banner with the club name and the tagline 'Building the future, one robot at a time'; a meeting schedule showing we meet Tuesdays and Thursdays in Room 112; a section about upcoming competitions with dates; and a sign-up section with our advisor's email. Make it a single HTML file with all CSS inline. Make it Google Sites embed-friendly: no 100vh, no position:fixed, use padding for spacing."

Always end your prompt with: "Make it Google Sites embed-friendly: no 100vh, no position:fixed, use padding for spacing." This prevents the most common embed issue.

Copy the code from Claude's artifact

Claude shows a live preview on the right side of the chat. Click Copy when it looks right.

Wait for Claude to finish generating (you will see the preview appear on the right)

Look at the preview. Does the banner look how you imagined it? Check the colors, the text, and the button.

If it looks right, click the Copy button in the top right corner of the artifact panel

claude.ai

Build me a welcome banner for my 7th grade science class website...

Here's a welcome banner for Ms. Rivera's Science class:

✦ Science Class Banner

📋 Copy

<div style="background:#1a3a5c; padding:3rem 2rem; text-align:center"> <h1 style="color:#fff">Ms. Rivera's Science</h1> <p style="color:#b0c4de">7th Grade - Room 204</p> <a href="#">View Syllabus</a> </div>

Not happy? Just say "make the heading bigger" or "change the blue to green" in the same chat. Claude updates instantly. Keep tweaking until you love it.

Paste the code into Google Sites

Switch back to Google Sites and use the Embed tool:

In the right sidebar, click the < > Embed icon

A dialog box will pop up. Click the "Embed code" tab at the top (not "By URL")

Click inside the large text area and press Ctrl + V (or Cmd + V on Mac) to paste the code you copied from Claude

Click the blue Next button

A preview will appear. Click Insert to add it to your page

Ms. Rivera's Science

🔒 sites.google.com/s/ms-riveras-science/edit

URL

Code

<div style="background:#1a3a5c;
padding:3rem 2rem; text-align:center">
<h1 style="color:#fff">
  Ms. Rivera's Science
</h1>
<p style="color:#b0c4de">
  7th Grade - Room 204
</p>
<a href="#">View Syllabus</a>
</div>

Resize the embed by dragging its edges or corners. Make it wide enough to span the full page width, and tall enough to show all the content without scrollbars.

If the embed looks squished or cut off, drag the bottom edge down. Google Sites caps embed height at about 1000px. If your section is taller than that, you will need to split it into two separate embeds.

Refine and update

Go back to Claude any time. It remembers the conversation.

"Change the quiz date to Thursday"

"Add a section for lab safety rules"

"Make the font bigger"

Copy the updated code, replace in Google Sites. Two minutes.

Preview your site

Click Preview in the top toolbar to see your site as visitors will. If something looks wrong, close the preview, double-click the embed, and edit it.

Publish and share

Time to go live.

Click the blue Publish button in the top right corner

Type a web address for your site (for example, "ms-riveras-science")

Click Publish to confirm

Ms. Rivera's Science

🔒 sites.google.com/s/ms-riveras-science/edit

Web address

sites.google.com/view/

ms-riveras-science

Your site is live! Share via Google Classroom, email, LMS, or group chat.

Copy-Paste Ready

Complete Site Templates

Copy into Claude. Replace the [brackets] with your details.

Build me a complete, polished class website as a single HTML page for [Teacher name]'s [Grade level] [Subject] class, Room [number] at [School name]. Use a [describe aesthetic, e.g. "warm and inviting design with navy blue headers, cream backgrounds, and gold accents"]. Use Google Fonts for a modern look. Include these sections from top to bottom: 1. A hero welcome banner with an animated gradient background, my name, class name, room number, and a "View Syllabus" button that opens a popup overlay with my course overview, grading breakdown ([e.g. Tests 30%, Homework 25%, Labs 25%, Participation 20%]), and required supplies 2. Three quick-link cards with icons for [e.g. Textbook, Google Classroom, Grade Portal] that show a subtle toast notification when clicked 3. A tabbed "What's Happening" section with two tabs: "This Week" showing a day-by-day schedule ([Monday: topic, Tuesday: topic, etc.]) with color-coded status tags (Complete, Today, Due, Quiz), and "Announcements" with 2-3 recent posts ([list your announcements]) 4. A dark-themed class progress section with an animated progress bar showing [X]% of the year complete, and stat cards for number of students, days of learning, and average quiz score 5. Interactive flashcard review section for [current unit topic] with 3 cards that flip on click to reveal answers: [list 3 question/answer pairs] 6. An expandable class resources section with cards for [e.g. Lab Safety Rules, Extra Credit, Tutoring Schedule] that expand to show details when clicked 7. A footer with my name, email ([your email]), office hours ([your hours]), and a styled email button Add hover effects, smooth transitions, scroll animations, and wave dividers between sections. Make it feel interactive and professional. Make it a single HTML file with all CSS and JS inline. Google Sites embed-friendly: no 100vh, no position:fixed, use padding for spacing.

Build me a visually impressive research project website about [topic, e.g. "The Water Cycle and Climate Change"] for my [subject] class. Use a [describe look, e.g. "clean, scientific design with a white background, teal accents, and subtle data visualization feel"]. Use Google Fonts for a polished look. Include these sections from top to bottom: 1. A hero section with the project title, a subtitle "By [your name], [grade/class]", and a background that feels relevant to the topic 2. A "Research Question" callout box highlighting: [your main research question] 3. An introduction section: [2-3 sentences explaining why this topic matters] 4. A "Key Findings" section with 4-5 animated stat cards that count up when scrolled into view: [list facts with numbers, e.g. "71% of Earth's surface is water", "97% of water is in oceans"] 5. A timeline or process section showing [3-5 steps or stages, e.g. stages of the water cycle] with icons and short descriptions 6. An interactive "Did You Know?" section with 3 cards that flip on click to reveal surprising facts: [list 3 question/fact pairs] 7. A "Sources" section with numbered references: [list your sources] 8. A footer with your name, class period, and date Add scroll-triggered fade-in animations, hover effects on cards, and smooth transitions. Make it a single HTML file with all CSS and JS inline. Google Sites embed-friendly: no 100vh, no position:fixed, use padding for spacing.

Build me an energetic, eye-catching website for the [club/activity name, e.g. "Robotics Club"] at [school name]. Use a [describe style, e.g. "dark theme with electric blue and neon green accents, techy feel"]. Use Google Fonts. Include these sections from top to bottom: 1. A bold hero section with an animated gradient background, the club name in large type, tagline "[your tagline, e.g. "Building the future, one bot at a time"]", and a "Join Us" button that smooth-scrolls to the sign-up section 2. An "About Us" section with a short description ([what the club does, 2-3 sentences]) alongside 3 highlight stat cards: [e.g. "15 Members", "3 Competitions", "2 Trophies"] 3. A "Meeting Schedule" section with a weekly calendar-style layout: [day, time, location, what you do each meeting] 4. An "Upcoming Events" section with event cards that have dates, titles, and descriptions: [list 3-4 events] 5. A photo gallery placeholder section with 4-6 styled placeholder boxes labeled [e.g. "Competition Day", "Build Session", "Team Photo"] 6. A "Meet the Team" section with role cards for [list officer roles and names, e.g. "President: Alex M., VP: Jordan T."] 7. A "How to Join" section with the advisor ([name]), meeting location, and a styled email contact button ([email]) Add hover animations, scroll-reveal effects, and smooth transitions throughout. Make it a single HTML file with all CSS and JS inline. Google Sites embed-friendly: no 100vh, no position:fixed, use padding for spacing.

Build me an interactive study guide website for [unit name, e.g. "Chapter 5: The American Revolution"] in [Teacher name]'s [Subject] class. Use a [describe colors, e.g. "warm parchment background with navy text and red accents for a historical feel"]. Use Google Fonts. Include these sections from top to bottom: 1. A header with the unit title, class name, and an "Exam Date: [date]" badge 2. A "Key Vocabulary" section with terms displayed as a two-column grid of cards, each showing the term on front and definition on back (click to flip): [list 6-10 terms with definitions] 3. A "Big Ideas" section with 3-4 expandable accordion panels, each with a concept title that expands to reveal a detailed explanation: [list concepts and explanations] 4. A visual timeline section showing [4-6 key dates/events in chronological order] with a connecting line and animated dots 5. A "Test Yourself" section with 5 practice questions displayed as cards. Each card shows the question, and clicking "Show Answer" reveals the answer below: [list 5 questions with answers] 6. A "Study Tips" callout box with 3-4 specific strategies for this unit: [list tips] 7. A "Resources" section linking to helpful materials: [list resources] Add click-to-reveal interactions, hover effects, scroll animations, and smooth transitions. Make it a single HTML file with all CSS and JS inline. Google Sites embed-friendly: no 100vh, no position:fixed, use padding for spacing.

Build me a beautiful, inviting event page for [event name, e.g. "Spring Open House 2026"] at [school name]. Use a [describe style, e.g. "fresh spring palette with soft greens, whites, and floral accents"]. Use Google Fonts. Include these sections from top to bottom: 1. A hero banner with an animated gradient, the event name in large elegant type, date ([date]), time ([time range]), and a "Save the Date" badge 2. A countdown-style stats row showing days until the event, number of activities planned, and expected attendees: [fill in numbers] 3. An "About This Event" section: [2-3 sentences about what families can expect] 4. A visual schedule/agenda with time blocks, activity names, locations, and short descriptions: [list activities with times, e.g. "6:00 PM - Welcome & Refreshments in the Cafeteria"] 5. A "Getting Here" section with the school address ([address]), parking instructions ([where to park]), and which entrance to use 6. A "What to Bring" checklist section: [list 4-5 items families should bring or know] 7. A "Frequently Asked Questions" accordion with 3-4 common questions and answers: [list Q&A pairs, e.g. "Is this event free? Yes, all activities are free for families."] 8. A contact footer with the organizer name ([name]) and a styled email button ([email]) Add scroll animations, hover effects, and smooth transitions. Make it a single HTML file with all CSS and JS inline. Google Sites embed-friendly: no 100vh, no position:fixed, use padding for spacing.

Build me a visually appealing class newsletter page for [Teacher name]'s [Grade level] [Subject] class, covering [month or date range, e.g. "March 2026"]. Use a [describe look, e.g. "cheerful design with soft yellows, warm grays, and playful rounded cards"]. Use Google Fonts. Include these sections from top to bottom: 1. A newsletter header with a decorative banner, the title "[e.g. "Room 204 Monthly Update"]", the date range, and my name 2. A "Classroom Highlights" section with 3 illustrated cards (use simple SVG icons) showing what we accomplished: [list 3 highlights, e.g. "Completed our ecosystem diorama project", "Class average improved 8% on Unit 4 test"] 3. A "Looking Ahead" section with a visual calendar-style list of important upcoming dates and deadlines: [list 5-6 dates with descriptions] 4. A "Student Spotlight" section with 2-3 styled cards highlighting student achievements (first names only): [e.g. "Maria showed outstanding leadership during group projects", "James earned a perfect score on the vocabulary quiz"] 5. A "How Parents Can Help" section with icon-paired tips: [list 3-4 specific suggestions, e.g. "Ask your child about their ecosystem project", "Review vocabulary flashcards together for 10 minutes"] 6. A "Reminders & Action Items" checklist with checkmark icons: [list items parents need to do, e.g. "Sign and return field trip permission slip by March 28"] 7. A footer with my contact info and a friendly sign-off message Add subtle hover effects and smooth scroll animations. Make it a single HTML file with all CSS and JS inline. Google Sites embed-friendly: no 100vh, no position:fixed, use padding for spacing.

Build me a clear, well-organized substitute teacher reference page for [Teacher name]'s [Subject] class, Room [number] at [School name]. Use a [describe look, e.g. "clean, professional design with a calming blue theme that's easy to scan quickly"]. Use Google Fonts. Include these sections from top to bottom: 1. A prominent header with my name, subject, room number, school name, and today's date, plus an "Emergency: Call Front Office" button styled in red 2. A color-coded daily schedule table showing each period with times, class name, room, and number of students: [list each period, e.g. "Period 1: 8:00-8:50, 7th Grade Science, 27 students"] 3. A "Classroom Procedures" section with icon-paired items in a clear grid: [list procedures: attendance method, bathroom policy, phone policy, early finisher activities, behavior expectations] 4. An "Emergency Contacts" section styled as prominent contact cards: [list: department head (name, room), front office (phone), neighboring teacher (name, room), school nurse (location)] 5. A "Today's Lesson Plans" section with a card for each period that includes the activity, materials needed, step-by-step instructions, and expected timing: [describe the plan for each period] 6. A "Where to Find Things" visual guide: [list locations: worksheets, answer keys, extra supplies, laptop cart, Google Classroom access info] 7. A "Helpful Students" section organized by period with first names and what they can help with: [list 2-3 students per period] 8. A "Notes for the Sub" section for anything else: [e.g. "Period 3 has an IEP student who sits near the door", "Fire drill exit is through the south hallway"] Keep it scannable with clear headings, visual hierarchy, and color-coded sections. Make it a single HTML file with all CSS inline. Google Sites embed-friendly: no 100vh, no position:fixed, use padding for spacing.

Something not working?

Troubleshooting

My embed shows but the rest of the page disappears

The code contains 100vh. Ask Claude to replace it with padding: 4rem 2rem or min-height: 500px.

The embed content is cut off at the bottom

Google Sites caps embed height at ~1000px. Split tall sections into two embeds.

The embed looks tiny or has a lot of white space

Click the embed and drag the corners to resize it. Make it full page width.

Fonts look different from what Claude showed me

Ask Claude: "Include the Google Fonts link tag in the HTML head."

I pasted the code but nothing shows up

Make sure you selected the Embed code tab (not "By URL"). Try copying the code again.

How do I edit an embed after inserting it?

Double-click the embed block in the Google Sites editor. A pencil icon or edit button will appear. Click it, replace the code, and click Save. Changes appear instantly.

Common questions

FAQ

Does this cost anything?

No. Both Google Sites and Claude are free. No credit card needed.

Can students access the site?

Yes. Share the link or restrict access to your school's domain.

Can students build their own sites this way?

Absolutely. Great for portfolios, research projects, and science fair pages.

Can I have separate pages for different units or topics?

Yes. Use the "Pages" tab in the sidebar. Google Sites auto-creates a navigation menu.

How do I update assignments each week?

Tell Claude the new assignments. Copy the updated code and swap it in. Two minutes.

How do I make my site look good on phones?

Add "Make sure it looks good on phone screens too" to your prompt.

Can I embed Google Docs, Slides, or Forms?

Yes. Use Google Sites' built-in Drive tool for Docs, Sheets, Slides, and Forms.

Can I add interactive elements like quizzes?

Yes. Claude can build tabs, flashcards, and expandable sections. For graded quizzes, embed a Google Form.

Build Your Educational Website

The Prompt Behind The Live Preview

What you'll need

Google Account

Claude Account

Browser

Device

Step-by-step walkthrough

Open Google Sites and create a blank site

Your page title

Open Claude and describe your entire site

Copy the code from Claude's artifact

Paste the code into Google Sites

Refine and update

Preview your site

Publish and share

How to describe what you want

Follow-up messages that work great

Complete Site Templates

Is this okay to use at my school?

It's a productivity tool, not AI content

You review everything

No student data involved

Works with your school's Google account

Troubleshooting

FAQ

What to do next

Add more pages

Update weekly

Share everywhere

Student projects

Embed Docs & Slides

Get fancy