Learn · Build · Make it yours

Free summer camp website template

Day camps, outdoor schools and science clubs that sell week-long sessions to parents

What is included

Kids' day camp / summer science camp

  • Hero with the camp promise
  • Session schedule drawn as a tide chart with spots left
  • Field-guide cards of what kids discover
  • A day at camp timeline
  • Price, group size and what to bring
  • Reserve-a-week call to action

Get the full frontend-design workflow

Kids' marine-science day camp

Low Tide Lab

The schedule is a tide chart: camp weeks sit in the low-tide troughs. Field-guide specimen cards show what kids find on the rocks.

Low Tide Lab — 9-second scroll preview

Signature: A tide chart that doubles as the camp schedule

Palette
  • Foam #EAF6F3
  • Deep Channel #0E3B53
  • Sea Glass #7FC8B8
  • Coral #FF7F6B
  • Kelp #3F6B3A
  • Buoy Yellow #FFD23F
Fonts
  • Display: Bricolage Grotesque
  • Body: Nunito
  • Utility: DM Mono

Download this folder (1.12 MB)

The easy way

Download a demo folder, give it to Claude (drop the zip into a chat or open the folder in Claude Code) and write: make this site. Claude follows START_HERE.md.

Pinned prompt
Pinned prompt for Low Tide Lab
Use the frontend-design skill. Build this brief exactly from the design plan below. Do not change the palette, fonts,
layout or signature element.

BRIEF:
Build a one-page website for Low Tide Lab, a marine-science day camp for ages 8–12 at the North Cove field station. Three one-week sessions in July (Week 1 is full, Week 2 has 4 spots left, Week 3 has 9), $340 per week Mon–Fri, groups of 8 with two instructors, 15% sibling discount. Show what kids find at low tide (shore crab, anemone, sea star, limpet), what a typical day looks like, and what to bring. Parents should be able to reserve a week. One self-contained index.html, Google Fonts allowed, no frameworks.

DESIGN PLAN:
# Design plan — Low Tide Lab (frontend-design skill, pass 1 + critique)

**Subject:** a marine-science day camp on a rocky shore, ages 8–12. **Audience:** parents (the kids look over their shoulder).
**Single job:** get a parent to reserve a week.
**The subject's world:** tide charts, tide-pool field guides, specimen cards, rubber boots, buckets, sea glass.

## Tokens
| Role | Name | Hex |
|---|---|---|
| Background | Foam | `#EAF6F3` |
| Ink / deep water | Deep Channel | `#0E3B53` |
| Water | Sea Glass | `#7FC8B8` |
| Accent / action | Coral | `#FF7F6B` |
| Secondary | Kelp | `#3F6B3A` |
| Highlight | Buoy Yellow | `#FFD23F` |

**Type**
- Display: **Bricolage Grotesque** 800 — chunky, a bit playful, still readable for parents.
- Body: **Nunito** 400/700 — round and friendly.
- Utility: **DM Mono** — tide times, dates, specimen numbers.

## Layout
```
[ Low Tide Lab                               weeks · what we find · reserve ]
[ THE BEST CLASSROOM                                                       ]
[ DISAPPEARS TWICE A DAY.     [Reserve a week]                             ]
[ ~~~~~~~~ tide curve across the full width ~~~~~~~~                       ]
[   ▼ Week 1 low 06:12   ▼ Week 2 low 07:40   ▼ Week 3 ...   (sessions sit ]
[   in the troughs of the tide = when camp is on the rocks)                ]
[ FIELD GUIDE: specimen cards (crab, anemone, sea star, limpet) w/ numbers ]
[ A DAY AT CAMP: timeline pinned to the tide (real sequence)               ]
[ reserve card: price, what to bring (boots, bucket), CTA                  ]
```

**Signature:** the tide curve is the schedule — camp weeks sit in the low-tide troughs.

## Critique of pass 1 → revisions
- Pass 1 had a photo-style hero with a gradient overlay and a centered headline → template. **Replaced** by the tide curve.
- Pass 1 palette was navy + gold "premium" → wrong audience. **Changed** to foam / sea glass / coral, with navy only as ink.
- Pass 1 had "01 / 02 / 03" on the field-guide cards → not a sequence. **Changed** to real specimen catalogue numbers (LT-014).
- Kept the day timeline numbered by clock time, because it is a sequence.

Template FAQ

Can I use this template for client or commercial work?

Free for personal and commercial use, including client work; modify freely; attribution appreciated, not required; do not resell the templates as-is.

Read LICENSE.md

Help parents understand the week

Low Tide Lab is a summer camp website starting point for a children's day camp, a science club or an outdoor learning program. Parents need to understand what their child will do, which session fits and what to prepare. This example gives those questions separate places on one page. Its coastal science theme suits discovery-led activities, but the structure can be adapted to another subject without pretending to be a campsite or a holiday-booking platform.

Give each section a practical purpose

The session schedule uses a tide-chart idea to make the available weeks easy to scan. Field-guide cards introduce activities, and the daily timeline helps parents imagine the rhythm of a camp day. Pricing, group size and a packing list belong near the decision to reserve a week. Replace every example date, age range, availability number and program claim with information from your own operation. Any displayed places remaining are sample content unless you connect them to an actual registration system.

Build from your actual program

Start by downloading the folder and reading START_HERE.md. Give Claude your session dates, age groups, location, activities and registration link. Ask it to preserve the hierarchy in plan.md while adapting the language and visual references to your program. Review the result as a parent on a phone: can you find the right week, understand the price and see what to bring? Check that each call to action reaches the intended registration or enquiry destination.

A template with its design reasoning

The ZIP contains the HTML example, a design plan and prompts you can reuse during customization. A marketplace may offer a ready-made builder layout; this pack also lets you examine the instructions used to shape the example and discuss changes with Claude. It does not supply a working enrollment backend, payment processing or a guarantee about program safety. Add verified operational information and appropriate policies yourself. Desktop and mobile scrolling previews demonstrate the design, while the interactive source remains inside the download. Review the license and test the adapted page before inviting families to use it.

Build something for your business

Want this for your business? Tell us what you are building.

frontend-design is an Anthropic skill (see its LICENSE). Demo sites, plans, prompts and previews © AxionAI.