Belajar HTML & CSSDari Nol Sampai Bisa Bikin Website

Kursus terstruktur untuk pemula — mulai dari halaman pertama sampai website lengkap. Materi disusun bertahap dengan penjelasan yang sederhana dan mudah dipahami, lengkap dengan latihan, proyek, dan ujian di setiap tingkat.

HTML — Struktur Halaman

HTML menyusun struktur dan isi halaman: judul, teks, gambar, tombol, dan urutan tampilannya.

CSS — Tampilan & Gaya

CSS mengatur tampilan halaman: warna, ukuran, jarak, dan tata letak — agar halaman terlihat rapi dan menarik.

Browser — Menampilkan Halaman

Chrome, Firefox, atau Safari membaca kode Anda dan menampilkannya sebagai halaman web yang dapat dilihat dan digunakan.

Baru mulai belajar di sini? Mulai dari panduan belajar: urutan materi, ritme belajar per hari, dan cara menggunakan semua fitur — dijelaskan langkah demi langkah.

Lihat Perbedaan HTML & CSS

Toko Kue Bu Tini

Kue cokelat paling enak sekampung. Baru matang tiap pagi, masih anget.

Pesan Sekarang

Ini halaman yang sama tanpa CSS: isinya lengkap, tetapi tampilannya polos. Aktifkan CSS untuk melihat perbedaannya.

0 XPLevel 1 · Pemula
Streak 0 hariBuka tiap hari biar apinya nggak padam
Menuju level berikutnya

Progres, XP, dan streak-mu tersimpan otomatis — nutup halaman nggak bikin hilang. Di versi Vercel, progresmu juga tersinkron otomatis ke server, jadi progres yang sama kebuka di PC dan di HP tanpa perlu kamu atur apa pun. Bab selesai +20 XP, misi latihan +25 XP, langkah proyek +20 XP, Proyek Puncak +100 XP, lulus Ujian Naik Level +50 sampai +100 XP, dan tiap jawaban Mode Ulangan yang benar +5 XP.

Menyinkronkan progres…

Progresmu sekarang tersinkron otomatis antar perangkat — file JSON ini tetap berguna sebagai cadangan manual, atau buat mindahin progres pas lagi offline.

🏅 Lencana Pencapaian

Cara Belajar — baca ini dulu, 5 menit aja

Aplikasi ini isinya banyak: 22 bab, 13 misi latihan, 3 Ujian Naik Level, Mode Ulangan, Proyek Mini 11 langkah, dan 1 Proyek Puncak. Biar nggak bingung mulai dari mana, ini tata cara pakainya — kayak aturan main sebelum main. Tujuh langkah, semuanya pendek. Ikuti urutannya, dan kamu nggak bakal nyasar.

1

Ikuti Peta Jalan — jangan loncat bab

Jalannya udah digambar. Tugasmu cuma jalan di atasnya, satu langkah sekali jalan.

Di tab Belajar ada Peta Jalan: 22 bab dibagi tiga tingkat — Pemula (Bab 1–8, fondasi HTML), Menengah (Bab 9–16, HTML lanjut + CSS dasar), dan Mahir (Bab 17–22, CSS tingkat lanjut). Peta itu selalu nunjukin kamu lagi di mana dan bab apa berikutnya.

  • ✓

    Kerjakan bab sesuai nomornya: 1, 2, 3, terus sampai 22. Bab yang udah selesai tombolnya berubah hijau di daftar bab.

  • ✓

    Kenapa nggak boleh loncat? Karena tiap bab berdiri di atas bab sebelumnya — kayak tangga. Bab CSS nggak bakal masuk akal kalau bab HTML-nya belum beres. Loncat itu kelihatannya cepat, ujungnya malah balik lagi dari awal.

  • ✓

    Bingung lagi di mana? Lihat kotak “Langkah berikutnya” di Peta Jalan — dia selalu nunjukin satu bab yang harus kamu kerjakan sekarang. Nggak usah mikir, tinggal klik tombolnya.

  • ✓

    Satu bab kerasa berat? Itu bukan tanda berhenti — itu tanda bab sebelumnya perlu diulang bentar. Balik satu bab, baca lagi intinya, terus maju lagi.

