I built a free wellness calculator site with 19 tools and 33 articles — here's the tech stack and what I learned

#javascript #webdev #beginners #github

I've been building MyWellnessCalc — a free wellness tool site — for the past few months. No frameworks, no CMS, just vanilla HTML/CSS/JS deployed on GitHub Pages. Here's how it's built and what I've learned.

The stack

Frontend: Vanilla HTML, CSS, JavaScript — no React, no build step
Hosting: GitHub Pages (free, HTTPS out of the box)
Components: Shared header/footer loaded via JS fetch — keeps things DRY without a framework
Analytics: GA4
Monetisation: Google AdSense (pending approval)

What the site does

19 free health calculators covering fitness, nutrition, body composition, and lifestyle — Zone 2 heart rate, MAF, active recovery, protein, intermittent fasting, sleep cycles, BMI, TDEE, and more. Each tool comes with explanation content and FAQ, not just a number.

No signup. No paywall.

The JS fetch component pattern

Instead of duplicating header/footer HTML across 50+ pages, I load them dynamically:

fetch('/assets/partials/header.html')
  .then(r => r.text())
  .then(html => {
    document.getElementById('header-placeholder').innerHTML = html;
  });

Simple, no dependencies. Works fine for a static site at this scale.

What I learned

Content matters more than code. The calculators took time to build, but the explanatory guides alongside each tool are what keep people on the page. People don't just want a number — they want to understand what it means.

Schema markup and llms.txt are worth adding early. I added structured data to all pages and created an llms.txt file so AI search engines can index the tools properly.

Internal linking between tools and articles compounds over time. Each calculator links to related blog posts, and each post links back to the relevant tool.