Kursus HTML CSS dan JavaScript

Pelajaran 1 • Menyediakan Persekitaran Pembangunan Anda

Memasang dan mengkonfigurasi penyunting kod, alat pembangun pelayar, dan struktur fail tempatan. Memastikan setiap pelajar mempunyai ruang kerja yang serupa dan berfungsi.

Pelajaran 2 • Kawalan Versi dengan Asas Git

Mengajar aliran kerja init, commit, dan push supaya pelajar menjejaki setiap projek dari hari pertama. Mewujudkan tabiat profesional sebelum kerumitan kod meningkat.

Pelajaran 3 • Cara Web Berfungsi

Meliputi komunikasi pelayan-klien, permintaan HTTP, dan saluran paip pemaparan pelayar. Mendasari semua keputusan pengekodan kemudian dalam tingkah laku pelayar sebenar.

Pelajaran 1 • Senarai, Pautan, dan Navigasi

Membina senarai bertertib, tidak bertertib dan penerangan serta elemen anchor dengan atribut. Corak ini membentuk tulang belakang struktur navigasi setiap laman web.

Pelajaran 2 • Elemen Teks dan Pengepala

Meliputi h1–h6, p, strong, em, dan blockquote untuk hierarki kandungan. Susunan pengepala yang betul secara langsung memberi kesan kepada navigasi SEO dan pembaca skrin.

Pelajaran 3 • Imej, Media, dan Figure

Membenamkan imej, audio, dan video dengan atribut yang betul untuk kebolehcapaian dan prestasi. Teks alt dan kapsyen dianggap sebagai wajib, bukan pilihan.

Pelajaran 4 • Elemen Susun Atur Semantik

Menggantikan div generik dengan header, main, section, article, aside, dan footer. Markup semantik meningkatkan kebolehbacaan mesin dan skor kebolehcapaian.

Pelajaran 1 • Kotak Model Diterangkan

Mengajar content, padding, border, dan margin sebagai empat lapisan setiap elemen. Penguasaan box-sizing menghalang pepijat susun atur sepanjang kursus.

Pelajaran 2 • Pembolehubah CSS dan Sifat Tersuai

Mentakrif dan menggunakan semula token reka bentuk melalui sifat tersuai CSS untuk helaian gaya yang boleh dikekalkan. Pembolehubah mengurangkan pengulangan dan membolehkan penukaran tema dalam projek kemudian.

Pelajaran 3 • Tipografi dan Warna

Menetapkan keluarga fon, saiz, berat, ketinggian baris, dan nilai warna menggunakan unit CSS moden. Skala jenis dan warna yang konsisten adalah asas sistem reka bentuk visual.

Pelajaran 4 • Pemilih CSS dan Kekhususan

Meliputi pemilih elemen, kelas, ID, atribut, dan pseudo-kelas dengan pengiraan kekhususan. Memahami kekhususan menghalang konflik lata dalam helaian gaya yang lebih besar.

Pelajaran 1 • Penempatan Grid dan Kawasan Dinamakan

Meletakkan item menggunakan nombor baris, kata kunci span, dan kawasan templat yang dinamakan. Kawasan dinamakan menjadikan susun atur kompleks mudah dibaca dan disusun semula.

Pelajaran 2 • Sifat Kontena Flexbox

Mengawal flex-direction, justify-content, align-items, dan flex-wrap pada induk. Sifat ini menentukan cara kanak-kanak diedarkan di sepanjang kedua-dua paksi.

Pelajaran 3 • Reka Bentuk Responsif dengan Pertanyaan Media

Menggunakan titik putus dan strategi mudah alih-terdahulu untuk menyesuaikan susun atur merentas saiz skrin. Menggabungkan Flexbox dan Grid dengan pertanyaan media untuk responsif sedia pengeluaran.

Pelajaran 4 • Asas CSS Grid

Mentakrifkan grid-template-columns, grid-template-rows, dan grid-gap untuk susun atur dua dimensi. Grid menyelesaikan masalah susun atur yang Flexbox kendalikan dengan janggal.

Pelajaran 1 • Pembolehubah, Jenis Data, dan Pengendali

Mengisytiharkan pembolehubah dengan let, const, dan var serta mengenal pasti jenis data primitif. Keutamaan pengendali dan paksaan jenis ditangani untuk mencegah pepijat biasa.

