Ein Deployment-Dashboard in deiner Konsole bauen
Dieser kostenlose Kurs hat 10 Kapitel. Du entwickelst Acme Deploys von einer leeren Seite bis zur deployten App mit Routen, Daten und Tests. Jedes Kapitel läuft live in DevTools, während du es liest.
Fortschritt0/10
- 01Erste SchritteErstelle eine App, rendere deine erste Seite und reagiere auf einen Tastendruck.5 Min.
- 02Layout mit BoxBaue das Dashboard-Grundgerüst mit Flexbox in Zellen: eine Kopfleiste, eine Seitenleiste und Karten.7 Min.
- 03Text & GestaltungGestalte eine Deployment-Karte mit Farben, Textattributen und Theme-Tokens.6 Min.
- 04Eingabe & KeymapsNavigiere mit der Tastatur durch Deployments und füge ein Hilfe-Overlay für ? hinzu.8 Min.
- 05RoutingDie App in Routen mit gemeinsamem Layout, Links mit Tastenkürzeln und Verlauf aufteilen.8 Min.
- 06Daten & Route-HandlerStelle Deployments über app/api bereit, rufe sie in einer Seite ab und lege neue per POST an.8 Min.
- 07Table, List & DiagrammeErsetze selbst gebaute Zeilen durch eine sortierbare Table und ein Diagramm, das das Layout nie verschiebt.7 Min.
- 08TestenRendere außerhalb des Bildschirms, drücke Tasten und prüfe den Frame als Text.6 Min.
- 09Im Terminal ausführenFühre dasselbe Dashboard mit text run im Vollbild im Terminal aus.5 Min.
- 10VeröffentlichenErstelle den Build, lege Metadaten fest und deploye Acme Deploys.4 Min.
- ▼ZertifikatHol dir ein Zertifikat mit deinem Namen, in der Konsole gerendert.
Der Kurs läuft in deiner Konsole
Öffne die Konsole mit ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (zuerst Entwicklerfunktionen aktivieren), klicke unten und wähle mit den Pfeiltasten ein Kapitel.
▼ learn
Die Konsole öffnen
⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C
Die App rendert in DevTools.Aktiviere zuerst „Funktionen für Webentwickler anzeigen“ unter Safari Einstellungen → Erweitert. Klicke dann hier und drücke ↓.
Auf einem Desktop öffnen
Diese App rendert in der DevTools-Konsole, die einen Desktop-Browser benötigt.