Tutorial

GHAZA'S JOURNAL / TUTORIAL

Catatan singkat HTML & CSS, plus pengingat kecil dari versi awal project.

Belajar sedikit, coba langsung.

Catatan ini menjelaskan teknik yang dipakai di project, supaya kamu bisa mengubahnya sendiri.

Hubungkan HTML dengan CSS

Letakkan baris ini di dalam <head>. File mystyle.css menjadi pusat tampilan semua halaman.

<link rel="stylesheet" href="mystyle.css">

Kenali class dan selector

class="header" di HTML dipilih dengan .header di CSS. Coba ubah warna latar header, lalu muat ulang halaman.

.header {
    background-color: #70263b;
    color: white;
}

Atur kolom dengan Flexbox

Flexbox menempatkan menu kiri dan konten secara berdampingan. Properti gap memberi jarak antarkolom.

.isi-konten {
    display: flex;
    gap: 32px;
}
.kiri { width: 220px; }
.tengah { flex: 1; min-width: 0; }

Buat gallery dengan Grid

repeat(3, 1fr) artinya tiga kolom yang sama lebar. Di layar kecil, project ini mengubahnya menjadi satu kolom.

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

Sesuaikan untuk layar HP

Media query memberi aturan khusus saat layar menyempit. Menu kiri berpindah ke bawah konten supaya artikel mudah dibaca.

@media (max-width: 700px) {
    .isi-konten { flex-direction: column; }
    .kiri { width: 100%; order: 2; }
    .gallery-grid { grid-template-columns: 1fr; }
}

Latihan kecil buat kamu

Ubah warna --accent di bagian atas mystyle.css.
Ganti isi paragraf Home dengan ceritamu sendiri.
Tambahkan satu foto dan caption di halaman Gallery.
Coba buka website dengan lebar layar HP.

Tetap sabar. Jangan dengar kata orang. Jalanin hidup.— Tutorial hidup versi Ghaza 😄