Dari kerangka dokumen sampai halaman portofolio yang rapi, aksesibel, dan siap dipamerkan
- Untuk siapa
- Usia 12–99 tahun (SMA)
- Tingkat
- Pemula
- Yang dibuat
- Halaman portofolio pribadi dengan struktur semantik, navigasi, tabel, formulir kontak, dan gambar beralt yang kamu tulis sendiri
- Lama belajar
- 8j 53m, 53 aktivitas
- Perangkat
- Cukup laptop atau tablet, tanpa alat tambahan
- Sertifikat
- Ada, setelah lulus ujian akhir
Untuk siapa: remaja 12 tahun ke atas dan dewasa yang belum pernah menulis kode, atau yang pernah mencoba HTML tapi ingin memahaminya dengan benar. Cukup bisa mengetik dan punya browser.
Apa yang dipelajari: cara kerja web, kerangka dokumen dan metadata, HTML semantik, heading dan landmark, teks dan tautan, daftar, navigasi dan skip link, tabel data, formulir yang terhubung dengan label, gambar dan media yang beralt, serta elemen interaktif bawaan seperti details dan dialog. Aksesibilitas dibahas di setiap modul, bukan ditempel di akhir.
Cara belajarnya: 7 modul seperti kelas pemula pada umumnya: materi, contoh yang bisa langsung dipratinjau, latihan yang dinilai otomatis oleh sistem, rangkuman, dan kuis di setiap modul.
Hasilnya: situs Warung Bu Siti yang kamu bangun sedikit demi sedikit, dan sebuah halaman portofolio pribadi yang lulus pemeriksaan otomatis dan siap jadi fondasi kursus CSS.
Modul 1 — Mengenal Web dan HTML
menu_bookCara Kerja Web: Dari Alamat sampai Halaman TampilGratis6m
menu_bookPersiapan: Teks Editor, Browser, dan DevToolsGratis5m
menu_bookOverview HTML — Fondasi Web14m
menu_bookStruktur Dokumen HTML9m
menu_bookMetadata — Kartu Identitas Halaman11m
codeLatihan: Kerangka Dokumen Beranda Warung15m
menu_bookRangkuman Modul 14m
quizKuis Modul 110m
Modul 2 — Kerangka Halaman yang Bermakna
menu_bookPembuka Modul 2: Halaman yang Bisa Dibaca Mesin4m
menu_bookSemantic HTML — Menulis yang Bermakna10m
menu_bookHeadings & Sections — Kerangka Isi Halaman8m
codeLatihan: Dari Div-Soup ke Halaman Semantik20m
menu_bookAtribut Global & Data Attributes10m
menu_bookRangkuman Modul 24m
quizKuis Modul 210m
Modul 3 — Teks dan Tautan
menu_bookPembuka Modul 3: Kata yang Tepat, Tautan yang Jelas4m
menu_bookDasar Teks — Paragraf, Penekanan & Kutipan8m
menu_bookTeks Sebaris (Inline Text) — Makna di Dalam Kalimat8m
menu_bookLinks — Tautan Anchor9m
codeLatihan: Pengumuman dan Kontak Warung20m
menu_bookRangkuman Modul 34m
quizKuis Modul 310m
Modul 4 — Daftar, Navigasi, dan Tabel
menu_bookPembuka Modul 4: Menyusun Informasi yang Banyak4m
menu_bookLists — Daftar ul, ol, dl8m
menu_bookNavigation — Nav, Breadcrumb & Skip Link10m
codeLatihan: Navigasi, Breadcrumb, dan Skip Link20m
menu_bookTabel HTML — Data Baris dan Kolom yang Rapi8m
codeLatihan: Tabel Jadwal Menu Spesial15m
menu_bookRangkuman Modul 44m
quizKuis Modul 410m
Modul 5 — Formulir, Gambar, dan Media
menu_bookPembuka Modul 5: Halaman yang Menerima dan Menampilkan5m
menu_bookFormulir HTML — Jembatan Antara Pengguna dan Sistem9m
menu_bookApa yang Terjadi Saat Formulir Dikirim?5m
codeLatihan: Formulir Pesan Nasi Kotak25m
menu_bookGambar HTML — Cepat, Tajam, dan Bermakna9m
codeLatihan: Galeri Menu dengan Gambar Beralt15m
menu_bookAudio dan Video HTML — Media yang Ramah Semua Orang9m
menu_bookRangkuman Modul 54m
quizKuis Modul 510m
Modul 6 — Interaksi dan Aksesibilitas Keyboard
menu_bookPembuka Modul 6: Uji Halamanmu Tanpa Mouse4m
menu_bookFokus dan Navigasi Keyboard — Semua Bisa Dipakai Tanpa Mouse8m
menu_bookDetails dan Summary — Akordeon Bawaan Browser8m
codeLatihan: FAQ Warung dengan details dan summary15m
menu_bookDialog HTML — Modal yang Benar Tanpa Pustaka8m
codeLatihan: Dialog Konfirmasi Pembayaran20m
menu_bookTemplate, Slot, dan Shadow DOM — Cetakan Komponen Web (Pengayaan)9m
menu_bookAPI HTML — Dari Tag Menjadi Objek yang Bisa Diprogram (Pengayaan)9m
menu_bookRangkuman Modul 64m
quizKuis Modul 610m
Modul 7 — Proyek Akhir: Halaman Portofolio
menu_bookBrief Proyek Akhir: Halaman Portofolio-mu5m
codeProyek Akhir: Halaman Portofolio45m
menu_bookPenutup: Langkah Setelah HTML Fundamental5m
quizUjian Akhir HTML Fundamental10m
