Pemrograman WebSemester 1Pertemuan 2 · 1 Pertemuan × 5 JP (1 JP = 45 menit) = 225 menit
CSS Lanjutan: Flexbox & Grid
Modul ajar Pemrograman Web pertemuan 2: menguasai Flexbox dan CSS Grid untuk membangun layout halaman web profesional, responsif, dan terstruktur.
#css-flexbox#css-grid#responsive#layout#pemrograman-web
MODUL AJAR — Pemrograman Web
| Komponen | Keterangan |
|---|---|
| Penyusun | (isi nama guru) |
| Institusi | SMK Bina Rahayu |
| Mata Pelajaran | Pemrograman Web |
| Kelas / Semester | XI PPLG / 1 (Ganjil) |
| Tahun Pelajaran | 2025/2026 |
| Fase | F |
| Elemen | HTML/CSS & CSS Framework |
| Alokasi Waktu | 1 Pertemuan × 5 JP (225 menit) |
A.1 Identitas Modul
| Komponen | Detail |
|---|---|
| Nama Penyusun | (isi nama guru) |
| Institusi | SMK Bina Rahayu |
| Mata Pelajaran | Pemrograman Web |
| Kelas / Semester | XI PPLG / 1 (Ganjil) |
| Fase | F |
| Elemen / Topik | HTML/CSS & CSS Framework — CSS Lanjutan: Flexbox & Grid |
| Alokasi Waktu | 1 Pertemuan × 5 JP (225 menit) |
| Tahun Pelajaran | 2025/2026 |
| Kode Modul | PW-F-02 |
A.2 Kompetensi Awal
Peserta didik telah menguasai:
- Struktur dasar HTML5 semantik dan elemen-elemennya dari Modul 01.
- CSS dasar: selector, box model (margin, padding, border), warna, ukuran font.
- Menghubungkan CSS ke HTML melalui
<link>internal dan inline. - Menggunakan DevTools browser untuk inspect elemen.
- Pemahaman konsep float dan positioning dasar (dari kelas X).
A.3 Dimensi Profil Lulusan
| Dimensi | Implementasi Konkret dalam Modul Ini |
|---|---|
| Penalaran Kritis | Menganalisis kapan menggunakan Flexbox vs Grid vs float, mengevaluasi efisiensi metode layout yang dipilih berdasarkan kasus nyata. |
| Kreativitas | Merancang layout halaman web yang orisinal menggunakan Flexbox dan Grid, mengeksplorasi kombinasi properti untuk menghasilkan desain yang menarik. |
| Kolaborasi | Bekerja dalam kelompok saat sesi layout challenge, mendiskusikan solusi terbaik dan memberikan umpan balik atas pilihan layout teman. |
| Kemandirian | Memecahkan masalah layout secara mandiri menggunakan properti Flexbox/Grid, melakukan eksperimen dan debugging tanpa selalu bergantung guru. |
| Kesehatan | Menerapkan ergonomic saat praktik: postur duduk benar, istirahat mata secara berkala (20-20-20 rule), dan menjaga jarak pandang ke layar. |
A.4 Sarana dan Prasarana
| No | Sarana | Keterangan |
|---|---|---|
| 1 | Lab Komputer / Laptop | Minimal 1 unit per peserta didik |
| 2 | Koneksi Internet | Untuk mengakses MDN, CSS-Tricks, Flexbox Froggy |
| 3 | VS Code + Live Server | Editor kode utama |
| 4 | Browser (Chrome/Firefox) | Untuk DevTools dan Flexbox Inspector |
| 5 | Proyektor | Demo live coding guru |
| 6 | LKPD Flexbox & Grid (Lampiran 1) | 1 lembar per peserta didik |
| 7 | Infografis Flexbox vs Grid (Lampiran 6) | Cetak A3 atau tayangkan di proyektor |
| 8 | Kartu Properti CSS (Lampiran 5) | 1 set per kelompok (kartu properti Flexbox & Grid) |
A.5 Target Peserta Didik
| Kategori | Estimasi | Strategi |
|---|---|---|
| Reguler | ~70% | Skenario utama dengan template Flexbox/Grid |
| Pencapaian Tinggi | ~15% | Tantangan: CSS Grid auto-fit, nested Flexbox/Grid |
| Kesulitan Belajar | ~15% | Template terpandu, panduan visual DevTools |
A.6 Model Pembelajaran
| Komponen | Pilihan |
|---|---|
| Pendekatan | Konstruktivisme — eksplorasi properti melalui praktik langsung |
| Model | Problem-Based Learning — menghadapi masalah layout dan menyelesaikan dengan Flexbox/Grid |
| Metode | Live coding, Flexbox Froggy (game online), layout challenge, peer review |
Daftar Isi