Pelajaran 2 • Fungsi dan Skop

Mentakrifkan fungsi dengan pengisytiharan, ungkapan, dan sintaks anak panah sambil menerangkan rantaian skop. Penguasaan skop menghalang kebocoran pembolehubah dan pepijat penutupan.

Pelajaran 3 • Objek dan Kaedah Objek

Membina objek dengan sifat dan kaedah, dan mengaksesnya melalui notasi titik dan kurungan. Objek memodelkan struktur data dunia sebenar yang digunakan dalam setiap aplikasi JS.

Pelajaran 4 • Tatasusunan dan Kaedah Tatasusunan

Mencipta dan memanipulasi tatasusunan menggunakan push, pop, map, filter, dan reduce. Kaedah tatasusunan berfungsi digunakan sepanjang manipulasi DOM dan kerja API.

Pelajaran 1 • Mengubah Suai Elemen dan Gaya

Menukar textContent, innerHTML, atribut, dan classList untuk mengemas kini halaman tanpa memuat semula. Teknik ini menggerakkan kemas kini UI secara langsung dalam aplikasi satu halaman.

Pelajaran 2 • Mencipta dan Mengalih Keluar Nod DOM

Membina elemen baharu dengan createElement, menambahkannya, dan mengalih keluar nod usang. Penciptaan nod dinamik membolehkan pemaparan senarai dan corak seperti komponen.

Pelajaran 3 • Delegasi Peristiwa dan Gelembung

Menggunakan gelembung peristiwa untuk melampirkan pendengar tunggal pada kontena induk untuk kanak-kanak dinamik. Delegasi mengurangkan penggunaan memori dan mengendalikan elemen yang dijana semasa masa jalan.

Pelajaran 4 • Memilih dan Merentasi DOM

Menggunakan querySelector, getElementById, dan sifat lintasan untuk menyasarkan elemen dengan tepat. Pemilihan yang tepat adalah asas semua tingkah laku halaman dinamik.

Pelajaran 1 • Sintaks Async/Await

Menulis semula rantaian Promise menggunakan fungsi async dan ungkapan await untuk kod yang boleh dibaca. Async/await adalah standard moden untuk semua aliran kerja berasaskan fetch.

Pelajaran 2 • Promise dan Rantaian Promise

Mencipta dan menggunakan Promise dengan .then(), .catch(), dan .finally() untuk kod tak segerak yang lebih bersih. Rantaian Promise menggantikan nested callback dalam operasi tak segerak berurutan.

Pelajaran 3 • Memaparkan Data API dalam DOM

Memetakan tatasusunan JSON yang diambil ke elemen HTML dan mengendalikan status pemuatan dan ralat secara visual. Menghubungkan pengambilan data tak segerak dengan manipulasi DOM dari bab sebelumnya.

Pelajaran 4 • Mengambil Data dengan Fetch API

Menghantar permintaan GET dan POST menggunakan fetch(), menghurai respons JSON, dan mengendalikan ralat. Fetch adalah alat asli pelayar untuk semua komunikasi REST API.

Pelajaran 1 • Penggunaan dan Semakan Kod

Menggunakan projek ke platform pengehosan statik dan menjalankan semakan kod rakan sebaya berstruktur. Penggunaan dan semakan mensimulasikan standard penyampaian profesional sebenar.

Pelajaran 2 • Menggayakan dengan CSS dan Susun Atur Responsif

Menggunakan sistem reka bentuk menggunakan pembolehubah CSS, Flexbox, dan Grid dengan responsif penuh. Reka bentuk visual yang konsisten menunjukkan penguasaan bab 3 dan 4.

Pelajaran 3 • Perancangan dan Seni Bina Projek

Mentakrifkan cerita pengguna, wireframe, dan pecahan komponen sebelum menulis kod. Perancangan menghalang skop creep dan mewujudkan aliran kerja pembangunan profesional.

Pelajaran 4 • Logik JavaScript dan Integrasi API

Melaksanakan panggilan fetch, pemaparan DOM, pengendalian peristiwa, dan pengurusan keadaan dalam JS vanila. Mengintegrasikan semua kemahiran JS dari bab 5, 6, dan 7 ke dalam satu pangkalan kod.