Build a deploy dashboard in your console
This free course has 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 & StylingStyle a deployment card with colors, text attributes and theme tokens.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
- ▼CertificateGet a certificate with your name, rendered in the console.
The course runs in your console
Open the console with ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (turn on developer features first), click below and pick a chapter with the arrow keys.
▼ learn
Open the console
⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C
The app renders in DevTools.First turn on “Show features for web developers” in Safari Settings → Advanced. Then click here and press ↓.
Open on a desktop
This app renders in the DevTools console, which needs a desktop browser.