Project Mata Kuliah Front-End Web Development

A. Deskripsi Umum

Project ini adalah website statis yang dikembangkan menggunakan teknologi front-end. Setiap tim akan mengembangkan sebuah website berdasarkan salah satu pilihan project yang tersedia. Website ini harus dibuat menggunakan HTML, CSS, serta JavaScript.

B. Tujuan

Project ini akan melatih mahasiswa dalam membangun front-end website yang profesional, mulai dari penggunaan HTML, CSS, dan JavaScript, hingga menggunakan GitHub untuk manajemen kode dan deployment GitHub Pages. Dengan struktur yang rapi dan kode yang bersih, project ini diharapkan mudah dikembangkan dan dipresentasikan.

C. Ketentuan Pengerjaan

1. Teknologi yang digunakan:

HTML → Untuk struktur halaman web.
CSS (Hanya boleh menggunakan CSS murni atau Bootstrap)
- CSS murni dapat digunakan untuk styling kustom.
- Bootstrap dapat digunakan untuk mempercepat pengembangan UI.
JavaScript (Hanya boleh menggunakan Vanilla JS atau jQuery)
- Vanilla JavaScript untuk manipulasi DOM dan interaktivitas.
- jQuery diperbolehkan untuk mempermudah penulisan kode.
- Library diperbolehkan untuk fitur-fitur spesifik, misalnya:
  - DataTables.js Untuk tabel interaktif.
  - Chart.js Untuk visualisasi data (grafik dan diagram).
  - SweetAlert2 Untuk tampilan pop-up notifikasi yang lebih menarik.
  - ... dan lain-lain

2. Kewajiban Meletakkan Kode di GitHub & Deploy di GitHub Pages

Setiap tim wajib menggunakan GitHub sebagai repositori untuk menyimpan dan mengelola kode project.
Kode project harus diletakkan di repository publik GitHub dengan nama yang sesuai dengan project yang dikerjakan.
GitHub Pages harus digunakan untuk menampilkan dan mendemonstrasikan website secara langsung.
File utama project harus berada di dalam repository, termasuk file HTML, CSS, dan JavaScript.
Setiap anggota tim harus berkontribusi dengan commit yang jelas dan deskriptif.

Referensi untuk Deploy GitHub Pages:

Masuk ke repository di GitHub.
Pergi ke Settings → Pages.
Pilih Branch: main atau master → Save.
Link website akan tersedia setelah beberapa saat.

3. Setiap Anggota Wajib Memiliki Akun GitHub & Berpartisipasi dalam Pembuatan Kode

Setiap anggota tim wajib memiliki akun GitHub dan bergabung dalam repository tim.
Setiap anggota harus melakukan minimal 3 commit yang menunjukkan kontribusi terhadap pengembangan project.
Pembagian tugas dalam tim bisa mencakup, namun tidak terbatas:
- HTML Developer → Membuat struktur halaman.
- CSS Designer → Mendesain tampilan website menggunakan CSS atau Bootstrap.
- JavaScript Developer → Menambahkan fitur interaktif menggunakan Vanilla JS atau jQuery.
- Documentation Manager → Menulis README.md yang menjelaskan project.

Tip: Gunakan fitur Git seperti branch dan pull request untuk berkolaborasi dengan baik!

4. Manajemen Letak File & Struktur Kode yang Baik

Untuk memastikan project terstruktur dengan baik dan mudah dikelola, setiap tim harus mengikuti struktur file sebagai berikut:

/nama_project
│── index.html             # Halaman utama website (wajib ada)
│── README.md              # Dokumentasi project di GitHub
│── /css                   # Folder untuk file CSS
│   ├── styles.css         # File utama untuk styling (jika menggunakan CSS murni)
│   ├── bootstrap.min.css  # (Opsional) Bootstrap jika digunakan
│── /js                    # Folder untuk file JavaScript
│   ├── script.js          # File utama untuk interaktivitas
│   ├── jquery.min.js      # jQuery (jika digunakan)
│── /media                 # Folder untuk gambar dan aset media
│   ├── logo.png           # Contoh logo
│   ├── banner.jpg         # Contoh banner
│── /lib                   # Folder untuk library eksternal (jQuery plugins atau lainnya)
│   ├── datatables.min.js  # (Opsional) Library DataTables jika digunakan
│   ├── chart.min.js       # (Opsional) Library Chart.js jika digunakan

