A field guide to real code

Learn the project, not just the syntax.

Open real code, trace how it works, see what it becomes in the browser, then change one small thing at a time. Strataship turns projects into places you can explore.

Explore real projects Type the code yourself See it run in the browser
How it works

You type the code. Strataship shows you why it works.

Every project is a route of short stops through its real files. At each stop you do three things.

  1. 1
    Read the stopOne short idea, tied to one layer of the app.
  2. 2
    Type the lineIn the real file, with a hint if you get stuck.
  3. 3
    Run your copyThe live preview shows what your line did.

Explore → predict → change → explain

index.htmlstyles.cssapp.jsYour copy · the original stays safe
form.addEventListener('submit', event => {
event.preventDefault();
const input = form.elements.note;
if (!input.value.trim()) return;
notes.unshift(input.value.trim());
Stuck? A hint shows the first word. You still type the rest, and the original project never changes.
Orbital Notes, taken apartNumbers: the route's stops
Inside every project

Every app is four layers. One route runs through them.

Strataship colours each line by the layer it belongs to, so you can follow a click from the page down to the data and back.

  • StructureHTMLWhat is on the page: the form, the list, the buttons.
  • StyleCSSHow it looks: spacing, colour and layout.
  • BehaviourJavaScriptWhat happens when you click, type or send.
  • DataState & storageWhat the app remembers, and where it keeps it.
The journey

From your first tag to real apps.

15 guided projects in four chapters, all free. Each chapter is a layer of rock you climb through, and SozaCode is the bedrock if you're brand new.

15guided projects
4chapters
$0to start

The four chapters

SozaCode is the bedrock
Plans

Free to learn. Pro when you want more.

Free

Learn the whole workflow

$0forever

Free for everyone

  • All 15 guided projects
  • Code along, predict and experiment on safe copies
  • Open your own local projects

No card needed

Pro

For regular learners

$4.99/ month

or $39 a year, which saves 35%

  • Everything in Free
  • Pro project releases as they are published
  • Helps fund new guided projects

No payment now

Support Denad Labs

One membership, every app

$45/ month

Billed monthly

  • Pro in every live Denad Labs app
  • Early access to new Denad Labs builds
  • A vote on what gets built next

No payment now

Billing isn't open yet. The waitlist only asks for your email, and we'll write once, when it opens.

Before you start

New to code? Start with SozaCode.

SozaCode teaches the basics in short tracks with write-and-run exercises in JavaScript, TypeScript, Python, SQL, HTML and CSS. When the syntax clicks, come back and trace real projects here.

Open SozaCode ↗

Your first project is waiting.

Start with Quiet Landing: one file, a short route, no setup.

Charting your workspace

Mapping projects and learning paths…

Stratashiphome
Today

Welcome aboard, Explorer.

New here?

Learn the route before you change the code.

01 · Choose

Pick a project by difficulty, technology, or the concept you want to understand.

02 · Code Together

Trace the real files, predict behavior, and make controlled edits in a safe learning flow.

03 · Understand

Use source-backed explanations and the Learning Coach to explain what the project is actually doing.

04 · Ship Safely

Reason about data, trust boundaries, and what should stay out of the browser before you ship.

Free vs Pro: Free projects open directly. Pro projects show safe details first; protected files are requested only when you intentionally enter the learning workspace.

Your project

Orbital Notes

Follow a note from the form to the screen.

Where you are

Chapters are layers of rock. SozaCode is the bedrock.
Next worth exploring

Open a project

Up next

Project

Stratashippath
D
Learning path

Recommended before starting

Your route

Projects stay open; prerequisites guide rather than lock you out.

Why this comes next

Stratashipdiscover
D
Discover what you built

What Strataship found

Counts come from the selected source only. Comments and unusual syntax can affect heuristic counts.

Concepts found

Each concept includes source evidence so you can inspect the claim yourself.

Project map

A source-based route through the project, not a guessed architecture diagram.

Execution flow

Trace evidence-backed boundaries from entry files and events toward functions, state, storage, network calls, and browser output.

Functions & modules

Definitions, call sites, imports, exports, storage operations, and CSS variables found directly in the selected source.

Questions worth asking

Use these to investigate the code rather than accept the scan as the final answer.

Analysis boundary: Strataship V4.4 uses the deterministic V4.3 analyzer on only the text files you selected. It does not execute imported code to infer meaning, fetch external dependencies, inspect binary assets, understand a build tool, or prove that a detected pattern is correct or secure.
Stratashipflow
D
Dependency & data-flow explorer

Project flow

Select a detected file, function, event, module, storage boundary, or network boundary. Strataship answers relationship questions only from evidence it can point to in the selected source.

What calls this?

What does this depend on?

What changes here?

Where does output go?

Detected project route

Stratashipproject
D
Project

The route
    Taken apartNumbers: where each stop sits

    Project structure

    What you will learn

    Learning outcomes stay visible before protected source is requested.

    Architecture map

    Follow the major responsibilities and boundaries before opening source.

    Files and responsibilities

    Protected file contents stay out of the browser until access is verified.

    Learning journey

    These routes feed into the existing Code Together, Understand, Learning Coach, and Ship Safely system.

    Your understanding map

    Coverage comes from evidence-backed exploration. It is not a test score or claim of mastery.

    0%

    Learning workspace

    Strataship
    Project / index.html
    The route

      Stop

      Stop

      Live previewyour copy

      Run to see what your line does.

      Project1 file
      Evidence coverage0%
      index.html
      Strataship log
      Learn
      Strataship
      Project

      Fix it

      Stratashipdebug
      D
      Guided debugging mode

      Debug challenge

      file.jstemporary buggy fork
      Buggy fork previewRun a test to render the current fork.
      Original project untouched.
      ExperimentTemporary project fork
      Original untouched
      OriginalSource project
      ExperimentTemporary fork
      Stratashippreview
      local.strataship/preview