I built a multi-platform tutorial site as a beginner (no frameworks, plain HTML/CSS/JS)

I've been learning web dev for a while, and last week I finally built something real — a tech tutorial site called NeoLearn.

Here's what I learned and why I built it the way I did.

The problem

Most tech tutorials assume you're on a specific OS. You find a guide that says sudo apt install, and you're on Windows. Or the tutorial shows brew install and you're on Android via Termux. Half the commands don't work, and you have to figure out the equivalents yourself.

I wanted to fix that.

The idea

Every tutorial on NeoLearn has different steps for each platform. You tap your platform at the top (Linux, Android, Mac, Windows, iOS) and the tutorial re-renders with the right commands. Same content, different instructions.

You can also change platforms mid-tutorial. If you're on Android but the tutorial has a better path for Linux, tap Linux and it swaps live.

What I built it with

Plain HTML, CSS, and JavaScript. No frameworks. No build step. No npm.

Four files total:

· index.html — structure
· style.css — the cyberpunk neon design
· tutorials.js — all tutorial data (just JavaScript objects)
· app.js — the rendering logic

I know "you should use React" is the default advice, but for a content site with a small team (me), this is genuinely the right call. Zero dependencies means zero maintenance. Cloudflare Pages hosts it free, and every commit auto-deploys.

How the data works

Every tutorial is one object:

{
  id: "wireguard",
  title: "Set Up Your Own VPN (WireGuard)",
  category: "Networking",
  difficulty: "intermediate",
  time: "30 min",
  intro: "WireGuard is a modern VPN protocol...",
  platforms: ["linux", "android", "mac", "windows", "ios"],
  steps: {
    linux: [
      { title: "Install", text: "Debian/Ubuntu:", code: "sudo apt install wireguard -y" },
      { title: "Generate keys", text: "...", code: "wg genkey | tee private.key" }
    ],
    android: [
      { title: "Install app", text: "From Play Store or F-Droid." }
    ]
  },
  repo: { url: "https://www.wireguard.com/quickstart/", label: "WireGuard" }
}

Add one object → the site auto-builds the card AND the detail page. No HTML edits, no routing config.

Features that ended up being worth it

· Fuzzy search — misspell "javasript", it still finds JavaScript. Handles abbreviations too (js → JavaScript, py → Python).
· Favorites — saved in localStorage
· Progress tracking — check off steps per platform, saved per user
· Share links — every tutorial gets a URL like /#wireguard
· Platform switching mid-tutorial — swap commands live
· Copy button on every code block

All without a backend.

Things I got wrong (and how I fixed them)

1. First version was one giant file. When it got big, one syntax error broke the whole site silently. Split into tutorials.js (data) and app.js (logic). Much better.
2. Capital I in Index.html. Cost me two hours on Cloudflare Pages. Case matters.
3. OG image was landscape. Facebook square-crops previews, so half the text got cut off. Made it square.
4. Built too much before sharing. Nobody saw the site for 3 days because I kept adding features. That was a mistake.

What I'd tell other beginners

· Ship before it's perfect. A live site with 10 tutorials beats a perfect site with 100 that nobody has visited.
· Don't skip localStorage. It's the easiest way to add "real" features without a backend.
· Case sensitivity will get you. index.html ≠ Index.html.
· Free hosting is genuinely free. Cloudflare Pages, Netlify, GitHub Pages — pick any.

Try it

Live site: neolearn-a09.pages.dev
GitHub: github.com/pixle-ui/neolearn

It has 42 tutorials now — AI, Termux, Linux, security, coding, networking. Feedback welcome, and if there's a tutorial you wish existed, tell me and I'll add it.

Thanks for reading 🙏