Materi
Tulis kode, jalankan, lihat hasilnya — semuanya di browser ini.
Enam belas pelajaran HTML dan CSS dengan editor dan preview terisolasi: kerangka dokumen, elemen semantik, teks, tautan, gambar berketerangan, tabel data, formulir berlabel, lalu selektor, spesifisitas, kelas semu, dan model kotak CSS. Dua pelajaran lanjutan membahas validasi bawaan formulir serta pasangan name=value yang dikirim lewat get atau post. Tidak perlu menginstal apa pun; kode disimpan otomatis di perangkatmu.
Peta kelas
| Modul | Pelajaran | Misi akhir |
|---|---|---|
| Kerangka dokumen | 4 | Misi: kerangka halaman Koperasi Melati |
| Teks, tautan, dan gambar | 4 | Misi: halaman profil Perpustakaan Warga |
| Tabel dan formulir | 5 | Misi: daftar harga dan formulir pesanan |
| Menata dengan CSS | 3 | Misi: menyusun satu halaman utuh |
Setelah kelas ini, kamu bisa
- Menulis kerangka dokumen HTML lengkap: doctype, html lang, head, meta charset, title, dan body.
- Menandai bagian halaman dengan elemen semantik header, nav, main, section, dan footer.
- Menyusun teks dengan heading bertingkat, daftar berurutan dan tidak berurutan, serta penekanan kata.
- Membedakan tautan absolut, tautan relatif, dan tautan ke bagian lain di halaman yang sama.
- Memasang gambar dengan teks alternatif yang sesuai fungsinya.
- Menyajikan data dengan tabel ber-caption, thead, dan judul ber-scope col maupun row.
- Membuat formulir dengan label yang terhubung ke isiannya lewat for dan id.
- Membatasi isian dengan min, max, step, pattern, dan maxlength, lalu memilih get atau post dan value yang tepat untuk radio, kotak centang, dan select.
- Memilih elemen dengan selektor tipe, kelas, id, dan keturunan, lalu mengatur warna dan hurufnya.
- Menjelaskan aturan mana yang menang saat dua aturan bertabrakan, dan menandai keadaan elemen dengan :hover serta :focus-visible.
- Mengatur jarak dengan padding, border, dan margin memakai satuan px dan rem, serta mengubah cara lebar dihitung dengan box-sizing.
- Menggabungkan semuanya menjadi satu halaman utuh yang bisa dibaca di browser.
Untuk siapa
Siapa pun yang belum pernah menulis kode dan ingin melihat hasilnya langsung.
Prasyarat
Tidak ada prasyarat.
Alat
- Browser modern. Editor dan preview sudah tersedia di halaman pelajaran.
Pengajar
Irfan Akbar Wildani, S.Kom., Founder & Initiator KelasGratis.com.
Irfan memegang semua peran di KelasGratis: penulis, peninjau, pengajar, sampai pengembang. Kalau ada kebutuhan lain, hubungi Instagram @irfanakbrr (instagram.com/irfanakbrr).
