|
|
4 weeks ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 1 month ago | |
| 2-js-basics | 1 month ago | |
| 3-terrarium | 1 month ago | |
| 4-typing-game | 1 month ago | |
| 5-browser-extension | 1 month ago | |
| 6-space-game | 1 month ago | |
| 7-bank-project | 1 month ago | |
| 8-code-editor/1-using-a-code-editor | 1 month ago | |
| 9-chat-project | 1 month ago | |
| 10-ai-framework-project | 1 month ago | |
| Git-Basics | 1 month ago | |
| docs | 1 month ago | |
| lesson-template | 1 month ago | |
| memory-game | 1 month ago | |
| quiz-app | 1 month ago | |
| .co-op-translator.json | 4 weeks ago | |
| AGENTS.md | 4 weeks ago | |
| CODE_OF_CONDUCT.md | 1 month ago | |
| CONTRIBUTING.md | 1 month ago | |
| README.md | 4 weeks ago | |
| SECURITY.md | 1 month ago | |
| SUPPORT.md | 1 month ago | |
| _404.md | 1 month ago | |
| for-teachers.md | 1 month ago | |
README.md
Pembangunan Web untuk Pemula - Kurikulum
Pelajari asas-asas pembangunan web dengan kursus menyeluruh selama 12 minggu oleh Pendukung Awan Microsoft. Setiap 24 pelajaran membawa anda menyelami JavaScript, CSS, dan HTML menerusi projek langsung seperti terarium, sambungan pelayar, dan permainan angkasa. Sertai dengan kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimakan penyerapan ilmu dengan pedagogi berasaskan projek yang berkesan. Mulakan perjalanan pengkodan anda hari ini!
Sertai Komuniti Discord Azure AI Foundry
Ikuti langkah-langkah ini untuk memulakan menggunakan sumber-sumber ini:
- Fork Repositori: Klik
- Duplikat Repositori:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Sertai Discord Azure AI Foundry dan temui pakar serta pembangun lain
🌐 Sokongan Pelbagai Bahasa
Disokong melalui Tindakan GitHub (Automatik & Sentiasa Dikemaskini)
Arab | Bengali | Bulgaria | Burma (Myanmar) | Cina (Ringkas) | Cina (Tradisional, Hong Kong) | Cina (Tradisional, Macau) | Cina (Tradisional, Taiwan) | Kroasia | Ceko | Denmark | Belanda | Estonia | Finland | Perancis | Jerman | Yunani | Ibrani | Hindi | Hungary | Indonesia | Itali | Jepun | Kannada | Korea | Lithuania | Melayu | Malayalam | Marathi | Nepali | Pidgin Nigeria | Norway | Parsi (Farsi) | Poland | Portugis (Brazil) | Portugis (Portugal) | Punjabi (Gurmukhi) | Romania | Rusia | Serbia (Sirilik) | Slovak | Slovenia | Sepanyol | Swahili | Sweden | Tagalog (Filipina) | Tamil | Telugu | Thai | Turki | Ukraine | Urdu | Vietnam
Lebih suka Duplikat Secara Tempatan?
Repositori ini termasuk lebih 50 terjemahan bahasa yang secara ketara meningkatkan saiz muat turun. Untuk duplikat tanpa terjemahan, gunakan sparse checkout:
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 memberikan anda segala yang diperlukan untuk menamatkan kursus dengan muat turun yang jauh lebih pantas.
Jika anda ingin menyokong bahasa terjemahan tambahan, senarai disediakan di sini
🧑🎓 Adakah anda pelajar?
Lawati Halaman Pusat Pelajar di mana anda akan menemui sumber pemula, pek Pelajar dan juga cara mendapatkan baucar sijil percuma. Ini adalah halaman yang anda mahu tandai dan periksa dari semasa ke semasa kerana kami menukar kandungan setiap bulan.
📣 Pengumuman - Cabaran Mod Ejen GitHub Copilot Baharu untuk diselesaikan!
Cabaran baharu ditambah, cari "Cabaran Ejen GitHub Copilot 🚀" dalam kebanyakan bab. Itu adalah cabaran baharu untuk anda lengkapkan menggunakan GitHub Copilot dan mod Ejen. Jika anda belum pernah menggunakan mod Ejen sebelum ini, ia mampu bukan sahaja menjana teks tetapi juga boleh membuat dan mengedit fail, menjalankan perintah dan banyak lagi.
📣 Pengumuman - Projek Baharu untuk dibina menggunakan AI Generatif
Projek Pembantu AI baharu baru sahaja ditambah, semak projek
📣 Pengumuman - Kurikulum Baharu mengenai AI Generatif untuk JavaScript baru sahaja dikeluarkan
Jangan ketinggalan kurikulum AI Generatif baharu kami!
Lawati https://aka.ms/genai-js-course untuk memulakan!
- Pelajaran merangkumi segala-galanya dari asas ke 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 mempelajari topik seperti:
- Pemberian arahan dan kejuruteraan arahan
- Penjanaan aplikasi teks dan imej
- Aplikasi carian
Lawati https://aka.ms/genai-js-course untuk memulakan!
🌱 Memulakan
Guru, kami telah menyediakan beberapa cadangan mengenai cara menggunakan kurikulum ini. Kami sangat mengalu-alukan maklum balas anda di forum perbincangan kami!
Pelajar, untuk setiap pelajaran, mulakan dengan kuiz prakuliah dan teruskan dengan membaca bahan kuliah, melengkapkan pelbagai aktiviti dan periksa pemahaman anda dengan kuiz pascakuliah.
Untuk memperkayakan pengalaman pembelajaran anda, berhubung dengan rakan sekelas untuk bekerjasama dalam projek-projek! Perbincangan digalakkan di forum perbincangan kami di mana pasukan moderator kami akan tersedia untuk menjawab soalan anda.
Untuk melanjutkan pendidikan anda, kami sangat mengesyorkan meneroka Microsoft Learn untuk bahan pembelajaran tambahan.
📋 Menyediakan persekitaran anda
Kurikulum ini mempunyai persekitaran pembangunan yang siap digunakan! Semasa anda bermula, anda boleh memilih untuk menjalankan kurikulum dalam Codespace (persekitaran berasaskan pelayar tanpa perlu pemasangan), atau secara tempatan pada komputer anda menggunakan penyunting teks seperti Visual Studio Code.
Buat repositori anda
Untuk memudahkan anda menyimpan kerja anda, disarankan agar anda membuat salinan repositori ini. Anda boleh melakukannya dengan mengklik butang Use this template di bahagian atas halaman. Ini akan membuat repositori baru dalam akaun GitHub anda dengan salinan kurikulum.
Ikuti langkah-langkah ini:
- Fork Repositori: Klik butang "Fork" di penjuru kanan atas halaman ini.
- Duplikat Repositori:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Menjalankan kurikulum dalam Codespace
Dalam salinan repositori yang anda buat, klik butang Code dan pilih Open with Codespaces. Ini akan membuat Codespace baru untuk anda bekerja.
Menjalankan kurikulum secara tempatan pada komputer anda
Untuk menjalankan kurikulum ini secara tempatan pada komputer anda, anda memerlukan penyunting teks, pelayar web dan alat baris perintah. Pelajaran pertama kami, Pengenalan kepada Bahasa Pengaturcaraan dan Alatan Perdagangan, akan memandu anda melalui pelbagai pilihan untuk setiap alat supaya anda boleh memilih yang paling sesuai untuk anda.
Cadangan kami ialah menggunakan Visual Studio Code sebagai penyunting, yang juga mempunyai Terminal terbina dalam. Anda boleh muat turun Visual Studio Code di sini.
-
Duplikat repositori anda ke komputer anda. Anda boleh lakukan ini dengan mengklik butang Code dan menyalin URL:
CodeSpace Kemudian, buka Terminal dalam Visual Studio Code dan jalankan arahan berikut, menggantikan
<your-repository-url>dengan URL yang baru anda salin:git clone <your-repository-url> -
Buka folder dalam Visual Studio Code. Anda boleh melakukannya 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 selepas pelajaran
Nota tentang kuiz: Semua kuiz terkandung dalam folder Quiz-app, sebanyak 48 kuiz dengan tiga soalan setiap satu. Mereka boleh didapati di sini aplikasi kuiz boleh dijalankan secara tempatan atau dideploy ke Azure; ikut arahan dalam folder
quiz-app.
🗃️ Pelajaran
| Nama Projek | Konsep Diajarkan | Objektif Pembelajaran | Pelajaran Berpaut | Pengarang | |
|---|---|---|---|---|---|
| 01 | Memulakan | Pengenalan kepada Pengaturcaraan dan Alat Perdagangan | Pelajari asas-asas di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan kerja mereka | Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan | Jasmine |
| 02 | Memulakan | Asas GitHub, termasuk bekerjasama dalam satu pasukan | Cara menggunakan GitHub dalam projek anda, cara berkolaborasi 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 JavaScript | Jenis Data | Jasmine |
| 05 | Asas JS | Fungsi dan Kaedah | Pelajari tentang fungsi dan kaedah untuk menguruskan 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 | Tatasusunan dan Gelung | Bekerja dengan data menggunakan tatasusunan dan gelung dalam JavaScript | Tatasusunan dan Gelung | Jasmine |
| 08 | Terrarium | HTML dalam Amalan | Bina HTML untuk mencipta terrarium dalam talian, menumpukan pada pembinaan susun atur | Pengenalan kepada HTML | Jen |
| 09 | Terrarium | CSS dalam Amalan | Bina CSS untuk menggayakan terrarium dalam talian, menumpukan 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/lepas, menumpukan 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 Berpandukan 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, menghubungi API dan menyimpan pemboleh ubah dalam penyimpanan tempatan | Bina elemen JavaScript bagi sambungan pelayar anda untuk memanggil API menggunakan pemboleh ubah yang disimpan dalam penyimpanan tempatan | API, Borang, dan Penyimpanan Tempatan | Jen |
| 14 | Sambungan Pelayar Hijau | Proses latar belakang dalam pelayar, prestasi web | Gunakan proses latar belakang pelayar untuk mengurus ikon sambungan; pelajari tentang prestasi web dan beberapa pengoptimuman untuk menjadikan | Tugas Latar Belakang dan Prestasi | Jen |
| 15 | Permainan Angkasa | Pembangunan Permainan Lebih Lanjut dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta corak Pub/Sub, sebagai persediaan untuk membina permainan | Pengenalan kepada Pembangunan Permainan Lanjutan | Chris |
| 16 | Permainan Angkasa | Melukis ke kanvas | Pelajari tentang API Canvas, digunakan untuk melukis elemen ke skrin | Melukis ke Kanvas | Chris |
| 17 | Permainan Angkasa | Memindahkan elemen di sekitar skrin | Temui bagaimana elemen boleh bergerak menggunakan koordinat kartesian dan API Canvas | Memindahkan Elemen | Chris |
| 18 | Permainan Angkasa | Pengesanan pelanggaran | Membuat elemen berlanggar dan bertindak balas antara satu sama lain menggunakan kekunci dan menyediakan fungsi cooldown untuk memastikan prestasi permainan | Pengesanan Pelanggaran | Chris |
| 19 | Permainan Angkasa | Menjaga skor | Melakukan pengiraan matematik berdasarkan status dan prestasi permainan | Menjaga Skor | Chris |
| 20 | Permainan Angkasa | Mengakhiri dan memulakan semula permainan | Pelajari tentang cara mengakhiri dan memulakan semula permainan, termasuk pembersihan aset dan menetapkan semula nilai pemboleh ubah | Keadaan Akhir | Chris |
| 21 | Aplikasi Perbankan | Templat HTML dan Laluan dalam Aplikasi Web | Pelajari cara mencipta rangka kerja arkitektur laman web berbilang halaman menggunakan penghalaan dan templat HTML | Templat HTML dan Laluan | Yohan |
| 22 | Aplikasi Perbankan | Bina Borang Log Masuk dan Pendaftaran | Pelajari tentang membina borang dan mengendalikan rutin pengesahan | Borang | Yohan |
| 23 | Aplikasi Perbankan | Kaedah Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi anda, bagaimana untuk mengambil, menyimpan, dan membuangnya | Data | Yohan |
| 24 | Aplikasi Perbankan | Konsep Pengurusan Negara | Pelajari cara aplikasi anda mengekalkan keadaan dan cara menguruskannya secara program | Pengurusan Negara | 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 berkala
Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web masa kini. Pelajar akan berpeluang membangunkan pengalaman praktikal dengan membina permainan menaip, terrarium maya, sambungan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Menjelang akhir siri, pelajar akan memperoleh pemahaman yang kukuh mengenai pembangunan web.
🎓 Anda boleh mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai Jalan Pembelajaran di Microsoft Learn!
Dengan memastikan kandungan selari dengan projek, proses ini 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 untuk Pemula kepada: JavaScript", beberapa pengarangnya menyumbang kepada kurikulum ini.
Selain itu, kuiz berisiko rendah sebelum kelas menetapkan niat pelajar untuk belajar topik tertentu, manakala kuiz kedua selepas kelas memastikan pengingatan lanjutan. Kurikulum ini direka untuk menjadi fleksibel dan menyeronokkan serta boleh diambil sepenuhnya atau sebahagiannya. 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 mengadopsi rangka kerja, langkah seterusnya yang baik untuk melengkapkan kurikulum ini adalah belajar tentang Node.js melalui koleksi video lain: "Siri Pemula kepada: Node.js".
Lawati Kod Etika dan garis panduan Menyumbang kami. Kami mengalu-alukan maklum balas membina anda!
🧭 Akses Luar Talian
Anda boleh menjalankan dokumentasi ini secara luar talian dengan menggunakan Docsify. Gandingkan repo ini, pasang Docsify pada mesin tempatan anda, dan kemudian dalam folder akar repo ini, taip docsify serve. Laman web akan dihidangkan pada port 3000 di localhost anda: localhost:3000.
PDF semua pelajaran boleh didapati di sini.
🎒 Kursus Lain
Pasukan kami menghasilkan kursus lain! Lihat:
LangChain
Azure / Edge / MCP / Ejen
Siri AI Generatif
Pembelajaran Teras
Siri Copilot
Mendapatkan Bantuan
Jika anda tersekat atau mempunyai sebarang soalan tentang membina aplikasi AI. Sertai pelajar lain dan pembangun berpengalaman dalam perbincangan tentang 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 ambil perhatian 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 digalakkan. Kami tidak bertanggungjawab atas sebarang salah faham atau tafsiran yang salah yang timbul daripada penggunaan terjemahan ini.


