Free daycare website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: mallow-house.md, data: mallow-house.json

Daycare website template: first screen on a phone

About this daycare website template

Daycare website template: one free HTML file for a day nursery, preschool or childminder, with four rooms by age, a settling-in plan, a weekly lunch menu, fees with funded hours and an open-morning booking form. Photos and price cards roll and squash on pink, yellow and lilac slabs. AGENTS.md lets Claude Code, Cursor or Codex adapt it.

At a glance, October 2026. One 89 KB index.html with its CSS and JavaScript inside, 10 sections, 21 Unsplash photos credited in CREDITS.md, Gabarito and Google Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

Nurseries, preschools, playgroups and childminders who look for a daycare website, or websites for daycares, usually need the same answers on one page: which ages, what a day costs, what the children eat and how to book a visit. Owners wanting a website for childcare or a free preschool website template get all four in order here. A forest school, art class or after-school club can cut the rooms down to its own groups.

Vibe coding with Claude Code, Cursor or Codex goes fastest when you hand the agent the facts only the setting has: ages taken, rooms and ratios, fees, funded hours, opening times, the menu week, open-morning dates and the registered name. The demo invents all of them, including the staff names, the Ofsted registration line in the footer and the funding rules. Ratios and funding differ by country, so the agent should ask rather than guess.

Choose this base when one friendly page should show rooms, fees and a route to book a visit. For daycare web design where families book sessions and parties, the indoor play venue template fits better, and a group with several sites or a parent login needs more than one page. The no-code route is the 8B builder. One weak spot: the scroll effects move many rounded photos at once, which can feel heavy on weak phones.

Good for:

Day nursery or preschoolChildminder, playgroup or after-school clubKids' activity studio, art class or forest schoolAny friendly local service that wants soft colours and playful motion

Turn the daycare website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/daycare-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/daycare-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/daycare-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/daycare-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my nursery: name, address, ages taken, rooms with ratios, fees and funded hours, opening hours, garden, settling plan, menu, open-morning dates, legal name>. Replace first the name, rooms, fees, menu, staff and the footer registration line. Keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists, and set the wordmark --len to the new name's length. Ask me for missing facts; never invent ratios, prices, funding rules, hours, staff, inspections or contacts.

In a terminal

npx degit 8bsite/daycare-website-template my-site

Daycare website design and motion

Palette

#F6EADA page ground#FDF8F1 cards: settling steps, question items, lunch days and fee plans, form fields and date pills, the floating nav bar, the round icon buttons and the menu links#4A2A1F text, focus outlines and the favicon ground#E2588B second dot of the logo mark and the low wash under the text links that fills on hover#AE9AEA lilac: the Buds room ground, the fee tray, the full-screen menu, the footer ground, the first logo dot, the plus discs in the questions, the settling step fill and the nav link pill on hover and for the section in view#7A5BD0 violet: the main buttons and the chosen Saturday pill#BFE6B0 mint: the Blooms room ground, the garden slab, the booking form, the six craft photo labels and the nut-free badge#3E9A55 declared in :root but used by no rule in the shipped page; free for a new accent#F6D167 butter yellow: the Meadow room ground, the lunch slab, the small badges and the fourth logo dot#F8C8D9 pale pink: the Shoots room ground, the making-table slab and the settling stage#FFFFFF text on violet and pink buttons, the arrow discs, the rings round the bowls and portraits, and the highlight in the inner shadows#C93A72 deep pink: the Book a visit button in the nav bar and in the menu#7B5C4F softer brown for the dish lines, the price units and the contact facts#A6D996 light green, used only for the third dot of the logo mark

Fonts

Gabarito: headings at weight 800, room and card titles and the nav wordmark at 700-800
Google Sans: body text, buttons, labels, badges and form fields, at 400 to 700

A single column of coloured slabs on a cream ground. The first screen holds the heading and four room columns of rising height (76, 84, 92 and 100 percent), each its own colour, with photo, age badge and ratio inside. Below come a six-photo craft grid, a garden slab with two photos, a four-step settling list beside a portrait stage, five lunch cards, the parents' questions, three fee cards on a lilac tray, and a booking form beside the contacts.

Everything is rounded: pill buttons, 48 px slabs and 32 px cards, round bowl photos and portraits, with soft inner shadows that make the slabs look pressed from dough. In daycare website design this keeps the heavy Gabarito headings friendly. The nav bar floats after 40 px of scrolling.

