Buku teks 25 bab untuk pemula

Belajar
Prinsip-Prinsip Front End.

Dari HTML, CSS, dan JavaScript sampai React, dibedah untuk pembaca yang belum pernah koding. Setiap bab punya demo hidup yang bisa dicoba langsung di halaman, tanpa setup apa pun.

25 bab Vanilla + React demo hidup 0 dari 25 selesai

Mulai dari Bab 0

Kuka memegang tiga kartu bertuliskan HTML, CSS, dan JavaScript. — Kuka, maskot seri ini, memegang tiga bahasa inti front end.

Daftar Isi

25 bab, urut dari dasar

00Siapkan AlatEditor, browser, dan DevTools. Semua yang kamu butuh sebelum menulis baris pertama.

01Apa Itu Front EndBagian halaman yang kamu lihat, dan bagaimana browser menyusunnya dari HTML, CSS, dan JavaScript.

02HTML: Struktur & SemantikKerangka halaman dengan tag yang bermakna, bukan sekadar tumpukan div.

03CSS: Selektor & Box ModelCara memilih elemen dan memahami kotak yang menyusun setiap bagian halaman.

04CSS Layout: Flex & GridMenyusun elemen dalam baris dan kolom dengan Flexbox dan Grid.

05ResponsifMembuat halaman tetap enak dibaca di layar kecil lewat media query dan unit relatif.

06JavaScript: Variabel, Tipe & Kontrol AliranBahasa yang membuat halaman hidup, mulai dari variabel sampai percabangan dan perulangan.

07Fungsi, Array & ObjekBlok bangunan JavaScript untuk mengorganisasi data dan logika.

08DOMPeta halaman yang bisa diubah JavaScript, dan cara mengubahnya.

09Event & DelegasiMenangkap klik dan ketikan, lalu menanganinya dengan rapi lewat delegasi.

10State di Sisi KlienMenyimpan data di browser dengan localStorage agar tetap ada setelah halaman ditutup.

11Fetch & AsyncMeminta data dari server dengan fetch dan menunggunya tanpa membekukan halaman.

12Merender DataMengubah data mentah menjadi daftar dan tampilan yang bisa dibaca pengguna.

13Form & ValidasiMengumpulkan input pengguna dan memastikan datanya benar sebelum dikirim.

14React: Mengapa Framework AdaKenapa kita butuh framework, dan masalah apa yang React pecahkan.

15React: JSX, Props & StateMenulis antarmuka sebagai komponen dengan JSX, props, dan state.

16React: Efek & Pengambilan DataMenjalankan efek samping dan mengambil data di dalam komponen React.

17React: Custom HooksMembungkus logika yang dipakai berulang menjadi hook sendiri.

18Routing di Front EndMemetakan URL ke halaman dan membuat navigasi antar-tampilan.

19AksesibilitasMembuat halaman bisa dipakai semua orang, termasuk lewat keyboard dan pembaca layar.

20Styling ModernDesign token dan variabel CSS untuk tema yang konsisten dan mudah diganti.

21PerformaMembuat halaman cepat dimuat dan terasa ringan, dari gambar sampai kode.

22Testing Front EndMemastikan kode tetap benar saat berubah, dengan unit dan integration test.

23Caching, PWA & OfflineMenyimpan aset di browser dan membuat halaman tetap jalan tanpa koneksi.

24Proyek PenutupMenyatukan semua teknik yang sudah dipelajari menjadi satu dashboard konsumsi API.

Cara Membaca Buku Ini

tiga kebiasaan

Urut dari Bab 0

Setiap bab membangun di atas bab sebelumnya. Mulai dari dasar, jangan lompat-lompat.

Jalankan demo hidup

Setiap bab punya blok interaktif yang memakai kode bab itu. Coba ubah, lihat hasilnya.

Vanilla dulu, React sesudahnya