|
|
4 days ago | |
|---|---|---|
| .. | ||
| 1-getting-started-lessons | 2 weeks ago | |
| 2-js-basics | 2 weeks ago | |
| 3-terrarium | 2 weeks ago | |
| 4-typing-game | 2 weeks 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 | 2 weeks ago | |
| Git-Basics | 2 weeks ago | |
| docs | 2 weeks ago | |
| lesson-template | 2 weeks ago | |
| memory-game | 2 weeks ago | |
| quiz-app | 2 weeks ago | |
| .co-op-translator.json | 4 days ago | |
| AGENTS.md | 4 days ago | |
| CODE_OF_CONDUCT.md | 2 weeks ago | |
| CONTRIBUTING.md | 2 weeks ago | |
| README.md | 4 days ago | |
| Roadmap.md | 4 days ago | |
| SECURITY.md | 2 weeks ago | |
| SUPPORT.md | 2 weeks ago | |
| _404.md | 2 weeks ago | |
| for-teachers.md | 2 weeks ago | |
README.md
Pembangunan Web untuk Pemula - Kurikulum
Pelajari asas-asas pembangunan web dengan kursus komprehensif 12 minggu kami oleh Microsoft Cloud Advocates. Setiap 24 pelajaran menelusuri JavaScript, CSS, dan HTML melalui projek praktikal seperti terrarium, peluasan pelayar, dan permainan angkasa lepas. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimakan pengekalan ilmu dengan pedagogi berasaskan projek yang berkesan. Mulakan perjalanan pengkodan anda hari ini!
Sertai Komuniti Discord Azure AI Foundry
Ikuti langkah ini untuk mula menggunakan 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 rakan sebaya
🌐 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 | 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 merangkumi lebih 50 terjemahan bahasa yang secara signifikan menambah saiz muat turun. 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 memberikan anda segala yang diperlukan untuk menamatkan kursus dengan muat turun yang lebih pantas.
Jika anda ingin mempunyai bahasa terjemahan tambahan yang disokong, senarai terdapat di sini
🧑🎓 Adakah anda seorang pelajar?
Lawati halaman Student Hub di mana anda akan menemui sumber untuk pemula, pek Pelajar dan juga cara untuk mendapatkan baucar sijil percuma. Ini adalah halaman yang anda mahu tandakan dan semak dari masa ke masa kerana kami menukar kandungan setiap bulan.
📣 Pengumuman - Cabaran Mod Agen GitHub Copilot Baru untuk disiapkan!
Cabaran Baru ditambah, cari "GitHub Copilot Agent Challenge 🚀" di kebanyakan bab. Itu adalah cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan mod Agen. Jika anda belum pernah menggunakan mod Agen sebelum ini, ia bukan sahaja mampu menjana teks tetapi juga boleh membuat dan mengedit fail, menjalankan arahan dan banyak lagi.
📣 Pengumuman - Projek Baharu untuk dibina menggunakan Generative AI
Projek Pembantu AI baharu baru saja ditambah, lihat projek
📣 Pengumuman - Kurikulum Baharu tentang Generative AI untuk JavaScript baru dikeluarkan
Jangan terlepas kurikulum Generative AI baharu kami!
Lawati https://aka.ms/genai-js-course untuk mula!
- Pelajaran merangkumi segala dari asas hingga RAG.
- Berinteraksi dengan watak sejarah menggunakan GenAI dan aplikasi teman kami.
- Naratif yang menyeronokkan dan menarik, anda akan mengembara masa!
Setiap pelajaran termasuk tugasan untuk disiapkan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda dalam topik seperti:
- Prompting dan kejuruteraan prompt
- Penjanaan aplikasi teks dan gambar
- Aplikasi carian
Lawati https://aka.ms/genai-js-course untuk mula!
🌱 Mula Bermula
Guru, kami telah menyertakan beberapa cadangan tentang bagaimana menggunakan kurikulum ini. Kami ingin menerima maklum balas anda di forum perbincangan kami!
Pelajar, untuk setiap pelajaran, mulakan dengan kuiz pra-ceramah dan teruskan dengan membaca bahan kuliah, menyelesaikan pelbagai aktiviti dan periksa pemahaman anda dengan kuiz pasca-ceramah.
Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan sekelas anda untuk bekerja pada 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 untuk bahan kajian tambahan.
📋 Menyediakan persekitaran anda
Kurikulum ini mempunyai persekitaran pembangunan yang sudah siap! Semasa anda bermula, anda boleh memilih untuk menjalankan kurikulum dalam Codespace (persekitaran berasaskan pelayar, tiada pemasangan diperlukan), atau secara tempatan di komputer anda menggunakan penyunting teks seperti Visual Studio Code.
Buat repositori anda
Untuk memudahkan anda menyimpan kerja anda, adalah disarankan agar anda membuat salinan repositori ini sendiri. 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 ini:
- Fork Repositori: Klik pada butang "Fork" di sudut atas-kanan 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 baharu untuk anda bekerja.
Menjalankan kurikulum secara tempatan di komputer anda
Untuk menjalankan kurikulum ini secara tempatan 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 yang paling sesuai untuk anda.
Cadangan kami ialah menggunakan Visual Studio Code sebagai editor anda, yang juga memiliki 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 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 melakukan 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 cepat
📂 Setiap pelajaran termasuk:
- sketchnote pilihan
- video tambahan pilihan
- kuiz pemanasan sebelum pelajaran
- pelajaran bertulis
- untuk pelajaran berasaskan projek, panduan langkah demi langkah untuk membina projek
- pemeriksaan 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 diterapkan ke Azure; ikuti arahan dalam folder
quiz-app.
🗃️ Pelajaran
| Nama Projek | Konsep Diajarkan | Objektif Pembelajaran | Pelajaran Berkaitan | Pengarang | |
|---|---|---|---|---|---|
| 01 | Memulakan | Pengenalan kepada Pengaturcaraan dan Alat-alat Kerja | Pelajari asas di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan kerja mereka | Pengenalan kepada Bahasa Pengaturcaraan dan Alat-alat Kerja | Jasmine |
| 02 | Memulakan | Asas GitHub, termasuk bekerjasama dalam kumpulan | Cara menggunakan GitHub dalam projek anda, cara berkolaborasi dengan orang lain dalam 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 | Array dan Gelung | Bekerja dengan data menggunakan array dan gelung dalam JavaScript | Array dan Gelung | Jasmine |
| 08 | Terrarium | HTML dalam Amalan | Bina HTML untuk membuat terrarium dalam talian, fokus pada membina susun atur | Pengenalan kepada HTML | Jen |
| 09 | Terrarium | CSS dalam Amalan | Bina CSS untuk menghias terrarium dalam talian, fokus 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/jatuh, fokus pada penutupan dan manipulasi DOM | Penutupan JavaScript, manipulasi DOM | Jen |
| 11 | Typing Game | Bina Permainan Mengetik | Pelajari cara menggunakan acara papan kekunci untuk mengendalikan logik aplikasi JavaScript anda | Pengaturcaraan Berasaskan 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 | Membina borang, memanggil API dan menyimpan pemboleh ubah dalam storan tempatan | Bina elemen JavaScript sambungan pelayar anda untuk memanggil API menggunakan pemboleh ubah 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; pelajari tentang prestasi web dan beberapa pengoptimuman untuk meningkatkan | Tugas Latar Belakang dan Prestasi | Jen |
| 15 | Permainan Angkasa | Pembangunan Permainan Lanjutan dengan JavaScript | Pelajari tentang Pewarisan menggunakan kedua-dua Kelas dan Komposisi serta corak Pub/Sub, sebagai persediaan untuk membina permainan | Pengenalan kepada Pembangunan Permainan Lanjutan | Chris |
| 16 | Permainan Angkasa | Melukis pada kanvas | Pelajari tentang API Canvas, yang digunakan untuk melukis elemen pada skrin | Melukis pada Kanvas | Chris |
| 17 | Permainan Angkasa | Menggerakkan elemen di sekeliling skrin | Ketahui bagaimana elemen boleh bergerak menggunakan koordinat cartesian dan API Canvas | Menggerakkan Elemen | Chris |
| 18 | Permainan Angkasa | Pengesanan perlanggaran | Buat elemen bertembung dan bertindak antara satu sama lain menggunakan tekan kekunci dan menyediakan 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 tentang mengakhiri dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pemboleh ubah | Syarat Pengakhiran | Chris |
| 21 | Aplikasi Perbankan | Templat HTML dan Laluan dalam Aplikasi Web | Pelajari cara membuat struktur asas laman web berbilang halaman menggunakan laluan 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 Mendapat dan Menggunakan Data | Cara data mengalir masuk dan keluar dari aplikasi anda, cara mendapatkannya, menyimpannya, dan memusnahkannya | Data | Yohan |
| 24 | Aplikasi Perbankan | Konsep Pengurusan Keadaan | Pelajari cara aplikasi anda mengekalkan keadaan dan cara mengurusnya secara program | 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 kerap
Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web hari ini. Pelajar akan berpeluang mendapat 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 mempunyai pemahaman yang kukuh tentang pembangunan web.
🎓 Anda boleh mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai Jalur Pembelajaran di Microsoft Learn!
Dengan memastikan kandungan selari dengan projek, proses menjadi lebih menarik untuk pelajar dan pemahaman 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 beberapa pengarangnya menyumbang kepada kurikulum ini.
Selain itu, kuiz berisiko rendah sebelum kelas menetapkan niat pelajar untuk mempelajari 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 menjelang pengakhiran kitar 12 minggu.
Walaupun kami sengaja mengelakkan memperkenalkan rangka kerja JavaScript untuk menumpukan pada kemahiran asas yang diperlukan sebagai pembangun web sebelum mengadopsi rangka kerja, satu langkah seterusnya yang baik untuk melengkapkan kurikulum ini ialah belajar tentang Node.js melalui satu lagi koleksi video: "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. Fork repositori ini, pasang Docsify pada mesin tempatan anda, dan kemudian di folder root repositori ini, taip docsify serve. Laman web akan dihidangkan pada port 3000 di localhost anda: localhost:3000.
PDF untuk semua pelajaran boleh didapati di sini.
🎒 Kursus Lain
Pasukan kami menghasilkan kursus lain! Lihatlah:
LangChain
Azure / Edge / MCP / Agen
Siri AI Generatif
Pembelajaran Teras
Siri Copilot
Mendapatkan Bantuan
Jika anda tersekat atau mempunyai sebarang soalan tentang membina aplikasi AI. Sertai pelajar lain dan pemaju 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 kesilapan 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 hendaklah dianggap sebagai sumber yang sah. Untuk maklumat penting, terjemahan profesional oleh manusia adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.


