Lihat sumber Praktik: Membuat galeri foto responsif


==Modul Praktik: Membuat Galeri Foto Responsif Menggunakan CSS==

* Mata Pelajaran: Web Programming  
* Tingkat: 10 / Semester Awal  
* Sistem Operasi: Ubuntu 24.04  
* Tools: Gedit / GNOME Text Editor, Firefox, Terminal

==Tujuan Pembelajaran:==

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

==Persiapan Tool==

1. '''Editor Teks'''

Gunakan `gedit` atau `gnome-text-editor`:

 sudo apt install gedit

2. '''Browser'''

Pastikan Firefox sudah tersedia:

 firefox


3. '''Folder Kerja'''

Buat folder proyek:

 mkdir ~/galeri-foto
 cd ~/galeri-foto


==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.'''

==Langkah 1: Buat HTML Dasar==

Buka file `index.html`:

 gedit index.html

Isi dengan kode berikut:

<pre>
 <!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>
     <h1>Galeri Foto Responsif</h1>
     <div class="gallery">
         <img src="images/foto1.jpg" alt="Foto 1">
         <img src="images/foto2.jpg" alt="Foto 2">
         <img src="images/foto3.jpg" alt="Foto 3">
     </div>
 </body>
 </html>
</pre>

==Langkah 2: Buat File CSS==

Buka file `style.css`:

 gedit style.css

Isi dengan kode berikut:

 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);
 }

==Langkah 3: Menjalankan Proyek==

Buka terminal:

 firefox index.html


==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.

==Tantangan Praktik Tambahan (Opsional)==

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

==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)



==Pranala Menarik==

* [[Web Programming]]