0Pricing
HTML Academy icon

HTML Academy

HTMLWebFrontendBeginner

Bangun fondasi yang kuat dalam web development dengan belajar HTML di HTML Academy.

🤖 Bertenaga AI📚 40 kursus👥 100.000+ pelajar⭐ Rating 4,9
Ringkasan Kursus

HTML: Bahasa di Balik Setiap Halaman Web

HTML adalah fondasi struktural web — setiap tab browser, pengiriman form, dan video tersemat dimulai dengan markup. Track ini membangun fluensi sejati dalam HTML, dari aturan yang mengatur dokumen yang valid hingga browser API dan component model yang digunakan di situs produksi modern. Tujuannya bukan hanya menulis tag tetapi memahami mengapa setiap elemen ada dan apa yang disinyalkannya kepada browser, teknologi asistif, dan mesin pencari.

Apa yang Akan Anda Pelajari

Anda akan memulai dengan struktur dokumen, konten teks, link, gambar, dan list, kemudian lanjut ke tabel, form, dan atribut validasi form. Track ini mencakup elemen semantic HTML5, <head> dan metadata, audio dan video, serta dasar-dasar aksesibilitas termasuk role dan atribut ARIA. Kursus-kursus selanjutnya membahas custom data attribute, HTML template, elemen Canvas dan SVG, Web Storage, Drag and Drop API, SEO dan social meta tag, serta HTML email template. Bagian-bagian lanjutan membahas Shadow DOM, Web Component dan custom element, HTML module dan import map, progressive enhancement, internasionalisasi, keamanan, History dan Navigation API, Intersection Observer, dan membangun HTML untuk Progressive Web App.

Jalur Pembelajaran

Empat puluh kursus berkembang dari A1 melalui A2 dan B1 ke B2, diakhiri dengan capstone C1 tentang HTML at Scale. Kursus A1 dan A2 menetapkan hal-hal penting — struktur dokumen, elemen semantic, form, dan metadata. B1 memperkenalkan aksesibilitas, ARIA, Canvas, SVG, dan browser storage. B2 adalah blok terbesar, mencakup Web Component, Shadow DOM, performa, keamanan, internasionalisasi, dan Intersection Observer. Kursus C1 terakhir, HTML at Scale, membahas pola-pola dan batasan-batasan yang penting ketika HTML ditulis, diuji, dan dirawat di seluruh basis kode besar.

Cara Kerjanya

Setiap kursus dibagi menjadi pelajaran-pelajaran singkat yang interaktif, diselesaikan di editor kode bawaan dengan umpan balik real-time. Seorang tutor AI tersedia kapan pun Anda mengalami kesulitan, dan Anda maju dengan kecepatan Anda sendiri — setiap pelajaran berdiri sendiri sehingga Anda dapat kembali ke topik mana pun sebagai referensi nanti.

Mulai Belajar →

Cara Kamu Belajar

🎯
Pelajaran Interaktif
Latihan koding langsung dengan umpan balik real-time
🤖
AI Tutor
Dapatkan bantuan instan dari AI kami saat kamu stuck
💻
Editor Bawaan
Tulis dan jalankan kode langsung di browser kamu
🏆
Sertifikat
Raih sertifikat saat kamu menyelesaikan kursus
Kurikulum

40 Kursus

Setiap kursus di jalur belajar HTML Academy.

01

Struktur Dokumen HTML

A13 pelajaran

Pelajari cara browser mengurai HTML, fungsi DOCTYPE, serta cara elemen html, head, dan body mengatur setiap halaman web.

02

Elemen Konten Teks

A14 pelajaranPRO

Kuasai judul, paragraf, penekanan, elemen sebaris, dan pengaturan spasi kosong dengan tag teks HTML.

03

Tautan dan Navigasi

A14 pelajaranPRO

Bangun navigasi dengan elemen anchor, URL absolut dan relatif, tautan tab baru, serta pengenal fragmen.

04

Gambar dan Ilustrasi

A14 pelajaranPRO

Tampilkan gambar secara responsif dengan img, srcset, elemen picture, dan keterangan figure semantik.

05

Daftar

A14 pelajaranPRO

Buat daftar tak berurutan, berurutan, dan deskripsi dengan penyarangan serta makna semantik yang tepat.

06

Tabel

A24 pelajaranPRO