2

Satu sesi = 1 bab + 1 misi, sekitar 30 menit

Nggak usah maraton. Sedikit-sedikit tapi tiap hari — itu yang menang.

Satu kali duduk belajar, isinya selalu sama, kayak gini:

±5 menit · BacaBaca inti pelajaran + contohnya di satu bab. Pelan-pelan, pakai analoginya.
±10 menit · CobaUtak-atik kodenya di kotak editor bab itu. Ganti-ganti, lihat hasilnya berubah.
±5 menit · KuisJawab kuis kilat di bawah bab. Itu ceknya: beneran paham atau baru kerasa paham.
±10 menit · MisiPindah ke tab Latihan, kerjain 1 misi — mulai dari nomor paling kecil yang belum selesai.
  • ✓

    Akhiri sesi dengan klik “Tandai bab ini selesai” — dapet +20 XP. Misi latihan yang lulus cek dapet +25 XP. Centang dan XP itu bukti jalannya, jangan diskip.

  • ✓

    Satu sesi per hari udah cukup. 22 bab berarti 22 sesi — sekitar 3–4 minggu kalau sehari satu sesi. Yang dijaga bukan lamanya, tapi streak-nya: api 🔥 di atas nambah tiap hari kamu belajar, dan padam kalau bolong sehari.

  • ✓

    Capek atau ngantuk di tengah sesi? Berhenti aja setelah tandai selesai. Otak justru nginget pelajaran pas kamu lagi istirahat — besok lanjut lagi, streak tetap aman.

  • ✓

    Pemanasan 5 menit: sebelum mulai bab baru, mampir dulu ke tab 🔁 Ulangan. Dia nguji ulang bab-bab lamamu secara acak — soal yang pernah kamu jawab salah bakal muncul lagi sampai benar. Kayak atlet pemanasan dulu sebelum latihan inti: bab lamanya kesegarkan, bab barunya jadi lebih gampang masuk.

3

Kenali senjatamu — cara pakai tiap fitur

Semua alatnya udah disiapin. Ini fungsi masing-masing, dan kapan dipakai.

✏️ Editor + Hasil

Di tiap bab dan misi ada kotak kode dan kotak hasil di sebelahnya. Di PC dua-duanya berdampingan; di HP pakai tombol alih Kode / Hasil. Hasilnya berubah sendiri tiap kamu ngetik — jadi eksperimen itu gratis, nggak ada yang rusak.

⌨️ Overlay Perintah

Referensi cepat yang muncul saat dibutuhkan: ketik < di kotak HTML atau huruf awal perintah di kotak CSS. Di PC, tekan Ctrl+K buat buka paletnya, panah + Enter buat milih, Esc buat nutup, dan Ctrl+Enter buat jalanin kode. Isinya semua tag, semua properti, plus Aksi Cepat kayak salin dan reset kode.

🛟 Petunjuk Kesalahan

Kotak kecil di bawah editor. Kalau ada tag belum ditutup, kurung kurang, atau CSS salah ketik, dia menunjukkan letak kesalahannya dengan penjelasan yang mudah dipahami. Baca dia dulu sebelum panik — kebanyakan error pemula sumbernya cuma salah ketik satu huruf.

📖 Kamus

Lupa arti satu istilah? Buka tab Kamus, ketik namanya di kotak cari. Isinya semua tag dan properti umum, disajikan dengan penjelasan sederhana plus contoh singkat. Membuka kamus itu bukan menyontek — memang untuk dibuka; developer profesional pun rutin membuka referensi saat bekerja.

📋 Tab Semua Perintah

Daftar lengkap isi Overlay Perintah — semua tag HTML, properti CSS, dan Aksi Cepat — dijelaskan satu-satu dengan contoh dan tombol salin. Pakai buat belajar santai di luar sesi, atau pas kamu mau tahu “perintah buat itu apa ya namanya”.

