|
|
2 weeks ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 weeks ago | |
| 2-js-basics | 2 weeks ago | |
| 3-terrarium | 2 weeks ago | |
| 4-typing-game | 3 months ago | |
| 5-browser-extension | 2 weeks ago | |
| 6-space-game | 2 weeks ago | |
| 7-bank-project | 2 weeks ago | |
| 8-code-editor/1-using-a-code-editor | 2 weeks ago | |
| 9-chat-project | 2 weeks ago | |
| 10-ai-framework-project | 3 months ago | |
| Git-Basics | 4 months ago | |
| docs | 5 months ago | |
| lesson-template | 5 months ago | |
| memory-game | 4 months ago | |
| quiz-app | 5 months ago | |
| AGENTS.md | 4 months ago | |
| CODE_OF_CONDUCT.md | 5 months ago | |
| CONTRIBUTING.md | 5 months ago | |
| README.md | 2 weeks ago | |
| SECURITY.md | 5 months ago | |
| SUPPORT.md | 5 months ago | |
| _404.md | 5 months ago | |
| for-teachers.md | 2 weeks ago | |
README.md
Pembangunan Web untuk Pemula - Kurikulum
Pelajari asas-asas pembangunan web dengan kursus komprehensif selama 12 minggu oleh Microsoft Cloud Advocates. Setiap 24 pelajaran menyelami JavaScript, CSS, dan HTML melalui projek hands-on seperti terrarium, sambungan pelayar, dan permainan angkasa lepas. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran dan optimakan pengekalan pengetahuan anda dengan pedagogi berasaskan projek kami yang berkesan. Mulakan perjalanan pengkodan anda hari ini!
Sertai Komuniti Discord Azure AI Foundry
Ikuti langkah-langkah ini untuk memulakan menggunakan sumber ini:
- Fork Repositori: Klik
- Clone Repositori:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Sertai The Azure AI Foundry Discord dan temui pakar dan pembangun lain
🌐 Sokongan Pelbagai Bahasa
Disokong melalui Tindakan GitHub (Automatik & Sentiasa Dikemaskini)
Arab | Bengali | Bulgaria | Burma (Myanmar) | Cina (Dipermudahkan) | Cina (Tradisional, Hong Kong) | Cina (Tradisional, Macau) | Cina (Tradisional, Taiwan) | Kroasia | Czech | Denmark | Belanda | Estonia | Finland | Perancis | Jerman | Greek | 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 (Cyrillic) | Slovak | Slovenia | Sepanyol | Swahili | Sweden | Tagalog (Filipina) | Tamil | Telugu | Thai | Turki | Ukrain | Urdu | Vietnam
Lebih suka Clone Secara Tempatan?
Repositori ini merangkumi lebih 50+ terjemahan bahasa yang meningkatkan saiz muat turun dengan ketara. Untuk clone 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 memberi anda segala yang anda perlukan untuk melengkapkan kursus dengan muat turun yang jauh lebih pantas.
Jika anda ingin menyokong lebih banyak bahasa terjemahan, senarai sokongan tambahan terdapat di sini
🧑🎓 Adakah anda seorang pelajar?
Lawati Halaman Pusat Pelajar di mana anda akan menemui sumber untuk pemula, Pakej Pelajar dan juga cara untuk 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 Agen GitHub Copilot baru untuk diselesaikan!
Cabaran baru ditambah, cari "GitHub Copilot Agent Challenge 🚀" dalam kebanyakan bab. Ini adalah cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan Mod Agen. Jika anda belum pernah menggunakan Mod Agen sebelum ini, ia boleh bukan sahaja menjana teks tetapi juga boleh mencipta dan menyunting fail, menjalankan arahan dan banyak lagi.
📣 Pengumuman - Projek Baru yang Dibina menggunakan AI Generatif
Projek Pembantu AI baru sahaja ditambah, semak projek
📣 Pengumuman - Kurikulum Baru mengenai AI Generatif untuk JavaScript baru sahaja diterbitkan
Jangan terlepas kurikulum AI Generatif baru kami!
Lawati https://aka.ms/genai-js-course untuk bermula!
- Pelajaran merangkumi segala-galanya dari asas kepada RAG.
- Berinteraksi dengan watak sejarah menggunakan GenAI dan aplikasi pendamping kami.
- Naratif yang menyeronokkan dan menarik, anda akan mengembara waktu!
Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda dalam mempelajari topik seperti:
- Prompting dan kejuruteraan prompt
- Penjanaan aplikasi teks dan imej
- Aplikasi carian
Lawati https://aka.ms/genai-js-course untuk bermula!
🌱 Bermula
Guru, kami telah menyertakan beberapa cadangan bagaimana menggunakan kurikulum ini. Kami sangat menghargai maklum balas anda dalam forum perbincangan kami!
Pelajar, untuk setiap pelajaran, mulakan dengan kuiz pra-ceramah dan teruskan dengan membaca bahan kuliah, menyelesaikan pelbagai aktiviti dan memeriksa pemahaman anda dengan kuiz pasca-ceramah.
Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan-rakan sekelas untuk bekerja bersama projek ini! Perbincangan digalakkan dalam forum perbincangan kami di mana pasukan moderator kami sedia menjawab soalan anda.
Untuk pendidikan lanjut, kami sangat mengesyorkan meneroka Microsoft Learn untuk bahan pembelajaran tambahan.
📋 Menyediakan persekitaran anda
Kurikulum ini mempunyai persekitaran pembangunan sedia digunakan! Semasa anda bermula, anda boleh memilih untuk menjalankan kurikulum dalam Codespace (persekitaran berasaskan pelayar tanpa perlu pemasangan), atau secara lokal di komputer anda menggunakan penyunting teks seperti Visual Studio Code.
Cipta repositori anda
Untuk memudahkan anda menyimpan kerja anda, disyorkan agar anda mencipta salinan anda sendiri repositori ini. Anda boleh melakukannya dengan mengklik butang Use this template di bahagian atas halaman. Ini akan mencipta repositori baru dalam akaun GitHub anda dengan salinan kurikulum.
Ikuti langkah ini:
- Fork Repositori: Klik 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 buat, klik butang Code dan pilih Open with Codespaces. Ini akan mencipta Codespace baru untuk anda bekerja.
Menjalankan kurikulum secara lokal di komputer anda
Untuk menjalankan kurikulum ini secara lokal di 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 untuk setiap alat ini supaya anda boleh memilih apa yang terbaik untuk anda.
Saranan kami adalah menggunakan Visual Studio Code sebagai penyunting anda, yang juga mempunyai Terminal terbina dalam. Anda boleh muat turun Visual Studio Code di sini.
-
Clone repositori anda ke komputer anda. Anda boleh melakukannya 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 di 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 merangkumi:
- 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, 48 kuiz kesemuanya dengan tiga soalan setiap satu. Ia boleh didapati di sini aplikasi kuiz boleh dijalankan secara lokal atau diterapkan ke Azure; ikuti 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 di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional menjalankan tugas mereka | Pengenalan Kepada Bahasa Pengaturcaraan dan Alat Perdagangan | Jasmine |
| 02 | Memulakan | Asas GitHub, termasuk bekerjasama dalam 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 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 | Bangunkan HTML untuk mencipta terrarium dalam talian, fokus pada membina susun atur | Pengenalan kepada HTML | Jen |
| 09 | Terrarium | CSS dalam Amalan | Bangunkan CSS untuk gayakan terrarium dalam talian, fokus pada asas CSS termasuk menjadikan halaman responsif | Pengenalan kepada CSS | Jen |
| 10 | Terrarium | Penutupan JavaScript, manipulasi DOM | Bangunkan JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/lepas, fokus pada penutupan dan manipulasi DOM | Penutupan JavaScript, manipulasi DOM | Jen |
| 11 | Permainan Mengetik | Membangun 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 bagaimana pelayar berfungsi, sejarahnya, dan cara membina elemen pertama sambungan pelayar | Mengenai Pelayar | Jen |
| 13 | Sambungan Pelayar Hijau | Membina borang, memanggil API dan menyimpan pembolehubah dalam storan lokal | Bina elemen JavaScript sambungan pelayar anda untuk memanggil API menggunakan pembolehubah yang disimpan dalam storan lokal | API, Borang, dan Storan Lokal | 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 | Tugas Latar Belakang dan Prestasi | Jen |
| 15 | Permainan Angkasa | Pembangunan Permainan Lebih Lanjutan dengan JavaScript | Pelajari tentang Pewarisan menggunakan 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, yang digunakan untuk melukis elemen ke skrin | Melukis Pada Kanvas | Chris |
| 17 | Permainan Angkasa | Menggerakkan elemen di sekitar skrin | Temui cara elemen boleh bergerak menggunakan koordinat kartesian dan API Canvas | Menggerakkan Elemen | Chris |
| 18 | Permainan Angkasa | Pengesanan perlanggaran | Buat elemen bertembung dan bertindak balas antara satu sama lain menggunakan kekunci dan sediakan fungsi penyejukan 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 | Menamat dan memulakan semula permainan | Pelajari tentang menamatkan dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pembolehubah | Keadaan Tamat | Chris |
| 21 | Apl Perbankan | Template HTML dan Laluan dalam Aplikasi Web | Pelajari cara mencipta struktur antara muka laman web berbilang halaman menggunakan laluan dan template HTML | Template HTML dan Laluan | Yohan |
| 22 | Apl Perbankan | Membangun Borang Log Masuk dan Pendaftaran | Pelajari tentang membina borang dan menangani rutin pengesahan | Borang | Yohan |
| 23 | Apl Perbankan | Kaedah Mengambil dan Menggunakan Data | Cara data mengalir masuk dan keluar dari aplikasi anda, cara mendapatkannya, menyimpannya, dan membuangnya | Data | Yohan |
| 24 | Apl Perbankan | Konsep Pengurusan Keadaan | Pelajari bagaimana aplikasi anda mengekalkan keadaan dan cara menguruskannya 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 JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web hari ini. Pelajar akan berpeluang mengembangkan pengalaman praktikal dengan membina permainan menaip, terrarium maya, sambungan pelayar mesra alam, permainan bergaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Pada akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh tentang pembangunan web.
🎓 Anda boleh mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai Jalur Pembelajaran di Microsoft Learn!
Dengan memastikan kandungan sejajar dengan projek, proses ini dibuat lebih menarik untuk pelajar dan pengekalan 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 berisiko rendah sebelum kelas menetapkan niat pelajar untuk belajar sesuatu topik, manakala kuiz kedua selepas kelas memastikan pengekalan lanjut. Kurikulum ini direka untuk menjadi fleksibel dan menyeronokkan dan boleh diambil secara keseluruhan atau sebahagian. Projek bermula kecil dan menjadi semakin kompleks pada akhir kitaran 12 minggu.
Walaupun kami sengaja mengelakkan memperkenalkan rangka kerja JavaScript untuk memfokus pada kemahiran asas yang diperlukan sebagai pembangun web sebelum mengguna pakai rangka kerja, langkah seterusnya yang baik untuk melengkapkan kurikulum ini adalah mempelajari tentang Node.js melalui koleksi video lain: "Siri Pemula kepada: Node.js".
Lawati Kod Etika dan panduan Sumbangan kami. Kami mengalu-alukan maklum balas membina anda!
🧭 Akses luar talian
Anda boleh menjalankan dokumentasi ini tanpa sambungan internet dengan menggunakan Docsify. Fork repositori ini, pasang Docsify pada mesin tempatan anda, dan kemudian di dalam folder akar repositori ini, taip docsify serve. Laman web akan dihidangkan pada port 3000 pada localhost anda: localhost:3000.
PDF bagi 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 pertanyaan mengenai 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 secara 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 perlu dianggap sebagai sumber yang sahih. Untuk maklumat penting, disarankan terjemahan profesional oleh manusia. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.


