Ini adalah repositori kurikulum pendidikan untuk mengajar asas pembangunan web kepada pemula. Kurikulum ini merupakan kursus komprehensif selama 12 minggu yang dibangunkan oleh Microsoft Cloud Advocates, dengan 24 pelajaran praktikal yang merangkumi JavaScript, CSS, dan HTML.
Ini adalah repositori kurikulum pendidikan untuk mengajar asas pembangunan web kepada pemula. Kurikulum ini adalah kursus komprehensif selama 12 minggu yang dibangunkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktikal yang merangkumi JavaScript, CSS, dan HTML.
### Komponen Utama
- **Kandungan Pendidikan**: 24 pelajaran yang disusun secara berstruktur dalam modul berasaskan projek
- **Projek Praktikal**: Terrarium, Permainan Menaip, Sambungan Penyemak Imbas, Permainan Angkasa, Aplikasi Perbankan, Penyunting Kod, dan Pembantu Chat AI
- **Kuiz Interaktif**: 48 kuiz dengan 3 soalan setiap satu (penilaian sebelum/selepas pelajaran)
- **Sokongan Pelbagai Bahasa**: Terjemahan automatik untuk lebih 50 bahasa melalui GitHub Actions
- **Kandungan Pendidikan**: 24 pelajaran tersusun yang diatur dalam modul berasaskan projek
- **Projek Praktikal**: Terrarium, Permainan Mengetik, Sambungan Pelayar, Permainan Angkasa, Aplikasi Perbankan, Penyunting Kod, dan Pembantu Sembang AI
- **Kuiz Interaktif**: 48 kuiz dengan 3 soalan setiap satu (penilaian sebelum/selepas pelajaran)
- **Sokongan Pelbagai Bahasa**: Terjemahan automatik untuk lebih 50+ bahasa melalui GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) disyorkan untuk pelajar
- Kursus tambahan: AI Generatif, Sains Data, ML, kurikulum IoT tersedia
### Bekerja dengan Projek Khusus
### Bekerja Dengan Projek Spesifik
Untuk arahan terperinci mengenai projek individu, rujuk fail README dalam:
- `quiz-app/README.md` - Aplikasi kuiz Vue 3
- `7-bank-project/README.md` - Aplikasi perbankan dengan pengesahan
- `5-browser-extension/README.md` - Pembangunan sambungan penyemak imbas
- `6-space-game/README.md` - Pembangunan permainan berasaskan kanvas
- `9-chat-project/README.md` - Projek pembantu chat AI
Untuk arahan terperinci mengenai projek individu, lihat fail README dalam:
- `quiz-app/README.md` - Aplikasi kuiz Vue 3
- `7-bank-project/README.md` - Aplikasi perbankan dengan pengesahan
- `5-browser-extension/README.md` - Pembangunan sambungan pelayar
- `6-space-game/README.md` - Pembangunan permainan berasaskan canvas
- `9-chat-project/README.md` - Projek pembantu sembang AI
### Struktur Monorepo
Walaupun bukan monorepo tradisional, repositori ini mengandungi pelbagai projek bebas:
- Setiap pelajaran adalah berdiri sendiri
- Projek tidak berkongsi kebergantungan
- Bekerja pada projek individu tanpa menjejaskan yang lain
- Klon keseluruhan repositori untuk pengalaman kurikulum penuh
Walaupun bukan monorepo tradisional, repositori ini mengandungi beberapa projek bebas:
- Setiap pelajaran berdiri sendiri
- Projek tidak berkongsi kebergantungan
- Bekerja pada projek individu tanpa menjejaskan yang lain
- Klon keseluruhan repo untuk pengalaman kurikulum penuh
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/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 berwibawa. Untuk maklumat kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/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 rujukan 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.
Belajar asas pembangunan web dengan kursus menyeluruh selama 12 minggu oleh Microsoft Cloud Advocates. Setiap 24 pelajaran mengupas JavaScript, CSS, dan HTML melalui projek praktikal seperti terarium, sambungan 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!
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!
> Repositori ini mengandungi lebih 50 terjemahan bahasa yang meningkatkan saiz muat turun dengan ketara. Untuk klon tanpa terjemahan, gunakan sparse checkout:
> Repositori ini merangkumi lebih 50 terjemahan bahasa yang secara signifikan menambah saiz muat turun. Untuk clone tanpa terjemahan, gunakan sparse checkout:
> 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.
> Ini memberikan anda segala yang diperlukan untuk menamatkan kursus dengan muat turun yang lebih pantas.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jika anda ingin mendapatkan sokongan bahasa terjemahan tambahan yang disenaraikan [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jika anda ingin mempunyai bahasa terjemahan tambahan yang disokong, senarai terdapat [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Adakah anda seorang pelajar?_
Lawati [**halaman Pusat Pelajar**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana anda akan menemui sumber untuk pemula, Pakej Pelajar dan juga cara untuk mendapatkan baucar sijil percuma. Ini adalah halaman yang ingin anda tandai dan periksa dari masa ke masa kerana kami menukar kandungan setiap bulan.
Lawati [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) 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 Ejen GitHub Copilot baru untuk diselesaikan!
### 📣 Pengumuman - Cabaran Mod Agen GitHub Copilot Baru untuk disiapkan!
Cabaran Baru ditambah, cari "Cabaran Ejen GitHub Copilot 🚀" di kebanyakan bab. Itu adalah cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan mod Ejen. Jika anda belum pernah menggunakan mod Ejen sebelum ini, ia mampu bukan sahaja menjana teks tetapi juga boleh mencipta dan mengedit fail, menjalankan arahan dan banyak lagi.
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 Baru untuk dibina menggunakan Generative AI_
### 📣 Pengumuman - _Projek Baharu untuk dibina menggunakan Generative AI_
Projek Pembantu AI baru sahaja ditambah, lihat [projek](./9-chat-project/README.md)
Projek Pembantu AI baharu baru saja ditambah, lihat [projek](./9-chat-project/README.md)
### 📣 Pengumuman - _Kurikulum Baru_ untuk Generative AI bagi JavaScript baru sahaja dikeluarkan
### 📣 Pengumuman - _Kurikulum Baharu_ tentang Generative AI untuk JavaScript baru dikeluarkan
Jangan terlepas kurikulum Generative AI baru kami!
Jangan terlepas kurikulum Generative AI baharu kami!
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk bermula!
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk mula!
Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda dalam pembelajaran topik seperti:
- Prompting dan kejuruteraan prompt
- Penjanaan aplikasi teks dan imej
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](../../[https:/aka.ms/genai-js-course) untuk bermula!
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk mula!
## 🌱 Mula Bermula
> **Guru**, kami telah [menyertakan beberapa cadangan](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami sangat mengalu-alukan maklum balas anda [di forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Guru**, kami telah [menyertakan beberapa cadangan](for-teachers.md) tentang bagaimana menggunakan kurikulum ini. Kami ingin menerima maklum balas anda [di forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulakan dengan kuiz pra-ceramah dan ikuti dengan membaca bahan kuliah, menyelesaikan pelbagai aktiviti dan periksa kefahaman anda dengan kuiz pasca-ceramah.
**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 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 untuk bekerjasama dalam projek! Perbincangan digalakkan di [forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) di mana pasukan moderator kami akan bersedia untuk menjawab soalan anda.
Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan sekelas anda untuk bekerja pada projek bersama! Perbincangan digalakkan di [forum perbincangan](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kami di mana pasukan moderator kami akan tersedia untuk menjawab soalan anda.
Untuk memajukan pendidikan anda, kami sangat mengesyorkan meneroka [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan pembelajaran tambahan.
Untuk melanjutkan pendidikan anda, kami sangat mengesyorkan meneroka [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan kajian tambahan.
### 📋 Menyediakan persekitaran anda
Kurikulum ini mempunyai persekitaran pembangunan yang sedia digunakan! Apabila anda bermula anda boleh memilih untuk menjalankan kurikulum dalam [Codespace](https://github.com/features/codespaces/) (_persekitaran berasaskan pelayar tanpa perlu pemasangan_), atau secara tempatan di komputer anda menggunakan penyunting teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Kurikulum ini mempunyai persekitaran pembangunan yang sudah siap! Semasa anda bermula, anda boleh memilih untuk menjalankan kurikulum dalam [Codespace](https://github.com/features/codespaces/) (_persekitaran berasaskan pelayar, tiada pemasangan diperlukan_), atau secara tempatan di komputer anda menggunakan penyunting teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Cipta repositori anda
Untuk memudahkan anda menyimpan kerja anda, disyorkan anda membuat salinan anda sendiri repositori ini. Anda boleh melakukannya dengan mengklik butang **Use this template** di bahagian atas halaman. Ini akan mencipta repositori baru di akaun GitHub anda dengan salinan kurikulum.
#### 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:
1. **Fork Repositori**: Klik pada butang "Fork" di penjuru atas kanan halaman ini.
Dalam salinan repositori ini yang telah anda cipta, klik butang **Code** dan pilih **Open with Codespaces**. Ini akan mencipta Codespace baru untuk anda bekerja.
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 arahan. Pelajaran pertama kami, [Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan membimbing anda meneroka pelbagai pilihan untuk setiap alat ini supaya anda boleh memilih yang paling sesuai untuk 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](../../1-getting-started-lessons/1-intro-to-programming-languages), akan membimbing anda melalui pelbagai pilihan untuk setiap alat ini supaya anda boleh memilih yang paling sesuai untuk anda.
Cadangan kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai penyunting anda, yang juga mempunyai [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) terbina dalam. Anda boleh muat turun Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Cadangan kami ialah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai editor anda, yang juga memiliki [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) terbina dalam. Anda boleh muat turun Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klon repositori anda ke komputer anda. Anda boleh melakukannya dengan mengklik butang **Code** dan menyalin URL:
1. Clone repositori anda ke komputer anda. Anda boleh melakukannya dengan mengklik butang **Code** dan menyalin URL:
[CodeSpace](./images/createcodespace.png)
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan arahan berikut, gantikan `<your-repository-url>` dengan URL yang baru anda salin:
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan perintah berikut, gantikan `<your-repository-url>` dengan URL yang baru anda salin:
```bash
git clone <your-repository-url>
```
2. Buka folder dalam Visual Studio Code. Anda boleh melakukan ini dengan mengklik **Fail** > **Buka Folder** dan memilih folder yang baru sahaja anda klon.
2. 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](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk pratonton halaman HTML dalam Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - untuk membantu anda menulis kod dengan lebih pantas
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - untuk membantu anda menulis kod dengan lebih cepat
## 📂 Setiap pelajaran merangkumi:
## 📂 Setiap pelajaran termasuk:
- sketchnote pilihan
- video tambahan pilihan
- kuiz pemanasan pra-pelajaran
- kuiz pemanasan sebelum pelajaran
- pelajaran bertulis
- untuk pelajaran berasaskan projek, panduan langkah demi langkah cara membina projek
- untuk pelajaran berasaskan projek, panduan langkah demi langkah untuk membina projek
- [kuiz selepas pelajaran](https://ff-quizzes.netlify.app/web/)
> **Nota tentang kuiz**: Semua kuiz terkandung dalam folder Quiz-app, 48 kuiz dengan tiga soalan setiap satu. Mereka boleh didapati [di sini](https://ff-quizzes.netlify.app/web/) aplikasi kuiz boleh dijalankan secara tempatan atau dipasang ke Azure; ikut arahan di folder `quiz-app`.
> **Nota tentang kuiz**: Semua kuiz terkandung dalam folder Quiz-app, 48 kuiz keseluruhan dengan tiga soalan setiap satu. Ia tersedia [di sini](https://ff-quizzes.netlify.app/web/) aplikasi kuiz boleh dijalankan secara tempatan atau diterapkan ke Azure; ikuti arahan dalam folder `quiz-app`.
## 🗃️ Pelajaran
| | Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Berkaitan | Penulis |
| 01 | Memulakan | Pengenalan kepada Pengaturcaraan dan Alat-alat Perdagangan | Belajar asas-asas di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan kerja mereka | [Pengenalan kepada Bahasa Pengaturcaraan dan Alat-alat Perdagangan](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Memulakan | Asas GitHub, termasuk bekerja dengan pasukan | Cara menggunakan GitHub dalam projek anda, bagaimana untuk bekerjasama dengan orang lain dalam pangkalan kod | [Pengenalan kepada GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Memulakan | Kebolehcapaian | Belajar asas-asas kebolehcapaian web | [Asas Kebolehcapaian](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Asas JS | Jenis Data JavaScript | Asas-asas jenis data JavaScript | [Jenis Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Asas JS | Fungsi dan Kaedah | Belajar tentang fungsi dan kaedah untuk mengurus aliran logik aplikasi | [Fungsi dan Kaedah](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher |
| 06 | Asas JS | Membuat Keputusan dengan JS | Belajar bagaimana membuat syarat dalam kod anda menggunakan kaedah membuat keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Asas JS | Array dan Gelung | Bekerja dengan data menggunakan array dan gelung dalam JavaScript | [Array dan Gelung](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktik | Membina HTML untuk mencipta terrarium dalam talian, menumpukan pada pembinaan layout | [Pengenalan kepada HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Praktik | Membina CSS untuk menata terrarium dalam talian, menumpukan pada asas CSS termasuk menjadikan halaman responsif | [Pengenalan kepada CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Membina JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/jatuh, menumpukan pada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Membina Permainan Mengetik | Belajar cara menggunakan acara papan kekunci untuk menggerakkan logik aplikasi JavaScript anda | [Pengaturcaraan Berpandukan Acara](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bekerja dengan Pelayar | Belajar bagaimana pelayar berfungsi, sejarahnya, dan bagaimana untuk membina elemen pertama sambungan pelayar | [Mengenai Pelayar](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Membina borang, memanggil API dan menyimpan pembolehubah dalam penyimpanan setempat | Membina elemen JavaScript sambungan pelayar anda untuk memanggil API menggunakan pembolehubah yang disimpan dalam penyimpanan setempat | [API, Borang, dan Penyimpanan Setempat](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Proses latar belakang dalam pelayar, prestasi web | Menggunakan proses latar belakang pelayar untuk mengurus ikon sambungan; belajar tentang prestasi web dan beberapa pengoptimuman untuk menjadikan | [Tugas Latar Belakang dan Prestasi](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Pembangunan Permainan Lebih Lanjut dengan JavaScript | Belajar tentang Pewarisan menggunakan kedua-dua Kelas dan Komposisi serta corak Pub/Sub, sebagai persediaan untuk membina permainan | [Pengenalan kepada Pembangunan Permainan Lanjutan](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Melukis ke kanvas | Belajar tentang Canvas API, digunakan untuk melukis elemen ke skrin | [Melukis ke Kanvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Menggerakkan elemen di sekitar skrin | Menemui bagaimana elemen boleh mendapat pergerakan menggunakan koordinat kartesian dan Canvas API | [Menggerakkan Elemen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Pengesanan perlanggaran | Membuat elemen bertembung dan bertindak balas antara satu sama lain menggunakan kekunci dan menyediakan fungsi penyejukan untuk memastikan prestasi permainan | [Pengesanan Perlanggaran](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Menjaga skor | Melakukan pengiraan matematik berdasarkan status dan prestasi permainan |[Menjaga Skor](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Menamatkan dan memulakan semula permainan | Belajar tentang menamatkan dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pembolehubah | [Keadaan Penamatan](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Templat HTML dan Laluan dalam Aplikasi Web | Belajar bagaimana mencipta rangka seni sesebuah tapak web berbilang halaman menggunakan laluan dan templat HTML | [Templat HTML dan Laluan](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Membina Borang Log Masuk dan Pendaftaran | Belajar tentang membina borang dan mengendalikan rutin pengesahan| [Borang](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Kaedah Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi anda, bagaimana untuk mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Pengurusan Negeri | Belajar bagaimana aplikasi anda mengekalkan negeri dan bagaimana menguruskannya secara programatik | [Pengurusan Negeri](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Bekerja dengan VScode | Belajar cara menggunakan penyunting kod| [Gunakan Penyunting Kod VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Bekerja dengan AI | Belajar cara membina pembantu AI anda sendiri | [Projek Pembantu AI](./9-chat-project/README.md) | Chris |
| | 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](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | 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](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Memulakan | Kebolehcapaian | Pelajari asas kebolehcapaian web | [Asas Kebolehcapaian](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Asas JS | Jenis Data JavaScript | Asas jenis data JavaScript| [Jenis Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Asas JS | Fungsi dan Kaedah | Pelajari tentang fungsi dan kaedah untuk mengurus aliran logik aplikasi | [Fungsi dan Kaedah](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher |
| 06 | Asas JS | Membuat Keputusan dengan JS | Pelajari cara membuat syarat dalam kod anda menggunakan kaedah membuat keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Asas JS | Array dan Gelung | Bekerja dengan data menggunakan array dan gelung dalam JavaScript | [Array dan Gelung](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Amalan | Bina HTML untuk membuat terrarium dalam talian, fokus pada membina susun atur | [Pengenalan kepada HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Amalan | Bina CSS untuk menghias terrarium dalam talian, fokus pada asas CSS termasuk membuat halaman responsif | [Pengenalan kepada CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | 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](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bina Permainan Mengetik | Pelajari cara menggunakan acara papan kekunci untuk mengendalikan logik aplikasi JavaScript anda | [Pengaturcaraan Berasaskan Acara](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Sambungan Pelayar Hijau](./5-browser-extension/solution/README.md) | Bekerja dengan Pelayar | Pelajari cara pelayar berfungsi, sejarahnya, dan cara membina elemen pertama sambungan pelayar | [Mengenai Pelayar](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Sambungan Pelayar Hijau](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Sambungan Pelayar Hijau](./5-browser-extension/solution/README.md) | 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](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Permainan Angkasa](./6-space-game/solution/README.md) | 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](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Permainan Angkasa](./6-space-game/solution/README.md) | Melukis pada kanvas | Pelajari tentang API Canvas, yang digunakan untuk melukis elemen pada skrin | [Melukis pada Kanvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menggerakkan elemen di sekeliling skrin | Ketahui bagaimana elemen boleh bergerak menggunakan koordinat cartesian dan API Canvas | [Menggerakkan Elemen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Permainan Angkasa](./6-space-game/solution/README.md) | Pengesanan perlanggaran | Buat elemen bertembung dan bertindak antara satu sama lain menggunakan tekan kekunci dan menyediakan fungsi cooldown untuk memastikan prestasi permainan | [Pengesanan Perlanggaran](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menjaga skor | Lakukan pengiraan matematik berdasarkan status dan prestasi permainan | [Menjaga Skor](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Permainan Angkasa](./6-space-game/solution/README.md) | Mengakhiri dan memulakan semula permainan | Pelajari tentang mengakhiri dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pemboleh ubah | [Syarat Pengakhiran](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | 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](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Bina Borang Log Masuk dan Pendaftaran | Pelajari tentang membina borang dan mengendalikan rutin pengesahan | [Borang](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Kaedah Mendapat dan Menggunakan Data | Cara data mengalir masuk dan keluar dari aplikasi anda, cara mendapatkannya, menyimpannya, dan memusnahkannya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Konsep Pengurusan Keadaan | Pelajari cara aplikasi anda mengekalkan keadaan dan cara mengurusnya secara program | [Pengurusan Keadaan](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Kod Penyemak Imbas/VScode](../../8-code-editor) | Bekerja dengan VScode | Pelajari cara menggunakan penyunting kod| [Gunakan Penyunting Kod VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Pembantu AI](./9-chat-project/README.md) | Bekerja dengan AI | Pelajari cara membina pembantu AI anda sendiri | [Projek Pembantu AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogi
Kurikulum kami direka dengan dua prinsip pedagogi utama yang diambil kira:
Kurikulum kami direka dengan dua prinsip pedagogi utama dalamfikiran:
* pembelajaran berasaskan projek
* kuiz yang kerap
* kuiz kerap
Program ini mengajar asas-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 gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Menjelang akhir siri ini, pelajar akan memperoleh pemahaman yang mantap tentang pembangunan web.
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](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
Dengan memastikan bahawa kandungan sejajar dengan projek, proses pembelajaran menjadi lebih menarik untuk pelajar dan pengekalan konsep akan meningkat. Kami juga menulis beberapa pelajaran permulaan dalam asas JavaScript untuk memperkenalkan konsep, dipasangkan dengan video dari koleksi tutorial video "[Siri Pemula kepada: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)," beberapa pengarangnya menyumbang kepada kurikulum ini.
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](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", yang beberapa pengarangnya menyumbang kepada kurikulum ini.
Selain itu, kuiz berisiko rendah sebelum kelas menetapkan niat pelajar untuk mempelajari sesuatu topik, manakala kuiz kedua selepas kelas memastikan pengekalan lebih lanjut. Kurikulum ini direka supaya fleksibel dan menyeronokkan serta boleh diambil sepenuhnya atau sebahagiannya. Projek-projek bermula kecil dan menjadi semakin kompleks menjelang akhir kitaran 12 minggu.
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 pengenalan rangka kerja JavaScript untuk memberi tumpuan 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 satu lagi koleksi video: "[Siri Pemula kepada: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Lawati [Kod Etika](CODE_OF_CONDUCT.md) dan garis panduan [Sumbangan](CONTRIBUTING.md) kami. Kami mengalu-alukan maklum balas membina anda!
> Lawati [Kod Etika](CODE_OF_CONDUCT.md) dan garis panduan [Menyumbang](CONTRIBUTING.md) kami. Kami mengalu-alukan maklum balas membina anda!
## 🧭 Akses luar talian
Anda boleh menjalankan dokumentasi ini secara luar talian dengan menggunakan [Docsify](https://docsify.js.org/#/). Gariskan repo ini, [pasang Docsify](https://docsify.js.org/#/quickstart) pada mesin tempatan anda, dan kemudian dalam folder akar repo ini, taip `docsify serve`. Laman web akan disajikan pada port 3000 pada localhost anda: `localhost:3000`.
Anda boleh menjalankan dokumentasi ini secara luar talian dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repositori ini, [pasang Docsify](https://docsify.js.org/#/quickstart) 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
PDF bagi semua pelajaran boleh didapati [di sini](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF untuk semua pelajaran boleh didapati [di sini](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Kursus Lain
Pasukan kami menghasilkan kursus lain! Lihat:
Pasukan kami menghasilkan kursus lain! Lihatlah:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agen
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -232,7 +232,7 @@ Pasukan kami menghasilkan kursus lain! Lihat:
---
### Pembelajaran Asas
### Pembelajaran Teras
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -249,13 +249,13 @@ Pasukan kami menghasilkan kursus lain! Lihat:
Jika anda tersekat atau mempunyai sebarang pertanyaan tentang 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 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.
@ -267,5 +267,5 @@ Repositori ini dilesenkan di bawah lesen MIT. Lihat fail [LICENSE](../../LICENSE
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/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 oleh profesional manusia adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/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.
# Peta Jalan untuk Repositori Web-Dev-For-Beginners Microsoft
**Repositori ini menyediakan peta jalan untuk mempelajari asas pembangunan web dengan fokus pada JavaScript, HTML, dan CSS. Kurikulum ini fleksibel dan boleh diambil secara keseluruhan atau sebahagian, dengan 24 pelajaran yang tersebar sepanjang 12 minggu.**
## Pencapaian Utama
* **Minggu 1-3:**
* Pengenalan kepada bahasa pengaturcaraan dan alat perdagangan
* Asas GitHub
* Aksesibiliti
* Asas JS: jenis data, fungsi dan kaedah
* Membuat keputusan dengan JS
* **Minggu 4-6:**
* Array dan gelung
* Terrarium: HTML dalam praktik
* CSS dalam praktik
* Penutupan JavaScript
* Pengendalian DOM
* **Minggu 7-9:**
* Permainan Mengetik: Pengaturcaraan berasaskan acara
* Sambungan Pelayar Hijau: Bekerja dengan pelayar
* Membina borang, memanggil API dan menyimpan pemboleh ubah dalam storan tempatan
* Proses latar dalam pelayar
* Prestasi web
* **Minggu 10-12:**
* Permainan Angkasa: Pembangunan permainan lanjutan dengan JavaScript
* Melukis pada kanvas
* Menggerakkan elemen di sekitar skrin
* Pengesanan perlanggaran
* Menjaga skor, menamatkan dan memulakan semula permainan
* Aplikasi Perbankan: Templat HTML dan Laluan dalam Aplikasi Web
* Membina Borang Log Masuk dan Pendaftaran
* Kaedah Mengambil dan Menggunakan Data
* Konsep Pengurusan Keadaan
## Hasil Pembelajaran
**Dengan menamatkan peta jalan ini, pelajar akan memperoleh pengalaman praktikal membina permainan menaip, terrarium maya, sambungan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Mereka juga akan membina pemahaman kukuh tentang asas pembangunan web.**
## Sumber Tambahan
* Repositori ini menyediakan banyak sumber untuk pembelajaran selanjutnya, termasuk tutorial, contoh kod, dan cabaran.
* Platform Microsoft Learn menawarkan pelbagai kursus dan laluan pembelajaran pembangunan web.
* Komuniti dalam talian seperti Stack Overflow dan MDN Web Docs menyediakan sokongan dan sumber yang berharga untuk pembangun web.
**Saya harap peta jalan ini membantu anda dalam perjalanan pembangunan web anda!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asli dalam bahasa asalnya perlu dianggap sebagai sumber yang sahih. 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.
Hii ni hifadhi ya mtaala wa elimu kwa ajili ya kufundisha misingi ya maendeleo ya wavuti kwa wanaoanza. Mtaala huu ni kozi ya kina ya wiki 12 iliyotengenezwa na Microsoft Cloud Advocates, yenye masomo 24 ya vitendo yanayofunika JavaScript, CSS, na HTML.
Hii ni hifadhidata ya mtaala wa elimu kwa kufundisha misingi ya maendeleo ya wavuti kwa wanaoanza. Mtaala ni kozi kamilifu ya wiki 12 iliyotengenezwa na Wakili wa Wingu wa Microsoft, ukiwa na masomo 24 ya vitendo yanayohusisha JavaScript, CSS, na HTML.
### Vipengele Muhimu
- **Yaliyomo ya Elimu**: Masomo 24 yaliyopangwa kwa utaratibu katika moduli za miradi
- **Miradi ya Vitendo**: Terrarium, Mchezo wa Kuandika, Kiendelezi cha Kivinjari, Mchezo wa Anga, Programu ya Benki, Mhariri wa Nambari, na Msaidizi wa Gumzo wa AI
- **Maswali ya Maingiliano**: Maswali 48 yenye maswali 3 kila moja (tathmini kabla/baada ya somo)
- **Msaada wa Lugha Nyingi**: Tafsiri za kiotomatiki kwa zaidi ya lugha 50 kupitia GitHub Actions
- **Yaliyomo ya Kielimu**: Masomo 24 yaliyoandaliwa kwa muundo wa miradi
- **Miradi ya Vitendo**: Terrarium, Mchezo wa Kuandika, Kiendelezi cha Kivinjari, Mchezo wa Anga, App ya Benki, Mhariri wa Nambari, na Msaidizi wa Chat wa AI
- **Mitihani ya Kuingiliana**: Mitihani 48 yenye maswali 3 kila moja (uchunguzi kabla/baada ya somo)
- **Msaada wa Lugha Nyingi**: Tafsiri za kiotomatiki kwa lugha 50+ kupitia GitHub Actions
- [Rasilimali za Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) inapendekezwa kwa wanafunzi
- Kozi za ziada: Generative AI, Sayansi ya Takwimu, ML, mtaala wa IoT unapatikana
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) inayopendekezwa kwa wanafunzi
- Kozi za ziada: AI ya Kutengeneza, Sayansi ya Data, ML, kozi za IoT zinapatikana
### Kufanya Kazi na Miradi Mahususi
### Kazi na Miradi Maalum
Kwa maelekezo ya kina juu ya miradi ya mtu binafsi, rejelea faili za README katika:
- `quiz-app/README.md` - Programu ya maswali ya Vue 3
Kwa maelekezo ya kina kuhusu miradi binafsi, rejelea faili za README katika:
- `quiz-app/README.md` - Programu ya quiz ya Vue 3
- `7-bank-project/README.md` - Programu ya benki yenye uthibitishaji
- `5-browser-extension/README.md` - Maendeleo ya kiendelezi cha kivinjari
- `6-space-game/README.md` - Maendeleo ya mchezo wa msingi wa Canvas
- `9-chat-project/README.md` - Mradi wa msaidizi wa gumzo la AI
- `6-space-game/README.md` - Maendeleo ya mchezo wa Canvas
- `9-chat-project/README.md` - Mradi wa msaidizi wa chat AI
### Muundo wa Monorepo
Ingawa si monorepo ya jadi, hifadhi hii ina miradi huru mingi:
- Kila somo ni huru
Ingawa sio monorepo ya kawaida, hifadhidata hii ina miradi kadhaa huru:
- Kila somo lina muundo wake
- Miradi haishiriki utegemezi
- Fanya kazi kwenye miradi ya mtu binafsi bila kuathiri mingine
- Clone hifadhi nzima kwa uzoefu kamili wa mtaala
- Fanya kazi kwenye miradi binafsi bila kuathiri mingine
- Nakili hifadhidata nzima kwa uzoefu kamili wa mtaala
---
**Kanusho**:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Kipengele cha Kutolewa Wajibu**:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kwamba tafsiri za moja kwa moja zinaweza kuwa na makosa au usahihi mdogo. Hati ya asili katika lugha yake ya asili inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya mtaalamu wa binadamu inapendekezwa. Hatuwezi kuwajibika kwa kutoelewana au tafsiri potovu zinazotokana na matumizi ya tafsiri hii.
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
# Maendeleo ya Wavuti kwa Kompyuta wanaoanza - Mtaala
# Maendeleo ya Wavuti kwa Waanzilishi - Mtaala
Jifunze misingi ya maendeleo ya wavuti kupitia kozi yetu kamili ya wiki 12 inayotolewa na Wakili wa Wingu wa Microsoft. Kila somo kati ya 24 linachunguza JavaScript, CSS, na HTML kupitia miradi ya vitendo kama vile terrariums, nyongeza za kivinjari, na michezo ya nafasi. Shiriki katika majaribio, mijadala, na kazi za vitendo. Boresha ujuzi wako na boresha kumbukumbu yako kwa njia yetu madhubuti inayotegemea miradi. Anza safari yako ya uandishi wa programu leo!
Jifunze misingi ya maendeleo ya wavuti kupitia kozi yetu ya kina ya wiki 12 inayotolewa na Wakili wa Wingu wa Microsoft. Kila somo kati ya 24 linaingia kwa undani katika JavaScript, CSS, na HTML kwa mradi wa vitendo kama vile terrariums, nyongeza za kivinjari, na michezo ya anga. Shirikiana na maswali, mijadala, na kazi za vitendo. Boreshaji ujuzi wako na kuimarisha ufahamu wako kwa njia yetu bora ya kufundisha inayozingatia miradi. Anza safari yako ya kuprogramu leo!
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Hii inakupa kila unachohitaji kukamilisha kozi kwa upakuaji wa kasi zaidi.
> Hii inakupa kila kitu unachohitaji kumaliza kozi kwa download ya kasi zaidi.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ikiwa unataka lugha zaidi za tafsiri zisaidiwe zinaorodheshwa [hapa](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Ikiwa unataka kuwa na lugha za tafsiri za ziada zinazoungwa mkono zimo [hapa](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Je, wewe ni mwanafunzi?_
Tembelea [**ukurasa wa Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ambapo utapata rasilimali za wanaoanza, vifurushi vya wanafunzi na hata njia za kupata vocha ya cheti bure. Huu ni ukurasa unayetaka kuweka alama na kuangalia mara kwa mara kama tunabadilisha maudhui kila mwezi.
Tembelea [**ukurasa wa Kituo cha Wanafunzi**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ambapo utapata rasilimali kwa wanaoanza, vifurushi vya Wanafunzi na hata njia za kupata vocha ya cheti bure. Huu ni ukurasa unayotaka kuweka alama na kuangalia mara kwa mara tunapo badilisha maudhui kila mwezi.
### 📣 Tangazo - Changamoto mpya za Mode ya GitHub Copilot Agent za kukamilisha!
### 📣 Tangazo - Changamoto mpya za Hali ya Wakala wa GitHub Copilot za kukamilisha!
Changamoto mpya imeongezwa, tafuta "GitHub Copilot Agent Challenge 🚀" katika sura nyingi. Hiyo ni changamoto mpya kwa kukamilisha ukitumia GitHub Copilot na mode ya Agent. Ikiwa bado hujatumia mode ya Agent, inaweza si tu kutengeneza maandishi bali pia kuunda na kuhariri mafaili, kuendesha amri na zaidi.
Changamoto mpya imeongezwa, tafuta "Changamoto ya Wakala wa GitHub Copilot 🚀" katika sura nyingi. Hii ni changamoto mpya kwako kumaliza ukitumia GitHub Copilot na hali ya Wakala. Ikiwa hujawahi kutumia hali ya Wakala hapo awali ina uwezo wa si tu kuandika maandishi bali pia kuunda na kuhariri faili, kuendesha amri na zaidi.
### 📣 Tangazo - _Mradi Mpya wa Kujenga ukitumia AI ya Kizazi_
### 📣 Tangazo - _Mradi Mpya wa kujenga ukitumia AI ya Kizazi_
Mradi mpya wa Msaidizi wa AI umeongezwa hivi karibuni, angalia [mradi](./9-chat-project/README.md)
### 📣 Tangazo - _Mtaala Mpya_ juu ya AI ya Kizazi kwa JavaScript umeachiliwa hivi karibuni
### 📣 Tangazo - _Mtaala Mpya_ juu ya AI ya Kizazi kwa JavaScript umeachiliwa tu
> **Walimu**, tumetoa [mapendekezo](for-teachers.md) ya jinsi ya kutumia mtaala huu. Tunathamini maoni yako [katika jukwaa letu la mijadala](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Walimu**, tumetoa [mapendekezo kadhaa](for-teachers.md) juu ya jinsi ya kutumia mtaala huu. Tunapenda maoni yako [katika jukwaa letu la mijadala](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Wanafunzi](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kwa kila somo, anza na jaribio kabla ya mihadhara na fuata kwa kusoma vifaa vya mihadhara, kukamilisha shughuli mbalimbali, na hakiki uelewa wako na jaribio baada ya mihadhara.
**[Wajifunza](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, kwa kila somo, anza kwa mtihani wa kabla ya somo na fuata kwa kusoma nyenzo za somo, kukamilisha shughuli mbalimbali na thibitisha uelewa wako kwa mtihani wa baada ya somo.
Ili kuboresha uzoefu wako wa kujifunza, unganisha na wenzako kufanya miradi pamoja! Mijadala inahimizwa katika [jukwaa letu la mijadala](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ambapo timu yetu ya wakasimia itakuwa tayari kujibu maswali yako.
Ili kuboresha uzoefu wako wa kujifunza, ungana na wenzako kufanya miradi pamoja! Mijadala inahimizwa katika [jukwaa letu la mijadala](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ambapo timu yetu ya wasimamizi itakuwa tayari kujibu maswali yako.
Ili kuongeza elimu yako, tunapendekeza sana kuvinjari [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) kwa vifaa vya ziada vya kusoma.
Ili kuendeleza elimu yako, tunapendekeza sana kuchunguza [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) kwa nyenzo za ziada za kujifunzia.
### 📋 Kuweka mazingira yako
Mtaala huu una mazingira ya maendeleo tayari! Unapoanza unaweza kuchagua kuendesha mtaala katika [Codespace](https://github.com/features/codespaces/) (_mazingira yanayotegemea kivinjari, hayahitaji usakinishaji_), au kwa ndani kwenye kompyuta yako ukitumia mhariri wa maandishi kama [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Mtaala huu una mazingira ya maendeleo tayari kwa matumizi! Unapoanza unaweza kuchagua kuendesha mtaala huu katika [Codespace](https://github.com/features/codespaces/) (_mazingira ya kivinjari, pasipo hitaji kufunga programu_), au kwa kompyuta yako mwenyewe ukitumia mhariri wa maandishi kama [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Unda hifadhi yako
Ili uhifadhi kazi yako kwa urahisi, inashauriwa kuunda nakala yako mwenyewe ya hifadhi hii. Unaweza kufanya hivi kwa kubonyeza kitufe cha **Use this template** katikati ya ukurasa. Hii itaunda hifadhi mpya katika akaunti yako ya GitHub yenye nakala ya mtaala.
#### Tengeneza hifadhi yako
Ili kuhifadhi kazi yako kwa urahisi, inashauriwa kutengeneza nakala yako ya hifadhi hii. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Tumia kiolezo hiki** juu ya ukurasa. Hii itaunda hifadhi mpya katika akaunti yako ya GitHub yenye nakala ya mtaala huu.
Fuata hatua hizi:
1. **Fungua Nakala**: Bonyeza kitufe cha "Fork" juu-kulia wa ukurasa huu.
1. **Chimba Hifadhi**: Bonyeza kitufe cha "Fork" juu-kulia wa ukurasa huu.
Katika nakala yako ya hifadhi uliyounda, bonyeza kitufe cha **Code** na chagua **Open with Codespaces**. Hii itaunda Codespace mpya kwa ajili yako kufanya kazi ndani yake.
Katika nakala yako ya hifadhi uliyotengeneza, bonyeza kitufe cha **Code** na chagua **Fungua na Codespaces**. Hii itaunda Codespace mpya kwako kufanya kazi.
#### Kuendesha mtaala huu kafaida ya kompyuta yako mwenyewe
Ili kuendesha mtaala huu ndani ya kompyuta yako, utahitaji mhariri wa maandishi, kivinjari na zana ya mstari wa amri. Somo letu la kwanza, [Utangulizi wa Lugha za Programu na Vifaa vya Biashara](../../1-getting-started-lessons/1-intro-to-programming-languages), litakupeleka kupitia chaguo mbalimbali za kila moja ya zana hizi ili uchague kinachokufaa zaidi.
Ili kuendesha mtaala huu kwenye kompyuta yako, utahitaji mhariri wa maandishi, kivinjari na zana ya amri. Somo letu la kwanza, [Utangulizi wa Lugha za Programu na Zana za Biashara](../../1-getting-started-lessons/1-intro-to-programming-languages), litakuongoza kupitia chaguzi mbalimbali za kila chombo ili uchague kinachokufaa zaidi.
Tunapendekeza kutumia [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kama mhariri wako, ambaye pia ana [Terminali](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) iliyojumuishwa. Unaweza kupakua Visual Studio Code [hapa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Tunapendekeza kutumia [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kama mhariri wako, ambao pia una [Terminali](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) iliyojengwa ndani. Unaweza kupakua Visual Studio Code [hapa](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Nakili hifadhi yako kwenye kompyuta yako. Unaweza kufanya hivi kwa kubonyeza kitufe cha **Code** na kunakili URL:
1. Nakili hifadhi yako kwenye kompyuta yako. Unaweza kufanya hivyo kwa kubonyeza kitufe cha **Code** na kunakili URL:
[CodeSpace](./images/createcodespace.png)
Kisha, fungua [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ndani ya [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) na endesha amri ifuatayo, ukibadilisha `<your-repository-url>` na URL uliyokopa hivi punde:
Kisha, fungua [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ndani ya [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) na endesha amri ifuatayo, ukibadilisha `<your-repository-url>` na URL uliyokuwa nayo:
```bash
git clone <your-repository-url>
```
2. Fungua folda katika Visual Studio Code. Unaweza kufanya hivi kwa kubofya **File** > **Open Folder** na kuchagua folda uliyokopa.
2. Fungua folda ndani ya Visual Studio Code. Unaweza kufanya hivi kwa kubonyeza **File** > **Open Folder** na kuchagua folda uliyokuwa umeikopa.
> Upanuzi wa Visual Studio Code unaopendekezwa:
> Mapendekezo ya nyongeza za Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - kutazama mapaji ya HTML ndani ya Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kusaidia kuandika msimbo haraka zaidi
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - kuangalia ukurasa wa HTML ndani ya Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kusaidia kuandika msimbo kwa haraka
## 📂 Kila somo linajumuisha:
- sketchnote hiari
- video ya ziada hiari
- jaribio la maandalizi kabla ya somo
- sketchnote ya hiari
- video ya ziada ya hiari
- mtihani wa kuandaa kabla ya somo
- somo lililoandikwa
- kwa masomo yanayotegemea mradi, miongozo ya hatua kwa hatua juu ya jinsi ya kujenga mradi
- kwa masomo ya mradi, mwongozo wa hatua kwa hatua wa jinsi ya kujenga mradi
- ukaguzi wa maarifa
- changamoto
- kusoma kwa ziada
- kazi
- [jaribio baada ya somo](https://ff-quizzes.netlify.app/web/)
- usomaji wa ziada
- kazi ya nyumbani
- [mtihani wa baada ya somo](https://ff-quizzes.netlify.app/web/)
> **Kumbuka kuhusu jaribio**: Jaribio zote zipo kwenye folda ya Quiz-app, jaribio 48 kwa jumla za maswali matatu kila moja. Zinapatikana [hapa](https://ff-quizzes.netlify.app/web/) app ya jaribio inaweza kuendeshwa kwa ndani au kuchapishwa kwenye Azure; fuata maelekezo kwenye folda ya `quiz-app`.
> **Kumbuka kuhusu mitihani**: Mitihani yote iko katika folda ya Quiz-app, mitihani 48 jumla ya maswali matatu kila moja. Inapatikana [hapa](https://ff-quizzes.netlify.app/web/), programu ya mtihani inaweza kuendeshwa kwa ndani au kusambazwa kwenye Azure; fuata maagizo katika folda ya `quiz-app`.
## 🗃️ Masomo
| | Jina la Mradi | Dhana Zinazofundishwa | Malengo ya Kujifunza | Somo Linalohusiana | Mwandishi |
| | Jina la Mradi | Dhana Zinazofundishwa | Malengo ya Kujifunza | Somo Linalohusiana | Mwandishi |
| 01 | Kuanza | Utangulizi wa Uprogramu na Vifaa vya Kazi | Jifunze misingi ya lugha nyingi za programu na kuhusu programu zinazosaidia watengenezaji kufanya kazi zao | [Utangulizi wa Lugha za Programu na Vifaa vya Kazi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kuanza | Misingi ya GitHub, pamoja na kazi na timu | Jinsi ya kutumia GitHub kwenye mradi wako, jinsi ya kushirikiana na wengine kwenye msimbo | [Utangulizi wa GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kuanza | Upatikanaji | Jifunze misingi ya upatikanaji wa mtandao | [Misingi ya Upatikanaji](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 01 | Kuanzisha | Utangulizi wa Uprogramu na Zana za Kazi | Jifunze misingi ya lugha nyingi za programu na kuhusu programu zinazosaidia waendelezaji wa kitaalamu kufanya kazi zao | [Utangulizi wa Lugha za Programu na Zana za Kazi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kuanzisha | Misingi ya GitHub, ikiwa ni pamoja na kufanya kazi na timu | Jinsi ya kutumia GitHub katika mradi wako, jinsi ya kushirikiana na wengine kwenye msimbo wa chanzo | [Utangulizi wa GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kuanzisha | Ufikivu | Jifunze misingi ya ufikivu wa wavuti | [Misingi ya Ufikivu](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Misingi ya JS | Aina za Data za JavaScript | Misingi ya aina za data za JavaScript | [Aina za Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Misingi ya JS | Kazi na Mbinu | Jifunze kuhusu kazi na mbinu za kusimamia mtiririko wa mantiki ya programu | [Kazi na Mbinu](./2-js-basics/2-functions-methods/README.md) | Jasmine na Christopher |
| 06 | Misingi ya JS | Kufanya Maamuzi na JS | Jifunze jinsi ya kuunda masharti kwenye msimbo wako kwa kutumia mbinu za kufanya maamuzi | [Kufanya Maamuzi](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Misingi ya JS | Mfululizo na Mizunguko | Fanya kazi na data kwa kutumia mfululizo na mizunguko katika JavaScript | [Mfululizo na Mizunguko](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Katika Vitendo | Jenga HTML kuunda terrarium mtandaoni, ukizingatia ujenzi wa mpangilio | [Utangulizi wa HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Katika Vitendo | Jenga CSS kupamba terrarium mtandaoni, ukizingatia misingi ya CSS ikiwa ni pamoja na kuruhusu ukurasa kujibadilisha | [Utangulizi wa CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Kufunga JavaScript, udhibiti wa DOM | Jenga JavaScript ili kufanya terrarium ifanye kazi kama kiolesura cha buruta/achia, ukizingatia kufunga na udhibiti wa DOM | [Kufunga JavaScript, udhibiti wa DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Jenga Mchezo wa Kuandika | Jifunze jinsi ya kutumia matukio ya kibodi kuendesha mantiki ya app yako ya JavaScript | [Uprogramu unaotumia Matukio](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Mnyongeza wa Kivinjari wa Kijani](./5-browser-extension/solution/README.md) | Kufanya kazi na Vivinjari | Jifunze jinsi vivinjari vinavyofanya kazi, historia yao, na jinsi ya kuunda vipengele vya kwanza vya kiongezi cha kivinjari | [Kuhusu Vivinjari](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Mnyongeza wa Kivinjari wa Kijani](./5-browser-extension/solution/README.md) | Kujenga fomu, kupiga API na kuhifadhi mabadiliko katika hifadhi ya ndani | Jenga vipengele vya JavaScript vya kiongezi chako cha kivinjari kupiga API kwa kutumia mabadiliko yaliyohifadhiwa kwenye hifadhi ya ndani | [APIs, Fomu, na Hifadhi ya Ndani](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Mnyongeza wa Kivinjari wa Kijani](./5-browser-extension/solution/README.md) | Michakato ya nyuma katika kivinjari, utendaji wa wavuti | Tumia michakato ya nyuma ya kivinjari kusimamia ikoni ya kiongezi; jifunze kuhusu utendaji wa wavuti na baadhi ya uboreshaji wa kufanya kazi vizuri | [Mishahara ya Nyuma na Utendaji](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Mchezo wa Anga](./6-space-game/solution/README.md) | Maendeleo ya Mchezo wa Juu kwa JavaScript | Jifunze kuhusu Urithi kwa kutumia Madarasa na Muundo pamoja na muundo wa Pub/Sub, kujiandaa kujenga mchezo | [Utangulizi wa Maendeleo ya Mchezo wa Juu](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Mchezo wa Anga](./6-space-game/solution/README.md) | Kuchora kwenye bati | Jifunze kuhusu API ya Canvas, inayotumika kuchora vipengele kwenye skrini | [Kuchora kwenye Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Mchezo wa Anga](./6-space-game/solution/README.md) | Kusogeza vipengele kuzunguka skrini | Gundua jinsi vipengele vinaweza kupata mwendo kwa kutumia kuratibu za Cartesian na API ya Canvas | [Kusogeza Vipengele Kuizunguka](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Mchezo wa Anga](./6-space-game/solution/README.md) | Kugundua Mgongano | Fanya vipengele kugongana na kuathiriana kwa kutumia vitufe vya kibodi na toa kazi ya kupumzika kuhakikisha utendaji wa mchezo | [Ugunduzi wa Mgongano](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Mchezo wa Anga](./6-space-game/solution/README.md) | Kuhesabu alama | Fanya hesabu za kihisabati kulingana na hali na utendaji wa mchezo | [Kuhesabu Alama](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Mchezo wa Anga](./6-space-game/solution/README.md) | Kumaliza na kuanzisha tena mchezo | Jifunze kuhusu kumaliza na kuanzisha tena mchezo, ikiwa ni pamoja na kusafisha rasilimali na kuweka upya thamani za mabadiliko | [Hali ya Kumalizia](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App ya Benki](./7-bank-project/solution/README.md) | Violezo vya HTML na Njia katika Tovuti ya Wavuti | Jifunze jinsi ya kuunda mfumo wa muundo wa tovuti yenye kurasa nyingi kwa kutumia njia na violezo vya HTML | [Violezo vya HTML na Njia](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [App ya Benki](./7-bank-project/solution/README.md) | Jenga Fomu ya Kuingia na Kujisajili | Jifunze kuhusu ujenzi wa fomu na kushughulikia utambuzi wa validi | [Fomu](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [App ya Benki](./7-bank-project/solution/README.md) | Mbinu za Kupata na Kutumia Data | Jinsi data inavyotiririka ndani na nje ya app yako, jinsi ya kuipata, kuihifadhi, na kuiondoa | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App ya Benki](./7-bank-project/solution/README.md) | Dhana za Usimamizi wa Hali | Jifunze jinsi app yako inavyohifadhi hali na jinsi ya kuisimamia kwa njia za programu | [Usimamizi wa Hali](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Msimbo wa Vivinjari/VScode](../../8-code-editor) | Kufanya kazi na VScode | Jifunze jinsi ya kutumia mhariri wa msimbo| [Tumia Mhariri wa Msimbo wa VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Msaidizi wa AI](./9-chat-project/README.md) | Kufanya kazi na AI | Jifunze jinsi ya kujenga msaidizi binafsi wa AI | [Mradi wa Msaidizi wa AI](./9-chat-project/README.md) | Chris |
## 🏫 Mbinu ya Kufundishia
| 06 | Misingi ya JS | Kufanya Maamuzi kwa JS | Jifunze jinsi ya kuunda masharti katika msimbo wako ukitumia mbinu za kufanya maamuzi | [Kufanya Maamuzi](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Misingi ya JS | Msururu na Mizunguko | Fanya kazi na data kupitia msururu na mizunguko katika JavaScript | [Msururu na Mizunguko](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Katika Vitendo | Jenga HTML kuunda terrarium ya mtandaoni, ukizingatia kujenga mpangilio | [Utangulizi wa HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Katika Vitendo | Jenga CSS kuibeba terrarium ya mtandaoni, ukizingatia misingi ya CSS ikiwa ni pamoja na kuifanya ukurasa uwe responsive | [Utangulizi wa CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Funguo za JavaScript, uendeshaji wa DOM | Tengeneza JavaScript ili kufanya terrarium ifanye kazi kama kiolesura cha buruta/acha, ukizingatia funguo na uendeshaji wa DOM | [Funguo za JavaScript, uendeshaji wa DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Jenga Mchezo wa Kuandika | Jifunze jinsi ya kutumia matukio ya kibodi kuendesha mantiki ya programu yako ya JavaScript | [Uprogramu unaoendeshwa na Matukio](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kufanya kazi na Vivinjari | Jifunze jinsi vinjari vinavyofanya kazi, historia yao, na jinsi ya kuanzisha vipengele vya kwanza vya kiendelezi cha kivinjari | [Kuhusu Vivinjari](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Kujenga fomu, kuita API na kuhifadhi vigezo kwenye hifadhi ya ndani | Tengeneza vipengele vya JavaScript vya kiendelezi chako cha kivinjari kuitumia API kwa kutumia vigezo vilivyosubiriwa katika hifadhi ya ndani | [APIs, Fomu, na Hifadhi ya Ndani](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Mchakato wa nyuma katika kivinjari, utendaji wa wavuti | Tumia michakato ya kivinjari ya nyuma kusimamia ikoni ya kiendelezi; jifunze kuhusu utendaji wa wavuti na baadhi ya marekebisho ili kufanya | [Kazi za Nyuma na Utendaji](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Maendeleo ya Juu zaidi ya Mchezo kwa JavaScript | Jifunze kuhusu Urithi ukitumia Madarasa na Muundo pamoja na mfano wa Pub/Sub, kama maandalizi ya kujenga mchezo | [Utangulizi wa Maendeleo ya Mchezo Cha Juu](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Kuchora kwenye turubai | Jifunze kuhusu API ya Canvas, inayotumika kuchora vipengele kwenye skrini | [Kuchora kwenye Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Kuweka vipengele kuzunguka kwenye skrini | Gundua jinsi vipengele vinaweza kupata mwendo kwa kutumia kuratibu za Cartesian na API ya Canvas | [Kusogeza Vipengele Kizunguka](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kugundua mgongano | Fanya vipengele kuwa na mgongano na kutoa athari kwa kila mmoja kwa kutumia kufungia vitufe na toa kazi ya kupumzika ili kuhakikisha utendaji wa mchezo | [Ugunduzi wa Mgongano](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Kuhifadhi alama | Fanya hesabu za kijumla kulingana na hali na utendakazi wa mchezo | [Kuhifadhi Alama](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kumaliza na kuanzisha upya mchezo | Jifunze kuhusu kumaliza na kuanzisha upya mchezo, ikiwa ni pamoja na kusafisha mali na kuweka upya thamani za vigezo | [Hali ya Kumaliza](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Violezo vya HTML na Njia katika App ya Wavuti | Jifunze jinsi ya kuunda muundo wa tovuti ya kurasa nyingi ukitumia uelekeaji na violezo vya HTML | [Violezo vya HTML na Njia](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Jenga Fomu ya Kuingia na Kusajili | Jifunze kuhusu ujenzi wa fomu na kushughulikia utambuzi | [Fomu](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Mbinu za Kupata na Kutumia Data | Jinsi data inavyopita ndani na nje ya app yako, jinsi ya kuipata, kuhifadhi na kuiondoa | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Dhana za Usimamizi wa Hali | Jifunze jinsi app yako inavyoshikilia hali na jinsi ya kuisimamia kitaalamu | [Usimamizi wa Hali](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Kufanya kazi na VScode | Jifunze jinsi ya kutumia mhariri wa msimbo | [Tumia mhariri wa msimbo wa VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Kufanya kazi na AI | Jifunze jinsi ya kujenga msaidizi wako mwenye akili bandia | [Mradi wa Msaidizi wa AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogia
Mtaala wetu umeundwa kwa misingi miwili muhimu ya kielimu:
* kujifunza kwa kutumia miradi
* kujifunza kwa mradi
* mitihani ya mara kwa mara
Programu hii inafundisha misingi ya JavaScript, HTML, na CSS, pamoja na zana na mbinu za kisasa zinazotumika na waendelezaji wa wavuti wa leo. Wanafunzi watapata fursa ya kupata uzoefu wa vitendo kwa kujenga mchezo wa kuandika, terrarium pepe, kiongezi cha kivinjari kinachotunza mazingira, mchezo wa kuvamia anga, na app ya benki kwa biashara. Mwisho wa mfululizo huu, wanafunzi watakuwa na uelewa thabiti wa maendeleo ya wavuti.
Programu hii inafundisha misingi ya JavaScript, HTML, na CSS, pamoja na zana na mbinu za hivi karibuni zinazotumiwa na waendelezaji wa wavuti wa sasa. Wanafunzi watapata fursa ya kupata uzoefu wa vitendo kwa kujenga mchezo wa kuandika, terrarium ya kidijitali, kiendelezi cha kivinjari chenye uangalifu wa mazingira, mchezo wa kawaida wa wavamizi wa anga, na app ya benki kwa biashara. Mwisho wa mfululizo, wanafunzi watakuwa na ufahamu imara wa maendeleo ya wavuti.
> 🎓 Unaweza kuchukua masomo machache ya kwanza katika mtaala huu kama [Njia ya Kujifunza](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) kwenye Microsoft Learn!
Kwa kuhakikisha yaliyomo yanalingana na miradi, mchakato unakuwa wa kuvutia zaidi kwa wanafunzi na kukumbatia dhana kutakuwa kwa kina zaidi. Pia tumeandika masomo ya kuanzisha ya misingi ya JavaScript kuanzisha dhana, yakiwa na video kutoka katika mkusanyiko wa "[Mfululizo wa Waanzilishi kwa: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", ambayo waandishi wake wengi walichangia kwenye mtaala huu.
Kwa kuhakikisha kuwa maudhui yanaendana na miradi, mchakato unakuwa wa kuvutia zaidi kwa wanafunzi na uhifadhi wa dhana utaimarishwa. Pia tuliandika masomo kadhaa ya kuanzisha misingi ya JavaScript ili kuanzisha dhana, yakiwa na video kutoka kwa mkusanyiko wa video wa "[Mfululizo wa Waanzilishi kwa: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", baadhi ya waandishi wake walichangia mtaala huu.
Zaidi ya hayo, mtihani wa kawaida kabla ya darasa unaweka nia ya mwanafunzi kuelekea kujifunza mada fulani, huku mtihani wa pili baada ya darasa ukihakikisha kukumbatia zaidi. Mtaala huu umeundwa kuwa na ufanisi na furaha na unaweza kuchukuliwa kwa jumla au sehemu. Miradi huanza kwa ukubwa mdogo na kuwa ngumu zaidi kufikia mwisho wa mzunguko wa wiki 12.
Zaidi ya hayo, mtihani wa hali ya chini kabla ya darasa huweka nia ya mwanafunzi kuelekea kujifunza mada, wakati mtihani wa pili baada ya darasa huhakikisha uhifadhi zaidi. Mtaala huu uliundwa kuwa na ufanisi na furaha na unaweza kuchukuliwa kwa jumla au sehemu. Miradi inaanza ndogo na kuwa ngumu zaidi mwishoni mwa mzunguko wa wiki 12.
Ingawa tumekuwa makusudi kuepuka kuanzisha mifumo ya JavaScript ili kuzingatia ujuzi wa msingi unaohitajika kama mtaalamu wa wavuti kabla ya kutumia mfumo, hatua inayofuata bora kukamilisha mtaala huu ni kujifunza kuhusu Node.js kupitia mkusanyiko mwingine wa video: "[Mfululizo wa Waanzilishi kwa: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Ingawa tumejaribu kuepuka kuanzisha mifumo ya JavaScript badala yake tunalenga ujuzi wa msingi unaohitajika kama msanifu wa wavuti kabla ya kutumia mfumo, hatua inayofuata bora ya kumaliza mtaala huu itakuwa kujifunza kuhusu Node.js kupitia mkusanyiko mwingine wa video: "[Mfululizo wa Waanzilishi kwa: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Tembelea miongozo yetu ya [Kanuni za Maadili](CODE_OF_CONDUCT.md) na [Kuchangia](CONTRIBUTING.md). Tunakaribisha maoni yako chanya!
> Tembelea [Kanuni zetu za Maadili](CODE_OF_CONDUCT.md) na miongozo ya [Michango](CONTRIBUTING.md). Tunakaribisha maoni yako yenye kujenga!
## 🧭 Ufikiaji wa Nje ya Mtandao
## 🧭 Ufikiaji wa Offline
Unaweza kuendesha nyaraka hizi nje ya mtandao kwa kutumia [Docsify](https://docsify.js.org/#/). Fanya fork ya repo hii, [weka Docsify](https://docsify.js.org/#/quickstart) kwenye mashine yako ya ndani, kisha katika folda kuu ya repo hii, andika `docsify serve`. Tovuti itapelekwa kwenye bandari 3000 kwenye localhost: `localhost:3000`.
Unaweza kuendesha nyaraka hizi bila mtandao kwa kutumia [Docsify](https://docsify.js.org/#/). Kopia hifadhi hii, [weka Docsify](https://docsify.js.org/#/quickstart) kwenye kompyuta yako ya karibu, kisha katika folda kuu ya hifadhi hii, andika `docsify serve`. Tovuti itakuwa ikihudumiwa kwenye bandari 3000 kwenye localhost yako: `localhost:3000`.
## 📘 PDF
@ -207,65 +206,65 @@ PDF ya masomo yote inaweza kupatikana [hapa](https://microsoft.github.io/Web-Dev
## 🎒 Kozi Nyingine
Timu yetu hutengeneza kozi nyingine! Angalia:
Timu yetu hutengeneza kozi zingine! Angalia:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Maajenti
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Wakala
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Mfululizo wa AI Inayozalisha
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Kujifunza Msingi
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Mfululizo wa Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Kama utafungwa au una maswali yoyote kuhusu kujenga programu za AI. Jiunge na wapenzi wa kujifunza na waendelezaji wenye uzoefu katika mijadala kuhusu MCP. Ni jamii inayounga mkono ambapo maswali yanakaribishwa na maarifa hushirikiwa kwa uhuru.
Kama unashindwa au una maswali yoyote kuhusu kujenga programu za AI. Jiunge na wanafunzi wenzako na waendelezaji wenye uzoefu katika mijadala kuhusu MCP. Ni jamii inayounga mkono ambapo maswali yanakaribishwa na maarifa hushirikiwa kwa huru.
Hifadhi hii ina leseni chini ya leseni ya MIT. Angalia faili la [LICENSE](../../LICENSE) kwa maelezo zaidi.
Hifadhidata hii imelindwa chini ya leseni ya MIT. Angalia faili la [LICENSE](../../LICENSE) kwa maelezo zaidi.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Hatia ya Majukumu**:
Nyaraka hii imefasiriwa kwa kutumia huduma ya utafsiri wa AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za moja kwa moja zinaweza kuwa na makosa au kasoro. Nyaraka ya awali katika lugha yake ya asili inapaswa kuchukuliwa kama chanzo halali. Kwa taarifa muhimu, tafsiri ya kitaalamu inayofanywa na binadamu inapendekezwa. Hatuna dhamana kwa kutoelewana au tafsiri potofu zinazotokana na matumizi ya tafsiri hii.
**Kidokezo cha Kutokujali**:
Nyaraka hii imetafsiriwa kwa kutumia huduma ya utafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuwa sahihi, tafadhali fahamu kwamba tafsiri za kiotomatiki zinaweza kuwa na makosa au kasoro. Nyaraka asilia katika lugha yake ya asili inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, utafsiri wa kitaalamu wa binadamu unashauriwa. Hatutawajibika kwa kutoelewana au tafsiri za makosa zitokanazo na matumizi ya tafsiri hii.
# Ramani ya Njia kwa ajili ya Hifadhi ya Microsoft Web-Dev-For-Beginners
**Hifadhi hii inatoa ramani ya njia ya kujifunza misingi ya maendeleo ya wavuti kwa kuzingatia JavaScript, HTML, na CSS. Mtaala ni rahisi kubadilika na unaweza kuchukuliwa kwa jumla au sehemu, ukiwa na masomo 24 yaliyoenea kwa wiki 12.**
## Mielekeo Muhimu
* **Wiki 1-3:**
* Utangulizi wa lugha za programu na zana za kazi
* Misingi ya GitHub
* Ufikikaji
* Misingi ya JS: aina za data, kazi na mbinu
* Kufanya maamuzi kwa JS
* **Wiki 4-6:**
* Masswali na mizunguko
* Terrarium: HTML katika mazoezi
* CSS katika mazoezi
* Kufunga kwa JavaScript
* Ubadilishaji wa DOM
* **Wiki 7-9:**
* Mchezo wa Kubandika: Uendeshaji wa matukio
* Kiongezi cha Kivinjari cha Kijani: Kufanya kazi na vivinjari
* Kujenga fomu, kuita API na kuhifadhi vigezo katika hifadhi ya ndani
* Mchakato wa nyuma katika kivinjari
* Utendaji wa wavuti
* **Wiki 10-12:**
* Mchezo wa Anga: Maendeleo ya mchezo wa hali ya juu zaidi kwa JavaScript
* Kuchora kwenye canvas
* Kusogeza vipengele kwenye skrini
* Kugundua mgongano
* Kuhifadhi alama, kufunga na kuanza mchezo tena
* Programu ya Benki: Mifano ya HTML na Njia katika Programu ya Wavuti
* Kujenga Fomu ya Kuingia na Usajili
* Njia za Kupata na Kutumia Data
* Dhana za Usimamizi wa Hali
## Matokeo ya Kujifunza
**Kwa kumaliza ramani hii ya njia, wanafunzi watapata uzoefu wa vitendo katika kujenga mchezo wa kubandika, terrarium ya mtandaoni, kiongezi cha kivinjari rafiki kwa mazingira, mchezo wa mtindo wa mvivu wa anga, na programu ya benki kwa biashara. Pia wataendeleza uelewa thabiti wa misingi ya maendeleo ya wavuti.**
## Rasilimali Zaidi
* Hifadhi hii hutoa rasilimali nyingi za kujifunza zaidi, zikiwemo mafunzo, mifano ya msimbo, na changamoto.
* Jukwaa la Microsoft Learn linatoa kozi mbalimbali za maendeleo ya wavuti na njia za kujifunza.
* Jamii za mtandaoni kama Stack Overflow na MDN Web Docs hutoa msaada muhimu na rasilimali kwa watengenezaji wa wavuti.
**Natumai ramani hii ya njia itakusaidia katika safari yako ya maendeleo ya wavuti!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Tangazo la Uwajibikaji**:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamu kwamba tafsiri zilizofanywa kwa njia ya kiotomatiki zinaweza kuwa na makosa au upungufu wa usahihi. Hati ya asili katika lugha yake ya asili inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu na watu inashauriwa. Hatuelewi wajibu wowote kwa sababu ya kutoelewana au tafsiri za makosa zinazotokana na matumizi ya tafsiri hii.
Ito ay isang repository ng kurikulum pang-edukasyon para sa pagtuturo ng mga pangunahing kaalaman sa web development sa mga baguhan. Ang kurikulum ay isang komprehensibong 12-linggong kurso na binuo ng Microsoft Cloud Advocates, na nagtatampok ng 24 na praktikal na aralin na sumasaklaw sa JavaScript, CSS, at HTML.
Ito ay isang repositoryo ng edukasyonal na kurikulum para sa pagtuturo ng mga pundasyon ng web development sa mga baguhan. Ang kurikulum ay isang komprehensibong 12-linggong kurso na binuo ng Microsoft Cloud Advocates, na nagtatampok ng 24 na praktikal na mga aralin na sumasaklaw sa JavaScript, CSS, at HTML.
### Pangunahing Bahagi
### Key Components
- **Nilalaman Pang-edukasyon**: 24 na organisadong aralin na nakabatay sa proyekto
- **Praktikal na Proyekto**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, at AI Chat Assistant
- **Mga Interaktibong Pagsusulit**: 48 na pagsusulit na may tig-3 tanong bawat isa (pre/post-lesson assessments)
- **Suporta sa Multi-language**: Awtomatikong pagsasalin sa mahigit 50 wika gamit ang GitHub Actions
- **Mga Teknolohiya**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para sa mga AI na proyekto)
- **Educational Content**: 24 na nakaayos na mga aralin na organisado sa mga module na nakabase sa proyekto
- **Practical Projects**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, at AI Chat Assistant
- **Interactive Quizzes**: 48 mga pagsusulit na may tig-3 tanong bawat isa (pagsusuri bago/pagkatapos ng aralin)
- **Multi-language Support**: Automated na pagsasalin para sa 50+ na mga wika gamit ang GitHub Actions
- **Technologies**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para sa mga AI na proyekto)
### Arkitektura
### Architecture
- Repository pang-edukasyon na may istrukturang nakabatay sa aralin
- Ang bawat folder ng aralin ay naglalaman ng README, mga halimbawa ng code, at mga solusyon
- Mga standalone na proyekto sa magkakahiwalay na direktoryo (quiz-app, iba't ibang proyekto ng aralin)
- Repositoryo ng edukasyonal na may istrukturang nakabase sa aralin
- Bawat folder ng aralin ay naglalaman ng README, mga halimbawa ng code, at mga solusyon
- Mga standalone na proyekto sa magkakahiwalay na direktoryo (quiz-app, iba't ibang mga proyekto ng aralin)
- Sistema ng pagsasalin gamit ang GitHub Actions (co-op-translator)
- Dokumentasyon na ipinapakita sa pamamagitan ng Docsify at magagamit bilang PDF
- Dokumentasyon na sinuserve gamit ang Docsify at available bilang PDF
## Mga Command sa Setup
## Setup Commands
Ang repository na ito ay pangunahing para sa pagkonsumo ng nilalaman pang-edukasyon. Para sa pagtatrabaho sa mga partikular na proyekto:
Ang repositoryong ito ay pangunahing para sa pagkonsumo ng edukasyonal na nilalaman. Para magtrabaho sa mga partikular na proyekto:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) inirerekomenda para sa mga nag-aaral
- Karagdagang kurso: Generative AI, Data Science, ML, IoT curricula available
- Inirerekomenda para sa mga nag-aaral ang [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- Karagdagang mga kurso: Generative AI, Data Science, ML, IoT curricula available
### Pagtatrabaho sa Partikular na Mga Proyekto
### Working with Specific Projects
Para sa detalyadong tagubilin sa mga indibidwal na proyekto, tingnan ang README files sa:
Para sa mga detalyadong tagubilin sa mga indibidwal na proyekto, tingnan ang mga README file sa:
- `quiz-app/README.md` - Vue 3 quiz application
- `7-bank-project/README.md` - Banking application na may authentication
- `5-browser-extension/README.md` - Pag-develop ng browser extension
- `6-space-game/README.md` - Pag-develop ng game gamit ang Canvas
- `9-chat-project/README.md` - Proyekto ng AI chat assistant
- `6-space-game/README.md` - Pag-develop ng laro gamit ang Canvas
- `9-chat-project/README.md` - AI chat assistant project
### Istruktura ng Monorepo
### Monorepo Structure
Bagama't hindi tradisyunal na monorepo, ang repository na ito ay naglalaman ng maraming independiyenteng proyekto:
Bagaman hindi isang tradisyunal na monorepo, ang repositoryong ito ay naglalaman ng maraming independiyenteng proyekto:
- Ang bawat aralin ay self-contained
- Ang mga proyekto ay hindi nagbabahagi ng dependencies
- Magtrabaho sa mga indibidwal na proyekto nang hindi naaapektuhan ang iba
- I-clone ang buong repo para sa kumpletong karanasan sa kurikulum
- Hindi nagbabahagi ng dependencies ang mga proyekto
- Maaaring magtrabaho sa mga indibidwal na proyekto nang hindi naaapektuhan ang iba
- I-clone ang buong repo para sa buong karanasan sa kurikulum
---
**Paunawa**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Paalala**:
Ang dokumentong ito ay isinalin gamit ang serbisyong AI na pagsasalin na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat nagsusumikap kami para sa katumpakan, pakatandaan na ang awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-katumpakan. Ang orihinal na dokumento sa kanyang likas na wika ang dapat ituring na pangunahing sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.
# Web Development para sa mga Nagsisimula - Isang Kurikulum
Alamin ang mga pangunahing kaalaman sa web development gamit ang aming 12-linggong komprehensibong kurso mula sa Microsoft Cloud Advocates. Bawat isa sa 24 na aralin ay sumisid sa JavaScript, CSS, at HTML sa pamamagitan ng mga hands-on na proyekto tulad ng mga terrarium, browser extension, at mga space game. Makilahok sa mga pagsusulit, talakayan, at praktikal na mga gawain. Palawakin ang iyong kasanayan at paghusayin ang iyong kaalaman gamit ang epektibong pedagogiya namin na batay sa proyekto. Simulan ang iyong paglalakbay sa coding ngayon!
Matutunan ang mga pangunahing kaalaman sa web development sa aming 12-linggong komprehensibong kurso mula sa Microsoft Cloud Advocates. Bawat isa sa 24 na aralin ay sumisid sa JavaScript, CSS, at HTML sa pamamagitan ng mga hands-on na proyekto tulad ng terrariums, browser extensions, at space games. Makilahok sa mga pagsusulit, talakayan, at praktikal na mga gawain. Pagbutihin ang iyong mga kasanayan at i-optimize ang iyong pagkatuto gamit ang aming epektibong project-based pedagogy. Simulan ang iyong paglalakbay sa coding ngayon!
Sundin ang mga hakbang na ito para makapagsimula gamit ang mga resources na ito:
1. **I-Fork ang Repository**: I-click ang [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **I-Clone ang Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Sumali sa Azure AI Foundry Discord at makilala ang mga eksperto at ibang mga developer**](https://discord.com/invite/ByRwuEEgH4)
Sundin ang mga hakbang na ito upang makapagsimula gamit ang mga resources na ito:
1. **I-fork ang Repositoryo**: I-click ang
2. **I-clone ang Repositoryo**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Sumali sa Azure AI Foundry Discord at makipagkita sa mga eksperto at kapwa developer**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Suporta para sa Maramihang Wika
### 🌐 Multi-Language Support
#### Sinusuportahan sa pamamagitan ng GitHub Action (Awtomatiko at Palaging Napapanahon)
> Kasama sa repository na ito ang 50+ na mga pagsasalin sa wika na malaki ang dagdag sa laki ng pag-download. Para i-clone nang walang mga pagsasalin, gamitin ang sparse checkout:
> Kasama sa repositoryong ito ang 50+ na pagsasalin ng wika na malaki ang dagdag sa laki ng ida-download. Para mag-clone nang walang mga pagsasalin, gamitin ang sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Bibigyan ka nito ng lahat ng kailangan mo para matapos ang kurso nang mas mabilis ang pag-download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
> Bibigyan ka nito ng lahat ng kailangan mo upang matapos ang kurso nang mas mabilis ang pag-download.
**Kung nais mo ng karagdagang suportadong mga wika ng pagsasalin ay nakalistang [dito](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
**Kung nais mong magkaroon ng karagdagang mga suportadong wika para sa pagsasalin, nakalista ito [dito](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
#### 🧑🎓 _Estudyante ka ba?_
Bisitahin ang [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) kung saan makakakita ka ng mga panimulang resources, Student packs at maging mga paraan para makakuha ng libreng voucher para sa sertipiko. Ito ang pahinang gusto mong i-bookmark at tingnan paminsan-minsan habang nagpapalit kami ng nilalaman buwan-buwan.
Bisitahin ang [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) kung saan makakahanap ka ng mga panimulang resources, Student packs, at pati mga paraan upang makakuha ng libreng voucher para sa sertipiko. Ito ang pahina na gusto mong i-bookmark at tingnan paminsan-minsan dahil nagpapalit-palit tayo ng nilalaman buwan-buwan.
### 📣 Anunsyo - Mga bagong hamon sa GitHub Copilot Agent mode na kailangang tapusin!
### 📣 Paunawa - Mga bagong hamon sa GitHub Copilot Agent mode na dapat tapusin!
May bagong Hamon na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Isang bagong hamon para sa iyo na gamitin ang GitHub Copilot at Agent mode. Kung hindi mo pa nagagamit ang Agent mode, kaya nitong hindi lamang gumawa ng teksto kundi pati na maglikha at mag-edit ng mga file, magpatakbo ng mga utos, at marami pa.
May bagong hamon na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Ito ay isang bagong hamon para sa iyo upang matapos gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagamit ang Agent mode dati, kaya nitong hindi lang gumawa ng teksto kundi makatulong sa paggawa at pag-edit ng mga file, pagpapatakbo ng mga command, at marami pang iba.
### 📣 Anunsyo - _Bagong Proyekto na gagawin gamit ang Generative AI_
### 📣 Paunawa - _Bagong Proyekto na gagawin gamit ang Generative AI_
Bagong AI Assistant na proyekto lang ang idinagdag, tingnan ito [project](./9-chat-project/README.md)
May bagong AI Assistant project na idinagdag, tingnan ito sa [proyekto](./9-chat-project/README.md)
### 📣 Anunsyo - _Bagong Kurikulum_ sa Generative AI para sa JavaScript ay inilabas na
### 📣 Paunawa - _Bagong Kurikulum_ tungkol sa Generative AI para sa JavaScript ang bagong inilabas
Huwag palampasin ang aming bagong Generative AI curriculum!
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para makapagsimula!
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) upang makapagsimula!
Bawat aralin ay may kasamang takdang-aralin, pagsusulit sa kaalaman at hamon upang gabayan ka sa pag-aaral ng mga paksa gaya ng:
Bawat aralin ay may kasamang gawain na tapusin, isang knowledge check, at isang hamon upang gabayan ka sa pag-aaral ng mga paksang tulad ng:
- Prompting at prompt engineering
- Pagbuo ng text at image app
- Mga search app
Bisitahin ang [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) para makapagsimula!
- Pagbuo ng mga text at image app
- Search apps
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) upang makapagsimula!
## 🌱 Pagsisimula
> **Mga Guro**, nagbigay kami ng [ilang mga mungkahi](for-teachers.md) kung paano gamitin ang kurikulum na ito. Masaya kaming tanggapin ang inyong puna [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Mga Guro**, mayroon kaming [ilang mga mungkahi](for-teachers.md) kung paano gamitin ang kurikulum na ito. Ikalulugod naming makatanggap ng inyong feedback [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Mga Nag-aaral](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, sa bawat aralin, magsimula sa isang pre-lecture quiz at sundan ito sa pagbasa ng materyal sa lektura, pagtapos sa iba't ibang gawain at pag-check ng iyong pagkaunawa gamit ang post-lecture quiz.
**[Mga Mag-aaral](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para sa bawat aralin, magsimula sa isang pre-lecture na pagsusulit at sundan ito sa pagbabasa ng materyal ng lektyur, pagtapos sa mga iba't ibang gawain, at pagsuri ng inyong pag-unawa sa post-lecture na pagsusulit.
Para mapabuti ang iyong karanasan sa pag-aaral, kumonekta sa iyong mga kapwa nag-aaral upang magtulungan sa mga proyekto! Hinihikayat ang mga talakayan sa aming [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kung saan ang aming mga moderator ay handang sumagot sa iyong mga tanong.
Para palalimin ang iyong karanasan sa pag-aaral, makipag-ugnayan sa iyong mga kaklase para sabay na magtrabaho sa mga proyekto! Inaanyayahan ang mga talakayan sa aming [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kung saan ang aming mga moderator ay handang sagutin ang iyong mga tanong.
Para lalong mapalawak ang iyong edukasyon, lubos naming inirerekomenda ang pag-explore sa [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para sa mga karagdagang materyales sa pag-aaral.
Para palawigin pa ang iyong edukasyon, mariin naming inirerekomenda ang pagtuklas sa [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para sa karagdagang mga materyales sa pag-aaral.
### 📋 Pag-setup ng iyong kapaligiran
### 📋 Pag-setup ng iyong kapaligiran
Ang kurikulum na ito ay may handang development environment! Sa pagsisimula mo, maaari mong piliin na patakbuhin ang kurikulum sa isang [Codespace](https://github.com/features/codespaces/) (_isang browser-based na kapaligiran na hindi na kailangan ng install_), o lokal sa iyong kompyuter gamit ang editor ng teksto tulad ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Handa na ang development environment para sa kurikulum na ito! Sa pagsisimula mo, maaari mong piliing patakbuhin ang kurikulum sa isang [Codespace](https://github.com/features/codespaces/) (_isang browser-based, hindi na kailangan mag-install na kapaligiran_), o local sa iyong computer gamit ang isang text editor tulad ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Gumawa ng iyong repositoryo
Para madali mong masave ang iyong mga gawain, inirerekomenda na gumawa ka ng sariling kopya ng repositoryong ito. Magagawa mo ito sa pamamagitan ng pag-click ng button na **Use this template** sa itaas ng pahina. Ito ay lilikha ng bagong repositoryo sa iyong GitHub account na may kopya ng kurikulum.
Para madali mong maisave ang iyong trabaho, inirerekomenda na gumawa ka ng sarili mong kopya ng repositoryong ito. Magagawa mo ito sa pamamagitan ng pag-click sa button na **Use this template** sa itaas ng pahina. Lilikha ito ng bagong repositoryo sa iyong GitHub account na may kopya ng kurikulum.
Sundin ang mga hakbang na ito:
1. **I-Fork ang Repository**: I-click ang button na "Fork" sa kanang-itaas na bahagi ng pahinang ito.
2. **I-Clone ang Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **I-fork ang Repositoryo**: I-click ang "Fork" button sa kanang itaas na bahagi ng pahinang ito.
2. **I-clone ang Repositoryo**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Pagpapatakbo ng kurikulum sa Codespace
#### Pagpapatakbo ng kurikulum sa isang Codespace
Sa kopya ng repositoryong ginawa mo, i-click ang button na **Code** at piliin ang **Open with Codespaces**. Ito ay lilikha ng bagong Codespace para sa iyong trabaho.
Sa iyong kopya ng repositoryong nilikha mo, i-click ang **Code** button at piliin ang **Open with Codespaces**. Lilikha ito ng bagong Codespace para sa iyong trabahuhin.
#### Pagpapatakbo ng kurikulum lokal sa iyong kompyuter
Para patakbuhin ang kurikulum na ito nang lokal sa iyong kompyuter, kakailanganin mo ng isang text editor, browser, at command line tool. Ang unang aralin namin, [Panimula sa Programming Languages at Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ay gagabay sa iyo sa iba't ibang pagpipilian para sa bawat tool na ito upang mapili mo ang pinakaangkop sa iyo.
#### Pagpapatakbo ng kurikulum local sa iyong computer
Inirerekomenda namin ang paggamit ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) bilang iyong editor, na may kasamang built-in na [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Maaari mong i-download ang Visual Studio Code [dito](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Para patakbuhin ang kurikulum na ito sa iyong computer, kakailanganin mo ang isang text editor, browser, at command line tool. Ang aming unang aralin, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ay gagabay sa'yo sa iba't ibang mga opsyon para sa bawat isa sa mga tool na ito upang makapili ka ng pinakaangkop para sa'yo.
Inirerekumenda namin ang paggamit ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) bilang iyong editor, na may built-in ding [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Maaari mong i-download ang Visual Studio Code [dito](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. I-clone ang iyong repository sa iyong kompyuter. Magagawa mo ito sa pamamagitan ng pag-click sa button na **Code** at pagkopya ng URL:
1. I-clone ang iyong repositoryo sa iyong computer. Maaari mo itong gawin sa pamamagitan ng pag-click sa **Code** button at pagkopya ng URL:
[CodeSpace](./images/createcodespace.png)
Pagkatapos, buksan ang [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) sa loob ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) at patakbuhin ang sumusunod na utos, palitan ang `<your-repository-url>` ng URL na iyong kinopya:
@ -124,96 +102,96 @@ Inirerekomenda namin ang paggamit ng [Visual Studio Code](https://code.visualstu
git clone <your-repository-url>
```
2. Buksan ang folder sa Visual Studio Code. Magagawa mo ito sa pamamagitan ng pag-click sa **File** > **Open Folder** at piliin ang folder na kaklone mo lang.
2. Buksan ang folder sa Visual Studio Code. Maaari mong gawin ito sa pamamagitan ng pag-click sa **File** > **Open Folder** at pagpili sa folder na kaklone mo lang.
> Inirerekomendang Mga Extension ng Visual Studio Code:
> Inirerekomendang mga extension ng Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - upang makita ang preview ng mga pahina ng HTML sa loob mismo ng Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para tulungan kang mas mabilis magsulat ng code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para makita ang preview ng mga pahina ng HTML sa loob ng Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para makatulong sa mas mabilis na pagsulat ng code
## 📂 Bawat aralin ay may kasamang:
## 📂 Kasama sa bawat aralin:
- opsyonal na sketchnote
- opsyonal na karagdagang video
- pre-lesson warmup quiz
- nakasulat na aralin
- para sa mga proyekto, sunud-sunod na gabay kung paano itatayo ang proyekto
- pagsusuri ng kaalaman
- para sa mga araling proyekto, hakbang-hakbang na gabay kung paano buuin ang proyekto
> **Isang tala tungkol sa mga pagsusulit**: Lahat ng pagsusulit ay nasa Quiz-app na folder, may 48 kabuuang pagsusulit na tig-3 tanong bawat isa. Available ang mga ito [dito](https://ff-quizzes.netlify.app/web/), ang quiz app ay maaaring patakbuhin nang lokal o ma-deploy sa Azure; sundin ang mga instruksyon sa `quiz-app` na folder.
> **Isang paalala tungkol sa mga pagsusulit**: Lahat ng pagsusulit ay nilalaman sa folder ng Quiz-app, 48 kabuuang pagsusulit na may tig-tatlong tanong bawat isa. Available ang mga ito [dito](https://ff-quizzes.netlify.app/web/); ang quiz app ay maaaring patakbuhin nang lokal o i-deploy sa Azure; sundin ang mga tagubilin sa `quiz-app` folder.
## 🗃️ Mga Aralin
| | Pangalan ng Proyekto | Mga Konseptong Itinuro | Mga Layunin sa Pagkatuto | Nakalink na Aralin | May-akda |
| 01 | Getting Started | Panimula sa Programming at Mga Kasangkapan ng Propesyon | Matutunan ang mga batayang pundasyon sa likod ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Mga Pangunahing Kaalaman sa GitHub, kasama ang pagtatrabaho sa koponan | Paano gamitin ang GitHub sa iyong proyekto, paano makipagtulungan sa iba sa isang code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Matutunan ang mga batayan ng web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Mga Uri ng Data sa JavaScript | Mga batayan ng mga uri ng data sa JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Mga Function at Method | Matutunan ang tungkol sa mga function at method para pamahalaan ang daloy ng lohika ng isang aplikasyon | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine at Christopher |
| 06 | JS Basics | Paggawa ng Mga Desisyon gamit ang JS | Matutunan kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga paraan ng paggawa ng desisyon | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays at Loops| Gumamit ng data gamit ang arrays at loops sa JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML sa Praktis | Gumawa ng HTML para makagawa ng online terrarium, nakatuon sa paggawa ng layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS sa Praktis | Gumawa ng CSS para istilohan ang online terrarium, nakatuon sa mga batayan ng CSS kabilang ang paggawa ng page na responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Gumawa ng JavaScript upang pagandahin ang terrarium bilang isang drag/drop interface, na nakatuon sa closures at DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Gumawa ng Typing Game | Matutunan kung paano gamitin ang mga keyboard events para patakbuhin ang lohika ng iyong JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Paggawa gamit ang Mga Browser | Matutunan kung paano gumagana ang mga browser, ang kasaysayan nito, at paano magsimula sa mga unang elemento ng isang browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Paggawa ng form, pagtawag ng API at pag-iimbak ng variables sa local storage | Gumawa ng mga elemento ng JavaScript ng iyong browser extension upang tumawag ng API gamit ang mga variable na nakaimbak sa local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Mga background process sa browser, performance ng web | Gamitin ang mga background process ng browser upang pamahalaan ang icon ng extension; matutunan ang web performance at ilang optimizations | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mas Advanced na Pag-develop ng Game gamit ang JavaScript | Matutunan ang tungkol sa Inheritance gamit ang Classes at Composition pati na ang Pub/Sub pattern, bilang paghahanda sa paggawa ng laro | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Pag-drawing sa canvas | Matutunan ang Canvas API, na ginagamit para gumuhit ng mga elemento sa screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Paggalaw ng mga elemento sa paligid ng screen | Alamin kung paano makakakuha ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Pagtuklas ng pagbangga | Pahintulutan ang mga elemento na dumagit at tumugon sa isa't isa gamit ang keypresses at magbigay ng cooldown function para sa performance ng laro | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pagpapanatili ng score | Isagawa ang mga kalkulasyon ng math base sa katayuan at performance ng laro | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Pagtatapos at pagrere-start ng laro | Matutunan ang tungkol sa pagtatapos at pagrere-start ng laro, kabilang ang paglilinis ng mga asset at pagrereset ng mga variable na halaga | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Templates at Routes sa isang Web App | Matutunan kung paano lumikha ng istruktura ng isang multipage website gamit ang routing at HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Gumawa ng Login at Registration Form | Matutunan ang paggawa ng mga form at paghawak ng validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Mga Paraan ng Pagkuha at Paggamit ng Data | Paano dumadaloy ang data sa iyong app, paano ito kunin, iimbak, at alisin | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Mga Konsepto ng Pamamahala ng Estado | Matutunan kung paano pinananatili ng iyong app ang estado at paano ito pamahalaan programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Paggamit ng VScode | Matutunan kung paano Gumamit ng code editor | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Paggamit ng AI | Matutunan kung paano gumawa ng sarili mong AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
| | Pangalan ng Proyekto | Mga Konseptong Itinuro | Mga Layunin sa Pagkatuto | Kaugnay na Aralin | May-akda |
| 01 | Pagsisimula | Panimula sa Programming at Mga Kagamitan sa Industriya | Matutunan ang mga pangunahing pundasyon sa likod ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Pagsisimula | Mga Batayan ng GitHub, kasama ang pagtatrabaho sa isang koponan | Paano gamitin ang GitHub sa iyong proyekto, paano makipagtulungan sa iba sa isang code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Pagsisimula | Accessibility | Matutunan ang mga batayan ng web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Mga Uri ng Data sa JavaScript | Ang mga batayan ng mga uri ng data sa JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Mga Function at Method | Matuto tungkol sa mga function at method upang pamahalaan ang daloy ng lohika ng isang aplikasyon| [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Paggawa ng mga Desisyon gamit ang JS | Matuto kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga pamamaraan sa paggawa ng desisyon | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays at Loops | Gamitinang data gamit ang arrays at loops sa JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML sa Praktis | Bumuo ng HTML upang makalikha ng online terrarium, nakatuon sa pagbuo ng layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS sa Praktis | Bumuo ng CSS upang istilohan ang online terrarium, nakatuon sa mga batayan ng CSS kabilang ang paggawa ng pahina na tumutugon | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Bumuo ng JavaScript upang mag-fungsyon ang terrarium bilang isang drag/drop interface, nakatuon sa closures at DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bumuo ng Isang Typing Game | Matutunan kung paano gamitin ang mga event ng keyboard upang paandarin ang lohika ng iyong JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Paggawa sa mga Browser | Matutunan kung paano gumagana ang mga browser, ang kasaysayan nito, at kung paano mag-scaffold ng mga unang elemento ng isang browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Pagbuo ng form, pagtawag sa API at pag-iimbak ng mga variable sa local storage | Bumuo ng mga elemento ng JavaScript ng iyong browser extension upang tumawag ng API gamit ang mga variable na nakaimbak sa local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Mga background process sa browser, pagganap ng web | Gamitin ang mga background process ng browser upang pamahalaan ang icon ng extension; alamin ang tungkol sa pagganap ng web at ilang mga optimisasyon upang mapabilis | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mas Advanced na Pagbuo ng Laro gamit ang JavaScript | Matuto tungkol sa Inheritance gamit ang parehong Classes at Composition at ang Pub/Sub pattern, bilang paghahanda sa paggawa ng laro | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Pagguho sa canvas | Matuto tungkol sa Canvas API, na ginagamit upang mag-drawing ng mga elemento sa screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Paggalaw ng mga elemento sa paligid ng screen | Tuklasin kung paano nagkakaroon ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Pag-detect ng collision | Pahintulutan ang mga elemento na magbanggaan at mag-react sa isa't isa gamit ang keypresses at magbigay ng cooldown function upang matiyak ang pagganap ng laro | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pagpapanatili ng puntos | Gawin ang mga kalkulasyon batay sa status ng laro at pagganap | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Pagtatapos at muling pagsisimula ng laro | Matutunan ang tungkol sa pagtatapos at muling pagsisimula ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga variable values | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Mga HTML Template at Routing sa isang Web App | Matutunan kung paano lumikha ng scaffolding ng multipage website gamit ang routing at HTML template | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Bumuo ng Login at Registration Form | Matuto tungkol sa pagbuo ng mga form at paghawak ng mga validation routine | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Mga Paraan ng Pagkuha at Paggamit ng Datos | Paano dumadaloy ang datos papasok at palabas ng iyong app, paano ito kunin, i-imbak, at alisin | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Mga Konsepto ng State Management | Matutunan kung paano hinahawakan ng iyong app ang state at kung paano ito pamahalaan programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Paggamit ng VScode | Matutunang Gumamit ng code editor | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Paggamit ng AI | Matutong bumuo ng sariling AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagohiya
Ang aming kurikulum ay dinisenyo gamit ang dalawang mahahalagang prinsipyo sa pagtuturo:
* pagkatuto base sa proyekto
* madalas na pagsusulit
Ang aming kurikulum ay dinisenyo batay sa dalawang pangunahing prinsipyo sa pagtuturo:
* pagkatuto batay sa proyekto
* madalas na mga pagsusulit
Itinuro sa programa ang mga pundasyon ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong kasangkapan at teknik na ginagamit ng mga web developer ngayon. Magkakaroon ang mga mag-aaral ng pagkakataon na magkaroon ng praktikal na karanasan sa paggawa ng isang typing game, virtual na terrarium, eco-friendly na browser extension, space-invader-style game, at isang banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga mag-aaral ng matatag na pag-unawa sa web development.
Itinuturo ng programa ang mga pundasyon ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong kagamitan at teknik na ginagamit ng mga web developer ngayon. Magkakaroon ang mga estudyante ng pagkakataon na magkaroon ng praktikal na karanasan sa pamamagitan ng paggawa ng isang typing game, virtual terrarium, eco-friendly browser extension, laro gaya ng space invader, at isang banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga estudyante ng matibay na pang-unawa sa pag-develop ng web.
> 🎓 Maaari mong kunin ang mga unang aralin sa kurikulum na ito bilang isang [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sa Microsoft Learn!
> 🎓 Maaari mong kunin ang mga unang aralin sa kurikulum na ito bilang [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sa Microsoft Learn!
Sa pagtitiyak na ang nilalaman ay naka-align sa mga proyekto, mas nagiging kawili-wili ang proseso para sa mga mag-aaral at mapapalakas ang pag-alala sa mga konsepto. Sumulat din kami ng ilang panimulang aralin sa JavaScript basics upang ipakilala ang mga konsepto, na sinamahan ng isang video mula sa koleksyon ng mga tutorial na video na "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", na ang ilan sa mga may-akda nito ay nag-ambag sa kurikulum na ito.
Sa pamamagitan ng pagtiyak na ang nilalaman ay tugma sa mga proyekto, mas nagiging kawili-wili ang proseso para sa mga estudyante at mas napapalakas ang pag-alala sa mga konsepto. Sumulat din kami ng ilang panimulang aralin sa mga batayan ng JavaScript upang ipakilala ang mga konsepto, na sinamahan ng video mula sa koleksyon na "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", na ang ilan sa mga may-akda ay nag-ambag sa kurikulum na ito.
Bukod dito, ang isang low-stakes quiz bago ang klase ay nagtatakda ng intensiyon ng estudyante sa pagkatuto ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagtitiyak na lalo pang maalala ang materyal. Ang kurikulum na ito ay ginawa upang maging flexible at masaya at maaaring kunin nang buo o paunti-unti. Ang mga proyekto ay nagsisimula sa maliit at unti-unting lumalawak hanggang sa katapusan ng 12-linggong panahon.
Bukod dito, isang mababang-pader na pagsusulit bago ang klase ang nagsisilbing intensyon ng estudyante sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng karagdagang pagkatuto. Dinisenyo ang kurikulum na ito upang maging flexible at masaya, maaari itong kunin nang buo o bahagi lamang. Ang mga proyekto ay nagsisimula sa maliit at unti-unting lumalalim sa pagiging kumplikado hanggang sa pagtatapos ng 12-linggong yugto.
Habang sinadyang iniiwasan naming ipakilala ang mga JavaScript framework upang magpokus sa mga pangunahing kasanayan na kailangan bilang web developer bago tumanggap ng framework, isang magandang susunod na hakbang matapos makumpleto ang kurikulum na ito ay ang pag-aaral tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Habang sinasadya naming iwasan ang pagpapakilala ng JavaScript frameworks upang magpokus sa mga pangunahing kakayahan na kailangan bilang isang web developer bago gumamit ng framework, ang isang magandang susunod na hakbang sa pagtatapos ng kurikulum na ito ay ang matutunan ang tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Bisitahin ang aming [Code of Conduct](CODE_OF_CONDUCT.md) at mga gabay sa [Contributing](CONTRIBUTING.md). Malugod naming tinatanggap ang iyong makabuluhang puna!
> Bisitahin ang aming [Code of Conduct](CODE_OF_CONDUCT.md) at [Contributing](CONTRIBUTING.md) na mga patnubay. Malugod naming tinatanggap ang iyong mga konstruktibong puna!
## 🧭 Offline access
## 🧭 Offline na pag-access
Maaari mong patakbuhin ang dokumentasyong ito nang offline gamit ang [Docsify](https://docsify.js.org/#/). I-fork ang repositoryong ito, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at pagkatapos ay sa root folder ng repo na ito, i-type `docsify serve`. Ang website ay magiging available sa port 3000 sa iyong localhost: `localhost:3000`.
Maaari mong patakbuhin ang dokumentasyong ito nang offline gamit ang [Docsify](https://docsify.js.org/#/). I-fork ang repo, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at pagkatapos sa root folder ng repo na ito, i-type ang `docsify serve`. Ihahain ang website sa port 3000 sa iyong localhost: `localhost:3000`.
## 📘 PDF
Ang PDF ng lahat ng mga aralin ay matatagpuan [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Isang PDF ng lahat ng mga aralin ay matatagpuan [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Iba Pang Kurso
Ang aming koponan ay gumagawa ng iba pang mga kurso! Tingnan:
## 🎒 Iba Pang Mga Kurso
Ang aming koponan ay gumagawa ng iba pang mga kurso! Tingnan ang:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -251,21 +229,21 @@ Ang aming koponan ay gumagawa ng iba pang mga kurso! Tingnan:
## Pagkuha ng Tulong
Kung ikaw ay nahihirapan o may mga tanong tungkol sa paggawa ng mga AI app. Sumali sa kapwa mga nag-aaral at mga bihasang developer sa mga talakayan tungkol sa MCP. Isa itong sumusuportang komunidad kung saan malugod ang pagtatanong at malayang pagbabahagi ng kaalaman.
Kung ikaw ay natigil o may mga katanungan tungkol sa paggawa ng mga AI app. Sumali sa mga kapwa mag-aaral at mga may karanasang developer sa mga talakayan tungkol sa MCP. Ito ay isang suportadong komunidad kung saan malugod na tinatanggap ang mga tanong at malayang naibabahagi ang kaalaman.
Ang repositoryong ito ay lisensiyado sa ilalim ng MIT license. Tingnan ang [LICENSE](../../LICENSE) na file para sa karagdagang impormasyon.
Ang repositoryong ito ay lisensyado sa ilalim ng MIT license. Tingnan ang [LICENSE](../../LICENSE) file para sa karagdagang impormasyon.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Paunawa**:
Ang dokumentong ito ay isinalin gamit ang serbisyo ng AI translation na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagaman aming sinisikap ang pagiging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-tumpak na impormasyon. Ang orihinal na dokumento sa katutubong wika nito ang dapat ituring na pangunahing sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasaling tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng salin na ito.
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat nagsusumikap kami para sa katumpakan, pakitandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-tumpak na impormasyon. Ang orihinal na dokumento sa kanyang sariling wika ang dapat ituring na pinakaawtoritatibong sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasaling-tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na nagmula sa paggamit ng pagsasaling ito.
# Roadmap para sa Web-Dev-For-Beginners Repository ng Microsoft
**Ang repositoryong ito ay nagbibigay ng roadmap para matutunan ang mga pundasyon ng web development na nakatuon sa JavaScript, HTML, at CSS. Ang kurikulum ay flexible at maaaring kunin nang buo o piraso-piraso, na may 24 na leksyon na nakalatag sa loob ng 12 linggo.**
## Pangunahing Mga Yugto
* **Linggo 1-3:**
* Panimula sa mga programming language at mga kasangkapang ginagamit sa trabaho
* Mga pangunahing kaalaman sa GitHub
* Accessibility
* Mga pangunahing kaalaman sa JS: uri ng datos, mga function at mga pamamaraan
* Paggawa ng mga desisyon gamit ang JS
* **Linggo 4-6:**
* Arrays at mga loops
* Terrarium: Praktikal na paggamit ng HTML
* Praktikal na paggamit ng CSS
* Mga closure sa JavaScript
* Manipulasyon ng DOM
* **Linggo 7-9:**
* Typing Game: Event-driven programming
* Green Browser Extension: Paggamit sa mga browser
* Pagbuo ng form, pagtawag sa API, at pag-iimbak ng mga variable sa local storage
* Mga proseso sa background sa browser
* Web performance
* **Linggo 10-12:**
* Space Game: Mas advanced na pagbuo ng laro gamit ang JavaScript
* Pagdidrawing sa canvas
* Paggalaw ng mga elemento sa screen
* Collision detection
* Pagpapanatili ng score, pagtatapos, at pagrere-start ng laro
* Banking App: Mga HTML Template at Routes sa isang Web App
* Pagbuo ng Login at Registration Form
* Mga Pamamaraan ng Pagkuha at Paggamit ng Data
* Mga Konsepto ng State Management
## Mga Inaasahang Matutunan
**Sa pagtatapos ng roadmap na ito, magkakaroon ng karanasang praktikal ang mga estudyante sa paggawa ng typing game, virtual terrarium, eco-friendly na browser extension, space-invader-style na laro, at banking app para sa mga negosyo. Magkakaroon din sila ng matibay na pag-unawa sa mga pundasyon ng web development.**
## Karagdagang Mga Mapagkukunan
* Ang repositoryong ito ay nagbibigay ng maraming mga mapagkukunan para sa karagdagang pag-aaral, kabilang ang mga tutorial, mga halimbawa ng code, at mga hamon.
* Nagbibigay ang Microsoft Learn platform ng iba't ibang kurso at mga learning path para sa web development.
* Ang mga online na komunidad tulad ng Stack Overflow at ang MDN Web Docs ay nagbibigay ng mahahalagang suporta at mga mapagkukunan para sa mga web developer.
**Sana makatulong sa iyong paglalakbay sa web development ang roadmap na ito!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Pahayag ng Paunawa**:
Ang dokumentong ito ay isinalin gamit ang serbisyong AI na pagsasalin na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't nagsusumikap kaming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-tuwirang impormasyon. Ang orihinal na dokumento sa kanyang wikang sinimulan ang dapat ituring na may pinakamataas na awtoridad. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling pagpapakahulugan na nagmula sa paggamit ng pagsasaling ito.
localizeflow[bot]
3 days ago