Lompat ke konten utama

Ajak teman, raih Rp1.000.000. Ikut kompetisi

Masuk

CSS Tata Letak dan Responsif

Flexbox, Grid, position, dan media query — ditulis di editor, hasilnya langsung terlihat.

  • Pemula
  • 4,0 ★ (1 ulasan)
  • 5 modul · 20 pelajaran
  • ±295 menit
  • 65 latihan
Mulai belajar
Bagikan
WhatsApp LinkedIn X

Pelajaran pertama bisa dicoba tanpa akun. Selanjutnya pakai akun gratis agar progres, draft kode, dan sertifikatmu tersimpan.

Yang akan kamu bisa setelah kelas ini

10 hasil belajar
  • 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 dan kolom yang jumlahnya menyesuaikan lebar lewat minmax() dan auto-fit.
  • Menulis media query mobile-first agar halaman terbaca di layar 360 piksel.
  • Memakai em, vw, clamp(), dan min() untuk ukuran yang mengikuti huruf atau layar dengan batas bawah dan atas.
  • Membuat formulir dengan label yang terhubung ke isiannya.
Lihat 4 hasil belajar lainnya
  • Menempatkan elemen dengan position relative, absolute, dan sticky, serta mengatur urutan tumpukannya di dalam konteks penumpukan yang benar.
  • Menyimpan warna dan jarak di custom property, lalu memakainya ulang dengan var().
  • Menghaluskan perubahan warna dan ukuran dengan transition, dan mematikannya untuk pembaca yang meminta pengurangan gerak.
  • Memilih elemen lewat nilai atribut, urutan, dan pengecualian, menangani isi yang meluap, serta memasang web font dan animasi @keyframes yang menghormati pengurangan gerak.

Ringkasnya

CSS Tata Letak dan Responsif adalah kelas gratis berbahasa Indonesia tingkat pemula dari KelasGratis. Cocok untuk orang yang sudah bisa menulis HTML dan CSS dasar dan ingin menata halaman, bukan sekadar mewarnainya. Isinya 20 pelajaran dalam 5 modul (±5 jam) dengan 65 latihan yang dinilai otomatis di browser. Sertifikat penyelesaian gratis dan bisa dicek keasliannya.

Untuk siapa

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

Prasyarat

Bangun Halaman Web Pertamamu

Kelas yang dianjurkan sebelumnya

Relevan untuk pekerjaan dan tujuan

Kelas ini termasuk kelas inti untuk:

Alat yang perlu disiapkan

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

Tempat berlatih

Coba, periksa, lalu lanjutkan.

65 latihan di 20 pelajaran. Jawaban diperiksa langsung di halaman materi; petunjuk dibuka bertahap.

editor HTML/CSSjawaban angkapilihan jawaban

Kurikulum

5 modul · 20 pelajaran · ±295 menit

Dua puluh pelajaran untuk menata halaman web: model kotak, satuan relatif dan clamp(), Flexbox, Grid responsif dengan minmax() dan auto-fit, media query, position dan konteks penumpukan, variabel CSS, dan transisi. Empat pelajaran lanjutan menambah selektor atribut dan kelas semu struktural, overflow dan object-fit, web font, serta animasi @keyframes. Setiap latihan punya editor dan preview terisolasi di browser ini.

  1. 01Kotak dan ukuran5 pelajaran
    Model kotak: isi, padding, border, margin14 mntSatuan px, rem, persen, dan box-sizing, butuh akun14 mntSelektor atribut, kombinator, dan kelas semu struktural, butuh akun13 mntoverflow, text-overflow, dan object-fit, butuh akun13 mntMisi: kartu pengumuman Toko Nusantara, butuh akun18 mnt
  2. 02Flexbox3 pelajaran
    display: flex dan arah sumbu, butuh akun14 mntjustify-content, align-items, gap, dan flex-wrap, butuh akun14 mntMisi: kartu produk Toko Nusantara berjajar, butuh akun18 mnt
  3. 03Grid3 pelajaran
    Grid: kolom dengan grid-template-columns dan repeat, butuh akun14 mntGrid responsif: minmax(), auto-fill, dan auto-fit, butuh akun14 mntMisi: tata letak halaman profil, butuh akun18 mnt
  4. 04Responsif, formulir, dan aksesibilitas3 pelajaran
    Media query dan mobile-first, butuh akun14 mntSatuan relatif: em, vw, clamp(), dan min(), butuh akun14 mntMisi: formulir pendaftaran yang rapi di HP, butuh akun18 mnt
  5. 05Posisi, variabel, dan gerak6 pelajaran
    position: relative, absolute, fixed, dan sticky, butuh akun14 mntz-index dan konteks penumpukan, butuh akun14 mntCustom property: menyimpan warna dan jarak di satu tempat, butuh akun13 mntWeb font: @font-face, font-display, dan huruf cadangan, butuh akun13 mnt@keyframes, animation, dan transform, butuh akun13 mntMisi: panel harga yang menempel dan tombol beranimasi, butuh akun18 mnt

