RPP

Rencana Pelaksanaan Pembelajaran — Front-End Web Development

Satuan PendidikanSMA/SMK

Mata PelajaranInformatika (Web Dev)

Kelas / SemesterX / 1 (Ganjil)

Alokasi Waktu4 JP × 16 minggu

Jumlah Pertemuan32 Pertemuan

ModelProject Based Learning

Komponen RPP

Kompetensi Dasar

Memahami & menerapkan teknologi front-end untuk membangun halaman web.

INDIKATOR

Indikator Pencapaian

Siswa mampu menjelaskan konsep dan membuat produk web sesuai materi tiap bab.

TUJUAN

Tujuan Pembelajaran

Setelah pembelajaran, siswa dapat merancang & membuat web responsif dan interaktif.

MATERI

Materi Ajar

SE, Computational Thinking, HTML, CSS, Bootstrap, RWD, JavaScript, DOM, Project.

METODE

Metode

Ceramah interaktif, demonstrasi, praktik langsung, diskusi, dan proyek.

MEDIA

Media & Alat

Modul interaktif, laptop, VS Code, browser, proyektor, internet.

LANGKAH

Langkah Kegiatan

Pendahuluan → Inti (5M) → Penutup & refleksi.

PENILAIAN

Penilaian

Sikap (observasi), Pengetahuan (kuis), Keterampilan (praktik/proyek).

Langkah Pembelajaran (Umum)

Pendahuluan (15') — Salam, doa, presensi, apersepsi materi sebelumnya, dan penyampaian tujuan pembelajaran.
Kegiatan Inti (90') — Mengamati modul, menanya, mengumpulkan informasi, mengasosiasi melalui praktik koding, dan mengomunikasikan hasil.
Penutup (15') — Menyimpulkan, refleksi, kuis singkat, penugasan, dan informasi materi berikutnya.

Rincian RPP per Bab (Pertemuan)

Pertemuan 1–2 · Pengenalan Software EngineeringBab 1

Tujuan: Siswa memahami peran SE & tahapan SDLC.
Kegiatan: Analogi membangun gedung, mengenal profesi IT & tools.
Penilaian: Tes lisan + diskusi. Buka materi →

Pertemuan 3–4 · Computational ThinkingBab 2

Tujuan: Menerapkan dekomposisi, pola, abstraksi, algoritma.
Kegiatan: Studi kasus & membuat flowchart.
Penilaian: Latihan soal. Buka materi →

Pertemuan 5–6 · HTML DasarBab 3

Tujuan: Menyusun struktur halaman dengan HTML5.
Kegiatan: Praktik membuat halaman profil sederhana.
Penilaian: Praktik. Buka materi →

Pertemuan 7–8 · HTML LanjutanBab 4

Tujuan: Membuat form, tabel, & tag semantik.
Kegiatan: Praktik form pendaftaran.
Penilaian: Praktik. Buka materi →

Pertemuan 9–10 · CSS DasarBab 5

Tujuan: Memberi gaya elemen dengan CSS.
Kegiatan: Styling halaman profil.
Penilaian: Praktik. Buka materi →

Pertemuan 11–12 · CSS AdvancedBab 6

Tujuan: Membuat layout Flexbox/Grid & animasi.
Kegiatan: Proyek mini landing page.
Penilaian: Proyek mini. Buka materi →

Pertemuan 13–14 · Penilaian Tengah SemesterPTS

Kegiatan: Ujian teori & praktik materi Bab 1–6.
Penilaian: Nilai PTS (pengetahuan + keterampilan).

Pertemuan 15–16 · BootstrapBab 7

Tujuan: Membangun UI cepat dengan Bootstrap 5.
Kegiatan: Praktik grid & komponen.
Penilaian: Praktik. Buka materi →

Pertemuan 17–18 · Responsive Web DesignBab 8

Tujuan: Membuat tampilan adaptif multi-perangkat.
Kegiatan: Praktik media query & mobile-first.
Penilaian: Praktik. Buka materi →

Pertemuan 19–20 · JavaScript DasarBab 9

Tujuan: Memahami variabel, tipe data, operator, kondisi.
Kegiatan: Latihan logika sederhana.
Penilaian: Latihan. Buka materi →

Pertemuan 21–24 · JavaScript IntermediateBab 10

Tujuan: Menggunakan fungsi, array, object, method.
Kegiatan: Latihan studi kasus.
Penilaian: Latihan & tugas. Buka materi →

Pertemuan 25–26 · DOM ManipulationBab 11

Tujuan: Memanipulasi elemen & event halaman web.
Kegiatan: Proyek mini web interaktif.
Penilaian: Proyek mini. Buka materi →

Pertemuan 27–30 · Final Project & DeploymentBab 12

Tujuan: Membangun & men-deploy proyek web utuh.
Kegiatan: Perencanaan, pengerjaan, presentasi, deploy.
Penilaian: Proyek akhir (portofolio). Bab 12 → · Final Project →

Pertemuan 31–32 · Penilaian Akhir SemesterPAS

Kegiatan: Ujian akhir & penilaian portofolio seluruh materi.
Penilaian: Nilai PAS + nilai akhir semester.