FluentStack

Border, Width, dan Max Width

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 3: CSS Fundamentals and LayoutBeginner35 menitBahasa Indonesia

Border, Width, dan Max Width

Pelajari cara memberi batas, mengatur lebar, dan menjaga card tetap mudah dibaca.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami border sebagai garis tepi elemen
  • Menggunakan border-radius untuk sudut yang lebih halus
  • Menggunakan max-width agar card tetap mudah dibaca
  • Mengenal width, height, dan box-sizing secara sederhana
CSSBorderWidthMax WidthBox Sizing

Isi lesson

7 blok
  1. 1.
    Border memperjelas batas, max-width menjaga lebarBelum selesaiWajib
  2. 2.
    Card dengan batas dan lebar maksimumBelum selesaiWajib
  3. 3.
    Width, height, dan box-sizingBelum selesaiWajib
  4. 4.
    Max-width sering lebih fleksibel daripada width tetapBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Coding practiceBelum selesaiWajib
  7. 7.
    RingkasanBelum selesaiWajib

Border memperjelas batas, max-width menjaga lebar

Wajib

Setelah kamu memahami padding dan margin, sekarang kamu bisa memperjelas bentuk box. Border memberi garis tepi. Border-radius membuat sudut elemen lebih halus. Width menentukan lebar elemen. Max-width membatasi lebar maksimum tanpa memaksa elemen selalu selebar itu.

Bagian ini memengaruhi progres lesson.

Card dengan batas dan lebar maksimum

Wajib
css
.card {
  max-width: 420px;
  border: 1px solid #3f3f46;
  border-radius: 12px;
  padding: 16px;
}

max-width menjaga card tidak terlalu panjang. border memperjelas batas card. border-radius membuat sudut card terasa lebih halus. padding tetap dibutuhkan agar isi tidak menempel.

Bagian ini memengaruhi progres lesson.

Width, height, dan box-sizing

Wajib

Width mengatur lebar elemen. Height mengatur tinggi elemen, tetapi untuk card sederhana kamu tidak selalu perlu height tetap karena isi card bisa berbeda-beda. Box-sizing membantu ukuran box lebih mudah diprediksi. Dengan box-sizing: border-box, padding dan border ikut dihitung di dalam ukuran elemen, sehingga card lebih mudah dikontrol.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Max-width sering lebih fleksibel daripada width tetap

Jangan terlalu cepat memakai width tetap untuk semua kondisi. Untuk card belajar sederhana, max-width sering lebih aman karena card masih bisa mengecil saat ruang layar terbatas.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Property mana yang membatasi lebar maksimum elemen tanpa memaksa semua elemen selalu selebar itu?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Membuat card dengan border dan max-width

Latihan memakai border, border-radius, max-width, padding, dan style heading pada card.

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.

8 cek otomatis8 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Border memberi garis tepi.
  • Border-radius menghaluskan sudut.
  • Max-width membantu menjaga card tetap nyaman dibaca.
  • Box-sizing membantu ukuran box lebih mudah diprediksi.
  • Padding tetap penting agar isi tidak menempel.
  • Berikutnya, kamu akan menguji pemahaman box model dan spacing dasar.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Border memperjelas batas, max-width menjaga lebar.

Memuat progresReview module