Proyek Akhir: Portofolio Mini
Menggabungkan semua yang dipelajari menjadi website portofolio pribadi yang lengkap.
Proyek Akhir: Buktikan Kemampuanmu
Ini puncak dari track Praktik Web Terpadu. Kamu membangun website portofolio pribadi yang menggabungkan belasan pola dari modul-modul sebelumnya: navbar responsif, hero, dark mode, tabs, timeline, form kontak dengan validasi, dan back-to-top.
Struktur yang Dibangun
- Navbar responsif dengan hamburger + smooth scroll ke section.
- Hero section dengan headline dan CTA.
- Tentang saya singkat dengan foto.
- Skills sebagai bar progress animasi.
- Proyek dalam grid kartu dengan filter kategori.
- Timeline pengalaman/perjalanan belajar.
- Kontak dengan form validasi.
- Footer lengkap + tombol back-to-top + dark mode toggle.
Cara Mengerjakan
Jangan mencontek playground modul ini (tidak ada). Buka kembali modul-modul sebelumnya, salin pola yang kamu butuhkan, dan sesuaikan dengan identitasmu sendiri: nama, foto, proyek, dan warna favoritmu.
Kerjakan bertahap: satu section per hari. Setiap section selesai, test di HP dan laptop.
Kriteria Penilaian AI Tutor
Kirimkan tiga file (index.html, styles.css, index.js). AI tutor akan menilai: kelengkapan section, responsivitas, validasi form, tidak ada error console, dan kreativitas personalisasi.
Setelah Selesai
Deploy gratis ke GitHub Pages atau Netlify Drop, lalu cantumkan link-nya di CV dan profil media sosialmu. Portofolio live adalah bukti kemampuan yang jauh lebih kuat dari sekadar sertifikat.
Tantangan
Tantangan: Bahasa Ganda
Tambahkan toggle bahasa Indonesia/Inggris di portofoliomu: semua teks memakai atribut data-id dan data-en, JS menukar textContent saat toggle diklik.
Tugas
Tugas Akhir: Website Portofolio Pribadi
Bangun website portofolio pribadi lengkap dari nol (tanpa mencontek kode jadi): navbar responsif + hero + tentang + skills + proyek dengan filter + timeline + form kontak bervalidasi + footer + dark mode + back-to-top. Deploy ke GitHub Pages/Netlify dan sertakan URL live. Kirim ketiga file kode untuk dinilai AI tutor.
Kriteria penilaian:
- Minimal 8 section: navbar, hero, tentang, skills, proyek, timeline, kontak, footer
- Responsif penuh: rapi di HP (375px) dan laptop, ada hamburger menu
- Form kontak dengan validasi real-time dan pesan error yang jelas
- Dark mode toggle yang tersimpan di localStorage
- Tidak ada error di console browser
- Ada URL live (GitHub Pages/Netlify) yang bisa dibuka
AI tutor akan memeriksa bug, kesalahan syntax, dan memberi saran perbaikan.
Kuis Bab
Uji pemahamanmu: Game, Musik & Proyek
Jawab 5 soal berikut, lalu tekan "Periksa Jawaban".
1.Bagaimana cara mendapatkan angka acak 1 sampai 100 di JavaScript?
2.Trik object apa yang menyederhanakan logika menang batu-gunting-kertas?
3.Fungsi array apa yang dipakai untuk menghitung total item keranjang dari array?
4.Kenapa angka rahasia game tebak angka harus dibuat di luar fungsi tebak?
5.Apa strategi tercepat untuk memenangkan tebak angka 1-100?