Setze dein deploybares Dashboard zusammen
Setze dein deploybares Dashboard zusammen
Das ist das Abschlussprojekt. Du hast KPI-Karten, ein Diagramm und ein Berichts-Layout gebaut — jetzt fügst du die Teile zu einer kompletten, deploybaren Dashboard-Seite zusammen, die du auf eine echte URL bringen könntest.
Du setzt eine vollständige Seite zusammen: einen gebrandeten Header, eine Reihe KPI-Karten, einen Diagramm-Abschnitt und eine Datentabelle — alles auf einem einzigen stimmigen Screen. Das ist das Artefakt, das du einem Stakeholder übergibst und sagst: „Hier ist das Live-Dashboard.“
Denke End-to-End. Eine deploybare App ist nicht nur hübsch; sie ist organisiert, lesbar und selbsterklärend. Wenn du diese Lektion abschließt, hast du eine portfolioreife Daten-App. Los, ausliefern.
Anweisungen
Füge einen Seitenkopf mit einem h1-App-Titel „Vertriebsanalyse“ hinzu.
Tipp: Nutze: `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">Vertriebsanalyse</h1></header>`.
Wo kommt das hin?
<!-- Setze hier dein komplettes Dashboard zusammen -->Schreib es in Zeile 11 — unter diesem Kommentar, nach dem Code, den du schon ergänzt hast.
Füge eine KPI-Zeile mit einem responsiven Grid-Container hinzu.
Füge einen Diagramm-Abschnitt mit gestylten Balken-divs in der Farbe bg-purple-500 hinzu.
Füge eine Datentabelle für die letzten Bestellungen hinzu, um das Dashboard zu vervollständigen.
Dein Code
Beschreibe, was du für diesen Schritt bauen willst, und ich schreibe den Code — klicke dann auf Übernehmen, um ihn in deinen Editor zu übertragen. Dieser Schritt: Füge einen Seitenkopf mit einem h1-App-Titel „Vertriebsanalyse“ hinzu.