Modul Pelajar

Bina Portfolio Multi-Halaman

Dalam modul ini, anda akan membina portfolio peribadi 3-5 halaman menggunakan HTML, CSS, dan AI. Hasilkan laman web yang menonjolkan bakat dan projek anda.

✓ Apa Yang Anda Akan Bina

🏠
Homepage
Hero section, intro ringkas, featured projects, dan call-to-action.
👤
About Page
Profil peribadi, kemahiran, pengalaman, dan cerita anda.
💻
Projects Page
Kad projek dengan gambar, penerangan, dan pautan.
📧
Contact Page
Borang dengan nama, email, dan mesej.
📝
Blog (Opsional)
Halaman blog dengan entri ringkas untuk showcase penulisan.
Mulakan Di Sini

Sebelum mula menulis kod, buka AI chat (Claude atau AI lain) dan minta ia hasilkan struktur folder projek. Contoh prompt: "Saya nak bina portfolio peribadi dengan 4 halaman: index.html, about.html, projects.html, contact.html. Hasilkan struktur folder kosong dan fail HTML asas untuk setiap halaman."

1 Homepage — index.html

🏠
Homepage — index.html
Ini halaman pertama yang pengunjung lihat. Ia mesti menarik perhatian dan memberitahu siapa anda serta apa yang anda buat dalam beberapa saat.

Objektif

  • Memperkenalkan diri dengan hero section yang menarik
  • Tunjukkan 2-3 projek featured (pautan ke halaman projek)
  • Call-to-action yang jelas (contoh: "Lihat Projek Saya" atau "Hubungi Saya")
  • Navigasi ke halaman lain

Elemen Utama

  • Hero — gambar/ilustrasi, tajuk besar, subtitle ringkas, butang CTA
  • Intro — 1-2 perenggan tentang diri anda
  • Featured Projects — 2-3 kad projek terbaik (pautan ke projects.html)
  • Skills ringkas — ikon atau badge kemahiran utama
  • Footer — copyright, pautan sosial

Contoh Prompt AI

Prompt untuk Homepage
"Hasilkan kod HTML dan CSS untuk homepage portfolio peribadi. Saya nak hero section dengan nama 'Ahmad Danial', subtitle 'Web Developer & Creative Designer', dan butang 'Lihat Projek Saya'. Tambah section featured projects dengan 3 kad ringkas. Guna dark theme. Pastikan responsive."
Hasil Yang Dijangka

Satu halaman utama dengan hero section yang memukau, beberapa kad projek featured, dan footer. Layout yang bersih dan navigasi yang jelas. Halaman boleh discroll dan kandungan tersusun rapi.

2 About Page — about.html

👤
About — about.html
Halaman ini menceritakan kisah anda: latar belakang, kemahiran, dan personaliti. Ia membantu pengunjung mengenali anda dengan lebih dekat.

Objektif

  • Kongsi cerita peribadi dan latar belakang
  • Tunjukkan senarai kemahiran dengan tahap penguasaan
  • Menyampaikan personaliti dan nilai anda

Elemen Utama

  • Profil — gambar/profile photo, bio ringkas
  • Kemahiran — senarai skill dengan progress bar atau badge
  • Pengalaman / Pendidikan — timeline ringkas
  • Minat — apa yang anda suka buat di luar kerja

Contoh Prompt AI

Prompt untuk About Page
"Hasilkan about page untuk portfolio peribadi. Saya nak ada gambar profil (guna placeholder), bio ringkas, senarai kemahiran dengan progress bar (HTML, CSS, JavaScript, Python, Design), dan timeline pengalaman. Guna dark theme yang sama dengan homepage. Responsif."
Hasil Yang Dijangka

Halaman yang informatif dengan reka bentuk yang bersih. Progress bar kemahiran menunjukkan tahap penguasaan. Timeline pengalaman tersusun dengan tarikh yang jelas. Personaliti anda menonjol melalui penulisan bio.

3 Projects Page — projects.html

💻
Projects — projects.html
Halaman showcase yang memaparkan projek-projek anda dalam bentuk kad yang menarik. Ini adalah bukti kemahiran dan pengalaman sebenar anda.

Objektif

  • Paparkan 4-6 projek dalam bentuk kad grid
  • Setiap kad: gambar, tajuk, penerangan ringkas, pautan
  • Gunakan semula komponen kad yang sama untuk setiap projek

Elemen Utama

  • Grid Projek — susunan kad dalam grid (3 kolum desktop, 1 kolum mobile)
  • Kad Projek — gambar, tajuk, penerangan, tag teknologi, pautan
  • Filter (opsional) — butang untuk tapis mengikut kategori

Contoh Prompt AI

Prompt untuk Projects Page
"Hasilkan kod HTML dan CSS untuk halaman projek portfolio dengan grid 3 kolum. Setiap kad projek ada gambar placeholder, tajuk projek, penerangan ringkas, tag teknologi (contoh: HTML, CSS, JS), dan pautan 'Lihat Projek'. Guna dark theme, responsive. 6 projek sample."
Hasil Yang Dijangka

Grid projek yang tersusun dengan kad yang konsisten. Setiap kad menampilkan gambar, tajuk, dan pautan. Layout berubah mengikut saiz skrin: 3 kolum di desktop, 2 di tablet, 1 di telefon.

4 Contact Page — contact.html

📧
Contact — contact.html
Halaman yang membolehkan pengunjung menghubungi anda melalui borang. Ini adalah jambatan antara portfolio anda dengan peluang sebenar.

Objektif

  • Bina borang yang lengkap dan mudah digunakan
  • Validation asas pada input (required fields, format email)
  • Tunjukkan maklumat hubungi lain (email, sosial media)

