msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

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

Browse Source
update-translations
localizeflow[bot] 2 weeks ago
parent c2f3f7da66
commit 0ce669395e
12 changed files with 858 additions and 807 deletions
Show Stats Download Patch File Download Diff File

10
translations/id/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-20T16:43:50+00:00",
"translation_date": "2026-04-24T22:05:14+00:00",
"source_file": "AGENTS.md",
"language_code": "id"
},
@ -516,8 +516,8 @@
"language_code": "id"
},
"README.md": {
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T16:43:44+00:00",
"original_hash": "b1766b45123e043ef2c72612f28b86dd",
"translation_date": "2026-04-24T22:00:39+00:00",
"source_file": "README.md",
"language_code": "id"
},
@ -564,8 +564,8 @@
"language_code": "id"
},
"lesson-template/README.md": {
"original_hash": "0494be70ad7fadd13a8c3d549c23e355",
"translation_date": "2025-08-27T22:54:55+00:00",
"original_hash": "ce2f64fd0d518f0500fc082b97c1e662",
"translation_date": "2026-04-24T22:00:47+00:00",
"source_file": "lesson-template/README.md",
"language_code": "id"
},

224
translations/id/AGENTS.md
Unescape View File

@ -2,27 +2,27 @@
## Gambaran Proyek
Ini adalah repositori kurikulum edukasi untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini merupakan kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktis yang mencakup JavaScript, CSS, dan HTML.
Ini adalah repositori kurikulum edukatif untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini adalah kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran langsung yang mencakup JavaScript, CSS, dan HTML.
### Komponen Utama
- **Konten Edukasi**: 24 pelajaran terstruktur yang diorganisasi dalam modul berbasis proyek
- **Konten Edukasi**: 24 pelajaran terstruktur yang diorganisir dalam modul berbasis proyek
- **Proyek Praktis**: Terrarium, Permainan Mengetik, Ekstensi Browser, Permainan Luar Angkasa, Aplikasi Perbankan, Editor Kode, dan Asisten Chat AI
- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan tiap kuis (penilaian sebelum/sesudah pelajaran)
- **Dukungan Multi-bahasa**: Terjemahan otomatis untuk lebih dari 50 bahasa melalui GitHub Actions
- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan masing-masing (evaluasi sebelum/sesudah pelajaran)
- **Dukungan Multibahasa**: Terjemahan otomatis untuk lebih dari 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
- Proyek mandiri di direktori terpisah (quiz-app, berbagai proyek pelajaran)
- 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
- Dokumentasi disajikan via Docsify dan tersedia sebagai PDF
## Perintah Setup
Repositori ini terutama untuk konsumsi konten edukasi. Untuk bekerja dengan proyek khusus:
Repositori ini terutama untuk konsumsi konten edukasi. Untuk bekerja dengan proyek tertentu:
### Setup Repositori Utama
@ -31,7 +31,7 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Setup Aplikasi Kuis (Vue 3 + Vite)
### Setup Quiz App (Vue 3 + Vite)
```bash
cd quiz-app
@ -56,7 +56,7 @@ npm run format # Format dengan Prettier
```bash
cd 5-browser-extension/solution
npm install
# Ikuti petunjuk pemuatan ekstensi spesifik browser
# Ikuti instruksi pemuatan ekstensi spesifik browser
```
### Proyek Permainan Luar Angkasa
@ -72,7 +72,7 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Tetapkan variabel lingkungan GITHUB_TOKEN
# Atur variabel lingkungan GITHUB_TOKEN
python api.py
```
@ -82,39 +82,39 @@ python api.py
1. **Fork repositori** ke akun GitHub Anda
2. **Clone fork Anda** secara lokal
3. **Buat cabang baru** untuk perubahan Anda
3. **Buat branch baru** untuk perubahan Anda
4. Lakukan perubahan pada konten pelajaran atau contoh kode
5. Uji perubahan kode di direktori proyek terkait
6. Ajukan pull request sesuai panduan kontribusi
6. Ajukan pull request sesuai pedoman kontribusi
### Untuk Pembelajar
1. Fork atau clone repositori
2. Navigasi ke direktori pelajaran secara berurutan
3. Baca file README di setiap pelajaran
3. Baca file README untuk setiap pelajaran
4. Selesaikan kuis sebelum pelajaran di https://ff-quizzes.netlify.app/web/
5. Kerjakan contoh kode di folder pelajaran
5. Kerjakan contoh kode dalam folder pelajaran
6. Selesaikan tugas dan tantangan
7. Ikuti kuis sesudah pelajaran
7. Ikuti kuis setelah pelajaran
### Pengembangan Langsung
- **Dokumentasi**: Jalankan `docsify serve` di root (port 3000)
- **Aplikasi Kuis**: Jalankan `npm run dev` di direktori quiz-app
- **Proyek-proyek**: Gunakan ekstensi Live Server VS Code untuk proyek HTML
- **Quiz App**: Jalankan `npm run dev` di direktori quiz-app
- **Proyek**: Gunakan ekstensi VS Code Live Server untuk proyek HTML
- **Proyek API**: Jalankan `npm start` di direktori API terkait
## Instruksi Pengujian
### Pengujian Aplikasi Kuis
### Pengujian Quiz App
```bash
cd quiz-app
npm run lint # Periksa masalah gaya kode
npm run build # Verifikasi keberhasilan build
npm run build # Verifikasi build berhasil
```
### Pengujian API Bank
### Pengujian Bank API
```bash
cd 7-bank-project/api
@ -124,68 +124,68 @@ node server.js # Verifikasi server mulai tanpa kesalahan
### Pendekatan Pengujian Umum
- Ini adalah repositori edukasi tanpa pengujian otomatis lengkap
- Ini adalah repositori edukasi tanpa pengujian otomatis komprehensif
- Pengujian manual fokus pada:
- Contoh kode berjalan tanpa error
- Link di dokumentasi berfungsi dengan baik
- Proses build proyek berjalan sukses
- Contoh sesuai praktik terbaik
- Tautan dalam dokumentasi berfungsi dengan benar
- Build proyek selesai dengan sukses
- Contoh mengikuti praktik terbaik
### Pemeriksaan Sebelum Pengiriman
### Pemeriksaan Pra-Pengajuan
- Jalankan `npm run lint` di direktori dengan package.json
- Verifikasi link markdown valid
- Jalankan `npm run lint` di direktori yang memiliki package.json
- Verifikasi tautan markdown valid
- Uji contoh kode di browser atau Node.js
- Pastikan terjemahan mempertahankan struktur yang tepat
- Periksa bahwa terjemahan menjaga struktur yang tepat
## Pedoman Gaya Kode
### JavaScript
- Gunakan sintaks ES6+ modern
- Ikuti konfigurasi ESLint standar di proyek
- Ikuti konfigurasi ESLint standar yang disediakan dalam proyek
- Gunakan nama variabel dan fungsi yang bermakna untuk kejelasan edukasi
- Tambahkan komentar penjelasan konsep untuk pembelajar
- Tambahkan komentar yang menjelaskan konsep untuk pembelajar
- Format menggunakan Prettier jika dikonfigurasi
### HTML/CSS
- Elemen HTML5 semantik
- Prinsip desain responsif
- Penamaan kelas yang jelas
- Komentar menjelaskan teknik CSS untuk pembelajar
- Konvensi penamaan kelas yang jelas
- Komentar yang menjelaskan teknik CSS untuk pembelajar
### Python
- Panduan gaya PEP 8
- Contoh kode jelas dan edukatif
- Gunakan type hint bila membantu pembelajaran
- Pedoman gaya PEP 8
- Contoh kode yang jelas dan edukatif
- Petunjuk tipe jika membantu pembelajaran
### Dokumentasi Markdown
- Hierarki judul yang jelas
- Blok kode dengan penentuan bahasa
- Link ke sumber daya tambahan
- Screenshot dan gambar di direktori `images/`
- Teks alternatif untuk gambar demi aksesibilitas
- Hirarki judul yang jelas
- Blok kode dengan spesifikasi bahasa
- Tautan ke sumber tambahan
- Screenshot dan gambar dalam direktori `images/`
- Teks alt untuk gambar demi aksesibilitas
### Organisasi File
### Organisasi Berkas
- Pelajaran diberi nomor berurutan (1-getting-started-lessons, 2-js-basics, dll.)
- Setiap proyek memiliki direktori `solution/` dan sering juga `start/` atau `your-work/`
- Gambar disimpan di folder `images/` khusus pelajaran
- Terjemahan disimpan dalam struktur `translations/{language-code}/`
- Pelajaran dinomori secara 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/` spesifik pelajaran
- Terjemahan di struktur `translations/{language-code}/`
## Build dan Deployment
### Deployment Aplikasi Kuis (Azure Static Web Apps)
### Deployment Quiz App (Azure Static Web Apps)
quiz-app dikonfigurasi untuk deployment Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Membuat folder dist/
# Menerapkan melalui workflow GitHub Actions saat push ke main
# Melakukan deploy melalui workflow GitHub Actions saat push ke main
```
Konfigurasi Azure Static Web Apps:
@ -203,60 +203,60 @@ npm run convert # Hasilkan PDF dari docs
### Dokumentasi Docsify
```bash
npm install -g docsify-cli # Pasang Docsify secara global
npm install -g docsify-cli # Instal Docsify secara global
docsify serve # Layani di localhost:3000
```
### Build Spesifik Proyek
Setiap direktori proyek mungkin memiliki proses build sendiri:
- Proyek Vue: `npm run build` untuk membuat bundel produksi
- Proyek statis: Tidak ada langkah build, layani file langsung
- Proyek Vue: `npm run build` membuat bundel produksi
- Proyek statis: Tidak ada langkah build, sajikan berkas langsung
## Panduan Pull Request
## Pedoman Pull Request
### Format Judul
Gunakan judul jelas yang menggambarkan area perubahan:
- `[Quiz-app] Tambahkan kuis baru untuk pelajaran X`
Gunakan judul jelas dan deskriptif yang menunjukkan area perubahan:
- `[Quiz-app] Tambah kuis baru untuk pelajaran X`
- `[Lesson-3] Perbaiki typo di proyek terrarium`
- `[Translation] Tambah terjemahan Spanyol untuk pelajaran 5`
- `[Docs] Perbarui instruksi setup`
### Pemeriksaan Wajib
### Pemeriksaan yang Diperlukan
Sebelum mengirim PR:
1. **Kualitas Kode**:
- Jalankan `npm run lint` di direktori proyek terkait
- Perbaiki semua error dan peringatan lint
- Jalankan `npm run lint` di direktori proyek yang terdampak
- Perbaiki semua kesalahan dan peringatan linting
2. **Verifikasi Build**:
- Jalankan `npm run build` jika berlaku
- Jalankan `npm run build` jika relevan
- Pastikan tidak ada error build
3. **Validasi Link**:
- Uji semua link markdown
3. **Validasi Tautan**:
- Uji semua tautan markdown
- Verifikasi referensi gambar berfungsi
4. **Tinjau Konten**:
- Proofreading tata bahasa dan ejaan
4. **Review Konten**:
- Periksa ejaan dan tata bahasa
- Pastikan contoh kode benar dan edukatif
- Verifikasi terjemahan mempertahankan makna asli
- Verifikasi terjemahan menjaga makna asli
### Persyaratan Kontribusi
- Setujui Microsoft CLA (pemeriksaan otomatis pada PR pertama)
- Setujui CLA Microsoft (cek otomatis pada PR pertama)
- Ikuti [Kode Etik Open Source Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Lihat [CONTRIBUTING.md](./CONTRIBUTING.md) untuk panduan rinci
- Referensikan nomor isu dalam deskripsi PR jika ada
- Referensikan nomor isu dalam deskripsi PR jika relevan
### Proses Review
- PR direview oleh pemelihara dan komunitas
- Prioritaskan kejelasan edukasi
- Kejelasan edukasi diprioritaskan
- Contoh kode harus mengikuti praktik terbaik saat ini
- Terjemahan direview untuk akurasi dan kesesuaian budaya
- Terjemahan dicek keakuratan dan kesesuaian budaya
## Sistem Terjemahan
@ -264,19 +264,19 @@ Sebelum mengirim PR:
- Menggunakan GitHub Actions dengan workflow co-op-translator
- Menerjemahkan ke lebih dari 50 bahasa secara otomatis
- File sumber di direktori utama
- File terjemahan di direktori `translations/{language-code}/`
- Berkas sumber di direktori utama
- Berkas terjemahan di direktori `translations/{language-code}/`
### Menambah Perbaikan Terjemahan Manual
### Menambahkan Perbaikan Terjemahan Manual
1. Cari file di `translations/{language-code}/`
2. Buat perbaikan sambil mempertahankan struktur
1. Cari berkas di `translations/{language-code}/`
2. Lakukan perbaikan sambil mempertahankan struktur
3. Pastikan contoh kode tetap berfungsi
4. Uji konten kuis yang sudah diterjemahkan
4. Uji konten kuis yang dilokalkan
### Metadata Terjemahan
File terjemahan termasuk header metadata:
Berkas terjemahan mencakup header metadata:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,99 +293,99 @@ CO_OP_TRANSLATOR_METADATA:
### Masalah Umum
**Aplikasi kuis gagal mulai**:
**Quiz app gagal mulai**:
- Periksa versi Node.js (disarankan v14+)
- Hapus `node_modules` dan `package-lock.json`, jalankan `npm install` lagi
- Periksa konflik port (default: Vite menggunakan port 5173)
- Cek konflik port (default: Vite menggunakan port 5173)
**Server API tidak mulai**:
- Periksa versi Node.js minimal (node >=10)
- Periksa apakah port sudah digunakan
- Pastikan semua dependensi terinstall dengan `npm install`
**Server API tidak mau mulai**:
- Verifikasi versi Node.js memenuhi minimum (node >=10)
- Cek apakah port sudah digunakan
- Pastikan semua dependensi terpasang dengan `npm install`
**Ekstensi browser tidak dimuat**:
- Periksa format manifest.json sudah benar
- Periksa konsol browser untuk error
- Ikuti instruksi instalasi ekstensi khusus browser
**Ekstensi browser tidak bisa dimuat**:
- Verifikasi manifest.json terformat dengan benar
- Cek konsol browser untuk error
- Ikuti instruksi pemasangan ekstensi spesifik browser
**Masalah proyek chat Python**:
- Pastikan paket OpenAI terinstall: `pip install openai`
- Pastikan paket OpenAI terpasang: `pip install openai`
- Verifikasi variabel lingkungan GITHUB_TOKEN sudah diset
- Cek izin akses GitHub Models
**Docsify tidak menyajikan dokumentasi**:
- Instal docsify-cli secara global: `npm install -g docsify-cli`
- Jalankan dari direktori root repositori
- Pastikan `docs/_sidebar.md` tersedia
- Instal docsify-cli global: `npm install -g docsify-cli`
- Jalankan dari root repositori
- Pastikan `docs/_sidebar.md` ada
### Tips Lingkungan Pengembangan
- Gunakan VS Code dengan ekstensi Live Server untuk proyek HTML
- Instal ekstensi ESLint dan Prettier untuk format konsisten
- Pasang ekstensi ESLint dan Prettier untuk format konsisten
- Gunakan DevTools browser untuk debugging JavaScript
- Untuk proyek Vue, pasang ekstensi Vue DevTools browser
### Pertimbangan Performa
- Jumlah file terjemahan besar (50+ bahasa) membuat clone penuh besar
- Gunakan clone shallow jika hanya bekerja dengan konten: `git clone --depth 1`
- Kecualikan terjemahan dari pencarian saat bekerja dengan konten bahasa Inggris
- Proses build mungkin lambat pada run pertama (npm install, build Vite)
- Jumlah berkas terjemahan besar (50+ bahasa) membuat klon penuh besar
- Gunakan shallow clone jika hanya bekerja dengan konten: `git clone --depth 1`
- Kecualikan terjemahan saat mencari konten bahasa Inggris
- Proses build mungkin lambat pada jalankan pertama (npm install, build Vite)
## Pertimbangan Keamanan
### Variabel Lingkungan
- API key tidak boleh disimpan di repositori
- Gunakan file `.env` (sudah ada di `.gitignore`)
- Kunci API tidak boleh di-commit ke repositori
- Gunakan berkas `.env` (sudah masuk `.gitignore`)
- Dokumentasikan variabel lingkungan yang diperlukan di README proyek
### Proyek Python
- Gunakan virtual environment: `python -m venv venv`
- Jaga dependensi tetap terupdate
- Token GitHub harus punya izin minimal yang dibutuhkan
- Jaga dependensi tetap terbarukan
- Token GitHub harus memiliki izin minimal yang diperlukan
### Akses GitHub Models
- Token Akses Pribadi (PAT) diperlukan untuk GitHub Models
- Token harus disimpan sebagai variabel lingkungan
- Personal Access Tokens (PAT) diperlukan untuk GitHub Models
- Simpan token sebagai variabel lingkungan
- Jangan pernah commit token atau kredensial
## Catatan Tambahan
### Sasaran Audiens
- Pemula lengkap di pengembangan web
- Pelajar dan pembelajar mandiri
- Pemula lengkap dalam pengembangan web
- Mahasiswa dan pembelajar mandiri
- Guru yang menggunakan kurikulum di kelas
- Konten dirancang untuk aksesibilitas dan peningkatan kemampuan bertahap
- Konten dirancang untuk aksesibilitas dan peningkatan keterampilan bertahap
### Filosofi Edukasi
- Pendekatan pembelajaran berbasis proyek
- Pemeriksaan pengetahuan yang sering (kuis)
- Latihan coding langsung
- Contoh penerapan dunia nyata
- Contoh aplikasi dunia nyata
- Fokus pada dasar sebelum framework
### Pemeliharaan Repositori
- Komunitas pembelajar dan kontributor yang aktif
- Komunitas aktif pembelajar dan kontributor
- Pembaruan rutin pada dependensi dan konten
- Masalah dan diskusi dipantau oleh pemelihara
- Update terjemahan otomatis melalui GitHub Actions
- Pembaruan terjemahan otomatis via GitHub Actions
### Sumber Daya Terkait
- [Modul Microsoft Learn](https://docs.microsoft.com/learn/)
- [Sumber Daya Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [Sumber daya Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) direkomendasikan untuk pembelajar
- Kursus tambahan: Generative AI, Data Science, ML, kurikulum IoT tersedia
- Kursus tambahan: AI Generatif, Data Science, ML, kurikulum IoT tersedia
### Bekerja dengan Proyek Spesifik
Untuk instruksi rinci proyek individual, lihat README di:
Untuk instruksi rinci proyek individual, lihat file README di:
- `quiz-app/README.md` - aplikasi kuis Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan autentikasi
- `5-browser-extension/README.md` - pengembangan ekstensi browser
@ -394,15 +394,15 @@ Untuk instruksi rinci proyek individual, lihat README di:
### Struktur Monorepo
Meski bukan monorepo tradisional, repositori ini berisi beberapa proyek independen:
- Setiap pelajaran bersifat mandiri
Meskipun bukan monorepo tradisional, repositori ini berisi beberapa proyek independen:
- Setiap pelajaran berdiri sendiri
- Proyek tidak berbagi dependensi
- Kerjakan proyek individual tanpa memengaruhi proyek lain
- Clone seluruh repo untuk pengalaman kurikulum lengkap
- Bisa bekerja pada proyek tunggal tanpa memengaruhi lainnya
- Clone seluruh repositori untuk pengalaman kurikulum lengkap
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk akurasi, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sah. Untuk informasi yang penting, disarankan untuk menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang salah yang timbul dari penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha mencapai akurasi, harap diingat bahwa terjemahan otomatis dapat mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sah. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang salah yang timbul dari penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

164
translations/id/README.md
Unescape View File

@ -1,29 +1,29 @@
[![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 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)
[![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/)
[![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/)
[![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 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!
Pelajari dasar-dasar pengembangan web dengan kursus komprehensif selama 12 minggu oleh Microsoft Cloud Advocates. Setiap dari 24 pelajaran mendalami JavaScript, CSS, dan HTML melalui proyek langsung seperti terarium, ekstensi browser, dan permainan luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan Anda dan optimalkan retensi pengetahuan Anda dengan pedagogi berbasis proyek yang efektif. Mulailah perjalanan pemrograman Anda hari ini!
Bergabung dengan Komunitas Discord Azure AI Foundry
Bergabunglah dengan Azure AI Foundry Discord dan temui para ahli serta sesama pengembang.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
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`
Ikuti langkah-langkah ini untuk memulai 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. [**Bergabung dengan Azure AI Foundry Discord dan temui para ahli serta sesama pengembang**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Dukungan Multibahasa
### 🌐 Dukungan Multi-Bahasa
#### Didukung melalui GitHub Action (Otomatis & Selalu Terbaru)
@ -32,7 +32,7 @@ Ikuti langkah-langkah ini untuk mulai menggunakan sumber daya ini:
> **Lebih suka Clone Secara Lokal?**
>
> Repository ini mencakup lebih dari 50 terjemahan bahasa yang secara signifikan meningkatkan ukuran unduhan. Untuk clone tanpa terjemahan, gunakan sparse checkout:
> Repositori 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,24 +48,24 @@ Ikuti langkah-langkah ini untuk mulai menggunakan sumber daya ini:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Ini memberi Anda semua yang diperlukan untuk menyelesaikan kursus dengan waktu unduh yang jauh lebih cepat.
> Ini memberi Anda semua yang Anda butuhkan untuk menyelesaikan kursus dengan unduhan yang jauh lebih cepat.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jika Anda ingin bahasa terjemahan tambahan didukung, daftar lengkapnya ada [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jika Anda ingin memiliki terjemahan tambahan, bahasa yang didukung terdaftar di sini. [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![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)
[![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)
#### 🧑‍🎓 _Apakah kamu seorang pelajar?_
#### 🧑‍🎓 _Apakah Anda seorang pelajar?_
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.
Kunjungi [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana Anda akan menemukan sumber daya pemula, paket pelajar dan bahkan cara untuk mendapatkan voucher sertifikat gratis. Ini adalah halaman yang ingin Anda tandai dan periksa dari waktu ke waktu 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 tidak hanya mampu menghasilkan teks tetapi juga dapat membuat dan mengedit file, menjalankan perintah dan lainnya.
### 📣 Pengumuman - _Proyek Baru yang dibuat menggunakan Generative AI_
### 📣 Pengumuman - _Proyek Baru untuk dibangun menggunakan Generative AI_
Proyek Asisten AI baru saja ditambahkan, lihat [proyek](./9-chat-project/README.md)
Proyek Asisten AI baru saja ditambahkan, cek [proyek](./9-chat-project/README.md)
### 📣 Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru saja dirilis
@ -73,18 +73,18 @@ Jangan lewatkan kurikulum Generative AI baru kami!
Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai!
![Latar Belakang](../../translated_images/id/background.148a8d43afde5730.webp)
![Background](../../translated_images/id/background.148a8d43afde5730.webp)
- Pelajaran yang mencakup semuanya dari dasar hingga RAG.
- Pelajaran mencakup segala sesuatu mulai dari dasar hingga RAG.
- Berinteraksi dengan karakter sejarah menggunakan GenAI dan aplikasi pendamping kami.
- Narasi yang menyenangkan dan menarik, Anda akan melakukan perjalanan waktu!
![karakter](../../translated_images/id/character.5c0dd8e067ffd693.webp)
![character](../../translated_images/id/character.5c0dd8e067ffd693.webp)
Setiap pelajaran mencakup tugas untuk diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk membimbing Anda mempelajari topik seperti:
Setiap pelajaran mencakup tugas yang harus diselesaikan, pemeriksaan pengetahuan dan tantangan untuk memandu Anda mempelajari topik seperti:
- Prompting dan rekayasa prompt
- Generasi aplikasi teks dan gambar
- Pembuatan aplikasi teks dan gambar
- Aplikasi pencarian
Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai!
@ -93,37 +93,37 @@ Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk
## 🌱 Memulai
> **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)!
> **Guru**, kami telah [menyertakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami sangat menghargai masukan Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Pembelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis sebelum kuliah dan lanjutkan dengan membaca materi kuliah, menyelesaikan berbagai aktivitas dan periksa pemahaman Anda dengan kuis pasca kuliah.
**[Pembelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis pra-kuliah dan lanjutkan dengan membaca materi kuliah, menyelesaikan berbagai aktivitas dan memeriksa pemahaman Anda dengan kuis pasca-kuliah.
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 memperkaya pengalaman belajar Anda, hubungkan dengan rekan Anda untuk mengerjakan proyek bersama! Diskusi dianjurkan di [forum diskusi](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kami di mana tim moderator kami akan siap menjawab pertanyaan Anda.
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.
Untuk melanjutkan pendidikan Anda, kami sangat menyarankan menjelajahi [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan studi tambahan.
### 📋 Menyiapkan lingkungan Anda
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).
Kurikulum ini sudah memiliki lingkungan pengembangan siap pakai! Saat Anda memulai, Anda dapat memilih menjalankan kurikulum di [Codespace](https://github.com/features/codespaces/) (_lingkungan berbasis browser tanpa perlu instalasi_), atau secara lokal di komputer Anda menggunakan editor teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### 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.
#### Buat repositori Anda
Agar Anda mudah menyimpan pekerjaan Anda, disarankan untuk membuat salinan repositori ini sendiri. Anda dapat melakukannya dengan mengklik tombol **Use this template** di bagian atas halaman. Ini akan membuat repositori baru di akun GitHub Anda dengan salinan kurikulum.
Ikuti langkah-langkah ini:
1. **Fork Repository**: Klik tombol "Fork" di pojok kanan atas halaman ini.
2. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Ikuti langkah berikut:
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`
#### Menjalankan kurikulum di Codespace
Di salinan repository yang Anda buat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda bekerja di sana.
Di salinan repositori yang Anda buat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda bekerja.
![Codespace](../../translated_images/id/createcodespace.0238bbf4d7a8d955.webp)
#### Menjalankan kurikulum secara lokal di komputer Anda
Untuk menjalankan kurikulum ini secara lokal di komputer Anda, Anda memerlukan editor teks, browser, dan alat baris perintah. Pelajaran pertama kami, [Pengenalan Bahasa Pemrograman dan Alat Perdagangan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan membimbing Anda melalui berbagai opsi untuk masing-masing alat ini agar Anda dapat memilih yang terbaik untuk Anda.
Untuk menjalankan kurikulum ini secara lokal di komputer Anda, Anda memerlukan editor teks, browser dan alat baris perintah. Pelajaran pertama kami, [Pengantar Bahasa Pemrograman dan Alat Perdagangan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan memandu Anda melalui berbagai opsi untuk setiap 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 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:
1. Kloning repositori Anda ke komputer. Anda dapat melakukannya dengan mengklik tombol **Code** dan menyalin URL-nya:
[CodeSpace](./images/createcodespace.png)
@ -133,15 +133,15 @@ Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstud
git clone <your-repository-url>
```
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.
2. Buka folder di Visual Studio Code. Anda dapat melakukannya dengan mengklik **File** > **Open Folder** dan memilih folder yang baru saja Anda kloning.
> Ekstensi Visual Studio Code yang direkomendasikan:
> Ekstensi Visual Studio Code yang Direkomendasikan:
>
> * [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
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk melihat pratinjau halaman HTML di dalam Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - untuk membantu Anda menulis kode lebih cepat
## 📂 Setiap pelajaran termasuk:
## 📂 Setiap pelajaran mencakup:
- sketchnote opsional
- video tambahan opsional
@ -152,63 +152,63 @@ Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstud
- tantangan
- bacaan tambahan
- tugas
- [kuis pasca-pelajaran](https://ff-quizzes.netlify.app/web/)
- [kuis setelah pelajaran](https://ff-quizzes.netlify.app/web/)
> **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`.
> **Catatan tentang kuis**: Semua kuis terdapat di dalam folder Quiz-app, total 48 kuis dengan tiga pertanyaan setiap kuis. Kuis tersedia [di sini](https://ff-quizzes.netlify.app/web/), aplikasi kuis dapat dijalankan secara lokal atau dideploy ke Azure; ikuti instruksi di folder `quiz-app`.
## 🗃️ 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 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 |
| 01 | Memulai | Pengenalan Pemrograman dan Alat Bantu | Pelajari dasar-dasar di balik sebagian besar bahasa pemrograman dan tentang perangkat lunak yang membantu pengembang profesional melakukan pekerjaan mereka | [Pengantar 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 dalam basis kode | [Pengantar GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Memulai | Aksesibilitas | Pelajari dasar-dasar aksesibilitas web | [Dasar-Dasar Aksesibilitas](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Dasar JS | Tipe Data JavaScript | Dasar-dasar tipe data pada 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 |
| 06 | Dasar JS | Membuat Keputusan dengan JS | Pelajari bagaimana membuat kondisi dalam kode menggunakan metode pengambilan keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Dasar JS | Array dan Perulangan | Bekerja dengan data menggunakan array dan perulangan di JavaScript | [Array dan Perulangan](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktik | Bangun HTML untuk membuat terrarium online, fokus pada membangun tata letak | [Pengantar ke HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Praktik | Bangun CSS untuk menata terrarium online, fokus pada dasar-dasar CSS termasuk membuat halaman responsif | [Pengantar ke 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 seret dan lepas, fokus pada closures dan manipulasi DOM | [JavaScript Closures, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Membangun Game Mengetik | Pelajari cara menggunakan event keyboard untuk menjalankan logika aplikasi JavaScript | [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 bagaimana membuat pondasi elemen pertama sebuah ekstensi browser | [Tentang Browser](./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 | [API, Form, 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, kinerja web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang kinerja web dan beberapa optimisasi untuk membuat | [Tugas Latar Belakang dan Kinerja](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Pengembangan Game Lebih Lanjut dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan membangun game | [Pengantar Pengembangan Game Lanjutan](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Menggambar di kanvas | Pelajari tentang Canvas API, 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 bisa 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 | Membuat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan menyediakan fungsi cooldown untuk memastikan kinerja game | [Deteksi Tabrakan](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Menghitung skor | Melakukan perhitungan matematika berdasarkan status dan kinerja game | [Menghitung Skor](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Mengakhiri dan memulai ulang game | Pelajari tentang mengakhiri dan memulai ulang game, termasuk membersihkan aset dan mengatur ulang nilai variabel | [Kondisi Akhir](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Template HTML dan 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 |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Membuat Formulir Login dan Registrasi | Pelajari tentang membuat formulir dan menangani rutin validasi | [Formulir](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode Pengambilan dan Penggunaan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi Anda, bagaimana mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 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 |
| 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
Kurikulum kami dirancang dengan dua prinsip pedagogis utama:
Kurikulum kami dirancang dengan dua prinsip pedagogis utama dalam pikiran:
* 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 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.
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, permainan gaya invasi ruang angkasa, dan aplikasi perbankan untuk bisnis. Pada akhir seri, siswa akan memperoleh pemahaman yang kuat tentang pengembangan web.
> 🎓 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 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.
Dengan memastikan konten sesuai dengan proyek, proses pembelajaran menjadi lebih menarik bagi siswa dan retensi konsep akan meningkat. Kami juga menulis beberapa pelajaran awal mengenai dasar-dasar JavaScript untuk memperkenalkan konsep, dipadukan dengan video dari koleksi tutorial video "[Seri Pemula untuk: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya berkontribusi pada kurikulum ini.
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.
Selain itu, kuis dengan risiko rendah sebelum kelas menetapkan niat siswa terhadap pembelajaran topik, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan dan dapat diambil secara lengkap atau sebagian. Proyek dimulai kecil dan menjadi semakin kompleks pada akhir siklus 12 minggu.
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)".
Meskipun kami sengaja menghindari mengenalkan framework JavaScript untuk fokus pada keterampilan dasar yang dibutuhkan sebagai pengembang web sebelum menggunakan framework, langkah selanjutnya yang baik setelah menyelesaikan kurikulum ini adalah mempelajari Node.js melalui koleksi video lain: "[Seri Pemula untuk: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Kunjungi [Kode Etik](CODE_OF_CONDUCT.md) dan panduan [Kontribusi](CONTRIBUTING.md) kami. Kami menyambut umpan balik konstruktif Anda!
> Kunjungi [Kode Etik](CODE_OF_CONDUCT.md) dan pedoman [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, [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`.
Anda dapat menjalankan dokumentasi ini secara offline dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repositori ini, [pasang Docsify](https://docsify.js.org/#/quickstart) pada mesin lokal Anda, lalu di folder root dari repositori ini, ketik `docsify serve`. Situs web akan dilayani pada port 3000 di localhost Anda: `localhost:3000`.
## 📘 PDF
PDF dari semua pelajaran dapat ditemukan [di sini](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
@ -216,7 +216,7 @@ PDF dari semua pelajaran dapat ditemukan [di sini](https://microsoft.github.io/W
## 🎒 Kursus Lainnya
Tim kami memproduksi kursus lain! Lihat:
Tim kami memproduksi kursus lain! Periksa:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -225,7 +225,7 @@ Tim kami memproduksi 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 / Agens
### 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)
@ -260,11 +260,11 @@ Tim kami memproduksi kursus lain! Lihat:
## Mendapatkan Bantuan
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.
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 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 menemukan kesalahan saat membangun kunjungi:
Jika Anda memiliki masukan produk atau 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 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.
**Disclaimer**:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk keakuratan, harap diingat bahwa terjemahan otomatis dapat mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sah. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

59
translations/id/lesson-template/README.md
Unescape View File

@ -1,30 +1,48 @@
# [Topik Pelajaran]
# Topik Pelajaran
![Sematkan video di sini](../../../lesson-template/video-url)
## 🎥 Video
## [Kuis Pra-Pelajaran](../../../lesson-template/quiz-url)
> Tambahkan video tertanam atau tautan pelajaran di sini.
[Deskripsikan apa yang akan kita pelajari]
---
## Kuis pra kuliah
> Tambahkan tautan kuis di sini jika tersedia.
---
Berikan gambaran singkat tentang apa yang akan dipelajari siswa dalam pelajaran ini.
---
### Pendahuluan
Jelaskan apa yang akan dibahas
Berikan pengantar singkat yang menjelaskan apa yang akan dibahas dalam pelajaran ini.
> Catatan
---
### Prasyarat
Langkah-langkah apa yang seharusnya sudah diselesaikan sebelum pelajaran ini?
Daftar konsep atau topik yang sudah harus dikenal siswa sebelum memulai pelajaran ini.
---
### Persiapan
Langkah-langkah persiapan untuk memulai pelajaran ini
Daftar langkah penyiapan atau alat yang diperlukan sebelum memulai pelajaran.
---
[Langkah-langkah melalui konten dalam blok]
### Konten
Jelaskan isi pelajaran secara bertahap dalam bagian-bagian yang terstruktur.
---
## [Topik 1]
## Topik 1
### Tugas:
@ -34,23 +52,28 @@ Bekerja sama untuk secara bertahap meningkatkan basis kode Anda guna membangun p
code blocks
```
✅ Pemeriksaan Pengetahuan - gunakan momen ini untuk memperluas pengetahuan siswa dengan pertanyaan terbuka
✅ Pemeriksaan Pengetahuan
Gunakan momen ini untuk menguji pengetahuan siswa dengan pertanyaan terbuka.
## [Topik 2]
## Topik 2
## Topik 3
## [Topik 3]
🚀 Tantangan
Tambahkan tantangan kolaboratif bagi siswa untuk meningkatkan proyek.
🚀 Tantangan: Tambahkan tantangan bagi siswa untuk dikerjakan secara kolaboratif di kelas guna meningkatkan proyek
Opsional: Tambahkan tangkapan layar dari UI pelajaran yang telah selesai jika sesuai.
Opsional: tambahkan tangkapan layar dari antarmuka pelajaran yang telah selesai jika sesuai
## Kuis pasca kuliah
## [Kuis Pasca-Pelajaran](../../../lesson-template/quiz-url)
Tambahkan tautan kuis di sini setelah menyelesaikan pelajaran.
## Tinjauan & Studi Mandiri
## Tinjauan & Belajar Mandiri
**Tugas Dikumpulkan [MM/YY]**: [Nama Tugas](assignment.md)
**Tugas Jatuh Tempo [MM/YY]**: [Nama Tugas](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk memberikan hasil yang akurat, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk mencapai akurasi, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sah. Untuk informasi penting, disarankan menggunakan terjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau kesalahan interpretasi yang timbul dari penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

10
translations/ms/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-20T16:45:17+00:00",
"translation_date": "2026-04-24T22:06:14+00:00",
"source_file": "AGENTS.md",
"language_code": "ms"
},
@ -516,8 +516,8 @@
"language_code": "ms"
},
"README.md": {
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T16:45:54+00:00",
"original_hash": "b1766b45123e043ef2c72612f28b86dd",
"translation_date": "2026-04-24T22:02:49+00:00",
"source_file": "README.md",
"language_code": "ms"
},
@ -564,8 +564,8 @@
"language_code": "ms"
},
"lesson-template/README.md": {
"original_hash": "0494be70ad7fadd13a8c3d549c23e355",
"translation_date": "2025-08-27T22:55:02+00:00",
"original_hash": "ce2f64fd0d518f0500fc082b97c1e662",
"translation_date": "2026-04-24T22:02:58+00:00",
"source_file": "lesson-template/README.md",
"language_code": "ms"
},

382
translations/ms/AGENTS.md
Unescape View File

@ -2,27 +2,27 @@
## Gambaran Projek
Ini adalah repositori kurikulum pendidikan untuk mengajar asas pembangunan web kepada pemula. Kurikulum ini merupakan kursus menyeluruh 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 menyeluruh selama 12 minggu yang dibangunkan oleh Microsoft Cloud Advocates, yang menampilkan 24 pelajaran praktik meliputi JavaScript, CSS, dan HTML.
### Komponen Utama
- **Kandungan Pendidikan**: 24 pelajaran tersusun yang dianjurkan dalam modul berasaskan projek
- **Projek Praktikal**: Terrarium, Permainan Mengetik, Sambungan Pelayar, Permainan Angkasa, Aplikasi Perbankan, Penyunting Kod, dan Pembantu Chat AI
- **Kuis Interaktif**: 48 kuiz dengan 3 soalan setiap satu (penilaian sebelum/selepas 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 diatur 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 50+ bahasa melalui GitHub Actions
- **Teknologi**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (untuk projek AI)
### Seni Bina
### Arkitektur
- Repositori pendidikan dengan struktur berasaskan pelajaran
- Setiap folder pelajaran mengandungi README, contoh kod, dan penyelesaian
- Projek bebas di direktori berasingan (quiz-app, pelbagai projek pelajaran)
- Sistem terjemahan menggunakan GitHub Actions (co-op-translator)
- Dokumentasi disajikan melalui Docsify dan tersedia dalam format PDF
- 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 disajikan melalui Docsify dan tersedia dalam bentuk PDF
## Perintah Persediaan
Repositori ini terutamanya untuk penggunaan kandungan pendidikan. Untuk bekerja dengan projek tertentu:
Repositori ini terutamanya untuk penggunaan kandungan pendidikan. Untuk bekerja dengan projek khusus:
### Persediaan Repositori Utama
@ -31,22 +31,22 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Persediaan Aplikasi Kuis (Vue 3 + Vite)
### Persediaan Quiz App (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Mula pelayan pembangunan
npm run dev # Mulakan pelayan pembangunan
npm run build # Bina untuk pengeluaran
npm run lint # Jalankan ESLint
```
### API Projek Bank (Node.js + Express)
### Projek API Bank (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Mula pelayan API
npm start # Mulakan server API
npm run lint # Jalankan ESLint
npm run format # Format dengan Prettier
```
@ -56,7 +56,7 @@ npm run format # Format dengan Prettier
```bash
cd 5-browser-extension/solution
npm install
# Ikuti arahan pemuatan pelanjutan khusus pelayar
# Ikuti arahan pemuatan sambungan khusus pelayar
```
### Projek Permainan Angkasa
@ -64,10 +64,10 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Buka index.html dalam pelayar atau guna Live Server
# Buka index.html dalam pelayar atau gunakan Live Server
```
### Projek Chat (Backend Python)
### Projek Sembang (Backend Python)
```bash
cd 9-chat-project/solution/backend/python
@ -80,37 +80,37 @@ python api.py
### Untuk Penyumbang Kandungan
1. **Fork repositori** ke akaun GitHub anda
2. **Clone fork anda** secara lokal
3. **Buat cawangan baru** untuk perubahan anda
4. Lakukan 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. **Cipta 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. Selesaikan kuiz pra-pelajaran di https://ff-quizzes.netlify.app/web/
5. Kerjakan 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. Lengkapkan kuiz pra-pelajaran di https://ff-quizzes.netlify.app/web/
5. Kerjakan contoh kod dalam folder pelajaran
6. Selesaikan tugasan dan cabaran
7. Ambil kuiz pasca-pelajaran
### Pembangunan Langsung
- **Dokumentasi**: Jalankan `docsify serve` di root (port 3000)
- **Aplikasi Kuis**: Jalankan `npm run dev` di direktori quiz-app
- **Projek**: Gunakan sambungan VS Code Live Server untuk projek HTML
- **Projek API**: Jalankan `npm start` di direktori API berkaitan
- **Dokumentasi**: Jalankan `docsify serve` dalam root (port 3000)
- **Quiz App**: 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 yang berkaitan
## Arahan Ujian
### Ujian Aplikasi Kuis
### Ujian Quiz App
```bash
cd quiz-app
npm run lint # Periksa isu gaya kod
npm run lint # Semak untuk isu gaya kod
npm run build # Sahkan pembinaan berjaya
```
@ -124,159 +124,159 @@ node server.js # Sahkan pelayan bermula tanpa ralat
### Pendekatan Ujian Umum
- Ini adalah repositori pendidikan tanpa ujian automatik menyeluruh
- Ujian manual fokus pada:
- Contoh kod berjalan tanpa ralat
- Pautan dalam dokumentasi berfungsi dengan betul
- Pembinaan projek selesai dengan jayanya
- Contoh mengikuti amalan terbaik
- Ini adalah repositori pendidikan tanpa ujian automatik yang menyeluruh
- Ujian manual memberi tumpuan pada:
- Contoh kod berjalan tanpa ralat
- Pautan dalam dokumentasi berfungsi dengan betul
- Pembinaan projek selesai dengan jayanya
- Contoh mengikuti amalan terbaik
### Semakan Pra-penghantaran
### Semakan Pra-Penghantaran
- Jalankan `npm run lint` di direktori yang mengandungi package.json
- Sahkan pautan markdown sah
- Uji contoh kod dalam pelayar atau Node.js
- Periksa terjemahan mengekalkan struktur betul
- Jalankan `npm run lint` dalam direktori yang ada package.json
- Sahkan pautan markdown adalah sah
- Uji contoh kod dalam pelayar atau Node.js
- Periksa terjemahan mengekalkan struktur yang 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 di mana dikonfigurasi
- Gunakan sintaks ES6+ moden
- Ikuti konfigurasi ESLint piawai yang disediakan dalam projek
- Gunakan nama pembolehubah dan fungsi yang bermakna untuk kejelasan pendidikan
- Tambah komen yang menerangkan konsep untuk pelajar
- Format menggunakan Prettier jika dikonfigurasi
### HTML/CSS
- Elemen HTML5 semantik
- Prinsip reka bentuk responsif
- Konvensyen penamaan kelas yang jelas
- Komen menerangkan teknik CSS untuk pelajar
- Elemen HTML5 semantik
- Prinsip reka bentuk responsif
- Konvensyen penamaan kelas yang jelas
- Komen menerangkan teknik CSS untuk pelajar
### Python
- Garis panduan gaya PEP 8
- Contoh kod yang jelas dan pendidikan
- Petunjuk jenis di mana berguna untuk pembelajaran
- Panduan gaya PEP 8
- Contoh kod jelas dan pendidikan
- Petunjuk jenis jika membantu pembelajaran
### Dokumentasi Markdown
- Hirarki tajuk yang jelas
- Blok kod dengan spesifikasi bahasa
- Pautan ke sumber tambahan
- Tangkapan skrin dan imej dalam direktori `images/`
- Teks alt untuk imej bagi kebolehcapaian
- Hierarki tajuk yang jelas
- Blok kod dengan spesifikasi bahasa
- Pautan ke sumber tambahan
- Tangkapan skrin dan imej dalam direktori `images/`
- Teks alternatif untuk imej untuk aksesibiliti
### Pengurusan Fail
### Organisasi Fail
- Pelajaran dinomborkan secara berurutan (1-getting-started-lessons, 2-js-basics, dll.)
- Setiap projek mempunyai direktori `solution/` dan sering `start/` atau `your-work/`
- Imej disimpan dalam folder `images/` khusus pelajaran
- Terjemahan dalam struktur `translations/{language-code}/`
- Pelajaran dinombor secara berurutan (1-getting-started-lessons, 2-js-basics, dll.)
- Setiap projek mempunyai direktori `solution/` dan sering `start/` atau `your-work/`
- Imej disimpan dalam folder `images/` khusus pelajaran
- Terjemahan dalam struktur `translations/{language-code}/`
## Pembinaan dan Penghantaran
### Penghantaran Aplikasi Kuis (Azure Static Web Apps)
### Penghantaran Quiz App (Azure Static Web Apps)
quiz-app dikonfigurasi untuk penghantaran Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Membuat folder dist/
# Melakukan deploy melalui workflow GitHub Actions apabila ada push ke main
# Melakukan deploy melalui aliran 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 aplikasi**: `/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 # Hasilkan PDF daripada docs
npm run convert # Jana PDF dari docs
```
### Dokumentasi Docsify
```bash
npm install -g docsify-cli # Pasang Docsify secara global
docsify serve # Hidangkan pada localhost:3000
docsify serve # Hidangkan di localhost:3000
```
### Pembinaan Khusus Projek
### Pembinaan Projek-spesifik
Setiap direktori projek mungkin mempunyai proses binaan sendiri:
- Projek Vue: `npm run build` menghasilkan bundle pengeluaran
- Projek statik: Tiada langkah binaan, hidangkan fail secara langsung
Setiap direktori projek mungkin mempunyai proses binaan sendiri:
- Projek Vue: `npm run build` menghasilkan bundel produksi
- Projek statik: Tiada langkah binaan, hidangkan fail terus
## Garis Panduan Pull Request
### Format Tajuk
Gunakan tajuk jelas dan deskriptif yang menunjukkan bidang perubahan:
- `[Quiz-app] Tambah kuiz baru untuk pelajaran X`
- `[Lesson-3] Betulkan ejaan dalam projek terrarium`
- `[Translation] Tambah terjemahan Sepanyol untuk pelajaran 5`
- `[Docs] Kemas kini arahan persediaan`
Gunakan tajuk yang jelas dan deskriptif menunjukkan kawasan perubahan:
- `[Quiz-app] Tambah kuiz baru untuk pelajaran X`
- `[Lesson-3] Betulkan salah ejaan dalam projek terrarium`
- `[Translation] Tambah terjemahan Sepanyol untuk pelajaran 5`
- `[Docs] Kemas kini arahan persediaan`
### Semakan Diperlukan
Sebelum menghantar PR:
1. **Kualiti Kod**:
- Jalankan `npm run lint` di direktori projek terjejas
- Betulkan semua ralat dan amaran linting
1. **Kualiti Kod**:
- Jalankan `npm run lint` dalam direktori projek yang terlibat
- Betulkan semua ralat dan amaran lintingan
2. **Pengesahan Pembinaan**:
- Jalankan `npm run build` jika berkaitan
- Pastikan tiada ralat binaan
2. **Pengesahan Binaan**:
- Jalankan `npm run build` jika berkenaan
- Pastikan tiada ralat binaan
3. **Pengesahan Pautan**:
- Uji semua pautan markdown
- Sahkan rujukan imej berfungsi
3. **Pengesahan Pautan**:
- Uji semua pautan markdown
- Sahkan rujukan imej berfungsi
4. **Semakan Kandungan**:
- Semak ejaan dan tatabahasa
- Pastikan contoh kod tepat dan pendidikan
- Sahkan terjemahan mengekalkan maksud asal
4. **Semakan Kandungan**:
- Semak ejaan dan tatabahasa
- Pastikan contoh kod betul dan pendidikan
- Periksa terjemahan mengekalkan makna asal
### Keperluan Penyumbangan
### Keperluan Sumbangan
- Setuju dengan Microsoft CLA (semakan automatik pada PR pertama)
- Ikuti [Kod Etika Sumber Terbuka Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Lihat [CONTRIBUTING.md](./CONTRIBUTING.md) untuk garis panduan terperinci
- Rujuk nombor isu dalam penerangan PR jika berkenaan
- Setuju dengan Microsoft CLA (semakan automatik pada PR pertama)
- Ikut [Kod Tingkah Laku Sumber Terbuka Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Lihat [CONTRIBUTING.md](./CONTRIBUTING.md) untuk garis panduan terperinci
- Rujuk nombor isu dalam keterangan PR jika berkenaan
### Proses Semakan
- PR disemak oleh penyelenggara dan komuniti
- Kejelasan pendidikan diutamakan
- Contoh kod harus mengikuti amalan terbaik terkini
- Terjemahan disemak ketepatan dan kesesuaian budaya
- PR disemak oleh penyelenggara dan komuniti
- Kejelasan pendidikan diutamakan
- Contoh kod harus mengikuti amalan terbaik semasa
- Terjemahan disemak untuk ketepatan dan kesesuaian budaya
## Sistem Terjemahan
### Terjemahan Automatik
- Menggunakan GitHub Actions dengan aliran kerja co-op-translator
- Menterjemah ke 50+ bahasa secara automatik
- Fail sumber dalam direktori utama
- Fail terjemahan dalam direktori `translations/{language-code}/`
- Menggunakan GitHub Actions dengan aliran kerja co-op-translator
- Menterjemah ke 50+ bahasa secara automatik
- Fail sumber dalam direktori utama
- Fail terjemahan dalam direktori `translations/{language-code}/`
### Menambah Penambahbaikan Terjemahan Manual
1. Cari fail dalam `translations/{language-code}/`
2. Lakukan penambahbaikan sambil mengekalkan struktur
3. Pastikan contoh kod kekal berfungsi
4. Uji sebarang kandungan kuiz yang dialih bahasa
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 dialih bahasa
### Metadata Terjemahan
Fail terjemahan termasuk tajuk metadata:
Fail terjemahan termasuk header metadata:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Pengesanan dan Penyelesaian Masalah
## Pengesanan Ralat dan Penyelesaian Masalah
### Isu Biasa
### Isu Umum
**Aplikasi kuiz gagal dimulakan**:
- Periksa versi Node.js (disyorkan v14+)
- Padamkan `node_modules` dan `package-lock.json`, jalankan `npm install` semula
- Semak konflik port (lalai: Vite guna port 5173)
**Aplikasi kuiz gagal mula**:
- Periksa versi Node.js (disyorkan v14+)
- Padam `node_modules` dan `package-lock.json`, jalankan `npm install` semula
- Periksa konflik port (lalai: Vite menggunakan port 5173)
**Pelayan API tidak mula**:
- Sahkan versi Node.js memenuhi minimum (node >=10)
- Periksa jika port sudah digunakan
- Pastikan semua kebergantungan dipasang dengan `npm install`
**Pelayan API gagal mula**:
- Sahkan versi Node.js memenuhi minimum (node >=10)
- Periksa jika port sudah digunakan
- Pastikan semua kebergantungan dipasang dengan `npm install`
**Sambungan pelayar tidak dimuat**:
- Periksa manifest.json diformat dengan betul
- Semak konsol pelayar untuk ralat
- Ikuti arahan pemasangan sambungan khusus pelayar
**Sambungan pelayar gagal dimuat**:
- Sahkan manifest.json diformat dengan betul
- Periksa konsol pelayar untuk ralat
- Ikuti arahan pemasangan sambungan pelayar khusus
**Isu projek chat Python**:
- Pastikan pakej OpenAI dipasang: `pip install openai`
- Sahkan pembolehubah persekitaran GITHUB_TOKEN diset
- Periksa kebenaran akses GitHub Models
**Isu projek sembang Python**:
- Pastikan pakej OpenAI dipasang: `pip install openai`
- Sahkan pembolehubah persekitaran GITHUB_TOKEN ditetapkan
- Semak kebenaran akses GitHub Models
**Docsify tidak menyajikan dokumen**:
- Pasang docsify-cli secara global: `npm install -g docsify-cli`
- Jalankan dari direktori root repositori
- Semak bahawa `docs/_sidebar.md` wujud
**Docsify tidak menyajikan docs**:
- Pasang docsify-cli secara global: `npm install -g docsify-cli`
- Jalankan dari direktori root repositori
- Periksa bahawa `docs/_sidebar.md` wujud
### Tips Persekitaran Pembangunan
### Tip Persekitaran Pembangunan
- Gunakan VS Code dengan sambungan Live Server untuk projek HTML
- Pasang sambungan ESLint dan Prettier untuk format konsisten
- Gunakan DevTools pelayar untuk debug JavaScript
- Untuk projek Vue, pasang sambungan Vue DevTools pelayar
- Gunakan VS Code dengan sambungan Live Server untuk projek HTML
- Pasang sambungan ESLint dan Prettier untuk format konsisten
- Gunakan DevTools pelayar untuk debug JavaScript
- Untuk projek Vue, pasang sambungan pelayar Vue DevTools
### Pertimbangan Prestasi
- Bilangan fail terjemahan yang banyak (50+ bahasa) menyebabkan klon penuh besar
- Gunakan clone cetek jika hanya bekerja dengan kandungan: `git clone --depth 1`
- Kecualikan terjemahan dari carian ketika bekerja pada kandungan Inggeris
- Proses binaan mungkin perlahan pada kali pertama (npm install, binaan Vite)
- Bilangan fail terjemahan yang besar (50+ bahasa) menjadikan clone penuh besar
- Gunakan shallow clone jika hanya bekerja pada kandungan: `git clone --depth 1`
- Kecualikan terjemahan dari carian apabila bekerja pada kandungan Bahasa Inggeris
- Proses binaan mungkin lambat pada run pertama (npm install, binaan Vite)
## Pertimbangan Keselamatan
### Pembolehubah Persekitaran
- Kunci API tidak boleh dimuat naik ke repositori
- Gunakan fail `.env` (sudah disenarai dalam `.gitignore`)
- Dokumentasikan pembolehubah persekitaran yang diperlukan dalam README projek
- Kunci API tidak harus dikomit ke repositori
- Gunakan fail `.env` (sudah dalam `.gitignore`)
- Dokumenkan pembolehubah persekitaran yang diperlukan dalam README projek
### Projek Python
- Gunakan persekitaran maya: `python -m venv venv`
- Kemas kini kebergantungan secara berkala
- Token GitHub hendaklah mempunyai kebenaran minimum diperlukan
- Gunakan persekitaran maya: `python -m venv venv`
- Kekalkan kebergantungan sentiasa dikemas kini
- Token GitHub harus mempunyai kebenaran minimum diperlukan
### Akses GitHub Models
- Token Akses Peribadi (PAT) diperlukan untuk GitHub Models
- Token disimpan sebagai pembolehubah persekitaran
- Jangan sesekali memuat naik token atau kelayakan
- Token Akses Peribadi (PAT) diperlukan untuk GitHub Models
- Token harus disimpan sebagai pembolehubah persekitaran
- Jangan sekali-kali komit token atau kelayakan
## Nota Tambahan
### Sasaran Pengguna
### Sasaran Audiens
- Pemula lengkap dalam pembangunan web
- Pelajar dan pembelajar kendiri
- Guru yang menggunakan kurikulum dalam bilik darjah
- Kandungan direka untuk kebolehcapaian dan pembinaan kemahiran secara berperingkat
- Pemula lengkap kepada pembangunan web
- Pelajar dan pembelajar sendiri
- Guru yang menggunakan kurikulum dalam bilik darjah
- Kandungan direka untuk aksesibiliti dan pembinaan kemahiran secara berperingkat
### Falsafah Pendidikan
- Pendekatan pembelajaran berasaskan projek
- Pemeriksaan pengetahuan kerap (kuiz)
- Latihan amali pengkodan
- Contoh aplikasi dunia sebenar
- Fokus pada asas sebelum kerangka kerja
- Pendekatan pembelajaran berasaskan projek
- Pemeriksaan pengetahuan kerap (kuiz)
- Latihan pengkodan praktikal
- Contoh aplikasi dunia sebenar
- Fokus pada asas sebelum kerangka kerja
### Penyelenggaraan Repositori
- Komuniti pelajar dan penyumbang aktif
- Kemas kini kandungan dan kebergantungan secara berkala
- Isu dan perbincangan dipantau oleh penyelenggara
- Kemas kini terjemahan automatik melalui GitHub Actions
- Komuniti pelajar dan penyumbang yang aktif
- Kemas kini biasa pada 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 Pelajar 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) disarankan untuk pelajar
- Kursus tambahan: Generative AI, Data Science, ML, IoT kurikulum tersedia
### Bekerja dengan Projek Tertentu
### Bekerja dengan Projek Spesifik
Untuk arahan terperinci projek individu, rujuk fail README di:
- `quiz-app/README.md` - aplikasi kuiz Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan pengesahan
- `5-browser-extension/README.md` - pembangunan sambungan pelayar
- `6-space-game/README.md` - pembangunan permainan berasaskan canvas
- `9-chat-project/README.md` - projek pembantu chat AI
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 pelayar
- `6-space-game/README.md` - pembangunan permainan berasaskan kanvas
- `9-chat-project/README.md` - projek pembantu sembang AI
### Struktur Monorepo
Walaupun bukan monorepo tradisional, repositori ini mengandungi pelbagai projek bebas:
- Setiap pelajaran berdiri sendiri
- Projek tidak berkongsi kebergantungan
- Kerja pada projek individu tanpa menjejaskan yang lain
- Clone keseluruhan repositori untuk pengalaman kurikulum penuh
Walaupun bukan monorepo tradisional, repositori ini mengandungi pelbagai projek berdikari:
- Setiap pelajaran berdikari
- Projek tidak berkongsi kebergantungan
- Bekerja pada projek individu tanpa menjejaskan yang lain
- Clone keseluruhan repositori untuk pengalaman kurikulum penuh
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang sahih. Untuk maklumat penting, terjemahan profesional oleh manusia adalah disyorkan. Kami tidak bertanggungjawab terhadap sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang sahih. Untuk maklumat penting, terjemahan profesional oleh manusia adalah digalakkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

160
translations/ms/README.md
Unescape View File

@ -12,27 +12,27 @@
# Pembangunan Web untuk Pemula - Kurikulum
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!
Belajar asas pembangunan web dengan kursus komprehensif 12 minggu oleh Microsoft Cloud Advocates. Setiap daripada 24 pelajaran menyelami JavaScript, CSS, dan HTML melalui projek hands-on seperti terrarium, peluasan pelayar, dan permainan angkasa. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimakan pengekalan pengetahuan dengan pedagogi berasaskan projek yang berkesan. Mulakan perjalanan pengkodan anda hari ini!
Sertai Komuniti Discord Azure AI Foundry
Sertai Discord Azure AI Foundry dan temui pakar serta pembangun lain.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ikuti langkah-langkah berikut untuk memulakan menggunakan sumber ini:
Ikuti langkah-langkah ini untuk mula menggunakan sumber-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. **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)
#### Disokong melalui GitHub Action (Automatik & Sentiasa Dikemas Kini)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[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)
[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](./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 Secara Tempatan?**
> **Lebih Suka Clone Secara Tempatan?**
>
> Repositori ini merangkumi lebih daripada 50 terjemahan bahasa yang meningkatkan saiz muat turun dengan ketara. Untuk clone tanpa terjemahan, gunakan sparse checkout:
> Repositori ini termasuk lebih 50+ terjemahan bahasa yang secara signifikan meningkatkan saiz muat turun. Untuk clone tanpa terjemahan, gunakan sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,20 +48,20 @@ Ikuti langkah-langkah berikut untuk memulakan menggunakan sumber ini:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Ini memberi anda semua yang anda perlukan untuk melengkapkan kursus dengan muat turun lebih pantas.
> Ini memberi anda semua yang anda perlukan untuk menamatkan kursus dengan muat turun lebih pantas.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
**Jika anda ingin terjemahan tambahan, bahasa yang disokong disenaraikan di sini. [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 pelajar?_
Lawati [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana anda akan menemui sumber untuk pemula, 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.
Lawati [**Halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana anda akan dapati sumber permulaan, pek Pelajar dan juga cara untuk mendapatkan baucar sijil percuma. Ini adalah halaman yang anda ingin tandai dan semak dari masa ke masa kerana kami menukar kandungan setiap bulan.
### 📣 Pengumuman - Cabaran Mod Ejen GitHub Copilot Baru untuk diselesaikan!
### 📣 Pengumuman - Cabaran mod GitHub Copilot Agent Baru untuk diselesaikan!
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.
Cabaran baru ditambah, cari "GitHub Copilot Agent Challenge 🚀" di kebanyakan bab. Itu cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan mod Agent. Jika anda belum pernah menggunakan mod Agent 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_
@ -69,71 +69,71 @@ Projek Pembantu AI baru sahaja ditambah, semak [projek](./9-chat-project/README.
### 📣 Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru sahaja dikeluarkan
Jangan ketinggalan kurikulum baru Generative AI kami!
Jangan terlepas kurikulum Generative AI kami yang baru!
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 mula!
![Background](../../translated_images/ms/background.148a8d43afde5730.webp)
- Pelajaran merangkumi segala-galanya dari asas hingga RAG.
- Pelajaran meliputi segala 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 melakukan perjalanan masa!
![character](../../translated_images/ms/character.5c0dd8e067ffd693.webp)
Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda dalam topik seperti:
- Prompting dan kejuruteraan arahan
Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda tentang topik seperti:
- Prompting dan kejuruteraan prompt
- Penjanaan aplikasi teks dan imej
- 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 mula!
## 🌱 Memulakan
> **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)!
> **Guru**, kami telah [sertakan beberapa cadangan](for-teachers.md) bagaimana untuk menggunakan kurikulum ini. Kami sangat menghargai maklum balas anda [di forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulakan dengan kuiz pra-ceramah dan ikuti dengan membaca bahan kuliah, melengkapkan pelbagai aktiviti dan periksa pemahaman 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 ceramah, melengkapkan pelbagai aktiviti dan periksa pemahaman anda dengan kuiz pasca-ceramah.
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 meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan-rakan anda untuk bekerjasama dalam projek-projek! Perbincangan digalakkan di [forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) di mana pasukan moderator kami akan sedia membantu menjawab soalan anda.
Untuk memajukan pendidikan anda, kami sangat mengesyorkan meneroka [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan pembelajaran tambahan.
Untuk memperluaskan pendidikan anda, kami sangat mengesyorkan menerokai [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 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).
Kurikulum ini mempunyai persekitaran pembangunan yang sedia digunakan! Semasa memulakan 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).
#### Cipta repositori anda
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.
Untuk memudahkan anda menyimpan kerja anda, disarankan agar anda mencipta salinan repositori ini. Anda boleh lakukan ini dengan klik butang **Use this template** di atas halaman. Ini akan mencipta repositori baru dalam akaun GitHub anda dengan salinan kurikulum.
Ikut langkah ini:
1. **Fork Repositori**: Klik butang "Fork" di penjuru kanan atas halaman ini.
Ikuti langkah ini:
1. **Fork Repositori**: Klik pada butang "Fork" di sudut kanan atas halaman ini.
2. **Clone Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Menjalankan kurikulum di Codespace
#### Menjalankan kurikulum dalam Codespace
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 di komputer anda
#### Menjalankan kurikulum secara tempatan pada komputer anda
Untuk menjalankan kurikulum ini secara tempatan di komputer anda, anda memerlukan penyunting teks, pelayar dan alat baris arahan. Pelajaran pertama kami, [Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan membimbing anda melalui pelbagai pilihan untuk setiap alat agar anda memilih yang paling sesuai untuk anda.
Untuk menjalankan kurikulum ini secara tempatan pada komputer anda, anda akan memerlukan penyunting teks, pelayar dan alat baris perintah. Pelajaran pertama kami, [Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan membimbing anda melalui pelbagai pilihan untuk setiap alat ini supaya anda dapat memilih yang paling sesuai untuk anda.
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:
1. Klon repositori anda ke komputer anda. Anda boleh lakukan 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, gantikan `<your-repository-url>` dengan URL yang baru anda salin:
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan perintah berikut, gantikan `<your-repository-url>` dengan URL yang baru anda salin:
```bash
git clone <your-repository-url>
```
2. Buka folder dalam Visual Studio Code. Anda boleh melakukan ini dengan mengklik **File** > **Open Folder** dan memilih folder yang baru anda klon.
2. Buka folder dalam Visual Studio Code. Anda boleh lakukan ini dengan mengklik **File** > **Open Folder** dan memilih folder yang baru anda klon.
> Sambungan Visual Studio Code yang disyorkan:
@ -141,74 +141,74 @@ Cadangan kami ialah menggunakan [Visual Studio Code](https://code.visualstudio.c
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk pratonton halaman HTML dalam Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - untuk membantu anda menulis kod dengan lebih pantas
## 📂 Setiap pelajaran merangkumi:
## 📂 Setiap pelajaran termasuk:
- sketchnote pilihan
- video tambahan pilihan
- kuiz pemanasan pra-pelajaran
- kuiz pemanasan sebelum pelajaran
- pelajaran bertulis
- untuk pelajaran berasaskan projek, panduan langkah demi langkah tentang cara membina projek
- untuk pelajaran berasaskan projek, panduan langkah demi langkah cara membina projek
- pemeriksaan pengetahuan
- satu cabaran
- cabaran
- bacaan tambahan
- tugasan
- [kuiz pasca-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, 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`.
> **Nota tentang kuiz**: Semua kuiz terkandung dalam folder Quiz-app, sebanyak 48 kuiz dengan tiga soalan setiap satu. Ia boleh didapati [di sini](https://ff-quizzes.netlify.app/web/) serta aplikasi kuiz boleh dijalankan secara tempatan atau dikerahkan ke Azure; ikut arahan dalam folder `quiz-app`.
## 🗃️ Pelajaran
| | Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Berpaut | Pengarang |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 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 |
| | Nama Projek | Konsep Diajarkan | Objektif Pembelajaran | Pelajaran Berkaitan | Penulis |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Memulakan | Pengenalan kepada Pengaturcaraan dan Alat-alat Kerja | Pelajari asas di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional menjalankan kerja mereka | [Pengenalan kepada Bahasa Pengaturcaraan dan Alatan Kerja](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Memulakan | Asas GitHub, termasuk bekerja dengan pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain pada pangkalan kod | [Pengenalan kepada GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Memulakan | Kebolehcapaian | Pelajari asas kebolehcapaian web | [Asas Kebolehcapaian](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Asas JS | Jenis Data JavaScript | Asas jenis data dalam 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 | 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 | [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 |
| 06 | Asas JS | Membuat Keputusan dengan JS | Pelajari cara mencipta syarat dalam kod anda menggunakan kaedah membuat keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Asas JS | Larik dan Gelung | Bekerja dengan data menggunakan larik dan gelung dalam JavaScript | [Larik dan Gelung](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Amalan | Bina HTML untuk mencipta terrarium dalam talian, fokus pada pembinaan tata letak | [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 menggayakan terrarium dalam talian, fokus pada asas CSS termasuk menjadikan halaman responsif | [Pengenalan kepada CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Bina JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/jatuh, fokus pada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Permainan Mengetik](./4-typing-game/solution/README.md) | Bina Permainan Mengetik | Pelajari cara menggunakan acara papan kekunci untuk menggerakkan logik aplikasi JavaScript anda | [Pengaturcaraan Berpandu Acara](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Sambungan Pelayar Hijau](./5-browser-extension/solution/README.md) | Bekerja dengan Pelayar | Pelajari cara pelayar berfungsi, sejarahnya, dan cara membina elemen pertama sambungan pelayar | [Mengenai Pelayar](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Sambungan Pelayar Hijau](./5-browser-extension/solution/README.md) | Membangun borang, memanggil API dan menyimpan pembolehubah dalam storan tempatan | Bina elemen JavaScript sambungan pelayar anda untuk memanggil API menggunakan pembolehubah yang disimpan dalam storan tempatan | [API, Borang, dan Storan Tempatan](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Sambungan Pelayar Hijau](./5-browser-extension/solution/README.md) | Proses latar belakang dalam pelayar, prestasi web | Gunakan proses latar belakang pelayar untuk mengurus ikon sambungan; belajar tentang prestasi web dan beberapa pengoptimuman agar | [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 mengenai Pewarisan menggunakan kedua-dua Kelas dan Komposisi serta corak Pub/Sub, sebagai persiapan untuk membina permainan | [Pengenalan kepada Pembangunan Permainan Lanjutan](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Permainan Angkasa](./6-space-game/solution/README.md) | Melukis pada kanvas | Pelajari tentang API Canvas, 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 bagaimana elemen boleh bergerak menggunakan koordinat kartesian dan API Canvas | [Menggerakkan Elemen Sekitar](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Permainan Angkasa](./6-space-game/solution/README.md) | Pengesanan perlanggaran | Buat elemen bertembung dan bertindak balas antara satu sama lain menggunakan kekunci dan sediakan fungsi cooldown untuk memastikan prestasi permainan | [Pengesanan Perlanggaran](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menjaga skor | Lakukan pengiraan matematik berdasarkan status dan prestasi permainan | [Menjaga Skor](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Permainan Angkasa](./6-space-game/solution/README.md) | Mengakhiri dan memulakan semula permainan | Pelajari cara mengakhiri dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pembolehubah | [Keadaan Akhir](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Templat HTML dan Laluan dalam Aplikasi Web | Pelajari cara membuat struktur 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 mengenai 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 Mendapatkan dan Menggunakan Data | Bagaimana data masuk dan keluar dari aplikasi anda, cara mengambilnya, menyimpannya dan menghapusnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Konsep Pengurusan Keadaan | Pelajari bagaimana aplikasi anda mengekalkan keadaan dan cara mengurusnya secara programatik | [Pengurusan Keadaan](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Kod Penyemak Imbas/VScode](../../8-code-editor) | Bekerja dengan VScode | Pelajari cara menggunakan penyunting kod| [Gunakan Penyunting Kod VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Pembantu AI](./9-chat-project/README.md) | Bekerja dengan AI | Pelajari cara membina pembantu AI anda sendiri | [Projek Pembantu AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogi
Kurikulum kami direka dengan dua prinsip pedagogi utama:
Kurikulum kami direka dengan dua prinsip pedagogi utama dalam fikiran:
* pembelajaran berasaskan projek
* kuiz kerap
* kuiz yang kerap
Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web hari ini. Pelajar akan berpeluang 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.
Program ini mengajar asas-asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web masa kini. Pelajar akan berpeluang mengembangkan pengalaman praktikal dengan membina permainan menaip, terrarium maya, sambungan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Pada akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh tentang pembangunan web.
> 🎓 Anda boleh mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai [Jalur Pembelajaran](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 [Jalur 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 kandungan selaras dengan projek, proses pembelajaran menjadi lebih menarik untuk pelajar dan pengingatan 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)", 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 bertaraf rendah sebelum kelas menetapkan niat pelajar untuk mempelajari topik, manakala kuiz kedua selepas kelas memastikan pengingatan lebih kukuh. Kurikulum ini direka untuk fleksibel dan menyeronokkan serta boleh diikuti secara keseluruhan atau sebahagian. Projek bermula kecil dan menjadi semakin kompleks menjelang akhir 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 mengelak memperkenalkan 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 Tingkah Laku](CODE_OF_CONDUCT.md) dan garis panduan [Menyumbang](CONTRIBUTING.md) kami. Kami mengalu-alukan maklum balas yang membina daripada anda!
## 🧭 Akses luar talian
## 🧭 Akses Luar Talian
Anda boleh menjalankan dokumentasi ini secara luar talian dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repositori ini, [pasang Docsify](https://docsify.js.org/#/quickstart) pada mesin tempatan anda, dan kemudian di folder akar repositori ini, taip `docsify serve`. Laman web akan dihidangkan pada port 3000 di localhost anda: `localhost:3000`.
Anda boleh menjalankan dokumentasi ini secara luar talian dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork 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 disajikan 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).
@ -260,11 +260,11 @@ Pasukan kami menghasilkan kursus lain! Semak:
## Mendapatkan Bantuan
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.
Jika anda tersekat atau mempunyai sebarang pertanyaan mengenai membina aplikasi AI. Sertai pelajar lain dan pembangun berpengalaman dalam perbincangan mengenai MCP. Ia adalah komuniti yang menyokong di mana soalan dialu-alukan dan pengetahuan dikongsi dengan bebas.
[![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)
@ -275,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 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.
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang sahih. Untuk maklumat penting, terjemahan profesional oleh manusia adalah disarankan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

63
translations/ms/lesson-template/README.md
Unescape View File

@ -1,56 +1,79 @@
# [Topik Pelajaran]
# Topik Pelajaran
![Sisipkan video di sini](../../../lesson-template/video-url)
## 🎥 Video
## [Kuiz Pra-Kuliah](../../../lesson-template/quiz-url)
> Tambahkan video terbenam atau pautan pelajaran di sini.
[Terangkan apa yang akan kita pelajari]
---
## Kuiz Pra-ceramah
> Tambahkan pautan kuiz di sini apabila tersedia.
---
Berikan gambaran ringkas tentang apa yang pelajar akan pelajari dalam pelajaran ini.
---
### Pengenalan
Terangkan apa yang akan dibincangkan
Berikan pengenalan ringkas yang menerangkan apa yang akan dibincangkan dalam pelajaran ini.
> Nota
---
### Prasyarat
Langkah-langkah apa yang sepatutnya telah diselesaikan sebelum pelajaran ini?
Senaraikan konsep atau topik yang pelajar harus sudah biasa sebelum memulakan pelajaran ini.
---
### Persediaan
Langkah-langkah persediaan untuk memulakan pelajaran ini
Senaraikan sebarang langkah penyediaan atau alat yang diperlukan sebelum memulakan pelajaran.
---
[Langkah-langkah melalui kandungan dalam blok]
### Kandungan
Terangkan kandungan pelajaran secara berstruktur dalam seksyen-seksyen.
---
## [Topik 1]
## Topik 1
### Tugasan:
### Tugas:
Bekerjasama untuk meningkatkan kod anda secara progresif bagi membina projek dengan kod yang dikongsi:
Bekerjasama untuk meningkatkan kod anda secara berperingkat untuk membina projek dengan kod bersama:
```html
code blocks
```
✅ Semakan Pengetahuan - gunakan masa ini untuk mengembangkan pengetahuan pelajar dengan soalan terbuka
✅ Semakan Pengetahuan
Gunakan masa ini untuk menguji pengetahuan pelajar dengan soalan terbuka.
## [Topik 2]
## Topik 2
## Topik 3
## [Topik 3]
🚀 Cabaran
Tambah cabaran kolaboratif untuk pelajar meningkatkan projek.
🚀 Cabaran: Tambahkan cabaran untuk pelajar bekerjasama dalam kelas bagi meningkatkan projek
Pilihan: Tambah tangkapan skrin UI pelajaran yang telah selesai jika sesuai.
Pilihan: tambahkan tangkapan skrin UI pelajaran yang telah siap jika sesuai
## Kuiz Pasca-ceramah
## [Kuiz Pasca-Kuliah](../../../lesson-template/quiz-url)
Tambah pautan kuiz di sini selepas menyelesaikan pelajaran.
## Ulasan & Kajian Kendiri
## Semakan & Kajian Kendiri
**Tugasan Perlu Diserahkan [MM/YY]**: [Nama Tugasan](assignment.md)
**Penyerahan Tugasan [MM/YY]**: [Nama Tugasan](assignment.md)
---
<!-- 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 memastikan ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat yang kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila ambil maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidakakuratan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

10
translations/tl/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-20T16:46:27+00:00",
"translation_date": "2026-04-24T22:07:02+00:00",
"source_file": "AGENTS.md",
"language_code": "tl"
},
@ -516,8 +516,8 @@
"language_code": "tl"
},
"README.md": {
"original_hash": "b885c87c7544109b78d6684daad6cba6",
"translation_date": "2026-04-06T16:47:59+00:00",
"original_hash": "b1766b45123e043ef2c72612f28b86dd",
"translation_date": "2026-04-24T22:04:05+00:00",
"source_file": "README.md",
"language_code": "tl"
},
@ -564,8 +564,8 @@
"language_code": "tl"
},
"lesson-template/README.md": {
"original_hash": "0494be70ad7fadd13a8c3d549c23e355",
"translation_date": "2025-08-27T22:55:10+00:00",
"original_hash": "ce2f64fd0d518f0500fc082b97c1e662",
"translation_date": "2026-04-24T22:04:13+00:00",
"source_file": "lesson-template/README.md",
"language_code": "tl"
},

302
translations/tl/AGENTS.md
Unescape View File

@ -2,27 +2,27 @@
## Project Overview
Ito ay isang edukasyonal na repositoryo ng kurikulum para sa pagtuturo ng mga pangunahing kaalaman sa web development sa mga nagsisimula. Ang kurikulum ay isang komprehensibong 12-linggong kurso na binuo ng Microsoft Cloud Advocates, na nagtatampok ng 24 na hands-on na aralin na sumasaklaw sa JavaScript, CSS, at HTML.
Ito ay isang pang-edukasyon na repositoryo ng kurikulum para sa pagtuturo ng mga pundasyon ng web development sa mga baguhan. Ang kurikulum ay isang komprehensibong 12-linggong kurso na binuo ng Microsoft Cloud Advocates, na naglalaman ng 24 na praktikal na aralin na sumasaklaw sa JavaScript, CSS, at HTML.
### Key Components
- **Nilalaman Pang-edukasyon**: 24 na istrukturadong aralin na inayos sa mga proyekto bilang mga modulo
- **Praktikal na Mga Proyekto**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, at AI Chat Assistant
- **Interaktibong Mga Quiz**: 48 na quiz na may tig-3 tanong bawat isa (pagsusulit bago/pagkatapos ng aralin)
- **Suporta sa Maraming Wika**: Awtomatikong pagsasalin para sa 50+ na wika gamit ang GitHub Actions
- **Nilalamang Pang-edukasyon**: 24 na nakaayos na mga aralin na nakaorganisa sa mga proyekto
- **Praktikal na mga Proyekto**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, at AI Chat Assistant
- **Interactive na Quizzes**: 48 na pagsusulit na may tig-3 na tanong (pre/post-lesson assessments)
- **Multi-language Support**: Awtomatikong pagsasalin para sa 50+ na mga 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 istruktura batay sa mga aralin
- Ang 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 proyekto sa aralin)
- Pang-edukasyon na repositoryo na may estruktura batay sa mga aralin
- Bawat folder ng aralin ay naglalaman ng README, mga halimbawa ng code, at mga solusyon
- Mga standalone na proyekto sa mga hiwalay na direktoryo (quiz-app, iba't ibang proyekto ng aralin)
- Sistema ng pagsasalin gamit ang GitHub Actions (co-op-translator)
- Dokumentasyon na ibinibigay sa pamamagitan ng Docsify at available bilang PDF
- Dokumentasyon na sineserbisyo gamit ang Docsify at available bilang PDF
## Setup Commands
Ang repositoryong ito ay pangunahing para sa konsumpsyon ng edukasyonal na nilalaman. Para sa pagtatrabaho sa mga partikular na proyekto:
Ang repositoryong ito ay pangunahing para sa paggamit ng nilalaman pang-edukasyon. Para sa pagtatrabaho sa mga tiyak na proyekto:
### Main Repository Setup
@ -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 partikular sa browser
# Sundin ang mga tagubilin para sa pag-load ng extension na partikular sa browser
```
### Space Game Projects
@ -72,37 +72,37 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Itakda ang GITHUB_TOKEN na variable ng kapaligiran
# Itakda ang environment variable na GITHUB_TOKEN
python api.py
```
## Development Workflow
### Para sa mga Contributor ng Nilalaman
### Para sa Mga Nag-aambag ng Nilalaman
1. **I-fork ang repositoryo** sa iyong GitHub account
2. **I-clone ang iyong fork** nang lokal
3. **Gumawa ng bagong sanga** para sa iyong mga pagbabago
4. Gawin ang 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 pull requests alinsunod sa mga gabay sa kontribusyon
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 mga pagbabago sa code sa mga kaugnay na direktoryo ng proyekto
6. Mag-submit ng pull requests alinsunod sa mga patnubay sa kontribusyon
### Para sa mga Nag-aaral
### Para sa Mga Nag-aaral
1. I-fork o i-clone ang repositoryo
2. Mag-navigate sa mga direktoryo ng aralin sunod-sunod
2. Mag-navigate sa mga direktoryo ng aralin nang sunud-sunod
3. Basahin ang mga README file para sa bawat aralin
4. Kumpletuhin ang mga pre-lesson quizzes sa https://ff-quizzes.netlify.app/web/
5. Trabahuhin ang mga halimbawa ng code sa mga folder ng aralin
4. Kumpletuhin ang mga pre-lesson quiz sa https://ff-quizzes.netlify.app/web/
5. Trabahoin ang mga halimbawa ng code sa mga folder ng aralin
6. Kumpletuhin ang mga takdang-aralin at hamon
7. Sagutan ang mga post-lesson quizzes
7. Sagutan ang mga post-lesson quiz
### Live Development
- **Dokumentasyon**: Patakbuhin ang `docsify serve` sa root (port 3000)
- **Quiz App**: Patakbuhin ang `npm run dev` sa folder ng quiz-app
- **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 mga kaukulang API na direktoryo
- **API Projects**: Patakbuhin ang `npm start` sa mga kaukulang direktoryo ng API
## Testing Instructions
@ -110,8 +110,8 @@ python api.py
```bash
cd quiz-app
npm run lint # Suriin kung may mga isyu sa istilo ng kodigo
npm run build # Tiyakin na matagumpay ang pagbuo
npm run lint # Suriin ang mga isyu sa istilo ng code
npm run build # Tiyakin na matagumpay ang build
```
### Bank API Testing
@ -119,62 +119,62 @@ npm run build # Tiyakin na matagumpay ang pagbuo
```bash
cd 7-bank-project/api
npm run lint # Suriin ang mga isyu sa estilo ng code
node server.js # Tiyaking nagsisimula ang server nang walang mga error
node server.js # Tiyakin na nagsisimula ang server nang walang mga error
```
### Pangkalahatang Paraan ng Pagsusuri
### Pangkalahatang Paraan sa Pagsusuri
- Ito ay isang edukasyonal na repositoryo na walang komprehensibong automated tests
- Ang manual na pagsusuri ay nakatuon sa:
- Hindi nagkakaroon ng error ang mga halimbawa ng code kapag pinatakbo
- Gumagana nang maayos ang mga links sa dokumentasyon
- Matagumpay ang pagbuo ng mga proyekto
- Sumusunod ang mga halimbawa sa pinakamahusay na mga kasanayan
- Ito ay isang pang-edukasyong repositoryo na walang komprehensibong awtomatikong pagsusuri
- Manual na pagsusuri ay tumutok sa:
- Mga halimbawa ng code ay tumatakbo nang walang error
- Mga link sa dokumentasyon ay gumagana nang maayos
- Tagumpay na pagtatayo ng proyekto
- Mga halimbawa ay sumusunod sa pinakamahusay na mga gawain
### Mga Pre-submission Checks
### Pre-submission Checks
- Patakbuhin ang `npm run lint` sa mga direktoryong may package.json
- Tiyakin na wasto ang mga markdown links
- Patakbuhin ang `npm run lint` sa mga direktoryo na may package.json
- Siguraduhing valid ang mga markdown link
- Subukan ang mga halimbawa ng code sa browser o Node.js
- Suriin na ang mga pagsasalin ay nananatiling maayos ang istruktura
- Tiyaking ang mga pagsasalin ay nananatili ang tamang estruktura
## Code Style Guidelines
### JavaScript
- Gumamit ng makabagong ES6+ na syntax
- Sundin ang mga standard ESLint na konfigurasyon na ibinigay sa mga proyekto
- Gumamit ng modernong ES6+ na sintaks
- Sundin ang mga karaniwang ESLint na config sa mga proyekto
- Gumamit ng makabuluhang mga pangalan ng variable at function para sa kalinawan sa edukasyon
- Magdagdag ng mga paliwanag na komentaryo tungkol sa mga konsepto para sa mga nag-aaral
- Magdagdag ng mga komentaryo na nagpapaliwanag ng mga konsepto para sa mga nag-aaral
- I-format gamit ang Prettier kung saan naka-configure
### HTML/CSS
- Semantic HTML5 elements
- Semantic na HTML5 na mga elemento
- Mga prinsipyo ng responsive design
- Malinaw na conventions sa pagbibigay ng pangalan sa mga klase
- Malinaw na mga konbensiyon sa pag-ngalan ng klase
- Mga komentaryo na nagpapaliwanag ng mga teknik sa CSS para sa mga nag-aaral
### Python
- Mga patnubay sa estilo ayon sa PEP 8
- Malinaw, pang-edukasyonal na mga halimbawa ng code
- Mga type hint kung nakakatulong sa pag-aaral
- PEP 8 style guidelines
- Malinaw, edukasyonal na mga halimbawa ng code
- Type hints kung saan nakakatulong sa pag-aaral
### Markdown Documentation
- Malinaw na hierarchy ng mga heading
- Mga code block na may pagspecify ng wika
- Mga link sa karagdagang mga mapagkukunan
- Mga screenshot at larawan sa mga `images/` na mga direktoryo
- Alt text para sa mga larawan para sa accessibility
- Mga code block na may pagtukoy ng wika
- Mga link sa karagdagang mga resources
- Mga screenshot at mga imahe sa `images/` na mga direktoryo
- Alt text para sa mga imahe para sa accessibility
### File Organization
- Ang mga aralin ay may sunud-sunod na bilang (1-getting-started-lessons, 2-js-basics, atbp.)
- Ang bawat proyekto ay may `solution/` at madalas `start/` o `your-work/` na mga direktoryo
- Ang mga larawan ay naka-imbak sa mga lesson-specific na `images/` folder
- Mga pagsasalin sa istrukturang `translations/{language-code}/`
- Mga aralin na sunud-sunod na naka-number (1-getting-started-lessons, 2-js-basics, atbp.)
- Bawat proyekto ay may `solution/` at madalas `start/` o `your-work/` na mga direktoryo
- Mga larawan ay nakaimbak sa mga folder ng aralin na `images/`
- Mga pagsasalin sa `translations/{language-code}/` na estruktura
## Build and Deployment
@ -185,10 +185,10 @@ Ang quiz-app ay naka-configure para sa Azure Static Web Apps deployment:
```bash
cd quiz-app
npm run build # Lumilikha ng dist/ folder
# Nagde-deploy gamit ang GitHub Actions workflow kapag may push sa main
# Nagde-deploy gamit ang GitHub Actions workflow sa push sa main
```
Azure Static Web Apps na konfigurasyon:
Azure Static Web Apps configuration:
- **App location**: `/quiz-app`
- **Output location**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
@ -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 globally
docsify serve # I-serve sa localhost:3000
npm install -g docsify-cli # I-install ang Docsify nang global
docsify serve # Paglingkuran sa localhost:3000
```
### Mga Build na Nakatuon sa Proyekto
### Mga Tiyak na Build ng Proyekto
Ang bawat direktoryo ng proyekto ay maaaring may sariling proseso ng build:
- Vue projects: `npm run build` na lumilikha ng mga production bundles
- Static projects: Walang build step, direktang pag-serbisyo ng mga file
Bawat direktoryo ng proyekto ay maaaring magkaroon ng sariling proseso sa build:
- Vue projects: `npm run build` lumilikha ng mga bundle para sa produksyon
- Static projects: Walang build step, diretsong serbisyuhan ang mga file
## Pull Request Guidelines
### Format ng Pamagat
### Title Format
Gumamit ng malinaw, deskriptibong mga pamagat na nagpapakita ng bahagi ng pagbabago:
Gumamit ng malinaw, deskriptibong mga pamagat na naglalahad 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`
### Mga Kinakailangang Pag-check
### Required Checks
Bago magsumite ng PR:
Bago mag-submit ng PR:
1. **Kalidad ng Code**:
- Patakbuhin ang `npm run lint` sa mga apektadong proyekto
- Ayusin ang lahat ng linting error at babala
- Patakbuhin ang `npm run lint` sa mga apektadong direktoryo ng proyekto
- Ayusin lahat ng linting error at babala
2. **Pag-verify ng Build**:
- Patakbuhin ang `npm run build` kung kinakailangan
2. **Build Verification**:
- Patakbuhin ang `npm run build` kung naaangkop
- Siguraduhing walang error sa build
3. **Pag-validate ng Link**:
- Subukan ang lahat ng markdown link
- Siguraduhing gumagana ang mga reference ng larawan
3. **Link Validation**:
- Subukan lahat ng markdown links
- Beripikahin na gumagana ang mga reference sa imahe
4. **Pagsusuri ng Nilalaman**:
- Proofread para sa baybay at gramatika
- Siguraduhing tama at edukasyonal ang mga halimbawa ng code
- I-verify ang mga pagsasalin ay nananatili ang orihinal na kahulugan
4. **Content Review**:
- Proofread para sa wastong baybay at gramatika
- Siguraduhin na tama at edukasyonal ang mga halimbawa ng code
- Beripikahin na ang mga pagsasalin ay nananatili ang orihinal na kahulugan
### Mga Kinakailangan sa Kontribusyon
### Contribution Requirements
- Sumang-ayon sa Microsoft CLA (automated check sa unang PR)
- Sumang-ayon sa Microsoft CLA (awtomatikong tsek sa unang PR)
- Sundin ang [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Tumingin sa [CONTRIBUTING.md](./CONTRIBUTING.md) para sa mga detalyadong gabay
- Banggitin ang mga numero ng isyu sa paglalarawan ng PR kung angkop
- Tingnan ang [CONTRIBUTING.md](./CONTRIBUTING.md) para sa detalyadong mga patnubay
- Ilahad ang mga numero ng isyu sa deskripsyon ng PR kung naaangkop
### Proseso ng Review
### Review Process
- Ang mga PR ay sinusuri ng mga maintainer at komunidad
- Ang mga PR ay nire-review ng mga maintainer at komunidad
- Pinapahalagahan ang kalinawan sa edukasyon
- Dapat sundin ng mga halimbawa ng code ang kasalukuyang best practices
- Sinusuri ang mga pagsasalin para sa katumpakan at angkop na kultura
- Ang mga halimbawa ng code ay dapat sumunod sa kasalukuyang pinakamahusay na mga gawain
- Ang mga pagsasalin ay nire-review para sa katumpakan at angkop na kultura
## Translation System
### Automated Translation
- Gumagamit ng GitHub Actions na may co-op-translator workflow
- Nagsasalin sa 50+ na wika nang awtomatiko
- Mga source file sa mga pangunahing direktoryo
- Gumagamit ng GitHub Actions kasama ang co-op-translator workflow
- Nagsasalin sa 50+ na mga wika nang awtomatiko
- Mga source file sa pangunahing mga direktoryo
- Mga naisaling file sa `translations/{language-code}/` na mga direktoryo
### Pagdaragdag ng Manual na Pagpapabuti sa Pagsasalin
### Adding Manual Translation Improvements
1. Hanapin ang file sa `translations/{language-code}/`
2. Gawin ang mga pagpapabuti nang pinananatili ang istruktura
3. Siguraduhing nananatiling gumagana ang mga halimbawa ng code
4. Subukan ang anumang lokal na nilalamang quiz
2. Gumawa ng mga pagsasaayos habang pinapanatili ang estruktura
3. Siguraduhin na ang mga halimbawa ng code ay nananatiling gumagana
4. Subukan ang anumang lokal na nilalaman ng quiz
### Metadata ng Pagsasalin
### Translation Metadata
Ang mga naisaling file ay may kasamang metadata header:
Nagsasama ang mga naisaling file ng metadata header:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -291,118 +291,118 @@ CO_OP_TRANSLATOR_METADATA:
## Debugging and Troubleshooting
### Mga Karaniwang Isyu
### Common Issues
**Hindi nagsisimula ang quiz app**:
- Suriin ang bersyon ng Node.js (inirekomenda v14+)
- Burahin ang `node_modules` at `package-lock.json`, patakbuhin muli ang `npm install`
- Suriin kung may conflict sa port (default: Vite gumagamit ng port 5173)
**Quiz app ay hindi nagsisimula**:
- Suriin ang bersyon ng Node.js (inirerekomendang v14+)
- Tanggalin ang `node_modules` at `package-lock.json`, muling patakbuhin ang `npm install`
- Tingnan kung may port conflicts (default: Vite ay gumagamit ng port 5173)
**Hindi nagsisimula ang API server**:
- Tiyakin ang bersyon ng Node.js ay sapat (node >=10)
- Suriin kung ginagamit na ng iba ang port
- Siguraduhing naka-install lahat ng dependencies gamit ang `npm install`
**API server ay hindi nagsisimula**:
- Beripikahin kung ang bersyon ng Node.js ay sapat (node >=10)
- Siguraduhing walang ginagamit ang port
- Siguraduhing nakainstall lahat ng dependencies gamit ang `npm install`
**Hindi naglo-load ang browser extension**:
**Browser extension ay hindi naglo-load**:
- Siguraduhing tama ang format ng manifest.json
- Tingnan ang browser console para sa mga error
- Sundin ang mga instruksyon sa pag-install ng extension para sa partikular na browser
- Suriin ang browser console para sa mga error
- Sundan ang mga tagubilin ng browser para sa instalasyon ng extension
**Mga isyu sa Python chat project**:
- Siguraduhing naka-install ang OpenAI package: `pip install openai`
- Tiyakin na nakaset ang GITHUB_TOKEN environment variable
- Suriin ang mga permiso sa access ng GitHub Models
- Beripikahin kung nakaset ang environment variable na GITHUB_TOKEN
- Suriin ang access permissions ng GitHub Models
**Hindi nagseserbisyo ang Docsify ng 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
- Siguraduhing may `docs/_sidebar.md`
- Siguraduhing nandoon ang `docs/_sidebar.md`
### Mga Tip para sa Development Environment
### Development Environment Tips
- Gumamit ng VS Code kasama ang Live Server extension para sa mga HTML na proyekto
- Mag-install ng ESLint at Prettier extensions para sa konsistenteng pag-format
- Gamitin ang browser DevTools para i-debug ang JavaScript
- Para sa mga Vue na proyekto, mag-install ng Vue DevTools browser extension
- Gamitin ang VS Code na may Live Server extension para sa mga HTML na proyekto
- Mag-install ng ESLint at Prettier extensions para sa consistent na pag-format
- Gamitin ang browser DevTools para mag-debug ng JavaScript
- Para sa Vue projects, mag-install ng Vue DevTools browser extension
### Mga Pagsasaalang-alang sa Performance
### Performance Considerations
- Malaki ang bilang ng naisaling mga file (50+ na wika) kaya malaki ang buong clone
- Gumamit ng shallow clone kung nilalaman lang ang kanilang tinatrabaho: `git clone --depth 1`
- I-exclude ang mga pagsasalin sa mga paghahanap kapag nagtatrabaho sa English na nilalaman
- Maaaring mabagal ang build processes sa unang takbo (npm install, Vite build)
- Malaking bilang ng mga naisaling file (50+ na wika) ay nagpapalaki ng buong clones
- Gumamit ng shallow clone kung nilalaman lang ang gagawing trabaho: `git clone --depth 1`
- I-exclude ang pagsasalin mula sa mga search kapag gumagamit ng English na nilalaman
- Maaaring bumagal ang build processes sa unang takbo (npm install, Vite build)
## Security Considerations
### Mga Environment Variable
### Environment Variables
- Huwag kailanman i-commit ang API keys sa repositoryo
- Gumamit ng `.env` files (nasa `.gitignore` na)
- I-dokumento ang kinakailangang environment variables sa mga README ng proyekto
- Huwag kailanman i-commit ang mga API keys sa repositoryo
- Gamitin ang `.env` files (nasa `.gitignore` na)
- Idokumento ang kailangang environment variables sa mga README ng proyekto
### Python Projects
- Gumamit ng virtual environments: `python -m venv venv`
- Gumamit ng mga virtual environment: `python -m venv venv`
- Panatilihing updated ang mga dependencies
- Dapat may minimal na permiso lamang ang mga GitHub token
- Ang mga GitHub token ay dapat may pinakamababang kinakailangang permissions
### GitHub Models Access
- Kinakailangan ang Personal Access Tokens (PAT) para sa GitHub Models
- Itago ang mga token bilang environment variables
- Huwag kailanman i-commit ang mga token o kredensyal
- Huwag kailanman i-commit ang mga token o credentials
## Additional Notes
### Target Audience
- Mga ganap na nagsisimula sa web development
- Mga ganap na baguhan sa web development
- Mga estudyante at 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
- Mga guro na gumagamit ng kurikulum sa mga klasrum
- Nilalaman ay dinisenyo para sa accessibility at unti-unting pagbuo ng kasanayan
### Educational Philosophy
- Pagsasanay sa pag-aaral batay sa proyekto
- Madalas na pagsusuri sa kaalaman (mga quiz)
- Hands-on na coding exercises
- Mga halimbawa ng aplikasyon sa tunay na mundo
- Pagtuon sa mga pundasyon bago ang mga framework
- Project-based na paraan ng pagkatuto
- Madalas na pagsusuri ng kaalaman (mga quiz)
- Praktikal na coding exercises
- Mga halimbawa ng aplikasyon sa totoong mundo
- Pokus sa mga pundasyon bago ang mga framework
### Repository Maintenance
- Aktibong komunidad ng mga nag-aaral at contributor
- Regular na pag-update ng dependencies at nilalaman
- Sina-subsaybayan ang mga isyu at talakayan ng mga maintainer
- Awtomatikong pag-update ng pagsasalin gamit ang GitHub Actions
- Aktibong komunidad ng mga nag-aaral at mga nag-aambag
- Regular na pag-update ng mga dependencies at nilalaman
- Ino-monitor ng mga maintainer ang mga isyu at diskusyon
- 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 mga kurso: Generative AI, Data Science, ML, IoT curricula ang available
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) na inirerekomenda para sa mga nag-aaral
- Karagdagang mga kurso: Generative AI, Data Science, ML, IoT na mga kurikulum ay available
### Pagtatrabaho sa Partikular na Mga Proyekto
### Working with Specific Projects
Para sa detalyadong mga instruksyon sa mga indibidwal na proyekto, tingnan ang mga README file sa:
- `quiz-app/README.md` - Vue 3 quiz application
Para sa detalyadong mga tagubilin sa mga indibidwal na proyekto, tingnan ang mga README file sa:
- `quiz-app/README.md` - Vue 3 na aplikasyon ng quiz
- `7-bank-project/README.md` - Banking application na may authentication
- `5-browser-extension/README.md` - Pag-develop ng browser extension
- `6-space-game/README.md` - Pag-develop ng game gamit ang canvas
- `9-chat-project/README.md` - AI chat assistant project
- `6-space-game/README.md` - Canvas-based na pag-develop ng laro
- `9-chat-project/README.md` - AI chat assistant na proyekto
### Monorepo Structure
Bagamat hindi tradisyunal na monorepo, ang repositoryong ito ay naglalaman ng maraming independiyenteng proyekto:
- Ang bawat aralin ay nakahiwalay
Bagaman hindi tradisyunal na monorepo, ang repositoryong ito ay naglalaman ng maraming independiyenteng proyekto:
- Bawat aralin ay standalone
- Hindi nagbabahagi ng dependencies ang mga proyekto
- Puwedeng magtrabaho sa bawat proyekto nang hindi naaapektuhan ang iba
- I-clone ang buong repo para sa buong karanasan ng kurikulum
- Makakapagtrabaho sa mga indibidwal na proyekto nang hindi naaapektuhan ang iba pa
- I-clone ang buong repo para sa buong karanasan sa kurikulum
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Paunawa**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagaman nagsusumikap kami para sa katuparan, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. 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 para sa anumang hindi pagkakaunawaan o maling interpretasyon na nagmumula sa paggamit ng pagsasaling ito.
Ang dokumentong ito ay isinalin gamit ang serbisyong AI na pagsasalin na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't nagsusumikap kami para sa katumpakan, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o kamalian. Ang orihinal na dokumento sa kanyang orihinal na wika ang dapat ituring na pangunahing sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasaling-tao. Hindi kami mananagot para sa anumang hindi pagkakaintindihan o maling interpretasyon na nagmumula sa paggamit ng pagsasaling ito.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

218
translations/tl/README.md
Unescape View File

@ -1,38 +1,23 @@
[![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)
# Web Development para sa mga Baguhan - Isang Kurikulum
[![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/)
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 mga laro sa kalawakan. Makibahagi sa mga pagsusulit, talakayan, at praktikal na mga gawain. Pahusayin ang iyong mga kasanayan at pagbutihin ang pagtipid ng kaalaman gamit ang aming epektibong proyekto-base na pamamaraan ng pagtuturo. Simulan ang iyong paglalakbay sa coding ngayon!
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Web Development para sa mga Nagsisimula - Isang Kurikulum
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 at makipagkilala sa mga eksperto at kapwa mga developer.
Sumali sa Azure AI Foundry Discord Community
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Sundan ang mga hakbang na ito upang makapagsimula gamit ang mga resource na ito:
Sundan ang mga hakbang na ito upang makapagsimula gamit ang mga 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)
3. [**Sumali sa Azure AI Foundry Discord at makipagkilala sa mga eksperto at kapwa mga developer**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Suportang Maraming Wika
### 🌐 Suporta para sa Maramihang Wika
#### Sinusuportahan sa pamamagitan ng GitHub Action (Automatiko at Palaging Napapanahon)
#### Sinusuportahan sa pamamagitan ng GitHub Action (Awtomatiko at Laging 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) | [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 i-clone nang lokal?**
> **Mas gusto mo bang I-clone nang Lokal?**
>
> 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:
> Kasama sa repositoryong ito ang mahigit 50 na pagsasalin ng wika na nagpapalaki nang malaki sa laki ng pag-download. Upang i-clone nang walang mga pagsasalin, gamitin ang sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,170 +33,167 @@ Sundan ang mga hakbang na ito upang makapagsimula gamit ang mga resource na ito:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Makukuha mo lahat ng kailangan mo upang tapusin ang kurso nang mas mabilis ang pag-download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**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)**
> Bibigyan ka nito ng lahat ng kailangan mo upang tapusin ang kurso nang mas mabilis ang pag-download.
[![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)
**Kung nais mong magkaroon ng karagdagang pagsasalin, ang mga sinusuportahang wika ay nakalista dito. [dito](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
#### 🧑‍🎓 _Estudyante ka ba?_
Bisitahin ang [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) kung saan makakakita ka ng mga 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.
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 materyales, mga Student pack at maging mga paraan upang makakuha ng libreng voucher para sa sertipiko. Ito ang pahinang nais mong i-bookmark at tingnan paminsan-minsan dahil regular naming pinapalitan ang nilalaman buwan-buwan.
### 📣 Anunsyo - Mga bagong hamon sa GitHub Copilot Agent mode na dapat tapusin!
### 📣 Anunsyo - Mga bagong hamon sa GitHub Copilot Agent mode na tapusin!
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.
May bagong hamon na idinagdag, hanapin ang "GitHub Copilot Agent Challenge 🚀" sa karamihan ng mga kabanata. Ito ay isang bagong hamon na kailangan mong tapusin gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagamit ang Agent mode dati, kaya nitong hindi lang gumawa ng teksto kundi makalikha at makapag-edit ng mga file, magpatakbo ng mga utos, at marami pa.
### 📣 Anunsyo - _Bagong Proyekto na bubuuin gamit ang Generative AI_
### 📣 Anunsyo - _Bagong Proyekto para gawin gamit ang Generative AI_
Bagong AI Assistant project ang idinagdag, silipin ito [proyekto](./9-chat-project/README.md)
May bagong AI Assistant project na idinagdag, tingnan ito sa [proyekto](./9-chat-project/README.md)
### 📣 Anunsyo - _Bagong Kurikulum_ sa Generative AI para sa JavaScript ay inilabas na
### 📣 Anunsyo - _Bagong Kurikulum_ sa Generative AI para sa JavaScript ay inilabas lang
Huwag palampasin ang aming bagong kurikulum sa Generative AI!
Huwag palampasin ang aming bagong Generative AI na kurikulum!
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 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!
- Mga aralin mula sa mga pangunahing kaalaman hanggang RAG.
- Makipag-ugnayan sa mga makasaysayang tauhan gamit ang GenAI at ang aming kasamang app.
- Masaya at kapana-panabik na salaysay, para kang naglalakbay sa panahon!
![character](../../translated_images/tl/character.5c0dd8e067ffd693.webp)
Bawat aralin ay may kasamang takdang-aralin, pagsusuri ng kaalaman, at hamon upang gabayan ka sa pag-aaral ng mga paksa tulad ng:
Bawat aralin ay may kasamang takdang-aralin na kailangang matapos, pagsusuri ng kaalaman, at hamon upang gabayan ka sa pag-aaral ng mga paksang tulad ng:
- Prompting at prompt engineering
- Pagbuo ng mga app para sa teksto at imahe
- Mga search apps
- Pagbuo ng text at image app
- Mga search app
Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) upang makapagsimula!
## 🌱 Pagsisimula
> **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 Guro**, may [nilikha kaming ilang mungkahi](for-teachers.md) kung paano gamitin ang kurikulum na ito. Malugod naming tatanggapin ang inyong puna [sa aming talakayan forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Mga Mag-aaral](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para sa bawat aralin, magsimula sa isang pre-lecture quiz at sundan ito sa pamamagitan ng pagbabasa ng mga materyales sa lektura, pagtapos ng iba't ibang gawain, at pagsuri sa iyong pagkaunawa 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.
Upang mapabuti ang iyong karanasan sa pag-aaral, makipag-ugnayan sa iyong mga kaklase at magtulungan sa mga proyekto! Hinihikayat ang mga talakayan sa aming [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kung saan ang aming mga moderator ay handang sagutin ang 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 paggalugad 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
May nakaayos nang development environment ang kurikulum na ito! Sa pagsisimula mo, maaari kang pumili na patakbuhin ang kurikulum sa isang [Codespace](https://github.com/features/codespaces/) (_isang browser-based, environment na hindi nangangailangan ng pag-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).
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 sariling repository
#### 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.
Para madali mong maisave ang iyong trabaho, inirerekomenda na gumawa ka ng sariling kopya ng repositoryong ito. Magagawa mo ito sa pamamagitan ng pag-click sa **Use this template** na button sa itaas ng pahina. Ito ay gagawa ng bagong repository sa iyong GitHub account na may kopya ng kurikulum.
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.
Sundin ang mga hakbang na ito:
1. **I-fork ang Repository**: I-click ang button na "Fork" sa kanang-itaas na sulok ng pahinang ito.
2. **I-clone ang Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Patakbuhin ang kurikulum sa Codespace
#### Pagpapatakbo ng kurikulum sa isang Codespace
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.
Sa kopya ng repositoryong ginawa mo, i-click ang **Code** na button at piliin ang **Open with Codespaces**. Ito ay gagawa ng bagong Codespace para sa iyong gawain.
![Codespace](../../translated_images/tl/createcodespace.0238bbf4d7a8d955.webp)
#### Patakbuhin ang kurikulum lokal sa iyong computer
#### Pagpapatakbo ng kurikulum nang lokal sa iyong computer
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.
Para patakbuhin ang kurikulum na ito nang lokal sa iyong computer, kailangan 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 pagpili ng mga opsyon para sa bawat isa sa mga tool na ito upang mapili mo ang pinakaangkop 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 repository sa iyong computer. Magagawa mo ito sa pamamagitan ng pag-click sa **Code** button at pagkopya ng URL:
Ang aming rekomendasyon ay gamitin ang [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) bilang iyong editor, na may kasamang [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Maaari mong i-download ang Visual Studio Code [dito](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. I-clone ang iyong repository sa iyong computer. Maaari mo itong gawin sa pamamagitan ng pag-click sa **Code** na button at pagkopya ng URL:
[CodeSpace](./images/createcodespace.png)
Pagkatapos, buksan ang [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) sa loob ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) at patakbuhin ang sumusunod na command, 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 utos, palitan ang `<your-repository-url>` ng URL na kinopya mo:
```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 piliin ang folder na kaklone mo lang.
2. Buksan ang folder sa Visual Studio Code. Maaari mo itong gawin sa pamamagitan ng pag-click sa **File** > **Open Folder** at piliin ang folder na kaklone mo lang.
> Inirerekomendang mga extension ng Visual Studio Code:
> Inirerekomendang mga extension para sa Visual Studio Code:
>
> * [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
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para makita ang preview ng mga HTML page sa loob ng Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para matulungan kang mas mabilis magsulat ng code
## 📂 Ang bawat aralin ay nagsasama ng:
## 📂 Kasama sa bawat leksyon:
- opsyonal na sketchnote
- opsyonal na karagdagang video
- opsyonal na supplemental na video
- pre-lesson warmup quiz
- nakasulat na aralin
- para sa mga project-based na aralin, mga step-by-step na gabay sa paggawa ng proyekto
- mga pagsusuri ng kaalaman
- nakasulat na leksyon
- para sa mga project-based na leksyon, step-by-step na gabay kung paano gumawa ng proyekto
- knowledge checks
- isang hamon
- karagdagang babasahin
- supplemental na babasahin
- takdang-aralin
- [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
> **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 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 |
> **Isang paalala tungkol sa mga quiz**: Lahat ng quiz ay nasa Quiz-app folder, 48 na kabuuang quiz na may tatlong tanong bawat isa. Available ang mga ito [dito](https://ff-quizzes.netlify.app/web/) ang quiz app ay maaaring patakbuhin nang lokal o i-deploy sa Azure; sundin ang mga instruksyon sa `quiz-app` folder.
## 🗃️ Mga Leksiyon
| | Pangalan ng Proyekto | Mga Konseptong Itinuro | Mga Layunin sa Pagkatuto | Nakalink na Leksiyon | May-akda |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | Panimula sa Programming at mga Kagamitan ng Gawain | Alamin ang mga pangunahing kaalaman sa likod ng karamihan sa mga programming language at software na tumutulong sa mga propesyonal na developer para 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 Batayan ng GitHub, kasama ang pagtatrabaho kasama ang koponan | Paano gamitin ang GitHub sa iyong proyekto, paano makipag-collaborate sa iba sa isang code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Alamin ang mga batayan ng web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | 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 | JS Basics | Mga Function at Metodo | Alamin ang tungkol sa mga function at metodong ginagamit para pamahalaan ang daloy ng lohika ng 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 | Alamin kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga pamamaraan ng paggawa ng desisyon | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Mga Array at Loops | Gumamit ng datos gamit ang arrays at loops sa JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML sa Praktis | Gumawa ng HTML para gumawa ng online terrarium, nakatuon sa pagbuo ng layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS sa Praktis | Gumawa ng CSS para istilohan ang online terrarium, na nakatuon sa mga batayan ng CSS kabilang ang paggawa ng halaman 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 gawing drag/drop interface ang terrarium, 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 | Alamin kung paano gamitin ang keyboard events para patakbuhin ang lohika ng iyong JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Paggawa gamit ang Mga Browser | Alamin kung paano gumagana ang mga browser, ang kasaysayan nito, at paano gawin ang unang mga elemento ng 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 sa API at pag-iimbak ng variables sa local storage | Gumawa ng mga elemento ng JavaScript ng iyong browser extension para tumawag sa API gamit ang mga variable na iniimbak 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, web performance | Gamitin ang mga background process ng browser para pamahalaan ang icon ng extension; alamin ang tungkol sa web performance at ilang optimizations para mapabuti ito | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mas Advanced na Pagbuo ng Laro gamit ang JavaScript | Alamin ang tungkol sa Inheritance gamit parehong Classes at Composition at ang Pub/Sub pattern, bilang paghahanda para sa paggawa ng laro | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Pag-drawing sa canvas | Alamin ang tungkol sa Canvas API, 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 screen | Tuklasin kung paano makakagawa ng galaw ang mga elemento gamit ang cartesian coordinates at Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Pagtukoy sa Collision | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang keypresses 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) | Pagtatala ng score | Magsagawa ng 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 pag-restart ng laro | Alamin ang tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga assets at pag-reset ng mga value 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 Ruta sa isang Web App | Alamin kung paano bumuo ng scaffolding ng arkitektura ng multipage na website gamit ang routing at HTML templates | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Gumawa ng Login at Registration Form | Alamin ang tungkol sa paggawa ng mga form at paghawak ng validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Mga Paraan ng Pagkuha at Paggamit ng Data | Paano dumadaloy ang data papasok at palabas ng iyong app, paano ito kunin, iimbak, at itapon | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Mga Konsepto ng State Management | Alamin 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 | Alamin kung paano gumamit ng code editor| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Paggamit ng AI | Alamin kung paano gumawa ng sarili mong AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagohiya
Ang aming kurikulum ay dinisenyo gamit ang dalawang pangunahing prinsipyo sa pagtuturo:
* pagkatuto na nakabatay sa proyekto
* madalas na pagsusulit
Ang aming kurikulum ay dinisenyo gamit ang dalawang pangunahing prinsipyong pedagogical:
* pagkatuto batay sa proyekto
* madalas na quizzes
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.
Itinuturo ng programa ang mga pangunahing kaalaman ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong kasangkapan at tekniko na ginagamit ng mga web developer ngayon. Magkakaroon ang mga estudyante ng pagkakataong magkaroon ng hands-on na karanasan sa pamamagitan ng paggawa ng typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, at isang banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga estudyante ng matibay na pag-unawa sa pagbuo ng web.
> 🎓 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!
> 🎓 Maaari mong kunin ang unang ilang leksyon 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 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.
Sa pamamagitan ng pagsiguro na ang nilalaman ay tumutugma sa mga proyekto, ang proseso ay ginagawa mas kawili-wili para sa mga estudyante at ang retention ng mga konsepto ay mapapalakas. Sumulat din kami ng ilang panimulang leksyon sa mga batayan ng JavaScript para ipakilala ang mga konsepto, kasabay ng 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)", kung saan ang ilan sa mga may-akda ay nag-ambag sa kurikulum na ito.
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.
Bukod pa rito, ang isang mababang-stakes na quiz bago ang klase ay nagtatakda ng layunin ng estudyante patungo sa pag-aaral ng isang paksa, habang ang pangalawang quiz pagkatapos ng klase ay tinitiyak ang karagdagang retention. Ang kurikulum na ito ay dinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi. Ang mga proyekto ay nagsisimula sa maliit at unti-unting lumalaki ang kumplikasyon sa pagtatapos ng 12-linggong yugto.
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)".
Habang sinasadyang iniiwasan naming ipakilala ang mga framework ng JavaScript upang magpokus sa mga pangunahing kasanayan na kailangan bilang isang web developer bago gamitin ang isang framework, isang magandang susunod na hakbang sa pagtatapos ng kurikulum na ito ay ang pag-aaral tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Bisitahin ang aming [Code of Conduct](CODE_OF_CONDUCT.md) at [Contributing](CONTRIBUTING.md) na mga gabay. Tinatanggap namin ang iyong makabuluhang puna!
> Bisitahin ang aming [Code of Conduct](CODE_OF_CONDUCT.md) at [Contributing](CONTRIBUTING.md) na mga alituntunin. Malugod naming tinatanggap ang iyong konstruktibong feedback!
## 🧭 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`.
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 ipapakita sa port 3000 sa iyong localhost: `localhost:3000`.
## 📘 PDF
Isang PDF ng lahat ng mga aralin ay matatagpuan [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Ang isang PDF ng lahat ng mga aralin ay makikita [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Iba Pang Mga Kurso
@ -260,21 +242,21 @@ Ang aming koponan ay gumagawa ng iba pang mga kurso! Tingnan ang:
## Pagkuha ng Tulong
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.
Kung ikaw ay na-stuck o may mga katanungan tungkol sa paggawa ng AI apps. Sumali sa mga kapwa nag-aaral at mga bihasang developer sa mga talakayan tungkol sa MCP. Ito ay isang suportadong komunidad kung saan malugod 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 feedback sa produkto o mga error habang nagtatayo, bisitahin:
Kung mayroon kang feedback sa produkto o mga error habang bumubuo pumunta sa:
[![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 file na [LICENSE](../../LICENSE) para sa karagdagang impormasyon.
Ang repositoryong ito ay lisensyado sa ilalim ng MIT license. Tingnan ang [LICENSE](../../LICENSE) na file para sa karagdagang impormasyon.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Paunawa**:
Ang dokumentong ito ay isinalin gamit ang 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.
**Pagtatanging Pahayag**:
Ang dokumentong ito ay isinalin gamit ang serbisyong AI na pagsasalin [Co-op Translator](https://github.com/Azure/co-op-translator). Bagaman aming pinagsisikapan ang katumpakan, mangyaring tandaan na ang mga automated na pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa orihinal nitong wika ang dapat ituring na pangunahing sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na nagmula sa paggamit ng pagsasaling ito.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

63
translations/tl/lesson-template/README.md
Unescape View File

@ -1,56 +1,79 @@
# [Paksa ng Aralin]
# Paksa ng Aralin
![Mag-embed ng video dito](../../../lesson-template/video-url)
## 🎥 Video
## [Pre-lecture quiz](../../../lesson-template/quiz-url)
> Magdagdag ng naka-embed na video o link ng aralin dito.
[Ipaliwanag kung ano ang matututunan]
---
## Paunang pagsusulit
> Magdagdag ng link ng pagsusulit dito kapag available na.
---
Magbigay ng maikling pangkalahatang-ideya kung ano ang matututunan ng mga estudyante sa araling ito.
---
### Panimula
Ipaliwanag kung ano ang tatalakayin
Magbigay ng maikling panimula na naglalarawan kung ano ang tatalakayin sa araling ito.
> Mga Tala
---
### Paunang Kaalaman
Anong mga hakbang ang dapat natapos bago ang araling ito?
Ilista ang mga konsepto o paksang dapat nang alam ng mga estudyante bago simulan ang araling ito.
---
### Paghahanda
Mga hakbang na kailangang gawin upang simulan ang araling ito
Ilista ang anumang mga hakbang sa setup o mga kasangkapang kinakailangan bago simulan ang aralin.
---
[Hakbangin sa nilalaman sa mga bloke]
### Nilalaman
Sundan ang nilalaman ng aralin sa mga nakaayos na seksyon.
---
## [Paksa 1]
## Paksa 1
### Gawain:
Magtrabaho nang sama-sama upang unti-unting pagandahin ang inyong codebase para buuin ang proyekto gamit ang shared code:
Magtrabaho nang sama-sama upang unti-unting pagbutihin ang iyong codebase para mabuo ang proyekto gamit ang pinagsamang code:
```html
code blocks
```
✅ Pagpapalawak ng Kaalaman - gamitin ang pagkakataong ito upang palawakin ang kaalaman ng mga mag-aaral sa pamamagitan ng mga bukas na tanong
✅ Pagsusuri ng Kaalaman
Gamitin ang sandaling ito upang palawakin ang kaalaman ng mga estudyante sa pamamagitan ng mga tanong na bukas.
## [Paksa 2]
## Paksa 2
## Paksa 3
## [Paksa 3]
🚀 Hamon
Magdagdag ng isang kumpetitibong hamon para sa mga estudyante upang pagandahin ang proyekto.
🚀 Hamon: Magdagdag ng hamon para sa mga mag-aaral na magtulungan sa klase upang mapahusay ang proyekto
Opsyonal: Magdagdag ng screenshot ng natapos na UI ng aralin kung naaangkop.
Opsyonal: magdagdag ng screenshot ng UI ng natapos na aralin kung naaangkop
## Pagsusulit Pagkatapos ng Aralin
## [Post-lecture quiz](../../../lesson-template/quiz-url)
Magdagdag ng link ng pagsusulit dito pagkatapos makumpleto ang aralin.
## Review at Sariling Pag-aaral
## Repasuhin at Sariling Pag-aaral
**Takdang Aralin Na Dapat Ipasang [MM/YY]**: [Pangalan ng Takdang Aralin](assignment.md)
**Takdang Aralin Kailangang Isumite [MM/YY]**: [Pangalan ng Takdang Aralin](assignment.md)
---
**Paunawa**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Paalala**:
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 awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-tumpak na impormasyon. Ang orihinal na dokumento sa orihinal nitong wika ang dapat ituring na may kapangyarihang sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot para sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Write Preview
Loading…
Cancel
Save