chore(i18n): sync translations with latest source changes (chunk 1/1, 9 changes)

update-translations
localizeflow[bot] 6 days ago
parent 8077bab528
commit 5229fca32b

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T19:26:05+00:00",
"translation_date": "2026-04-06T16:49:02+00:00",
"source_file": "AGENTS.md",
"language_code": "id"
},
@ -516,8 +516,8 @@
"language_code": "id"
},
"README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T12:47:54+00:00",
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T16:43:44+00:00",
"source_file": "README.md",
"language_code": "id"
},

@ -1,28 +1,28 @@
# AGENTS.md
## Gambaran Proyek
## Ikhtisar Proyek
Ini adalah repositori kurikulum pendidikan untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini adalah kursus lengkap selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran langsung yang mencakup JavaScript, CSS, dan HTML.
Ini adalah repositori kurikulum edukasi untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulumnya 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 Edukasi**: 24 pelajaran terstruktur yang diorganisir ke dalam modul berbasis proyek
- **Proyek Praktis**: Terrarium, Permainan Mengetik, Ekstensi Peramban, Permainan Ruang Angkasa, Aplikasi Perbankan, Editor Kode, dan Asisten Chat AI
- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan masing-masing (penilaian sebelum/setelah pelajaran)
- **Konten Edukasi**: 24 pelajaran terstruktur yang diorganisasi dalam modul berbasis proyek
- **Proyek Praktis**: Terrarium, Permainan Mengetik, Ekstensi Browser, Permainan Luar Angkasa, Aplikasi Perbankan, Editor Kode, dan Asisten Obrolan AI
- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan setiap kuis (penilaian sebelum dan sesudah pelajaran)
- **Dukungan Multi-bahasa**: Terjemahan otomatis untuk 50+ bahasa melalui GitHub Actions
- **Teknologi**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (untuk proyek AI)
### Arsitektur
- Repositori edukasi dengan struktur berbasis pelajaran
- Setiap folder pelajaran berisi README, contoh kode, dan solusi
- Setiap folder pelajaran memuat README, contoh kode, dan solusi
- Proyek mandiri dalam direktori terpisah (quiz-app, berbagai proyek pelajaran)
- Sistem terjemahan menggunakan GitHub Actions (co-op-translator)
- Dokumentasi disajikan melalui Docsify dan tersedia dalam format PDF
## Perintah Setup
Repositori ini terutama untuk konsumsi konten edukasi. Untuk bekerja dengan proyek tertentu:
Repositori ini terutama untuk konsumsi konten edukasi. Untuk bekerja dengan proyek spesifik:
### Setup Repositori Utama
@ -51,15 +51,15 @@ npm run lint # Jalankan ESLint
npm run format # Format dengan Prettier
```
### Proyek Ekstensi Peramban
### Proyek Ekstensi Browser
```bash
cd 5-browser-extension/solution
npm install
# Ikuti instruksi pemuatan ekstensi spesifik browser
# Ikuti instruksi pemuatan ekstensi khusus browser
```
### Proyek Permainan Ruang Angkasa
### Proyek Permainan Luar Angkasa
```bash
cd 6-space-game/solution
@ -67,7 +67,7 @@ npm install
# Buka index.html di browser atau gunakan Live Server
```
### Proyek Chat (Backend Python)
### Proyek Obrolan (Backend Python)
```bash
cd 9-chat-project/solution/backend/python
@ -81,10 +81,10 @@ python api.py
### Untuk Kontributor Konten
1. **Fork repositori** ke akun GitHub Anda
2. **Clone fork Anda** secara lokal
2. **Clone hasil fork** secara lokal
3. **Buat cabang baru** untuk perubahan Anda
4. Lakukan perubahan pada konten pelajaran atau contoh kode
5. Uji perubahan kode di direktori proyek yang relevan
4. Buat perubahan pada konten pelajaran atau contoh kode
5. Uji perubahan kode di direktori proyek terkait
6. Ajukan pull request sesuai pedoman kontribusi
### Untuk Pembelajar
@ -92,17 +92,17 @@ python api.py
1. Fork atau clone repositori
2. Navigasi ke direktori pelajaran secara berurutan
3. Baca file README untuk setiap pelajaran
4. Kerjakan kuis sebelum pelajaran di https://ff-quizzes.netlify.app/web/
4. Kerjakan kuis pra-pelajaran di https://ff-quizzes.netlify.app/web/
5. Kerjakan contoh kode dalam folder pelajaran
6. Selesaikan tugas dan tantangan
7. Ikuti kuis setelah pelajaran
7. Kerjakan kuis pasca-pelajaran
### Pengembangan Langsung
- **Dokumentasi**: Jalankan `docsify serve` di root (port 3000)
- **Aplikasi Kuis**: Jalankan `npm run dev` di direktori quiz-app
- **Proyek**: Gunakan ekstensi Live Server VS Code untuk proyek HTML
- **Proyek API**: Jalankan `npm start` di direktori API terkait
- **Proyek**: Gunakan ekstensi VS Code Live Server untuk proyek HTML
- **Proyek API**: Jalankan `npm start` di direktori API masing-masing
## Instruksi Pengujian
@ -124,57 +124,57 @@ node server.js # Verifikasi server mulai tanpa kesalahan
### Pendekatan Pengujian Umum
- Ini adalah repositori edukasi tanpa pengujian otomatis lengkap
- Pengujian manual berfokus pada:
- Ini adalah repositori edukasi tanpa pengujian otomatis yang lengkap
- Pengujian manual difokuskan pada:
- Contoh kode berjalan tanpa error
- Tautan dalam dokumentasi berfungsi dengan benar
- Build proyek berhasil
- Tautan di dokumentasi berfungsi dengan baik
- Build proyek selesai dengan sukses
- Contoh mengikuti praktik terbaik
### Pemeriksaan Sebelum Pengiriman
### Pemeriksaan Sebelum Pengajuan
- Jalankan `npm run lint` di direktori yang memiliki package.json
- Jalankan `npm run lint` di direktori dengan package.json
- Verifikasi tautan markdown valid
- Uji contoh kode di browser atau Node.js
- Periksa bahwa terjemahan mempertahankan struktur yang benar
- Pastikan terjemahan mempertahankan struktur yang benar
## Pedoman Gaya Kode
### JavaScript
- Gunakan sintaks ES6+ modern
- Ikuti konfigurasi ESLint standar yang disediakan dalam proyek
- Ikuti konfigurasi ESLint standar yang disediakan di proyek
- Gunakan nama variabel dan fungsi yang bermakna untuk kejelasan edukasi
- Tambahkan komentar yang menjelaskan konsep untuk pembelajar
- Format menggunakan Prettier jika dikonfigurasi
- Tambahkan komentar untuk menjelaskan konsep kepada pembelajar
- Format menggunakan Prettier jika sudah dikonfigurasi
### HTML/CSS
- Elemen HTML5 semantik
- Prinsip desain responsif
- Konvensi penamaan kelas yang jelas
- Komentar yang menjelaskan teknik CSS untuk pembelajar
- Komentar yang menjelaskan teknik CSS untuk pembelajaran
### Python
- Pedoman gaya PEP 8
- Contoh kode yang jelas dan edukatif
- Petunjuk tipe jika membantu proses pembelajaran
- Tambahkan tipe (type hints) jika membantu proses belajar
### Dokumentasi Markdown
- Hirarki judul yang jelas
- Blok kode dengan spesifikasi bahasa
- Tautan ke sumber tambahan
- Tangkapan layar dan gambar di direktori `images/`
- Tautan ke sumber daya tambahan
- Screenshot dan gambar di direktori `images/`
- Teks alt untuk gambar demi aksesibilitas
### Organisasi File
- Pelajaran diberi nomor secara berurutan (1-getting-started-lessons, 2-js-basics, dll.)
- Setiap proyek memiliki direktori `solution/` dan biasanya `start/` atau `your-work/`
- Gambar disimpan di folder `images/` khusus pelajaran
- Terjemahan dalam struktur `translations/{language-code}/`
- Pelajaran diberi nomor berurutan (1-getting-started-lessons, 2-js-basics, dll.)
- Setiap proyek memiliki direktori `solution/` dan sering `start/` atau `your-work/`
- Gambar disimpan dalam folder `images/` khusus pelajaran
- Terjemahan di struktur `translations/{kode-bahasa}/`
## Build dan Deployment
@ -193,10 +193,10 @@ Konfigurasi Azure Static Web Apps:
- **Lokasi output**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generasi PDF Dokumentasi
### Pembuatan PDF Dokumentasi
```bash
npm install # Instal docsify-to-pdf
npm install # Pasang docsify-to-pdf
npm run convert # Hasilkan PDF dari docs
```
@ -209,30 +209,30 @@ docsify serve # Jalankan di localhost:3000
### Build Spesifik Proyek
Setiap direktori proyek mungkin memiliki proses build sendiri:
- Proyek Vue: `npm run build` menghasilkan bundel produksi
- Proyek statis: Tidak ada langkah build, sajikan file langsung
Setiap direktori proyek dapat memiliki proses build sendiri:
- Proyek Vue: `npm run build` membuat bundle produksi
- Proyek statis: Tidak ada langkah build, file disajikan langsung
## Pedoman Pull Request
### Format Judul
Gunakan judul yang jelas dan deskriptif yang menunjukkan area perubahan:
Gunakan judul yang jelas dan deskriptif menunjukkan area perubahan:
- `[Quiz-app] Tambah kuis baru untuk pelajaran X`
- `[Lesson-3] Perbaiki typo pada proyek terrarium`
- `[Lesson-3] Perbaiki typo di proyek terrarium`
- `[Translation] Tambah terjemahan Spanyol untuk pelajaran 5`
- `[Docs] Perbarui instruksi setup`
### Pemeriksaan Wajib
Sebelum mengirimkan PR:
Sebelum mengirim PR:
1. **Kualitas Kode**:
- Jalankan `npm run lint` di direktori proyek yang terpengaruh
- Perbaiki semua error dan peringatan lint
- Perbaiki semua error dan peringatan linting
2. **Verifikasi Build**:
- Jalankan `npm run build` jika relevan
- Jalankan `npm run build` jika diperlukan
- Pastikan tidak ada error build
3. **Validasi Tautan**:
@ -240,39 +240,39 @@ Sebelum mengirimkan PR:
- Verifikasi referensi gambar berfungsi
4. **Review Konten**:
- Baca ulang untuk ejaan dan tata bahasa
- Baca ulang pengejaan dan tata bahasa
- Pastikan contoh kode benar dan edukatif
- Verifikasi terjemahan mempertahankan makna asli
### Persyaratan Kontribusi
- Setuju dengan Microsoft CLA (pemeriksaan otomatis pada PR pertama)
- Setuju dengan Microsoft CLA (cek otomatis pada PR pertama)
- Ikuti [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Lihat [CONTRIBUTING.md](./CONTRIBUTING.md) untuk pedoman detail
- Referensikan nomor isu dalam deskripsi PR jika relevan
- Lihat [CONTRIBUTING.md](./CONTRIBUTING.md) untuk pedoman rinci
- Cantumkan nomor isu dalam deskripsi PR jika ada
### Proses Review
- PR direview oleh maintainer dan komunitas
- Kejelasan edukasi menjadi prioritas
- Kejelasan edukasi diprioritaskan
- Contoh kode harus mengikuti praktik terbaik saat ini
- Terjemahan ditinjau untuk akurasi dan kesesuaian budaya
- Terjemahan direview untuk akurasi dan kesesuaian budaya
## Sistem Terjemahan
### Terjemahan Otomatis
- Menggunakan GitHub Actions dengan workflow co-op-translator
- Menerjemahkan ke 50+ bahasa secara otomatis
- Menerjemahkan otomatis ke 50+ bahasa
- File sumber di direktori utama
- File terjemahan di direktori `translations/{language-code}/`
- File terjemahan di direktori `translations/{kode-bahasa}/`
### Menambahkan Perbaikan Terjemahan Manual
1. Temukan file di `translations/{language-code}/`
1. Temukan file di `translations/{kode-bahasa}/`
2. Lakukan perbaikan sambil mempertahankan struktur
3. Pastikan contoh kode tetap berfungsi
4. Uji konten kuis yang sudah dilokalisasi
4. Uji konten kuis yang sudah dilokalkan
### Metadata Terjemahan
@ -295,28 +295,28 @@ CO_OP_TRANSLATOR_METADATA:
**Aplikasi kuis gagal mulai**:
- Periksa versi Node.js (disarankan v14+)
- Hapus `node_modules` dan `package-lock.json`, jalankan `npm install` ulang
- Hapus `node_modules` dan `package-lock.json`, jalankan `npm install` lagi
- Periksa konflik port (default: Vite menggunakan port 5173)
**Server API tidak mulai**:
- Pastikan versi Node.js memenuhi minimum (node >=10)
- Periksa apakah port sudah digunakan
- Pastikan semua dependensi sudah di-install dengan `npm install`
**Server API tidak mau mulai**:
- Verifikasi versi Node.js minimal (node >=10)
- Cek apakah port sedang digunakan
- Pastikan semua dependensi terinstall dengan `npm install`
**Ekstensi peramban tidak dimuat**:
- Pastikan manifest.json terformat dengan benar
- Periksa console browser untuk error
**Ekstensi browser tidak termuat**:
- Pastikan manifest.json diformat dengan benar
- Cek console browser untuk error
- Ikuti instruksi instalasi ekstensi spesifik browser
**Masalah proyek chat Python**:
- Pastikan paket OpenAI terpasang: `pip install openai`
- Verifikasi variabel lingkungan GITHUB_TOKEN diset
- Periksa izin akses Model GitHub
**Masalah proyek obrolan Python**:
- Pastikan paket OpenAI terinstall: `pip install openai`
- Verifikasi variabel lingkungan GITHUB_TOKEN disetel
- Periksa izin akses model GitHub
**Docsify tidak menyajikan dokumentasi**:
- Instal docsify-cli secara global: `npm install -g docsify-cli`
- Jalankan dari direktori root repositori
- Periksa keberadaan `docs/_sidebar.md`
- Install docsify-cli global: `npm install -g docsify-cli`
- Jalankan dari root repositori
- Pastikan `docs/_sidebar.md` ada
### Tips Lingkungan Pengembangan
@ -327,45 +327,45 @@ CO_OP_TRANSLATOR_METADATA:
### Pertimbangan Performa
- Banyaknya file terjemahan (50+ bahasa) membuat clone penuh besar
- Gunakan clone dangkal jika hanya bekerja pada konten: `git clone --depth 1`
- Kecualikan terjemahan dari pencarian saat bekerja dengan konten Bahasa Inggris
- Proses build mungkin lambat pada first-run (npm install, build Vite)
- Banyaknya file terjemahan (50+ bahasa) berarti clone penuh cukup besar
- Gunakan clone shallow jika hanya mengerjakan konten: `git clone --depth 1`
- Kecualikan terjemahan dari pencarian saat mengerjakan konten bahasa Inggris
- Proses build mungkin lambat pada pertama kali (npm install, build Vite)
## Pertimbangan Keamanan
### Variabel Lingkungan
- Kunci API tidak boleh di-commit ke repositori
- Gunakan file `.env` (sudah di `.gitignore`)
- Dokumentasikan variabel lingkungan yang diperlukan di README proyek
- Gunakan file `.env` (sudah dalam `.gitignore`)
- Dokumentasikan variabel lingkungan yang dibutuhkan pada README proyek
### Proyek Python
- Gunakan virtual environment: `python -m venv venv`
- Jaga dependensi tetap terbaru
- Token GitHub harus memiliki izin minimum yang diperlukan
- Jaga dependensi tetap terbarui
- Token GitHub harus memiliki izin minimal yang diperlukan
### Akses Model GitHub
- Personal Access Tokens (PAT) diperlukan untuk Model GitHub
- Personal Access Tokens (PAT) diperlukan untuk model GitHub
- Token harus disimpan sebagai variabel lingkungan
- Jangan pernah commit token atau kredensial
## Catatan Tambahan
### Audiens Sasaran
### Sasaran Audiens
- Pemula lengkap dalam pengembangan web
- Pelajar dan pembelajar mandiri
- Guru yang menggunakan kurikulum di kelas
- Konten dirancang untuk aksesibilitas dan pembangunan keterampilan bertahap
### Filosofi Pendidikan
### Filosofi Edukasi
- Pendekatan pembelajaran berbasis proyek
- Pemeriksaan pengetahuan yang sering (kuis)
- Latihan coding langsung
- Pemeriksaan pengetahuan sering (kuis)
- Latihan coding praktis
- Contoh aplikasi dunia nyata
- Fokus pada dasar sebelum framework
@ -373,28 +373,28 @@ CO_OP_TRANSLATOR_METADATA:
- Komunitas pembelajar dan kontributor yang aktif
- Pembaruan rutin pada dependensi dan konten
- Isu dan diskusi dipantau oleh maintainer
- Pembaruan terjemahan otomatis via GitHub Actions
- Isu dan diskusi diawasi oleh maintainer
- Pembaruan terjemahan otomatis melalui GitHub Actions
### Sumber Terkait
### Sumber Daya Terkait
- [Modul Microsoft Learn](https://docs.microsoft.com/learn/)
- [Sumber Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](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: Generative AI, Data Science, ML, IoT tersedia
### Bekerja dengan Proyek Tertentu
### Bekerja dengan Proyek Spesifik
Untuk instruksi detail pada proyek individual, lihat file README di:
Untuk instruksi detail proyek individual, lihat file README di:
- `quiz-app/README.md` - aplikasi kuis Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan autentikasi
- `5-browser-extension/README.md` - pengembangan ekstensi peramban
- `6-space-game/README.md` - pengembangan game berbasis canvas
- `9-chat-project/README.md` - proyek asisten chat AI
- `5-browser-extension/README.md` - pengembangan ekstensi browser
- `6-space-game/README.md` - pengembangan permainan canvas
- `9-chat-project/README.md` - proyek asisten obrolan AI
### Struktur Monorepo
Meskipun bukan monorepo tradisional, repositori ini berisi banyak proyek mandiri:
Walaupun bukan monorepo tradisional, repositori ini berisi beberapa proyek independen:
- Setiap pelajaran berdiri sendiri
- Proyek tidak berbagi dependensi
- Kerjakan proyek individual tanpa memengaruhi yang lain
@ -404,5 +404,5 @@ Meskipun bukan monorepo tradisional, repositori ini berisi banyak proyek mandiri
<!-- 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 diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang paling sahih. Untuk informasi penting, disarankan menggunakan 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 berusaha untuk akurasi, harap diingat 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 salah tafsir yang timbul dari penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,38 +1,38 @@
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![Lisensi GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![Kontributor GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![Masalah GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![Permintaan tarik GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Selamat Datang](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Pengamat GitHub](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![Bintang GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Pengembangan Web untuk Pemula - Kurikulum
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!
Pelajari dasar-dasar pengembangan web dengan kursus komprehensif selama 12 minggu dari Microsoft Cloud Advocates. Setiap dari 24 pelajaran membahas JavaScript, CSS, dan HTML melalui proyek langsung seperti terarium, ekstensi browser, dan permainan luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan kemampuan Anda dan optimalkan retensi pengetahuan dengan pedagogi berbasis proyek kami yang efektif. Mulailah perjalanan coding Anda hari ini!
Bergabunglah dengan Komunitas Discord Azure AI Foundry
Bergabung dengan Komunitas Discord Azure AI Foundry
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ikuti langkah-langkah berikut untuk mulai menggunakan sumber daya ini:
1. **Fork Repositori**: Klik [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Bergabunglah dengan Azure AI Foundry Discord dan temui para ahli serta sesama pengembang**](https://discord.com/invite/ByRwuEEgH4)
Ikuti langkah-langkah ini untuk mulai menggunakan sumber daya ini:
1. **Fork Repository**: Klik [![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Bergabung dengan Azure AI Foundry Discord dan temui para ahli serta sesama pengembang**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Dukungan Multi-Bahasa
### 🌐 Dukungan Multibahasa
#### Didukung melalui GitHub Action (Otomatis & Selalu Terbaru)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](./README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](./README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Lebih suka Clone Lokal?**
> **Lebih suka Clone Secara Lokal?**
>
> Repositori ini mencakup 50+ terjemahan bahasa yang secara signifikan menambah ukuran unduhan. Untuk meng-clone tanpa terjemahan, gunakan sparse checkout:
> Repository ini mencakup lebih dari 50 terjemahan bahasa yang secara signifikan meningkatkan ukuran unduhan. Untuk clone tanpa terjemahan, gunakan sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,43 +48,43 @@ Ikuti langkah-langkah berikut untuk mulai menggunakan sumber daya ini:
> 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.
> Ini memberi Anda semua yang diperlukan untuk menyelesaikan kursus dengan waktu unduh yang jauh lebih cepat.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Jika Anda ingin bahasa terjemahan tambahan didukung, daftar lengkapnya ada [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[![Buka di Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Apakah kamu seorang pelajar?_
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.
Kunjungi [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana Anda akan menemukan sumber belajar pemula, paket Pelajar dan bahkan cara mendapatkan voucher sertifikat gratis. Ini adalah halaman yang patut Anda tandai dan cek secara berkala karena kami mengganti konten setiap 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 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.
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 tidak hanya mampu menghasilkan teks tetapi juga dapat membuat dan mengedit file, menjalankan perintah dan lainnya.
### 📣 Pengumuman - _Proyek Baru untuk dibangun menggunakan Generative AI_
### 📣 Pengumuman - _Proyek Baru yang dibuat menggunakan Generative AI_
Proyek Asisten AI baru saja ditambahkan, cek [proyek](./9-chat-project/README.md)
Proyek Asisten AI baru saja ditambahkan, lihat [proyek](./9-chat-project/README.md)
### 📣 Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru saja dirilis
Jangan lewatkan kurikulum Generative AI terbaru kami!
Jangan lewatkan kurikulum Generative AI baru kami!
Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai!
![Background](../../translated_images/id/background.148a8d43afde5730.webp)
![Latar Belakang](../../translated_images/id/background.148a8d43afde5730.webp)
- Pelajaran meliputi semuanya dari dasar hingga RAG.
- Berinteraksi dengan tokoh historis menggunakan GenAI dan aplikasi pendamping kami.
- Pelajaran yang mencakup semuanya dari dasar hingga RAG.
- Berinteraksi dengan karakter sejarah menggunakan GenAI dan aplikasi pendamping kami.
- Narasi yang menyenangkan dan menarik, Anda akan melakukan perjalanan waktu!
![character](../../translated_images/id/character.5c0dd8e067ffd693.webp)
![karakter](../../translated_images/id/character.5c0dd8e067ffd693.webp)
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
Setiap pelajaran mencakup tugas untuk diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk membimbing Anda mempelajari topik seperti:
- Prompting dan rekayasa prompt
- Generasi aplikasi teks dan gambar
- Aplikasi pencarian
Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai!
@ -93,99 +93,99 @@ Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk
## 🌱 Memulai
> **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)!
> **Guru**, kami telah [menyertakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami sangat menghargai umpan balik Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis pra-lecture dan lanjutkan dengan membaca materi kuliah, menyelesaikan berbagai aktivitas dan periksa pemahaman Anda dengan kuis pasca-lecture.
**[Pembelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis sebelum kuliah dan lanjutkan dengan membaca materi kuliah, menyelesaikan berbagai aktivitas dan periksa pemahaman Anda dengan kuis pasca kuliah.
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 meningkatkan pengalaman belajar Anda, hubungkan dengan teman sebaya untuk mengerjakan proyek bersama! Diskusi sangat dianjurkan di [forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) di mana tim moderator kami akan siap menjawab pertanyaan Anda.
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.
Untuk melanjutkan pendidikan Anda, kami sangat menyarankan untuk menjelajahi [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk materi belajar tambahan.
### 📋 Menyiapkan lingkungan Anda
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).
Kurikulum ini memiliki lingkungan pengembangan yang siap digunakan! Saat Anda memulai, Anda dapat memilih menjalankan kurikulum ini 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 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.
#### Buat repository Anda
Untuk memudahkan Anda menyimpan pekerjaan, disarankan untuk membuat salinan sendiri dari repository ini. Anda bisa melakukannya dengan mengklik tombol **Use this template** di bagian atas halaman. Ini akan membuat repository baru di akun GitHub Anda dengan salinan kurikulum.
Ikuti langkah-langkah ini:
1. **Fork Repositori**: Klik tombol "Fork" di pojok kanan atas halaman ini.
2. **Clone Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Fork Repository**: Klik tombol "Fork" di pojok kanan atas halaman ini.
2. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Menjalankan kurikulum di Codespace
Di salinan repositori yang Anda buat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda kerjakan.
Di salinan repository yang Anda buat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda bekerja di sana.
![Codespace](../../translated_images/id/createcodespace.0238bbf4d7a8d955.webp)
#### Menjalankan kurikulum secara lokal di komputer Anda
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.
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 membimbing Anda melalui berbagai opsi untuk masing-masing alat ini agar Anda dapat memilih yang terbaik untuk Anda.
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:
Rekomendasi kami adalah 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) bawaan. Anda dapat mengunduh Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone repositori Anda ke komputer Anda. Anda dapat melakukan ini 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) 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) di dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan perintah berikut, mengganti `<your-repository-url>` dengan URL yang baru saja Anda salin:
```bash
git clone <your-repository-url>
```
2. Buka folder tersebut 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 melakukan ini dengan mengklik **File** > **Open Folder** dan memilih folder yang baru saja Anda clone.
> 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 dalam Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk mempratinjau halaman HTML di 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:
## 📂 Setiap pelajaran termasuk:
- sketchnote opsional
- video pelengkap opsional
- video tambahan opsional
- kuis pemanasan sebelum pelajaran
- pelajaran tertulis
- untuk pelajaran berbasis proyek, panduan langkah demi langkah cara membangun proyek
- untuk pelajaran berbasis proyek, panduan langkah demi langkah tentang cara membangun proyek
- pemeriksaan pengetahuan
- tantangan
- bacaan pelengkap
- penugasan
- bacaan tambahan
- tugas
- [kuis pasca-pelajaran](https://ff-quizzes.netlify.app/web/)
> **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`.
> **Catatan tentang kuis**: Semua kuis terdapat dalam folder Quiz-app, total 48 kuis dengan tiga pertanyaan masing-masing. Mereka 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`.
## 🗃️ Pelajaran
| | Nama Proyek | Konsep yang Diajarkan | Tujuan Pembelajaran | Pelajaran Terkait | Penulis |
| | 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 |
| 01 | Memulai | Pengenalan Pemrograman dan Alat Kerja | Pelajari dasar-dasar di balik sebagian besar bahasa pemrograman dan tentang perangkat lunak yang membantu pengembang profesional melakukan pekerjaan mereka | [Pengenalan Bahasa Pemrograman dan Alat](./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 | [Pengenalan 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 JS | Tipe Data JavaScript | Dasar-dasar tipe data JavaScript | [Tipe Data](./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 | [Fungsi dan Metode](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher |
| 06 | 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 JS | Array dan Loop | Bekerja dengan data menggunakan array dan loop di JavaScript | [Array dan 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 | [Pengenalan 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 | [Pengenalan CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, manipulasi DOM | Bangun JavaScript agar terrarium berfungsi sebagai antarmuka drag/drop, 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) | Membuat Game Mengetik | Pelajari cara menggunakan peristiwa 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 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 pada 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 untuk meningkatkan | [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 untuk membangun game | [Pengenalan Pengembangan Game Lanjutan](./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 | [Menggambar ke Kanvas](./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 dapat bergerak menggunakan koordinat kartesius dan Canvas API | [Memindahkan Elemen](./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 berikan 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 | Lakukan perhitungan matematis 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 mereset 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 Rute dalam Aplikasi Web | Pelajari cara membuat kerangka arsitektur situs web multipage menggunakan routing dan template HTML | [Template HTML dan Rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Membuat 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 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 |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Manajemen Status | Pelajari bagaimana aplikasi Anda mempertahankan status dan cara mengelolanya secara programatik | [Manajemen Status](./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 |
## 🏫 Pedagogi
@ -193,22 +193,22 @@ 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 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.
Program ini mengajarkan dasar-dasar JavaScript, HTML, dan CSS, serta alat dan teknik terbaru yang digunakan oleh pengembang web masa kini. Siswa akan memiliki kesempatan untuk mengembangkan pengalaman langsung dengan membangun game mengetik, terrarium virtual, ekstensi browser ramah lingkungan, game bergaya penyerang luar angkasa, dan aplikasi perbankan untuk bisnis. Pada akhir seri, siswa akan memiliki pemahaman yang solid tentang pengembangan web.
> 🎓 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!
> 🎓 Anda dapat mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai [Jalur Pembelajaran](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
Dengan memastikan 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.
Dengan memastikan konten sesuai dengan proyek, proses pembelajaran menjadi lebih menarik bagi siswa dan retensi konsep akan meningkat. Kami juga menulis beberapa pelajaran awal tentang dasar-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 pada kurikulum ini.
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.
Selain itu, kuis tanpa tekanan sebelum kelas mengatur niat siswa untuk mempelajari topik, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan serta dapat diambil secara penuh atau sebagian. Proyek dimulai dari yang kecil dan menjadi semakin kompleks di akhir siklus 12 minggu.
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)".
Walaupun kami sengaja menghindari pengenalan kerangka kerja JavaScript untuk berkonsentrasi pada keterampilan dasar yang dibutuhkan sebagai pengembang web sebelum mengadopsi kerangka kerja, langkah selanjutnya yang baik setelah menyelesaikan kurikulum ini adalah belajar tentang 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 [Kode Etik](CODE_OF_CONDUCT.md) dan panduan [Kontribusi](CONTRIBUTING.md) kami. Kami menyambut masukan konstruktif Anda!
> Kunjungi [Kode Etik](CODE_OF_CONDUCT.md) dan panduan [Kontribusi](CONTRIBUTING.md) kami. Kami menyambut umpan balik konstruktif Anda!
## 🧭 Akses Offline
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`.
Anda dapat menjalankan dokumentasi ini secara offline dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repo ini, [instal Docsify](https://docsify.js.org/#/quickstart) di mesin lokal Anda, lalu di folder root repo ini, ketik `docsify serve`. Situs web akan disajikan 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).
@ -216,7 +216,7 @@ PDF dari semua pelajaran dapat ditemukan [di sini](https://microsoft.github.io/W
## 🎒 Kursus Lainnya
Tim kami menghasilkan kursus lain! Cek:
Tim kami memproduksi kursus lain! Lihat:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -225,7 +225,7 @@ Tim kami menghasilkan kursus lain! Cek:
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agen
### Azure / Edge / MCP / Agens
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -260,11 +260,11 @@ Tim kami menghasilkan kursus lain! Cek:
## Mendapatkan Bantuan
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.
Jika Anda mengalami kebuntuan 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 dipersilakan dan pengetahuan dibagikan secara bebas.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Jika Anda memiliki umpan balik produk atau menemui kesalahan saat membangun, kunjungi:
Jika Anda memiliki umpan balik produk atau menemukan kesalahan saat membangun kunjungi:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
@ -275,6 +275,6 @@ 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 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.
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk mencapai akurasi, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi penting, disarankan menggunakan terjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau salah tafsir yang timbul dari penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T19:27:15+00:00",
"translation_date": "2026-04-06T16:50:07+00:00",
"source_file": "AGENTS.md",
"language_code": "ms"
},
@ -516,8 +516,8 @@
"language_code": "ms"
},
"README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T12:53:17+00:00",
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T16:45:54+00:00",
"source_file": "README.md",
"language_code": "ms"
},

@ -2,23 +2,23 @@
## Gambaran Projek
Ini adalah repositori kurikulum pendidikan untuk mengajar asas pengembangan 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 adalah kursus lengkap selama 12 minggu yang dibangunkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran amali yang merangkumi JavaScript, CSS, dan HTML.
### Komponen Utama
- **Kandungan Pendidikan**: 24 pelajaran terstruktur yang disusun 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 kuiz dengan 3 soalan setiap satu (penilaian pra/pasca pelajaran)
- **Sokongan Pelbagai Bahasa**: Terjemahan automatik untuk lebih 50 bahasa melalui GitHub Actions
- **Teknologi**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (untuk projek AI)
- **Kandungan Pendidikan**: 24 pelajaran berstruktur yang disusun dalam modul berasaskan projek
- **Projek Praktikal**: Terrarium, Permainan Mengetik, Sambungan Pelayar, Permainan Angkasa, Aplikasi Perbankan, Penyunting Kod, dan Pembantu Sembang AI
- **Kuis Interaktif**: 48 kuis dengan 3 soalan setiap satu (penilaian pra/pasca pelajaran)
- **Sokongan Pelbagai Bahasa**: Terjemahan automatik untuk lebih 50+ bahasa melalui GitHub Actions
- **Teknologi**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (untuk projek AI)
### Seni Bina
### Senibina
- Repositori pendidikan dengan struktur berasaskan pelajaran
- Setiap folder pelajaran mengandungi README, contoh kod, dan penyelesaian
- Projek berdiri sendiri dalam direktori berasingan (quiz-app, pelbagai projek pelajaran)
- Sistem terjemahan menggunakan GitHub Actions (co-op-translator)
- Dokumentasi disediakan melalui Docsify dan tersedia sebagai PDF
- Repositori pendidikan dengan struktur berasaskan pelajaran
- Setiap folder pelajaran mengandungi README, contoh kod, dan penyelesaian
- Projek berdikari di direktori berasingan (quiz-app, pelbagai projek pelajaran)
- Sistem terjemahan menggunakan GitHub Actions (co-op-translator)
- Dokumentasi dihidangkan melalui Docsify dan tersedia sebagai PDF
## Perintah Persediaan
@ -30,17 +30,17 @@ Repositori ini terutamanya untuk penggunaan kandungan pendidikan. Untuk bekerja
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Persediaan Aplikasi Kuis (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Mulakan pelayan pembangunan
npm run build # Bina untuk produksi
npm run dev # Mula pelayan pembangunan
npm run build # Bina untuk pengeluaran
npm run lint # Jalankan ESLint
```
### API Projek Bank (Node.js + Express)
```bash
@ -50,15 +50,15 @@ npm start # Mula pelayan API
npm run lint # Jalankan ESLint
npm run format # Format dengan Prettier
```
### Projek Sambungan Penyemak Imbas
### Projek Sambungan Pelayar
```bash
cd 5-browser-extension/solution
npm install
# Ikuti arahan pemuatan sambungan khusus pelayar
# Ikuti arahan muat naik pelanjutan khusus pelayar
```
### Projek Permainan Angkasa
```bash
@ -66,7 +66,7 @@ cd 6-space-game/solution
npm install
# Buka index.html dalam pelayar atau gunakan Live Server
```
### Projek Sembang (Backend Python)
```bash
@ -75,34 +75,34 @@ pip install openai
# Tetapkan pembolehubah persekitaran GITHUB_TOKEN
python api.py
```
## Aliran Kerja Pembangunan
### Untuk Penyumbang Kandungan
1. **Fork repositori** ke akaun GitHub anda
2. **Clone fork anda** ke mesin tempatan
3. **Buat cabang baru** untuk perubahan anda
4. Buat perubahan pada kandungan pelajaran atau contoh kod
5. Uji sebarang perubahan kod dalam direktori projek berkaitan
6. Hantar pull request mengikut garis panduan sumbangan
1. **Fork repositori** ke akaun GitHub anda
2. **Clone fork anda** secara lokal
3. **Buat cawangan baru** untuk perubahan anda
4. Buat perubahan pada kandungan pelajaran atau contoh kod
5. Uji sebarang perubahan kod dalam direktori projek berkaitan
6. Hantar pull request mengikut panduan sumbangan
### Untuk Pelajar
1. Fork atau clone repositori
2. Navigasi ke direktori pelajaran secara berurutan
3. Baca fail README untuk setiap pelajaran
4. Lengkapkan kuiz pra-pelajaran di https://ff-quizzes.netlify.app/web/
5. Selesaikan contoh kod dalam folder pelajaran
6. Selesaikan tugasan dan cabaran
7. Ambil kuiz pasca-pelajaran
1. Fork atau clone repositori
2. Navigasi ke direktori pelajaran secara berurutan
3. Baca fail README untuk setiap pelajaran
4. Selesaikan kuis pra-pelajaran di https://ff-quizzes.netlify.app/web/
5. Kerjakan contoh kod dalam folder pelajaran
6. Lengkapkan tugasan dan cabaran
7. Ambil kuis pasca-pelajaran
### Pembangunan Secara Langsung
### Pembangunan Langsung
- **Dokumentasi**: Jalankan `docsify serve` di root (port 3000)
- **Aplikasi Kuis**: Jalankan `npm run dev` dalam direktori quiz-app
- **Projek**: Gunakan sambungan VS Code Live Server untuk projek HTML
- **Projek API**: Jalankan `npm start` dalam direktori API masing-masing
- **Dokumentasi**: Jalankan `docsify serve` di root (port 3000)
- **Aplikasi Kuis**: Jalankan `npm run dev` di direktori quiz-app
- **Projek**: Gunakan sambungan Live Server VS Code untuk projek HTML
- **Projek API**: Jalankan `npm start` dalam direktori API masing-masing
## Arahan Ujian
@ -113,170 +113,170 @@ cd quiz-app
npm run lint # Semak untuk isu gaya kod
npm run build # Sahkan binaan berjaya
```
### Ujian API Bank
```bash
cd 7-bank-project/api
npm run lint # Semak masalah gaya kod
npm run lint # Periksa masalah gaya kod
node server.js # Sahkan pelayan bermula tanpa ralat
```
### Pendekatan Ujian Umum
- Ini adalah repositori pendidikan tanpa ujian automatik menyeluruh
- Ujian manual memfokus pada:
- Contoh kod berjalan tanpa ralat
- Pautan dalam dokumentasi berfungsi dengan betul
- Projek dibina dengan jayanya
- Contoh mengikuti amalan terbaik
- Ini adalah repositori pendidikan tanpa ujian automatik menyeluruh
- Ujian manual memberi fokus kepada:
- Contoh kod berjalan tanpa ralat
- Pautan dalam dokumentasi berfungsi dengan betul
- Projek membina dengan jayanya
- Contoh mengikut amalan terbaik
### Semakan Sebelum Penghantaran
### Semakan Pra-penyerahan
- Jalankan `npm run lint` dalam direktori dengan package.json
- Sahkan pautan markdown adalah sah
- Uji contoh kod dalam pelayar atau Node.js
- Semak terjemahan mengekalkan struktur yang betul
- Jalankan `npm run lint` di direktori dengan package.json
- Sahkan pautan markdown adalah sah
- Uji contoh kod dalam pelayar atau Node.js
- Semak terjemahan mengekalkan struktur betul
## Garis Panduan Gaya Kod
### JavaScript
- Gunakan sintaks ES6+ moden
- Ikuti konfigurasi ESLint standard yang disediakan dalam projek
- Gunakan nama pemboleh ubah dan fungsi yang bermakna untuk kejelasan pendidikan
- Tambah komen yang menerangkan konsep untuk pelajar
- Format menggunakan Prettier jika dikonfigurasikan
- Gunakan sintaks ES6+ moden
- Ikuti konfigurasi ESLint standard yang disediakan dalam projek
- Gunakan nama pembolehubah dan fungsi bermakna untuk kejelasan pendidikan
- Tambah komen yang menerangkan konsep untuk pelajar
- Format menggunakan Prettier apabila dikonfigurasi
### HTML/CSS
- Elemen HTML5 semantik
- Prinsip reka bentuk responsif
- Konvensyen penamaan kelas yang jelas
- Komen menerangkan teknik CSS untuk pelajar
- Elemen semantic HTML5
- Prinsip reka bentuk responsif
- Konvensyen nama kelas yang jelas
- Komen menerangkan teknik CSS untuk pelajar
### Python
- Garis panduan gaya PEP 8
- Contoh kod yang jelas dan berpendidikan
- Hint jenis di mana membantu pembelajaran
- Garis panduan gaya PEP 8
- Contoh kod jelas dan pendidikan
- Petunjuk jenis jika membantu pembelajaran
### Dokumentasi Markdown
- Hierarki tajuk yang jelas
- Blok kod dengan spesifikasi bahasa
- Pautan ke sumber tambahan
- Tangkapan skrin dan imej dalam direktori `images/`
- Teks alt untuk imej bagi aksesibiliti
- Hierarki tajuk yang jelas
- Blok kod dengan spesifikasi bahasa
- Pautan ke sumber tambahan
- Tangkapan skrin dan imej dalam direktori `images/`
- Teks alt untuk imej demi aksesibiliti
### Pengurusan Fail
- Pelajaran bernombor secara berurutan (1-getting-started-lessons, 2-js-basics, dsb.)
- Setiap projek mempunyai direktori `solution/` dan biasanya `start/` atau `your-work/`
- Imej disimpan di folder `images/` khusus pelajaran
- Terjemahan dalam struktur `translations/{language-code}/`
- Pelajaran bernombor secara berurutan (1-getting-started-lessons, 2-js-basics, dan lain-lain)
- Setiap projek ada `solution/` dan biasanya `start/` atau `your-work/` direktori
- Imej disimpan dalam folder `images/` khusus pelajaran
- Terjemahan dalam struktur `translations/{language-code}/`
## Pembinaan dan Penyebaran
### Penyebaran Aplikasi Kuis (Azure Static Web Apps)
quiz-app dikonfigurasikan untuk penyebaran Azure Static Web Apps:
quiz-app dikonfigurasi untuk penyebaran Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Membuat folder dist/
# Mengedarkan melalui aliran kerja GitHub Actions pada tekan ke main
npm run build # Mewujudkan folder dist/
# Melaksanakan melalui alur kerja GitHub Actions apabila push ke main
```
Konfigurasi Azure Static Web Apps:
- **Lokasi aplikasi**: `/quiz-app`
- **Lokasi output**: `dist`
- **Aliran kerja**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Konfigurasi Azure Static Web Apps:
- **Lokasi app**: `/quiz-app`
- **Lokasi output**: `dist`
- **Aliran kerja**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Penjanaan PDF Dokumentasi
```bash
npm install # Pasang docsify-to-pdf
npm run convert # Jana PDF dari dokumen
npm run convert # Jana PDF daripada docs
```
### Dokumentasi Docsify
```bash
npm install -g docsify-cli # Pasang Docsify secara global
docsify serve # Hidangkan di localhost:3000
docsify serve # Hidangkan pada localhost:3000
```
### Pembinaan Khusus Projek
### Pembinaan Projek Spesifik
Setiap direktori projek mungkin mempunyai proses binaannya sendiri:
- Projek Vue: `npm run build` mencipta bundel produksi
- Projek statik: Tiada langkah binaan, hidangkan fail terus
Setiap direktori projek mungkin mempunyai proses binaan sendiri:
- Projek Vue: `npm run build` menghasilkan bundel produksi
- Projek statik: Tiada langkah binaan, hidangkan fail secara langsung
## Garis Panduan Pull Request
### Format Tajuk
Gunakan tajuk yang jelas dan deskriptif menunjukkan bidang perubahan:
- `[Quiz-app] Tambah kuiz baru untuk pelajaran X`
- `[Lesson-3] Betulkan kesilapan ejaan dalam projek terrarium`
- `[Translation] Tambah terjemahan Bahasa Sepanyol untuk pelajaran 5`
- `[Docs] Kemas kini arahan persediaan`
Gunakan tajuk jelas dan deskriptif yang menunjukkan kawasan perubahan:
- `[Quiz-app] Tambah kuiz baru untuk pelajaran X`
- `[Pelajaran-3] Betulkan kesilapan ejaan dalam projek terrarium`
- `[Terjemahan] Tambah terjemahan Sepanyol untuk pelajaran 5`
- `[Docs] Kemas kini arahan persediaan`
### Semakan Diperlukan
### Semakan Wajib
Sebelum menghantar PR:
Sebelum menghantar PR:
1. **Kualiti Kod**:
- Jalankan `npm run lint` dalam direktori projek yang terjejas
- Betulkan semua kesalahan dan amaran lint
1. **Kualiti Kod**:
- Jalankan `npm run lint` di direktori projek terlibat
- Betulkan semua ralat dan amaran linting
2. **Pengesahan Binaan**:
- Jalankan `npm run build` jika berkenaan
- Pastikan tiada kesalahan binaan
2. **Pengesahan Binaan**:
- Jalankan `npm run build` jika berkenaan
- Pastikan tiada ralat binaan
3. **Pengujian Pautan**:
- Uji semua pautan markdown
- Sahkan rujukan imej berfungsi
3. **Pengesahan Pautan**:
- Uji semua pautan markdown
- Sahkan rujukan imej berfungsi
4. **Ulasan Kandungan**:
- Semak ejaan dan tatabahasa
- Pastikan contoh kod betul dan berpendidikan
- Sahkan terjemahan mengekalkan maksud asal
4. **Semakan Kandungan**:
- Semak ejaan dan tatabahasa
- Pastikan contoh kod betul dan pendidikan
- Sahkan terjemahan mengekalkan maksud asal
### Keperluan Sumbangan
### Keperluan Penyumbangan
- Setuju dengan Microsoft CLA (semakan automatik pada PR pertama)
- Ikut [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Rujuk [CONTRIBUTING.md](./CONTRIBUTING.md) untuk garis panduan terperinci
- Rujuk nombor isu dalam deskripsi PR jika berkenaan
- Setuju dengan Microsoft CLA (semakan automatik pada PR pertama)
- Ikuti [Kod Etika Sumber Terbuka Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Rujuk [CONTRIBUTING.md](./CONTRIBUTING.md) untuk panduan terperinci
- Rujuk nombor isu dalam penerangan PR jika berkenaan
### Proses Semakan
- PR disemak oleh penyelenggara dan komuniti
- Kejelasan pendidikan diberi keutamaan
- Contoh kod harus mengikuti amalan terbaik semasa
- Terjemahan disemak untuk ketepatan dan kesesuaian budaya
- PR disemak oleh penyelenggara dan komuniti
- Kejelasan pendidikan diberi keutamaan
- Contoh kod harus mengikut amalan terbaik semasa
- Terjemahan disemak dari segi ketepatan dan kesesuaian budaya
## Sistem Terjemahan
### Terjemahan Automatik
- Menggunakan GitHub Actions dengan aliran kerja co-op-translator
- Menterjemah ke lebih 50 bahasa secara automatik
- Fail sumber dalam direktori utama
- Fail terjemahan dalam direktori `translations/{language-code}/`
- Menggunakan GitHub Actions dengan workflow co-op-translator
- Menerjemah ke 50+ bahasa secara automatik
- Fail sumber dalam direktori utama
- Fail terjemahan dalam `translations/{language-code}/` direktori
### Menambah Penambahbaikan Terjemahan Manual
1. Cari fail dalam `translations/{language-code}/`
2. Buat penambahbaikan sambil mengekalkan struktur
3. Pastikan contoh kod kekal berfungsi
4. Uji sebarang kandungan kuiz yang dipersempitkan
1. Cari fail dalam `translations/{language-code}/`
2. Lakukan penambahbaikan sambil mengekalkan struktur
3. Pastikan contoh kod masih berfungsi
4. Uji sebarang kandungan kuiz yang dilokalkan
### Meta Data Terjemahan
### Metadata Terjemahan
Fail diterjemah termasuk pengepala meta data:
Fail terjemahan termasuk pengepala metadata:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -288,121 +288,121 @@ CO_OP_TRANSLATOR_METADATA:
}
-->
```
## Penyahpepijatan dan Penyelesaian Masalah
## Pengesanan Masalah dan Penyelesaian Masalah
### Isu Lazim
**Aplikasi kuis gagal bermula**:
- Semak versi Node.js (disyorkan v14+)
- Padam `node_modules` dan `package-lock.json`, jalankan `npm install` semula
- Semak konflik port (default: Vite guna port 5173)
**Aplikasi kuis gagal mula**:
- Semak versi Node.js (disyorkan v14+)
- Padam `node_modules` dan `package-lock.json`, jalankan `npm install` semula
- Semak konflik port (default: Vite menggunakan port 5173)
**Server API tidak bermula**:
- Pastikan versi Node.js memenuhi minimum (node >=10)
- Semak sama ada port sudah digunakan
- Pastikan semua kebergantungan dipasang dengan `npm install`
**Server API tidak mula**:
- Sahkan versi Node.js memenuhi minimum (node >=10)
- Semak sama ada port sudah digunakan
- Pastikan semua kebergantungan dipasang dengan `npm install`
**Sambungan penyemak imbas gagal dimuat**:
- Semak manifest.json diformat dengan betul
- Semak konsol penyemak imbas untuk ralat
- Ikut arahan pemasangan sambungan khusus penyemak imbas
**Sambungan pelayar tidak dimuatkan**:
- Sahkan manifest.json diformat dengan betul
- Semak konsol pelayar untuk ralat
- Ikut arahan pemasangan sambungan khusus pelayar
**Isu projek sembang Python**:
- Pastikan pakej OpenAI dipasang: `pip install openai`
- Pastikan pembolehubah persekitaran GITHUB_TOKEN diset
- Semak kebenaran akses Model GitHub
**Isu projek chat Python**:
- Pastikan pakej OpenAI dipasang: `pip install openai`
- Sahkan pembolehubah persekitaran GITHUB_TOKEN diset
- Semak kebenaran akses Model GitHub
**Docsify tidak menghidangkan dokumentasi**:
- Pasang docsify-cli secara global: `npm install -g docsify-cli`
- Jalankan dari direktori root repositori
- Semak bahawa `docs/_sidebar.md` wujud
**Docsify tidak menghidang dokumentasi**:
- Pasang docsify-cli secara global: `npm install -g docsify-cli`
- Jalankan dari direktori root repositori
- Semak bahawa `docs/_sidebar.md` wujud
### Petua Persekitaran Pembangunan
- Gunakan VS Code dengan sambungan Live Server untuk projek HTML
- Pasang sambungan ESLint dan Prettier untuk format konsisten
- Gunakan DevTools penyemak imbas untuk debugging JavaScript
- Untuk projek Vue, pasang sambungan Vue DevTools penyemak imbas
- Gunakan VS Code dengan sambungan Live Server untuk projek HTML
- Pasang sambungan ESLint dan Prettier untuk format konsisten
- Gunakan DevTools pelayar untuk pengesanan JavaScript
- Untuk projek Vue, pasang sambungan Vue DevTools pelayar
### Pertimbangan Prestasi
- Bilangan fail terjemahan yang besar (50+ bahasa) menyebabkan klon penuh menjadi besar
- Gunakan shallow clone jika hanya bekerja pada kandungan: `git clone --depth 1`
- Kecualikan terjemahan daripada carian ketika bekerja pada kandungan Inggeris
- Proses binaan mungkin perlahan pada pertama kali (npm install, binaan Vite)
- Bilangan fail terjemahan yang banyak (50+ bahasa) bermakna klon penuh adalah besar
- Gunakan shallow clone jika hanya bekerja pada kandungan: `git clone --depth 1`
- Kecualikan terjemahan daripada carian apabila bekerja pada kandungan Bahasa Inggeris
- Proses binaan mungkin lambat pada larian pertama (npm install, binaan Vite)
## Pertimbangan Keselamatan
### Pembolehubah Persekitaran
- Kekunci API tidak patut dimuat naik ke repositori
- Gunakan fail `.env` (sudah dalam `.gitignore`)
- Dokumentasikan pembolehubah persekitaran diperlukan dalam README projek
- Kekunci API tidak harus pernah dikomit ke repositori
- Gunakan fail `.env` (sudah dalam `.gitignore`)
- Dokumentasikan pembolehubah persekitaran diperlukan dalam README projek
### Projek Python
- Gunakan persekitaran maya: `python -m venv venv`
- Pastikan kebergantungan sentiasa dikemas kini
- Token GitHub patut mempunyai kebenaran minimum yang diperlukan
- Gunakan persekitaran maya: `python -m venv venv`
- Pastikan kebergantungan dikemas kini
- Token GitHub harus mempunyai kebenaran minimum diperlukan
### Akses Model GitHub
- Token Akses Peribadi (PAT) diperlukan untuk Model GitHub
- Token patut disimpan sebagai pembolehubah persekitaran
- Jangan sekali-kali memuat naik token atau kelayakan
- Token Akses Peribadi (PAT) diperlukan untuk Model GitHub
- Token harus disimpan sebagai pembolehubah persekitaran
- Jangan sekali-kali komit token atau kelayakan
## Nota Tambahan
### Sasaran Audiens
### Audiens Sasaran
- Pemula sepenuhnya dalam pembangunan web
- Pelajar dan pembelajaran kendiri
- Guru yang menggunakan kurikulum dalam bilik darjah
- Kandungan direka untuk aksesibiliti dan pembangunan kemahiran berperingkat
- Pemula lengkap dalam pembangunan web
- Pelajar dan pembelajar kendiri
- Guru yang menggunakan kurikulum dalam bilik darjah
- Kandungan direka untuk aksesibiliti dan pembinaan kemahiran secara berperingkat
### Falsafah Pendidikan
- Pendekatan pembelajaran berasaskan projek
- Pemeriksaan pengetahuan yang kerap (kuiz)
- Latihan pengkodan praktikal
- Contoh penggunaan dunia sebenar
- Fokus pada asas sebelum kerangka kerja
- Pendekatan pembelajaran berasaskan projek
- Pemeriksaan ilmu yang kerap (kuis)
- Latihan pengkodan amali
- Contoh aplikasi dunia nyata
- Fokus pada asas sebelum kerangka kerja
### Penyelenggaraan Repositori
- Komuniti pelajar dan penyumbang yang aktif
- Kemas kini berkala pada kebergantungan dan kandungan
- Isu dan perbincangan dipantau oleh penyelenggara
- Kemaskini terjemahan automatik melalui GitHub Actions
- Komuniti pembelajar dan penyumbang yang aktif
- Kemas kini berkala ke kebergantungan dan kandungan
- Isu dan perbincangan dipantau oleh penyelenggara
- Kemas kini terjemahan automatik melalui GitHub Actions
### Sumber Berkaitan
- [Modul Microsoft Learn](https://docs.microsoft.com/learn/)
- [Sumber Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) disyorkan untuk pelajar
- Kursus tambahan: AI Generatif, Sains Data, ML, kurikulum IoT tersedia
- [Modul Microsoft Learn](https://docs.microsoft.com/learn/)
- [Sumber Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [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, rujuk fail README dalam:
- `quiz-app/README.md` - aplikasi kuiz Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan pengesahan
- `5-browser-extension/README.md` - pembangunan sambungan penyemak imbas
- `6-space-game/README.md` - pembangunan permainan berasaskan Canvas
- `9-chat-project/README.md` - projek pembantu sembang AI
Untuk arahan terperinci mengenai projek individu, rujuk fail README dalam:
- `quiz-app/README.md` - aplikasi kuis Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan pengesahan
- `5-browser-extension/README.md` - pembangunan sambungan pelayar
- `6-space-game/README.md` - pembangunan permainan berasaskan canvas
- `9-chat-project/README.md` - projek pembantu sembang AI
### Struktur Monorepo
Walaupun bukan monorepo tradisional, repositori ini mengandungi pelbagai projek bebas:
- Setiap pelajaran berdiri sendiri
- Projek tidak berkongsi kebergantungan
- Bekerja pada projek individu tanpa menjejaskan projek lain
- Clone keseluruhan repo untuk pengalaman kurikulum penuh
Walaupun bukan monorepo tradisional, repositori ini mengandungi pelbagai projek bebas:
- Setiap pelajaran adalah berdikari
- Projek tidak berkongsi kebergantungan
- Bekerja pada projek individu tanpa menjejaskan projek lain
- Klon keseluruhan repo untuk pengalaman kurikulum penuh
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila ambil maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya hendaklah dianggap sebagai sumber yang sahih. Untuk maklumat penting, terjemahan profesional oleh manusia adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila diberi perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidakakuratan. Dokumen asal dalam bahasa asalnya hendaklah dianggap sebagai sumber yang sahih. Untuk maklumat kritikal, terjemahan profesional oleh manusia adalah disyorkan. Kami tidak bertanggungjawab terhadap sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -12,27 +12,27 @@
# Pembangunan Web untuk Pemula - Kurikulum
Pelajari asas-asas pembangunan web dengan kursus komprehensif 12-minggu oleh Microsoft Cloud Advocates. Setiap 24 pelajaran menyelami JavaScript, CSS, dan HTML melalui projek praktikal seperti terrarium, sambungan pelayar, dan permainan angkasa lepas. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimalkan penyerapan pengetahuan dengan pedagogi berasaskan projek kami yang efektif. Mula perjalanan pengkodan anda hari ini!
Pelajari asas pembangunan web dengan kursus komprehensif 12 minggu kami oleh Microsoft Cloud Advocates. Setiap 24 pelajaran menyelami JavaScript, CSS, dan HTML melalui projek praktikal seperti terrarium, sambungan pelayar, dan permainan angkasa. Ikuti kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimakan pengekalan ilmu dengan pedagogi berasaskan projek kami yang berkesan. Mulakan perjalanan pengkodan anda hari ini!
Sertai Komuniti Discord Azure AI Foundry
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ikuti langkah-langkah berikut untuk bermula menggunakan sumber ini:
Ikuti langkah-langkah berikut untuk memulakan menggunakan sumber ini:
1. **Fork Repositori**: Klik [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klon Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Sertai Discord Azure AI Foundry dan jumpa pakar serta pembangun lain**](https://discord.com/invite/ByRwuEEgH4)
2. **Clone Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Sertai Azure AI Foundry Discord dan temui pakar serta pembangun lain**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Sokongan Pelbagai Bahasa
#### Disokong melalui GitHub Action (Automatik & Sentiasa Terkini)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](./README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
[Arab](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgaria](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Cina (Dipermudahkan)](../zh-CN/README.md) | [Cina (Tradisional, Hong Kong)](../zh-HK/README.md) | [Cina (Tradisional, Macau)](../zh-MO/README.md) | [Cina (Tradisional, Taiwan)](../zh-TW/README.md) | [Croatia](../hr/README.md) | [Czech](../cs/README.md) | [Denmark](../da/README.md) | [Belanda](../nl/README.md) | [Estonia](../et/README.md) | [Finland](../fi/README.md) | [Perancis](../fr/README.md) | [Jerman](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungary](../hu/README.md) | [Indonesia](../id/README.md) | [Itali](../it/README.md) | [Jepun](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korea](../ko/README.md) | [Lithuania](../lt/README.md) | [Melayu](./README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Pidgin Nigeria](../pcm/README.md) | [Norway](../no/README.md) | [Farsi (Parsi)](../fa/README.md) | [Poland](../pl/README.md) | [Portugis (Brazil)](../pt-BR/README.md) | [Portugis (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romania](../ro/README.md) | [Rusia](../ru/README.md) | [Serbia (Sirilik)](../sr/README.md) | [Slovakia](../sk/README.md) | [Slovenia](../sl/README.md) | [Sepanyol](../es/README.md) | [Swahili](../sw/README.md) | [Sweden](../sv/README.md) | [Tagalog (Filipina)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turki](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnam](../vi/README.md)
> **Lebih suka Klon Secara Tempatan?**
> **Lebih suka Clone Secara Tempatan?**
>
> Repositori ini termasuk lebih 50+ terjemahan bahasa yang secara signifikan meningkatkan saiz muat turun. Untuk klon tanpa terjemahan, gunakan sparse checkout:
> Repositori ini merangkumi lebih daripada 50 terjemahan bahasa yang meningkatkan saiz muat turun dengan ketara. Untuk clone tanpa terjemahan, gunakan sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,89 +48,93 @@ Ikuti langkah-langkah berikut untuk bermula menggunakan sumber ini:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Ini memberikan anda segala yang anda perlukan untuk menyelesaikan kursus dengan muat turun yang jauh lebih pantas.
> Ini memberi anda semua yang anda perlukan untuk melengkapkan kursus dengan muat turun lebih pantas.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Jika anda ingin bahasa terjemahan tambahan disokong, senarai disediakan [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Adakah anda seorang pelajar?_
#### 🧑‍🎓 _Adakah anda pelajar?_
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.
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, Pakej Pelajar dan juga cara untuk mendapatkan baucar sijil percuma. Ini adalah halaman yang anda perlu tandai dan semak dari semasa ke semasa kerana kandungan akan ditukar setiap bulan.
### 📣 Pengumuman - Cabaran mod Agen GitHub Copilot baru untuk diselesaikan!
### 📣 Pengumuman - Cabaran Mod Ejen GitHub Copilot Baru untuk diselesaikan!
Cabaran Baru ditambah, cari "GitHub Copilot Agent Challenge 🚀" dalam kebanyakan bab. Itu adalah cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan mod Agen. Jika anda belum pernah menggunakan mod Agen, ia bukan sahaja mampu menjana teks tetapi juga boleh mencipta dan menyunting fail, menjalankan arahan dan banyak lagi.
Cabaran Baru ditambah, cari "Cabaran Ejen GitHub Copilot 🚀" dalam kebanyakan bab. Ini adalah cabaran baharu untuk anda selesaikan menggunakan GitHub Copilot dan mod Ejen. Jika anda belum pernah menggunakan mod Ejen sebelum ini, ia mampu bukan sahaja menjana teks tetapi juga mencipta dan mengedit fail, menjalankan arahan dan banyak lagi.
### 📣 Pengumuman - _Projek Baru untuk dibina menggunakan Generative AI_
### 📣 Pengumuman - _Projek Baru untuk dibina menggunakan Generative AI_
Projek Pembantu AI baru telah ditambah, semak [projek](./9-chat-project/README.md)
Projek Pembantu AI baru sahaja ditambah, semak [projek](./9-chat-project/README.md)
### 📣 Pengumuman - _Kurikulum Baru_ mengenai Generative AI untuk JavaScript baru sahaja dikeluarkan
### 📣 Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru sahaja dikeluarkan
Jangan terlepas kurikulum Generative AI baru kami!
Jangan ketinggalan kurikulum baru Generative AI kami!
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk bermula!
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulakan!
![Background](../../translated_images/ms/background.148a8d43afde5730.webp)
- Pelajaran merangkumi segala-galanya dari asas hingga RAG.
- Berinteraksi dengan watak sejarah menggunakan GenAI dan aplikasi pendamping kami.
- Naratif yang menyeronokkan dan menarik, anda akan 'mengembara masa'!
- Naratif yang menyeronokkan dan menarik, anda akan mengembara masa!
![character](../../translated_images/ms/character.5c0dd8e067ffd693.webp)
Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda mempelajari topik seperti:
- Prompting dan kejuruteraan prompt
Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda dalam topik seperti:
- Prompting dan kejuruteraan arahan
- Penjanaan aplikasi teks dan imej
- Aplikasi pencarian
- Aplikasi carian
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulakan!
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)!
> **Guru-guru**, kami telah [menyertakan beberapa cadangan](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami ingin mendapatkan maklum balas anda [di forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulakan dengan kuiz pra-ceramah dan teruskan dengan membaca bahan ceramah, melengkapkan pelbagai aktiviti dan periksa kefahaman anda dengan kuiz pasca-ceramah.
**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulakan dengan kuiz pra-ceramah dan ikuti dengan membaca bahan kuliah, melengkapkan pelbagai aktiviti dan periksa pemahaman anda dengan kuiz pasca-ceramah.
Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan sekelas untuk bekerjasama dalam projek bersama! Perbincangan digalakkan di [forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) di mana pasukan moderator kami akan tersedia untuk menjawab soalan anda.
Untuk meningkatkan pengalaman pembelajaran anda, berhubunglah dengan rakan-rakan anda untuk bekerja pada 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.
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.
Untuk memajukan pendidikan anda, kami sangat mengesyorkan meneroka [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan pembelajaran tambahan.
### 📋 Menyediakan persekitaran anda
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).
Kurikulum ini mempunyai persekitaran pembangunan yang sudah siap! Semasa anda mula, anda boleh memilih untuk menjalankan kurikulum di [Codespace](https://github.com/features/codespaces/) (_persekitaran berasaskan pelayar, tiada pemasangan diperlukan_), atau secara tempatan di komputer anda menggunakan penyunting teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Cipta repositori anda
Untuk memudahkan anda menyimpan kerja anda, disyorkan anda 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.
Untuk memudahkan anda menyimpan kerja anda, disyorkan anda membuat salinan sendiri repositori ini. Anda boleh lakukan ini dengan mengklik butang **Use this template** di bahagian atas halaman. Ini akan mencipta repositori baru di akaun GitHub anda dengan salinan kurikulum.
Ikuti langkah berikut:
1. **Fork Repositori**: Klik pada butang "Fork" di sudut atas-kanan halaman ini.
2. **Klon Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Ikut langkah ini:
1. **Fork Repositori**: Klik butang "Fork" di penjuru kanan atas halaman ini.
2. **Clone Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Menjalankan kurikulum dalam Codespace
#### Menjalankan kurikulum di Codespace
Dalam salinan repositori ini yang anda cipta, klik butang **Code** dan pilih **Open with Codespaces**. Ini akan mencipta Codespace baru untuk anda bekerja.
Dalam salinan repositori yang anda cipta, klik butang **Code** dan pilih **Open with Codespaces**. Ini akan mencipta Codespace baru untuk anda bekerja.
![Codespace](../../translated_images/ms/createcodespace.0238bbf4d7a8d955.webp)
#### Menjalankan kurikulum secara tempatan pada komputer anda
#### Menjalankan kurikulum secara tempatan di komputer anda
Untuk menjalankan kurikulum ini secara tempatan pada komputer anda, anda memerlukan penyunting teks, pelayar dan alat baris perintah. Pelajaran pertama kami, [Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan](../../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.
Untuk menjalankan kurikulum ini secara tempatan di komputer anda, anda memerlukan penyunting teks, pelayar dan alat baris arahan. Pelajaran pertama kami, [Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan membimbing anda melalui pelbagai pilihan untuk setiap alat agar anda memilih yang paling sesuai untuk anda.
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:
Cadangan kami ialah 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 melakukan ini dengan mengklik butang **Code** dan menyalin URL:
[CodeSpace](./images/createcodespace.png)
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan arahan berikut, menggantikan `<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, gantikan `<your-repository-url>` dengan URL yang baru anda salin:
```bash
git clone <your-repository-url>
```
2. Buka folder tersebut dalam Visual Studio Code. Anda boleh melakukannya dengan mengklik **File** > **Open Folder** dan memilih folder yang baru sahaja anda klon.
2. Buka folder dalam Visual Studio Code. Anda boleh melakukan ini dengan mengklik **File** > **Open Folder** dan memilih folder yang baru anda klon.
> Sambungan Visual Studio Code yang disyorkan:
>
@ -141,47 +145,47 @@ Cadangan kami adalah untuk menggunakan [Visual Studio Code](https://code.visuals
- sketchnote pilihan
- video tambahan pilihan
- kuiz pemanasan sebelum pelajaran
- kuiz pemanasan pra-pelajaran
- pelajaran bertulis
- untuk pelajaran berasaskan projek, panduan langkah demi langkah tentang cara membina projek
- semakan pengetahuan
- cabaran
- pemeriksaan pengetahuan
- satu cabaran
- bacaan tambahan
- tugasan
- [kuiz selepas pelajaran](https://ff-quizzes.netlify.app/web/)
- [kuiz pasca-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 dipasang di Azure; ikut arahan dalam folder `quiz-app`.
> **Nota tentang kuiz**: Semua kuiz terkandung dalam folder Quiz-app, jumlah 48 kuiz 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; ikut arahan dalam folder `quiz-app`.
## 🗃️ Pelajaran
| | Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Berkaitan | Pengarang |
| | Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Berpaut | 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 |
| 01 | Bermula | Pengenalan kepada Pengaturcaraan dan Alat-alat Perdagangan | Pelajari asas-asas yang mendasari kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan tugas mereka | [Pengenalan Kepada Bahasa Pengaturcaraan dan Alat-alat Perdagangan](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Bermula | Asas GitHub, termasuk bekerja dengan pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain pada kod asas | [Pengenalan kepada GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Bermula | Aksesibiliti | Pelajari asas aksesibiliti web | [Asas Aksesibiliti](./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 |
| 07 | Asas JS | Tatasusun dan Gelung | Bekerja dengan data menggunakan tatasusun dan gelung dalam JavaScript | [Tatasusun dan Gelung](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktik | 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 Praktik | Bina CSS untuk menghias 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 |
| 11 | [Permainan Taip](./4-typing-game/solution/README.md) | Bina Permainan Taip | Pelajari cara menggunakan acara papan kekunci untuk menggerakkan logik aplikasi JavaScript anda | [Pengaturcaraan Berpandukan 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 bagaimana 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) | Bina borang, memanggil API dan menyimpan pemboleh ubah dalam penyimpanan tempatan | Bina elemen JavaScript bagi sambungan pelayar anda untuk memanggil API menggunakan pemboleh ubah yang disimpan dalam penyimpanan tempatan | [API, Borang, dan Penyimpanan 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 Lebih Lanjut dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta corak Pub/Sub, sebagai persiapan 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, 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 sekitar skrin | Temui cara elemen memperoleh pergerakan menggunakan koordinat kartesian 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 pertembungan | Buat elemen bertembung dan bertindak balas antara satu sama lain menggunakan tekan kekunci dan sediakan fungsi had masa untuk memastikan prestasi permainan | [Pengesanan Pertembungan](./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 | [Keadaan Penamat](./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 bagaimana 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 | [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 Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi anda, cara mengambil, menyimpan, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Konsep Pengurusan Negeri | Pelajari bagaimana aplikasi anda mengekalkan negeri dan cara menguruskannya secara berprogram | [Pengurusan Negeri](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Kod Pelayar/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 sendiri | [Projek Pembantu AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogi
@ -189,21 +193,22 @@ Kurikulum kami direka dengan dua prinsip pedagogi utama:
* pembelajaran berasaskan projek
* kuiz kerap
Program ini mengajarkan asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web masa kini. Pelajar akan berpeluang mengembangkan pengalaman secara langsung dengan membina permainan menaip, terrarium maya, pelanjutan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Pada akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh mengenai pembangunan web.
Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web hari ini. Pelajar akan berpeluang membangunkan pengalaman praktikal dengan membina permainan menaip, terrarium maya, sambungan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Menjelang akhir siri ini, pelajar akan memperoleh pemahaman 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!
> 🎓 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!
Dengan memastikan kandungan selaras dengan projek, proses menjadi lebih menarik bagi pelajar dan pengekalan konsep akan dipertingkatkan. Kami juga menulis beberapa pelajaran permulaan dalam asas JavaScript untuk memperkenalkan konsep, dipadankan dengan video dari koleksi video tutorial "[Siri Permulaan ke: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa pengarangnya turut menyumbang kepada kurikulum ini.
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.
Selain itu, kuiz berisiko rendah sebelum kelas menetapkan niat pelajar terhadap pembelajaran sesuatu topik, manakala kuiz kedua selepas kelas memastikan pengekalan lanjut. Kurikulum ini direka agar fleksibel dan menyeronokkan serta boleh diambil sepenuhnya atau sebahagian. Projek bermula dari kecil dan menjadi semakin kompleks menjelang akhir kitaran 12 minggu.
Selain itu, kuiz sama ada ringkas sebelum kelas menetapkan niat pelajar terhadap pembelajaran topik, sementara kuiz kedua selepas kelas memastikan pemahaman lebih lanjut. Kurikulum ini direka untuk menjadi fleksibel dan menyeronokkan serta boleh diambil secara keseluruhan atau sebahagian. Projek bermula kecil dan menjadi semakin rumit pada penghujung kitaran 12 minggu.
Walaupun kami sengaja mengelakkan memperkenalkan rangka kerja JavaScript untuk menumpukan kepada kemahiran asas yang diperlukan sebagai pembangun web sebelum menggunakan rangka kerja, langkah seterusnya yang baik untuk melengkapkan kurikulum ini adalah mempelajari Node.js melalui koleksi video lain: "[Siri Permulaan ke: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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 [Penyumbang](CONTRIBUTING.md) kami. Kami mengalu-alukan maklum balas membina anda!
> 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 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`.
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 akar repositori ini, taip `docsify serve`. Laman web akan dihidangkan pada port 3000 di localhost anda: `localhost:3000`.
## 📘 PDF
PDF bagi semua pelajaran boleh didapati [di sini](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
@ -211,7 +216,7 @@ PDF bagi semua pelajaran boleh didapati [di sini](https://microsoft.github.io/We
## 🎒 Kursus Lain
Pasukan kami menghasilkan kursus lain! Lihat:
Pasukan kami menghasilkan kursus lain! Semak:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -220,7 +225,7 @@ Pasukan kami menghasilkan kursus lain! Lihat:
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agen
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -255,11 +260,11 @@ Pasukan kami menghasilkan kursus lain! Lihat:
## Mendapatkan Bantuan
Jika anda tersekat atau mempunyai sebarang pertanyaan tentang membina aplikasi AI. Sertai pelajar lain dan pembangun berpengalaman dalam perbincangan tentang MCP. Ia adalah komuniti sokongan di mana soalan dialu-alukan dan pengetahuan dikongsi dengan bebas.
Jika anda tersekat atau mempunyai sebarang soalan tentang membina aplikasi AI. Sertai para pelajar lain dan pembangun berpengalaman dalam perbincangan tentang MCP. Ia adalah komuniti yang menyokong di mana soalan dialu-alukan dan ilmu dikongsi dengan bebas.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Jika anda mempunyai maklum balas produk atau ralat semasa membina, lawati:
Jika anda mempunyai maklum balas produk atau ralat semasa membina lawati:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
@ -270,6 +275,6 @@ 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 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.
**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 maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya hendaklah 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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-27T19:28:22+00:00",
"translation_date": "2026-04-06T16:51:17+00:00",
"source_file": "AGENTS.md",
"language_code": "tl"
},
@ -516,8 +516,8 @@
"language_code": "tl"
},
"README.md": {
"original_hash": "a2c9eed480687319517c08a6319e5536",
"translation_date": "2026-03-06T12:59:29+00:00",
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T16:47:59+00:00",
"source_file": "README.md",
"language_code": "tl"
},

@ -2,27 +2,27 @@
## Project Overview
Ito ay isang edukasyonal na repositoryo ng kurikulum para sa pagtuturo ng mga pundasyon ng pag-develop ng web sa mga nagsisimula. Ang kurikulum ay isang komprehensibong 12-linggong kurso na binuo ng Microsoft Cloud Advocates, na may 24 na hands-on na mga aralin na sumasaklaw sa JavaScript, CSS, at HTML.
Ito ay isang edukasyonal na repositoryo ng kurikulum para sa pagtuturo ng mga pundasyon ng web development sa mga nagsisimula. Ang kurikulum ay isang komprehensibong 12-linggong kurso na binuo ng Microsoft Cloud Advocates, na may 24 na hands-on na aralin na sumasaklaw sa JavaScript, CSS, at HTML.
### Key Components
- **Nilalamang Edukasyonal**: 24 na istrukturadong mga aralin na inayos sa mga project-based na mga module
- **Praktikal na mga Proyekto**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, at AI Chat Assistant
- **Interaktibong mga Pagsusulit**: 48 na pagsusulit na may tig-3 tanong bawat isa (pre/post-lesson assessments)
- **Suporta sa Maramihang Wika**: Automated na mga pagsasalin para sa 50+ na mga wika sa pamamagitan ng GitHub Actions
- **Nilalamang Pang-edukasyon**: 24 na istrukturadong aralin na inayos sa mga module batay sa proyekto
- **Mga Praktikal na Proyekto**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, at AI Chat Assistant
- **Mga Interactive na Quiz**: 48 na quiz na may tig-3 tanong bawat isa (pre/post-lesson assessments)
- **Suporta sa Maramihang Wika**: Awtomatikong pagsasalin para sa 50+ na wika gamit ang GitHub Actions
- **Mga Teknolohiya**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para sa mga AI na proyekto)
### Architecture
- Edukasyonal na repositoryo na may lesson-based na istruktura
- Edukasyonal na repositoryo na may lesson-based na estruktura
- Bawat folder ng aralin ay naglalaman ng README, mga halimbawa ng code, at mga solusyon
- Mga standalone na proyekto sa hiwalay na mga direktoryo (quiz-app, iba't ibang mga lesson na proyekto)
- Mga standalone na proyekto sa hiwalay na mga direktoryo (quiz-app, iba't ibang proyekto ng aralin)
- Sistema ng pagsasalin gamit ang GitHub Actions (co-op-translator)
- Dokumentasyon na isinusilbi sa pamamagitan ng Docsify at available bilang PDF
- Dokumentasyon na ipinapakita sa pamamagitan ng Docsify at available bilang PDF
## Setup Commands
Ang repositoryong ito ay pangunahing para sa pagkonsumo ng nilalamang edukasyonal. Para sa pagtatrabaho sa mga tiyak 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 # Bumuo 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 tagubilin sa pag-load ng extension na tiyak sa browser
# Sundin ang mga tagubilin para sa pag-load ng extension na tiyak sa browser
```
### Space Game Projects
@ -80,28 +80,28 @@ python api.py
### Para sa mga Content Contributors
1. **I-fork ang repositoryo** sa iyong GitHub account
1. **I-fork ang repository** sa iyong GitHub account
2. **I-clone ang iyong fork** nang lokal
3. **Gumawa ng bagong sangay (branch)** para sa iyong mga pagbabago
3. **Gumawa ng bagong branch** para sa iyong mga pagbabago
4. Gumawa ng mga pagbabago sa nilalaman ng aralin o mga halimbawa ng code
5. Subukan ang anumang pagbabago sa code sa mga kaukulang direktoryo ng proyekto
6. Mag-submit ng mga pull request alinsunod sa mga patakaran sa kontribusyon
5. Subukan ang anumang mga pagbabago sa code sa mga kaukulang direktoryo ng proyekto
6. Mag-submit ng pull request alinsunod sa mga panuntunan ng kontribusyon
### Para sa mga Nag-aaral
### Para sa mga Learners
1. I-fork o i-clone ang repositoryo
2. Mag-navigate 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. Gawin ang mga halimbawa ng code sa mga folder ng aralin
6. Kumpletuhin ang mga takdang-aralin at hamon
7. Kumuha ng mga post-lesson quizzes
1. Mag-fork o mag-clone ng repositoryo
2. Pumunta sa mga direktoryo ng aralin nang sunud-sunod
3. Basahin ang mga README na file para sa bawat aralin
4. Kumpletuhin ang mga pre-lesson quiz sa https://ff-quizzes.netlify.app/web/
5. Gawing ang mga halimbawa ng code sa mga folder ng aralin
6. Tapusin ang mga assignment at hamon
7. Kunin ang mga post-lesson quiz
### Live Development
- **Dokumentasyon**: Patakbuhin ang `docsify serve` sa root (port 3000)
- **Quiz App**: Patakbuhin ang `npm run dev` sa quiz-app na direktoryo
- **Mga Proyekto**: Gumamit ng VS Code Live Server extension para sa mga HTML na proyekto
- **Quiz App**: Patakbuhin ang `npm run dev` sa direktoryo ng quiz-app
- **Mga Proyekto**: Gamitin ang VS Code Live Server extension para sa mga HTML na proyekto
- **API Projects**: Patakbuhin ang `npm start` sa kaukulang mga direktoryo ng API
## Testing Instructions
@ -110,7 +110,7 @@ python api.py
```bash
cd quiz-app
npm run lint # Suriin ang mga isyu sa istilo ng code
npm run lint # Suriin ang mga isyu sa estilo ng code
npm run build # Tiyakin na matagumpay ang build
```
@ -118,63 +118,63 @@ npm run build # Tiyakin na matagumpay ang build
```bash
cd 7-bank-project/api
npm run lint # Suriin ang mga isyu sa estilo ng code
npm run lint # Suriin ang mga isyu sa istilo ng code
node server.js # Tiyakin na nagsisimula ang server nang walang mga error
```
### General Testing Approach
- Ito ay isang edukasyonal na repositoryo na walang komprehensibong automated tests
- Manual na pagsusuri ay nakatuon sa:
- Ito ay isang edukasyonal na repositoryo na walang kumpletong automated tests
- Manual testing ay nakatuon sa:
- Mga halimbawa ng code na tumatakbo nang walang error
- Mga link sa dokumentasyon na gumagana nang tama
- Matagumpay na pagtatapos ng mga build ng proyekto
- Ang mga halimbawa ay sumusunod sa pinakamahusay na mga kasanayan
- Mga link sa dokumentasyon ay gumagana nang tama
- Proyekto ay matagumpay na na-build
- Mga halimbawa ay sumusunod sa pinakamahusay na kasanayan
### Pre-submission Checks
- Patakbuhin ang `npm run lint` sa mga direktoryo na may package.json
- Suriin ang mga markdown link kung wasto
- Siguraduhing ang mga markdown link ay valid
- Subukan ang mga halimbawa ng code sa browser o Node.js
- Suriin na ang mga pagsasalin ay napanatili ang tamang istruktura
- Suriin na ang mga pagsasalin ay nagpapanatili ng tamang estruktura
## Code Style Guidelines
### JavaScript
- Gamitin ang modernong ES6+ na sintaks
- Sundan ang karaniwang konfigurasyon ng ESLint na ibinigay sa mga proyekto
- Gumamit ng makahulugang mga pangalan ng variable at function para sa kalinawan sa edukasyon
- Gumamit ng modernong ES6+ na sintaks
- Sundan ang standard na ESLint configurations na ibinigay sa mga proyekto
- Gumamit ng makahulugang pangalan ng mga variable at function para sa kalinawan sa edukasyon
- Magdagdag ng mga komento na nagpapaliwanag ng mga konsepto para sa mga nag-aaral
- I-format gamit ang Prettier kung saan naka-configure
### HTML/CSS
- Mga semantic na elemento ng HTML5
- Semantic na HTML5 na mga elemento
- Mga prinsipyo ng responsive design
- Malinaw na mga convention sa pangalan ng klase
- Malinaw na klaseng pagnenaming mga kombensiyon
- Mga komento na nagpapaliwanag ng mga teknik sa CSS para sa mga nag-aaral
### Python
- Mga gabay sa estilo ng PEP 8
- PEP 8 na mga gabay sa estilo
- Malinaw, edukasyonal na mga halimbawa ng code
- Mga type hint kung makakatulong sa pagkatuto
- Mga type hint kung makakatulong sa pag-aaral
### Markdown Documentation
- Malinaw na hierarchy ng mga heading
- Mga blokeng code na may pagtukoy ng wika
- Mga code block na may pagtukoy ng wika
- Mga link sa karagdagang mga mapagkukunan
- Mga screenshot at mga imahe sa mga direktoryo ng `images/`
- Mga screenshot at mga larawan sa `images/` na mga direktoryo
- Alt text para sa mga larawan para sa accessibility
### File Organization
- Mga aralin na may bilang na sunud-sunod (1-getting-started-lessons, 2-js-basics, atbp.)
- Bawat proyekto ay may mga direktoryo na `solution/` at madalas ay `start/` o `your-work/`
- Mga imahe ay iniimbak sa lesson-specific na mga "images/" na folder
- Mga pagsasalin sa istruktura `translations/{language-code}/`
- Mga aralin na naka-numero nang sunud-sunod (1-getting-started-lessons, 2-js-basics, atbp.)
- Bawat proyekto ay may `solution/` at madalas ay `start/` o `your-work/` na mga direktoryo
- Mga larawan na nakaimbak sa aralin-nakatuong mga folder na `images/`
- Mga pagsasalin sa `translations/{language-code}/` na istruktura
## Build and Deployment
@ -184,8 +184,8 @@ Ang quiz-app ay naka-configure para sa Azure Static Web Apps deployment:
```bash
cd quiz-app
npm run build # Lumilikha ng dist/ folder
# Nagdedeploy gamit ang GitHub Actions workflow sa push sa main
npm run build # Lumilikha ng folder na dist/
# Nagde-deploy gamit ang GitHub Actions workflow sa push sa main
```
Azure Static Web Apps configuration:
@ -203,80 +203,80 @@ npm run convert # Gumawa ng PDF mula sa docs
### Docsify Documentation
```bash
npm install -g docsify-cli # I-install ang Docsify nang global
docsify serve # Ihain sa localhost:3000
npm install -g docsify-cli # I-install ang Docsify nang globally
docsify serve # I-serve sa localhost:3000
```
### Project-specific Builds
Maaaring may sariling proseso ng build bawat direktoryo ng proyekto:
- Vue projects: `npm run build` lumilikha ng mga production bundle
- Static projects: Walang build step, direkta na mag-serve ng mga file
Bawat direktoryo ng proyekto ay maaaring may sarili nitong proseso ng pag-build:
- Vue projects: `npm run build` ay lumilikha ng production bundles
- Static projects: Walang build step, direktang nagseserbisyo ng mga file
## Pull Request Guidelines
### Title Format
Gumamit ng malinaw, deskriptibong mga pamagat na nagpapahiwatig 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`
Gumamit ng malinaw, deskriptibong mga titulo na nagpapakita ng bahagi ng pagbabago:
- `[Quiz-app] Magdagdag ng bagong quiz para sa aralin X`
- `[Lesson-3] Ayusin ang typo sa terrarium na proyekto`
- `[Translation] Magdagdag ng pagsasalin sa Spanish para sa aralin 5`
- `[Docs] I-update ang mga tagubilin sa setup`
### Required Checks
Bago magsumite ng PR:
1. **Kalidad ng Code**:
- Patakbuhin ang `npm run lint` sa mga direktoryo ng apektadong proyekto
- Ayusin ang lahat ng linting errors at warnings
- Patakbuhin ang `npm run lint` sa mga naapektuhang direktoryo ng proyekto
- Ayusin lahat ng linting errors at warnings
2. **Pag-verify ng Build**:
2. **Build Verification**:
- Patakbuhin ang `npm run build` kung naaangkop
- Siguraduhin na walang mga error sa build
- Siguraduhing walang error sa build
3. **Pag-validate ng Link**:
- Subukan lahat ng markdown link
- I-verify ang mga reference sa imahe na gumagana
3. **Link Validation**:
- Subukan ang lahat ng markdown links
- Siguraduhing gumagana ang mga image references
4. **Pagsusuri ng Nilalaman**:
4. **Content Review**:
- Proofread para sa spelling at grammar
- Siguraduhin na tama at edukasyonal ang mga halimbawa ng code
- I-verify na ang mga pagsasalin ay napanatili ang orihinal na kahulugan
- Siguraduhin na ang mga halimbawa ng code ay tama at edukasyonal
- Suriin na ang mga pagsasalin ay nananatili ang orihinal na kahulugan
### Contribution Requirements
- Sumang-ayon sa Microsoft CLA (automated check 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 patakaran
- I-reference ang mga numero ng isyu sa deskripsyon ng PR kung naaangkop
- Sumasang-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 mga panuntunan
- Banggitin ang mga numero ng isyu sa deskripsiyon ng PR kung naaangkop
### Review Process
- Ang mga PR ay nire-review ng mga tagapangasiwa at komunidad
- Pinapahalagahan ang edukasyonal na kalinawan
- Ang mga halimbawa ng code ay dapat sumunod sa pinakabagong mga pinakamahusay na kasanayan
- Ang mga pagsasalin ay rerebyuhin para sa katumpakan at akmang kultura
- Ang mga PR ay nire-review ng mga maintainers at komunidad
- Pinapahalagahan ang kalinawan sa edukasyon
- Ang mga halimbawa ng code ay dapat sumunod sa kasalukuyang pinakamahusay na mga kasanayan
- Ang mga pagsasalin ay nire-review para sa katumpakan at angkop sa kultura
## Translation System
### Automated Translation
- Gumagamit ng GitHub Actions gamit ang co-op-translator workflow
- Nagta-translate sa 50+ na mga wika nang awtomatiko
- Mga source file sa mga pangunahing direktoryo
- Mga na-translate na file sa `translations/{language-code}/` na mga direktoryo
- Gumagamit ng GitHub Actions sa co-op-translator workflow
- Awtomatikong nagsasalin sa 50+ na mga wika
- Source files ay nasa main directories
- Mga isinaling file ay nasa `translations/{language-code}/` na mga direktoryo
### Adding Manual Translation Improvements
1. Hanapin ang file sa `translations/{language-code}/`
2. Gumawa ng mga pagpapabuti habang pinapanatili ang istruktura
2. Gumawa ng mga pagpapabuti habang pinapanatili ang estruktura
3. Siguraduhin na ang mga halimbawa ng code ay nananatiling gumagana
4. Subukan ang anumang lokalized na quiz content
4. Subukan ang anumang lokal na nilalaman ng quiz
### Translation Metadata
Ang mga na-translate na mga file ay may kasamang metadata header:
Ang mga isinaling file ay may kasama na metadata header:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Common Issues
**Quiz app fails to start**:
- Suriin ang bersyon ng Node.js (inirerekomenda v14+)
**Quiz app ay hindi nagsisimula**:
- Suriin ang Node.js na bersyon (v14+ ang inirerekomenda)
- Tanggalin ang `node_modules` at `package-lock.json`, patakbuhin muli ang `npm install`
- Suriin ang mga conflict sa port (default: Vite gumagamit ng port 5173)
- Suriin ang mga port conflicts (default: Vite gumagamit ng port 5173)
**API server won't start**:
- Siguraduhin ang Node.js version ay buo (node >=10)
**API server ay hindi nagsisimula**:
- Siguraduhin ang Node.js na bersyon ay naaabot ang minimum (node >=10)
- Suriin kung ang port ay ginagamit na
- Siguraduhing lahat ng dependencies ay naka-install gamit ang `npm install`
- Siguraduhin lahat ng dependencies ay na-install gamit ang `npm install`
**Browser extension won't load**:
- Suriin na ang manifest.json ay maayos ang format
- Tingnan ang browser console para sa mga error
- Sundin ang mga tagubilin para sa pag-install ng browser-specific na extension
**Browser extension ay hindi naglo-load**:
- Siguraduhin ang manifest.json ay tama ang format
- Suriin ang browser console para sa mga error
- Sundin ang mga tagubilin sa pag-install ng extension na nakabatay sa browser
**Python chat project issues**:
- Siguraduhing naka-install ang OpenAI package: `pip install openai`
- Siguraduhin na ang GITHUB_TOKEN environment variable ay na-set
**Mga isyu sa Python chat project**:
- Siguraduhin na naka-install ang OpenAI package: `pip install openai`
- Siguraduhin ang environment variable na GITHUB_TOKEN ay nakaset
- Suriin ang mga permiso sa GitHub Models access
**Docsify not serving docs**:
**Docsify ay hindi nagseserbisyo ng docs**:
- I-install ang docsify-cli globally: `npm install -g docsify-cli`
- Patakbuhin mula sa root directory ng repositoryo
- Suriin na ang `docs/_sidebar.md` ay umiiral
- Siguraduhing ang `docs/_sidebar.md` ay naroon
### Development Environment Tips
- Gamitin ang VS Code na may Live Server extension para sa mga HTML na proyekto
- Mag-install ng ESLint at Prettier na mga extension para sa pare-parehong format
- Mag-install ng ESLint at Prettier extensions para sa konsistenteng pag-format
- Gamitin ang browser DevTools para sa debugging ng JavaScript
- Para sa Vue projects, i-install ang Vue DevTools browser extension
- Para sa Vue projects, mag-install ng Vue DevTools browser extension
### Performance Considerations
- Malaking bilang ng mga na-translate na file (50+ na mga wika) ay nangangahulugan ng malaking full clones
- Gumamit ng shallow clone kung content lang ang pinagtatrabahuhan: `git clone --depth 1`
- I-exclude ang mga pagsasalin mula sa paghahanap kapag nagtatrabaho sa English content
- Ang mga proseso ng build ay maaaring mabagal sa unang pagtakbo (npm install, Vite build)
- Maraming bilang ng mga isinaling file (50+ wika) kaya malaki ang buong clone
- Gumamit ng shallow clone kung content lang ang oobrahon: `git clone --depth 1`
- I-exclude ang mga pagsasalin sa paghahanap kapag nagtatrabaho sa English na nilalaman
- Ang mga build process ay maaaring mabagal sa unang takbo (npm install, Vite build)
## Security Considerations
### Environment Variables
- Ang mga API keys ay hindi dapat i-komit sa repositoryo
- Gumamit ng `.env` files (nasa `.gitignore` na)
- I-dokument ang mga kinakailangang environment variable sa mga README ng proyekto
- Ang mga API key ay hindi dapat i-commit sa repositoryo
- Gumamit ng `.env` files (naka-include na sa `.gitignore`)
- I-dokumento ang kinakailangang environment variables sa mga README ng proyekto
### Python Projects
- Gumamit ng virtual environments: `python -m venv venv`
- Panatilihing up-to-date ang mga dependencies
- Ang mga GitHub token ay dapat may minimal na kinakailangang permiso
- Panatilihing updated ang mga dependencies
- Ang mga GitHub tokens ay dapat may minimal na mga kinakailangang permiso
### GitHub Models Access
- Kailangan ang Personal Access Tokens (PAT) para sa GitHub Models
- Ang mga token ay dapat itago bilang environment variables
- Huwag kailanman i-komit ang mga token o kredensyal
- Kailangan ng Personal Access Tokens (PAT) para sa GitHub Models
- Itago ang tokens bilang mga environment variables
- Huwag i-commit ang mga tokens o credentials
## Additional Notes
### Target Audience
- Kumpletong mga nagsisimula sa web development
- Mga estudyante at self-learners
- Ganap na mga nagsisimula sa web development
- Mga estudyante at mga self-learners
- Mga guro na gumagamit ng kurikulum sa mga silid-aralan
- Ang nilalaman ay dinisenyo para sa accessibility at unti-unting pagbuo ng kakayahan
- Nilalaman ay idinisenyo para sa accessibility at unti-unting pagbuo ng kasanayan
### Educational Philosophy
- Project-based na paraan ng pag-aaral
- Madalas na pagsusuri ng kaalaman (mga pagsusulit)
- Hands-on na mga coding exercise
- Mga halimbawa ng aplikasyon sa tunay na mundo
- Pagtutok sa mga pundasyon bago ang mga framework
- Paraan ng pag-aaral na nakabatay sa proyekto
- Madalas na pagsusuri ng kaalaman (quizzes)
- Hands-on na mga ehersisyo sa pagko-code
- Mga halimbawa ng aplikasyon sa totoong mundo
- Pokus sa mga pundasyon bago ang mga framework
### Repository Maintenance
- Aktibong komunidad ng mga nag-aaral at kontribyutor
- Regular na updates sa mga dependencies at nilalaman
- Pinamamahalaan ang mga isyu at diskusyon ng mga tagapangasiwa
- Awtomatikong updates ng pagsasalin gamit ang GitHub Actions
- Aktibong komunidad ng mga nag-aaral at mga contributor
- Regular na pag-update sa dependencies at nilalaman
- Mga isyu at diskusyon ay minomonitor ng mga maintainers
- Ang mga update sa pagsasalin ay awtomatiko gamit ang GitHub Actions
### Related Resources
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- Inirerekomenda ang [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) para sa mga nag-aaral
- Karagdagang kurso: Generative AI, Data Science, ML, IoT curricula na available
- Mga karagdagang kurso: Generative AI, Data Science, ML, IoT curricula ay available
### Working with Specific Projects
Para sa detalyadong mga tagubilin sa mga indibidwal na proyekto, tingnan ang mga README file sa:
Para sa detalyadong mga tagubilin sa mga indibidwal na proyekto, sumangguni sa README files sa:
- `quiz-app/README.md` - Vue 3 quiz application
- `7-bank-project/README.md` - Banking application na may authentication
- `5-browser-extension/README.md` - Browser extension development
- `5-browser-extension/README.md` - Pag-develop ng browser extension
- `6-space-game/README.md` - Canvas-based na pag-develop ng laro
- `9-chat-project/README.md` - AI chat assistant project
- `9-chat-project/README.md` - AI chat assistant na proyekto
### Monorepo Structure
Bagamat hindi isang tradisyonal na monorepo, ang repositoryong ito ay naglalaman ng maraming independiyenteng 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
Bagaman hindi isang tradisyunal na monorepo, ang repositoryong ito ay naglalaman ng maraming independyenteng proyekto:
- Bawat aralin ay self-contained
- Ang mga proyekto ay hindi nagbabahagi ng mga dependencies
- Magtrabaho sa mga indibidwal na proyekto nang hindi naaapektuhan ang iba
- I-clone ang buong repo para sa buong karanasan ng kurikulum
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
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, pakatandaan na ang mga automated na pagsasalin ay maaaring may mga pagkakamali o kakulangan sa katumpakan. Ang orihinal na dokumento sa orihinal nitong wika ang dapat ituring na pangunahing sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasaling-tao. Hindi kami mananagot sa anumang mga maling pagkaunawa o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.
**Pagsasanggalang**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Habang nagsusumikap kami para sa katumpakan, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga error o kamalian. Ang orihinal na dokumento sa katutubong wika nito ang dapat ituring na opisyal na sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaintindihan o maling interpretasyon na nagmula sa paggamit ng pagsasaling ito.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -10,29 +10,29 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Pagsisimula sa Web Development - Isang Kurikulum
# Web Development para sa mga Nagsisimula - 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!
Matutunan ang mga pundasyon ng web development sa aming 12-linggong masusing kurso mula sa Microsoft Cloud Advocates. Bawat isa sa 24 na aralin ay sumisid sa JavaScript, CSS, at HTML sa pamamagitan ng mga praktikal na proyekto tulad ng terrariums, browser extensions, at mga space games. Makilahok sa mga pagsusulit, diskusyon, at praktikal na mga takdang-aralin. Paunlarin ang iyong kakayahan at pagbutihin ang iyong pagkatuto gamit ang aming epektibong metodolohiyang nakabase sa proyekto. Simulan ang iyong paglalakbay sa coding ngayon!
Sumali sa Azure AI Foundry Discord Community
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Sundin ang mga hakbang na ito para makapagsimula gamit ang mga resources na ito:
1. **I-Fork ang Repository**: I-click ang [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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)
Sundan ang mga hakbang na ito upang makapagsimula gamit ang mga resource na ito:
1. **I-fork ang Repository**: I-click ang [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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 makipagkilala sa mga eksperto at kapwa developer**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Suporta para sa Maramihang Wika
### 🌐 Suportang Maraming Wika
#### Sinusuportahan sa pamamagitan ng GitHub Action (Automated at Palaging Napapanahon)
#### Sinusuportahan sa pamamagitan ng GitHub Action (Automatiko at Palaging Napapanahon)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](./README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Khmer](../km/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](./README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Mas gusto mo bang Mag-Clone Locally?**
> **Mas gusto mo bang i-clone nang lokal?**
>
> 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:
> Kasama sa repository na ito ang 50+ na salin ng mga wika na lubhang nagpapalaki ng laki ng pag-download. Upang mag-clone nang walang mga salin, gamitin ang sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,172 +48,173 @@ Sundin ang mga hakbang na ito para makapagsimula gamit ang mga resources na ito:
> 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.
> Makukuha mo lahat ng kailangan mo upang tapusin ang kurso nang mas mabilis ang pag-download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Kung nais mong magkaroon ng suportang karagdagang mga wika ng pagsasalin, nakalista ito [dito](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](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 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.
Bisitahin ang [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) kung saan makakakita ka ng mga materyales para sa mga nagsisimula, mga Student packs at mga paraan para makakuha ng libreng sertipiko voucher. Ito ang pahinang dapat mong i-bookmark at tingnan paminsan-minsan dahil ang nilalaman ay ini-update buwan-buwan.
### 📣 Anunsyo - Bagong GitHub Copilot Agent mode challenges na dapat tapusin!
### 📣 Anunsyo - Mga bagong hamon sa GitHub Copilot Agent mode na dapat tapusin!
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.
May bagong hamon, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Ito ay isang bagong hamon na maaari mong tapusin gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagagamit ang Agent mode, kaya nitong hindi lamang gumawa ng teksto kundi lumikha at mag-edit ng mga file, magpatakbo ng mga utos, at marami pa.
### 📣 Anunsyo - _Bagong Proyekto na gagawin gamit ang Generative AI_
### 📣 Anunsyo - _Bagong Proyekto na bubuuin gamit ang Generative AI_
Kamakailan ay nadagdag ang bagong AI Assistant project, tingnan ito sa [proyekto](./9-chat-project/README.md)
Bagong AI Assistant project ang idinagdag, silipin ito [proyekto](./9-chat-project/README.md)
### 📣 Anunsyo - _Bagong Kurikulum_ sa Generative AI para sa JavaScript ay bagong inilabas na
### 📣 Anunsyo - _Bagong Kurikulum_ sa Generative AI para sa JavaScript ay inilabas na
Huwag palampasin ang aming bagong Generative AI curriculum!
Huwag palampasin ang aming bagong kurikulum sa Generative AI!
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para makapagsimula!
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) upang makapagsimula!
![Background](../../translated_images/tl/background.148a8d43afde5730.webp)
- Mga aralin na sumasaklaw mula sa mga batayan hanggang sa RAG.
- Makipag-ugnayan sa mga makasaysayang tauhan gamit ang GenAI at ang kasama naming app.
- Masaya at nakakaaliw na kwento, maglalakbay ka sa panahon!
- Mga aralin mula sa mga batayan hanggang sa RAG.
- Makipag-ugnayan sa mga makasaysayang karakter gamit ang GenAI at ang aming companion app.
- Masaya at kapana-panabik na salaysay, parang naglalakbay ka sa oras!
![character](../../translated_images/tl/character.5c0dd8e067ffd693.webp)
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
Bawat aralin ay may kasamang takdang-aralin, pagsusuri ng kaalaman, at hamon upang gabayan ka sa pag-aaral ng mga paksa tulad ng:
- Prompting at prompt engineering
- Pagbuo ng mga app para sa teksto at imahe
- Mga search apps
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para makapagsimula!
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) upang makapagsimula!
## 🌱 Paano Magsimula
## 🌱 Pagsisimula
> **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)!
> **Mga Guro**, may [ilang suhestiyon kami](for-teachers.md) kung paano gamitin ang kurikulum na ito. Nais naming marinig ang 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)**, 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.
**[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 pagbabasa ng mga materyales ng lektura, pagtapos ng iba't ibang aktibidad, at suriin ang inyong pag-unawa gamit ang post-lecture quiz.
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.
Para mapabuti ang iyong karanasan sa pag-aaral, makipag-ugnayan sa iyong mga kaklase upang magtrabaho sa mga proyekto nang magkakasama! Hinihikayat ang mga diskusyon sa aming [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kung saan naroroon ang aming mga moderator upang sagutin ang iyong mga katanungan.
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.
Para sa mas malalim na pag-aaral, mariin naming inirerekomenda ang [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para sa karagdagang mga materyales pang-aral.
### 📋 Pagsasaayos ng iyong kapaligiran
### 📋 Pagse-setup 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).
May nakahandang development environment ang kurikulum na ito! Habang nagsisimula, maaari kang pumili na patakbuhin ang kurikulum sa isang [Codespace](https://github.com/features/codespaces/) (_browser-based na kapaligiran na hindi kailangan ng install_), o lokal sa iyong computer gamit ang isang text editor tulad ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Gumawa ng iyong repositoryo
Para madali mong masave ang iyong 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.
#### Gumawa ng iyong repository
Para madali mong masave ang iyong trabaho, inirerekomenda na gumawa ka ng sarili mong kopya ng repository na ito. Maaari mo itong gawin sa pamamagitan ng pag-click sa **Use this template** button sa itaas ng pahina. Lilikha ito ng bagong repository sa iyong GitHub account na may kopya ng kurikulum.
Sundin ang mga hakbang na ito:
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`
Sundan ang mga hakbang na ito:
1. **I-fork ang Repository**: I-click ang "Fork" na button sa kanang itaas na 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
#### Patakbuhin ang kurikulum sa Codespace
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.
Sa kopya ng repository na iyong ginawa, i-click ang **Code** button at piliin ang **Open with Codespaces**. Lilikha ito ng bagong Codespace para sa iyo upang magtrabaho.
![Codespace](../../translated_images/tl/createcodespace.0238bbf4d7a8d955.webp)
#### Pagpapatakbo ng kurikulum lokal sa iyong computer
#### Patakbuhin ang kurikulum lokal sa iyong computer
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.
Para patakbuhin ang kurikulum na ito lokal sa iyong computer, kakailanganin mo ang isang text editor, isang browser at isang 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 iyo sa iba't ibang opsyon para sa bawat isa sa mga tool na ito upang piliin mo kung ano ang pinakamabisa para sa iyo.
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:
1. I-clone ang iyong repository sa iyong computer. Magagawa mo ito sa pamamagitan ng pag-click sa **Code** button at pagkopya ng URL:
[CodeSpace](./images/createcodespace.png)
Pagkatapos, buksan ang [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) sa loob ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) at patakbuhin ang sumusunod na utos, palitan ang `<your-repository-url>` ng URL na iyong kinopya:
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 command, palitan ang `<your-repository-url>` ng URL na iyong kinopya:
```bash
git clone <your-repository-url>
```
2. Buksan ang folder sa Visual Studio Code. Magagawa mo ito sa pamamagitan ng pag-click sa **File** > **Open Folder** at pagpili ng 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 piliin ang folder na kaklone mo lang.
> Inirerekomendang mga extension sa Visual Studio Code:
> Inirerekomendang mga extension ng Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 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
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para ma-preview ang mga pahinang HTML sa loob ng Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para matulungan kang magsulat ng code nang mas mabilis
## 📂 Kasama sa bawat aralin:
## 📂 Ang bawat aralin ay nagsasama ng:
- opsyonal na sketchnote
- opsyonal na dagdag na video
- pre-lesson warmup na pagsusulit
- opsyonal na karagdagang video
- pre-lesson warmup quiz
- nakasulat na aralin
- para sa mga araling nakabatay sa proyekto, mga hakbang-hakbang na gabay kung paano gawin ang proyekto
- pagsusuri ng kaalaman
- para sa mga project-based na aralin, mga step-by-step na gabay sa paggawa ng proyekto
- mga pagsusuri ng kaalaman
- isang hamon
- dagdag na babasahin
- karagdagang babasahin
- takdang-aralin
- [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
> **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.
> **Isang paalala tungkol sa mga pagsusulit**: Lahat ng pagsusulit ay nasa Quiz-app na folder, may 48 kabuuang pagsusulit na tig-3 tanong bawat isa. Available ang mga ito [dito](https://ff-quizzes.netlify.app/web/) at ang quiz app ay maaaring patakbuhin nang lokal o ideploy sa Azure; sundin ang mga tagubilin sa `quiz-app` folder.
## 🗃️ Mga Aralin
| | 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 | 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 Gamitin ang isang code editor| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| | Pangalan ng Proyekto | Mga Konseptong Itinuturo | Mga Layunin sa Pagkatuto | Nakalink na Aralin | May-akda |
| :-: | :--------------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | Panimula sa Programming at Mga Kasangkapan | Matutunan ang mga pangunahing pundasyon ng karamihan sa 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 | Getting Started | Mga Pangunahing Kaalaman sa GitHub, kasama ang pagtatrabaho sa isang koponan | Kung paano gamitin ang GitHub sa iyong proyekto, paano makipagtulungan sa iba sa isang code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Matutunan ang mga pangunahing konsepto ng web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Mga Uri ng Data sa JavaScript | Mga pangunahing kaalaman tungkol sa mga uri ng data sa JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Mga Function at Mga Metodo | Matutunan ang tungkol sa mga function at mga method para pamahalaan ang daloy ng lohika ng isang aplikasyon | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine at Christopher |
| 06 | JS Basics | Paggawa ng mga Desisyon gamit ang JS | Matutunan kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga pamamaraang pampagpapasya | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Mga Array at Loop | Magtrabaho gamit ang data gamit ang mga array at loop sa JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | Praktis sa HTML | Gumawa ng HTML para lumikha ng online terrarium, nakatuon sa paggawa ng layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | Praktis sa CSS | Gumawa ng CSS para i-style ang online terrarium, nakatuon sa mga batayan ng CSS kabilang ang paggawa ng pahina na responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Gumawa ng JavaScript para paganahin 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) | Gumawa ng Isang Typing Game | Matutunan kung paano gamitin ang mga keyboard events 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 kanilang kasaysayan, at paano gumawa 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) | Gumawa ng form, tumawag ng API at mag-imbak ng mga variable sa local storage | Gumawa ng mga elemento ng JavaScript ng iyong browser extension para tumawag ng API gamit ang mga variable na naka-imbak sa lokal na imbakan | [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 background processes ng browser para pamahalaan ang icon ng extension; matutunan ang tungkol sa web performance at ilang mga 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 | Matutunan ang 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) | Pagdodrawing sa canvas | Matutunan ang tungkol sa Canvas API, na ginagamit para 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 magkakaroon ng galaw ang mga elemento gamit ang mga cartesian coordinates at ang Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Pagtuklas ng banggaan | Pahintulutan ang mga elemento na magbanggaan at tumugon sa isa't isa gamit ang mga keypress at magbigay ng cooldown function para matiyak ang performance ng laro | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Pagpapanatili ng iskor | Gumawa ng mga kalkulasyon sa matematika 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 pag-restart ng laro | Matutunan ang tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga assets 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) | HTML Templates at Routes sa isang Web App | Matutunan kung paano gumawa ng balangkas ng multipage website na arkitektura gamit ang routing at HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Gumawa ng Login at Registration Form | Matutunan ang tungkol sa paggawa ng mga form at pamamahala ng mga validation routine | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Mga Metodo ng Pagkuha at Paggamit ng Data | Paano dumadaloy ang data papasok at palabas ng iyong app, paano ito kunin, iimbak, at alisin | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Mga Konsepto ng Pamamahala ng Estado | Matutunan kung paano pinananatili ng iyong app ang estado at paano ito pamahalaan programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Paggamit ng VScode | Matutunan kung paano gumamit ng 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 na may dalawang pangunahing prinsipyo sa pagtuturo:
* pagkatuto batay sa proyekto
Ang aming kurikulum ay dinisenyo gamit ang dalawang pangunahing prinsipyo sa pagtuturo:
* pagkatuto na nakabatay sa proyekto
* madalas na 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 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.
Itinuturo ng programa ang mga pundamental ng JavaScript, HTML, at CSS, pati na rin ang pinakabagong mga kasangkapan at teknik na ginagamit ng mga web developer ngayon. Magkakaroon ng pagkakataon ang mga estudyante 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.
> 🎓 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!
> 🎓 Maaari mong kunin ang unang ilang mga 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!
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.
Sa pagtitiyak na ang nilalaman ay naka-align sa mga proyekto, nagiging mas kapana-panabik ang proseso para sa mga estudyante at napapalakas ang pag-alala sa mga konsepto. Nagsulat din kami ng ilang mga panimulang aralin sa basics ng JavaScript para ipakilala ang mga konsepto, na ipinares sa isang 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.
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.
Dagdag pa, ang isang low-stakes quiz bago ang klase ay nagtatakda ng intensyon ng estudyante sa pag-aaral ng isang paksa, habang ang pangalawang quiz pagkatapos ng klase ay nagsisiguro ng karagdagang pag-alala. Ang kurikulum na ito ay dinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagya lamang. Ang mga proyekto ay nagsisimula sa maliit at nagiging mas kumplikado sa pagtatapos ng 12-linggong siklo.
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)".
Bagaman sinadya naming iwasan ang pagpapakilala ng mga JavaScript framework upang magpokus sa mga pangunahing kasanayan na kailangan bilang isang web developer bago mag-adopt ng framework, isang magandang susunod na hakbang sa pagtapos ng kurikulum na ito ay ang pag-aaral tungkol sa Node.js gamit ang 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 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`.
## 🧭 Offline access
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 pagkatapos sa root folder ng repo na ito, i-type ang `docsify serve`. Ang website ay irerender 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:
@ -259,21 +260,21 @@ Ang aming koponan ay gumagawa ng iba pang mga kurso! Tingnan ang:
## Pagkuha ng Tulong
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.
Kung ikaw ay na-stuck o may mga tanong tungkol sa paggawa ng AI apps. Sumali sa kapwa mga nag-aaral at mga batikang developer sa mga talakayan tungkol sa MCP. Isa itong suportadong komunidad kung saan malugod na tinatanggap ang mga tanong at malayang ibinabahagi ang kaalaman.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Kung mayroon kang puna sa produkto o mga error habang nagtatayo, bisitahin:
Kung mayroon kang feedback sa produkto o mga error habang nagtatayo, bisitahin:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Lisensya
Ang repositoryong ito ay lisensyado sa ilalim ng MIT license. Tingnan ang [LICENSE](../../LICENSE) na file para sa karagdagang impormasyon.
Ang repositoryong ito ay lisensyado sa ilalim ng MIT license. Tingnan ang file na [LICENSE](../../LICENSE) para sa karagdagang impormasyon.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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.
**Paunawa**:
Ang dokumentong ito ay isinalin gamit ang serbisyong AI na pagsasalin na [Co-op Translator](https://github.com/Azure/co-op-translator). Habang nagsusumikap kami para sa katumpakan, pakitandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga mali o pagkakamali. Ang orihinal na dokumento sa orihinal nitong wika ang dapat ituring na pangunahing sanggunian. Para sa mga mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaintindihan o maling interpretasyon na nagmumula sa paggamit ng pagsasaling ito.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save