Bangun tabel data yang aksesibel dengan struktur yang tepat, sel yang membentang, dan bagian tabel.

07

Atribut HTML dan Atribut Global

A24 pelajaranPRO

Pahami atribut id, class, style, hidden, tabindex, dan data-* khusus yang digunakan pada semua elemen HTML.

08

Dasar-Dasar Formulir HTML

A24 pelajaranPRO

Bangun formulir web yang aksesibel dengan jenis input, label, tombol, serta atribut action dan method pada elemen form.

09

Kontrol Formulir Lanjutan

A24 pelajaranPRO

Sempurnakan formulir dengan menu tarik-turun, textarea, grup kotak centang, tombol radio, dan pelengkapan otomatis dengan datalist.

10

Atribut Validasi Formulir

A24 pelajaranPRO

Gunakan atribut validasi HTML5 seperti required, pattern, min, dan max untuk memvalidasi input pengguna sebelum pengiriman.

11

HTML5 Semantik

A24 pelajaranPRO

Ganti div generik dengan elemen HTML5 bermakna seperti header, nav, main, footer, article, dan section.

12

Elemen Semantik Lainnya

A24 pelajaranPRO

Pelajari aside, details, summary, progress, dan meter untuk menambahkan makna serta interaktivitas yang lebih kaya ke halaman.

13

Head HTML dan Metadata

A24 pelajaranPRO

Kuasai bagian head: title, tag meta, viewport, URL kanonis, direktif robots, dan favicon.

14

Elemen Audio dan Video

A24 pelajaranPRO

Sematkan audio dan video secara native dengan HTML5, sediakan berbagai format, dan tambahkan subtitel dengan track dan WebVTT.

15

Dasar-Dasar Aksesibilitas HTML

B14 pelajaranPRO

Pahami tingkat WCAG, hierarki judul, strategi teks alt, dan navigasi keyboard untuk halaman web yang inklusif.

16

Peran dan Atribut ARIA

B14 pelajaranPRO

Tingkatkan aksesibilitas dengan peran, label, dan deskripsi ARIA, serta aturan untuk selalu mengutamakan HTML native.

17

Atribut Data Khusus

B14 pelajaranPRO

Simpan dan akses metadata khusus pada elemen HTML menggunakan atribut data-*, API dataset, dan selektor CSS.

18

Templat HTML

B14 pelajaranPRO

Gunakan elemen template untuk mendefinisikan markup nonaktif, menggandakannya secara efisien, dan membandingkannya dengan rendering berbasi…

19

Elemen Canvas

B14 pelajaranPRO

Gambar bentuk, teks, dan gambar pada canvas 2D, lalu animasikan dengan requestAnimationFrame.

20

SVG dalam HTML

B14 pelajaranPRO

Sematkan grafik vektor yang dapat diskalakan secara sebaris, gunakan bentuk dasar, kendalikan viewBox, dan animasikan SVG dengan CSS.

21

iframe dan Konten Tersemat

B14 pelajaranPRO

Sematkan konten eksternal dengan iframe, pahami sandbox untuk keamanan, dan gunakan pemuatan lambat untuk meningkatkan kinerja.

22

Penyimpanan Web HTML

B14 pelajaranPRO

Simpan data sisi klien dengan localStorage dan sessionStorage, dengarkan peristiwa penyimpanan, dan ikuti panduan keamanan.

23

API Seret dan Lepas

B14 pelajaranPRO

Implementasikan interaksi seret dan lepas dengan API Seret dan Lepas HTML5 serta objek dataTransfer.

24

SEO dan Meta Sosial

B14 pelajaranPRO

Optimalkan halaman untuk mesin pencari dan berbagi di media sosial dengan OpenGraph, Twitter Cards, JSON-LD, dan hreflang.

25

Templat Email HTML

B14 pelajaranPRO

Buat HTML yang aman untuk email menggunakan tata letak berbasis tabel, gaya sebaris, dan teknik gambar lintas klien.

26

Pola ARIA Lanjutan

B24 pelajaranPRO

Implementasikan pola toggle, antarmuka tab, wilayah live, dan lakukan pengujian dengan pembaca layar nyata.

27

Kinerja HTML

B24 pelajaranPRO

Percepat pemuatan halaman dengan skrip async dan defer, petunjuk preload, gambar yang dimuat secara lambat, dan petunjuk sumber daya.

28

