← Semua track
🧱

HTML

Fondasi semua halaman web. Dari elemen pertama sampai semantic HTML yang dipakai di dunia kerja.

±40 jam · 0/46 selesai (0%)

Modul 1: Dasar Dokumen HTML

Kenalan dengan elemen, atribut, dan struktur dasar halaman web.

9 bab dalam modul ini
  1. 1.1Apa itu HTML & cara browser membacanya
  2. 1.2Elemen, tag pembuka/penutup, dan nesting
  3. 1.3Heading h1–h6 dan hierarki dokumen
  4. 1.4Paragraf, line break, dan horizontal rule
  5. 1.5Atribut: id, class, dan atribut global
  6. 1.6Link (a, href, target) dan path relatif vs absolut
  7. 1.7Gambar (img, src, alt) dan format gambar web
  8. 1.8List: ul, ol, li, dan list bersarang
  9. 1.9Komentar & struktur dokumen lengkap (doctype, html, head, body)

Modul 2: Struktur Halaman & Semantic HTML

Struktur halaman yang dipakai di proyek nyata — penting untuk SEO, aksesibilitas, dan lolos code review.

7 bab dalam modul ini
  1. 2.1Kenapa semantic HTML penting (SEO, a11y, maintainability)
  2. 2.2header, nav, main, footer
  3. 2.3section vs article vs div — kapan pakai yang mana
  4. 2.4aside, figure, figcaption
  5. 2.5Elemen teks semantik: strong, em, mark, time, address
  6. 2.6blockquote, cite, dan code/pre untuk teknis
  7. 2.7Anatomi halaman nyata: membedah struktur situs populer

Modul 3: Tabel & Media

Menyajikan data tabular dan menyematkan media dengan benar.

6 bab dalam modul ini
  1. 3.1table, tr, th, td, dan caption
  2. 3.2thead, tbody, tfoot untuk tabel data nyata
  3. 3.3colspan & rowspan tanpa merusak aksesibilitas
  4. 3.4audio & video beserta atribut controls, autoplay, muted
  5. 3.5iframe: embed YouTube/Maps dengan aman (sandbox, loading)
  6. 3.6picture & source untuk responsive image

Modul 4: Formulir

Input, label, dan validasi bawaan — fondasi semua aplikasi web dari login sampai checkout.

9 bab dalam modul ini
  1. 4.1form, action, method — cara kerja pengiriman data
  2. 4.2input type: text, email, password, number, date, file
  3. 4.3label & hubungannya dengan input (for/id) — wajib untuk a11y
  4. 4.4textarea, select, option, optgroup
  5. 4.5checkbox & radio beserta pola name yang benar
  6. 4.6Validasi bawaan: required, minlength, pattern, min/max
  7. 4.7fieldset & legend untuk mengelompokkan form panjang
  8. 4.8button type: submit vs button vs reset
  9. 4.9Autocomplete & inputmode untuk UX mobile

Modul 5: Aksesibilitas (a11y)

Membuat halaman yang bisa dipakai semua orang — makin sering jadi requirement lowongan dan pertanyaan interview.

7 bab dalam modul ini
  1. 5.1Cara kerja screen reader & keyboard navigation
  2. 5.2Alt text yang baik vs buruk
  3. 5.3Heading hierarchy & landmark untuk navigasi cepat
  4. 5.4Kontras warna & ukuran target sentuh
  5. 5.5ARIA dasar: role, aria-label, aria-hidden — dan kapan TIDAK memakainya
  6. 5.6Focus management: tabindex, :focus-visible
  7. 5.7Audit dengan Lighthouse & axe DevTools

Modul 6: HTML untuk Dunia Kerja

Detail yang membedakan pemula dan profesional: metadata, SEO teknis, dan struktur proyek.

7 bab dalam modul ini
  1. 6.1head lengkap: meta charset, viewport, description
  2. 6.2Open Graph & Twitter Card untuk share di sosmed
  3. 6.3Favicon & manifest dasar
  4. 6.4Struktur folder proyek statis yang rapi
  5. 6.5Validasi HTML (W3C validator) & error umum
  6. 6.6data-* attribute — jembatan ke JavaScript
  7. 6.7Studi kasus: membedah HTML halaman produksi