Persönliche Finanz-Dashboard-Schnittstelle

? Erklärung des Personal Finance Dashboard-Projekts für eine Mittelstufe

Dieses Projekt bietet eine praktische Einführung in die Strukturierung, Gestaltung und Verbesserung einer realen Benutzeroberfläche mithilfe von HTML und CSS. Es bietet eine Grundlage für komplexere Webanwendungen und bereitet die Lernenden auf die Integration von JavaScript und responsiven Designkonzepten vor.

Lassen Sie uns das Projekt in Schlüsselkonzepte, Abschnitte und verwendete Techniken unterteilen.

---

?️ Projektübersicht

Zweck:

Das Persönliche Finanz-Dashboard dient zur Anzeige von Finanzdaten wie Kontostand, letzten Transaktionen und Budgetübersichten. Dieses Projekt hilft Lernenden zu verstehen, wie sie mithilfe fortgeschrittener CSS-Techniken wie Flexbox und Grid strukturierte und gestaltete Schnittstellen erstellen.

Schlüsselkomponenten:

1. Seitenleistennavigation
2. Hauptinhaltsbereich (Übersichtskarten und Transaktionstabelle)
3. Kopf- und Fußzeile

---

? HTML-Aufschlüsselung (index.html)

? 1. HTML-Struktur

Die Seite ist in verschiedene semantische Abschnitte unterteilt:

• Seitenleiste (
  ): Enthält Navigationslinks.
• Hauptinhalt (
• Kopfzeile (
  ): Zeigt den Seitentitel und ein Profilsymbol an.
• Fußzeile (): Enthält Copyright-Informationen.

Eingeführte Konzepte:

1. Semantisches HTML:

   • Navigation, Kopfzeile, Abschnitt, Fußzeile: Sorgen für bessere Lesbarkeit und SEO-Vorteile.

2. Listennavigation:

   • für ungeordnete Listen.
   • Tags für anklickbare Links.

3. Styling-Kurse:

   • Elementen werden Klassen wie Seitenleiste, Hauptinhalt und Profilsymbol zugewiesen, um sie in CSS zu formatieren.

---

? CSS-Aufschlüsselung (styles.css)

? 1. Allgemeiner Reset

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  color: #333;
}

• Zweck: Legt Standardschriftart, Rand, Abstand und Hintergrundfarbe fest, um ein einheitliches Design in allen Browsern sicherzustellen.

---

? 2. Dashboard-Layout mit Flexbox

.dashboard-container {
  display: flex;
  min-height: 100vh;
}

• Erklärung:
  • display: flex: Macht den Hauptcontainer zu einem Flex-Container, sodass die Seitenleiste und der Hauptinhalt nebeneinander angezeigt werden können.
  • min-height: 100vh: Stellt sicher, dass das Dashboard die volle Höhe des Ansichtsfensters einnimmt.

---

? 3. Seitenleisten-Styling

.sidebar {
  background-color: #2a3f54;
  color: white;
  padding: 20px;
  width: 250px;
}

.sidebar a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.sidebar a:hover {
  color: #1abc9c;
}

• Schlüsselkonzepte:
  • Hintergrundfarbe: Legt ein dunkles Thema für die Seitenleiste fest.
  • Links: Stilisiert mit einem Hover-Effekt und einem Übergang für einen sanften Farbwechsel.

---

? 4. Hauptinhalt und Header

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.profile-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

• Flexbox für Header:

  • justify-content: space-between: Positioniert den Titel links und das Profilsymbol rechts.
  • align-items: center: Richtet die Elemente vertikal aus.

• Abgerundetes Bild:

  • Randradius: 50 % macht das Profilsymbol kreisförmig.

---

? 5. Übersichtskarten

.overview-cards {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.card {
  background-color: #1abc9c;
  color: white;
  padding: 20px;
  border-radius: 10px;
  flex: 1;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

• Flexbox-Layout:

  • display: flex ordnet die Karten horizontal an.
  • Lücke: 20 Pixel schaffen Abstand zwischen den Karten.
  • Flex: 1 sorgt dafür, dass die Karten gleichmäßig verteilt werden.

• Styling-Techniken:

  • Hintergrundfarbe für visuelle Attraktivität.
  • Box Shadow verleiht den Karten Tiefe.

---

? 6. Transaktionstabelle

.transactions table {
  width: 100%;
  border-collapse: collapse;
}

.transactions th, .transactions td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.transactions th {
  background-color: #2a3f54;
  color: white;
}

• Tischgestaltung:
  • border-collapse: Durch Zusammenklappen wird der Abstand zwischen Tabellenrändern entfernt.
  • Konsistente Polsterung und Ränder für Zellen.
  • Kopfzeile (th) mit dunklem Hintergrund für Kontrast gestaltet.

---

? Konzepte gelehrt

1. Semantisches HTML:
   
   Verbessert die Lesbarkeit und Struktur.

2. Flexbox:
   
   Vereinfacht das Layout-Design und erleichtert die Erstellung reaktionsfähiger Schnittstellen.

3. Navigationsmenüs:
   
   So strukturieren und gestalten Sie Seitenleisten mit Links.

4. Karten und Tafeln:
   
   Erstellen optisch ansprechender und wiederverwendbarer Komponenten.

5. Tabellen:
   
   Daten strukturiert formatieren.

6. Hover-Effekte und Übergänge:
   
   Hinzufügen von Interaktivität zu Navigationslinks.

Projekt auf GitHub anzeigen