Dasar PPLGSemester 1Pertemuan 9 · 1 Pertemuan × 5 JP (1 JP = 45 menit)
CSS Dasar
Modul ajar pertemuan 9 mata pelajaran Dasar PPLG: css dasar.
#css#selector#box-model#layout
MODUL AJAR — Dasar PPLG
| Penyusun | (isi nama guru) |
| Jenjang | SMK |
| Sekolah | (isi nama sekolah) |
| Kelas/Semester | X / 1 (Ganjil) |
| Tahun Pelajaran | 2025/2026 |
| Fase | E |
| Elemen | Pemrograman Web Dasar (HTML/CSS/JS) |
| Kode Tujuan Pembelajaran | DP-E1.9 |
| Alokasi Waktu | 5 JP × 45 menit = 225 menit (1 pertemuan) |
1. Identitas Modul
| Komponen | Keterangan |
|---|---|
| Nama Penyusun | (isi nama guru) |
| Institusi | (isi nama sekolah) |
| Mata Pelajaran | Dasar PPLG (Dasar-dasar Program Keahlian PPLG) |
| Kelas/Semester | X / 1 (Ganjil) |
| Fase | E |
| Elemen | Pemrograman Web Dasar (HTML/CSS/JS) |
| Topik | CSS dasar: selector, box model, layout flexbox, responsive dasar (media query) |
| Kode Tujuan Pembelajaran | DP-E1.9 |
| Tahun Pelajaran | 2025/2026 |
| Alokasi Waktu | 5 JP × 45 menit = 225 menit (1 pertemuan) |
2. Kompetensi Awal
Peserta didik diharapkan telah memiliki:
- Halaman HTML (
profil.html) dari Modul 08 sebagai objek yang akan dihias. - Pemahaman struktur dokumen dan tag semantic (Modul 08).
- Keakraban dengan istilah warna, ukuran, dan tata letak dari pengalaman sehari-hari.
- Disiplin dan budaya kerja dari Modul 04 (observasi
04berlanjut).
3. Dimensi Profil Lulusan
Dimensi yang dikuatkan pada modul ini beserta implementasi konkretnya:
| Dimensi | Implementasi Konkret pada Modul Ini |
|---|---|
| Kreativitas | Merancang tampilan halaman profil dengan warna, font, dan tata letak sendiri |
| Penalaran Kritis | Memahami hubungan struktur (HTML) dan tampilan (CSS) sebagai dua hal yang terpisah |
| Kemandirian | Mengeksplorasi properti CSS secara mandiri dan melihat hasilnya |
| Kesehatan | Menerapkan ergonomi dan jeda saat kerja visual panjang (koneksi Modul 03) |
Observasi budaya kerja (tenggat tugas praktik) tetap dicatat di
04 - Instrumen Observasi Disposisi PPLG.mdBagian A.
4. Sarana dan Prasarana
- Lab komputer dengan VS Code, Live Server, dan file
profil.html(hasil Modul 08). - Proyektor/LCD untuk demo DevTools dan code-along.
- Kartu Selector CSS (Lampiran 5) — print pada kertas tebal, gunting.
- LKPD "Menghias Halaman Profil dengan CSS" (Lampiran 1) — print sesuai jumlah peserta didik.
- Bahan bacaan peserta didik (Lampiran 4) — print sesuai jumlah peserta didik.
- Infografis Box Model & Flexbox (Lampiran 6) — tayang atau print A3/A4.
- Lembar observasi praktik (Lampiran 2) dan instrumen
04Bagian A. - Soal kuis formatif dan soal TKA sumatif beserta kunci (Lampiran 9 dan Bagian G.3).
- File
style.csscontoh (untuk demonstrasi) di repositori guru.
5. Target Peserta Didik
| Kategori | Layanan |
|---|---|
| Reguler | Seluruh peserta didik kelas X PPLG mengikuti alur utama pembelajaran |
| Pencapaian tinggi | Pengayaan: efek hover pada menu, grid dasar, tema terang/gelap |
| Kesulitan belajar | Pendampingan; template starter style.css; latihan selector dengan kartu soal |
6. Model Pembelajaran
| Aspek | Uraian |
|---|---|
| Pendekatan | Pembelajaran terdiferensiasi (yang cepat mengeksplorasi properti tambahan; yang lambat diberi template) |
| Model | Code-along dipadukan eksplorasi mandiri (tweak dan lihat hasil) |
| Metode | Demonstrasi, praktik langsung, eksplorasi, review pasangan, refleksi |
| Media | VS Code + Live Server, DevTools browser (Inspect), Kartu Selector, infografis |
| Sumber belajar | Bahan bacaan lampiran, MDN Web Docs, W3Schools, Flexbox guide |
Daftar Isi