NgodingSantaiPlayground CSS Grid
Ubah lebar minimum kartu, jarak, dan jumlah item. Bandingkan auto-fit dengan auto-fill lalu unduh contoh HTML mandiri.
Atur layoutLAB FRONTEND · TANPA PENDAFTARAN
Lab Frontend
Tiga alat gratis untuk bereksperimen dengan CSS Grid, menghitung kontras warna, dan mencatat audit frontend.
Semua alat · Redaksi NgodingSantai · Diperbarui
Pemeriksa kontras
Hitung rasio dua warna HEX dan lihat hasil untuk teks biasa serta teks besar. Pratinjau membantu membandingkan pasangan warna.
Uji warnaChecklist frontend
Catat pengujian keyboard, mobile, link, formulir, dan metadata. Simpan progres di browser, ekspor catatan, atau cetak.
Mulai auditMulai dari satu masalah
Jika kartu terlalu sempit, mulai dari Grid. Jika teks terasa samar, masukkan warna aktual ke pemeriksa kontras. Setelah memperbaiki halaman, gunakan checklist untuk memastikan perubahan tidak memutus navigasi atau formulir.
Alat memproses input di browser. Hanya checklist yang menyimpan progres pada penyimpanan lokal; tidak ada unggahan kode atau hasil ke server. Nilai yang tampil adalah hasil perhitungan atau penandaan Anda, bukan sertifikasi menyeluruh.
Jalur belajar
- Baca dasar CSS Grid, kemudian ubah jumlah kartu pada playground.
- Baca implementasi dark mode, lalu bandingkan kedua pasangan warna tema.
- Ikuti pengujian navbar dengan keyboard dan simpan catatan audit.