Loopgarden is an HTML website template for kids coding academies, after-school technology studios and project-based learning programs. It helps families move from a broad interest in coding to a useful course question, with age ranges, starting experience, example projects, schedules and tuition presented together. The 26-page website includes 6 course detail pages, a guided course finder, practical family information and a complete parent inquiry demonstration.

The design puts children's projects at the center. A colorful garden world introduces the academy, while illustrated games, a physical rover and fictional workshop scenes show what making with code can look like. Rounded Fredoka headings, DM Sans body text, project-window frames and bright action buttons give the website a playful identity while keeping course choices and next steps clear for parents.

Help families choose a starting course

The course catalog covers First Code, Game Builders, Robot Lab, Web Creators, Python Explorers and Creative Code. Each course has its own project context, starting point, tools, learning sequence, weekly session details and tuition summary. Families can compare the catalog or narrow it by age, interests, coding experience and weekly routine.

The course finder handles matching results, no matches and reset behavior. A selected course and compatible preferences carry into the parent inquiry. Its step-by-step flow includes field validation, editing, review, pending feedback, completion and recovery states. The default demonstration completes locally without sending information; live inquiries connect to a buyer-owned receiving service through the documented integration boundary.

Show the work behind the classes

The project shelf introduces 3 interactive examples. Pond Patrol moves a frog through a sequence, Light Garden connects a brightness control to a visual result, and Pocket Planet changes a small world's content while preserving its structure. These pages pair the interaction with explanations of the decisions a learner could explore.

Dedicated pages for the teaching approach, studio, teaching roles, first visit and family guide give parents practical context beyond a course card. School-break camps, schedule, tuition and common questions provide further places to explain a real academy's programs and arrangements.

What is included

• 26 complete pages: homepage, course catalog, course finder, 6 course details, project shelf, 3 project details, camps, learning approach, studio, teaching team, family guide, first visit, tuition, schedule, questions, contact, parent inquiry, privacy and custom 404.
• Ready-made website and editable source: production HTML with readable and minified CSS and JavaScript, source layouts and partials, structured configuration, build tools and tests.
• Local visual assets: 11 original image roles with 4 responsive WebP sizes each, Fredoka and DM Sans WOFF2 fonts, editable brand graphics and the accompanying font licenses.
• Buyer documentation: a responsive HTML guide covering setup, course changes, images, appearance, inquiry receiving, hosting and troubleshooting.

Features

• 3 complete color schemes: Playground, Orchard and Cosmic, each with light and dark colors.
• Light, Dark and Auto appearance choices with remembered preferences.
• Responsive grouped navigation with keyboard, touch and mouse interaction.
• Course fees stored in integer cents and shared across course cards, details, tuition and schedule.
• Course and age validation, editable inquiry review and an explicit notes download.
• Separate demo and live inquiry builds with typed receipt checks and preserved retry identity.
• Useful static content and navigation when JavaScript is unavailable.

Accessibility features

Semantic landmarks, a skip link, structured headings and meaningful image alternatives support navigation and reading. Disclosure menus and project controls work with a keyboard. Form fields have associated labels and error messages, and the inquiry brings the relevant step into view before focusing an invalid field. Visible focus treatments, reduced-motion behavior and responsive layouts are included across the website.

Make the academy your own

The source uses semantic HTML, modern CSS and vanilla JavaScript. Business details, course facts, term dates, fees, media roles and appearance settings have dedicated configuration files. Narrative pages and navigation remain directly editable, so an academy can describe its own teaching approach without working through a framework or page builder. The included build and validation commands support local customization, with production, preview and buyer materials kept in separate folders.