Tujuan Pembelajaran
Setelah mengikuti pertemuan ini, mahasiswa mampu menyelesaikan proyek akhir website menggunakan seluruh keterampilan yang dipelajari, melakukan review kode dan pengujian akhir, lalu mempresentasikan hasilnya.
Gambaran Proyek Akhir
Proyek akhir adalah puncak dari seluruh materi. Mahasiswa membangun satu website statis multi-halaman yang responsif, rapi, dan siap deploy. Website bisa berupa portofolio pribadi, profil usaha, toko katalog sederhana, atau galeri karya sesuai minat masing-masing.
Proyek ini menilai penguasaan menyeluruh: struktur HTML semantik, styling CSS yang konsisten dan responsif, interaksi JavaScript, penerapan struktur multi-halaman, serta kelayakan untuk dipublikasikan secara nyata.
Spesifikasi Minimal Proyek
Agar penilaian terarah, tentukan kriteria minimal yang harus dipenuhi: minimal tiga halaman yang saling terhubung, navigasi konsisten, halaman responsif di layar kecil dan besar, setidaknya satu fitur interaktif JavaScript, satu formulir, serta desain yang rapi dan konsisten.
Buat juga daftar periksa (checklist) untuk memastikan tidak ada bagian yang terlewat. Checklist ini menjadi dasar presentasi dan review akhir agar penilaian objektif dan menyeluruh.
<code class="language-text">☐ Struktur HTML semantik dan valid ☐ CSS eksternal terpisah, responsif ☐ Fitur interaktif JavaScript berfungsi ☐ Tiga halaman terhubung, navigasi konsisten ☐ Teruji di layar ponsel dan desktop ☐ Siap deploy dengan folder rapi</code>
Tahapan Pengerjaan
Kerjakan bertahap agar tidak kewalahan. Pertama rancang kerangka dan siapkan gambar serta teks. Kedua bangun halaman dasar beserta navigasi. Ketiga beri gaya dan jadikan responsif. Keempat tambahkan interaksi JavaScript. Terakhir rapikan, uji, dan deploy.
Manfaatkan keterampilan dari pertemuan 2 sampai 11: struktur semantik untuk bangunan, Flexbox dan Grid untuk tata letak, media query untuk responsif, DOM dan event untuk interaksi, serta AI sebagai asisten saat menemui kendala teknis.
Review dan Pengujian Akhir
Sebelum menyerahkan, lakukan review kode dan fungsional. Periksa setiap halaman dengan validator HTML, tes semua tautan navigasi, dan klik seluruh interaksi untuk memastikan tidak ada langkah yang gagal. Buka tab Console di DevTools untuk menemukan pesan error JavaScript.
Uji responsif dengan menyusutkan lebar jendela dan memakai mode perangkat di DevTools. Pastikan teks terbaca, gambar tidak meluber, dan menu tetap mudah ditekan di layar kecil. Perbaiki semua masalah yang ditemukan.
Presentasi dan Demo
Setiap mahasiswa mempresentasikan proyeknya secara singkat: jelaskan tujuan website, tampilkan halaman dan fitur interaktif, tunjukkan bahwa website responsif, dan ceritakan satu masalah teknis yang berhasil diatasi. Presentasi menilai kemampuan menjelaskan karya sendiri.
Tunjukkan pula alur perbaikan sebagai bukti proses belajar, misalnya perbandingan desain awal dan akhir. Persiapan presentasi yang baik: buka website di dua ukuran layar, siapkan catatan singkat, dan latih dulu sebelum maju.
Langkah Praktik
Selesaikan seluruh checklist proyek Anda, lakukan deploy ke hosting statis, dan uji tautan dari perangkat yang berbeda. Lakukan pengujian terakhir di tab Console hingga bersih dari error, kemudian siapkan slide presentasi singkat.
Tulis ringkasan proses pengerjaan yang memuat alat yang dipakai, kesulitan yang ditemui, perbaikan yang dilakukan, dan alamat website hasil deploy untuk diserahkan bersama proyek akhir.
Konsep Kunci
- Proyek akhir adalah puncak dari seluruh materi.
- Mahasiswa membangun satu website statis multi-halaman yang responsif, rapi, dan siap deploy.
- Website bisa berupa portofolio pribadi, profil usaha, toko katalog sederhana, atau galeri karya sesuai minat masing-masing.
- Proyek ini menilai penguasaan menyeluruh: struktur HTML semantik, styling CSS yang konsisten dan responsif, interaksi JavaScript, penerapan struktur multi-halaman, serta kelayakan untuk dipublikasikan secara nyata.
- Agar penilaian terarah, tentukan kriteria minimal yang harus dipenuhi: minimal tiga halaman yang saling terhubung, navigasi konsisten, halaman responsif di layar kecil dan besar, setidaknya satu fitur interaktif JavaScript, satu formulir, serta desain yang rapi dan konsisten.
- Buat juga daftar periksa (checklist) untuk memastikan tidak ada bagian yang terlewat.
- Checklist ini menjadi dasar presentasi dan review akhir agar penilaian objektif dan menyeluruh.
- Pertama rancang kerangka dan siapkan gambar serta teks.
Contoh Kode
<code class="language-text"># project checklist - HTML structure valid - CSS external and responsive - JavaScript works - Tested on phone and desktop - Ready to publish</code>
Proyek akhir adalah puncak dari seluruh materi. Mahasiswa membangun satu website statis multi-halaman yang responsif, rapi, dan siap deploy. Website bisa berupa portofolio pribadi, profil usaha, toko katalog sederhana, atau galeri karya sesuai minat masing-masing.
Latihan dan Penutup
Selesaikan proyek sesuai spesifikasi, lakukan review diri menggunakan checklist, lalu presentasikan. Jadikan proyek ini sebagai portofolio yang bisa ditambahkan terus seiring kemampuan berkembang sesuai minat Anda.
Anda kini telah menguasai fondasi pengembangan web: struktur, gaya, interaksi, dan publishing. Terus praktik, bangun proyek baru, dan pelajari teknologi lanjutan seperti JavaScript modern dan kerangka kerja frontend.