Elemen Khusus Web Components

B24 pelajaranPRO

Definisikan elemen HTML khusus yang dapat digunakan ulang dengan API Custom Elements, callback siklus hidup, dan atribut yang diamati.

29

DOM Bayangan

B24 pelajaranPRO

Enkapsulasi markup dan gaya di dalam Shadow DOM, distribusikan konten dengan slot, dan sediakan API gaya dengan part.

30

Modul HTML dan Peta Impor

B24 pelajaranPRO

Gunakan skrip modul ES, peta impor untuk specifier tanpa awalan, impor dinamis, dan konsep federasi modul.

31

Peningkatan Progresif

B24 pelajaranPRO

Bangun dengan peningkatan progresif: mulai dari HTML yang kokoh, tambahkan CSS dan JavaScript secara bertahap, lalu deteksi fitur dengan be…

32

Internasionalisasi

B24 pelajaranPRO

Siapkan HTML untuk audiens global dengan lang, dir, bdi, bdo, charset, dan dukungan teks dari kanan ke kiri.

33

Keamanan HTML

B24 pelajaranPRO

Lindungi halaman dari XSS, clickjacking, dan injeksi dengan CSP, sandbox, SRI, serta praktik penanganan HTML yang aman.

34

API Lanjutan Formulir HTML

B24 pelajaranPRO

Manfaatkan FormData, Constraint Validation API, pesan validitas khusus, dan pengelolaan status formulir.

35

API Riwayat dan Navigasi HTML

B24 pelajaranPRO

Kelola riwayat peramban dengan pushState, peristiwa popstate, dan Navigation API modern untuk perutean SPA.

36

Intersection Observer

B24 pelajaranPRO

Gunakan IntersectionObserver untuk menerapkan pemuatan malas, gulir tanpa akhir, dan pemicu animasi yang terkait dengan pengguliran.

37

HTML untuk PWA

B24 pelajaranPRO

Konfigurasikan aplikasi web progresif dengan manifes aplikasi web, pendaftaran pekerja layanan, dan halaman cadangan luring.

38

Validasi dan Pengujian HTML

B24 pelajaranPRO

Validasi markup dengan W3C Validator, audit HTML dengan Lighthouse, dan uji aksesibilitas dengan pa11y serta axe.

39

Masa Depan HTML

B24 pelajaranPRO

Pelajari pratinjau fitur HTML yang sedang berkembang: Declarative Shadow DOM, Popover API, selectlist, dan atribut command.

40

HTML dalam Skala Besar

C14 pelajaranPRO

Kelola HTML dalam proyek besar dengan ekstraksi komponen, templat sisi peladen, sistem desain, dan dokumentasi panduan gaya.

FAQ

Pertanyaan yang Sering Diajukan

Apakah kursus HTML Academy gratis?

Ya. Kamu bisa memulai kursus HTML Academy secara gratis dan menyelesaikan pelajaran interaktifnya tanpa biaya. Langganan PRO opsional membuka akses ke alat AI tingkat lanjut dan sertifikat yang bisa dibagikan.

Apakah aku perlu pengalaman sebelumnya untuk belajar HTML?

Tidak. Kursus dimulai dari dasar dan secara bertahap bergerak ke topik yang lebih canggih, jadi kamu bisa memulai meski tanpa pengalaman HTML sebelumnya.

Bagaimana cara aku belajar HTML di CoddyKit?

Kamu belajar dengan praktik. Pelajaran interaktif pendek memadukan penjelasan yang jelas dengan latihan koding langsung yang berjalan real-time, dan tutor AI 24/7 memberikan bantuan personal kapan pun kamu stuck.

Apakah aku dapat sertifikat saat menyelesaikan HTML Academy?

Ya. Pelajar PRO bisa mengikuti ujian dan meraih sertifikat penyelesaian yang bisa dibagikan dengan kode verifikasi untuk kursus HTML Academy.

Bisakah aku belajar HTML di ponselku?

Ya. CoddyKit tersedia di web dan sebagai aplikasi native iOS dan Android, jadi kamu bisa belajar HTML di perangkat apa pun dan progresmu tersinkronisasi di semuanya.

Mulai HTML Academy Sekarang

Bergabunglah dengan ribuan pelajar yang menguasai pemrograman dengan pelajaran bertenaga AI.

Mulai Gratis →Jelajahi Semua Kursus