Every value of this daycare website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the daycare website page

Navigation
Top bar with the brand, four links, a Book a visit button and a menu button; full-screen menu
The bar hides when you scroll down and returns when you scroll up, floats after 40 px, and the round icon buttons squash on hover.
Four rooms, growing up together
The h1, a booking button and four rooms by age as columns of rising height
On load the heading block rises and the four coloured grounds grow from small, with each room's contents following 0.16 s apart.
The making table
A slab with the making table text and six craft photos that roll out like dough
Six photos start piled in the middle of the table, turned and shrunk, and roll out to their grid places as you scroll.
Out in all weathers
Two garden photos and a slab listing what is in the garden
The slab swells out from its lower left corner, and the small wellies photo and the badges squash down as they arrive.
Settling in, one step at a time
Four settling-in steps beside a portrait stage where the parent moves away and the key person comes close
As the four steps scroll past, the parent's portrait steps away and shrinks while the key person's comes beside the child, the dashed lines follow them and a lilac fill sweeps across the active step.
Cooked here, this morning
The week's lunch menu: five bowls that roll onto a butter-yellow slab
Each day's round bowl photo rolls in from the left edge of the slab, turning as it travels and squashing as it stops on its day.
Questions parents ask
Six parents' questions in native <details>
Each question squashes in as it arrives, and its plus turns to a cross when it opens.
Fees and funded hours
Three day patterns as price cards on a lilac tray, with a funded-hours note
The three cards start stacked as one small lump on a shrunken tray; the tray stretches and the cards slide apart and press down.
Come to an open morning
Open-morning text, a playroom photo, address and contacts beside a booking form
The photo and the form squash in as they arrive.
Mallow House
Wordmark, four columns and the copyright with the Design: 8B credit
The wordmark squashes in as it arrives.

Before you publish the daycare website site

Replace social preview image, favicon, phone number, email address and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book a visit buttons in the top bar, the menu and the rooms intro lead to #visit now; point them to your booking page, or keep them pointing to the open-morning form.
Fees and funded hours link in the rooms intro and the Ask about your hours button in the fees section lead to #fees and #visit now; point them to keep them, or point the button at your enquiry page.
Book my place button in the visit form lead to nothing is sent: the form has action="#visit" and a script shows the thank-you line now; point them to your form endpoint (Formspree, Netlify Forms) or your booking system.
gsap, ScrollTrigger and Lenis load from jsDelivr at the end of body; if the CDN fails, the page stays static and readable but page-init logs an error.
With reduced motion the scroll scenes and Lenis are off, but the bar still hides on scroll down.
The open-morning dates, the menu week and the funded-hours rules are for one place and one year and will read as out of date if left.
The squash and roll scenes move many rounded photos at once, which can feel heavy on weak phones.

Questions about this daycare website template

Is this one of the free daycare website templates I can use for a client?

Yes. It is one index.html under the MIT license, so a freelancer can build a nursery or preschool site with it at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step, and the 21 Unsplash photos and two fonts are credited in CREDITS.md.

How do I hand it to Claude Code, Cursor or Codex?

Put index.html and AGENTS.md in an empty folder using the curl lines at the start of AGENTS.md, then tell the agent to read AGENTS.md before it edits. Give it the files, not the page address, which returns only a summary. Paste the prompt from this page, filled in with your setting's facts.

Does the open-morning booking form send anything?

No. As shipped, it checks the fields, shows a thank-you line and clears itself, but sends nothing. Point it at Formspree or Netlify Forms, or at your booking system, before you publish. The three Saturday choices are fixed radio buttons, so edit their dates too.

What must I keep when I change the text?

Keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes, the garden's data-swell-origin and the classes AGENTS.md lists. The settling animation is written for four steps, and the footer wordmark needs --len set to the new name's length. Keep the header comment and the 8B meta tag. Keep the Design: 8B footer link unless the site owner asks to remove it.

Can I get a daycare site like this without editing code?

Yes, with a different tool: 8B's AI website builder designs a new site from a sentence, not this template. Designing and restyling are free. Publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT through the 8B connector.

What happens with reduced motion or without JavaScript?

With reduced motion on, the entrance animations, the scroll animations and smooth scrolling are off and the page reads in full, though the nav bar still hides as you scroll down. Without JavaScript the menu button cannot open its overlay and the form posts to the page itself, sending nothing and showing no thank-you line; the parents' questions still open.

Not a daycare website? More free templates