Monday, July 21, 2025

Modul 11: Proyek Mini - Aplikasi Interaktif


Deskripsi Singkat

Pada modul ini, peserta didik akan menerapkan pengetahuan tentang struktur HTML dan dasar CSS untuk membuat aplikasi web sederhana yang bersifat interaktif, seperti kuis, form input, atau halaman galeri.

Tujuan Pembelajaran

  • Mengembangkan aplikasi web sederhana yang menggabungkan elemen teks, gambar, dan interaksi dasar.
  • Menerapkan HTML dan CSS untuk menyusun dan mempercantik tampilan aplikasi.
  • Melatih kemampuan kolaborasi dan penyelesaian masalah melalui proyek mini.

Materi Pembelajaran

  • Perancangan antarmuka pengguna (User Interface/UI)
  • Penggunaan elemen formulir HTML (form, input, button)
  • Dasar interaktivitas menggunakan atribut HTML (misalnya, onclick)
  • Penataan layout dan warna menggunakan CSS

Langkah Kegiatan

  1. Guru menjelaskan contoh aplikasi interaktif sederhana.
  2. Siswa dibagi menjadi kelompok kecil untuk merancang ide aplikasi mereka.
  3. Setiap kelompok membuat perancangan (sketsa UI) dan mendiskusikan fungsionalitas dasar.
  4. Siswa mulai mengembangkan halaman web dengan HTML dan CSS berdasarkan rancangan.
  5. Setelah selesai, masing-masing kelompok mempresentasikan hasil proyek mereka.

Penilaian

  • Pengetahuan: Uraian tentang struktur halaman yang dibuat.
  • Keterampilan: Kesesuaian antara rancangan dan hasil akhir proyek.
  • Sikap: Kerja sama, tanggung jawab, dan ketepatan waktu dalam penyelesaian proyek.

Refleksi

Siswa merefleksikan kesulitan dan keberhasilan dalam proses pembuatan aplikasi interaktif serta memberikan umpan balik antar kelompok.

Tugas Rumah

Kembangkan ulang aplikasi proyek mini secara individu dengan tambahan gaya (CSS) dan fitur yang berbeda.