Ini adalah repositori kurikulum pendidikan untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini merupakan kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktis yang mencakup JavaScript, CSS, dan HTML.
Ini adalah repositori kurikulum edukasi untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini adalah kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktis yang mencakup JavaScript, CSS, dan HTML.
### Komponen Utama
- **Konten Pendidikan**: 24 pelajaran terstruktur yang disusun dalam modul berbasis proyek
- **Konten Edukasi**: 24 pelajaran terstruktur yang diorganisir dalam modul berbasis proyek
- **Proyek Praktis**: Terrarium, Permainan Mengetik, Ekstensi Browser, Permainan Luar Angkasa, Aplikasi Perbankan, Editor Kode, dan Asisten Chat AI
- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan masing-masing (penilaian sebelum/sesudah pelajaran)
- **Dukungan Multi-bahasa**: Terjemahan otomatis untuk lebih dari 50 bahasa melalui GitHub Actions
- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan setiap kuis (penilaian sebelum/sesudah pelajaran)
- **Dukungan Multi-bahasa**: Terjemahan otomatis untuk 50+ bahasa melalui GitHub Actions
- Token GitHub harus memiliki izin minimal yang diperlukan
### Akses GitHub Models
- Personal Access Tokens (PAT) diperlukan untuk GitHub Models
- Token disimpan sebagai variabel lingkungan
- Token Akses Personal (PAT) dibutuhkan untuk GitHub Models
- Token harus disimpan sebagai variabel lingkungan
- Jangan pernah commit token atau kredensial
## Catatan Tambahan
### Sasaran Audiens
### Target Audiens
- Pemula lengkap dalam pengembangan web
- Pelajar dan pembelajar mandiri
- Guru yang menggunakan kurikulum di kelas
- Konten dirancang untuk aksesibilitas dan pembangunan keterampilan bertahap
- Pengajar yang menggunakan kurikulum di kelas
- Konten dirancang agar aksesibel dan membangun keterampilan secara bertahap
### Filosofi Pendidikan
### Filosofi Edukasi
- Pendekatan pembelajaran berbasis proyek
- Pemeriksaan pengetahuan secara berkala (kuis)
@ -373,36 +373,36 @@ CO_OP_TRANSLATOR_METADATA:
- Komunitas pembelajar dan kontributor aktif
- Pembaruan rutin pada dependensi dan konten
- Isu dan diskusi dipantau oleh pemelihara
- Pembaruan terjemahan otomatis via GitHub Actions
- Isu dan diskusi dipantau oleh maintainers
- Pembaruan terjemahan otomatis melalui GitHub Actions
### Sumber Daya Terkait
- [Modul Microsoft Learn](https://docs.microsoft.com/learn/)
- [Sumber Daya Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) direkomendasikan untuk pembelajar
- Kursus tambahan: AI Generatif, Data Science, ML, kurikulum IoT tersedia
- Kursus tambahan: AI Generatif, Data Science, ML, curriculum IoT tersedia
### Bekerja dengan Proyek Spesifik
### Bekerja dengan Proyek Tertentu
Untuk instruksi rinci tentang proyek individual, lihat README di:
Untuk instruksi rinci proyek individual, lihat file README di:
- `quiz-app/README.md` - aplikasi kuis Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan autentikasi
- `7-bank-project/README.md` - aplikasi perbankan dengan otentikasi
- `5-browser-extension/README.md` - pengembangan ekstensi browser
- `6-space-game/README.md` - pengembangan game berbasis canvas
- `9-chat-project/README.md` - proyek asisten chat AI
### Struktur Monorepo
Meskipun bukan monorepo tradisional, repositori ini berisi beberapa proyek independen:
Meskipun bukan monorepo tradisional, repositori ini berisi banyak proyek independen:
- Setiap pelajaran berdiri sendiri
- Proyek tidak berbagi dependensi
- Kerjakan proyek individual tanpa memengaruhi yang lain
- Bekerja pada proyek individual tanpa memengaruhi lainnya
- Clone seluruh repo untuk pengalaman kurikulum lengkap
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk akurasi, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang salah yang timbul dari penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk mencapai ketepatan, harap diketahui bahwa terjemahan otomatis dapat mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber otoritatif. Untuk informasi penting, disarankan menggunakan jasa penerjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang salah yang timbul dari penggunaan terjemahan ini.
Pelajari dasar-dasar pengembangan web dengan kursus komprehensif 12 minggu kami oleh Microsoft Cloud Advocates. Setiap 24 pelajaran mendalami JavaScript, CSS, dan HTML melalui proyek langsung seperti terarium, ekstensi browser, dan game luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan Anda dan optimalkan retensi pengetahuan dengan pedagogi berbasis proyek yang efektif. Mulai perjalanan pemrograman Anda hari ini!
Pelajari dasar-dasar pengembangan web dengan kursus komprehensif selama 12 minggu oleh Microsoft Cloud Advocates. Setiap dari 24 pelajaran menyelami JavaScript, CSS, dan HTML melalui proyek langsung seperti terrarium, ekstensi browser, dan permainan luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan dan optimalkan retensi pengetahuan Anda dengan pedagogi berbasis proyek kami yang efektif. Mulai perjalanan coding Anda hari ini!
Bergabunglah dengan Komunitas Discord Azure AI Foundry
> Repository ini mencakup lebih dari 50 terjemahan bahasa yang secara signifikan meningkatkan ukuran unduhan. Untuk clone tanpa terjemahan, gunakan sparse checkout:
> **Lebih suka Clone Lokal?**
>
> Repositori ini mencakup 50+ terjemahan bahasa yang secara signifikan menambah ukuran unduhan. Untuk meng-clone tanpa terjemahan, gunakan sparse checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Ini memberikan Anda semua yang Anda butuhkan untuk menyelesaikan kursus dengan unduhan yang jauh lebih cepat.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jika Anda ingin bahasa terjemahan tambahan didukung, daftar tersedia [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jika Anda ingin bahasa terjemahan tambahan didukung, daftar bahasa tersedia 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)
#### 🧑🎓 _Apakah Anda seorang siswa?_
#### 🧑🎓 _Apakah kamu seorang pelajar?_
Kunjungi [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) tempat Anda akan menemukan sumber daya pemula, paket siswa, dan bahkan cara mendapatkan voucher sertifikat gratis. Ini adalah halaman yang ingin Anda tandai dan periksa dari waktu ke waktu karena kontennya kami ganti setiap bulan.
Kunjungi [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) dimana kamu akan menemukan sumber daya pemula, paket pelajar hingga cara mendapatkan voucher sertifikat gratis. Ini adalah halaman yang ingin kamu tandai dan periksa secara berkala karena kami akan mengganti konten tiap bulan.
### 📣 Pengumuman - Tantangan mode GitHub Copilot Agent baru untuk diselesaikan!
Tantangan Baru ditambahkan, cari "GitHub Copilot Agent Challenge 🚀" di sebagian besar bab. Itu adalah tantangan baru untuk Anda selesaikan menggunakan GitHub Copilot dan mode Agen. Jika Anda belum pernah menggunakan mode Agen sebelumnya, mode ini mampu tidak hanya menghasilkan teks tetapi juga membuat dan mengedit file, menjalankan perintah, dan lainnya.
Tantangan baru ditambahkan, cari "GitHub Copilot Agent Challenge 🚀" di sebagian besar bab. Itu adalah tantangan baru untuk Anda selesaikan menggunakan GitHub Copilot dan mode Agent. Jika Anda belum pernah menggunakan mode Agent sebelumnya, mode ini mampu tidak hanya menghasilkan teks tetapi juga dapat membuat dan mengedit file, menjalankan perintah, dan lainnya.
### 📣 Pengumuman - _Proyek Baru untuk dibangun menggunakan Generative AI_
Proyek Asisten AI baru baru saja ditambahkan, cek di [proyek](./9-chat-project/README.md)
Proyek Asisten AI baru saja ditambahkan, cek [proyek](./9-chat-project/README.md)
### 📣 Pengumuman - _Kurikulum Baru_mengenai Generative AI untuk JavaScript baru saja dirilis
### 📣 Pengumuman - _Kurikulum Baru_tentang Generative AI untuk JavaScript baru saja dirilis
Jangan lewatkan kurikulum Generative AI baru kami!
Jangan lewatkan kurikulum Generative AI terbaru kami!
Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai!
Setiap pelajaran mencakup tugas yang harus diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk membimbing Anda mempelajari topik seperti:
- Prompting dan rekayasa prompt
- Pengembangan aplikasi teks dan gambar
Setiap pelajaran termasuk tugas yang harus diselesaikan, pemeriksaan pengetahuan dan tantangan untuk membimbing Anda mempelajari topik seperti:
- Prompt dan rekayasa prompt
- Aplikasi teks dan gambar yang dihasilkan
- Aplikasi pencarian
Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai!
@ -83,131 +93,130 @@ Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk
## 🌱 Memulai
> **Para Pengajar**, kami telah [menyediakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami sangat menginginkan umpan balik Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Guru**, kami telah [menyediakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami sangat menghargai masukan Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Pembelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis pra-ceramah dan lanjutkan dengan membaca materi ceramah, menyelesaikan berbagai aktivitas, dan periksa pemahaman Anda dengan kuis pasca-ceramah.
**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis pra-lecture dan lanjutkan dengan membaca materi kuliah, menyelesaikan berbagai aktivitas dan periksa pemahaman Anda dengan kuis pasca-lecture.
Untuk meningkatkan pengalaman belajar Anda, hubungkan dengan teman sejawat Anda untuk bekerja pada proyek bersama! Diskusi sangat dianjurkan di [forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) dimana tim moderator kami akan tersedia untuk menjawab pertanyaan Anda.
Untuk meningkatkan pengalaman belajar Anda, hubungkan dengan rekan sejawat Anda untuk mengerjakan proyek bersama! Diskusi dianjurkan di [forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) dimana tim moderator kami akan tersedia menjawab pertanyaan Anda.
Untuk memperdalam pendidikan Anda, kami sangat merekomendasikan menjelajahi [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan belajar tambahan.
Untuk memperdalam pendidikan, kami sangat menyarankan menjelajahi [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk materi studi tambahan.
### 📋 Menyiapkan lingkungan Anda
Kurikulum ini memiliki lingkungan pengembangan yang siap pakai! Saat Anda memulai, Anda dapat memilih menjalankan kurikulum di [Codespace](https://github.com/features/codespaces/) (_lingkungan berbasis browser tanpa perlu instalasi_), atau secara lokal di komputer Anda menggunakan editor teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Kurikulum ini sudah memiliki lingkungan pengembangan siap dipakai! Saat Anda memulai Anda dapat memilih menjalankan kurikulum di [Codespace](https://github.com/features/codespaces/) (_lingkungan berbasis browser tanpa perlu instalasi_), atau secara lokal di komputer Anda menggunakan editor teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Buat repository Anda
Untuk memudahkan menyimpan pekerjaan Anda, disarankan agar Anda membuat salinan repository ini. Anda dapat melakukannya dengan mengklik tombol **Use this template** di bagian atas halaman. Ini akan membuat repository baru di akun GitHub Anda dengan salinan kurikulum.
#### Buat repositori Anda
Agar Anda mudah menyimpan pekerjaan Anda, disarankan membuat salinan sendiri dari repositori ini. Anda dapat melakukannya dengan mengklik tombol **Use this template** di bagian atas halaman ini. Ini akan membuat repositori baru di akun GitHub Anda dengan salinan kurikulum.
Ikuti langkah-langkah ini:
1. **Fork Repository**: Klik tombol "Fork" di pojok kanan atas halaman ini.
#### Menjalankan kurikulum secara lokal di komputer Anda
Untuk menjalankan kurikulum ini secara lokal di komputer Anda, Anda memerlukan editor teks, browser, dan alat baris perintah. Pelajaran pertama kami, [Pengenalan Bahasa Pemrograman dan Alat Perdagangan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan memandu Anda melalui berbagai opsi untuk masing-masing alat ini agar Anda dapat memilih yang paling cocok.
Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai editor, yang juga memiliki [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bawaan. Anda dapat mengunduh Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Untuk menjalankan kurikulum ini secara lokal di komputer Anda, Anda membutuhkan editor teks, browser dan alat baris perintah. Pelajaran pertama kami, [Pengenalan Bahasa Pemrograman dan Alat Perdagangan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan memandu Anda melalui berbagai opsi masing-masing alat agar Anda dapat memilih yang paling cocok.
1. Clone repository Anda ke komputer. Anda dapat melakukannya dengan mengklik tombol **Code** dan menyalin URL:
Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai editor Anda, yang juga dilengkapi dengan [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Anda dapat mengunduh Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Kloning repositori Anda ke komputer Anda. Anda dapat melakukannya dengan mengklik tombol **Code** dan menyalin URL:
[CodeSpace](./images/createcodespace.png)
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) di dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan perintah berikut, ganti `<your-repository-url>` dengan URL yang baru saja 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, ganti `<your-repository-url>` dengan URL yang baru saja Anda salin:
```bash
git clone <your-repository-url>
```
2. Buka folder di Visual Studio Code. Anda dapat melakukannya dengan mengklik **File** > **Open Folder** dan memilih folder yang baru saja Anda kloning.
2. Buka folder tersebut di Visual Studio Code. Anda dapat melakukannya dengan mengklik **File** > **Open Folder** dan memilih folder yang baru saja Anda kloning.
> Ekstensi Visual Studio Code yang direkomendasikan:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk melihat pratinjau halaman HTML di dalam Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk melihat pratinjau 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 kode lebih cepat
## 📂 Setiap pelajaran mencakup:
- sketchnote opsional
- video tambahan opsional
- video pelengkap opsional
- kuis pemanasan sebelum pelajaran
- pelajaran tertulis
- untuk pelajaran berbasis proyek, panduan langkah demi langkah tentang cara membangun proyek tersebut
- untuk pelajaran berbasis proyek, panduan langkah demi langkah cara membangun proyek
> **Catatan tentang kuis**: Semua kuis terdapat dalam folder Quiz-app, total 48 kuis dengan tiga pertanyaan masing-masing. Kuis tersedia [di sini](https://ff-quizzes.netlify.app/web/) aplikasi kuis dapat dijalankan secara lokal atau dideploy ke Azure; ikuti instruksi di folder `quiz-app`.
> **Catatan tentang kuis**: Semua kuis terdapat di folder Quiz-app, total 48 kuis dengan tiga pertanyaan setiapnya. Mereka tersedia [di sini](https://ff-quizzes.netlify.app/web/) aplikasi kuis dapat dijalankan secara lokal atau diterapkan ke Azure; ikuti instruksi di folder `quiz-app`.
## 🗃️ Pelajaran
| | Nama Proyek | Konsep yang Diajarkan | Tujuan Pembelajaran | Pelajaran Terkait | Penulis |
| 01 | Memulai | Pengantar Pemrograman dan Alat-alat Perdagangan | Pelajari dasar-dasar yang mendasari sebagian besar bahasa pemrograman dan tentang perangkat lunak yang membantu pengembang profesional dalam pekerjaannya | [Pengantar Bahasa Pemrograman dan Alat-alat Perdagangan](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Memulai | Dasar-dasar GitHub, termasuk bekerja dalam tim | Cara menggunakan GitHub dalam proyek Anda, cara berkolaborasi dengan orang lain pada basis kode | [Pengantar GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Memulai | Aksesibilitas | Pelajari dasar-dasar aksesibilitas web | [Dasar-dasar Aksesibilitas](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Dasar-dasar JS | Tipe Data JavaScript | Dasar-dasar tipe data JavaScript | [Tipe Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Dasar-dasar JS | Fungsi dan Metode | Pelajari tentang fungsi dan metode untuk mengelola alur logika aplikasi | [Fungsi dan Metode](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher |
| 06 | Dasar-dasar JS | Membuat Keputusan dengan JS | Pelajari cara membuat kondisi dalam kode Anda menggunakan metode pengambilan keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Dasar-dasar JS | Array dan Loop | Bekerja dengan data menggunakan array dan loop di JavaScript | [Arraydan Loop](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktik | Bangun HTML untuk membuat terrarium online, fokus pada membangun tata letak | [Pengantar HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Praktik | Bangun CSS untuk menata terrarium online, fokus pada dasar-dasar CSS termasuk membuat halaman responsif | [Pengantar CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, manipulasi DOM | Bangun JavaScript untuk membuat terrarium berfungsi sebagai antarmuka seret/jatuhkan, fokus pada closures dan manipulasi DOM | [JavaScript Closures, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Membangun Permainan Mengetik | Pelajari cara menggunakan event keyboard untuk menggerakkan logika aplikasi JavaScript Anda | [Pemrograman Berbasis Event](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bekerja dengan Browser | Pelajari cara kerja browser, sejarahnya, dan cara membuat kerangka elemen pertama dari ekstensi browser | [Tentang Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Membangun formulir, memanggil API dan menyimpan variabel di penyimpanan lokal | Bangun elemen JavaScript dari ekstensi browser Anda untuk memanggil API menggunakan variabel yang disimpan di penyimpanan lokal | [API, Formulir, dan Penyimpanan Lokal](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Proses latar belakang di browser, performa web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang performa web dan beberapa optimasi yang dilakukan | [Tugas Latar Belakang dan Performa](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Pengembangan Game Lanjutan dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan membangun game | [Pengantar Pengembangan Game Lanjutan](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Menggambar ke canvas | Pelajari tentang Canvas API, yang digunakan untuk menggambar elemen ke layar | [Menggambar ke Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Memindahkan elemen ke sekitar layar | Temukan bagaimana elemen dapat bergerak menggunakan koordinat kartesian dan Canvas API | [Memindahkan Elemen Sekitar](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Deteksi Tabrakan | Membuat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan menyediakan fungsi pending untuk memastikan performa game | [Deteksi Tabrakan](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Menjaga skor | Melakukan perhitungan matematika berdasarkan status dan performa game | [Menjaga Skor](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Mengakhiri dan memulai ulang game | Pelajari tentang mengakhiri dan memulai ulang game, termasuk membersihkan aset dan mengatur ulang nilai variabel | [Kondisi Akhir](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Template HTML dan Routing dalam Web App | Pelajari cara membuat kerangka arsitektur situs web multipage menggunakan routing dan template HTML | [Template HTML dan Routing](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Membangun Form Login dan Registrasi | Pelajari tentang membangun formulir dan menangani rutinitas validasi | [Formulir](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode Pengambilan dan Penggunaan Data | Bagaimana data mengalir masuk dan keluar aplikasi Anda, cara mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Manajemen State | Pelajari bagaimana aplikasi Anda menyimpan state dan cara mengelolanya secara programatik | [Manajemen State](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Bekerja dengan VScode | Pelajari cara menggunakan editor kode| [Gunakan Editor Kode VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Bekerja dengan AI | Pelajari cara membangun asisten AI Anda sendiri | [Proyek Asisten AI](./9-chat-project/README.md) | Chris |
| | Nama Proyek | Konsep yang Diajarkan | Tujuan Pembelajaran | Pelajaran Terkait | Penulis |
| 01 | Memulai | Pengenalan Pemrograman dan Alat Kerja | Pelajari dasar-dasar yang mendasari sebagian besar bahasa pemrograman dan perangkat lunak yang membantu pengembang profesional melakukan pekerjaan mereka | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Memulai | Dasar GitHub, termasuk bekerja dengan tim | Cara menggunakan GitHub dalam proyek Anda, cara berkolaborasi dengan orang lain pada basis kode | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Memulai | Aksesibilitas | Pelajari dasar-dasar aksesibilitas web | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Dasar JS | Tipe Data JavaScript | Dasar-dasar tipe data JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Dasar JS | Fungsi dan Metode | Pelajari tentang fungsi dan metode untuk mengelola alur logika aplikasi | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | Dasar JS | Membuat Keputusan dengan JS | Pelajari cara membuat kondisi dalam kode Anda menggunakan metode pengambilan keputusan | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Dasar JS | Array dan Loop | Bekerja dengan data menggunakan array dan loop di JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktek | Bangun HTML untuk membuat terrarium online, fokus pada membangun tata letak | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Praktek | Bangun CSS untuk menata terrarium online, fokus pada dasar-dasar CSS termasuk membuat halaman responsif | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Bangun JavaScript untuk membuat terrarium berfungsi sebagai antarmuka drag/drop, fokus pada closure dan manipulasi DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Membangun Game Mengetik | Pelajari cara menggunakan event keyboard untuk menggerakkan logika aplikasi JavaScript Anda | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bekerja dengan Browser | Pelajari bagaimana browser bekerja, sejarahnya, dan cara membuat elemen pertama dari ekstensi browser | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Membangun form, memanggil API dan menyimpan variabel di penyimpanan lokal | Bangun elemen JavaScript dari ekstensi browser Anda untuk memanggil API menggunakan variabel yang disimpan di penyimpanan lokal | [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) | Proses latar belakang di browser, performa web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang performa web dan beberapa optimasi untuk membuat | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Pengembangan Game Lanjutan dengan JavaScript | Pelajari tentang Pewarisan menggunakan baik Kelas maupun Komposisi dan pola Pub/Sub, sebagai persiapan untuk membangun sebuah game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Menggambar ke kanvas | Pelajari tentang Canvas API, yang digunakan untuk menggambar elemen ke layar | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Memindahkan elemen di sekitar layar | Temukan bagaimana elemen bisa bergerak menggunakan koordinat kartesian dan Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Deteksi tabrakan | Buat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan menyediakan fungsi cooldown untuk memastikan performa game | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Menjaga skor | Lakukan perhitungan matematika berdasarkan status dan performa permainan | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Mengakhiri dan memulai ulang game | Pelajari tentang mengakhiri dan memulai ulang game, termasuk membersihkan aset dan mereset nilai variabel | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Template HTML dan Routing dalam Aplikasi Web | Pelajari cara membuat kerangka arsitektur situs web multipage menggunakan routing dan template HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Membangun Form Login dan Registrasi | Pelajari tentang membangun form dan menangani rutin validasi | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi Anda, cara mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Manajemen State | Pelajari bagaimana aplikasi Anda mempertahankan state dan cara mengelolanya secara programatis | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Bekerja dengan VScode | Pelajari cara menggunakan editor kode| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Bekerja dengan AI | Pelajari cara membangun asisten AI Anda sendiri | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogi
Kurikulum kami dirancang dengan dua prinsip pedagogis utama dalam pikiran:
Kurikulum kami dirancang dengan dua prinsip pedagogis utama:
* pembelajaran berbasis proyek
* kuis yang sering
Program ini mengajarkan dasar-dasar JavaScript, HTML, dan CSS, serta alat dan teknik terbaru yang digunakan oleh pengembang web saat ini. Siswa akan memiliki kesempatan untuk mengembangkan pengalaman langsung dengan membangun permainan mengetik, terrarium virtual, ekstensi browser ramah lingkungan, game gaya space invader, dan aplikasi perbankan untuk bisnis. Pada akhir rangkaian ini, siswa akan mendapatkan pemahaman yang solid tentang pengembangan web.
Program ini mengajarkan dasar-dasar JavaScript, HTML, dan CSS, serta alat dan teknik terbaru yang digunakan oleh pengembang web saat ini. Siswa akan memiliki kesempatan untuk mengembangkan pengalaman langsung dengan membangun game mengetik, terrarium virtual, ekstensi browser ramah lingkungan, game gaya penyerang luar angkasa, dan aplikasi perbankan untuk bisnis. Pada akhir seri, siswa akan memiliki pemahaman mendalam tentang pengembangan web.
> 🎓 Anda dapat mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai [Jalur Belajar](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
> 🎓 Anda dapat mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
Dengan memastikan bahwa konten selaras dengan proyek, proses menjadi lebih menarik bagi siswa dan retensi konsep akan ditingkatkan. Kami juga menulis beberapa pelajaran pengantar dalam dasar-dasar JavaScript untuk memperkenalkan konsep, disertai dengan video dari koleksi tutorial video "[Seri Pemula untuk: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya berkontribusi pada kurikulum ini.
Dengan memastikan bahwa konten selaras dengan proyek, proses menjadi lebih menarik bagi siswa dan retensi konsep akan meningkat. Kami juga menulis beberapa pelajaran pengantar dasar JavaScript untuk memperkenalkan konsep, dipasangkan dengan video dari koleksi tutorial video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya berkontribusi untuk kurikulum ini.
Selain itu, kuis dengan tingkat tekanan rendah sebelum kelas menetapkan niat siswa terhadap pembelajaran topik, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan dan dapat diambil secara keseluruhan atau sebagian. Proyek dimulai dari yang sederhana dan menjadi semakin kompleks pada akhir siklus 12 minggu.
Selain itu, kuis berkategori rendah sebelum kelas menetapkan niat siswa untuk mempelajari topik, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan dan dapat diikuti secara keseluruhan atau sebagian. Proyek dimulai kecil dan menjadi semakin kompleks pada akhir siklus 12 minggu.
Meskipun kami sengaja menghindari memperkenalkan kerangka kerja JavaScript untuk berkonsentrasi pada keterampilan dasar yang dibutuhkan sebagai pengembang web sebelum mengadopsi kerangka kerja, langkah selanjutnya yang baik untuk menyelesaikan kurikulum ini adalah mempelajari tentang Node.js melalui koleksi video lain: "[Seri Pemula untuk: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Meskipun kami sengaja menghindari memperkenalkan framework JavaScript untuk berkonsentrasi pada keterampilan dasar yang dibutuhkan sebagai pengembang web sebelum mengadopsi framework, langkah selanjutnya yang baik untuk menyelesaikan kurikulum ini adalah mempelajari Node.js melalui koleksi video lain: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Kunjungi pedoman [Kode Etik](CODE_OF_CONDUCT.md) dan [Kontribusi](CONTRIBUTING.md) kami. Kami menyambut umpan balik konstruktif Anda!
Anda dapat menjalankan dokumentasi ini secara offline dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repo ini, [pasang Docsify](https://docsify.js.org/#/quickstart) di mesin lokal Anda, dan kemudian di folder root repo ini, ketik `docsify serve`. Situs web akan dilayani di port 3000 di localhost Anda: `localhost:3000`.
Anda dapat menjalankan dokumentasi ini secara offline dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repo ini, [pasang Docsify](https://docsify.js.org/#/quickstart) di mesin lokal Anda, lalu di folder root repo ini, ketik `docsify serve`. Situs web akan dilayani pada port 3000 di localhost Anda: `localhost:3000`.
## 📘 PDF
PDF dari semua pelajaran dapat ditemukan [di sini](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Kursus Lainnya
Tim kami memproduksi kursus lain! Lihatlah:
Tim kami menghasilkan kursus lain! Cek:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -216,7 +225,7 @@ Tim kami memproduksi kursus lain! Lihatlah:
[](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)
@ -251,11 +260,11 @@ Tim kami memproduksi kursus lain! Lihatlah:
## Mendapatkan Bantuan
Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI. Bergabunglah dengan pembelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung di mana pertanyaan dipersilakan dan pengetahuan dibagikan secara bebas.
Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI. Bergabunglah dengan sesama pembelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung di mana pertanyaan diterima dan pengetahuan dibagikan dengan bebas.
@ -267,5 +276,5 @@ Repositori ini dilisensikan di bawah lisensi MIT. Lihat file [LICENSE](../../LIC
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk akurasi, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. Untuk informasi penting, disarankan menggunakan jasa terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau salah tafsir yang timbul dari penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya mencapai akurasi, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. Untuk informasi penting, disarankan menggunakan jasa terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau salah tafsir yang timbul dari penggunaan terjemahan ini.
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.
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, menampilkan 24 pelajaran praktikal yang merangkumi JavaScript, CSS, dan HTML.
### Komponen Utama
- **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
- **Kandungan Pendidikan**: 24 pelajaran terstruktur yang dianjurkan dalam modul berasaskan projek
- **Projek Praktikal**: Terrarium, Permainan Mengetik, Sambungan Penyemak Imbas, Permainan Angkasa, Aplikasi Perbankan, Penyunting Kod, dan Pembantu Sembang AI
- **Kuis Interaktif**: 48 kuis dengan 3 soalan setiap satu (penilaian pra/sesudah 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 Spesifik
### Bekerja dengan Projek Tertentu
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
Untuk arahan terperinci projek individu, rujuk fail README di:
- `quiz-app/README.md` - aplikasi kuis 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 sembang AI
### Struktur Monorepo
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
Walaupun bukan monorepo tradisional, repositori ini mengandungi pelbagai projek berdikari:
- Setiap pelajaran berdiri sendiri
- Projek tidak berkongsi pergantungan
- Kerja 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 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.
**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 ketidakakuratan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber rujukan yang sah. Untuk maklumat kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan 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!
Pelajari asas-asas pembangunan web dengan kursus komprehensif 12-minggu oleh Microsoft Cloud Advocates. Setiap 24 pelajaran menyelami JavaScript, CSS, dan HTML melalui projek praktikal seperti terrarium, sambungan pelayar, dan permainan angkasa lepas. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimalkan penyerapan pengetahuan dengan pedagogi berasaskan projek kami yang efektif. Mula perjalanan pengkodan anda hari ini!
> Repositori ini merangkumi lebih 50 terjemahan bahasa yang secara signifikan menambah saiz muat turun. Untuk clone tanpa terjemahan, gunakan sparse checkout:
> **Lebih suka Klon Secara Tempatan?**
>
> Repositori ini termasuk lebih 50+ terjemahan bahasa yang secara signifikan meningkatkan saiz muat turun. Untuk klon tanpa terjemahan, gunakan sparse checkout:
> 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.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Jika anda ingin menambah bahasa terjemahan tambahan yang disokong disenaraikan [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 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.
Lawati [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana anda akan menemui sumber pemula, pek Pelajar dan juga cara untuk mendapatkan baucar sijil percuma. Ini adalah halaman yang anda patut tandakan dan semak dari semasa ke semasa kerana kandungan akan ditukar setiap bulan.
### 📣 Pengumuman - Cabaran Mod Agen GitHub Copilot Baru untuk disiapkan!
### 📣 Pengumuman - Cabaran mod Agen GitHub Copilot baru untuk diselesaikan!
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.
Cabaran Baru ditambah, cari "GitHub Copilot Agent Challenge 🚀" dalam kebanyakan bab. Itu adalah cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan mod Agen. Jika anda belum pernah menggunakan mod Agen, ia bukan sahaja mampu menjana teks tetapi juga boleh mencipta dan menyunting fail, menjalankan arahan dan banyak lagi.
### 📣 Pengumuman - _Projek Baharu untuk dibina menggunakan Generative AI_
### 📣 Pengumuman - _Projek Baru untuk dibina menggunakan Generative AI_
Projek Pembantu AI baharu baru saja ditambah, lihat [projek](./9-chat-project/README.md)
Projek Pembantu AI baru telah ditambah, semak [projek](./9-chat-project/README.md)
### 📣 Pengumuman - _Kurikulum Baharu_ tentang Generative AI untuk JavaScript baru dikeluarkan
### 📣 Pengumuman - _Kurikulum Baru_ mengenai Generative AI untuk JavaScript baru sahaja dikeluarkan
Jangan terlepas kurikulum Generative AI baharu kami!
Jangan terlepas kurikulum Generative AI baru kami!
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk mula!
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk bermula!
Setiap pelajaran termasuk tugasan untuk disiapkan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda dalam topik seperti:
Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda mempelajari topik seperti:
- Prompting dan kejuruteraan prompt
- Penjanaan aplikasi teks dan gambar
- Aplikasi carian
- Penjanaan aplikasi teks dan imej
- Aplikasi pencarian
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk mula!
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk bermula!
## 🌱 Memulakan
> **Guru-guru**, kami telah [sertakan 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)!
## 🌱 Mula Bermula
**[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 ceramah, melengkapkan pelbagai aktiviti dan periksa kefahaman anda dengan kuiz pasca-ceramah.
> **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)!
Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan sekelas untuk bekerjasama dalam projek bersama! Perbincangan digalakkan di [forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) di mana pasukan moderator kami akan tersedia untuk menjawab soalan anda.
**[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 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 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.
Untuk melanjutkan pendidikan anda, kami sangat mengesyorkan meneroka [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) bagi bahan pembelajaran tambahan.
### 📋 Menyediakan persekitaran anda
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).
Kurikulum ini telah menyediakan persekitaran pembangunan siap sedia! Apabila anda bermula anda boleh memilih untuk menjalankan kurikulum dalam [Codespace](https://github.com/features/codespaces/) (_persekitaran berasaskan pelayar tanpa perlu pasang apa-apa_), atau secara tempatan pada komputer anda menggunakan penyunting teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### 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.
#### Cipta repositori anda
Untuk memudahkan anda menyimpan kerja anda, disyorkan anda mencipta salinan anda sendiri repositori ini. Anda boleh lakukan ini dengan mengklik butang **Use this template** di atas halaman ini. Ini akan mencipta repositori baru dalam akaun GitHub anda dengan salinan kurikulum.
Ikuti langkah ini:
Ikuti langkah berikut:
1. **Fork Repositori**: Klik pada butang "Fork" di sudut atas-kanan halaman ini.
Dalam salinan repositori yang anda buat, klik butang **Code** dan pilih **Open with Codespaces**. Ini akan mencipta Codespace baharu untuk anda bekerja.
Dalam salinan repositori ini yang anda cipta, klik butang **Code** dan pilih **Open with Codespaces**. Ini akan mencipta Codespace baru untuk anda bekerja.
#### Menjalankan kurikulum secara tempatan di komputer anda
Untuk menjalankan kurikulum ini secara tempatan di komputer anda, anda memerlukan penyunting teks, pelayar dan alat baris perintah. Pelajaran pertama kami, [Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan](../../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.
#### Menjalankan kurikulum secara tempatan pada komputer anda
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).
Untuk menjalankan kurikulum ini secara tempatan pada komputer anda, anda memerlukan penyunting teks, pelayar dan alat baris perintah. Pelajaran pertama kami, [Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan membimbing anda melalui pelbagai pilihan bagi setiap alat ini supaya anda boleh pilih yang paling sesuai.
1. Clone repositori anda ke komputer anda. Anda boleh melakukannya dengan mengklik butang **Code** dan menyalin URL:
Cadangan kami adalah untuk 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).
1. Klon 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 perintah 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 arahan berikut, menggantikan `<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 **File** > **Open Folder** dan memilih folder yang baru anda klon.
2. Buka folder tersebut dalam Visual Studio Code. Anda boleh melakukannya dengan mengklik **File** > **Open Folder** dan memilih folder yang baru sahaja anda klon.
> Sambungan Visual Studio Code yang disyorkan:
>
> * [Live Server](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 cepat
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - untuk membantu anda menulis kod dengan lebih pantas
## 📂 Setiap pelajaran termasuk:
## 📂 Setiap pelajaran merangkumi:
- sketchnote pilihan
- video tambahan pilihan
- kuiz pemanasan sebelum pelajaran
- pelajaran bertulis
- untuk pelajaran berasaskan projek, panduan langkah demi langkah untuk membina projek
- pemeriksaan pengetahuan
- untuk pelajaran berasaskan projek, panduan langkah demi langkah tentang cara membina projek
- semakan pengetahuan
- cabaran
- bacaan tambahan
- tugasan
- [kuiz selepas pelajaran](https://ff-quizzes.netlify.app/web/)
> **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`.
> **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 dipasang di Azure; ikut arahan dalam folder `quiz-app`.
## 🗃️ Pelajaran
| | Nama Projek | Konsep Diajarkan | Objektif Pembelajaran | Pelajaran Berkaitan | Pengarang |
| 01 | Memulakan | Pengenalan kepada Pengaturcaraan dan Alat-alat Kerja | Pelajari asas di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan kerja mereka | [Pengenalan kepada Bahasa Pengaturcaraan dan Alat-alat Kerja](./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 |
| | Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Berkaitan | Pengarang |
| 01 | Memulakan | Pengenalan kepada Pengaturcaraan dan Alat Perdagangan | Pelajari asas berdasarkan kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan kerja mereka | [Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Memulakan | Asas GitHub, termasuk bekerja dalam pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain dalam asas kod | [Pengenalan kepada GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Memulakan | Kebolehaksesan | Pelajari asas kebolehaksesan web | [Asas Kebolehaksesan](./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 | Tatasusunan dan Gelung | Bekerja dengan data menggunakan tatasusunan dan gelung dalam JavaScript | [Tatasusunan 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, menumpukan 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 menyerlahkan terrarium dalam talian, menumpukan 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/lepas, 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) | Bina Permainan Mengetik | Pelajari cara menggunakan acara papan kekunci untuk mendorong logik aplikasi JavaScript anda | [Pengaturcaraan Berasaskan Acara](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bekerja dengan Pelayar | Pelajari cara pelayar berfungsi, sejarahnya, dan cara membina elemen pertama pelanjutan 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 pemboleh ubah dalam storan tempatan | Bina elemen JavaScript pelanjutan pelayar anda untuk memanggil API menggunakan pemboleh ubah yang disimpan dalam storan tempatan | [API, Borang, dan Storan Tempatan](./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 | Gunakan proses latar belakang pelayar untuk mengurus ikon pelanjutan; pelajari 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 Lanjutan dengan JavaScript | Pelajari tentang Warisan menggunakan kedua-dua Kelas dan Komposisi serta corak Pub/Sub, sebagai persediaan untuk membina permainan | [Pengenalan kepada Pembangunan Permainan Lanjutan](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Melukis ke kanvas | Pelajari tentang API Kanvas, 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 sekeliling skrin | Temui bagaimana elemen boleh mendapat pergerakan menggunakan koordinat kartesian dan API Kanvas | [Menggerakkan Elemen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Pengesanan pertembungan | Membuat elemen bertembung dan bertindak balas antara satu sama lain menggunakan kekunci tekan dan menyediakan fungsi penyejukkan untuk memastikan prestasi permainan | [Pengesanan Pertembungan](./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 | Pelajari tentang menamatkan dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pemboleh ubah | [Keadaan Tamat](./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 | Pelajari cara membuat kerangka seni bina laman 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) | Bina Borang Log Masuk dan Pendaftaran | Pelajari 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 Mendapat dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi anda, bagaimana untuk mendapatkannya, menyimpan, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Pengurusan Keadaan | Pelajari bagaimana aplikasi anda mengekalkan keadaan dan bagaimana menguruskannya secara program | [Pengurusan Keadaan](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../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 | [AI Assistants](./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 dalam fikiran:
Kurikulum kami direka dengan dua prinsip pedagogi utama:
* pembelajaran berasaskan projek
* kuiz kerap
Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web hari ini. Pelajar akan berpeluang mendapat pengalaman praktikal dengan membina permainan menaip, terrarium maya, sambungan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Pada akhir siri ini, pelajar akan mempunyai pemahaman yang kukuh tentang pembangunan web.
> 🎓 Anda boleh mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai [Jalur Pembelajaran](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
Program ini mengajarkan asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web masa kini. Pelajar akan berpeluang mengembangkan pengalaman secara langsung dengan membina permainan menaip, terrarium maya, pelanjutan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Pada akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh mengenai pembangunan web.
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.
> 🎓 Anda boleh mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai [Jalan Pembelajaran](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
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.
Dengan memastikan bahawa kandungan selaras dengan projek, proses pembelajaran menjadi lebih menarik untuk pelajar dan daya ingatan konsep akan dipertingkatkan. Kami juga menulis beberapa pelajaran permulaan dalam asas JavaScript untuk memperkenalkan konsep, dipadankan dengan video dari koleksi tutorial video "[Siri Pemula kepada: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", yang mana beberapa pengarangnya menyumbang kepada kurikulum ini.
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)".
Selain itu, kuiz sama ada ringkas sebelum kelas menetapkan niat pelajar terhadap pembelajaran topik, sementara kuiz kedua selepas kelas memastikan pemahaman lebih lanjut. Kurikulum ini direka untuk menjadi fleksibel dan menyeronokkan serta boleh diambil secara keseluruhan atau sebahagian. Projek bermula kecil dan menjadi semakin rumit pada penghujung kitaran 12 minggu.
> Lawati [Kod Etika](CODE_OF_CONDUCT.md) dan garis panduan [Menyumbang](CONTRIBUTING.md) kami. Kami mengalu-alukan maklum balas membina anda!
Walaupun kami sengaja mengelakkan pengenalan rangka kerja JavaScript untuk menumpukan pada kemahiran asas yang diperlukan sebagai pembangun web sebelum menggunakan rangka kerja, langkah seterusnya yang baik selepas melengkapkan kurikulum ini adalah mempelajari tentang Node.js melalui koleksi video lain: "[Siri Pemula kepada: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Lawati [Kod Etika](CODE_OF_CONDUCT.md) dan 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/#/). 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`.
Anda boleh menjalankan dokumentasi ini secara luar talian dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repo ini, [pasang Docsify](https://docsify.js.org/#/quickstart) pada mesin tempatan anda, dan kemudian di folder akar repo ini, taip `docsify serve`. Laman web akan dihidangkan pada port 3000 pada lokalhos anda: `localhost:3000`.
## 📘 PDF
PDF untuk semua pelajaran boleh didapati [di sini](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF bagi semua pelajaran boleh didapati [di sini](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Kursus Lain
Pasukan kami menghasilkan kursus lain! Lihatlah:
Pasukan kami menghasilkan kursus lain! Lihat:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -251,11 +255,11 @@ Pasukan kami menghasilkan kursus lain! Lihatlah:
## Mendapatkan Bantuan
Jika anda tersekat atau mempunyai sebarang soalan tentang membina aplikasi AI. Sertai pelajar lain dan pemaju berpengalaman dalam perbincangan mengenai MCP. Ia adalah komuniti yang menyokong di mana soalan dialu-alukan dan pengetahuan dikongsi dengan bebas.
Jika anda tersekat atau mempunyai sebarang pertanyaan tentang membina aplikasi AI. Sertai pelajar lain dan pembangun berpengalaman dalam perbincangan tentang MCP. Ia adalah komuniti sokongan di mana soalan dialu-alukan dan pengetahuan dikongsi dengan bebas.
@ -267,5 +271,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 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.
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 sahih. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
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.
Ito ay isang edukasyonal na curriculum repository para sa pagtuturo ng mga pundasyon ng web development sa mga nagsisimula. Ang curriculum 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.
### Key Components
- **Educational Content**: 24 na nakaayos na mga aralin na organisado sa mga module na nakabase sa proyekto
- **Educational Content**: 24 na nakaayos na aralin na pinaghihiwalay sa mga 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)
- **Interactive Quizzes**: 48 na pagsusulit na may tig-3 tanong bawat isa (pre/post-lesson na pagtatasa)
- **Multi-language Support**: Awtomatikong pagsasalin para sa mahigit 50 na mga wika gamit ang GitHub Actions
- **Technologies**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para sa AI na mga proyekto)
### Architecture
- Repositoryo ng edukasyonal na may istrukturang nakabase sa aralin
- Educational repository na may istrakturang 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)
- Nakahiwalay na mga proyekto sa magkakahiwalay na direktoryo (quiz-app, iba't ibang aralin na proyekto)
- Sistema ng pagsasalin gamit ang GitHub Actions (co-op-translator)
- Dokumentasyon na sinuserve gamit ang Docsify at available bilang PDF
- Dokumentasyon na hinahatid sa pamamagitan ng Docsify at makukuha bilang PDF
## Setup Commands
Ang repositoryong ito ay pangunahing para sa pagkonsumo ng edukasyonal na nilalaman. Para magtrabaho sa mga partikular na proyekto:
Ang repositoryong ito ay pangunahing para sa pagkonsumo ng edukasyonal na nilalaman. Para sa pagtatrabaho sa mga partikular na proyekto:
### Main Repository Setup
@ -37,7 +37,7 @@ cd Web-Dev-For-Beginners
cd quiz-app
npm install
npm run dev # Simulan ang development server
npm run build # I-build para sa produksyon
npm run build # Gumawa para sa produksyon
npm run lint # Patakbuhin ang ESLint
```
@ -56,7 +56,7 @@ npm run format # I-format gamit ang Prettier
```bash
cd 5-browser-extension/solution
npm install
# Sundin ang mga partikular na tagubilin sa pag-load ng extension para sa browser
# Sundin ang mga tagubilin sa pag-load ng extension na partikular sa browser
```
### Space Game Projects
@ -72,37 +72,37 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Itakda ang GITHUB_TOKEN na variable ng kapaligiran
# Itakda ang environment variable na GITHUB_TOKEN
python api.py
```
## Development Workflow
### For Content Contributors
### Para sa mga Nagbibigay ng Nilalaman
1. **I-fork ang repositoryo** sa iyong GitHub account
2. **I-clone ang iyong fork**nang lokal
1. **I-fork ang repository** sa iyong GitHub account
2. **I-clone ang iyong fork**sa lokal na makina
3. **Gumawa ng bagong branch** para sa iyong mga pagbabago
4. Gawin ang mga pagbabago sa nilalaman ng aralin o mga halimbawa ng code
5. Subukan ang anumang mga pagbabago sa code sa mga kaukulang direktoryo ng proyekto
6. Mag-submit ng pull requests ayon sa mga panuntunan ng kontribusyon
4. Gumawa ng mga pagbabago sa nilalaman ng aralin o mga halimbawa ng code
5. Subukan ang anumang mga pagbabago sa code sa mga kaugnay na direktoryo ng proyekto
6. Mag-submit ng pull requests ayon sa mga gabay sa kontribusyon
### For Learners
### Para sa mga Nag-aaral
1. I-fork o i-clone ang repositoryo
1. Mag-fork o mag-clone ng repository
2. Pumunta sa mga direktoryo ng aralin nang sunud-sunod
3. Basahin ang mga README file para sa bawat aralin
4. Kumpletuhin ang pre-lesson quizzes sa https://ff-quizzes.netlify.app/web/
5. Trabahuhin ang mga halimbawa ng code sa mga folder ng aralin
6. Kumpletuhin ang mga assignments at challenges
7. Sagutan ang post-lesson quizzes
4. Kumpletuhin ang mga pre-lesson quiz sa https://ff-quizzes.netlify.app/web/
5. Trabahuin ang mga halimbawa ng code sa mga folder ng aralin
6. Kumpletuhin ang mga takdang-aralin at hamon
7. Sagutan ang mga post-lesson quiz
### Live Development
- **Dokumentasyon**: Patakbuhin ang `docsify serve` sa root (port 3000)
- **Quiz App**: Patakbuhin ang `npm run dev` sa direktoryo ng quiz-app
- **Quiz App**: Patakbuhin ang `npm run dev` sa quiz-app directory
- **Mga Proyekto**: Gamitin ang VS Code Live Server extension para sa mga HTML na proyekto
- **API Projects**: Patakbuhin ang `npm start` sa mga kaukulang API na direktoryo
- **API Projects**: Patakbuhin ang `npm start` sa kani-kaniyang API directories
## Testing Instructions
@ -110,82 +110,82 @@ python api.py
```bash
cd quiz-app
npm run lint # Suriin ang mga isyu sa istilo ng code
npm run build # Tiyaking matagumpay ang build
npm run lint # Suriin ang mga isyu sa estilo ng code
npm run build # Tiyakin na matagumpay ang build
```
### Bank API Testing
```bash
cd 7-bank-project/api
npm run lint # Suriin para sa mga isyu sa estilo ng code
npm run lint # Suriin ang mga isyu sa estilo ng code
node server.js # Tiyakin na nagsisimula ang server nang walang mga error
```
### General Testing Approach
### Pangkalahatang Paraan ng Pagsubok
- Ito ay isang edukasyonal na repositoryo na walang komprehensibong automated na mga pagsubok
- Ito ay isang edukasyonal na repository na walang komprehensibong awtomatikong pagsusuri
- Ang manu-manong pagsusuri ay nakatuon sa:
- Ang mga halimbawa ng code ay tumatakbo nang walang mga error
- Gumagana nang tama ang mga link sa dokumentasyon
- Nakumpleto nang matagumpay ang build ng mga proyekto
- Sumusunod ang mga halimbawa sa mga pinakamahusay na kasanayan
- Pagpapatakbo ng mga halimbawa ng code nang walang error
- Tamang pagtatrabaho ng mga link sa dokumentasyon
- Matiyak ang matagumpay na pagbuo ng proyekto
- Pagsunod ng mga halimbawa sa pinakamahusay na praktis
### Pre-submission Checks
### Mga Pagsusuri Bago Mag-submit
- Patakbuhin ang `npm run lint` sa mga direktoryong may package.json
- Suriin ang mga markdown link kung valid
- Siguraduhin na valid ang mga markdown link
- Subukan ang mga halimbawa ng code sa browser o Node.js
- Siguraduhing ang mga pagsasalin ay may tamang istruktura
- Suriin na nananatili ang tamang istraktura sa mga pagsasalin
## Code Style Guidelines
### JavaScript
- Gumamit ng modernong ES6+ na sintaks
- Sundin ang mga karaniwang ESLint na configuration na ibinigay sa mga proyekto
- Sundin ang karaniwang ESLint na mga konfigurasyon na ibinigay sa mga proyekto
- Gumamit ng makahulugang mga pangalan ng variable at function para sa kalinawan ng edukasyon
- Magdagdag ng mga komento na nagpapaliwanag ng mga konsepto para sa mga nag-aaral
- I-format gamit ang Prettier kung ito ay naka-configure
- Magdagdag ng mga paliwanag na komentaryo para sa mga nag-aaral
- I-format gamit ang Prettier kung naka-konfigure
### HTML/CSS
- Mga semantikong HTML5 na elemento
- Mga prinsipyong responsive na disenyo
- Malinaw na mga konbensiyon sa pag-ninilay ng klase
- Mga komento na nagpapaliwanag ng mga teknik sa CSS para sa mga nag-aaral
- Semantic na mga elemento ng HTML5
- Mga prinsipyong responsive design
- Malinaw na naming ng klase
- Mga komentaryong nagpapaliwanag ng mga teknik sa CSS para sa mga nag-aaral
### Python
- Mga patnubay sa istilo ng PEP 8
- Mga PEP 8 na gabay sa estilo
- Malinaw, edukasyonal na mga halimbawa ng code
- Mga type hint kung nakakatulong sa pagkatuto
- Type hints kung kinakailangan para sa pag-aaral
### Markdown Documentation
- Malinaw na hierarkiya ng mga heading
- Mga code block na may pagtukoy ng wika
- Mga link sa karagdagang mga mapagkukunan
- Mga screenshot at mga imahe sa mga direktoryong `images/`
- Malinaw na hierarchy ng mga heading
- Mga code block na may espesipikasyon ng wika
- Mga link sa karagdagang mga sanggunian
- Mga screenshot at imahe sa mga direktoryong `images/`
- Alt text para sa mga imahe para sa accessibility
### File Organization
### Organisasyon ng File
- Mga aralin na inanumero nang sunud-sunod (1-getting-started-lessons, 2-js-basics, atbp.)
- Bawat proyekto ay may `solution/` at kadalasang`start/` o `your-work/` na mga direktoryo
- Mga imahe na iniimbak sa mga lesson-specific na `images/` folder
- Mga pagsasalin sa istrukturang `translations/{language-code}/`
- Ang mga aralin ay may sunud-sunod na bilang (1-getting-started-lessons, 2-js-basics, atbp.)
- Bawat proyekto ay may `solution/` at madalas may`start/` o `your-work/` na mga direktoryo
- Mga imahe ay nakaimbak sa mga lesson-specific na `images/` folder
- Mga pagsasalin ay nasa `translations/{language-code}/` na istraktura
## Build and Deployment
### Quiz App Deployment (Azure Static Web Apps)
Ang quiz-app ay naka-configure para sa Azure Static Web Apps na deployment:
Ang quiz-app ay naka-konfigura para sa Azure Static Web Apps deployment:
```bash
cd quiz-app
npm run build # Lumilikha ng dist/ na folder
# Nagde-deploy gamit ang GitHub Actions workflow sa push sa main
npm run build # Lumilikha ng folder na dist/
# Naglalaan gamit ang GitHub Actions workflow sa pag-push sa main
```
Azure Static Web Apps configuration:
@ -197,86 +197,86 @@ Azure Static Web Apps configuration:
```bash
npm install # I-install ang docsify-to-pdf
npm run convert # Gumawa ng PDF mula sa mga docs
npm run convert # Gumawa ng PDF mula sa docs
```
### Docsify Documentation
```bash
npm install -g docsify-cli # I-install ang Docsify nang pangkalahatan
npm install -g docsify-cli # I-install ang Docsify sa buong sistema
docsify serve # I-serve sa localhost:3000
```
### Project-specific Builds
Bawat direktoryo ng proyekto ay maaaring may sarili nitong build process:
- Mga Vue na proyekto: `npm run build` ay lumilikha ng production bundles
- Mga static na proyekto: Walang build step, direktang i-serve ang mga files
Maaaring may sariling build process ang bawat direktoryo ng proyekto:
- Vue projects: `npm run build` ay lumilikha ng production bundles
- Static projects: Walang build step, diretso na pag-serve ng mga file
## Pull Request Guidelines
### Title Format
Gumamit ng malinaw, deskriptibong mga pamagat na naglalarawan sa bahagi ng pagbabago:
- `[Quiz-app] Magdagdag ng bagong quiz para sa aralin X`
- `[Lesson-3] Ayusin ang typo sa terrarium project`
- `[Translation] Magdagdag ng pagsasalin sa Spanish para sa aralin 5`
- `[Docs] I-update ang mga tagubilin sa setup`
Gumamit ng malinaw, nakapagsasaysay na mga pamagat na nagpapakita ng bahagi ng pagbabago:
- `[Quiz-app] Add new quiz for lesson X`
- `[Lesson-3] Fix typo in terrarium project`
- `[Translation] Add Spanish translation for lesson 5`
- `[Docs] Update setup instructions`
### Required Checks
Bago magsumite ng PR:
Bago mag-submit ng PR:
1. **Kalidad ng Code**:
- Patakbuhin ang `npm run lint` sa mga naapektuhang direktoryo ng proyekto
- Ayusin lahat ng linting errors at warnings
1. **Code Quality**:
- Patakbuhin ang `npm run lint` sa mga apektadong direktoryo ng proyekto
- Ayusin ang lahat ng linting errors at warnings
2. **Pag-verify ng Build**:
2. **Build Verification**:
- Patakbuhin ang `npm run build` kung naaangkop
- Siguraduhin walang error sa build
- Siguraduhing walang error sa build
3. **Pagpapatunay ng Link**:
3. **Link Validation**:
- Subukan lahat ng markdown links
- Siguraduhin gumagana ang mga image references
4. **Pagsusuri ng Nilalaman**:
- Basahin para sa spelling at grammar
- Siguraduhin tama ang mga halimbawa ng code at edukasyonal
- I-verify na ang mga pagsasalin ay nagpapanatili ng orihinal na kahulugan
4. **Content Review**:
- I-proofread para sa spelling at grammar
- Siguraduhing tama at edukasyonal ang mga sample code
- Tingnan na ang mga pagsasalin ay nananatili ang orihinal na kahulugan
### Contribution Requirements
- Sumang-ayon sa Microsoft CLA (automated na tseke sa unang PR)
- Sundin ang [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Tingnan ang [CONTRIBUTING.md](./CONTRIBUTING.md) para sa detalyadong mga gabay
- I-reference ang mga numero ng isyu sa PR description kung naaangkop
- Sumang-ayon sa Microsoft CLA (awtomatikong tseke sa unang PR)
- Sundan ang [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Tingnan ang [CONTRIBUTING.md](./CONTRIBUTING.md) para sa detalyadong gabay
- Ilahad ang mga numero ng isyu sa deskripsyon ng PR kung naaangkop
### Review Process
- Ang mga PR ay nirerebyu ng mga maintainer at komunidad
- Pinapangunahan ang kalinawan sa edukasyon
- Dapat sundin ng mga halimbawa ng code ang kasalukuyang mga pinakamahusay na kasanayan
- Ang mga pagsasalin ay sinusuri para sa katumpakan at angkop na kultura
- Ang mga PR ay nirerepaso ng mga maintainers at ng komunidad
- Pinag-iibayo ang kalinawan sa edukasyon
- Ang mga halimbawa ng code ay dapat sumunod sa kasalukuyang pinakamahusay na praktis
- Ang mga pagsasalin ay nirerepaso para sa katumpakan at angkop na kultura
## Translation System
### Automated Translation
- Gumagamit ng GitHub Actions kasama ang co-op-translator workflow
- Nagsasalin sa 50+ na mga wika nang awtomatiko
- Mga source file sa mga pangunahing direktoryo
- Mga naisaling file sa `translations/{language-code}/` na mga direktoryo
- Gumagamit ng GitHub Actions na may co-op-translator workflow
- Sinasalin sa mahigit 50 na mga wika nang awtomatiko
- Mga source file ay nasa pangunahing mga direktoryo
- Mga isinaling file ay nasa `translations/{language-code}/` na mga direktoryo
### Adding Manual Translation Improvements
1. Hanapin ang file sa `translations/{language-code}/`
2. Gawin ang mga pagpapabuti habang pinapanatili ang istruktura
2. Gawin ang mga pagpapabuti habang pinapanatili ang istraktura
3. Siguraduhing gumagana pa rin ang mga halimbawa ng code
4. Subukan ang anumang lokal na content ng quiz
4. Subukan ang anumang lokal na nilalaman ng quiz
### Translation Metadata
Ang mga naisaling file ay may metadata header:
Ang mga isinaling file ay may metadata header:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -294,115 +294,115 @@ CO_OP_TRANSLATOR_METADATA:
### Common Issues
**Hindi nagsisimula ang quiz app**:
- Suriin ang Node.js version (inirerekomenda v14+)
- I-delete ang `node_modules` at `package-lock.json`, patakbuhin muli ang `npm install`
- Suriin kung may conflict sa port (default: Vite gumagamit ng port 5173)
- Suriin ang bersyon ng Node.js (v14+ ang inirerekomenda)
- Burahin ang `node_modules` at `package-lock.json`, pagkatapos ay patakbuhin ulit ang `npm install`
- Tsek ang mga port conflict (default: Vite ay gumagamit ng port 5173)
**Hindi nagsisimula ang API server**:
- Siguraduhing ang Node.js version ay hindi bababa sa (node >=10)
- Suriin kung ginagamit na ang port
- Tiyaking naka-install lahat ng dependencies gamit ang `npm install`
- Tiyakin ang bersyon ng Node.js ay naaabot ang minimum (node >=10)
- Tsek kung ginagamit na ang port
- Siguraduhing naka-install lahat ng dependencies gamit ang `npm install`
**Hindi naglo-load ang browser extension**:
- Suriin kung maayos ang format ng manifest.json
- Tingnan ang console ng browser para sa mga error
- Sundin ang mga tagubilin sa pag-install ng extension para sa partikular na browser
- Tiyakin na ang manifest.json ay wastong na-format
- Suriin ang browser console para sa mga error
- Sundan ang mga browser-specific na panuto sa pag-install ng extension
**Mga isyu sa Python chat project**:
- Siguraduhing naka-install ang OpenAI package: `pip install openai`
- Siguraduhing nakaset ang GITHUB_TOKEN environment variable
- Suriin ang mga pahintulot sa pag-access ng GitHub Models
- Tiyakin na naka-set ang environment variable na GITHUB_TOKEN
- Tsek ang permissions para sa GitHub Models access
**Hindi nagseserbisyo ang Docsify ng dokumento**:
**Hindi nagseserbisyo ang Docsify ng docs**:
- I-install ang docsify-cli globally: `npm install -g docsify-cli`
- Patakbuhin mula sa root directory ng repositoryo
- Suriin kung umiiral ang `docs/_sidebar.md`
- Patakbuhin mula sa root directory ng repository
- Suriin na umiiral ang `docs/_sidebar.md`
### Development Environment Tips
- Gamitin ang VS Code kasama ang Live Server extension para sa mga HTML na proyekto
- I-install ang ESLint at Prettier extensions para sa pare-parehong pag-format
- Gamitin ang browser DevTools para sa debugging ng JavaScript
- Para sa mga Vue na proyekto, i-install ang Vue DevTools na extension ng browser
- Gamitin ang VS Code na may Live Server extension para sa mga HTML na proyekto
- Mag-install ng ESLint at Prettier extensions para sa consistent na formatting
- Gamitin ang browser DevTools para i-debug ang JavaScript
- Para sa Vue projects, mag-install ng Vue DevTools browser extension
### Performance Considerations
- Malaking bilang ng mga naisaling file (50+ na mga wika) ay nangangahulugan na malalaki ang mga full clone
- Maraming isinaling file (mahigit 50 na wika) kaya malalaki ang full clones
- Gamitin ang shallow clone kung content lang ang pinagtatrabahuhan: `git clone --depth 1`
- I-exclude ang mga pagsasalin mula sa mga paghahanap kapag nagtatrabaho sa English content
- Maaaring mabagal ang build process sa unang patakbo (npm install, Vite build)
- I-exclude ang mga pagsasalin sa mga paghahanap kapag nagtatrabaho sa English content
- Ang mga build process ay maaaring mabagal sa unang run (npm install, Vite build)
## Security Considerations
### Environment Variables
- Hindi dapat i-commit ang API keys sa repositoryo
- Gumamit ng `.env` files (na nakalista na sa `.gitignore`)
- Idokumento ang mga kinakailangang environment variable sa mga README ng proyekto
- Huwag kailanman i-commit ang API keys sa repository
- Gamitinang `.env` files (nasa `.gitignore` na)
- I-dokumento ang mga kinakailangang environment variables sa project README
### Python Projects
- Gumamit ng virtual environments: `python -m venv venv`
- Panatilihing updated ang mga dependencies
- Ang mga GitHub token ay dapat may minimal na kinakailangang mga permiso
- Ang mga GitHub token ay dapat may pinakamababang kinakailangang permiso
### GitHub Models Access
- Kinakailangan ang Personal Access Tokens (PAT) para sa GitHub Models
- Dapat itago ang mga token bilang environment variables
- Ang mga token ay dapat itago bilang environment variables
- Huwag kailanman i-commit ang mga token o credentials
## Additional Notes
### Target Audience
- Ganap na mga baguhan sa web development
- Ganap na mga nagsisimula sa web development
- Mga estudyante at self-learners
- Mga guro na gumagamit ng kurikulum sa mga klase
- Ang nilalaman ay idinisenyo para sa accessibility at unti-unting pagbuo ng kasanayan
- Mga guro na gumagamit ng curriculum sa mga silid-aralan
- Ang nilalaman ay dinisenyo para sa accessibility at unti-unting pagbuo ng kasanayan
### Educational Philosophy
- Project-based learning approach
- Madalas na pagsusuri ng kaalaman (quizzes)
- Hands-on na ehersisyo sa pagsusulat ng code
- Madalas na mga pagsusuri ng kaalaman (quizzes)
- Praktikal na hands-on coding exercises
- Mga halimbawa ng aplikasyon sa tunay na mundo
- Pokus sa mga pundasyon bago dumako sa mga frameworks
- Pokus sa mga pundasyon bago ang mga framework
### Repository Maintenance
- Aktibong komunidad ng mga nag-aaral at kontribyutor
- Regular na update sa mga dependencies at nilalaman
- Mga isyu at diskusyon ay minomonitor ng mga maintainer
- Awtomatikong update sa pagsasalin sa pamamagitan ng GitHub Actions
- Aktibong komunidad ng mga nag-aaral at mga kontribyutor
- Regular na pag-update ng mga dependencies at nilalaman
- Isyu at diskusyon ay minomonitor ng mga maintainers
- Awtonomong update ng pagsasalin gamit ang GitHub Actions
- 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
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) na inirerekomenda para sa mga nag-aaral
- Karagdagang mga kurso: Generative AI, Data Science, ML, IoT curricula ay available
### Working with Specific Projects
Para sa mga detalyadong tagubilin sa mga indibidwal na proyekto, tingnan ang mga README file sa:
- `quiz-app/README.md` - Vue 3 quiz application
Para sa detalyadong mga panuto para sa bawat proyekto, tingnan ang mga README files sa:
- `quiz-app/README.md` - Vue 3 na 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 laro gamit ang Canvas
- `5-browser-extension/README.md` - Development ng browser extension
- `6-space-game/README.md` - Canvas-based na development ng laro
- `9-chat-project/README.md` - AI chat assistant project
### Monorepo Structure
Bagaman hindi isang tradisyunal na monorepo, ang repositoryong ito ay naglalaman ng maraming independiyenteng proyekto:
Bagaman hindi isang tradisyunal na monorepo, ang repositoryong ito ay naglalaman ng maraming malalayang proyekto:
- Ang bawat aralin ay self-contained
- 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
- Maaaring magtrabaho sa mga indibiduwal na proyekto nang hindi naaapektuhan ang iba
- I-clone ang buong repo para sa buong karanasan ng curriculum
---
<!-- 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.
**Pagtatangi**:
Ang dokumentong ito ay isinalin gamit ang AI na serbisyo sa pagsasalin [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga error o hindi pagkakatugma. Ang orihinal na dokumento sa sariling wika nito ang dapat ituring na pangunahing sanggunian. Para sa mga 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.
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!
# Pagsisimula sa Web Development - Isang Kurikulum
Matutunan ang mga pundasyon ng 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 gawain. Pahusayin ang iyong mga kakayahan at i-optimize ang pag-alala ng kaalaman gamit ang aming epektibong project-based pedagogy. Simulan ang iyong paglalakbay sa pag-coding ngayon!
Sumali sa Azure AI Foundry Discord Community
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)
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 kapwa mga developer**](https://discord.com/invite/ByRwuEEgH4)
#### Sinusuportahan sa pamamagitan ng GitHub Action (Awtomatiko at Palaging Napapanahon)
> 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:
> **Mas gusto mo bang Mag-Clone Locally?**
>
> Ang repository na ito ay naglalaman ng 50+ na pagsasalin sa wika na nagpapalaki ng laki ng pag-download. Para mag-clone nang walang mga pagsasalin, gamitin ang sparse checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Binibigyan ka nito ng lahat ng kailangan mo para matapos ang kurso nang mas mabilis ang pag-download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Kung nais mo ng karagdagang mga suportadong wika ng pagsasalin ay naka-lista [dito](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Estudyante ka ba?_
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.
Bisitahin ang [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) kung saan makikita mo ang mga panimulang resources, Student packs at pati na rin ang mga paraan para makakuha ng libreng certificate voucher. Ito ang pahina na dapat mong i-bookmark at balikan paminsan-minsan dahil buwan-buwan naming pinapalitan ang mga nilalaman.
### 📣 Paunawa - Mga bagong hamon sa GitHub Copilot Agent mode na dapat tapusin!
### 📣 Anunsyo - Bagong GitHub Copilot Agent mode challenges na dapat tapusin!
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.
May bagong Challenge na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Ito ay isang bagong hamon para sa iyo na tapusin gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagamit ang Agent mode dati, kaya nitong hindi lang bumuo ng teksto kundi lumikha at mag-edit ng mga file, magpatakbo ng mga command at marami pang iba.
### 📣 Paunawa - _Bagong Proyekto na gagawin gamit ang Generative AI_
### 📣 Anunsyo - _Bagong Proyekto na gagawin gamit ang Generative AI_
May bagong AI Assistant project na idinagdag, tingnan ito sa [proyekto](./9-chat-project/README.md)
Kamakailan ay nadagdag ang bagong AI Assistant project, tingnan ito sa [proyekto](./9-chat-project/README.md)
### 📣 Paunawa - _Bagong Kurikulum_ tungkol sa Generative AI para sa JavaScript ang bagong inilabas
### 📣 Anunsyo - _Bagong Kurikulum_ sa Generative AI para sa JavaScript ay bagong inilabas na
Huwag palampasin ang aming bagong Generative AI curriculum!
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) upang makapagsimula!
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para makapagsimula!
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 mga text at image app
Bawat aralin ay may kasamang gawain na dapat tapusin, pagsusulit sa kaalaman at hamon upang gabayan ka sa pag-aaral ng mga paksang tulad ng:
- Pagbuo ng prompt at prompt engineering
- Pagbuo ng apps para sa teksto at larawan
- Search apps
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) upang makapagsimula!
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para makapagsimula!
## 🌱 Pagsisimula
> **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 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.
## 🌱 Paano Magsimula
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.
> **Guro**, mayroong kaming [ilang mga mungkahi](for-teachers.md) kung paano gamitin ang kurikulum na ito. Masaya kaming marinig ang iyong puna [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
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.
**[Mga Mag-aaral](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, sa bawat aralin, simulan sa isang pre-lecture quiz at sundan ito sa pagbasa ng lecture material, pagtapos ng iba't ibang mga aktibidad at pagtsek ng iyong pag-unawa gamit ang post-lecture quiz.
### 📋 Pag-set up ng iyong kapaligiran
Para mapahusay ang iyong karanasan sa pag-aaral, makipag-ugnayan sa iyong mga kapwa mag-aaral upang magtrabaho sa mga proyekto nang magkakasama! Ang mga diskusyon ay hinihikayat sa aming [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kung saan ang aming mga moderator ay nasa handang sumagot sa iyong mga tanong.
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).
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 karagdagang mga materyales sa pag-aaral.
### 📋 Pagsasaayos ng iyong kapaligiran
Ang kurikulum na ito ay may nakahandang development environment! Sa pag-simula, maaari kang pumili na patakbuhin ang kurikulum sa isang [Codespace](https://github.com/features/codespaces/) (_isang browser-based, hindi na kailangan ng install na environment_), o lokal sa iyong computer gamit ang text editor tulad ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Gumawa ng iyong repositoryo
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.
Para madali mong masave ang iyong trabaho, inirerekomenda na gumawa ka ng sarili mong kopya ng repositoryo na ito. Maaari mong gawin 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 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`
1. **I-Fork ang Repository**: I-click ang "Fork" na button sa itaas-kanang bahagi ng pahinang ito.
2. **I-Clone ang Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Pagpapatakbo ng kurikulum sa isang Codespace
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.
Sa kopya mo ng repositoryo na ginawa mo, i-click ang button na **Code** at piliin ang **Open with Codespaces**. Lilikha ito ng bagong Codespace para sa iyong trabaho.
#### Pagpapatakbo ng kurikulum local sa iyong computer
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.
#### Pagpapatakbo ng kurikulum lokal sa iyong computer
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).
Para mapatakbo ang kurikulum na ito lokal sa iyong computer, kakailanganin mo ng isang text editor, isang browser at isang command line tool. Ang unang aralin namin, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ay gagabay sa iyo sa iba't ibang mga opsyon para sa bawat isa sa mga ito upang mapili mo kung ano ang pinakamahusay para sa iyo.
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:
Ang aming rekomendasyon ay gamitin ang [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) bilang editor mo, 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).
1. I-clone ang iyong repositoryo sa iyong computer. Magagawa mo ito sa pamamagitan ng pag-click sa **Code** na 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:
```bash
git clone <your-repository-url>
```
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.
2. Buksan ang folder sa Visual Studio Code. Magagawa mo ito sa pamamagitan ng pag-click sa **File** > **Open Folder** at pagpili ng folder na kaklone mo lang.
> Inirerekomendang mga extension ng Visual Studio Code:
> Inirerekomendang mga extension sa Visual Studio 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
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para i-preview ang mga HTML na pahina sa loob ng Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para tulungan kang magsulat ng code nang mas mabilis
## 📂 Kasama sa bawat aralin:
- opsyonal na sketchnote
- opsyonal na karagdagang video
- pre-lesson warmup quiz
- opsyonal na dagdag na video
- pre-lesson warmup na pagsusulit
- nakasulat na aralin
- para sa mga araling proyekto, hakbang-hakbang na gabay kung paano buuin ang proyekto
- mga knowledge check
- para sa mga araling nakabatay sa proyekto, mga hakbang-hakbang na gabay kung paano gawin ang proyekto
> **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.
> **Tungkol sa mga pagsusulit**: Lahat ng mga pagsusulit ay nasa Quiz-app na folder, may kabuuang 48 pagsusulit na tig-tatlong tanong bawat isa. Makikita ang mga ito [dito](https://ff-quizzes.netlify.app/web/); ang quiz app ay maaaring patakbuhin nang lokal o ideploy sa Azure; sundin ang mga tagubilin sa `quiz-app` na folder.
## 🗃️ Mga Aralin
| | 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 |
| | Pangalan ng Proyekto | Mga Konsepto na Itinuturo | Mga Layunin sa Pagkatuto | Nauugnay na Aralin | May Awtor |
| 01 | Pagsisimula | Panimula sa Programming at Mga Kagamitan sa Trabaho | Matutunan ang mga pangunahing pundasyon sa likod ng karamihan ng mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer sa kanilang trabaho | [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 pakikipagtulungan sa grupo | 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 | Gamitin ang 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 |
| 04 | Mga Batayan ng JS | Mga Uri ng Datos sa JavaScript | Mga batayan ng mga uri ng datos sa JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Mga Batayan ng JS | Mga Function at Método | Matuto tungkol sa mga function at método upang pamahalaan ang daloy ng lohika ng aplikasyon | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine at Christopher |
| 06 | Mga Batayan ng JS | Paggawa ng mga Desisyon gamit ang JS | Matutunan kung paano gumawa ng mga kundisyon sa iyong code gamit ang mga pamamaraan sa paggawa ng desisyon | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Mga Batayan ng JS | Mga Arrays at Loops | Gumamit ng datos gamit ang mga array at loops sa JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | Praktis sa HTML | Buuhin ang HTML para gumawa ng online terrarium, na nakatuon sa paggawa ng layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | Praktis sa CSS | Buuhin ang CSS para istayl ang online terrarium, na nakatuon sa mga batayan ng CSS kabilang ang paggawa ng responsive na pahina | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Buuhin ang JavaScript para gawing gumana ang terrarium bilang 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 upang 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) | Paggamit ng mga Browser | Matutunan kung paano gumagana ang mga browser, ang kasaysayan nito, at 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) | Paggawa ng form, pagtawag ng API at pag-iimbak ng mga variable sa local storage | Buuhin ang 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 para pamahalaan ang icon ng extension; matuto tungkol sa performance ng web at ilang optimizations para mapabuti | [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 laro gamit ang JavaScript | Matuto tungkol sa Inheritance gamit 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) | Pagdibuho sa canvas | Matutunan ang Canvas API, na ginagamit sa pagguhit 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 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) | Collision detection | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang keypresses at magbigay ng cooldown function para mapanatili ang performance ng laro | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pagbantay ng score | Gawin ang mga kalkulasyon batay sa status 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 muling pagsisimula ng laro | Matutunan ang pagtatapos at muling pagsisimula ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga halaga ng variable | [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 Ruta sa isang Web App | Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage website gamit ang routing at mga HTML template | [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 mga validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Mga Pamamaraan ng Pagkuha at Paggamit ng Datos | Paano dumadaloy ang mga datos papasok at palabas ng iyong app, paano ito kunin, imbakin, at itapon | [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 pinapanatili ng iyong app ang estado at paano ito pamahalaan sa programmatic na paraan | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Paggamit ng VScode | Matutunan kung paano Gamitinang isang 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 |
## 🏫 Pedagohiya
Ang aming kurikulum ay dinisenyo batay sa dalawang pangunahing prinsipyo sa pagtuturo:
Ang aming kurikulum ay dinisenyo na may dalawang pangunahing prinsipyo sa pagtuturo:
* pagkatuto batay sa proyekto
* madalas na mga pagsusulit
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.
* madalas na pagsusulit
> 🎓 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!
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 sa kasalukuyan. 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, space-invader-style na laro, at isang banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga estudyante ng matibay na pag-unawa sa web development.
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.
> 🎓 Maari mong kunin ang mga unang ilang 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!
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.
Sa pamamagitan ng pagtiyak na ang nilalaman ay naaayon sa mga proyekto, ginagawang mas nakaka-engganyo ang proseso para sa mga estudyante at mapapalakas ang pag-alala sa mga konsepto. Nagsulat din kami ng ilang mga panimulang aralin sa mga batayan ng JavaScript upang ipakilala ang mga konsepto, na sinamahan ng video mula sa koleksyon ng video tutorial na "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", na ilan sa mga may-akda nito ay nag-ambag sa kurikulum na ito.
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)".
Bukod dito, ang isang mababang-peligro na pagsusulit bago ang klase ay nagtatalaga ng layunin ng estudyante patungkol sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng mas matagal na pag-alala. Dinisenyo ang kurikulum na ito upang maging flexible at masaya at maaaring kunin nang buo o bahagi lamang. Ang mga proyekto ay nagsisimula sa maliit at nagiging mas kumplikado sa pagtatapos ng 12-linggong siklo.
> 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!
Habang sinadya naming iwasan ang pagpapakilala ng JavaScript frameworks upang magpokus sa mga pangunahing kasanayan na kailangan bilang isang web developer bago gumamit ng framework, isang magandang susunod na hakbang sa pagtapos ng 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)".
> Bisitahin ang aming [Code of Conduct](CODE_OF_CONDUCT.md) at [Contributing](CONTRIBUTING.md) na mga gabay. Tinatanggap namin ang iyong makabuluhang puna!
## 🧭 Offline na pag-access
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`.
Maaari mong patakbuhin ang dokumentasyong ito offline gamit ang [Docsify](https://docsify.js.org/#/). I-fork ang repo na ito, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at sa root folder ng repo na ito, i-type ang `docsify serve`. Ang website ay ihahain sa port 3000 sa iyong localhost: `localhost:3000`.
## 📘 PDF
Maaaring mahanap ang PDF ng lahat ng mga aralin [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
## 🎒 Iba Pang Mga Kurso
Ang aming koponan ay gumagawa ng iba pang mga kurso! Tingnan ang:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
@ -229,21 +259,21 @@ Ang aming koponan ay gumagawa ng iba pang mga kurso! Tingnan ang:
## Pagkuha ng Tulong
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.
Kung ikaw ay naipit o may mga tanong tungkol sa paggawa ng mga AI app. Sumali sa mga kapwa mag-aaral at may karanasang mga developer sa talakayan tungkol sa MCP. Ito ay isang sumusuportang komunidad kung saan malugod ang mga tanong at malayang ibinabahagi ang kaalaman.
Ang repositoryong ito ay lisensyado sa ilalim ng MIT license. Tingnan ang [LICENSE](../../LICENSE) file para sa karagdagang impormasyon.
Ang repositoryong ito ay lisensyado sa ilalim ng MIT license. Tingnan ang [LICENSE](../../LICENSE) na file para sa karagdagang impormasyon.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Paunawa**:
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.
**Pababala**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat aming pinagsisikapan ang kawastuhan, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-tumpak na bahagi. Ang orihinal na dokumento sa wikang likas nito 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.
localizeflow[bot]
1 day ago