Playground — Praktik Bebas

Di tab Praktik Bebas: editor bebas tanpa misi dan tanpa penilaian. Tempat mencoba ide di luar materi bab — bereksperimen di sini tidak ada konsekuensinya.

📋 Tombol Salin

Ada di tiap contoh kode dan editor, buat nyalin kode sekali ketuk — misalnya mau nyimpen hasil Proyek Mini-mu. Tapi ingat Aturan Emas nomor 1 di Langkah 5: buat belajar, ketik sendiri tetap jauh lebih nempel.

💾 Progres Tersimpan & Tersinkron Sendiri

Centang bab, misi, XP, streak, catatan, dan lencana tersimpan otomatis — nggak ada tombol simpan, nggak ada kunci, nggak ada login yang perlu diingat. Di versi Vercel, progresmu juga tersinkron antar perangkat lewat backend: belajar di PC, lanjut di HP, progresnya nyambung sendiri. Indikator kecil di bawah bar XP nunjukin statusnya — “Tersinkron” kalau udah aman di server, atau “Offline — tersimpan di perangkat ini” kalau lagi nggak ada koneksi (nanti tersinkron sendiri pas terhubung lagi). Tutup halamannya, buka lagi besok — semua lanjut dari tempat terakhir.

📝 Ujian Naik Level

Di tab Ujian: satu ujian buat tiap tingkat, isinya campuran soal pilihan ganda dan tugas kode kecil dari semua bab di tingkat itu. Kebuka begitu semua bab tingkat itu selesai. Lulus = nilai 80% ke atas — dan itu syarat resminya buat naik tingkat, dapet lencana tingkat, plus XP gede. Belum lulus? Kamu dikasih tahu bab mana yang perlu diulang, terus ujiannya bisa diulang sampai lulus.

🔁 Mode Ulangan

Di tab Ulangan: latihan pengingat dari semua bab yang udah selesai, dicampur acak — kuis dan tugas kode kecil. Soal yang pernah salah muncul duluan terus sampai kamu benar. Ada skor dan hitungan jawaban benar beruntunnya, dan tiap jawaban benar dapet +5 XP. Ini senjatamu melawan lupa — pakai 5 menit tiap sesi.

4

Kapan Proyek Mini, kapan Proyek Puncak

Bab itu belajar renangnya di kolam kecil. Proyek itu berenang beneran.

  • ✓

    Proyek Mini (di tab Proyek Mini) mulai dikerjakan begitu Tingkat Pemula tuntas (Bab 1–8) — fondasi HTML-mu udah cukup buat langkah-langkah awal halaman warung kopi. Habis itu dia jalan barengan sama bab: tiap selesai beberapa bab, kerjain 1 langkah proyek. Totalnya 11 langkah, dan kode langkah sebelumnya udah disiapin — kamu tinggal lanjutin nambah satu hal baru tiap langkah.

  • ✓

    Jangan nunggu 22 bab selesai semua baru mulai Proyek Mini — kelamaan, dan ilmu bab awal keburu dingin. Sambil jalan itu justru yang bikin nempel.

  • ✓

    Proyek Puncak itu ujian terakhirnya, paling akhir sendiri: bangun satu website lengkap dari nol, tanpa panduan langkah. Dia baru kebuka setelah 11 langkah Proyek Mini tuntas, dan paling enak dikerjakan setelah 22 bab selesai — karena dia minta semuanya sekaligus. Hadiahnya paling gede: +100 XP dan lencana 👑 Lulus Kelas Dewa.

5

Aturan Emas — tiga aturan yang nggak boleh dilanggar

