Berikut adalah **modul praktikum lengkap** berjudul:

---

1. 🌐 Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS (Tanpa Microsoft VS Code)

1. 1. 🧑‍🏫 Mata Kuliah: Web Programming
  2. 🎓 Tingkat: S1 / Semester Awal
  3. 🖥️ Sistem Operasi: Ubuntu 24.04
  4. 🛠️ Tools: Gedit / GNOME Text Editor, Firefox, Terminal

---

1. 1. 🎯 Tujuan Pembelajaran:

1. Mahasiswa mampu membuat galeri foto menggunakan HTML dan CSS. 2. Mahasiswa memahami konsep layout responsif. 3. Mahasiswa mampu memanfaatkan tools open-source di Linux untuk web development.

---

1. 🛠️ Persiapan Alat

1. 1. 1. **Editor Teks**

Gunakan `gedit` atau `gnome-text-editor`: ```bash sudo apt install gedit ```

1. 1. 2. **Browser**

Pastikan Firefox sudah tersedia: ```bash firefox ```

1. 1. 3. **Folder Kerja**

Buat folder proyek: ```bash mkdir ~/galeri-foto cd ~/galeri-foto ```

---

1. 📁 Struktur Folder Proyek

``` galeri-foto/ ├── index.html ├── style.css └── images/

    ├── foto1.jpg
    ├── foto2.jpg
    └── foto3.jpg

```

- Letakkan 3–6 gambar di folder `images/` sebelum memulai.**

---

1. 🧾 Langkah 1: Buat HTML Dasar

Buka file `index.html`: ```bash gedit index.html ```

Isi dengan kode berikut: ```html <!DOCTYPE html> <html lang="id"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Galeri Foto Responsif</title>
   <link rel="stylesheet" href="style.css">

</head> <body>

Galeri Foto Responsif

       <img src="images/foto1.jpg" alt="Foto 1">
       <img src="images/foto2.jpg" alt="Foto 2">
       <img src="images/foto3.jpg" alt="Foto 3">

</body> </html> ```

---

1. 🎨 Langkah 2: Buat File CSS

Buka file `style.css`: ```bash gedit style.css ```

Isi dengan kode berikut: ```css body {

   font-family: sans-serif;
   margin: 20px;
   background-color: #f0f0f0;

}

h1 {

   text-align: center;
   color: #333;

}

.gallery {

   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 15px;
   padding: 20px;

}

.gallery img {

   width: 100%;
   height: auto;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);
   transition: transform 0.3s;

}

.gallery img:hover {

   transform: scale(1.05);

} ```

---

1. 🌐 Langkah 3: Menjalankan Proyek

Buka terminal: ```bash firefox index.html ```

---

1. ✅ Output yang Diharapkan

- Tampilan galeri yang rapi. - Setiap gambar berada dalam grid. - Tampilan menyesuaikan ukuran layar (ponsel, tablet, desktop). - Efek zoom saat hover pada gambar.

---

1. 🔁 Tantangan Praktik Tambahan (Opsional)

1. Tambahkan **caption** di bawah gambar menggunakan elemen `<figure>` dan `<figcaption>`. 2. Tambahkan efek **lightbox** menggunakan JavaScript sederhana (untuk pertemuan selanjutnya). 3. Ganti grid menjadi **flexbox**, bandingkan hasilnya.

---

1. 📚 Materi Pendukung

- [MDN Web Docs - CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) - [Responsive Design dengan CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)

---

Kalau kamu mau, aku bisa bantu buatkan **file ZIP galeri foto siap pakai** atau contoh tambahan pakai Tailwind CSS atau Bootstrap (tanpa VS Code tetap bisa kok). Mau lanjut ke situ?

Praktik: Membuat galeri foto responsif

Galeri Foto Responsif

Navigation menu

Search