Elemen Utama

  • Borang — nama, email, subjek, mesej, butang hantar
  • Info Hubungi — alamat email, telefon, pautan sosial
  • Peta / Lokasi (opsional) — embedded map

Contoh Prompt AI

Prompt untuk Contact Page
"Hasilkan kod HTML dan CSS untuk halaman contact portfolio. Saya nak borang dengan ruangan nama, email, subjek, dan mesej (textarea). Semua field wajib diisi. Tambah section info hubungi di sebelah borang. Guna dark theme, responsive. Pastikan styling consistent dengan halaman lain."
Hasil Yang Dijangka

Borang yang berfungsi dan mesra pengguna. Setiap input ada label yang jelas. Mesej ralat muncul jika field tidak diisi. Layout borang + info hubungi bersebelahan di desktop, bertindan di mobile.

5 Blog Page (Opsional) — blog.html

📝
Blog — blog.html
Halaman blog untuk berkongsi penulisan, tutorial, atau pemikiran anda. Menunjukkan kemahiran komunikasi dan pemikiran kritikal.

Objektif

  • Paparkan 3-5 entri blog dalam bentuk kad
  • Setiap entri: tajuk, tarikh, petikan ringkas, pautan "Baca Lagi"
  • Gunakan semula komponen kad yang sama (atau serupa) dengan projek

Contoh Prompt

Prompt untuk Blog Page
"Hasilkan halaman blog untuk portfolio dengan 3 entri sample: 'Pengalaman Pertama Membina Website', 'Tips Belajar Coding untuk Pemula', 'Apa Itu Responsive Design?'. Setiap entri guna kad dengan gambar placeholder, tajuk, tarikh, petikan, dan pautan 'Baca Lagi'. Dark theme, responsive."

★ Konsep Penting

1. Komponen Boleh Guna Semula — "Bina Sekali, Guna Banyak Kali"

Ini adalah konsep paling penting dalam fasa ini. Daripada menulis semula kod yang sama berulang kali, kita buat komponen satu kali dan gunakannya di semua halaman.

🎨
Navbar
Buat sekali, copy-paste ke semua halaman. Hanya ubah kelas 'active' pada pautan yang sepadan dengan halaman semasa.
📍
Footer
Sama di semua halaman. Buat sekali, letak di semua fail HTML. Konsisten dan mudah diurus.
📅
Project Card
Struktur HTML yang sama untuk setiap projek. Cuma tukar gambar, tajuk, dan penerangan. CSS dikongsi.
Kenapa Ini Penting?

Jika anda nak tukar warna navbar, anda cuma perlu ubah CSS satu tempat dan semua halaman akan berubah secara automatik. Ini dipanggil separation of concerns — asas kepada pembangunan web yang profesional.

2. Navigasi & Pautan Antara Halaman

Untuk menghubungkan halaman, guna pautan relatif dalam tag <a>:

<!-- Pautan ke halaman lain dalam folder yang sama --> <a href="about.html">Tentang Saya</a> <a href="projects.html">Projek</a> <a href="contact.html">Hubungi</a> <!-- Pautan ke halaman utama --> <a href="index.html">Laman Utama</a>

Pastikan setiap halaman ada navigasi yang sama. Cara paling mudah: salin kod navbar dari satu halaman ke halaman lain, dan ubah kelas "active" pada item yang sepadan.

<!-- Dalam index.html, "Home" adalah aktif --> <a href="index.html" class="active">Home</a> <a href="about.html">About</a> <!-- Dalam about.html, "About" adalah aktif --> <a href="index.html">Home</a> <a href="about.html" class="active">About</a>

3. Responsive Design dengan AI

Guna AI untuk memastikan portfolio anda cantik di semua peranti. Contoh prompt:

Prompt untuk Responsive
"Saya ada kod portfolio yang berfungsi di desktop. Boleh tak tambah media queries supaya ia responsive di tablet (768px) dan telefon (480px)? Grid projek perlu 1 kolum di telefon, 2 di tablet, 3 di desktop. Navbar perlu jadi hamburger menu di mobile."
Tip Penting

Jangan lupa tambah viewport meta tag dalam <head> setiap halaman: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Tanpa ini, laman web anda akan nampak kecil dan pecah di telefon.

4. CSS Dikongsi Semua Halaman

Daripada letak CSS dalam setiap fail HTML, buat satu fail style.css dan pautkan ke semua halaman:

<!-- Dalam setiap fail HTML, dalam --> <link rel="stylesheet" href="style.css">

Ini bermakna:

☐ Checklist Portfolio

Tandakan apabila anda selesai setiap tugasan:

☁ Tips & Trik

💬
Guna Prompt Spesifik
Lebih spesifik prompt anda, lebih baik hasil AI. Contoh: "kad projek dengan gambar bulat, bayang, dan hover effect" lebih baik dari "buat kad cantik".
🔃
Iterasi & Ubah Suai
Jangan terima hasil pertama AI. Minta ia ubah: "Tukar warna navbar kepada biru", "Jadikan gambar lebih besar", "Tambah animasi fade-in".
💾
Copy-Paste Bijak
Jika AI hasilkan kod untuk satu komponen, simpan dalam fail berasingan sebagai rujukan. Boleh guna semula untuk projek akan datang.
🎯
Minta Ulasan
Minta AI semak kod anda: "Semak kod portfolio saya. Apa yang boleh diperbaiki? Adakah ia responsive? Ada isu aksesibiliti?"
Peringatan

Portfolio ini adalah representasi digital diri anda. Luangkan masa untuk memastikan ia menepati citarasa dan personaliti anda. Jangan sekadar guna template — ubah suai, warnakan, dan jadikan ia milik anda. Majikan dan klien potensial akan menilai anda melalui portfolio ini.