Ini yang misahin “pernah baca tutorial” sama “beneran bisa”.

  • 1

    Ketik sendiri kodenya. Jangan cuma baca, jangan cuma menyalin. Tangan yang ngetik itu yang ngajarin otak. Kalau contohnya mau kamu pakai, tutup contohnya, terus ketik ulang dari ingatan — yang lupa, intip sebentar, tutup lagi, lanjut ketik.

  • 2

    Ada error? Baca petunjuknya, jangan langsung nyerah. Kotak Petunjuk Kesalahan dan daftar “Masih kurang:” pas ngecek misi itu petunjuk, bukan vonis. Benerin satu-satu dari yang paling atas. Browser memang diam pas ada error — jadi kamulah detektifnya: cek tag tutup, titik koma, sama ejaan perintahnya.

  • 3

    Kuis belum lulus atau misi belum beres = ulang babnya. Bukan lanjut maksa. Balik ke bab yang nyambung sama misi itu, baca lagi intinya, utak-atik lagi di editornya, baru coba lagi. Ngulang itu bukan mundur — ngulang itu caranya ilmu berubah jadi keahlian.

6

Target tiap tingkat — dan tanda kamu siap naik

Naik tingkat itu bukan soal udah berapa hari, tapi soal udah bisa apa.

🌱 Pemula · Bab 1–8

Target: bisa nulis satu halaman isi lengkap dari kosong — kerangka halamannya bener, ada judul, paragraf, link, gambar, dan daftar.

Tanda siap naik: 8 dari 8 bab hijau, kamu bisa ngetik ulang halaman sederhana tanpa lihat contoh, dan LULUS Ujian Pemula (nilai minimal 80%) di tab 📝 Ujian. Tanpa lulus ujian, tingkatnya belum resmi naik — bab selesai doang nggak cukup.

🔧 Menengah · Bab 9–16

Target: bisa bikin tabel dan formulir, ngelompokin isi pakai kardus <div>, dan mulai ngecat pakai CSS — tahu CSS-mu nempel pakai cara apa, bisa nunjuk pakai selector, dan milih warna yang persis.

Tanda siap naik: 8 dari 8 bab tingkat ini hijau, kuis-kuisnya lulus, Proyek Mini udah jalan beberapa langkah, dan LULUS Ujian Menengah (nilai minimal 80%). Gagal ujian bukan akhir dunia — hasilnya nunjukin bab mana yang perlu diulang, terus coba lagi.

👑 Mahir · Bab 17–22

Target: bisa ngatur jarak dan tata letak (box model, flexbox) sampai halaman kelihatan rapi beneran, dan nggak panik pas kode error — tahu cara bacanya.

Tanda siap lulus: 22 dari 22 bab hijau, LULUS Ujian Mahir (nilai minimal 80%), 13 misi latihan tuntas, Proyek Mini beres. Tinggal satu pintu: Proyek Puncak.

  • ✓

    Ujian itu syarat naik tingkat, bukan hiasan. Selesaiin semua bab satu tingkat, terus buka tab 📝 Ujian: soal pilihan ganda + tugas kode dari SEMUA bab tingkat itu. Nilai 80% ke atas = lulus: tingkat berikutnya resmi terbuka, lencana tingkatnya kamu dapet, XP gede masuk. Di bawah 80%? Hasilnya nunjukin bab-bab mana yang jadi sumber salahmu — ulang bab itu, terus ujian lagi. Bisa diulang sepuasnya.

  • ✓

    Ingatan itu dijaga pakai Mode Ulangan. Bab yang udah hijau jangan ditinggal gitu aja — tiap sesi, sisihkan 5 menit di tab 🔁 Ulangan. Soal-soalnya diambil acak dari semua bab yang udah selesai, dan soal yang pernah kamu jawab salah bakal nongol duluan terus sampai kamu bisa. Skor dan jawaban benar beruntunmu kelihatan di sana, jadi kamu tahu ingatanmu lagi kuat atau lagi kendor.

  • ✓

    Tes paling jujur sebelum naik tingkat: tutup aplikasinya, ambil kertas atau editor kosong, tulis ulang halamannya dari ingatan. Kebanyakan bisa? Naik. Masih banyak yang macet? Ulang tingkat itu — lebih cepat daripada maksa naik terus nyasar di atas.

  • ✓

    Lencana di rak 🏅 Lencana Pencapaian itu peta ceknya: “Lulus Ujian Pemula / Menengah / Mahir” buat tiap tingkat yang ujiannya lulus, “Lulus Semua Bab” buat 22 bab, sampai “👑 Lulus Kelas Dewa” buat Proyek Puncak. Lencana tingkat cuma kebuka dari lulus ujian — bukan dari nyelesaiin bab doang.

