Web frontend

Pahami peran HTML sebagai pondasi setiap halaman web.

Siapkan dua alat utama: tempat menulis dan tempat melihat hasil.

Kenali kerangka yang dibutuhkan setiap halaman web.

Bongkar anatomi kode HTML menjadi tiga bagian intinya.

Susun jenjang judul halaman dari h1 sampai h6.

Tulis blok teks dengan p dan atur rata kanan-kirinya.

Tebalkan, miringkan, dan tandai teks dengan tag format.

Hubungkan halaman dan situs dengan tag a dan href.

Susun daftar berurutan dan tak berurutan dengan ol dan ul.

Tampilkan data baris-kolom dengan table, tr, th, dan td.

Sisipkan gambar dengan img, src, dan alt.

Tampilkan halaman lain di jendela dalam halamanmu.

Susun halaman memakai header, main, article, dan footer.

Beri tanda pada elemen agar bisa diatur CSS dan JavaScript.

Kumpulkan masukan dengan label dan input yang jelas.

Sisipkan simbol dengan kode entity dan number.

Kenali CSS sebagai lapisan desain di atas HTML.

Inline, internal, dan external — beserta alasan memilihnya.

Pilih px, %, em, rem, atau vw sesuai kebutuhan.

Hex, rgb, hsl, transparansi, dan currentColor.

Pilih elemen yang tepat dan pahami aturan yang menang.

Kombinator, pseudo-class struktural, dan selektor atribut.

Sisipkan konten dekoratif tanpa menambah HTML.

Warnai latar halaman atau jadikan gambar sebagai latar.

Perataan, kapitalisasi, dekorasi, hingga jarak antar huruf.

Jenis, ukuran, ketebalan, gaya, sampai font unduhan sendiri.

Empat status tautan dan mengubahnya menjadi tombol.

Bedakan margin di luar dan padding di dalam elemen.

Delapan gaya garis, tebal, warna, dan bentuk ringkasnya.

Beri kedalaman pada kartu, tombol, dan fokus input.

Static, relative, fixed, dan absolute beserta kegunaannya.

Atur elemen mana tampil di atas ketika bertumpuk.

Bungkus teks di sekitar gambar dan elemen lain.

Kelola isi yang tak muat: gulir, sembunyikan, atau elipsis.

Paksa media mengisi kotak tanpa rusak proporsinya.

Ganti penanda list: kotak, lingkaran, romawi, atau hilang.

Susun baris-kolom lentur dengan display: flex.

Tata letak dua dimensi dengan baris dan kolom bernama.

Tiga cara menengah: teks, blok, dan segalanya.

Simpan nilai yang bisa dipakai ulang di seluruh lembar gaya.

Hitung ukuran langsung di dalam CSS.

Ubah gaya berpindah lembut, bukan mendadak.

Geser, putar, skala, dan miringkan tanpa mengganggu layout.

Gerak berurutan multi-langkah dengan keyframes.

Gunakan grid dan media query untuk layar berbeda.

Ubah tabel polos menjadi tabel modern berbaris zebra.

Sejarah singkat, let vs const vs var, dan console.

7 tipe primitif + object, typeof, konversi otomatis.

Aritmetika, perbandingan, logika, ternary, nullish, optional chaining.

if/else, switch, ternary, truthy/falsy.

for, while, for-of, for-in, break/continue.

Template literal, method umum, tag template.

parseInt, parseFloat, NaN, Infinity, Math object, Number formatting.

Kunci unik, well-known symbols, dan use case-nya.

Tiga cara mendefinisikan fungsi + parameter default + rest.

Lexical scope, closure, IIFE — fondasi JavaScript.

Fungsi sebagai argumen — fondasi array method dan event handler.

Transformasi dan agregasi koleksi secara fungsional.

Bongkar array/objek ke variabel + kumpulkan sisanya.

Tangkap error tanpa crash + throw dan custom Error.

yield untuk lazy sequence + fungsi yang memanggil diri sendiri.

Iterable, iterator, next(), dan membuat custom iterable.

Literal, properti, method, this, computed key.

Konversi objek↔array, assign, freeze, hasOwn.

__proto__, Object.create, pewarisan berbasis prototype.

class, constructor, method, static, getter/setter.

Pewarisan class, super(), method override.

Private #, static initializer, mixin pattern.

Map (kunci apa pun) dan Set (nilai unik).

Buat, format, dan bandingkan tanggal.

Konversi objek↔string dengan replacer dan reviver.

Literal, index, push/pop, splice, slice, length.

Sort comparator, flat, at, findLast, Array.from.

Konversi iterable/array-like ke array + generator ke array.

Literal, test, exec, match, pola umum.

Named group, lookbehind, replace dengan fungsi.

setTimeout, callback, event loop — kenapa async ada.

Chaining, error handling, Promise.all/race/allSettled.

Async function, await, try/catch untuk error.

fetch, Response, JSON, POST dengan body.

Named export, default export, dynamic import.

Intersep operasi objek + API refleksi terpadu.

console.table, debugger, kesalahan klasik JavaScript.

BOM: window.alert, document.title, navigator, location.

getElementById, querySelector, querySelectorAll.

Buat, sisip, hapus elemen secara dinamis.

Ubah CSS dari JavaScript: kelas, inline style, custom property.

Klik, mouseover, keyboard — interaktivitas dimulai di sini.

target, preventDefault, stopPropagation, event delegation.

Input, select, textarea, validasi, submit event.

Navigasi pohon DOM: parentElement, children, nextElementSibling.

Simpan data di browser — bertahan setelah refresh.

Ambil data dari API tanpa reload + update DOM.

Trigger CSS transition dari JS + requestAnimationFrame.

CRUD lengkap dengan localStorage dan event delegation.

UI + event + state management sederhana.