|
|
4 months ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 5 months ago | |
| 2-js-basics | 7 months ago | |
| 3-terrarium | 7 months ago | |
| 4-typing-game | 7 months ago | |
| 5-browser-extension | 7 months ago | |
| 6-space-game | 7 months ago | |
| 7-bank-project | 7 months ago | |
| 8-code-editor/1-using-a-code-editor | 7 months ago | |
| 9-chat-project | 7 months ago | |
| 10-ai-framework-project | 7 months ago | |
| Git-Basics | 7 months ago | |
| docs | 7 months ago | |
| lesson-template | 4 months ago | |
| memory-game | 7 months ago | |
| quiz-app | 7 months ago | |
| .co-op-translator.json | 4 months ago | |
| AGENTS.md | 4 months ago | |
| CODE_OF_CONDUCT.md | 7 months ago | |
| CONTRIBUTING.md | 7 months ago | |
| README.md | 4 months ago | |
| Roadmap.md | 6 months ago | |
| SECURITY.md | 7 months ago | |
| SUPPORT.md | 7 months ago | |
| _404.md | 7 months ago | |
| for-teachers.md | 7 months ago | |
README.md
Pembangunan Web untuk Pemula - Kurikulum
Belajar asas pembangunan web dengan kursus komprehensif 12 minggu oleh Microsoft Cloud Advocates. Setiap daripada 24 pelajaran menyelami JavaScript, CSS, dan HTML melalui projek hands-on seperti terrarium, peluasan pelayar, dan permainan angkasa. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimakan pengekalan pengetahuan dengan pedagogi berasaskan projek yang berkesan. Mulakan perjalanan pengkodan anda hari ini!
Sertai Discord Azure AI Foundry dan temui pakar serta pembangun lain.
Ikuti langkah-langkah ini untuk mula menggunakan sumber-sumber ini:
- Fork Repositori: Klik
- Clone Repositori:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Sertai Azure AI Foundry Discord dan temui pakar serta pembangun lain
🌐 Sokongan Pelbagai Bahasa
Disokong melalui GitHub Action (Automatik & Sentiasa Dikemas Kini)
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
Lebih Suka Clone Secara Tempatan?
Repositori ini termasuk lebih 50+ terjemahan bahasa yang secara signifikan meningkatkan saiz muat turun. Untuk clone tanpa terjemahan, gunakan sparse checkout:
Bash / macOS / Linux:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'CMD (Windows):
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"Ini memberi anda semua yang anda perlukan untuk menamatkan kursus dengan muat turun lebih pantas.
Jika anda ingin terjemahan tambahan, bahasa yang disokong disenaraikan di sini. di sini
🧑🎓 Adakah anda pelajar?
Lawati Halaman Student Hub di mana anda akan dapati sumber permulaan, pek Pelajar dan juga cara untuk mendapatkan baucar sijil percuma. Ini adalah halaman yang anda ingin tandai dan semak dari masa ke masa kerana kami menukar kandungan setiap bulan.
📣 Pengumuman - Cabaran mod GitHub Copilot Agent Baru untuk diselesaikan!
Cabaran baru ditambah, cari "GitHub Copilot Agent Challenge 🚀" di kebanyakan bab. Itu cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan mod Agent. Jika anda belum pernah menggunakan mod Agent sebelum ini, ia mampu bukan sahaja menjana teks tetapi juga mencipta dan mengedit fail, menjalankan arahan dan banyak lagi.
📣 Pengumuman - Projek Baru untuk dibina menggunakan Generative AI
Projek Pembantu AI baru sahaja ditambah, semak projek
📣 Pengumuman - Kurikulum Baru tentang Generative AI untuk JavaScript baru sahaja dikeluarkan
Jangan terlepas kurikulum Generative AI kami yang baru!
Lawati https://aka.ms/genai-js-course untuk mula!
- Pelajaran meliputi segala dari asas hingga RAG.
- Berinteraksi dengan watak sejarah menggunakan GenAI dan aplikasi pendamping kami.
- Naratif yang menyeronokkan dan menarik, anda akan melakukan perjalanan masa!
Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda tentang topik seperti:
- Prompting dan kejuruteraan prompt
- Penjanaan aplikasi teks dan imej
- Aplikasi carian
Lawati https://aka.ms/genai-js-course untuk mula!
🌱 Memulakan
Guru, kami telah sertakan beberapa cadangan bagaimana untuk menggunakan kurikulum ini. Kami sangat menghargai maklum balas anda di forum perbincangan kami!
Pelajar, untuk setiap pelajaran, mulakan dengan kuiz pra-ceramah dan ikuti dengan membaca bahan ceramah, melengkapkan pelbagai aktiviti dan periksa pemahaman anda dengan kuiz pasca-ceramah.
Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan-rakan anda untuk bekerjasama dalam projek-projek! Perbincangan digalakkan di forum perbincangan kami di mana pasukan moderator kami akan sedia membantu menjawab soalan anda.
Untuk memperluaskan pendidikan anda, kami sangat mengesyorkan menerokai Microsoft Learn untuk bahan pembelajaran tambahan.
📋 Menyediakan persekitaran anda
Kurikulum ini mempunyai persekitaran pembangunan yang sedia digunakan! Semasa memulakan anda boleh memilih untuk menjalankan kurikulum dalam Codespace (persekitaran berasaskan pelayar tanpa perlu pasang apa-apa), atau secara tempatan pada komputer anda menggunakan penyunting teks seperti Visual Studio Code.
Cipta repositori anda
Untuk memudahkan anda menyimpan kerja anda, disarankan agar anda mencipta salinan repositori ini. Anda boleh lakukan ini dengan klik butang Use this template di atas halaman. Ini akan mencipta repositori baru dalam akaun GitHub anda dengan salinan kurikulum.
Ikuti langkah ini:
- Fork Repositori: Klik pada butang "Fork" di sudut kanan atas halaman ini.
- Clone Repositori:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Menjalankan kurikulum dalam Codespace
Dalam salinan repositori yang anda cipta, klik butang Code dan pilih Open with Codespaces. Ini akan mencipta Codespace baru untuk anda bekerja.
Menjalankan kurikulum secara tempatan pada komputer anda
Untuk menjalankan kurikulum ini secara tempatan pada komputer anda, anda akan memerlukan penyunting teks, pelayar dan alat baris perintah. Pelajaran pertama kami, Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan, akan membimbing anda melalui pelbagai pilihan untuk setiap alat ini supaya anda dapat memilih yang paling sesuai untuk anda.
Cadangan kami ialah menggunakan Visual Studio Code sebagai penyunting anda, yang juga mempunyai Terminal terbina dalam. Anda boleh muat turun Visual Studio Code di sini.
-
Klon repositori anda ke komputer anda. Anda boleh lakukan ini dengan mengklik butang Code dan menyalin URL:
Kemudian, buka Terminal dalam Visual Studio Code dan jalankan perintah berikut, gantikan
<your-repository-url>dengan URL yang baru anda salin:git clone <your-repository-url> -
Buka folder dalam Visual Studio Code. Anda boleh lakukan ini dengan mengklik File > Open Folder dan memilih folder yang baru anda klon.
Sambungan Visual Studio Code yang disyorkan:
- Live Server - untuk pratonton halaman HTML dalam Visual Studio Code
- Copilot - untuk membantu anda menulis kod dengan lebih pantas
📂 Setiap pelajaran termasuk:
- sketchnote pilihan
- video tambahan pilihan
- kuiz pemanasan sebelum pelajaran
- pelajaran bertulis
- untuk pelajaran berasaskan projek, panduan langkah demi langkah cara membina projek
- pemeriksaan pengetahuan
- cabaran
- bacaan tambahan
- tugasan
- kuiz pasca pelajaran
Nota tentang kuiz: Semua kuiz terkandung dalam folder Quiz-app, sebanyak 48 kuiz dengan tiga soalan setiap satu. Ia boleh didapati di sini serta aplikasi kuiz boleh dijalankan secara tempatan atau dikerahkan ke Azure; ikut arahan dalam folder
quiz-app.
🗃️ Pelajaran
| Nama Projek | Konsep Diajarkan | Objektif Pembelajaran | Pelajaran Berkaitan | Penulis | |
|---|---|---|---|---|---|
| 01 | Memulakan | Pengenalan kepada Pengaturcaraan dan Alat-alat Kerja | Pelajari asas di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional menjalankan kerja mereka | Pengenalan kepada Bahasa Pengaturcaraan dan Alatan Kerja | Jasmine |
| 02 | Memulakan | Asas GitHub, termasuk bekerja dengan pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain pada pangkalan kod | Pengenalan kepada GitHub | Floor |
| 03 | Memulakan | Kebolehcapaian | Pelajari asas kebolehcapaian web | Asas Kebolehcapaian | Christopher |
| 04 | Asas JS | Jenis Data JavaScript | Asas jenis data dalam JavaScript | Jenis Data | Jasmine |
| 05 | Asas JS | Fungsi dan Kaedah | Pelajari tentang fungsi dan kaedah untuk mengurus aliran logik aplikasi | Fungsi dan Kaedah | Jasmine dan Christopher |
| 06 | Asas JS | Membuat Keputusan dengan JS | Pelajari cara mencipta syarat dalam kod anda menggunakan kaedah membuat keputusan | Membuat Keputusan | Jasmine |
| 07 | Asas JS | Larik dan Gelung | Bekerja dengan data menggunakan larik dan gelung dalam JavaScript | Larik dan Gelung | Jasmine |
| 08 | Terrarium | HTML dalam Amalan | Bina HTML untuk mencipta terrarium dalam talian, fokus pada pembinaan tata letak | Pengenalan kepada HTML | Jen |
| 09 | Terrarium | CSS dalam Amalan | Bina CSS untuk menggayakan terrarium dalam talian, fokus pada asas CSS termasuk menjadikan halaman responsif | Pengenalan kepada CSS | Jen |
| 10 | Terrarium | Penutupan JavaScript, manipulasi DOM | Bina JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/jatuh, fokus pada penutupan dan manipulasi DOM | Penutupan JavaScript, manipulasi DOM | Jen |
| 11 | Permainan Mengetik | Bina Permainan Mengetik | Pelajari cara menggunakan acara papan kekunci untuk menggerakkan logik aplikasi JavaScript anda | Pengaturcaraan Berpandu Acara | Christopher |
| 12 | Sambungan Pelayar Hijau | Bekerja dengan Pelayar | Pelajari cara pelayar berfungsi, sejarahnya, dan cara membina elemen pertama sambungan pelayar | Mengenai Pelayar | Jen |
| 13 | Sambungan Pelayar Hijau | Membangun borang, memanggil API dan menyimpan pembolehubah dalam storan tempatan | Bina elemen JavaScript sambungan pelayar anda untuk memanggil API menggunakan pembolehubah yang disimpan dalam storan tempatan | API, Borang, dan Storan Tempatan | Jen |
| 14 | Sambungan Pelayar Hijau | Proses latar belakang dalam pelayar, prestasi web | Gunakan proses latar belakang pelayar untuk mengurus ikon sambungan; belajar tentang prestasi web dan beberapa pengoptimuman agar | Tugas Latar Belakang dan Prestasi | Jen |
| 15 | Permainan Angkasa | Pembangunan Permainan Lebih Lanjut dengan JavaScript | Pelajari mengenai Pewarisan menggunakan kedua-dua Kelas dan Komposisi serta corak Pub/Sub, sebagai persiapan untuk membina permainan | Pengenalan kepada Pembangunan Permainan Lanjutan | Chris |
| 16 | Permainan Angkasa | Melukis pada kanvas | Pelajari tentang API Canvas, digunakan untuk melukis elemen pada skrin | Melukis pada Kanvas | Chris |
| 17 | Permainan Angkasa | Menggerakkan elemen di sekitar skrin | Temui bagaimana elemen boleh bergerak menggunakan koordinat kartesian dan API Canvas | Menggerakkan Elemen Sekitar | Chris |
| 18 | Permainan Angkasa | Pengesanan perlanggaran | Buat elemen bertembung dan bertindak balas antara satu sama lain menggunakan kekunci dan sediakan fungsi cooldown untuk memastikan prestasi permainan | Pengesanan Perlanggaran | Chris |
| 19 | Permainan Angkasa | Menjaga skor | Lakukan pengiraan matematik berdasarkan status dan prestasi permainan | Menjaga Skor | Chris |
| 20 | Permainan Angkasa | Mengakhiri dan memulakan semula permainan | Pelajari cara mengakhiri dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pembolehubah | Keadaan Akhir | Chris |
| 21 | Aplikasi Perbankan | Templat HTML dan Laluan dalam Aplikasi Web | Pelajari cara membuat struktur laman web berbilang halaman menggunakan laluan dan templat HTML | Templat HTML dan Laluan | Yohan |
| 22 | Aplikasi Perbankan | Bina Borang Log Masuk dan Pendaftaran | Pelajari mengenai membina borang dan mengendalikan rutin pengesahan | Borang | Yohan |
| 23 | Aplikasi Perbankan | Kaedah Mendapatkan dan Menggunakan Data | Bagaimana data masuk dan keluar dari aplikasi anda, cara mengambilnya, menyimpannya dan menghapusnya | Data | Yohan |
| 24 | Aplikasi Perbankan | Konsep Pengurusan Keadaan | Pelajari bagaimana aplikasi anda mengekalkan keadaan dan cara mengurusnya secara programatik | Pengurusan Keadaan | Yohan |
| 25 | Kod Penyemak Imbas/VScode | Bekerja dengan VScode | Pelajari cara menggunakan penyunting kod | Gunakan Penyunting Kod VScode | Chris |
| 26 | Pembantu AI | Bekerja dengan AI | Pelajari cara membina pembantu AI anda sendiri | Projek Pembantu AI | Chris |
🏫 Pedagogi
Kurikulum kami direka dengan dua prinsip pedagogi utama dalam fikiran:
- pembelajaran berasaskan projek
- kuiz yang kerap
Program ini mengajar asas-asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web masa kini. Pelajar akan berpeluang mengembangkan pengalaman praktikal dengan membina permainan menaip, terrarium maya, sambungan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Pada akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh tentang pembangunan web.
🎓 Anda boleh mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai Jalur Pembelajaran di Microsoft Learn!
Dengan memastikan kandungan selaras dengan projek, proses pembelajaran menjadi lebih menarik untuk pelajar dan pengingatan konsep akan dipertingkatkan. Kami juga menulis beberapa pelajaran permulaan dalam asas JavaScript untuk memperkenalkan konsep, dipadankan dengan video dari koleksi tutorial video "Siri Pemula kepada: JavaScript", beberapa pengarangnya menyumbang kepada kurikulum ini.
Selain itu, kuiz bertaraf rendah sebelum kelas menetapkan niat pelajar untuk mempelajari topik, manakala kuiz kedua selepas kelas memastikan pengingatan lebih kukuh. Kurikulum ini direka untuk fleksibel dan menyeronokkan serta boleh diikuti secara keseluruhan atau sebahagian. Projek bermula kecil dan menjadi semakin kompleks menjelang akhir kitaran 12 minggu.
Walaupun kami sengaja mengelak memperkenalkan rangka kerja JavaScript untuk menumpukan pada kemahiran asas yang diperlukan sebagai pembangun web sebelum menggunakan rangka kerja, langkah seterusnya yang baik selepas melengkapkan kurikulum ini adalah mempelajari tentang Node.js melalui koleksi video lain: "Siri Pemula kepada: Node.js".
Lawati Kod Tingkah Laku dan garis panduan Menyumbang kami. Kami mengalu-alukan maklum balas yang membina daripada anda!
🧭 Akses Luar Talian
Anda boleh menjalankan dokumentasi ini secara luar talian dengan menggunakan Docsify. Fork repositori ini, pasang Docsify pada mesin tempatan anda, dan kemudian di folder akar repositori ini, taip docsify serve. Laman web akan disajikan pada port 3000 di localhost anda: localhost:3000.
PDF bagi semua pelajaran boleh didapati di sini.
🎒 Kursus Lain
Pasukan kami menghasilkan kursus lain! Semak:
LangChain
Azure / Edge / MCP / Agents
Siri AI Generatif
Pembelajaran Teras
Siri Copilot
Mendapatkan Bantuan
Jika anda tersekat atau mempunyai sebarang pertanyaan mengenai membina aplikasi AI. Sertai pelajar lain dan pembangun berpengalaman dalam perbincangan mengenai MCP. Ia adalah komuniti yang menyokong di mana soalan dialu-alukan dan pengetahuan dikongsi dengan bebas.
Jika anda mempunyai maklum balas produk atau ralat semasa membina, lawati:
Lesen
Repositori ini dilesenkan di bawah lesen MIT. Lihat fail LICENSE untuk maklumat lanjut.
Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk ketepatan, sila maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang sahih. Untuk maklumat penting, terjemahan profesional oleh manusia adalah disarankan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.