7

Alat-alat baru + shortcut + langkah berikutnya

Aplikasi ini dapet banyak alat baru. Ini cara pakai semuanya, sekali baca beres.

🔎 Pencarian Global

Kotak cari di bawah bar XP: cari apa aja — bab, misi, istilah Kamus, perintah, langkah proyek. Hasilnya bisa diklik dan kamu langsung loncat ke bagiannya. Lupa sesuatu itu bukan masalah lagi; yang penting tahu cara nyari.

🎯 Tantangan Harian

Satu soal kecil baru tiap hari, di bawah kotak pencarian. Jawab benar = +15 XP. Kerjain bareng pas buka aplikasi: streak 🔥-mu aman, otakmu kepanasan, XP nambah. Tiga untung sekali jalan.

🖥️ Console

Di tiap editor sekarang ada panel Console di samping (PC) atau di bawah (HP) hasil. Dia memeriksa kodemu langsung tiap kamu ngetik: ❌ error (tag belum ditutup, kurung kurang), ⚠️ peringatan (gambar tanpa alt, properti salah ketik + saran ejaan benarnya), ✅ pesan “kode valid” kalau bersih. Console itu gurumu yang paling sabar — baca dia tiap habis ngetik.

📝 Catatan Per Bab

Di bawah tiap bab ada kolom Catatan — tulis pakai katamu sendiri: “selector class pakai titik”, “jangan lupa titik koma”. Nulis ulang pakai kata sendiri itu cara tercepat nempel. Semua catatan terkumpul di tab Catatan, bisa dicari.

📊 Statistik Belajar

Tab Statistik: total XP, level, jumlah bab/misi/ujian selesai, akurasi jawaban, kalender 30 hari (hari yang kamu buka aplikasi ini kehijauan), dan target XP harian dengan cincin progres. Tetapkan target kecil — 50 XP sehari itu kira-kira 1 bab + 1 tantangan harian.

🃏 Kartu Kilat

Tab Kartu Kilat: istilah Kamus jadi kartu bolak-balik. Tebak artinya dulu, klik buat balik kartunya, terus tandai Sudah Hafal / Belum Hafal. Saring “Belum hafal aja” buat ngedrill yang masih licin. Pasangan pas buat Mode Ulangan: yang satu nguji nulis kode, yang ini nguji ingat istilah.

🖼️ Galeri Contoh

Tab Galeri: empat website jadi — portofolio, warung kopi, kartu nama, toko kue — dibangun cuma pakai ilmu dari 22 bab. Buka kodenya, salin, terus utak-atik di Playground Bebas. Ini caranya belajar dari karya jadi: bongkar, tiru, ubah.

🎓 Sertifikat Kelas Dewa

Beresin Proyek Puncak, dan di tab Proyek Mini kebuka Sertifikat Lulus Kelas Dewa: isi namamu, lihat sertifikatnya, cetak atau simpan jadi PDF. Bukti resmi — buat ditempel, disimpan, atau dipamerin.

💾 Progres Antar Perangkat

Di versi Vercel, progresmu tersinkron otomatis antar perangkat lewat backend — buka aplikasinya di PC atau HP, progresnya sama, tanpa perlu kamu lakukan apa pun. File JSON tetap ada sebagai cadangan manual: tombol Unduh Progresku (JSON) di bawah bar XP nyimpen progresmu jadi satu file, dan Impor Progres dari File buat mulihinnya kapan aja. Biasain unduh seminggu sekali buat cadangan ekstra.

⌨️ Semua Shortcut Keyboard (khusus PC)

Tangan nggak usah ninggalin keyboard. Ini semua shortcut yang beneran jalan di aplikasi ini:

