CSS Tata Letak dan Responsif

Sepuluh pelajaran untuk menata halaman web: model kotak, satuan, Flexbox, Grid, media query, dan formulir yang bisa dipakai di layar kecil. Setiap latihan punya editor dan preview terisolasi di browser ini.

Mulai belajar

10 pelajaran · ±106 menit · gratis sampai selesai

Materinya gratis sampai selesai. Membuka pelajaran butuh akun supaya progres, draft kode, dan sertifikatmu tersimpan.

Yang akan kamu bisa setelah kelas ini

Menghitung lebar elemen dari model kotak dan mengatur box-sizing.
Menyusun kartu berjajar dengan Flexbox: perataan, jarak, dan turun baris.
Membuat tata letak halaman dengan Grid, termasuk grid-template-areas.
Menulis media query mobile-first agar halaman terbaca di layar 360 piksel.
Membuat formulir dengan label yang terhubung ke isiannya.

Untuk siapa

Orang yang sudah bisa menulis HTML dan CSS dasar dan ingin menata halaman, bukan sekadar mewarnainya.

Prasyarat

Bangun Halaman Web Pertamamu

Alat yang perlu disiapkan

Browser modern. Editor dan preview sudah tersedia di halaman pelajaran.

Kurikulum

4 modul · 10 pelajaran · ±106 menit

01Kotak dan ukuran3 pelajaran
Model kotak: isi, padding, border, margin9 mnt Satuan px, rem, persen, dan box-sizing10 mnt Misi: kartu pengumuman Toko Nusantara12 mnt
02Flexbox3 pelajaran
display: flex dan arah sumbu9 mnt justify-content, align-items, gap, dan flex-wrap10 mnt Misi: kartu produk Toko Nusantara berjajar12 mnt
03Grid2 pelajaran
Grid: kolom dengan grid-template-columns dan repeat10 mnt Misi: tata letak halaman profil12 mnt
04Responsif, formulir, dan aksesibilitas2 pelajaran
Media query dan mobile-first10 mnt Misi: formulir pendaftaran yang rapi di HP12 mnt

Pelajaran boleh dibuka langsung; tidak ada urutan yang dikunci.

Diadaptasi dari

Microsoft Web Dev for Beginners — 3-terrarium (CSS layout) oleh Microsoft dan para kontributornya, lisensi MIT. Perubahan: Urutan materi tata letak (kotak, posisi, penataan kolom) dipakai sebagai kerangka, lalu ditulis ulang dalam Bahasa Indonesia. Proyek terrarium diganti skenario Toko Nusantara, dan latihan diubah menjadi editor HTML+CSS satu berkas yang diperiksa dengan pola.
web.dev — Learn CSS, Learn Forms, Learn Accessibility oleh Google LLC dan para kontributor web.dev, lisensi CC-BY-3.0. Perubahan: Pembagian topik Learn CSS (box model, sizing, flexbox, grid) dan Learn Forms/Accessibility dipakai sebagai urutan pelajaran. Semua prosa ditulis ulang dalam Bahasa Indonesia, contoh diganti data toko dan pelatihan di Indonesia, dan setiap angka dirujuk ke MDN atau W3C.

Setelah kelas ini

Jalur yang memuat kelas ini

Web Developer Pemula4 kelas

Lanjutkan ke kelas lain

Revisi materi terakhir: 2026-09-22. Laporan kesalahan bisa dikirim dari setiap halaman pelajaran.