Penjelasan Struktur Folder & File:

File index.html (Halaman Utama)
- Halaman utama website yang berfungsi sebagai entry point utama.
- Harus berisi tautan navigasi ke halaman lain.
File README.md (Laporan dan Dokumentasi Project)
- Wajib ada di GitHub untuk laporan dan dokumentasi project.
- Sistematika laporan dijelaskan di bawah.
Folder /css (Penyimpanan File CSS)
- Berisi file CSS utama (styles.css) yang mengatur tampilan website jika menggunakan CSS murni.
- Jika menggunakan Bootstrap, file Bootstrap bisa disertakan di folder ini.
Folder /js (Penyimpanan File JavaScript)
- Berisi file JS utama (script.js) yang menangani interaktivitas website.
- File jquery.min.js dapat disertakan jika menggunakan jQuery.
Folder /media (Penyimpanan Gambar & Aset Media)
- Berisi gambar yang digunakan dalam project, seperti logo, ikon, banner dan gambar lainnya.
- Aset media lainnya seperti audio dan video juga ditempatkan di folder ini.
- File harus diberi nama yang deskriptif untuk memudahkan identifikasi.
Folder /lib (Penyimpanan Library Eksternal - Opsional)
- Digunakan jika project menggunakan library tambahan untuk fungsi spesifik.
- Sangat disarankan menggunakan CDN.

5. Spesifikasi atau Syarat Lain yang Diperlukan

Minimal ada 5 halaman html yang saling terhubung. Satu halaman utama terhubung ke halaman lainnya.
Minimal ada 3 fitur JavaScript yang berfungsi (misal: filter, modal pop-up, validasi form, efek animasi).
Desain harus responsif, artinya website bisa diakses dengan baik di desktop dan mobile.
Gunakan kode yang bersih dan rapi, dengan komentar pada bagian yang perlu dijelaskan.
Tiap halaman harus memiliki navigasi yang berfungsi dengan baik untuk berpindah antar halaman.

D. Pilihan Project

Setiap tim harus memilih salah satu dari 9 project berikut (klik nama project untuk melihat spesifikasi detail):

Website Profil Sekolah

Menampilkan informasi sekolah, termasuk visi misi, fasilitas, daftar guru, prestasi, galeri sekolah, dan kontak.
Website Pameran Seni Digital

Menampilkan karya seni digital seperti ilustrasi, lukisan digital, animasi, dan desain grafis. Dapat mencakup profil seniman, kategori karya, serta galeri interaktif.
Website Wisata Kota

Memberikan informasi tentang tempat wisata dalam suatu kota, termasuk deskripsi tempat, galeri foto, peta lokasi, rekomendasi wisata populer, serta informasi tiket atau transportasi.
Website Toko Buku Online

Menyediakan informasi tentang buku, termasuk kategori buku, deskripsi, harga, fitur pencarian, serta daftar rekomendasi buku.
Website Panduan Memasak

Berisi resep makanan lengkap, dengan daftar bahan, langkah-langkah memasak, gambar atau video, serta fitur timer memasak untuk membantu pengguna.
Website Kursus Musik

Menyediakan informasi tentang kursus musik, termasuk daftar kelas musik berdasarkan instrumen, informasi instruktur, jadwal kursus, serta pemutar audio untuk mendengar suara alat musik.
Website Cafe Shop

Menampilkan menu makanan dan minuman, daftar promo atau diskon, galeri interior cafe, serta fitur reservasi meja online.
Website Villa Booking

Menampilkan daftar villa yang bisa disewa, termasuk fasilitas, harga per malam, galeri foto, dan lokasi villa.
Website Informasi Game

Memberikan informasi tentang sebuah game (dengan genre RPG, RTS, atau MOBA), termasuk karakter/unit dalam game, strategi permainan, event turnamen, dan komunitas pemain.

E. Laporan dan Dokumentasi Project

Setiap tim diwajibkan membuat laporan dan dokumentasi project dalam file README.md menggunakan Markdown.

Panduan Markdown

Sistematika dokumen