ShortcutGunanya
Ctrl + KBuka Overlay Perintah dari kotak kode mana pun — palet referensi semua tag, properti, dan Aksi Cepat.
Ctrl + EnterJalankan / segarkan hasil kode yang lagi kamu ketik, tanpa pindah tangan ke mouse.
↑ ↓Pindah pilihan di Overlay Perintah yang lagi kebuka.
EnterAmbil perintah yang lagi kepilih di Overlay Perintah, langsung kesalin ke kodemu.
EscTutup Overlay Perintah (atau tutup Sertifikat yang lagi kebuka).
TabDi dalam kotak kode: bikin indentasi (geser kode ke kanan) — bukan pindah kotak, biar kodemu tetap rapi.

⚡ Sesudah Lulus: JavaScript

HTML itu kerangka rumah, CSS itu catnya — JavaScript itu listrik dan penghuninya: yang bikin halaman hidup dan bisa bereaksi pas diklik, diisi, digeser. Urutan belajarnya nanti: variabel (kotak penyimpan data) → fungsi (resep yang bisa dipanggil ulang) → event (kalau diklik, kerjakan ini) → ngutak-atik halaman langsung (DOM). Itu kursus berikutnya — sekarang tuntaskan dulu di sini sampai pegang Sertifikat Kelas Dewa. Di tab Belajar, di bawah Peta Jalan, ada demo JavaScript mungil yang bisa kamu klik-klik.

Udah baca sampai sini? Berarti kamu udah tahu jalannya — tinggal jalan. Satu bab, satu misi, satu hari. Mulai dari yang paling gampang: bab pertama.

Peta Jalan — tiga tingkat, kamu lagi di mana?

Semua 22 bab dibagi tiga tingkat: Pemula (fondasi HTML), Menengah (HTML lanjut + CSS dasar), dan Mahir (CSS tingkat lanjut). Kerjain berurutan — peta ini selalu nunjukin posisi kamu dan langkah berikutnya. Satu aturan penting: bab boleh diselesaikan kapan aja, tapi naik tingkat resminya harus lulus Ujian Naik Level di tab 📝 Ujian — semua bab tingkat itu selesai dulu, terus ujian dengan nilai minimal 80%.

⚡ Langkah Berikutnya: JavaScript — sihirnya website

Inget analogi rumah kita? HTML itu kerangkanya, CSS itu catnya — nah JavaScript itu listrik dan penghuninya: yang bikin lampu nyala pas saklar dipencet, pintu kebuka pas tombol diklik. HTML/CSS bikin halaman yang cantik tapi diam; JavaScript yang bikin dia hidup dan bisa diajak ngobrol. Tombol yang bereaksi, formulir yang ngecek isian, skor kuis yang nambah sendiri — semua yang “bergerak” di aplikasi ini (termasuk aplikasi ini sendiri!) itu kerjaan JavaScript.

Peta jalannya nanti, setelah HTML & CSS beres: (1) variabel — kotak buat nyimpen data; (2) fungsi — resep yang bisa dipanggil ulang; (3) event — “kalau tombol ini diklik, kerjakan itu”; (4) ngutak-atik halaman langsung (DOM). Nggak usah dihafal sekarang — ini cuma biar kamu tahu jalan pulangnya ke mana. Coba demo mungilnya di bawah: satu tombol, diklik, tulisan & warnanya berubah. Itu JavaScript lagi kerja.

Peta belajarmu

0 dari 22 bab selesai
Luar biasa! Semua bab selesai. Kamu sekarang resmi bisa bikin halaman web sendiri — dari kerangka sampai catnya. Coba unjuk gigi di Playground Bebas di bawah ya.

Tab Latihan — langsung praktik, bukan cuma baca

Di sini gurunya diam, tanganmu yang kerja. Tiap misi cuma minta satu hal kecil. Ketik kodemu, lihat hasilnya, lalu klik Cek Jawabanku. Salah? Tenang — nanti dikasih tahu bagian mana yang kurang, bukan cuma “salah”.

