Kursus Temu Duga Frontend
Kursus temu duga frontend berstruktur merangkumi JavaScript, HTML, CSS, React, pelayar, prestasi, kebolehcapaian dan keselamatan dengan soalan latihan.
Kemajuan kursus
0 / 5
Kembali ke kursus
Apa yang akan anda pelajari
- Memahami format temu duga.
- Menjelaskan JavaScript dan async.
- Mencipta HTML semantik dan CSS responsif.
- Menggunakan komponen dan hook React.
- Menambah baik prestasi, kebolehcapaian dan keselamatan.
Sebelum bermula
- Pengetahuan JavaScript dan HTML membantu.
- Disyorkan memahami asas React.
- Membina komponen UI kecil membantu latihan.
Pelajaran 1 Memahami Temu Duga Frontend
Temu duga frontend merangkumi JavaScript, HTML, CSS, React, pelayar, prestasi, kebolehcapaian dan keselamatan. Calon menerangkan konsep, menulis kod dan menyelesaikan masalah UI. Mulakan JavaScript, kemudian HTML dan CSS, React, akhirnya peristiwa, prestasi dan keselamatan. Terangkan event loop, key React dan Core Web Vitals. Kursus ini menyusun lima pelajaran dengan 60 soalan asli.
Contoh
Contoh: terangkan closure dan promise dalam asas JavaScript.Pelajaran 2 Asas JavaScript
Temu duga JavaScript bermula dengan asas: closure, hoisting, strict equality, promise, event loop, kaedah tatasusunan. Closure mengekalkan skop luar; === mengelak penukaran; promise mewakili async; event loop menjalankan microtask. map, filter, reduce penting; fungsi tulen tanpa kesan sampingan; immutability mencipta nilai baharu.
Contoh
Contoh: [1, 2, 3].map(n => n * 2) mengembalikan [2, 4, 6].Pelajaran 3 HTML, CSS dan Susun Atur
HTML semantik meningkatkan kebolehcapaian dan SEO. Kekhususan menentukan CSS menang. Box model: content, padding, border, margin. Flexbox satu dimensi, Grid dua dimensi. rem relatif root, em parent, vw lebar viewport, vh tinggi. Media query menjadikan responsif. position fixed guna viewport dan border-box termasuk padding.
Contoh
Contoh: gunakan CSS Grid untuk papan pemuka dengan bar sisi dan kawasan kandungan.Pelajaran 4 React dan Pelayar
React merangkumi komponen, props, state, hook dan render. useState, useEffect, useMemo ialah hook utama. Virtual DOM dan rekonsiliasi mengoptimumkan kemas kini; senarai perlukan key. Pelayar merangkumi DOM, peristiwa, event loop, microtask, kuki. Delegasi menggunakan satu listener induk; stopPropagation menghentikan bubbling; preventDefault menghentikan tindakan.
Contoh
Contoh: const [count, setCount] = useState(0) mencipta state pengira.Pelajaran 5 Prestasi, Kebolehcapaian dan Strategi
Soalan prestasi minta halaman lebih pantas. Debouncing melambat, throttling mengehad, lazy loading menangguhkan sumber. Core Web Vitals: LCP, INP, CLS. Kebolehcapaian: HTML semantik, ARIA, papan kekunci. Keselamatan: XSS, CSP, CORS. Jawab berstruktur: masalah, metrik, punca, penyelesaian.