About
About this site
Who Shipyard is for, how to read it, the design choices, and the license.
Who this is for
You're a founder, a PM, a designer, or anyone non-technical who works near software and wants to stop nodding politely when engineers talk. Or you're someone with an idea who has decided to build it with AI coding agents instead of hiring out the whole thing.
You don't need to write code. You do need to be willing to read carefully, sit with a few diagrams, and learn vocabulary you'll then hear used in real conversations.
How to read it
- Go in order, at least the first time. Each level uses concepts from the one before. Skipping is tempting and rarely worth it.
- Don't memorize. Recognize. The goal is fluency — knowing a word when you hear it, knowing where to look. Memorizing definitions is the wrong instinct.
- Use the running project. Every concept is also demonstrated on Tasklane, our example app. When something feels abstract, look at the project page to see it on a real artifact.
- Hit the prompt library when you start using an agent. Don't just read it — open it next to a real prompt you're about to send.
- Use the checklists at the end of each level. They persist locally — your progress sticks across visits.
Design notes
Shipyard is built around a "blueprint / shipyard" metaphor: precise, technical, slightly industrial. The reader is in a working yard learning how to build seaworthy vessels.
- Type: Fraunces (display, with optical sizing) for headlines, DM Sans for body, JetBrains Mono for code and labels. Not the usual Inter/Roboto stack on purpose.
- Color: a warm-paper light theme and a deep-navy dark theme, both with a single accent (rust in light, ochre in dark). No gradients, no purple-blue blobs.
- Layout: a 12-column grid with a sticky left rail showing where you are on the 0→100 path, an in-page TOC on long pages, and a 720px reading column for body prose.
- Components: custom-built — no UI kit. Dropdowns, accordions, tabs, callouts, code blocks, command palette, all hand-tuned for keyboard, screen reader, and reduced-motion preferences.
- No JS frameworks. Vanilla HTML/CSS/JS, no build step, no bundler. The site is the source.
Keyboard
| Key | Action |
|---|---|
| ⌘ K / Ctrl K | Open the search palette |
| ↑ ↓ | Move through results |
| Enter | Open the highlighted result |
| Esc | Close any open menu or dialog |
License & sourcing
The text and code of this site are released under MIT. Tools and frameworks named are trademarks of their respective owners and are referenced descriptively, not as endorsements.
Every external claim is sourced on the References page. If you find an error or something out of date, that's worth knowing — verify against the official docs and treat anything in here as a starting point, not a final answer.
What's deliberately not here
- No live chat, no AI assistant. The whole site is static. The only "intelligence" is the writing.
- No analytics, no tracking, no cookies. Local storage is used only for theme preference and progress checklists; nothing leaves your browser.
- No newsletter. No popup. No "join 10,000 builders" claim.
- No code snippets to copy and run. We talk about code, not through it.