💡 Baru: Pas kamu ngetik < atau nama perintah di kotak kode, Overlay Perintah bakal muncul — di PC sebagai palet di tengah layar, di HP sebagai lembar bawah. Di PC bisa juga dibuka pakai Ctrl+K, dipilih pakai panah + Enter, dan Ctrl+Enter buat jalanin kode. Seperti referensi cepat yang muncul tepat saat dibutuhkan.

Kemajuan latihanmu0 dari 13 misi selesai
Hebat! Semua misi latihan selesai. Itu artinya kamu nggak cuma paham — kamu udah beneran bisa nulis kode sendiri dari kosong.

Ujian Naik Level — buktiin kamu beneran bisa

Selesaiin bab doang belum cukup buat naik tingkat — harus lulus ujiannya. Ada satu ujian buat tiap tingkat, dan isinya campuran soal pilihan ganda dan tugas kode kecil yang mencakup SEMUA bab di tingkat itu — tiap bab dapet satu soal pilihan ganda dan satu tugas kode, nggak ada bab yang diskip. Ujiannya kebuka begitu semua bab di tingkat itu selesai. Lulus kalau nilaimu 80% ke atas: tingkat berikutnya resmi terbuka, kamu dapet lencana tingkat dan XP gede. Belum lulus? Kamu dikasih tahu bab mana aja yang perlu diulang, dan ujiannya bisa diulang sampai lulus — nggak ada hukuman.

Mode Ulangan — jaga ingatan biar nggak nguap

Ilmu yang nggak pernah diulang itu kayak es di siang bolong: nguap pelan-pelan. Mode ini nguji ulang materi dari semua bab yang udah kamu selesaikan, dicampur acak: soal kuis dan tugas kode kecil. Soal yang pernah kamu jawab salah bakal muncul duluan terus, sampai kamu bisa jawab benar. Tiap jawaban benar dapet +5 XP. Enak dikerjain 5 menit sebelum mulai sesi baru, buat pemanasan.

Proyek Mini — bangun halaman warung beneran, langkah demi langkah

Ini ujungnya semua 22 bab: kamu bangun satu halaman warung kopi lengkap dari kosong sampai jadi. Tiap langkah cuma nambah satu hal baru, dan kode langkah sebelumnya sudah disiapin — kamu tinggal lanjutin. Kerjain berurutan ya, langkah berikutnya kebuka setelah yang ini beres.

Halaman warungmu0 dari 11 langkah selesai
🎉 Halaman warungmu JADI! Itu halaman web lengkap beneran — judul, cerita, pintu, foto, daftar menu, kardus, warna, jarak, sampai bingkai — semua dari 22 bab, semua hasil tanganmu sendiri. Salin kodenya dari langkah terakhir dan simpan baik-baik.

Kamus Lengkap — semua tag & perintah, bisa dicari

Kamus ini merangkum semua tag HTML dan properti CSS yang umum dipakai, masing-masing disajikan dengan penjelasan sederhana plus contoh singkat. Perlu mengingat kembali satu istilah? Ketik namanya di kotak cari — kamus ini memang dirancang untuk dibuka kapan saja sebagai referensi.

Nggak ketemu istilah itu di kamus. Coba kata lain — misalnya “warna”, “gambar”, “jarak”, atau “tombol”.

Semua Perintah — isi lengkap Overlay Perintah, dijelaskan satu-satu

Ini seluruh daftar perintah yang muncul di Overlay Perintah pas kamu ngetik di kotak kode — daftarnya sama persis, diambil dari sumber data yang sama, jadi nggak ada satu pun yang ketinggalan: Tiap perintah dilengkapi penjelasan sederhana, contoh kode, dan tombol salin. Beda sama Kamus yang isinya istilah pilihan, tab ini isinya semua perintah.

Nggak ada perintah yang cocok sama pencarian itu. Coba kata lain — misalnya “warna”, “jarak”, “gambar”, “flex”, atau “salin”.

Statistik Belajar — bukti jalannya, bukan perasaan

