Coding school website template: a free HTML file for a part-time school that retrains adults, with before-and-after careers, a five-module course, a weekly timetable, mentors, taster evenings and three fee plans. The look is flat colour planes in orange, plum and ice, moved by CSS scroll animation with no libraries. AGENTS.md lets Claude Code, Cursor or Codex adapt it.
Live demo · Use this template · Download ZIP · Template page on 8b.com
Scroll animation
Download the four files into your project folder (curl.exe in Windows PowerShell):
curl -LO https://raw.githubusercontent.com/8bsite/coding-school-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/coding-school-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/coding-school-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/coding-school-website-template/main/CREDITS.mdThen fill in the angle brackets and give your agent this prompt:
Read AGENTS.md, then edit index.html. Make this the site for <my school: name, city, course length and modules, weekly timetable, fees and funding, next start date, mentors, graduate stories, employer names, how people book a taster>. Motion is CSS scroll-driven animation plus the inline motion kit: keep the gate script, the section ids, the data-8b-* attributes, the classes AGENTS.md lists, four mentors, three capstones and the five i elements in each pixel glyph; add no animation library. Never invent outcomes, employers, quotes, prices, dates or contacts; ask me.
Vibe coding with Claude Code, Cursor or Codex starts with facts only the school has: course length, modules, timetable, fees, funding rules and start date. Ask the agent to replace the school name in the menu, footer and legal line, then the career rows, mentors, capstone clients and employer names. Graduate quotes, ages, outcomes and the employers in the opening band are invented; the owner supplies real ones or deletes them.
No agent? Click Use this template, edit index.html on GitHub and turn on Settings > Pages.
- Navigation: logo glyph and word, four links, an Apply now button and a Menu button; full-screen menu. Mouse-wheel scrolling is smoothed; the bar turns solid after 24 px of scroll and slides away on the way down, returning when you scroll up.
- Keep what works. Rewrite the rest.: one screen: a panel of colour planes with a photo, the h1, a paragraph, a taster button and a row of employers. On load the panel and then the heading, paragraph and button lift into place; the colour planes themselves stay still.
- Your first career isn't dead code.: six rows of old job to new job, each with what carried over. Each of the six rows is tied to scroll: the old job is struck through and greyed, the new job wipes in from the left, then the Kept line fades up.
- Twenty-four weeks. Five modules. One real product.: a pinned horizontal track of five course modules with a strip of 24 week squares that fill in. Held on a sticky stage: the five module panels slide sideways while 24 week squares fill in order and each module's planes turn level as it arrives.
- Built around the job you still have.: three fixed weekly sessions with a photo each. The heading and lead rise out of a clip, and each of the three photos settles from a tilt, once, as they near the screen.
- Mentors who made the same jump.: a sticky portrait window that changes as four mentor stories scroll past. The portrait window is sticky; as each mentor card nears the middle, the next portrait wipes in on a slant and settles from a slight zoom.
- Capstones that are still running.: three project cards that stack as you scroll. The three project cards stick near the top and stack; the card underneath tilts, shrinks to 88% and darkens as the next slides over.
- What changed, in their words.: one large quote and four shorter ones with name and former job. The heading, the lead quote and four shorter quotes rise into view, and the heading's pixel glyph assembles from scattered squares.
- Not sure yet? Sit in on a real class first.: a red disc that grows into a panel listing four taster evenings. The red panel starts as a small disc with an arrow and grows on scroll until it fills its box, then the four dates rise inside.
- One fee. Three ways to carry it.: three fee plans dealt out from one stack. The three fee cards start stacked and slightly turned on one card, then are dealt into their columns as the section scrolls up.
- Questions adults actually ask.: six questions and answers (native details) beside a sticky heading. The heading rises and its glyph assembles; the six answers open and close natively, without JavaScript.
- Book a taster, or just ask.: colour planes falling into bands behind a contact form and details. Three colour planes behind the form fall from a tilted heap into bands, and the four detail rows fade up.
- Footer: wordmark, short description, six links and the address.
Matangi: headings, module and mentor names, fee prices, the menu links and the wordmark: weight 500, uppercase, slightly tracked. Asta Sans: body text, buttons, form fields and small tracked uppercase labels: weights 400 to 600 (Google Fonts). A 1440 px column with side gutters of 20 to 64 px. Most section heads split in two: an uppercase heading on the left, a lead paragraph on the right, aligned at the bottom. Hairline rules separate the career rows, timetable slots and contact details. A five-square pixel glyph repeats in the top bar, the careers, graduates and questions headings and the footer. Below 900 px the columns stack and a Menu button replaces the links.
What shows in Firefox or with reduced motion?
The same content, at rest. Without CSS scroll-driven animations (Firefox today) or with reduced motion, the page shows its finished layout: careers already rewritten, all 24 week squares filled, the taster panel as a plain red block, fees in their columns. The course track becomes a strip you scroll sideways, and the mentors window shows only the first portrait.
Does the contact form send applications?
No. As shipped it checks the fields, shows a thank-you line and disables the button, and sends nothing. Connect Formspree, Netlify Forms or your own endpoint and remove the script that stops the submit. The Apply buttons and the Book buttons beside the taster dates only jump to the form.
Can I get a school site like this without editing code?
Yes, with a different tool. 8B's AI website builder designs a new site from a sentence, and its own design is not this template. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.
Choose this for a cohort course with fixed sessions, a fee page and a taster evening. This build looks and moves like the GSAP version with no animation library and no script from a CDN: about 42 KB of code gzipped against about 87 KB and three extra requests. For single instruments or private lessons, the lesson studio template fits better. The weak spot is booking: Apply and Book only jump to the form, and taster dates are fixed text.
- Replace what is marked
data-8b-placeholder(social preview image, favicon, phone, email, form) and the invented demo facts; AGENTS.md lists them. - The form sends nothing yet: connect it to Formspree or Netlify Forms, or remove it.
No JavaScript libraries: CSS scroll-driven animations and a small inline motion script with its own smooth wheel scrolling, 169 KB, no build step. Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), container query units, cascade layers, small/dynamic viewport units). Without scroll-driven animations (Firefox today) the scroll motion and the smooth wheel are off and each section shows its finished layout (a load-in or a loop may still play); with "reduce motion" on, the page is complete and nothing moves on its own (hover effects stay).
A GSAP build of the same page is index.gsap.html: GSAP 3.13.0, ScrollTrigger, Lenis 1.3.27 from jsDelivr, 160 KB; its scroll motion also plays in Firefox. Use one of the two files.
MIT, see LICENSE. Photos, fonts and libraries keep their own licences: CREDITS.md. More free templates: 8b.com/templates · github.com/8bsite.