Beginner · Level 3: CSS Fundamentals and LayoutBeginner45 menitBahasa Indonesia

Breakpoints Dasar

Pelajari cara memakai media query dan breakpoint untuk menyesuaikan layout pada ukuran layar berbeda.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Memahami breakpoint sebagai titik perubahan layout
Mengenal media query min-width
Menggunakan breakpoint untuk mengubah grid atau layout
Tidak membuat terlalu banyak breakpoint tanpa alasan

CSSMedia QueriesBreakpoints

Isi lesson

6 blok

1.
Breakpoint adalah titik layout berubahBelum selesaiWajib
2.
Grid dengan breakpoint sederhanaBelum selesaiWajib
3.
Jangan hafal semua ukuran deviceBelum selesaiOpsional
4.
Cek pemahamanBelum selesaiWajib
5.
Coding practiceBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Breakpoint adalah titik layout berubah

Wajib

Breakpoint adalah titik ukuran layar saat layout perlu berubah. Media query seperti @media (min-width: 768px) dipakai untuk menambahkan aturan ketika layar mencapai ukuran tertentu.

Breakpoint sebaiknya muncul karena layout butuh ruang, bukan karena menghafal semua ukuran device. Untuk pemula, cukup mulai dari satu atau dua breakpoint.

Bagian ini memengaruhi progres lesson.

Grid dengan breakpoint sederhana

Wajib

css

.card-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Style dasar membuat grid satu kolom. Saat layar lebih lebar, media query menambah kolom.

Bagian ini memengaruhi progres lesson.

Tips

Opsional

Jangan hafal semua ukuran device

Perhatikan kapan konten mulai terasa sempit atau terlalu lebar. Breakpoint yang baik muncul dari kebutuhan layout dan konten.

Opsional, tidak menghambat penyelesaian lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Breakpoint sebaiknya dibuat berdasarkan apa?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Membuat card grid dengan breakpoint

Latihan memakai Grid dan breakpoint sederhana agar card section bisa meningkat saat layar lebih lebar.

Tujuan awal: Fokus di tab CSS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis4 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

Breakpoint adalah titik layout berubah.
Media query membantu menambahkan style untuk layar lebih besar.
Gunakan breakpoint seperlunya.
Berikutnya kamu akan membuat spacing dan typography yang lebih fleksibel.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Breakpoint adalah titik layout berubah.

Memuat progres Review module