Coding Bootcamp Website Template

About this coding bootcamp website template

The 19 pages you get

Home /

Headline, apply and syllabus buttons and a trust line beside the upcoming-cohorts table. Then promises, the three courses with prices from, a story band on a classroom photo, the admissions steps, the curriculum explorer, the outcomes band, bootcamp vs degree vs teaching yourself, graduate stories, four student projects and two articles, the FAQ and a taster-course call to action.

Courses /courses/

The three courses as cards, an at-a-glance comparison of price, length, timetable and where, and the full cohorts table.

Course pages /courses/…/

Full-time (12 weeks), part-time (24 weeks) and a four-week taster: price and instalments, facts, what is included, a graduate quote, that course’s start dates and an apply button that pre-selects the course.

Curriculum /curriculum/

The curriculum explorer on its own page, the four phases with each unit’s hours, the checkpoints a mentor signs off and a syllabus request.

Fees & funding /fees/

A plain fees table (full fee, deposit, monthly instalments, length), five ways to pay, the refund policy and what the fee covers.

Outcomes /outcomes/

Hiring rate, weeks to an offer, first salary and completion, a “how we count” note, where graduates went, the long graduate stories and student projects.

About /about/

The school’s story, what it will not change, the mentors (initials, no portraits), open evenings and the studio.

Admissions /admissions/

The four steps from first call to a start date, what you need and what you don’t, and the cohorts table to apply from.

Journal /journal/

A card list. Add a Markdown file and it appears here and in the sitemap.

Articles /journal/…/

Three written articles: choosing full-time or part-time, a week on the course, and what admissions look for at interview.

FAQ /faq/

Thirteen questions with a category sidebar: Admissions, Funding, During the course and After you graduate.

Apply or ask /contact/

Application and enquiry form with topic, course and cohort, filled in from any apply button, the cohorts table or the curriculum explorer.

Privacy and terms /legal/…/

A privacy notice and terms of enrolment (deposits, instalments, leaving and refunds) on a shared layout.

404 /404

Designed, with a way back to home and to the courses.

What is in the build

• A curriculum explorer: choose full-time or part-time and a start date and the week-by-week timeline redraws with real dates, school break weeks shown in place and a “you’d graduate on” line; every week opens to its topics, what you build, the hours and the milestone
• An apply button in the explorer and on every cohort row that carries the chosen cohort to the application form
• An upcoming-cohorts table with start date, format, in person or online, weeks and seats left, which turns into compact rows on phones
• Every cohort, break week and curriculum unit in src/data/cohorts.ts and src/data/curriculum.ts, with the date maths in src/lib/timeline.ts and covered by tests; a new cohort is one line
• An outcomes report with an honest “how we count” note, and graduate stories that show the job before, the role after and the weeks to hired
• Student projects drawn in HTML and CSS rather than screenshots, and comparison and fees tables that stack row by row on phones
• Real classroom photography with no faces and laptop logos retouched out; one accent colour and two fonts rebrand the whole site; Vitest and Playwright suites included

The design decision

Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 71 different worlds reading as one design system in different paint.

The world

White pages with pale grid-paper grey blocks and one near-black band, Unbounded headings over Readex Pro text, real classroom photography of pair programming and mentors at wall screens, and a single indigo accent.

The mechanic

An upcoming-cohorts table lists start dates, format and seats left with an Apply link per row; the curriculum explorer switches full-time or part-time and start date, redraws the week-by-week timeline with breaks and a graduation date, opens each week to its topics and project, and carries the chosen cohort to a pre-filled application form. Motion is one quiet reveal.

Loud channel

Imagery

Imagery. pair programming from behind, mentor at a wall screen, students at monitors, hands on laptops, sticky-note project board, computer room, dark plaster texture

Type & palette

Unbounded · Readex Pro

#ffffff #13131c #4338ca

Who it is for

Built for coding bootcamps, tech training providers and small schools that run cohort-based courses, full-time, part-time, in person or online. It suits a school that wants applicants to see the next start date, the week-by-week plan and the full price before they ever book a call, and it works for any course length or timetable by editing two data files.

Under the hood

• Astro 7 · static output, zero client framework
• Tailwind 4 · one @theme block holds the palette
• MDX content collections for the blog
• GSAP + Lenis for the scroll work, reduced-motion aware
• Self-hosted woff2 — no Google Fonts request
• Sitemap, canonicals and per-route meta wired
• Vitest + Playwright suites in the repository
• Zero third-party requests · strict CSP-ready

How to get started

1. 01 Accept the repository invite and clone it.
2. 02 Run npm install, then npm run dev.
3. 03 Replace the content in src/data/ with your own — that is where the brand, the copy and every list live.
4. 04 Swap the images in public/images/ and the palette in the @theme block.
5. 05 Run npm run build and deploy dist/ anywhere static.

Questions