Network Security Edu - Gamified Security Learning

A free, gamified course in computer and network security, 20 modules across 5 chapters, three difficulty tracks, hands-on mini-games, no signup, runs entirely in your browser.

Comment

Inspiration

Security learning splits into two unfortunate camps: dense textbooks and 90-minute lectures that learners bounce off, or CTF platforms that drop you in with no scaffolding. I wanted something in the middle, a self-paced course with the rigor of a university class and the engagement loop of a game. Free, no signup, opinionated about what actually matters.

What it does

Twenty modules across five chapters (Foundations, Cryptography, Authentication & Access, Network Security, Attacks & Defenses), each available in three difficulty tracks. Every module ends with a self-check quiz. Three hands-on mini-games turn the concepts into reflexes:

  • Phishing Detector: ten mock emails, decide phish vs. legit, get a debrief with the cues you should have spotted.
  • Cipher Cracker: five rounds of Caesar-shift ciphertext with a live shift slider.
  • Password Strength: four rounds of rising entropy targets you have to beat against a timer, with a live crack-time estimate.

XP, levels, badges, and streaks track progress. Everything lives in the browser's localStorage and is exportable as a JSON file, so a single user can hop between devices without an account.

How I built it

Vanilla HTML, CSS, and ES-module JavaScript. No framework, no build step, no backend, no tracking.

  • Reusable UI as Web Components (<site-nav>, <site-footer>) in light DOM so existing CSS still applies.
  • All content (modules manifest, quizzes, glossary, badges) lives in JSON files so I can grow content without editing layouts.
  • Theming via CSS custom properties with a dual dark/light toggle that respects prefers-color-scheme and persists across pages.
  • Progress engine is a small versioned localStorage wrapper with subscribe/notify, plus explicit JSON import/export.
  • Hosted straight from main on GitHub Pages, push, refresh, done.

Challenges I ran into

  • Designing a progress system without a backend. Solved with a schema-versioned localStorage wrapper and an export/import button so a wipe isn't catastrophic.
  • Building reusable layout components without pulling in a framework. Web Components in light DOM turned out to be enough.
  • Writing 20 substantive modules and 20 quizzes that stay accurate, plain-language, and consistent in voice across topics as different as elliptic-curve crypto and incident response.
  • Keeping the gamification visible enough to motivate a casual learner without being annoying for a serious one, the rule I landed on: XP and badges are present on every page but always skippable.

What I learned

  • Web Components are genuinely enough for a small-to-medium site if you stay disciplined.
  • An accountless progress system is mostly a JSON schema plus an export button. Everything else is UX polish.
  • Writing accurate beginner content is harder than writing accurate advanced content. Plain language without hand-waving is its own skill.

What's next

  • Intermediate and Advanced track module bodies (the manifest is already wired for them).
  • Three more games from the roadmap: Packet Inspector, Firewall Rules, and Hash Match.
  • A guided "learning path" mode that suggests the next thing to do based on what you've already completed.

Built With

  • css3-(custom-properties
  • flexbox)
  • github
  • google-fonts-(inter
  • grid
  • html5
  • javascript-(es-modules)
  • jetbrains-mono)
  • json
  • localstorage
  • svg
  • web-components-(custom-elements)
Share this project:

Updates

Submission history