Learn Text.js
Build a deploy dashboard in your console
A free course in 10 chapters. You'll build Acme Deploys from an empty page to a deployed app with routes, data and tests. Each chapter runs live in DevTools as you read it.
Progress0/10
- 01Getting StartedCreate an app, render your first page and respond to a key.5 min
- 02Layout with BoxBuild the dashboard shell with Flexbox in cells: a top bar, a sidebar and cards.7 min
- 03Text & StylingColors, attributes and theme tokens for a deployment card with live status.6 min
- 04Input & KeymapsNavigate deployments with the keyboard and add a ? help overlay.8 min
- 05RoutingSplit the app into routes with a shared layout, links with shortcuts and history.8 min
- 06Data & Route HandlersServe deployments from app/api, fetch them in a page and post new ones.8 min
- 07Table, List & ChartsReplace hand-rolled rows with a sortable Table and a chart that never shifts the layout.7 min
- 08TestingRender offscreen, press keys and assert on the frame as text.6 min
- 09Running in a TerminalRun the same dashboard full-screen in a terminal with text run.5 min
- 10ShippingBuild, set metadata and deploy Acme Deploys.4 min
- ▼CertificateA certificate with your name, rendered in the console.
The course runs in your console
Open DevTools with ⌘⌥JCtrl+Shift+J, click below and pick a chapter with the arrow keys.
▼ learn
Open the console
⌘⌥J
CtrlShiftJ
The app renders in DevTools. Then click here and press ↓.
↑↓chaptersEnteropen
Open on a desktop
This demo renders in the Chrome DevTools console, which needs a desktop browser.