Judul Project
Deskripsi Singkat - Penjelasan umum tentang project.
Daftar Anggota - Nama, NIM, username akun GitHub, dan peran/tugas setiap anggota tim.
Teknologi yang Digunakan - HTML, CSS, JavaScript, serta library tambahan jika ada.
Fitur Utama - Daftar fitur yang ada di dalam website.
Struktur Folder - Penjelasan tentang susunan file dan folder dalam project.
Cara Menjalankan Website - Instruksi untuk mengakses project melalui GitHub Pages.
Tautan GitHub Pages - Link untuk mengakses website yang telah dibuat.

F. Penilaian

Project ini akan dinilai berdasarkan:

Kesesuaian dengan ketentuan pengerjaan.
Kualitas kode HTML, CSS, dan JavaScript.
Responsif dan interaktif pada desktop dan mobile.
Kreativitas dan keunikan desain website.
Manajemen kode menggunakan GitHub.
Kualitas dokumentasi project.
Keaktifan masing-masing anggota tim.

Rubrik Penilaian Kelompok

Penilaian ini diberikan kepada tim secara keseluruhan berdasarkan kualitas dan kesesuaian project yang dikerjakan.

No	Kriteria Penilaian	Skor 0-3	Skor 4-6	Skor 7-9	Skor 10-12
1	Kesesuaian dengan ketentuan pengerjaan	Tidak sesuai dengan ketentuan, banyak fitur tidak diterapkan.	Beberapa ketentuan dipenuhi, namun masih ada banyak kekurangan.	Hampir semua ketentuan terpenuhi dengan baik.	Seluruh ketentuan telah dipenuhi dengan sangat baik.
2	Kualitas kode HTML, CSS, dan JavaScript	Kode berantakan, banyak error, dan tidak terstruktur.	Kode cukup rapi tetapi masih banyak kesalahan dalam penulisan.	Kode cukup baik, terstruktur, dan hanya ada sedikit kesalahan.	Kode sangat rapi, bersih, dan mengikuti praktik terbaik.
3	Responsif untuk desktop dan mobile	Tidak responsif, hanya bisa digunakan di satu jenis perangkat.	Beberapa elemen responsif, namun masih kurang optimal.	Hampir seluruh elemen responsif, tetapi masih ada yang perlu diperbaiki.	Website sepenuhnya responsif dan nyaman digunakan di berbagai perangkat.
4	Manajemen kode menggunakan GitHub	Tidak menggunakan GitHub atau hanya satu orang yang berkontribusi.	Menggunakan GitHub, tetapi hanya beberapa anggota yang berkontribusi.	Semua anggota tim berkontribusi dengan commit yang cukup baik.	Manajemen GitHub sangat baik, commit terorganisir, dan kolaborasi jelas.
5	Kualitas dokumentasi proyek (`README.md`)	Tidak ada dokumentasi atau sangat minim.	Dokumentasi ada tetapi kurang jelas atau tidak sesuai format.	Dokumentasi cukup baik dan mencakup poin-poin penting.	Dokumentasi lengkap, terstruktur dengan baik, dan mudah dipahami.

Range Skor Kelompok: 0-60

Rubrik Penilaian Personal

Penilaian ini diberikan kepada individu berdasarkan kontribusi dan pemahaman terhadap project.

No	Kriteria Penilaian	Skor 0-5	Skor 6-10	Skor 11-15	Skor 16-20
1	Keaktifan partisipasi pada GitHub (commit kode dan dokumentasi)	Tidak berkontribusi atau hanya sekali melakukan commit.	Kontribusi sedikit dan tidak mencerminkan peran yang jelas.	Kontribusi cukup banyak dan terlihat aktif dalam pengembangan.	Sangat aktif dalam menulis kode dan dokumentasi, memiliki commit yang signifikan.
2	Nilai tanya jawab lisan saat presentasi	Tidak bisa menjawab pertanyaan dengan baik atau tidak memahami proyek.	Menjawab beberapa pertanyaan tetapi masih banyak yang kurang tepat.	Bisa menjawab sebagian besar pertanyaan dengan cukup baik.	Menjawab pertanyaan dengan sangat baik dan menunjukkan pemahaman mendalam.

Range Skor Personal: 0-40

G. Referensi

W3Schools - Tutorial HTML, CSS, JavaScript.
Bootstrap - Framework CSS.
jQuery - Library JavaScript.
GitHub Pages - Hosting website gratis dari GitHub.
GitHub Markdown Guide - Panduan Markdown.
Git di VSCode - Menggunakan Git Source Control di Visual Studio Code