Urutan pelajaran tidak dikunci.

Sertifikat kelas

Selesaikan kelasnya, sertifikat ini atas namamu.

  • Nama lengkapmu dan judul kelas tercetak di sertifikat.
  • Kode dan QR yang bisa dicek siapa saja di kelasgratis.com/verifikasi.
  • Sekali klik ke profil LinkedIn, atau unduh PNG dan PDF.
Mulai belajar

Bukti penyelesaian materi, bukan akreditasi atau sertifikasi kompetensi.

Pertanyaan yang sering muncul

Kapan memakai Flexbox dan kapan memakai Grid?

Flexbox menata satu sumbu: satu deret item yang panjangnya mengikuti isi dan jumlahnya bisa berubah, seperti deretan kategori atau kartu berjajar. Grid menata dua sumbu sekaligus: kolom dan baris ditentukan lebih dulu, lalu isi menempati selnya, seperti denah halaman. Kelas ini memberi satu modul untuk masing-masing, lengkap dengan misinya.

Kenapa elemen dengan width 100% dan padding melebar melewati induknya?

Secara bawaan, width hanya mengatur lebar area isi, dan padding serta border ditambahkan di luarnya. Panel dengan width 100% dan padding 24px jadi 48 piksel lebih lebar dari induknya, sehingga halaman bisa digeser ke samping di ponsel. box-sizing: border-box membuat padding dihitung ke dalam width; ini dibahas di modul pertama.

Apakah kelas ini mengajarkan Tailwind atau Bootstrap?

Tidak. Kelas ini memakai CSS murni: model kotak, satuan relatif dan clamp(), Flexbox, Grid dengan minmax() dan auto-fit, media query mobile-first, position dan z-index, custom property, serta transition yang dimatikan untuk pembaca yang meminta pengurangan gerak. Setiap latihan ditulis di editor dengan preview langsung di halaman pelajaran.

Apakah kelas CSS Tata Letak dan Responsif gratis dan bersertifikat?

Ya, gratis dan cukup memakai browser modern; editor dan preview sudah tersedia. Kelas ini melanjutkan Bangun Halaman Web Pertamamu. Setelah semua pelajaran wajib selesai, termasuk misi panel harga yang menempel, sertifikat penyelesaian KelasGratis bisa diterbitkan dengan tautan verifikasi. Sertifikat itu bukan akreditasi.

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.

Dari pengalaman belajar

Ulasan peserta

Apa yang membantu, dan apa yang masih bisa diperbaiki?

4,0dari 5 · 1 ulasan terbit

Ulasan berasal dari akun yang telah menyelesaikan setidaknya satu pelajaran. Bintang 1–3 ditinjau admin sebelum terbit; bintang 4–5 langsung terbit. Sebelum ada ulasan terbit, kelas menggunakan nilai awal admin 5,0. Setelahnya, rating mengikuti rata-rata ulasan yang sudah terbit.

Pengalamanmu bisa membantu peserta berikutnya.

Belum ada ulasan yang terbit untuk kelas ini.

Bagikan pengalaman belajarmu

Masuk dan selesaikan satu pelajaran untuk menulis ulasan. Masuk ke akun →

Setelah kelas ini

Jalur yang memuat kelas ini

Revisi materi terakhir: 28 Okt 2026. Laporan kesalahan bisa dikirim dari setiap halaman pelajaran.

Tentang KelasGratisMasuk