Antara Muka Papan Pemuka Kewangan Peribadi

? Menjelaskan Projek Papan Pemuka Kewangan Peribadi untuk Kelas Pertengahan

Projek ini menawarkan pengenalan praktikal kepada penstrukturan, penggayaan dan meningkatkan antara muka dunia sebenar menggunakan HTML dan CSS. Ia menyediakan asas untuk aplikasi web yang lebih kompleks dan menyediakan pelajar untuk menyepadukan JavaScript dan konsep reka bentuk responsif.

Mari kita pecahkan projek kepada konsep utama, bahagian dan teknik yang digunakan.

---

?️ Gambaran Keseluruhan Projek

Tujuan:

Papan Pemuka Kewangan Peribadi direka bentuk untuk memaparkan data kewangan seperti baki akaun, urus niaga terkini dan gambaran keseluruhan belanjawan. Projek ini membantu pelajar memahami cara mencipta antara muka berstruktur dan gaya menggunakan teknik CSS lanjutan seperti Flexbox dan Grid.

Komponen Utama:

1. Navigasi Bar Sisi
2. Kawasan Kandungan Utama (Kad Gambaran Keseluruhan dan Jadual Transaksi)
3. Pengepala dan Pengaki

---

? Pecahan HTML (index.html)

? 1. Struktur HTML

Halaman ini dibahagikan kepada bahagian semantik yang berbeza:

• Bar sisi (
  ): Mengandungi pautan navigasi.
• Kandungan Utama (
• Pengepala (): Memaparkan tajuk halaman dan ikon profil.
• Footer (
  ): Mengandungi maklumat hak cipta.

Konsep Diperkenalkan:

1. HTML Semantik:

   • nav, pengepala, bahagian, pengaki: Menyediakan kebolehbacaan yang lebih baik dan faedah SEO.

2. Navigasi Senarai:

   • untuk senarai tidak tersusun.
   • tag untuk pautan boleh klik.

3. Kelas untuk Penggayaan:

   • Elemen diberikan kelas seperti bar sisi, kandungan utama dan ikon profil untuk menggayakannya dalam CSS.

---

? Pecahan CSS (styles.css)

? 1. Tetapan Semula Umum

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

• Tujuan: Tetapkan fon lalai, jidar, padding dan warna latar belakang untuk memastikan penggayaan yang konsisten merentas penyemak imbas.

---

? 2. Reka Letak Papan Pemuka dengan Flexbox

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

• Penjelasan:
  • paparan: flex: Menjadikan bekas utama sebagai bekas fleksibel, membenarkan bar sisi dan kandungan utama duduk bersebelahan.
  • ketinggian min: 100vh: Memastikan papan pemuka mengambil ketinggian penuh port pandangan.

---

? 3. Penggayaan Bar Sisi

.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;
}

• Konsep Utama:
  • Warna Latar Belakang: Menetapkan tema gelap untuk bar sisi.
  • Pautan: Digayakan dengan kesan tuding menggunakan peralihan untuk perubahan warna yang licin.

---

? 4. Kandungan Utama dan Tajuk

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 untuk Pengepala:

  • justify-content: space-between: Letakkan tajuk di sebelah kiri dan ikon profil di sebelah kanan.
  • align-item: tengah: Menjajarkan item secara menegak.

• Imej Bulat:

  • jejari sempadan: 50% menjadikan ikon profil membulat.

---

? 5. Kad Gambaran Keseluruhan

.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);
}

• Susun Letak Flexbox:

  • paparan: flex menyusun kad secara mendatar.
  • jurang: 20px mewujudkan jarak antara kad.
  • flex: 1 memastikan kad diagihkan sama rata.

• Teknik Penggayaan:

  • Warna Latar Belakang untuk daya tarikan visual.
  • Bayang Kotak menambah kedalaman pada kad.

---

? 6. Jadual Transaksi

.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;
}

• Penggayaan Jadual:
  • runtuh sempadan: runtuh membuang jarak antara sempadan jadual.
  • Pelapik dan sempadan yang konsisten untuk sel.
  • Baris pengepala (th) digayakan dengan latar belakang gelap untuk kontras.

---

? Konsep yang Diajar

1. HTML Semantik:
   
   Meningkatkan kebolehbacaan dan struktur.

2. Flexbox:
   
   Memudahkan reka bentuk reka letak, menjadikannya lebih mudah untuk membuat antara muka responsif.

3. Menu Navigasi:
   
   Cara menstruktur dan menggayakan bar sisi dengan pautan.

4. Kad dan Panel:
   
   Mencipta komponen yang menarik secara visual dan boleh digunakan semula.

5. Jadual:
   
   Memformat data secara berstruktur.

6. Kesan Tuding dan Peralihan:
   
   Menambahkan interaktiviti pada pautan navigasi.

Lihat Projek di GitHub