Semua angka belajarmu dikumpulin di satu tempat: XP, level, bab dan misi yang beres, akurasi jawabanmu, sampai kalender hari-hari kamu buka aplikasi ini. Kalau lagi ngerasa “kok aku nggak maju-maju ya”, lihat halaman ini — angkanya nggak bohong.

Semua Catatan — terkumpul dari setiap bab

Di bawah tiap bab ada kolom catatan. Semua yang pernah kamu tulis di sana ngumpul di sini. Lupa pernah nyatet apa? Cari aja pakai kata kuncinya. Klik Buka Bab buat balik ke babnya dan lanjutin catatannya di sana.

Galeri Contoh — website jadi, dibangun cuma pakai ilmu dari aplikasi ini

Empat contoh website yang udah jadi — dan semuanya cuma pakai tag dan properti yang udah kamu pelajari di 22 bab: nggak ada sihir, nggak ada ilmu dari luar. Lihat hasilnya langsung, buka kodenya, salin kalau mau kamu utak-atik di Playground Bebas. Ini bukti: ilmu yang kamu punya sekarang udah cukup buat bikin website beneran.

Kartu Kilat — hafalin istilah pakai kartu bolak-balik

Semua istilah dari Kamus, dibikin kartu. Depan kartunya istilahnya — coba tebak dulu artinya di kepala. Klik kartunya buat balik dan lihat penjelasan sederhananya + contohnya. Habis itu jujur sama diri sendiri: tandai Sudah Hafal atau Belum Hafal. Yang belum hafal bisa disaring dan diulang terus sampai nempel.

Playground Bebas

Udah nggak ada guru di sini. Tulis HTML di kiri, CSS di tengah, hasilnya langsung muncul. Salah? Nggak apa-apa — namanya juga lagi main. Coba contoh siap pakai kalau lagi buntu.

Hasil berubah sendiri setiap kamu ngetik. Nggak ada tombol simpan — ini cuma tempat main, jadi bebas berantakan.

💡 Di kotak HTML ketik <, di kotak CSS ketik huruf awal perintah (misal bac buat background-color) — Overlay Perintah bakal nongol. Di PC: Ctrl+K buka palet perintahnya, Ctrl+Enter jalanin kode. Daftarnya super lengkap: semua tag & properti, plus Aksi Cepat kayak Salin Kode dan Reset Kode.

Referensi Kilat

Lupa itu wajar. Ini ringkasan referensi — semua yang sudah kamu pelajari, disajikan dengan penjelasan sederhana. Boleh dibuka kapan saja sebagai bahan rujukan.

Tag HTML — label-label isi

  • <h1>Judul paling gede, kayak judul koran
  • <p>Tulisan biasa, satu paragraf
  • <a>Pintu ke halaman lain (link)
  • <img>Gambar — tag sendirian, nggak punya pasangan tutup
  • <ul> <li>Daftar belanjaan: wadah + isinya
  • <div>Kardus kosong buat ngelompokin apa aja
  • <button>Tombol beneran yang bisa diklik
  • <table> <tr> <td>Tabel: wadah, baris, kotak — kayak daftar harga
  • <form> <input>Formulir: kotak isian buat pengunjung
  • <span>Kardus mungil di dalam kalimat (inline)

Properti CSS — perintah penampilan

  • colorWarna tulisannya
  • background-colorWarna latar di belakangnya
  • font-sizeSeberapa gede tulisannya
  • text-alignTulisannya rata kiri, tengah, atau kanan
  • paddingBantal di dalam kotak — isi menjauh dari pinggir
  • marginJarak halaman — kotak menjauh dari tetangganya
  • borderGaris pinggir, kayak bingkai foto
  • border-radiusSudutnya dibikin bulat, nggak tajam
  • .class / #idSelector: titik buat class (grup), pagar buat id (satu-satunya)
  • #FF0000 / rgb()Kode warna persis: hex 6 angka, atau takaran rgb
  • display: flexNata kotak berjajar rapi ke samping