Cara bermain Responsive Tukang Jahit
- Baca instruksi level. Struktur HTML baju dan CSS bawaannya tampil di atas kotak tulis.
- Tulis CSS lengkap dengan selector, misalnya
.kartu { width: 90%; }. Media query ditulis seperti biasa:@media (min-width: 600px) { ... }. - Baju kamu digambar ulang di tiga badan setiap kali kamu mengetik. Badan yang lebih lebar dari panel ditampilkan diperkecil, dan tiap badan diberi tanda pas atau belum pas.
- Tekan Cek jawaban atau Ctrl + Enter. Baju kamu juga dicek di badan 540px dan 960px yang tidak ditampilkan, jadi jawaban harus benar-benar mengikuti lebar badan.
- Kalau buntu, buka Petunjuk. Petunjuk pertama mengarahkan, petunjuk terakhir hampir menjawab.
- Level yang sudah selesai tetap tercentang saat kamu kembali dengan browser yang sama.
Yang kamu pelajari
- Level 1
Persen dan rem
Persen dihitung dari lebar wadah.
remdihitung dari ukuran huruf dasar halaman, biasanya 16px. - Level 2
max-width
Batas atas lebar. Elemen boleh menyempit di layar kecil, tapi tidak melebar lewat batasnya.
- Level 3
Media query
@media (max-width: 599px)membuat aturan di dalamnya hanya berlaku di layar 599px ke bawah. Titik pergantiannya disebut breakpoint. - Level 4
Mobile-first
Gaya dasar ditulis untuk layar kecil, lalu
@media (min-width: ...)menambah aturan untuk layar yang lebih lebar. - Level 5
flex-direction per breakpoint
Elemen bertumpuk di layar kecil (
column) dan berjajar mulai lebar tertentu (row). - Level 6
Kolom grid per breakpoint
grid-template-columns: repeat(n, 1fr)diganti di tiap breakpoint supaya jumlah kolom ikut lebar layar. - Level 7
clamp()
clamp(min, ideal, max)memakai nilai ideal yang ikut lebar layar, tapi tetap di antara batas bawah dan batas atas. - Level 8
min()
min(a, b)memakai nilai yang lebih kecil.min(100% - 2rem, 640px)membuat lebar 640px yang tetap menyisakan ruang di layar sempit. - Level 9
Gambar responsif
max-width: 100%menahan gambar selebar wadahnya, danaspect-ratiodenganobject-fit: covermemotongnya ke rasio yang diinginkan.
`max-width` di properti dan di media query itu beda
.kartu { max-width: 480px; } membatasi lebar elemen: kartu tidak pernah lebih lebar dari 480px. @media (max-width: 599px) { ... } tidak mengubah ukuran apa pun. Ia hanya syarat: aturan di dalamnya berlaku kalau layarnya 599px atau lebih sempit.
Jadi max-width di media query dibaca "sampai lebar", dan min-width dibaca "mulai lebar". Pola mobile-first memakai min-width, karena gaya dasarnya sudah untuk layar kecil dan breakpoint hanya menambah.
Tanya jawab
Apakah harus daftar akun untuk bermain?
Tidak. Semua level bisa dimainkan tanpa akun. Kemajuanmu disimpan di browser yang kamu pakai, jadi akan hilang kalau data browser dihapus.
Bagaimana tiga ukuran layar bisa dicek tanpa mengubah ukuran browser?
Tiap badan adalah wadah berlebar tetap dengan container-type: inline-size. Di balik layar, @media yang kamu tulis diubah jadi container query @container dengan syarat yang sama, dan vw diubah jadi cqw. Hasilnya sama dengan membuka halaman di layar selebar itu.
Kenapa jawaban yang berbeda bisa sama-sama benar?
Jawaban dicek dari posisi dan ukuran tiap elemen yang dirender browser, bukan dari teks CSS-mu. width: min(100% - 2rem, 640px) dan width: calc(100% - 2rem); max-width: 640px menghasilkan kartu yang sama, jadi keduanya diterima.
Kenapa jawabanku pas di tiga badan tapi masih salah?
Saat dicek, baju kamu juga diukur di badan 540px dan 960px. Kalau kamu menulis angka tetap untuk tiap ukuran yang terlihat, hasilnya meleset di ukuran lain. Pakai persen, clamp(), min(), atau breakpoint yang diminta.
CSS apa saja yang dibaca?
Selector kelas (.kartu, .nav .menu), @media dengan min-width atau max-width, dan properti layout: ukuran, padding, margin, display, flex, grid, font-size, aspect-ratio, dan object-fit. Warna, position, dan properti lain diabaikan supaya latihannya fokus ke responsive.