Before
A typical clinic template: a phone number, a stock hero and a “request appointment” form that goes to an inbox.
Dental clinic website with real online booking
Larchmere Dental — a family clinic site with a four-step booking flow, live open/closed status, an insurance share estimator and calendar export, in about 11.7 KB of gzipped code.
Live demo
Click through the working build — every form, filter and calculator runs in your browser.
Guide: Dental Clinic Websites: What to Include and How Online Booking Works
Industry
Healthcare
Services
Website & Software Development
Delivery record
Showcase build · live demo
Project overview
Larchmere Dental is a fictional family and cosmetic clinic we built as a showcase for healthcare practices. The brief we set ourselves: answer the three questions patients actually call about — are you open, what will it cost, and can I get in this week — without a phone call. The site does all three on one calm, readable page.
Client context
- Industry: Healthcare / dental
- Client size / environment: Single-location clinic — showcase build, fictional brand
- Primary stakeholders: Front desk, dentists, patients booking from a phone
Challenge
Clinic sites tend to be either generic templates or heavy booking plug-ins that load slowly and look nothing like the practice. We wanted a site that feels like a real neighbourhood clinic, works one-handed on a phone, and still has a proper booking flow with validation — with no third-party scripts.
Scope delivered
Four-step booking: visit type, day and time, patient details with validation, confirmation with a downloadable calendar (.ics) file
Live “open now / opens at” badge computed from the clinic hours, with today highlighted in the hours table
Insurance share estimator — pick a treatment and coverage percentage, see the patient portion
Filterable services grid (family, cosmetic, urgent), first-visit steps, team and FAQ accordion
Transparent fee table, accessibility details and an inline SVG map (no map API, no tracking)
Self-hosted fonts and a strict Content-Security-Policy-compatible build
Before / after
After
Patients see whether the clinic is open, what a visit costs, their likely share after insurance, and book a real time slot — then add it to their calendar. About 11.7 KB of gzipped HTML, CSS and JavaScript.
Visual evidence
Delivery timeline
Phase 1
Phase 1: Content structure, typography and photography around real patient questions
Phase 2
Phase 2: Booking flow, hours logic, estimator and filters
Phase 3
Phase 3: Mobile pass, accessibility, automated QA and screenshots
Outcome
A clinic website that removes the most common phone calls and gives patients a booking experience that feels built for the practice. The booking step is ready to connect to a practice-management system or a simple secure API.
Technology stack
HTML5, CSS Grid/Flexbox, vanilla JavaScript, self-hosted variable fonts, WebP images, Playwright automated browser QA.