Kursus Coding Web

Pelajaran 1 • Kontrol Versi dengan Dasar-Dasar Git

Mengajarkan alur kerja init, add, commit, dan push untuk melacak perubahan kode. Memastikan siswa dapat menyimpan dan memulihkan pekerjaan sejak awal.

Pelajaran 2 • Menyiapkan Editor Kode Anda

Menginstal dan mengonfigurasi editor kode modern dengan ekstensi penting. Secara langsung memungkinkan pengkodean yang efisien selama kursus.

Pelajaran 3 • Sistem Berkas dan Struktur Proyek

Menjelaskan hierarki folder, konvensi penamaan berkas, serta jalur relatif dan absolut. Mencegah tautan rusak dan proyek yang tidak terorganisir.

Pelajaran 4 • Menggunakan Alat Developer Browser

Memperkenalkan panel Elements, Console, dan Network untuk memeriksa halaman langsung. Membangun kebiasaan debugging yang digunakan di setiap bab selanjutnya.

Pelajaran 1 • Formulir HTML dan Tipe Input

Membangun formulir dengan label, input, select, textarea, dan tombol submit. Meletakkan dasar untuk pengumpulan data pengguna yang dibahas di bab selanjutnya.

Pelajaran 2 • Tautan, Gambar, dan Media

Menjelaskan tag jangkar, atribut gambar, dan elemen media tertanam. Menghubungkan halaman dan aset menjadi satu dokumen yang kohesif dan dapat dijelajahi.

Pelajaran 3 • Daftar, Tabel, dan Struktur Data

Mengajarkan daftar berurutan, tidak berurutan, dan definisi serta markup tabel yang mudah diakses. Mempersiapkan siswa untuk menyajikan data terstruktur dengan benar.

Pelajaran 4 • Anatomi Dokumen HTML

Menguraikan bagian DOCTYPE, head, dan body beserta metadata yang diperlukan. Menetapkan kerangka dasar yang akan diikuti oleh setiap berkas HTML dalam kursus ini.

Pelajaran 5 • Elemen Semantik HTML5

Memperkenalkan elemen header, nav, main, article, section, aside, dan footer. Meningkatkan aksesibilitas dan interpretasi mesin pencari terhadap konten halaman.

Pelajaran 1 • CSS Box Model

Menjelaskan lapisan konten, padding, border, dan margin serta perilaku box-sizing. Menyelesaikan kebingungan tata letak paling umum yang dialami pemula.

Pelajaran 2 • Sintaks dan Selektor CSS

Mencakup aturan set, deklarasi, serta selektor class, ID, dan elemen. Menetapkan mekanisme penargetan untuk semua pekerjaan styling ke depan.

Pelajaran 3 • Latar Belakang, Border, dan Bayangan

Menerapkan gambar latar, gradien, gaya border, dan box shadow. Menambahkan kedalaman visual dan polesan pada komponen halaman.

Pelajaran 4 • Warna, Tipografi, dan Unit

Mengajarkan nilai warna hex, RGB, dan HSL serta properti font dan unit CSS. Memungkinkan keputusan desain visual yang konsisten di seluruh proyek.

Pelajaran 1 • Positioning dan Z-Index

Mencakup positioning absolute, fixed, dan sticky serta konteks susun. Memungkinkan overlay, sticky header, dan dialog modal.

Pelajaran 2 • Desain Responsif dan Media Queries

Menerapkan breakpoint dan unit fluid untuk menyesuaikan tata letak di berbagai ukuran layar. Menghasilkan desain mobile-first yang berfungsi di perangkat apa pun.

Pelajaran 3 • Dasar-Dasar CSS Grid

Mendefinisikan template grid, baris, kolom, dan properti gap untuk tata letak dua dimensi. Memungkinkan struktur halaman kompleks yang tidak dapat dicapai dengan Flexbox saja.

Pelajaran 4 • Mode Tampilan dan Normal Flow

