|
|
5 days ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 5 days 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 | 5 days ago | |
| AGENTS.md | 5 days ago | |
| CODE_OF_CONDUCT.md | 1 month ago | |
| CONTRIBUTING.md | 1 month ago | |
| README.md | 5 days ago | |
| Roadmap.md | 1 month 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 komprehensif 12-minggu oleh Microsoft Cloud Advocates. Setiap 24 pelajaran menyelami JavaScript, CSS, dan HTML melalui projek praktikal seperti terrarium, sambungan pelayar, dan permainan angkasa lepas. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimalkan penyerapan pengetahuan dengan pedagogi berasaskan projek kami yang efektif. Mula perjalanan pengkodan anda hari ini!
Sertai Komuniti Discord Azure AI Foundry
Ikuti langkah-langkah berikut untuk bermula menggunakan sumber ini:
- Fork Repositori: Klik
- Klon Repositori:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Sertai Discord Azure AI Foundry dan jumpa pakar serta pembangun lain
🌐 Sokongan Pelbagai Bahasa
Disokong melalui GitHub Action (Automatik & Sentiasa Terkini)
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 | 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 Klon Secara Tempatan?
Repositori ini termasuk lebih 50+ terjemahan bahasa yang secara signifikan meningkatkan saiz muat turun. Untuk klon 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 memberikan anda segala yang anda perlukan untuk menyelesaikan kursus dengan muat turun yang jauh lebih pantas.
Jika anda ingin menambah bahasa terjemahan tambahan yang disokong disenaraikan di sini
🧑🎓 Adakah anda seorang pelajar?
Lawati halaman Student Hub di mana anda akan menemui sumber pemula, pek Pelajar dan juga cara untuk mendapatkan baucar sijil percuma. Ini adalah halaman yang anda patut tandakan dan semak dari semasa ke semasa kerana kandungan akan ditukar setiap bulan.
📣 Pengumuman - Cabaran mod Agen GitHub Copilot baru untuk diselesaikan!
Cabaran Baru ditambah, cari "GitHub Copilot Agent Challenge 🚀" dalam kebanyakan bab. Itu adalah cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan mod Agen. Jika anda belum pernah menggunakan mod Agen, ia bukan sahaja mampu menjana teks tetapi juga boleh mencipta dan menyunting fail, menjalankan arahan dan banyak lagi.
📣 Pengumuman - Projek Baru untuk dibina menggunakan Generative AI
Projek Pembantu AI baru telah ditambah, semak projek
📣 Pengumuman - Kurikulum Baru mengenai Generative AI untuk JavaScript baru sahaja dikeluarkan
Jangan terlepas kurikulum Generative AI baru kami!
Lawati https://aka.ms/genai-js-course untuk bermula!
- Pelajaran merangkumi segala-galanya dari asas hingga RAG.
- Berinteraksi dengan watak sejarah menggunakan GenAI dan aplikasi pendamping kami.
- Naratif yang menyeronokkan dan menarik, anda akan 'mengembara masa'!
Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda mempelajari topik seperti:
- Prompting dan kejuruteraan prompt
- Penjanaan aplikasi teks dan imej
- Aplikasi pencarian
Lawati https://aka.ms/genai-js-course untuk bermula!
🌱 Memulakan
Guru-guru, kami telah sertakan beberapa cadangan tentang cara menggunakan kurikulum ini. Kami sangat mengalu-alukan maklum balas anda di forum perbincangan kami!
Pelajar, untuk setiap pelajaran, mulakan dengan kuiz pra-ceramah dan teruskan dengan membaca bahan ceramah, melengkapkan pelbagai aktiviti dan periksa kefahaman anda dengan kuiz pasca-ceramah.
Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan sekelas untuk bekerjasama dalam projek bersama! 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 bagi bahan pembelajaran tambahan.
📋 Menyediakan persekitaran anda
Kurikulum ini telah menyediakan persekitaran pembangunan siap sedia! Apabila anda bermula 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, disyorkan anda mencipta salinan anda sendiri repositori ini. Anda boleh lakukan ini dengan mengklik butang Use this template di atas halaman ini. Ini akan mencipta repositori baru dalam akaun GitHub anda dengan salinan kurikulum.
Ikuti langkah berikut:
- Fork Repositori: Klik pada butang "Fork" di sudut atas-kanan halaman ini.
- Klon Repositori:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Menjalankan kurikulum dalam Codespace
Dalam salinan repositori ini 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 memerlukan penyunting teks, pelayar dan alat baris perintah. Pelajaran pertama kami, Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan, akan membimbing anda melalui pelbagai pilihan bagi setiap alat ini supaya anda boleh pilih yang paling sesuai.
Cadangan kami adalah untuk 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 melakukannya dengan mengklik butang Code dan menyalin URL:
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 tersebut dalam Visual Studio Code. Anda boleh melakukannya dengan mengklik File > Open Folder dan memilih folder yang baru sahaja 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 merangkumi:
- sketchnote pilihan
- video tambahan pilihan
- kuiz pemanasan sebelum pelajaran
- pelajaran bertulis
- untuk pelajaran berasaskan projek, panduan langkah demi langkah tentang cara membina projek
- semakan pengetahuan
- cabaran
- bacaan tambahan
- tugasan
- kuiz selepas pelajaran
Nota tentang kuiz: Semua kuiz terkandung dalam folder Quiz-app, 48 kuiz keseluruhan dengan tiga soalan setiap satu. Ia tersedia di sini. aplikasi kuiz boleh dijalankan secara tempatan atau dipasang di Azure; ikut arahan dalam folder
quiz-app.
🗃️ Pelajaran
| Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Berkaitan | Pengarang | |
|---|---|---|---|---|---|
| 01 | Memulakan | Pengenalan kepada Pengaturcaraan dan Alat Perdagangan | Pelajari asas berdasarkan 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 bekerja dalam pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain dalam asas kod | Pengenalan kepada GitHub | Floor |
| 03 | Memulakan | Kebolehaksesan | Pelajari asas kebolehaksesan web | Asas Kebolehaksesan | 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 mengurus aliran logik aplikasi | Fungsi dan Kaedah | Jasmine dan Christopher |
| 06 | Asas JS | Membuat Keputusan dengan JS | Pelajari cara membuat 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 membuat terrarium dalam talian, menumpukan pada membina susun atur | Pengenalan kepada HTML | Jen |
| 09 | Terrarium | CSS dalam Amalan | Bina CSS untuk menyerlahkan terrarium dalam talian, menumpukan pada asas CSS termasuk membuat 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 | Typing Game | Bina Permainan Mengetik | Pelajari cara menggunakan acara papan kekunci untuk mendorong logik aplikasi JavaScript anda | Pengaturcaraan Berasaskan Acara | Christopher |
| 12 | Green Browser Extension | Bekerja dengan Pelayar | Pelajari cara pelayar berfungsi, sejarahnya, dan cara membina elemen pertama pelanjutan pelayar | Mengenai Pelayar | Jen |
| 13 | Green Browser Extension | Membina borang, memanggil API dan menyimpan pemboleh ubah dalam storan tempatan | Bina elemen JavaScript pelanjutan pelayar anda untuk memanggil API menggunakan pemboleh ubah yang disimpan dalam storan tempatan | API, Borang, dan Storan Tempatan | Jen |
| 14 | Green Browser Extension | Proses latar belakang dalam pelayar, prestasi web | Gunakan proses latar belakang pelayar untuk mengurus ikon pelanjutan; pelajari tentang prestasi web dan beberapa pengoptimuman untuk menjadikan | Tugas Latar Belakang dan Prestasi | Jen |
| 15 | Space Game | Pembangunan Permainan Lanjutan dengan JavaScript | Pelajari tentang Warisan menggunakan kedua-dua Kelas dan Komposisi serta corak Pub/Sub, sebagai persediaan untuk membina permainan | Pengenalan kepada Pembangunan Permainan Lanjutan | Chris |
| 16 | Space Game | Melukis ke kanvas | Pelajari tentang API Kanvas, digunakan untuk melukis elemen ke skrin | Melukis ke Kanvas | Chris |
| 17 | Space Game | Menggerakkan elemen di sekeliling skrin | Temui bagaimana elemen boleh mendapat pergerakan menggunakan koordinat kartesian dan API Kanvas | Menggerakkan Elemen | Chris |
| 18 | Space Game | Pengesanan pertembungan | Membuat elemen bertembung dan bertindak balas antara satu sama lain menggunakan kekunci tekan dan menyediakan fungsi penyejukkan untuk memastikan prestasi permainan | Pengesanan Pertembungan | Chris |
| 19 | Space Game | Menjaga skor | Melakukan pengiraan matematik berdasarkan status dan prestasi permainan | Menjaga Skor | Chris |
| 20 | Space Game | Menamatkan dan memulakan semula permainan | Pelajari tentang menamatkan dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pemboleh ubah | Keadaan Tamat | Chris |
| 21 | Banking App | Templat HTML dan Laluan dalam Aplikasi Web | Pelajari cara membuat kerangka seni bina laman web berbilang halaman menggunakan laluan dan templat HTML | Templat HTML dan Laluan | Yohan |
| 22 | Banking App | Bina Borang Log Masuk dan Pendaftaran | Pelajari tentang membina borang dan mengendalikan rutin pengesahan | Borang | Yohan |
| 23 | Banking App | Kaedah Mendapat dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi anda, bagaimana untuk mendapatkannya, menyimpan, dan membuangnya | Data | Yohan |
| 24 | Banking App | Konsep Pengurusan Keadaan | Pelajari bagaimana aplikasi anda mengekalkan keadaan dan bagaimana menguruskannya secara program | Pengurusan Keadaan | Yohan |
| 25 | Browser/VScode Code | Bekerja dengan VScode | Pelajari cara menggunakan penyunting kod | Gunakan Penyunting Kod VScode | Chris |
| 26 | AI Assistants | Bekerja dengan AI | Pelajari cara membina pembantu AI anda sendiri | Projek Pembantu AI | Chris |
🏫 Pedagogi
Kurikulum kami direka dengan dua prinsip pedagogi utama:
- pembelajaran berasaskan projek
- kuiz kerap
Program ini mengajarkan asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web masa kini. Pelajar akan berpeluang mengembangkan pengalaman secara langsung dengan membina permainan menaip, terrarium maya, pelanjutan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Pada akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh mengenai pembangunan web.
🎓 Anda boleh mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai Jalan Pembelajaran di Microsoft Learn!
Dengan memastikan bahawa kandungan selaras dengan projek, proses pembelajaran menjadi lebih menarik untuk pelajar dan daya ingatan 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", yang mana beberapa pengarangnya menyumbang kepada kurikulum ini.
Selain itu, kuiz sama ada ringkas sebelum kelas menetapkan niat pelajar terhadap pembelajaran topik, sementara kuiz kedua selepas kelas memastikan pemahaman lebih lanjut. Kurikulum ini direka untuk menjadi fleksibel dan menyeronokkan serta boleh diambil secara keseluruhan atau sebahagian. Projek bermula kecil dan menjadi semakin rumit pada penghujung kitaran 12 minggu.
Walaupun kami sengaja mengelakkan pengenalan 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 Etika dan panduan Menyumbang kami. Kami mengalu-alukan maklum balas membina anda!
🧭 Akses luar talian
Anda boleh menjalankan dokumentasi ini secara luar talian dengan menggunakan Docsify. Fork repo ini, pasang Docsify pada mesin tempatan anda, dan kemudian di folder akar repo ini, taip docsify serve. Laman web akan dihidangkan pada port 3000 pada lokalhos anda: localhost:3000.
PDF bagi semua pelajaran boleh didapati di sini.
🎒 Kursus Lain
Pasukan kami menghasilkan kursus lain! Lihat:
LangChain
Azure / Edge / MCP / Agen
Siri AI Generatif
Pembelajaran Teras
Siri Copilot
Mendapatkan Bantuan
Jika anda tersekat atau mempunyai sebarang pertanyaan tentang membina aplikasi AI. Sertai pelajar lain dan pembangun berpengalaman dalam perbincangan tentang MCP. Ia adalah komuniti sokongan 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 manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.


