Beginner · Level 3: CSS Fundamentals and LayoutBeginner45 menitBahasa Indonesia

Fluid Spacing dan Typography Dasar

Latih cara membuat jarak dan ukuran teks yang tetap nyaman di berbagai ukuran layar.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Memahami spacing yang konsisten dan fleksibel
Menggunakan max-width agar teks tidak terlalu panjang
Menggunakan line-height untuk keterbacaan
Mengenal clamp secara ringan untuk ukuran teks atau spacing yang lebih fleksibel

CSSSpacingTypographyResponsive Design

Isi lesson

6 blok

1.
Responsive juga soal teks dan spacingBelum selesaiWajib
2.
Spacing dan typography yang fleksibelBelum selesaiWajib
3.
Teks terlalu lebarBelum selesaiOpsional
4.
Cek pemahamanBelum selesaiWajib
5.
Coding practiceBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Responsive juga soal teks dan spacing

Wajib

Responsive bukan hanya layout kolom. Teks juga harus tetap mudah dibaca. max-width membantu paragraf tidak terlalu panjang. line-height membantu jarak antar baris. clamp bisa membantu nilai berubah dalam batas aman, tetapi tidak perlu dipakai untuk semua hal.

Bagian ini memengaruhi progres lesson.

Spacing dan typography yang fleksibel

Wajib

css

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 40px);
}

.title {
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.1;
}

.description {
  font-size: 18px;
  line-height: 1.7;
}

max-width menjaga panjang teks. padding dan font-size bisa dibuat lebih fleksibel dengan clamp. line-height membantu teks nyaman dibaca.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Opsional

Teks terlalu lebar

Jangan membuat teks terlalu lebar. Paragraf yang terlalu panjang melelahkan dibaca, terutama di desktop besar.

Opsional, tidak menghambat penyelesaian lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Property apa yang sering membantu paragraf tidak terlalu melebar di layar besar?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Mengatur spacing dan typography responsive

Latihan membuat container, title, dan description tetap nyaman dibaca di berbagai ukuran layar.

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.

9 cek otomatis4 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

Responsive visual system juga mencakup teks dan spacing.
max-width menjaga teks tidak terlalu panjang.
line-height membantu keterbacaan.
clamp bisa dipakai untuk nilai yang berubah secara fleksibel dalam batas aman.
Berikutnya kamu akan memakai CSS variables untuk nilai visual reusable.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Responsive juga soal teks dan spacing.

Memuat progres Review module