Meninjau nilai display block, inline, dan inline-block serta aliran dokumen. Memberikan dasar yang diperlukan untuk memahami kapan Flexbox atau Grid diperlukan.

Pelajaran 1 • Loop dan Iterasi

Mengajarkan loop for, while, dan for...of untuk mengulangi operasi pada data. Mempersiapkan siswa untuk memproses array dan koleksi secara efisien.

Pelajaran 2 • Variabel, Tipe Data, dan Operator

Memperkenalkan let, const, tipe primitif, serta operator aritmatika dan perbandingan. Membangun fondasi penanganan data untuk semua kode JavaScript.

Pelajaran 3 • Array dan Objek

Mencakup metode array dan object literal untuk menyimpan dan memanipulasi data terstruktur. Secara langsung mendukung manipulasi DOM dan penanganan data API di bab selanjutnya.

Pelajaran 4 • Fungsi dan Scope

Mendefinisikan deklarasi fungsi, ekspresi, arrow function, dan lingkup variabel. Memungkinkan blok kode yang dapat digunakan kembali dan modular di seluruh proyek.

Pelajaran 1 • Delegasi Event dan Propagasi

Menjelaskan pola bubbling, capturing, dan delegasi untuk penanganan event yang efisien. Mencegah kebocoran memori dan menyederhanakan interaksi daftar dinamis.

Pelajaran 2 • Memilih dan Melintasi DOM

Menggunakan querySelector, getElementById, dan metode traversal parent/child. Memungkinkan penargetan yang tepat pada elemen apa pun di halaman langsung.

Pelajaran 3 • Membuat dan Menghapus Node DOM

Membangun elemen baru dengan createElement dan menyisipkan atau menghapusnya secara dinamis. Memungkinkan rendering daftar, pembuatan modal, dan pola UI dinamis.

Pelajaran 4 • Memodifikasi Elemen dan Konten

Mengubah teks, HTML, atribut, dan kelas CSS pada elemen yang dipilih. Menghasilkan pembaruan halaman yang terlihat tanpa memuat ulang browser.

Pelajaran 1 • Promise dan Chaining

Membuat dan merangkai Promise menggunakan .then() dan .catch() untuk tugas asinkron berurutan. Mengganti callback bersarang dengan kode yang mudah dibaca dan linier.

Pelajaran 2 • Merender Data API ke DOM

Memetakan array JSON yang diambil ke elemen HTML yang dihasilkan secara dinamis. Menyelesaikan pipeline data-fetch-to-display penuh dalam proyek yang berfungsi.

Pelajaran 3 • Mengambil Data dengan Fetch API

Mengirim permintaan GET dan POST ke REST API dan menguraikan respons JSON. Memungkinkan tampilan data waktu nyata dari layanan eksternal.

Pelajaran 4 • Sintaks Async/Await

Menulis ulang rangkaian Promise menggunakan fungsi async dan ekspresi await. Menghasilkan kode yang lebih bersih dan tampak sinkron untuk alur kerja asinkron yang kompleks.

Pelajaran 1 • Mengimplementasikan Fitur JavaScript

Menambahkan manipulasi DOM, penanganan event, dan integrasi API ke dalam proyek. Mengubah shell statis menjadi aplikasi yang sepenuhnya interaktif.

Pelajaran 2 • Deploy ke Hosting Live

Menerbitkan proyek yang sudah selesai ke platform hosting statis menggunakan deployment berbasis Git. Menghasilkan URL yang dapat dibagikan untuk portofolio dan lamaran pekerjaan.

Pelajaran 3 • Menguji dan Debugging Aplikasi

Menggunakan DevTools, pencatatan konsol, dan kasus uji manual untuk menemukan dan memperbaiki bug. Memastikan aplikasi berfungsi dengan benar sebelum deployment.

Pelajaran 4 • Membangun Fondasi HTML dan CSS

Menyusun markup semantik dan tata letak responsif untuk shell aplikasi. Menerapkan semua keterampilan HTML dan CSS sebelumnya dalam basis kode yang terpadu.