FluentStack

Mobile-first CSS

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

Mobile-first CSS

Pahami cara menulis CSS dari layar kecil terlebih dahulu sebelum menambahkan aturan untuk layar lebih besar.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami mobile-first sebagai pendekatan mulai dari layar kecil
  • Menulis style dasar yang aman untuk mobile
  • Menambahkan peningkatan untuk layar lebih besar
  • Menghindari layout yang hanya nyaman di desktop
CSSResponsive DesignMobile First

Isi lesson

7 blok
  1. 1.
    Mulai dari layar kecilBelum selesaiWajib
  2. 2.
    HTML section sederhanaBelum selesaiWajib
  3. 3.
    CSS mobile-firstBelum selesaiWajib
  4. 4.
    Mobile-first bukan mobile-onlyBelum selesaiOpsional
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Coding practiceBelum selesaiWajib
  7. 7.
    RingkasanBelum selesaiWajib

Mulai dari layar kecil

Wajib

Mobile-first berarti style dasar ditulis untuk layar kecil terlebih dahulu. Setelah itu, media query dipakai untuk menambahkan aturan ketika layar lebih besar.

Pendekatan ini membantu UI tetap terbaca di HP. Kamu tidak mulai dari desktop besar lalu panik memperbaiki mobile di akhir. Fokusnya sederhana: buat tampilan dasar aman dulu, lalu tingkatkan saat ruang layar bertambah.

Bagian ini memengaruhi progres lesson.

HTML section sederhana

Wajib
html
<section class="section">
  <h1 class="title">Belajar Responsive CSS</h1>
  <p class="description">Mulai dari layar kecil, lalu tingkatkan untuk layar lebih besar.</p>
</section>

Struktur ini sengaja kecil. Responsive behavior akan diatur lewat CSS, bukan dengan menambah banyak markup.

Bagian ini memengaruhi progres lesson.

CSS mobile-first

Wajib
css
.section {
  padding: 16px;
}

.title {
  font-size: 28px;
}

@media (min-width: 768px) {
  .section {
    padding: 32px;
  }

  .title {
    font-size: 40px;
  }
}

Aturan awal berlaku untuk layar kecil. Media query menambahkan padding dan ukuran title yang lebih besar saat layar punya ruang lebih.

Bagian ini memengaruhi progres lesson.

Catatan penting

Opsional

Mobile-first bukan mobile-only

Mobile-first bukan berarti hanya peduli mobile. Artinya style dasar harus aman untuk layar kecil, lalu diperbaiki untuk layar yang lebih besar.

Opsional, tidak menghambat penyelesaian lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Dalam pendekatan mobile-first, style dasar biasanya ditulis untuk ukuran layar apa?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Membuat section mobile-first

Latihan menulis style dasar yang aman untuk layar kecil sebelum menambahkan peningkatan responsive.

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
  • Mobile-first mulai dari layar kecil.
  • Media query bisa menambah aturan untuk layar lebih besar.
  • Style dasar harus tetap readable tanpa bergantung pada desktop.
  • Berikutnya kamu akan belajar breakpoint dasar.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Mulai dari layar kecil.

Memuat progresReview module