🌐 Update translations via Co-op Translator

update-translations
leestott 5 days ago committed by GitHub
parent f1c9c65e9c
commit 3713650b14

@ -1,133 +1,130 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "63e29f5a308b533df9d70336bbb2e2b8",
"translation_date": "2025-11-18T17:04:55+00:00",
"original_hash": "caff943951276a4459a687166f3dfae2",
"translation_date": "2025-12-19T10:24:23+00:00",
"source_file": "README.md",
"language_code": "id"
}
-->
[![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 Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![Lisensi GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![Kontributor GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![Masalah GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![Permintaan Tarik GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs 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/)
[![Pengamat GitHub](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![Bintang GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Pengembangan Web untuk Pemula - Kurikulum
Pelajari dasar-dasar pengembangan web dengan kursus 12 minggu yang komprehensif dari Microsoft Cloud Advocates. Setiap dari 24 pelajaran membahas JavaScript, CSS, dan HTML melalui proyek langsung seperti terrarium, ekstensi browser, dan permainan luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan Anda dan optimalkan pemahaman Anda dengan pendekatan berbasis proyek yang efektif. Mulailah perjalanan coding Anda hari ini!
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Bergabunglah dengan Komunitas Discord Azure AI Foundry
# Pengembangan Web untuk Pemula - Kurikulum
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Pelajari dasar-dasar pengembangan web dengan kursus 12 minggu yang komprehensif dari Microsoft Cloud Advocates. Setiap dari 24 pelajaran membahas JavaScript, CSS, dan HTML melalui proyek langsung seperti terrarium, ekstensi browser, dan permainan luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan Anda dan optimalkan pemahaman Anda dengan pendekatan pembelajaran berbasis proyek kami yang efektif. Mulailah perjalanan coding Anda hari ini!
Ikuti langkah-langkah ini untuk mulai menggunakan sumber daya ini:
1. **Fork Repository**: Klik [![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Bergabunglah dengan Azure AI Foundry Discord dan temui para ahli serta pengembang lainnya**](https://discord.com/invite/ByRwuEEgH4)
Bergabunglah dengan Komunitas Discord Azure AI Foundry
### 🌐 Dukungan Multi-Bahasa
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
#### Didukung melalui GitHub Action (Otomatis & Selalu Terbaru)
Ikuti langkah-langkah ini untuk mulai menggunakan sumber daya ini:
1. **Fork Repositori**: 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 Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Bergabunglah dengan Azure AI Foundry Discord dan temui para ahli serta pengembang lainnya**](https://discord.com/invite/ByRwuEEgH4)
<!-- TABEL BAHASA PENERJEMAH CO-OP MULAI -->
[Arab](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgaria](../bg/README.md) | [Burma (Myanmar)](../my/README.md) | [Cina (Sederhana)](../zh/README.md) | [Cina (Tradisional, Hong Kong)](../hk/README.md) | [Cina (Tradisional, Makau)](../mo/README.md) | [Cina (Tradisional, Taiwan)](../tw/README.md) | [Kroasia](../hr/README.md) | [Ceko](../cs/README.md) | [Denmark](../da/README.md) | [Belanda](../nl/README.md) | [Estonia](../et/README.md) | [Finlandia](../fi/README.md) | [Prancis](../fr/README.md) | [Jerman](../de/README.md) | [Yunani](../el/README.md) | [Ibrani](../he/README.md) | [Hindi](../hi/README.md) | [Hungaria](../hu/README.md) | [Indonesia](./README.md) | [Italia](../it/README.md) | [Jepang](../ja/README.md) | [Korea](../ko/README.md) | [Lituania](../lt/README.md) | [Melayu](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegia](../no/README.md) | [Persia (Farsi)](../fa/README.md) | [Polandia](../pl/README.md) | [Portugis (Brasil)](../br/README.md) | [Portugis (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumania](../ro/README.md) | [Rusia](../ru/README.md) | [Serbia (Kiril)](../sr/README.md) | [Slovakia](../sk/README.md) | [Slovenia](../sl/README.md) | [Spanyol](../es/README.md) | [Swahili](../sw/README.md) | [Swedia](../sv/README.md) | [Tagalog (Filipina)](../tl/README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turki](../tr/README.md) | [Ukraina](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnam](../vi/README.md)
<!-- TABEL BAHASA PENERJEMAH CO-OP SELESAI -->
### 🌐 Dukungan Multi-Bahasa
**Jika Anda ingin menambahkan dukungan bahasa tambahan, bahasa yang didukung tercantum [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
#### Didukung melalui GitHub Action (Otomatis & Selalu Terbaru)
[![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)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arab](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgaria](../bg/README.md) | [Burma (Myanmar)](../my/README.md) | [Cina (Sederhana)](../zh/README.md) | [Cina (Tradisional, Hong Kong)](../hk/README.md) | [Cina (Tradisional, Makau)](../mo/README.md) | [Cina (Tradisional, Taiwan)](../tw/README.md) | [Kroasia](../hr/README.md) | [Ceko](../cs/README.md) | [Denmark](../da/README.md) | [Belanda](../nl/README.md) | [Estonia](../et/README.md) | [Finlandia](../fi/README.md) | [Prancis](../fr/README.md) | [Jerman](../de/README.md) | [Yunani](../el/README.md) | [Ibrani](../he/README.md) | [Hindi](../hi/README.md) | [Hungaria](../hu/README.md) | [Indonesia](./README.md) | [Italia](../it/README.md) | [Jepang](../ja/README.md) | [Korea](../ko/README.md) | [Lituania](../lt/README.md) | [Melayu](../ms/README.md) | [Marathi](../mr/README.md) | [Nepal](../ne/README.md) | [Norwegia](../no/README.md) | [Persia (Farsi)](../fa/README.md) | [Polandia](../pl/README.md) | [Portugis (Brasil)](../br/README.md) | [Portugis (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumania](../ro/README.md) | [Rusia](../ru/README.md) | [Serbia (Kiril)](../sr/README.md) | [Slovakia](../sk/README.md) | [Slovenia](../sl/README.md) | [Spanyol](../es/README.md) | [Swahili](../sw/README.md) | [Swedia](../sv/README.md) | [Tagalog (Filipina)](../tl/README.md) | [Tamil](../ta/README.md) | [Thailand](../th/README.md) | [Turki](../tr/README.md) | [Ukraina](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnam](../vi/README.md)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
#### 🧑‍🎓 _Apakah Anda seorang pelajar?_
**Jika Anda ingin menambahkan bahasa terjemahan lainnya, daftar bahasa yang didukung tersedia [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
Kunjungi [**Halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana Anda akan menemukan sumber daya untuk pemula, paket pelajar, dan bahkan cara mendapatkan voucher sertifikat gratis. Halaman ini adalah yang perlu Anda tandai dan periksa dari waktu ke waktu karena kami mengganti konten setiap bulan.
[![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)
### 📣 Pengumuman - Tantangan mode Agen GitHub Copilot baru untuk diselesaikan!
#### 🧑‍🎓 _Apakah Anda seorang pelajar?_
Tantangan baru ditambahkan, cari "Tantangan Agen GitHub Copilot 🚀" di sebagian besar bab. Itu adalah tantangan baru untuk Anda selesaikan menggunakan GitHub Copilot dan mode Agen. Jika Anda belum pernah menggunakan mode Agen sebelumnya, mode ini tidak hanya mampu menghasilkan teks tetapi juga dapat membuat dan mengedit file, menjalankan perintah, dan lainnya.
Kunjungi [**Halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana Anda akan menemukan sumber daya untuk pemula, paket pelajar, dan bahkan cara mendapatkan voucher sertifikat gratis. Halaman ini adalah yang perlu Anda tandai dan periksa dari waktu ke waktu karena kontennya diperbarui setiap bulan.
### 📣 Pengumuman - _Proyek Baru untuk dibangun menggunakan Generative AI_
### 📣 Pengumuman - Tantangan mode Agen GitHub Copilot baru untuk diselesaikan!
Proyek Asisten AI baru saja ditambahkan, lihat [proyek](./09-chat-project/README.md)
Tantangan baru ditambahkan, cari "Tantangan Agen GitHub Copilot 🚀" di sebagian besar bab. Ini adalah tantangan baru untuk Anda selesaikan menggunakan GitHub Copilot dan mode Agen. Jika Anda belum pernah menggunakan mode Agen sebelumnya, mode ini mampu tidak hanya menghasilkan teks tetapi juga membuat dan mengedit file, menjalankan perintah, dan banyak lagi.
### 📣 Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru saja dirilis
### 📣 Pengumuman - _Proyek Baru untuk Dibangun menggunakan Generative AI_
Jangan lewatkan kurikulum Generative AI baru kami!
Proyek Asisten AI baru saja ditambahkan, cek [proyek](./09-chat-project/README.md)
Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai!
### 📣 Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru saja dirilis
![Latar Belakang](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.id.png)
Jangan lewatkan kurikulum Generative AI baru kami!
- Pelajaran mencakup segalanya dari dasar hingga RAG.
- Berinteraksi dengan karakter sejarah menggunakan GenAI dan aplikasi pendamping kami.
- Narasi yang menyenangkan dan menarik, Anda akan melakukan perjalanan waktu!
Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai!
![karakter](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.id.png)
![Latar Belakang](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.id.png)
Setiap pelajaran mencakup tugas untuk diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk memandu Anda mempelajari topik seperti:
- Prompting dan rekayasa prompt
- Pembuatan aplikasi teks dan gambar
- Aplikasi pencarian
- Pelajaran mencakup segalanya dari dasar hingga RAG.
- Berinteraksi dengan tokoh sejarah menggunakan GenAI dan aplikasi pendamping kami.
- Narasi yang menyenangkan dan menarik, Anda akan melakukan perjalanan waktu!
Kunjungi [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) untuk memulai!
![Karakter](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.id.png)
Setiap pelajaran mencakup tugas untuk diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk memandu Anda mempelajari topik seperti:
- Prompting dan rekayasa prompt
- Pembuatan aplikasi teks dan gambar
- Aplikasi pencarian
Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai!
## 🌱 Memulai
## 🌱 Memulai
> **Guru**, kami telah [menyertakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami ingin mendengar masukan Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Guru**, kami telah [menyertakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami akan senang mendengar umpan balik Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis pra-kuliah dan lanjutkan dengan membaca materi kuliah, menyelesaikan berbagai aktivitas, dan periksa pemahaman Anda dengan kuis pasca-kuliah.
**[Pelajar](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 periksa pemahaman Anda dengan kuis pasca-kuliah.
Untuk meningkatkan pengalaman belajar Anda, terhubunglah dengan teman-teman Anda 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 tersedia untuk menjawab pertanyaan Anda.
Untuk meningkatkan pengalaman belajar Anda, hubungkan dengan teman-teman Anda 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 tersedia untuk menjawab pertanyaan Anda.
Untuk melanjutkan pendidikan Anda, kami sangat merekomendasikan menjelajahi [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan belajar tambahan.
Untuk melanjutkan pendidikan Anda, kami sangat merekomendasikan menjelajahi [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan belajar tambahan.
### 📋 Menyiapkan lingkungan Anda
### 📋 Menyiapkan lingkungan Anda
Kurikulum ini memiliki lingkungan pengembangan yang siap digunakan! Saat Anda memulai, Anda dapat memilih untuk menjalankan kurikulum di [Codespace](https://github.com/features/codespaces/) (_lingkungan berbasis browser, tidak perlu instalasi_), atau secara lokal di komputer Anda menggunakan editor teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Kurikulum ini memiliki lingkungan pengembangan yang siap digunakan! Saat Anda memulai, Anda dapat memilih untuk menjalankan kurikulum di [Codespace](https://github.com/features/codespaces/) (_lingkungan berbasis browser, tidak 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
Agar Anda dapat dengan mudah menyimpan pekerjaan Anda, disarankan untuk membuat salinan repository ini. Anda dapat melakukannya dengan mengklik tombol **Use this template** di bagian atas halaman. Ini akan membuat repository baru di akun GitHub Anda dengan salinan kurikulum.
#### Buat repositori Anda
Agar Anda dapat dengan mudah menyimpan pekerjaan Anda, disarankan untuk membuat salinan repositori ini. 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 sudut kanan atas halaman ini.
2. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Ikuti langkah-langkah ini:
1. **Fork Repositori**: Klik tombol "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 di Codespace
Di salinan repository Anda yang telah dibuat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda bekerja.
Di salinan repositori Anda yang telah dibuat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda bekerja.
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.id.png)
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.id.png)
#### Menjalankan kurikulum secara lokal di komputer Anda
#### Menjalankan kurikulum secara lokal di komputer Anda
Untuk menjalankan kurikulum ini secara lokal di komputer Anda, Anda akan membutuhkan editor teks, browser, dan alat baris perintah. Pelajaran pertama kami, [Pengenalan Bahasa Pemrograman dan Alat yang Digunakan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan memandu Anda melalui berbagai opsi untuk masing-masing alat ini agar Anda dapat memilih yang paling sesuai untuk 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 yang Digunakan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan memandu Anda melalui berbagai opsi untuk setiap alat ini agar Anda dapat memilih yang paling sesuai 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).
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 repository Anda ke komputer Anda. Anda dapat melakukannya dengan mengklik tombol **Code** dan menyalin URL:
1. Clone repositori Anda ke komputer Anda. Anda dapat melakukannya dengan mengklik tombol **Code** dan menyalin URL:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) di dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan perintah berikut, mengganti `<your-repository-url>` dengan URL yang baru saja Anda salin:
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) di dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan perintah berikut, mengganti `<your-repository-url>` dengan URL yang baru saja Anda salin:
```bash
git clone <your-repository-url>
```
2. Buka folder di Visual Studio Code. Anda dapat melakukannya 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 clone.
> Rekomendasi ekstensi 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
> Rekomendasi ekstensi 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 mencakup:
@ -155,7 +152,7 @@ Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstud
| 04 | Dasar JS | Tipe Data JavaScript | Dasar-dasar tipe data JavaScript | [Tipe Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Dasar JS | Fungsi dan Metode | Pelajari tentang fungsi dan metode untuk mengelola alur logika aplikasi | [Fungsi dan Metode](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher |
| 06 | Dasar JS | Membuat Keputusan dengan JS | Pelajari cara membuat kondisi dalam kode Anda menggunakan metode pengambilan keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Dasar JS | Array dan Loop | Bekerja dengan data menggunakan array dan loop dalam JavaScript | [Array dan Loop](./2-js-basics/4-arrays-loops/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, dengan fokus pada membangun tata letak | [Pengantar HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Praktik | Bangun CSS untuk menata terrarium online, dengan fokus pada dasar-dasar CSS termasuk membuat halaman responsif | [Pengantar CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Bangun JavaScript untuk membuat terrarium berfungsi sebagai antarmuka seret/lepas, dengan fokus pada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
@ -172,7 +169,7 @@ Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstud
| 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) | Membangun Formulir Login dan Registrasi | Pelajari tentang membangun formulir dan menangani rutinitas validasi | [Formulir](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi Anda, cara mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Manajemen Status | Pelajari cara aplikasi Anda mempertahankan status dan cara mengelolanya secara programatis | [Manajemen Status](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Manajemen Status | Pelajari cara aplikasi Anda mempertahankan status dan cara mengelolanya secara programatik | [Manajemen Status](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Bekerja dengan VScode | Pelajari cara menggunakan editor kode | [Gunakan Editor Kode VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Bekerja dengan AI | Pelajari cara membangun asisten AI Anda sendiri | [Proyek Asisten AI](./9-chat-project/README.md) | Chris |
@ -184,18 +181,18 @@ Kurikulum kami dirancang dengan dua prinsip pedagogi utama:
Program ini mengajarkan dasar-dasar JavaScript, HTML, dan CSS, serta alat dan teknik terbaru yang digunakan oleh pengembang web saat ini. Siswa akan memiliki kesempatan untuk mengembangkan pengalaman langsung dengan membangun game mengetik, terrarium virtual, ekstensi browser ramah lingkungan, game bergaya space-invader, dan aplikasi perbankan untuk bisnis. Pada akhir seri, siswa akan memiliki pemahaman yang solid tentang pengembangan web.
> 🎓 Anda dapat mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai [Jalur Belajar](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
> 🎓 Anda dapat mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
Dengan memastikan bahwa konten selaras dengan proyek, proses pembelajaran menjadi lebih menarik bagi siswa dan retensi konsep akan meningkat. Kami juga menulis beberapa pelajaran pengantar dalam dasar-dasar JavaScript untuk memperkenalkan konsep, dipasangkan dengan video dari koleksi tutorial video "[Seri Pemula: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya berkontribusi pada kurikulum ini.
Dengan memastikan bahwa konten selaras dengan proyek, proses pembelajaran menjadi lebih menarik bagi siswa dan retensi konsep akan meningkat. Kami juga menulis beberapa pelajaran awal dalam dasar-dasar JavaScript untuk memperkenalkan konsep, dipasangkan dengan video dari koleksi tutorial video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya berkontribusi pada kurikulum ini.
Selain itu, kuis dengan risiko rendah sebelum kelas menetapkan niat siswa untuk mempelajari topik, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan serta dapat diambil secara keseluruhan atau sebagian. Proyek dimulai dari yang kecil dan menjadi semakin kompleks pada akhir siklus 12 minggu.
Meskipun kami sengaja menghindari memperkenalkan kerangka kerja JavaScript untuk berkonsentrasi pada keterampilan dasar yang diperlukan sebagai pengembang web sebelum mengadopsi kerangka kerja, langkah selanjutnya yang baik setelah menyelesaikan kurikulum ini adalah mempelajari tentang Node.js melalui koleksi video lainnya: "[Seri Pemula: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Meskipun kami sengaja menghindari memperkenalkan kerangka kerja JavaScript untuk berkonsentrasi pada keterampilan dasar yang diperlukan sebagai pengembang web sebelum mengadopsi kerangka kerja, langkah selanjutnya yang baik setelah menyelesaikan kurikulum ini adalah mempelajari tentang Node.js melalui koleksi video lainnya: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Kunjungi [Kode Etik](CODE_OF_CONDUCT.md) dan pedoman [Kontribusi](CONTRIBUTING.md) kami. Kami menyambut umpan balik konstruktif Anda!
## 🧭 Akses offline
## 🧭 Akses Offline
Anda dapat menjalankan dokumentasi ini secara offline dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repositori ini, [instal Docsify](https://docsify.js.org/#/quickstart) di mesin lokal Anda, lalu di folder root repositori ini, ketik `docsify serve`. Situs web akan disajikan di port 3000 di localhost Anda: `localhost:3000`.
@ -209,55 +206,61 @@ PDF dari semua pelajaran dapat ditemukan [di sini](https://microsoft.github.io/W
Tim kami juga memproduksi kursus lainnya! Lihat:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j untuk Pemula](https://img.shields.io/badge/LangChain4j%20untuk%20Pemula-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js untuk Pemula](https://img.shields.io/badge/LangChain.js%20untuk%20Pemula-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agen
[![AZD untuk Pemula](https://img.shields.io/badge/AZD%20untuk%20Pemula-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI untuk Pemula](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 untuk Pemula](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)
[![AI Agents untuk Pemula](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI untuk Pemula](https://img.shields.io/badge/Edge%20AI%20untuk%20Pemula-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP untuk Pemula](https://img.shields.io/badge/MCP%20untuk%20Pemula-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agen untuk Pemula](https://img.shields.io/badge/AI%20Agen%20untuk%20Pemula-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Seri AI Generatif
[![AI Generatif untuk Pemula](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Generatif (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![AI Generatif (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![AI Generatif (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Seri AI Generatif
[![AI Generatif untuk Pemula](https://img.shields.io/badge/AI%20Generatif%20untuk%20Pemula-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Generatif (.NET)](https://img.shields.io/badge/AI%20Generatif%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![AI Generatif (Java)](https://img.shields.io/badge/AI%20Generatif%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![AI Generatif (JavaScript)](https://img.shields.io/badge/AI%20Generatif%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Pembelajaran Inti
[![ML untuk Pemula](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science untuk Pemula](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI untuk Pemula](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Keamanan Siber untuk Pemula](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Pengembangan Web untuk Pemula](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT untuk Pemula](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![Pengembangan XR untuk Pemula](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Pembelajaran Inti
[![ML untuk Pemula](https://img.shields.io/badge/ML%20untuk%20Pemula-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science untuk Pemula](https://img.shields.io/badge/Data%20Science%20untuk%20Pemula-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI untuk Pemula](https://img.shields.io/badge/AI%20untuk%20Pemula-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Keamanan Siber untuk Pemula](https://img.shields.io/badge/Keamanan%20Siber%20untuk%20Pemula-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Pengembangan Web untuk Pemula](https://img.shields.io/badge/Pengembangan%20Web%20untuk%20Pemula-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT untuk Pemula](https://img.shields.io/badge/IoT%20untuk%20Pemula-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![Pengembangan XR untuk Pemula](https://img.shields.io/badge/Pengembangan%20XR%20untuk%20Pemula-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Seri Copilot
[![Copilot untuk Pemrograman Berpasangan AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot untuk C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Petualangan Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
### Seri Copilot
[![Copilot untuk Pemrograman Berpasangan AI](https://img.shields.io/badge/Copilot%20untuk%20Pemrograman%20Berpasangan%20AI-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot untuk C#/.NET](https://img.shields.io/badge/Copilot%20untuk%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Petualangan Copilot](https://img.shields.io/badge/Petualangan%20Copilot-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Mendapatkan Bantuan
## Mendapatkan Bantuan
Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI, bergabunglah dengan sesama pelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung di mana pertanyaan diterima dan pengetahuan dibagikan secara bebas.
Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI, bergabunglah dengan sesama pelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung di mana pertanyaan diterima dan pengetahuan dibagikan secara bebas.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Jika Anda memiliki masukan produk atau menemukan kesalahan saat membangun, kunjungi:
Jika Anda memiliki masukan produk atau menemukan kesalahan saat membangun, kunjungi:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
[![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)
## Lisensi
## Lisensi
Repositori ini dilisensikan di bawah lisensi MIT. Lihat file [LICENSE](../../LICENSE) untuk informasi lebih lanjut.
Repositori ini dilisensikan di bawah lisensi MIT. Lihat file [LICENSE](../../LICENSE) untuk informasi lebih lanjut.
---
<!-- 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 berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis dapat 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 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 memberikan hasil yang akurat, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang berwenang. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa terjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang salah yang timbul dari penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "63e29f5a308b533df9d70336bbb2e2b8",
"translation_date": "2025-11-18T17:07:46+00:00",
"original_hash": "caff943951276a4459a687166f3dfae2",
"translation_date": "2025-12-19T10:27:04+00:00",
"source_file": "README.md",
"language_code": "ja"
}
@ -21,13 +21,13 @@ CO_OP_TRANSLATOR_METADATA:
# 初心者のためのウェブ開発 - カリキュラム
Microsoft Cloud Advocatesによる12週間の包括的なコースで、ウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを、テラリウム、ブラウザ拡張機能、宇宙ゲームなどの実践的なプロジェクトを通じて学びます。クイズ、ディスカッション、実践課題に取り組みながら、スキルを向上させ、知識の定着を最適化しましょう。今日からコーディングの旅を始めましょう!
Microsoft Cloud Advocatesによる12週間の包括的なコースで、ウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを、テラリウム、ブラウザ拡張機能、宇宙ゲームなどの実践的なプロジェクトを通じて学びます。クイズ、ディスカッション、実践課題に取り組みながら、スキルを向上させ、知識を効果的に定着させましょう。今日からコーディングの旅を始めましょう!
Azure AI Foundry Discordコミュニティに参加しましょう
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
以下の手順に従って、このリソースを使い始めましょう
以下の手順に従って、このリソースを使い始めてください
1. **リポジトリをフォークする**: [![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. **リポジトリをクローンする**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discordに参加して、専門家や他の開発者と交流する**](https://discord.com/invite/ByRwuEEgH4)
@ -37,7 +37,7 @@ Azure AI Foundry Discordコミュニティに参加しましょう
#### GitHub Actionによるサポート (自動化され、常に最新)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[アラビア語](../ar/README.md) | [ベンガル語](../bn/README.md) | [ブルガリア語](../bg/README.md) | [ビルマ語 (ミャンマー)](../my/README.md) | [中国語 (簡体字)](../zh/README.md) | [中国語 (繁体字, 香港)](../hk/README.md) | [中国語 (繁体字, マカオ)](../mo/README.md) | [中国語 (繁体字, 台湾)](../tw/README.md) | [クロアチア語](../hr/README.md) | [チェコ語](../cs/README.md) | [デンマーク語](../da/README.md) | [オランダ語](../nl/README.md) | [エストニア語](../et/README.md) | [フィンランド語](../fi/README.md) | [フランス語](../fr/README.md) | [ドイツ語](../de/README.md) | [ギリシャ語](../el/README.md) | [ヘブライ語](../he/README.md) | [ヒンディー語](../hi/README.md) | [ハンガリー語](../hu/README.md) | [インドネシア語](../id/README.md) | [イタリア語](../it/README.md) | [日本語](./README.md) | [韓国語](../ko/README.md) | [リトアニア語](../lt/README.md) | [マレー語](../ms/README.md) | [マラーティー語](../mr/README.md) | [ネパール語](../ne/README.md) | [ノルウェー語](../no/README.md) | [ペルシャ語 (ファルシー)](../fa/README.md) | [ポーランド語](../pl/README.md) | [ポルトガル語 (ブラジル)](../br/README.md) | [ポルトガル語 (ポルトガル)](../pt/README.md) | [パンジャブ語 (グルムキー)](../pa/README.md) | [ルーマニア語](../ro/README.md) | [ロシア語](../ru/README.md) | [セルビア語 (キリル文字)](../sr/README.md) | [スロバキア語](../sk/README.md) | [スロベニア語](../sl/README.md) | [スペイン語](../es/README.md) | [スワヒリ語](../sw/README.md) | [スウェーデン語](../sv/README.md) | [タガログ語 (フィリピン)](../tl/README.md) | [タミル語](../ta/README.md) | [タイ語](../th/README.md) | [トルコ語](../tr/README.md) | [ウクライナ語](../uk/README.md) | [ウルドゥー語](../ur/README.md) | [ベトナム語](../vi/README.md)
[アラビア語](../ar/README.md) | [ベンガル語](../bn/README.md) | [ブルガリア語](../bg/README.md) | [ビルマ語 (ミャンマー)](../my/README.md) | [中国語 (簡体字)](../zh/README.md) | [中国語 (繁体字, 香港)](../hk/README.md) | [中国語 (繁体字, マカオ)](../mo/README.md) | [中国語 (繁体字, 台湾)](../tw/README.md) | [クロアチア語](../hr/README.md) | [チェコ語](../cs/README.md) | [デンマーク語](../da/README.md) | [オランダ語](../nl/README.md) | [エストニア語](../et/README.md) | [フィンランド語](../fi/README.md) | [フランス語](../fr/README.md) | [ドイツ語](../de/README.md) | [ギリシャ語](../el/README.md) | [ヘブライ語](../he/README.md) | [ヒンディー語](../hi/README.md) | [ハンガリー語](../hu/README.md) | [インドネシア語](../id/README.md) | [イタリア語](../it/README.md) | [日本語](./README.md) | [韓国語](../ko/README.md) | [リトアニア語](../lt/README.md) | [マレー語](../ms/README.md) | [マラーティー語](../mr/README.md) | [ネパール語](../ne/README.md) | [ノルウェー語](../no/README.md) | [ペルシャ語 (ファルシー)](../fa/README.md) | [ポーランド語](../pl/README.md) | [ポルトガル語 (ブラジル)](../br/README.md) | [ポルトガル語 (ポルトガル)](../pt/README.md) | [パンジャブ語 (グルムキー)](../pa/README.md) | [ルーマニア語](../ro/README.md) | [ロシア語](../ru/README.md) | [セルビア語 (キリル文字)](../sr/README.md) | [スロバキア語](../sk/README.md) | [スロベニア語](../sl/README.md) | [スペイン語](../es/README.md) | [スワヒリ語](../sw/README.md) | [スウェーデン語](../sv/README.md) | [タガログ語 (フィリピン)](../tl/README.md) | [タミル語](../ta/README.md) | [タイ語](../th/README.md) | [トルコ語](../tr/README.md) | [ウクライナ語](../uk/README.md) | [ウルドゥー語](../ur/README.md) | [ベトナム語](../vi/README.md)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**追加の翻訳を希望する場合は、[こちら](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)にサポートされている言語が記載されています。**
@ -46,9 +46,9 @@ Azure AI Foundry Discordコミュニティに参加しましょう
#### 🧑‍🎓 _学生の皆さんへ_
[**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)を訪れて、初心者向けリソース、学生向けパック、さらには無料の認定証バウチャーを取得する方法を見つけてください。このページはブックマークして、毎月内容が更新されるので定期的にチェックしてください
[**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)を訪問して、初心者向けリソース、学生パック、さらには無料の認定証バウチャーを取得する方法を見つけてください。このページは毎月内容が更新されるので、ブックマークして定期的にチェックすることをお勧めします
### 📣 お知らせ - 新しいGitHub Copilot Agentモードチャレンジが登場
### 📣 お知らせ - 新しいGitHub Copilot Agentモードチャレンジが追加されました
新しいチャレンジが追加されました。ほとんどの章で「GitHub Copilot Agent Challenge 🚀」を探してください。GitHub CopilotとAgentモードを使用して完了する新しいチャレンジです。Agentモードを初めて使用する場合、テキストの生成だけでなく、ファイルの作成や編集、コマンドの実行なども可能です。
@ -60,12 +60,12 @@ Azure AI Foundry Discordコミュニティに参加しましょう
新しい生成AIカリキュラムをお見逃しなく
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)を訪れて、今すぐ始めましょう!
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) を訪問して始めましょう!
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ja.png)
- 基礎からRAGまでをカバーするレッスン
- GenAIとコンパニオンアプリを使用して歴史上の人物と対話
- GenAIと連携アプリを使用して歴史上の人物と対話
- 楽しく魅力的なストーリーでタイムトラベル体験!
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ja.png)
@ -75,7 +75,7 @@ Azure AI Foundry Discordコミュニティに参加しましょう
- テキストと画像アプリの生成
- 検索アプリ
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)を訪れて、今すぐ始めましょう!
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) を訪問して始めましょう!
## 🌱 始め方
@ -89,10 +89,10 @@ Azure AI Foundry Discordコミュニティに参加しましょう
### 📋 環境のセットアップ
このカリキュラムには、すぐに使える開発環境が用意されています!開始時に、[Codespace](https://github.com/features/codespaces/)(ブラウザベースでインストール不要の環境)を使用するか、ローカルのコンピュータで[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)などのテキストエディタを使用して実行することができます。
このカリキュラムには、すぐに使える開発環境が用意されています!始める際には、[Codespace](https://github.com/features/codespaces/)(ブラウザベースでインストール不要の環境)を使用するか、ローカルのコンピュータで[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)のようなテキストエディタを使用して実行することができます。
#### リポジトリを作成する
作業を簡単に保存するために、このリポジトリのコピーを作成することをお勧めします。ページ上部の**Use this template**ボタンをクリックすると、カリキュラムのコピーが含まれた新しいリポジトリがGitHubアカウントに作成されます。
作業を簡単に保存するために、このリポジトリのコピーを作成することをお勧めします。ページ上部の **Use this template** ボタンをクリックすると、カリキュラムのコピーが含まれた新しいリポジトリがGitHubアカウントに作成されます。
以下の手順に従ってください:
1. **リポジトリをフォークする**: このページの右上にある「Fork」ボタンをクリックします。
@ -100,39 +100,39 @@ Azure AI Foundry Discordコミュニティに参加しましょう
#### Codespaceでカリキュラムを実行する
作成したリポジトリのコピーで、**Code**ボタンをクリックし、**Open with Codespaces**を選択します。これにより、作業用の新しいCodespaceが作成されます。
作成したリポジトリのコピーで、**Code** ボタンをクリックし、**Open with Codespaces** を選択します。これにより、作業用の新しいCodespaceが作成されます。
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ja.png)
#### ローカルコンピュータでカリキュラムを実行する
ローカルコンピュータでこのカリキュラムを実行するには、テキストエディタ、ブラウザ、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](../../1-getting-started-lessons/1-intro-to-programming-languages)では、これらのツールのさまざまなオプションを案内し、自分に合ったものを選択できるようにします。
ローカルコンピュータでこのカリキュラムを実行するには、テキストエディタ、ブラウザ、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](../../1-getting-started-lessons/1-intro-to-programming-languages)では、これらのツールのさまざまなオプションを案内し、最適なものを選択できるようにします。
私たちのおすすめは、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)をエディタとして使用することです。これには、組み込みの[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)も含まれています。[こちら](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)からVisual Studio Codeをダウンロードできます。
1. リポジトリをコンピュータにクローンします。**Code**ボタンをクリックしてURLをコピーします
1. リポジトリをコンピュータにクローンします。**Code** ボタンをクリックしてURLをコピーします
[CodeSpace](./images/createcodespace.png)
次に、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)内の[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)を開き、以下のコマンドを実行します。`<your-repository-url>`をコピーしたURLに置き換えてください
次に、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)内の[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)を開き、以下のコマンドを実行します。`<your-repository-url>` をコピーしたURLに置き換えてください
```bash
git clone <your-repository-url>
```
2. Visual Studio Codeでフォルダを開きます。**File** > **Open Folder**をクリックし、クローンしたフォルダを選択します。
2. Visual Studio Codeでフォルダを開きます。**File** > **Open Folder** をクリックし、クローンしたフォルダを選択します。
> 推奨されるVisual Studio Code拡張機能:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code内でHTMLページをプレビューするため
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コードをより速く書くための支援ツール
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コードを書くスピードを上げるための支援ツール
## 📂 各レッスンには以下が含まれます:
## 📂 各レッスンには以下が含まれます
- 任意のスケッチノート
- 任意の補足動画
- オプションのスケッチノート
- オプションの補足動画
- レッスン前のウォームアップクイズ
- 書き起こしレッスン
- 書かれたレッスン内容
- プロジェクトベースのレッスンでは、プロジェクトを構築するためのステップバイステップガイド
- 知識チェック
- チャレンジ
@ -140,121 +140,124 @@ Azure AI Foundry Discordコミュニティに参加しましょう
- 課題
- [レッスン後のクイズ](https://ff-quizzes.netlify.app/web/)
> **クイズについての注意**: すべてのクイズはQuiz-appフォルダーに含まれており、合計48個のクイズがあり、それぞれ3問ずつです。[こちら](https://ff-quizzes.netlify.app/web/)で利用可能で、Quizアプリはローカルで実行するかAzureにデプロイできます。`quiz-app`フォルダーの指示に従ってください。
> **クイズについての注意**: すべてのクイズはQuiz-appフォルダーに含まれており、3問ずつの合計48クイズがあります。クイズは[こちら](https://ff-quizzes.netlify.app/web/)で利用可能で、ローカルで実行するかAzureにデプロイすることができます。`quiz-app`フォルダーの指示に従ってください。
## 🗃️ レッスン
| | プロジェクト名 | 教えられる概念 | 学習目標 | リンクされたレッスン | 著者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | 始めるにあたって | プログラミングの導入とツールの使い方 | ほとんどのプログラミング言語の基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学ぶ | [プログラミング言語とツールの導入](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 始めるにあたって | GitHubの基本、チームでの作業 | プロジェクトでGitHubを使用する方法、コードベースで他の人と協力する方法 | [GitHubの導入](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 始めるにあたって | アクセシビリティ | ウェブアクセシビリティの基本を学ぶ | [アクセシビリティの基](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JSの基本 | JavaScriptのデータ型 | JavaScriptのデータ型の基本を学ぶ | [データ型](./2-js-basics/1-data-types/README.md) | Jasmine |
| 01 | はじめに | プログラミングとツールの基本 | ほとんどのプログラミング言語の基本的な基盤と、プロの開発者が仕事をするために使用するソフトウェアについて学ぶ | [プログラミング言語とツールの基本](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | はじめに | GitHubの基本、チームでの作業 | プロジェクトでGitHubを使用する方法、コードベースで他の人と協力する方法 | [GitHubの基本](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | はじめに | アクセシビリティ | ウェブアクセシビリティの基本を学ぶ | [アクセシビリティの基](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JSの基本 | JavaScriptのデータ型 | JavaScriptのデータ型の基本 | [データ型](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JSの基本 | 関数とメソッド | アプリケーションのロジックフローを管理するための関数とメソッドについて学ぶ | [関数とメソッド](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JSの基本 | JSでの意思決定 | 意思決定方法を使用してコード内で条件を作成する方法を学ぶ | [意思決定](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JSの基本 | 配列とループ | JavaScriptで配列とループを使用してデータを操作する | [配列とループ](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [テラリウム](./3-terrarium/solution/README.md) | HTMLの実践 | オンラインテラリウムを作成するためのHTMLを構築し、レイアウトの構築に焦点を当てる | [HTMLの導入](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [テラリウム](./3-terrarium/solution/README.md) | CSSの実践 | オンラインテラリウムをスタイル付けするためのCSSを構築し、レスポンシブデザインを含むCSSの基本に焦点を当てる | [CSSの導入](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [テラリウム](./3-terrarium/solution/README.md) | JavaScriptクロージャ、DOM操作 | テラリウムをドラッグドロップインターフェースとして機能させるためのJavaScriptを構築し、クロージャとDOM操作に焦点を当てる | [JavaScriptクロージャ、DOM操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [タイピングゲーム](./4-typing-game/solution/README.md) | タイピングゲームを構築 | キーボードイベントを使用してJavaScriptアプリのロジックを駆動する方法を学ぶ | [イベント駆動プログラミング](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [グリーンブラウザ拡張機能](./5-browser-extension/solution/README.md) | ブラウザーの操作 | ブラウザーの動作、歴史、ブラウザー拡張機能の最初の要素をスキャフォールドする方法を学ぶ | [ブラウザについて](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [グリーンブラウザ拡張機能](./5-browser-extension/solution/README.md) | フォームの構築、APIの呼び出し、ローカルストレージに変数を保存する | ローカルストレージに保存された変数を使用してAPIを呼び出すためのブラウザ拡張機能のJavaScript要素を構築する | [API、フォーム、ローカルストレージ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [グリーンブラウザ拡張機能](./5-browser-extension/solution/README.md) | ブラウザのバックグラウンドプロセス、ウェブパフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理する方法を学び、ウェブパフォーマンスと最適化について学ぶ | [バックグラウンドタスクとパフォーマンス](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [スペースゲーム](./6-space-game/solution/README.md) | JavaScriptを使用したより高度なゲーム開発 | クラスとコンポジションを使用した継承とPub/Subパターンについて学び、ゲーム構築の準備をする | [高度なゲーム開発の導入](./6-space-game/1-introduction/README.md) | Chris |
| 08 | [テラリウム](./3-terrarium/solution/README.md) | HTMLの実践 | オンラインテラリウムを作成するためのHTMLを構築し、レイアウト作成に焦点を当てる | [HTMLの紹介](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [テラリウム](./3-terrarium/solution/README.md) | CSSの実践 | オンラインテラリウムをスタイル付けするためのCSSを構築し、レスポンシブデザインを含むCSSの基本に焦点を当てる | [CSSの紹介](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [テラリウム](./3-terrarium/solution/README.md) | JavaScriptクロージャ、DOM操作 | テラリウムをドラッグドロップインターフェースとして機能させるためのJavaScriptを構築し、クロージャとDOM操作に焦点を当てる | [JavaScriptクロージャ、DOM操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [タイピングゲーム](./4-typing-game/solution/README.md) | タイピングゲームを作成 | キーボードイベントを使用してJavaScriptアプリのロジックを駆動する方法を学ぶ | [イベント駆動プログラミング](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [グリーンブラウザ拡張機能](./5-browser-extension/solution/README.md) | ブラウザの操作 | ブラウザの仕組み、その歴史、ブラウザ拡張機能の最初の要素をスキャフォールドする方法を学ぶ | [ブラウザについて](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [グリーンブラウザ拡張機能](./5-browser-extension/solution/README.md) | フォームの作成、APIの呼び出し、ローカルストレージに変数を保存 | ローカルストレージに保存された変数を使用してAPIを呼び出すためのブラウザ拡張機能のJavaScript要素を構築する | [API、フォーム、ローカルストレージ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [グリーンブラウザ拡張機能](./5-browser-extension/solution/README.md) | ブラウザのバックグラウンドプロセス、ウェブパフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理する方法を学び、ウェブパフォーマンスと最適化について学ぶ | [バックグラウンドタスクとパフォーマンス](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [スペースゲーム](./6-space-game/solution/README.md) | JavaScriptを使たより高度なゲーム開発 | クラスとコンポジションを使用した継承と、ゲーム構築の準備としてのPub/Subパターンについて学ぶ | [高度なゲーム開発の紹介](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [スペースゲーム](./6-space-game/solution/README.md) | キャンバスへの描画 | 画面に要素を描画するために使用されるCanvas APIについて学ぶ | [キャンバスへの描画](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [スペースゲーム](./6-space-game/solution/README.md) | 画面上の要素を移動させる | 要素がカートesian座標とCanvas APIを使用して動きを得る方法を発見する | [要素の移動](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [スペースゲーム](./6-space-game/solution/README.md) | 衝突検出 | キープレスを使用して要素が互いに衝突し反応するようにし、ゲームのパフォーマンスを確保するためのクールダウン機能を提供する | [衝突検出](./6-space-game/4-collision-detection/README.md) | Chris |
| 17 | [スペースゲーム](./6-space-game/solution/README.md) | 画面上の要素の移動 | カートesian座標とCanvas APIを使用して要素に動きを与える方法を発見する | [要素の移動](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [スペースゲーム](./6-space-game/solution/README.md) | 衝突検出 | キー入力を使用して要素を衝突させ、反応させる方法を学び、ゲームのパフォーマンスを確保するためのクールダウン機能を提供する | [衝突検出](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [スペースゲーム](./6-space-game/solution/README.md) | スコアの保持 | ゲームの状態とパフォーマンスに基づいて数学的計算を行う | [スコアの保持](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [スペースゲーム](./6-space-game/solution/README.md) | ゲームの終了と再開 | ゲームの終了と再開について学び、アセットのクリーンアップと変数値のリセットを含む | [終了条件](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [バンキングアプリ](./7-bank-project/solution/README.md) | ウェブアプリのHTMLテンプレートとルート | ルーティングとHTMLテンプレートを使用してマルチページウェブサイトのアーキテクチャのスキャフォールドを作成する方法を学ぶ | [HTMLテンプレートとルート](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [バンキングアプリ](./7-bank-project/solution/README.md) | ログインと登録フォームの構築 | フォームの構築と検証ルーチンの処理について学ぶ | [フォーム](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [バンキングアプリ](./7-bank-project/solution/README.md) | データの取得と使用方法 | データがアプリ内でどのように流れるか、取得、保存、廃棄する方法を学ぶ | [データ](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [バンキングアプリ](./7-bank-project/solution/README.md) | 状態管理の概念 | アプリが状態を保持する方法とプログラム的に管理する方法を学ぶ | [状態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [ブラウザ/VScodeコード](../../8-code-editor) | VScodeの操作 | コードエディタの使用方法を学ぶ| [VScodeコードエディタの使用](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 21 | [バンキングアプリ](./7-bank-project/solution/README.md) | ウェブアプリのHTMLテンプレートとルート | マルチページウェブサイトのアーキテクチャのスキャフォールドをルーティングとHTMLテンプレートを使用して作成する方法を学ぶ | [HTMLテンプレートとルート](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [バンキングアプリ](./7-bank-project/solution/README.md) | ログインと登録フォームの作成 | フォームの作成とバリデーションルーチンの処理について学ぶ | [フォーム](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [バンキングアプリ](./7-bank-project/solution/README.md) | データの取得と使用方法 | アプリ内でのデータの流れ、取得方法、保存方法、破棄方法について学ぶ | [データ](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [バンキングアプリ](./7-bank-project/solution/README.md) | 状態管理の概念 | アプリが状態を保持する方法と、それをプログラム的に管理する方法を学ぶ | [状態管理](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [ブラウザ/VScodeコード](../../8-code-editor) | VScodeの操作 | コードエディタの使用方法を学ぶ | [VScodeコードエディタの使用](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AIアシスタント](./9-chat-project/README.md) | AIの操作 | 独自のAIアシスタントを構築する方法を学ぶ | [AIアシスタントプロジェクト](./9-chat-project/README.md) | Chris |
## 🏫 教育
## 🏫 教育方針
私たちのカリキュラムは、以下の2つの主要な教育原則に基づいて設計されています:
私たちのカリキュラムは、以下の2つの主要な教育方針に基づいて設計されています:
* プロジェクトベースの学習
* 頻繁なクイズ
このプログラムでは、JavaScript、HTML、CSSの基本と、今日のウェブ開発者が使用する最新のツールと技術を教えます。学生は、タイピングゲーム、仮想テラリウム、環境に優しいブラウザー拡張機能、スペースインベーダースタイルのゲーム、そしてビジネス向けのバンキングアプリを構築することで、実践的な経験を積む機会を得ます。このシリーズの終わりまでに、学生はウェブ開発の確固たる理解を得ることができます。
このプログラムでは、JavaScript、HTML、CSSの基本と、現代のウェブ開発者が使用する最新のツールや技術を教えます。学生は、タイピングゲーム、仮想テラリウム、エコフレンドリーなブラウザ拡張機能、スペースインベーダー風ゲーム、ビジネス向けバンキングアプリを構築することで、実践的な経験を積む機会を得ます。このシリーズの終わりまでに、学生はウェブ開発の確かな理解を得ることができます。
> 🎓 このカリキュラムの最初のいくつかのレッスンをMicrosoft Learnで[学習パス](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)として受講することができます!
> 🎓 このカリキュラムの最初のいくつかのレッスンは、Microsoft Learnの[学習パス](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)として受講できます!
プロジェクトに合わせて内容を調整することで、学生にとってより魅力的なプロセスとなり、概念の定着が促進されます。また、JavaScriptの基本を紹介するいくつかのスターターレッスンを作成し、"[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"のビデオチュートリアルコレクションとペアリングしました。このコレクションの一部の著者がこのカリキュラムに貢献しています。
プロジェクトに合わせて内容を調整することで、学生にとってより魅力的なプロセスとなり、概念の定着が促進されます。また、JavaScriptの基本を紹介するいくつかのスターターレッスンを作成し、"[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"というビデオチュートリアルコレクションのビデオとペアリングしました。このコレクションの一部の著者は、このカリキュラムにも貢献しています。
さらに、授業前の低リスククイズは、学生がトピックを学ぶ意図を設定し、授業後の2回目のクイズはさら定着を確保します。このカリキュラムは柔軟で楽しいように設計されており、全体または部分的に受講することができます。プロジェクトは小さなものから始まり、12週間のサイクルの終わりまでに徐々に複雑になります。
さらに、授業前の低リスククイズは、学生がトピックを学ぶ意図を設定し、授業後の2回目のクイズはさらなる定着を確保します。このカリキュラムは柔軟で楽しいように設計されており、全体または一部を受講することができます。プロジェクトは小さなものから始まり、12週間のサイクルの終わりにはますます複雑になります。
JavaScriptフレームワークの導入を意図的に避け、フレームワークを採用する前にウェブ開発者として必要な基本スキルに集中していますが、このカリキュラムを完了した後の次のステップとして、Node.jsについて学ぶことをお勧めします。別のビデオコレクション: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"をご覧ください。
> [行動規範](CODE_OF_CONDUCT.md)と[貢献](CONTRIBUTING.md)ガイドラインをご覧ください。建設的なフィードバックを歓迎します!
JavaScriptフレームワークの導入を意図的に避け、フレームワークを採用する前にウェブ開発者として必要な基本スキルに集中していますが、このカリキュラムを修了した後の次のステップとして、Node.jsについて学ぶことをお勧めします。別のビデオコレクション: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"をご覧ください。
> [行動規範](CODE_OF_CONDUCT.md)と[貢献ガイドライン](CONTRIBUTING.md)をご覧ください。建設的なフィードバックをお待ちしています!
## 🧭 オフラインアクセス
[Docsify](https://docsify.js.org/#/)を使用して、このドキュメントをオフラインで実行できます。このリポジトリをフォークし、[Docsifyをインストール](https://docsify.js.org/#/quickstart)してローカルマシンにインストールし、このリポジトリのルートフォルダーで`docsify serve`と入力してください。ウェブサイトはローカルホストのポート3000で提供されます: `localhost:3000`
[Docsify](https://docsify.js.org/#/)を使用して、このドキュメントをオフラインで実行できます。このリポジトリをフォークし、[Docsifyをインストール](https://docsify.js.org/#/quickstart)してローカルマシンにセットアップしてください。その後、このリポジトリのルートフォルダーで`docsify serve`と入力します。ウェブサイトはローカルホストのポート3000で提供されます`localhost:3000`
## 📘 PDF
すべてのレッスンのPDFは[こちら](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)で見つけることができます。
## 🎒 その他のコース
私たちのチームは他のコースも制作しています!以下をご覧ください:
私たちのチームは他のコースも制作しています!ぜひチェックしてください:
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / エージェント
[![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](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](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)
[![初心者向けAIエージェント](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-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)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### 生成AIシリーズ
[![初心者向け生成AI](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![生成AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![生成AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![生成AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### 生成AIシリーズ
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### 基礎学習
[![初心者向け機械学習](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![初心者向けデータサイエンス](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![初心者向けAI](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![初心者向けサイバーセキュリティ](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![初心者向けWeb開発](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![初心者向けIoT](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![初心者向けXR開発](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### 基礎学習
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilotシリーズ
[![AIペアプログラミング向けCopilot](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![C#/.NET向けCopilot](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilotアドベンチャー](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
### Copilotシリーズ
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## ヘルプを得る
AIアプリの構築で行き詰まったり質問がある場合は、MCPに関する議論に参加してください。同じ学習者や経験豊富な開発者と交流できるサポートコミュニティで、質問が歓迎され、知識が自由に共有されています。
AIアプリの構築で行き詰まったり質問がある場合は、MCPに関する議論に参加してください。同じ学習者や経験豊富な開発者たちと交流できるサポートコミュニティで、質問は歓迎され、知識が自由に共有されます。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
製品に関するフィードバックや構築中のエラーがある場合は以下を訪問してください:
製品に関するフィードバックや構築中のエラーについては、以下を訪問してください:
[![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)
## ライセンス
このリポジトリはMITライセンスの下で提供されています。詳細は[LICENSE](../../LICENSE)ファイルをご覧ください。
このリポジトリはMITライセンスの下でライセンスされています。詳細は[LICENSE](../../LICENSE)ファイルをご覧ください。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責事項**:
この文書は、AI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を期すよう努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文(元の言語で記載された文書)を公式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳をお勧めします。本翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いかねます。
この文書は、AI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を期すよう努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文(元の言語で記載された文書)を公式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳をお勧めします。本翻訳の用に起因する誤解や誤認について、当方は一切の責任を負いかねます。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,52 +1,52 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "63e29f5a308b533df9d70336bbb2e2b8",
"translation_date": "2025-11-18T17:06:12+00:00",
"original_hash": "caff943951276a4459a687166f3dfae2",
"translation_date": "2025-12-19T10:25:31+00:00",
"source_file": "README.md",
"language_code": "ms"
}
-->
[![Lesen GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![Penyumbang GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![Isu 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/)
[![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)
[![Pemerhati 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)
# Pembangunan Web untuk Pemula - Kurikulum
Belajar asas pembangunan web dengan kursus 12 minggu komprehensif oleh Microsoft Cloud Advocates. Setiap 24 pelajaran meneroka JavaScript, CSS, dan HTML melalui projek praktikal seperti terrarium, sambungan pelayar, dan permainan angkasa. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimalkan pengekalan pengetahuan anda dengan pedagogi berasaskan projek kami yang berkesan. Mulakan perjalanan pengkodan anda hari ini!
Pelajari asas pembangunan web dengan kursus 12 minggu yang komprehensif oleh Microsoft Cloud Advocates. Setiap daripada 24 pelajaran meneroka JavaScript, CSS, dan HTML melalui projek praktikal seperti terrarium, sambungan pelayar, dan permainan angkasa. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimalkan pemahaman anda dengan pendekatan pembelajaran berasaskan projek yang efektif. Mulakan perjalanan pengkodan anda hari ini!
Sertai Komuniti Discord Azure AI Foundry
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ikuti langkah-langkah ini untuk mula menggunakan sumber ini:
1. **Fork Repositori**: 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)
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)
3. [**Sertai Azure AI Foundry Discord dan berhubung dengan pakar serta pembangun lain**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Sokongan Pelbagai Bahasa
#### Disokong melalui GitHub Action (Automatik & Sentiasa Terkini)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arab](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgaria](../bg/README.md) | [Burma (Myanmar)](../my/README.md) | [Cina (Ringkas)](../zh/README.md) | [Cina (Tradisional, Hong Kong)](../hk/README.md) | [Cina (Tradisional, Macau)](../mo/README.md) | [Cina (Tradisional, Taiwan)](../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) | [Ibrani](../he/README.md) | [Hindi](../hi/README.md) | [Hungary](../hu/README.md) | [Indonesia](../id/README.md) | [Itali](../it/README.md) | [Jepun](../ja/README.md) | [Korea](../ko/README.md) | [Lithuania](../lt/README.md) | [Melayu](./README.md) | [Marathi](../mr/README.md) | [Nepal](../ne/README.md) | [Norway](../no/README.md) | [Parsi (Farsi)](../fa/README.md) | [Poland](../pl/README.md) | [Portugis (Brazil)](../br/README.md) | [Portugis (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romania](../ro/README.md) | [Rusia](../ru/README.md) | [Serbia (Cyrillic)](../sr/README.md) | [Slovak](../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) | [Thai](../th/README.md) | [Turki](../tr/README.md) | [Ukraine](../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/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../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) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](./README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../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) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jika anda ingin menambah sokongan bahasa tambahan, senarai bahasa yang disokong boleh didapati [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Buka dalam 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)
#### 🧑‍🎓 _Adakah anda seorang pelajar?_
Lawati [**Halaman Hab Pelajar**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana anda akan menemui sumber untuk pemula, pakej pelajar dan juga cara untuk mendapatkan baucar sijil percuma. Ini adalah halaman yang anda ingin tandai dan periksa dari semasa ke semasa kerana kami menukar kandungan setiap bulan.
Lawati [**Halaman Hub Pelajar**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana anda akan menemui sumber untuk pemula, pakej pelajar dan juga cara mendapatkan baucar sijil percuma. Ini adalah halaman yang patut anda tandai dan periksa dari semasa ke semasa kerana kandungan akan ditukar setiap bulan.
### 📣 Pengumuman - Cabaran mod Agen GitHub Copilot baru untuk diselesaikan!
@ -56,21 +56,21 @@ Cabaran baru ditambah, cari "Cabaran Agen GitHub Copilot 🚀" dalam kebanyakan
Projek Pembantu AI baru sahaja ditambah, lihat [projek](./09-chat-project/README.md)
### 📣 Pengumuman - _Kurikulum Baru_ mengenai AI Generatif untuk JavaScript baru sahaja dikeluarkan
### 📣 Pengumuman - _Kurikulum Baru_ mengenai AI Generatif untuk JavaScript baru sahaja dilancarkan
Jangan lepaskan kurikulum AI Generatif baru kami!
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk bermula!
![Latar Belakang](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ms.png)
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ms.png)
- Pelajaran yang merangkumi segalanya dari asas hingga RAG.
- Berinteraksi dengan watak sejarah menggunakan GenAI dan aplikasi pendamping kami.
- Naratif yang menyeronokkan dan menarik, anda akan mengembara masa!
![watak](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ms.png)
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ms.png)
Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda mempelajari topik seperti:
Setiap pelajaran termasuk tugasan untuk diselesaikan, semakan pengetahuan dan cabaran untuk membimbing anda mempelajari topik seperti:
- Prompting dan kejuruteraan prompt
- Penjanaan aplikasi teks dan imej
- Aplikasi carian
@ -81,28 +81,28 @@ Lawati [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) un
## 🌱 Bermula
> **Guru**, kami telah [menyediakan beberapa cadangan](for-teachers.md) tentang cara 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)!
> **Guru**, kami telah [menyertakan beberapa cadangan](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami 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-kuliah dan teruskan dengan membaca bahan kuliah, melengkapkan pelbagai aktiviti dan periksa pemahaman anda dengan kuiz pasca-kuliah.
**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulakan dengan kuiz pra-kuliah dan teruskan dengan membaca bahan kuliah, melengkapkan pelbagai aktiviti dan semak pemahaman anda dengan kuiz pasca-kuliah.
Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan sebaya anda untuk bekerjasama dalam projek! Perbincangan digalakkan di [forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) di mana pasukan moderator kami akan tersedia untuk menjawab soalan anda.
Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan sebaya untuk bekerjasama dalam projek! Perbincangan digalakkan di [forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) di mana pasukan moderator kami akan tersedia untuk menjawab soalan anda.
Untuk melanjutkan pendidikan anda, kami sangat mengesyorkan meneroka [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan kajian tambahan.
### 📋 Menyediakan persekitaran anda
Kurikulum ini mempunyai persekitaran pembangunan yang sedia untuk digunakan! Apabila anda bermula, anda boleh memilih untuk menjalankan kurikulum dalam [Codespace](https://github.com/features/codespaces/) (_persekitaran berasaskan pelayar, tiada pemasangan diperlukan_), atau secara tempatan di komputer anda menggunakan editor teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Kurikulum ini mempunyai persekitaran pembangunan yang sedia untuk digunakan! Semasa anda bermula, anda boleh memilih untuk menjalankan kurikulum ini dalam [Codespace](https://github.com/features/codespaces/) (_persekitaran berasaskan pelayar, tidak memerlukan pemasangan_), atau secara tempatan di komputer anda menggunakan editor teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Cipta repositori anda
Untuk memudahkan anda menyimpan kerja anda, disarankan agar anda mencipta salinan repositori ini. Anda boleh melakukannya dengan mengklik butang **Use this template** di bahagian atas halaman. Ini akan mencipta repositori baru dalam akaun GitHub anda dengan salinan kurikulum.
Ikuti langkah-langkah ini:
1. **Fork Repositori**: Klik butang "Fork" di sudut kanan atas halaman 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 dalam Codespace
Dalam salinan repositori ini yang anda cipta, klik butang **Code** dan pilih **Open with Codespaces**. Ini akan mencipta Codespace baru untuk anda bekerja.
Dalam salinan repositori anda yang telah anda cipta, klik butang **Code** dan pilih **Open with Codespaces**. Ini akan mencipta Codespace baru untuk anda bekerja.
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ms.png)
@ -116,7 +116,7 @@ Cadangan kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.
[CodeSpace](./images/createcodespace.png)
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan arahan berikut, menggantikan `<your-repository-url>` dengan URL yang baru anda salin:
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan arahan berikut, gantikan `<your-repository-url>` dengan URL yang baru anda salin:
```bash
git clone <your-repository-url>
@ -143,29 +143,29 @@ Cadangan kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.
- tugasan
- [kuiz selepas pelajaran](https://ff-quizzes.netlify.app/web/)
> **Nota tentang kuiz**: Semua kuiz terdapat dalam folder Quiz-app, sejumlah 48 kuiz dengan tiga soalan setiap satu. Ia boleh didapati [di sini](https://ff-quizzes.netlify.app/web/) dan aplikasi kuiz boleh dijalankan secara tempatan atau diterapkan ke Azure; ikuti arahan dalam folder `quiz-app`.
> **Nota tentang kuiz**: Semua kuiz terdapat dalam folder Quiz-app, sebanyak 48 kuiz dengan tiga soalan setiap satu. Ia boleh didapati [di sini](https://ff-quizzes.netlify.app/web/) dan aplikasi kuiz boleh dijalankan secara tempatan atau dideploy ke Azure; ikuti arahan dalam folder `quiz-app`.
## 🗃️ Pelajaran
| | Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Terpaut | Penulis |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| | Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Terkait | Penulis |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Memulakan Asas | Pengenalan kepada Pengaturcaraan dan Alat yang Digunakan | Belajar asas di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan kerja mereka | [Pengenalan kepada Bahasa Pengaturcaraan dan Alat yang Digunakan](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Memulakan Asas | Asas GitHub, termasuk bekerja dengan pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain dalam pangkalan kod | [Pengenalan kepada GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Memulakan Asas | Asas GitHub, termasuk bekerja dalam pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain dalam kod asas | [Pengenalan kepada GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Memulakan Asas | Kebolehcapaian | Belajar asas kebolehcapaian web | [Asas Kebolehcapaian](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Asas JS | Jenis Data JavaScript | Asas jenis data JavaScript | [Jenis Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Asas JS | Fungsi dan Kaedah | Belajar tentang fungsi dan kaedah untuk mengurus aliran logik aplikasi | [Fungsi dan Kaedah](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher |
| 06 | Asas JS | Membuat Keputusan dengan JS | Belajar cara mencipta syarat dalam kod anda menggunakan kaedah membuat keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Asas JS | Array dan Gelung | Bekerja dengan data menggunakan array dan gelung dalam JavaScript | [Array dan Gelung](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktik | Membina HTML untuk mencipta terrarium dalam talian, memberi tumpuan kepada 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 | Membina CSS untuk menggayakan terrarium dalam talian, memberi tumpuan kepada asas CSS termasuk menjadikan halaman responsif | [Pengenalan kepada CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Membina JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/lepas, memberi tumpuan kepada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Permainan Menaip](./4-typing-game/solution/README.md) | Membina Permainan Menaip | Belajar cara menggunakan acara papan kekunci untuk memacu logik aplikasi JavaScript anda | [Pengaturcaraan Berasaskan Acara](./4-typing-game/typing-game/README.md) | Christopher |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktik | Membina HTML untuk mencipta terrarium dalam talian, dengan fokus pada membina susun atur | [Pengenalan kepada HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Praktik | Membina CSS untuk menggayakan terrarium dalam talian, dengan 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 | Membina JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/lepas, dengan fokus pada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Permainan Menaip](./4-typing-game/solution/README.md) | Membina Permainan Menaip | Belajar cara menggunakan acara papan kekunci untuk menggerakkan logik aplikasi JavaScript anda | [Pengaturcaraan Berasaskan Acara](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Pelanjutan Pelayar Hijau](./5-browser-extension/solution/README.md) | Bekerja dengan Pelayar | Belajar cara pelayar berfungsi, sejarahnya, dan cara membina elemen pertama pelanjutan pelayar | [Tentang Pelayar](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Pelanjutan Pelayar Hijau](./5-browser-extension/solution/README.md) | Membina borang, memanggil API dan menyimpan pembolehubah dalam storan tempatan | Membina elemen JavaScript pelanjutan 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 | [Pelanjutan Pelayar Hijau](./5-browser-extension/solution/README.md) | Proses latar belakang dalam pelayar, prestasi web | Menggunakan proses latar belakang pelayar untuk mengurus ikon pelanjutan; belajar tentang prestasi web dan beberapa pengoptimuman untuk membuat | [Tugas Latar Belakang dan Prestasi](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Pelanjutan Pelayar Hijau](./5-browser-extension/solution/README.md) | Proses latar belakang dalam pelayar, prestasi web | Menggunakan proses latar belakang pelayar untuk mengurus ikon pelanjutan; belajar 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 yang Lebih Lanjutan dengan JavaScript | Belajar tentang Pewarisan menggunakan kedua-dua Kelas dan Komposisi serta corak Pub/Sub, sebagai persediaan untuk membina permainan | [Pengenalan kepada Pembangunan Permainan Lanjutan](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Permainan Angkasa](./6-space-game/solution/README.md) | Melukis ke kanvas | Belajar tentang API Kanvas, digunakan untuk melukis elemen ke skrin | [Melukis ke 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 | Mengetahui cara elemen boleh memperoleh gerakan menggunakan koordinat Cartesian dan API Kanvas | [Menggerakkan Elemen di Sekitar](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menggerakkan elemen di sekitar skrin | Mengetahui cara elemen boleh bergerak menggunakan koordinat Cartesian dan API Kanvas | [Menggerakkan Elemen di Sekitar](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Permainan Angkasa](./6-space-game/solution/README.md) | Pengesanan perlanggaran | Membuat elemen bertembung dan bertindak balas antara satu sama lain menggunakan penekanan kekunci dan menyediakan fungsi cooldown untuk memastikan prestasi permainan | [Pengesanan Perlanggaran](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menyimpan skor | Melakukan pengiraan matematik berdasarkan status dan prestasi permainan | [Menyimpan Skor](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menamatkan dan memulakan semula permainan | Belajar tentang menamatkan dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pembolehubah | [Keadaan Tamat](./6-space-game/6-end-condition/README.md) | Chris |
@ -182,15 +182,15 @@ Kurikulum kami direka dengan dua prinsip pedagogi utama:
* pembelajaran berasaskan projek
* kuiz yang kerap
Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web masa kini. Pelajar akan berpeluang untuk mendapatkan pengalaman praktikal dengan membina permainan menaip, terrarium maya, pelanjutan pelayar mesra alam, permainan gaya penceroboh angkasa, dan aplikasi perbankan untuk perniagaan. Menjelang akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh tentang pembangunan web.
Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web masa kini. Pelajar akan berpeluang untuk mendapatkan pengalaman praktikal dengan membina permainan menaip, terrarium maya, pelanjutan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Menjelang akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh tentang pembangunan web.
> 🎓 Anda boleh mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
Dengan memastikan kandungan selaras dengan projek, proses pembelajaran menjadi lebih menarik untuk pelajar dan pengekalan konsep akan dipertingkatkan. Kami juga menulis beberapa pelajaran permulaan dalam asas JavaScript untuk memperkenalkan konsep, digabungkan dengan video daripada koleksi tutorial video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya menyumbang kepada kurikulum ini.
Dengan memastikan kandungan selaras dengan projek, proses pembelajaran menjadi lebih menarik bagi pelajar dan pengekalan konsep akan dipertingkatkan. Kami juga menulis beberapa pelajaran permulaan dalam asas JavaScript untuk memperkenalkan konsep, digabungkan dengan video daripada koleksi tutorial video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya menyumbang kepada kurikulum ini.
Selain itu, kuiz berisiko rendah sebelum kelas menetapkan niat pelajar terhadap pembelajaran topik, manakala kuiz kedua selepas kelas memastikan pengekalan lanjut. Kurikulum ini direka untuk fleksibel dan menyeronokkan dan boleh diambil secara keseluruhan atau sebahagian. Projek bermula kecil dan menjadi semakin kompleks menjelang akhir kitaran 12 minggu.
Selain itu, kuiz berisiko rendah sebelum kelas menetapkan niat pelajar untuk mempelajari topik, manakala kuiz kedua selepas kelas memastikan pengekalan yang lebih lanjut. Kurikulum ini direka untuk fleksibel dan menyeronokkan dan boleh diambil 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 pada kemahiran asas yang diperlukan sebagai pembangun web sebelum menggunakan rangka kerja, langkah seterusnya yang baik selepas melengkapkan 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)".
Walaupun kami sengaja mengelakkan memperkenalkan rangka kerja JavaScript untuk menumpukan pada kemahiran asas yang diperlukan sebagai pembangun web sebelum mengguna pakai rangka kerja, langkah seterusnya yang baik selepas melengkapkan 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)".
> Lawati [Kod Etika](CODE_OF_CONDUCT.md) dan panduan [Menyumbang](CONTRIBUTING.md) kami. Kami mengalu-alukan maklum balas membina anda!
@ -208,52 +208,57 @@ PDF semua pelajaran boleh didapati [di sini](https://microsoft.github.io/Web-Dev
Pasukan kami menghasilkan kursus lain! Lihat:
### Azure / Edge / MCP / Agen
[![AZD untuk Pemula](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 untuk Pemula](https://img.shields.io/badge/Edge%20AI%20untuk%20Pemula-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP untuk Pemula](https://img.shields.io/badge/MCP%20untuk%20Pemula-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Ejen AI untuk Pemula](https://img.shields.io/badge/Ejen%20AI%20untuk%20Pemula-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### LangChain
[![LangChain4j untuk Pemula](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js untuk Pemula](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Ejen
[![AZD untuk Pemula](https://img.shields.io/badge/AZD%20untuk%20Pemula-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI untuk Pemula](https://img.shields.io/badge/Edge%20AI%20untuk%20Pemula-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP untuk Pemula](https://img.shields.io/badge/MCP%20untuk%20Pemula-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Ejen AI untuk Pemula](https://img.shields.io/badge/Ejen%20AI%20untuk%20Pemula-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Siri AI Generatif
[![AI Generatif untuk Pemula](https://img.shields.io/badge/AI%20Generatif%20untuk%20Pemula-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Generatif (.NET)](https://img.shields.io/badge/AI%20Generatif%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![AI Generatif (Java)](https://img.shields.io/badge/AI%20Generatif%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![AI Generatif (JavaScript)](https://img.shields.io/badge/AI%20Generatif%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Siri AI Generatif
[![AI Generatif untuk Pemula](https://img.shields.io/badge/AI%20Generatif%20untuk%20Pemula-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Generatif (.NET)](https://img.shields.io/badge/AI%20Generatif%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![AI Generatif (Java)](https://img.shields.io/badge/AI%20Generatif%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![AI Generatif (JavaScript)](https://img.shields.io/badge/AI%20Generatif%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Pembelajaran Teras
[![ML untuk Pemula](https://img.shields.io/badge/ML%20untuk%20Pemula-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Sains Data untuk Pemula](https://img.shields.io/badge/Sains%20Data%20untuk%20Pemula-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI untuk Pemula](https://img.shields.io/badge/AI%20untuk%20Pemula-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Keselamatan Siber untuk Pemula](https://img.shields.io/badge/Keselamatan%20Siber%20untuk%20Pemula-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Pembangunan Web untuk Pemula](https://img.shields.io/badge/Pembangunan%20Web%20untuk%20Pemula-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT untuk Pemula](https://img.shields.io/badge/IoT%20untuk%20Pemula-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![Pembangunan XR untuk Pemula](https://img.shields.io/badge/Pembangunan%20XR%20untuk%20Pemula-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Pembelajaran Teras
[![ML untuk Pemula](https://img.shields.io/badge/ML%20untuk%20Pemula-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Sains Data untuk Pemula](https://img.shields.io/badge/Sains%20Data%20untuk%20Pemula-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI untuk Pemula](https://img.shields.io/badge/AI%20untuk%20Pemula-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Keselamatan Siber untuk Pemula](https://img.shields.io/badge/Keselamatan%20Siber%20untuk%20Pemula-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Pembangunan Web untuk Pemula](https://img.shields.io/badge/Pembangunan%20Web%20untuk%20Pemula-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT untuk Pemula](https://img.shields.io/badge/IoT%20untuk%20Pemula-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![Pembangunan XR untuk Pemula](https://img.shields.io/badge/Pembangunan%20XR%20untuk%20Pemula-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Siri Copilot
[![Copilot untuk Pengaturcaraan Berpasangan AI](https://img.shields.io/badge/Copilot%20untuk%20Pengaturcaraan%20Berpasangan%20AI-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot untuk C#/.NET](https://img.shields.io/badge/Copilot%20untuk%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Pengembaraan Copilot](https://img.shields.io/badge/Pengembaraan%20Copilot-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
### Siri Copilot
[![Copilot untuk Pengaturcaraan Berpasangan AI](https://img.shields.io/badge/Copilot%20untuk%20Pengaturcaraan%20Berpasangan%20AI-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot untuk C#/.NET](https://img.shields.io/badge/Copilot%20untuk%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Pengembaraan Copilot](https://img.shields.io/badge/Pengembaraan%20Copilot-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Mendapatkan Bantuan
## Mendapatkan Bantuan
Jika anda menghadapi kesukaran atau mempunyai soalan tentang membina aplikasi AI, sertai pelajar lain dan pembangun berpengalaman dalam perbincangan tentang MCP. Ia adalah komuniti yang menyokong di mana soalan dialu-alukan dan pengetahuan dikongsi secara bebas.
Jika anda menghadapi kesukaran atau mempunyai sebarang soalan tentang membina aplikasi AI, sertai pelajar lain dan pembangun berpengalaman dalam perbincangan tentang MCP. Ia adalah komuniti yang menyokong di mana soalan dialu-alukan dan pengetahuan dikongsi secara bebas.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Jika anda mempunyai maklum balas produk atau menghadapi ralat semasa membina, lawati:
Jika anda mempunyai maklum balas produk atau menghadapi 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)
[![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)
## Lesen
## Lesen
Repositori ini dilesenkan di bawah lesen MIT. Lihat fail [LICENSE](../../LICENSE) untuk maklumat lanjut.
Repositori ini dilesenkan di bawah lesen MIT. Lihat fail [LICENSE](../../LICENSE) untuk maklumat lanjut.
---

@ -1,248 +1,259 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "63e29f5a308b533df9d70336bbb2e2b8",
"translation_date": "2025-11-18T17:11:05+00:00",
"original_hash": "caff943951276a4459a687166f3dfae2",
"translation_date": "2025-12-19T10:29:49+00:00",
"source_file": "README.md",
"language_code": "my"
}
-->
[![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)
[![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)
[![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/)
[![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)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# စတင်သူများအတွက် Web Development - သင်ရိုးညွှန်းတမ်း
# စတင်သူများအတွက် ဝဘ်ဖွံ့ဖြိုးရေး - သင်ရိုး
Microsoft Cloud Advocates မှ 12 ပတ်ကြာ သင်ရိုးတစ်ခုဖြင့် web development အခြေခံများကို လေ့လာပါ။ 24 သင်ခန်းစာများတွင် JavaScript, CSS, HTML တို့ကို terrariums, browser extensions, space games စသည့် လက်တွေ့လုပ်ငန်းများဖြင့် လေ့လာနိုင်ပါသည်။ Quiz, ဆွေးနွေးမှုများနှင့် လက်တွေ့အလုပ်များဖြင့် ပါဝင်ဆောင်ရွက်ပါ။ Project-based သင်ကြားမှုနည်းလမ်းများဖြင့် သင်၏ကျွမ်းကျင်မှုများကို တိုးတက်စေပြီး သိမြင်မှုကို အထိရောက်ဆုံးဖြစ်စေပါသည်။ ယနေ့မှစတင်ပြီး သင်၏ coding ခရီးကို စတင်လိုက်ပါ!
Microsoft Cloud Advocates မှ ၁၂ ပတ်ကြာ သင်ရိုးတစ်ခုဖြင့် ဝဘ်ဖွံ့ဖြိုးရေးအခြေခံများကို သင်ယူပါ။ ၂၄ သင်ခန်းစာတိုင်းတွင် JavaScript, CSS, HTML တို့ကို လက်တွေ့လုပ်ငန်းများဖြင့် လေ့လာနိုင်ပါသည်။ ဥပမာအားဖြင့် terrariums, browser extensions, space games စသည်တို့ပါဝင်သည်။ စမ်းမေးခွန်းများ၊ ဆွေးနွေးပွဲများနှင့် လက်တွေ့အလုပ်များဖြင့် ပါဝင်ပါ။ သင်၏ကျွမ်းကျင်မှုများကို တိုးတက်စေပြီး ကျွန်ုပ်တို့၏ လက်တွေ့လုပ်ငန်းအခြေပြု သင်ကြားမှုနည်းလမ်းဖြင့် သင်ယူမှုကို အထိရောက်ဆုံးဖြစ်စေပါ။ ယနေ့မှစတင်ပြီး သင်၏ coding ခရီးကို စတင်လိုက်ပါ!
Azure AI Foundry Discord အသိုင်းအဝိုင်းတွင် ပါဝင်ဆွေးနွေးပါ
Azure AI Foundry Discord အသိုင်းအဝိုင်းတွင် ပါဝင်ပါ
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
ဤအရင်းအမြစ်များကို အသုံးပြုရန်အဆင့်များကို လိုက်နာပါ-
1. **Repository ကို Fork လုပ်ပါ**: [![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. **Repository ကို Clone လုပ်ပါ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord ကို Join လုပ်ပြီး ကျွမ်းကျင်သူများနှင့် developer များနှင့် တွေ့ဆုံပါ**](https://discord.com/invite/ByRwuEEgH4)
ဤအရင်းအမြစ်များကို အသုံးပြုရန်အတွက် အောက်ပါအဆင့်များကို လိုက်နာပါ:
1. **Repository ကို Fork လုပ်ပါ**: [![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. **Repository ကို Clone လုပ်ပါ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord ကို Join လုပ်ပြီး ကျွမ်းကျင်သူများနှင့် ဖွံ့ဖြိုးရေးသူများနှင့် တွေ့ဆုံပါ**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 ဘာသာစကားများအထောက်အပံ့
### 🌐 ဘာသာစကားများအထောက်အပံ့
#### GitHub Action မှတဆင့် အလိုအလျောက် (အမြဲ Update ဖြစ်နေသော)
#### GitHub Action မှတဆင့် ထောက်ပံ့ထားသည် (အလိုအလျောက် & အမြဲနောက်ဆုံးပေါ်)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](./README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../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) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../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) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](./README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../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) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../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) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
**အခြားဘာသာစကားများအတွက် အထောက်အပံ့လိုအပ်ပါက [ဒီမှာ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) ကြည့်ပါ**
**ထပ်မံသော ဘာသာစကားများကို ထည့်သွင်းလိုပါက [ဒီမှာ](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)
[![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)
#### 🧑‍🎓 _ကျောင်းသားများအတွက်_
#### 🧑‍🎓 _ကျောင်းသားများအတွက်_
[**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) သို့ သွားပါ။ အစပြုသူများအတွက် အရင်းအမြစ်များ၊ Student packs နှင့် အခမဲ့လက်မှတ်ရယူနိုင်မည့် နည်းလမ်းများကို တွေ့နိုင်ပါသည်။ ဤစာမျက်နှာကို bookmark လုပ်ထားပြီး လစဉ်အကြောင်းအရာများပြောင်းလဲသည့်အခါ ပြန်လည်စစ်ဆေးပါ။
[**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) သို့ သွားပါ။ အစပြုသူများအတွက် အရင်းအမြစ်များ၊ ကျောင်းသားအထုပ်များနှင့် အခမဲ့လက်မှတ်ရယူနိုင်မည့် နည်းလမ်းများကို တွေ့နိုင်ပါသည်။ ဤစာမျက်နှာကို Bookmark လုပ်ထားပြီး လစဉ်အကြောင်းအရာများပြောင်းလဲသည့်အခါ ပြန်လည်စစ်ဆေးပါ။
### 📣 ကြေညာချက် - GitHub Copilot Agent mode စိန်ခေါ်မှုအသစ်များ
### 📣 ကြေညာချက် - GitHub Copilot Agent mode စိန်ခေါ်မှုအသစ်များ
"GitHub Copilot Agent Challenge 🚀" ဟု အခန်းများအများစုတွင် ရှာဖွေပါ။ GitHub Copilot နှင့် Agent mode ကို အသုံးပြု၍ ပြီးစီးရန် စိန်ခေါ်မှုအသစ်တစ်ခုဖြစ်သည်။ Agent mode ကို မသုံးဖူးသေးပါက၊ ၎င်းသည် စာသားများသာမက ဖိုင်များဖန်တီးခြင်း၊ ပြင်ဆင်ခြင်း၊ command များ run လုပ်ခြင်းစသည့် အလုပ်များကိုလည်း လုပ်ဆောင်နိုင်ပါသည်။
"GitHub Copilot Agent Challenge 🚀" ဟုခေါ်သော စိန်ခေါ်မှုအသစ်ကို အခန်းအများစုတွင် တွေ့နိုင်ပါသည်။ GitHub Copilot နှင့် Agent mode ကို အသုံးပြု၍ စိန်ခေါ်မှုကို ပြီးမြောက်စေပါ။ Agent mode သည် စာသားများသာမက ဖိုင်များဖန်တီးခြင်း၊ ပြင်ဆင်ခြင်း၊ command များ run လုပ်ခြင်းစသဖြင့် လုပ်ဆောင်နိုင်သည်။
### 📣 ကြေညာချက် - _Generative AI အသုံးပြု၍ ဖန်တီးရန် Project အသစ်_
### 📣 ကြေညာချက် - _Generative AI အသုံးပြု၍ ဖန်တီးရန် Project အသစ်_
Generative AI အသုံးပြုသည့် AI Assistant project အသစ်ကို ထည့်သွင်းထားပါသည်။ [project](./09-chat-project/README.md) ကို ကြည့်ပါ။
Generative AI အသုံးပြုသည့် AI Assistant project အသစ်ကို ထည့်သွင်းထားပါသည်။ [project](./09-chat-project/README.md) ကိုကြည့်ပါ။
### 📣 ကြေညာချက် - _Generative AI သင်ရိုးသစ်_ JavaScript အတွက် ထုတ်ပြန်ထားပါသည်
### 📣 ကြေညာချက် - _Generative AI သင်ရိုးသစ်_
Generative AI သင်ရိုးအသစ်ကို မလွတ်မရှောင် လေ့လာပါ!
Generative AI သင်ရိုးသစ်ကို မလွတ်တမ်းကြည့်ပါ!
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားပါ။
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားပြီး စတင်ပါ။
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.my.png)
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.my.png)
- အခြေခံမှ RAG အထိ သင်ခန်းစာများ
- GenAI နှင့် အတူ သမိုင်းဝင်ပုဂ္ဂိုလ်များနှင့် ဆက်သွယ်ပါ
- စိတ်ဝင်စားဖွယ်အကြောင်းအရာများနှင့် အချိန်ခရီးသွားပါ
- အခြေခံမှ RAG အထိ သင်ခန်းစာများ
- GenAI နှင့် ကျွန်ုပ်တို့၏ companion app ကို အသုံးပြု၍ သမိုင်းဆိုင်ရာ စာရင်းဇယားများနှင့် အပြန်အလှန်ဆွေးနွေးပါ။
- စိတ်ဝင်စားဖွယ်အကြောင်းအရာများဖြင့် အချိန်ခရီးသွားပါ။
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.my.png)
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.my.png)
သင်ခန်းစာတိုင်းတွင် လုပ်ငန်းတာဝန်၊ သိမြင်မှုစစ်ဆေးမှုနှင့် စိန်ခေါ်မှုများ ပါဝင်ပြီး အောက်ပါအကြောင်းအရာများကို လေ့လာရန် လမ်းညွှန်ပါသည်-
- Prompting နှင့် prompt engineering
- Text နှင့် image app ဖန်တီးခြင်း
- Search apps
သင်ခန်းစာတိုင်းတွင် လုပ်ငန်းတာဝန်၊ သိမှတ်စရာများနှင့် စိန်ခေါ်မှုများပါဝင်ပြီး အောက်ပါအကြောင်းအရာများကို လေ့လာနိုင်ပါသည်။
- Prompting နှင့် prompt engineering
- စာသားနှင့် ပုံ app ဖန်တီးခြင်း
- ရှာဖွေမှု app များ
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားပါ။
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားပြီး စတင်ပါ။
## 🌱 စတင်ခြင်း
## 🌱 စတင်ခြင်း
> **ဆရာများ**၊ ဤသင်ရိုးကို ဘယ်လိုအသုံးပြုရမည်ဆိုသည်ကို [အကြံပြုချက်များ](for-teachers.md) ထည့်သွင်းထားပါသည်။ [ဆရာများအတွက် ဆွေးနွေးမှုဖိုရမ်](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) တွင် သင့်အကြံပြုချက်များကို ကျွန်ုပ်တို့အား မျှဝေပါ။
> **ဆရာများ**၊ ဤသင်ရိုးကို ဘယ်လိုအသုံးပြုရမည်ဆိုသည်ကို [အကြံပြုချက်များ](for-teachers.md) ထည့်သွင်းထားပါသည်။ [ဆရာများအတွက် ဆွေးနွေးပွဲ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) တွင် သင့်အကြံပြုချက်ကို ကျွန်ုပ်တို့နှင့် မျှဝေပါ။
**[သင်ယူသူများ](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**၊ သင်ခန်းစာတိုင်းအတွက် pre-lecture quiz ဖြင့် စတင်ပြီး သင်ခန်းစာအကြောင်းအရာများကို ဖတ်ရှုပါ၊ လုပ်ငန်းများကို ပြီးစီးပါ၊ post-lecture quiz ဖြင့် သင်၏နားလည်မှုကို စစ်ဆေးပါ။
**[သင်ယူသူများ](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**၊ သင်ခန်းစာတိုင်းတွင် သင်ခန်းစာမတိုင်မီ စမ်းမေးခွန်းဖြင့် စတင်ပြီး သင်ခန်းစာအကြောင်းအရာကို ဖတ်ရှုပါ၊ လုပ်ငန်းများကို ပြီးမြောက်စေပြီး သင်ခန်းစာပြီးနောက် စမ်းမေးခွန်းဖြင့် သင်၏နားလည်မှုကို စစ်ဆေးပါ။
သင်ယူမှုအတွေ့အကြုံကို မြှင့်တင်ရန်၊ မိတ်ဆွေများနှင့်အတူ project များကို အတူတူလုပ်ဆောင်ပါ။ [ဆွေးနွေးမှုဖိုရမ်](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) တွင် ဆွေးနွေးမှုများကို လှုံ့ဆော်ပြီး ကျွန်ုပ်တို့၏ moderator အဖွဲ့သည် သင့်မေးခွန်းများကို ဖြေကြားပေးမည်ဖြစ်သည်။
သင်ယူမှုအတွေ့အကြုံကို မြှင့်တင်ရန် သင်၏အဖွဲ့ဝင်များနှင့် ပူးပေါင်းပြီး လုပ်ငန်းများကို အတူတူလုပ်ဆောင်ပါ။ [ဆွေးနွေးပွဲ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) တွင် ဆွေးနွေးမှုများကို လှုံ့ဆော်ပြီး ကျွန်ုပ်တို့၏ moderator အဖွဲ့သည် သင့်မေးခွန်းများကို ဖြေကြားပေးမည်ဖြစ်သည်။
သင်၏ပညာရေးကို တိုးတက်စေရန် [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ကို လေ့လာရန် အထူးအကြံပြုပါသည်။
သင်၏ပညာရေးကို တိုးတက်စေရန် [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ကို လေ့လာရန် အထူးအကြံပြုပါသည်။
### 📋 သင့်ပတ်ဝန်းကျင်ကို ပြင်ဆင်ခြင်း
### 📋 သင့်ပတ်ဝန်းကျင်ကို ပြင်ဆင်ခြင်း
ဤသင်ရိုးတွင် အသုံးပြုရန်အဆင်သင့်ဖြစ်သော development environment ပါဝင်သည်။ သင်စတင်လိုက်သောအခါ [Codespace](https://github.com/features/codespaces/) (_browser-based, installation မလိုအပ်သော environment_) သို့မဟုတ် သင့်ကွန်ပျူတာတွင် [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကဲ့သို့သော text editor ကို အသုံးပြု၍ locally run လုပ်နိုင်ပါသည်။
ဤသင်ရိုးသည် ဖွံ့ဖြိုးရေးပတ်ဝန်းကျင်ကို အသင့်ဖြစ်စေထားပါသည်! စတင်ရန် [Codespace](https://github.com/features/codespaces/) (_browser-based, installation မလိုအပ်သော ပတ်ဝန်းကျင်_) သို့မဟုတ် သင့်ကွန်ပျူတာတွင် [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကဲ့သို့သော text editor ကို အသုံးပြု၍ လုပ်ဆောင်နိုင်ပါသည်။
#### သင့် repository ကို ဖန်တီးပါ
သင့်အလုပ်များကို လွယ်ကူစွာ သိမ်းဆည်းရန်၊ ဤ repository ၏ မိမိပိုင် copy တစ်ခုကို ဖန်တီးရန် အကြံပြုပါသည်။ ဤစာမျက်နှာ၏ အပေါ်ဘက်တွင် **Use this template** ခလုတ်ကို နှိပ်ပါ။ ၎င်းသည် သင့် GitHub အကောင့်တွင် သင်ရိုး၏ copy တစ်ခုဖြင့် repository အသစ်တစ်ခုကို ဖန်တီးပေးပါမည်။
#### သင့် Repository ကို ဖန်တီးပါ
သင့်အလုပ်ကို လွယ်ကူစွာ သိမ်းဆည်းနိုင်ရန် ဤ repository ၏ မိမိပိုင်မိတျကို ဖန်တီးရန် အကြံပြုပါသည်။ ဤစာမျက်နှာ၏ ထိပ်တွင် **Use this template** ခလုတ်ကို နှိပ်ပါ။ ဤသည် သင်၏ GitHub အကောင့်တွင် သင်ရိုး၏ မိမိပိုင်မိတျကို ဖန်တီးပေးပါမည်။
အဆင့်များကို လိုက်နာပါ-
1. **Repository ကို Fork လုပ်ပါ**: ဤစာမျက်နှာ၏ အပေါ်ညာဘက်ထောင့်ရှိ "Fork" ခလုတ်ကို နှိပ်ပါ။
2. **Repository ကို Clone လုပ်ပါ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
အောက်ပါအဆင့်များကို လိုက်နာပါ:
1. **Repository ကို Fork လုပ်ပါ**: ဤစာမျက်နှာ၏ အပေါ်ယံညာဘက်ထောင့်ရှိ "Fork" ခလုတ်ကို နှိပ်ပါ။
2. **Repository ကို Clone လုပ်ပါ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Codespace တွင် သင်ရိုးကို run လုပ်ခြင်း
#### Codespace တွင် သင်ရိုးကို run လုပ်ခြင်း
သင်ဖန်တီးထားသော repository ၏ copy တွင် **Code** ခလုတ်ကို နှိပ်ပြီး **Open with Codespaces** ကို ရွေးပါ။ ၎င်းသည် သင့်အတွက် အသစ်သော Codespace တစ်ခုကို ဖန်တီးပေးပါမည်။
သင်ဖန်တီးထားသော repository ၏ မိမိပိုင်မိတျတွင် **Code** ခလုတ်ကို နှိပ်ပြီး **Open with Codespaces** ကို ရွေးပါ။ သည် သင့်အတွက် အသစ်သော Codespace ကို ဖန်တီးပေးပါမည်။
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.my.png)
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.my.png)
#### သင်ရိုးကို သင့်ကွန်ပျူတာတွင် locally run လုပ်ခြင်း
#### သင်ရိုးကို သင့်ကွန်ပျူတာတွင် locally run လုပ်ခြင်း
သင်ရိုးကို သင့်ကွန်ပျူတာတွင် locally run လုပ်ရန် text editor, browser နှင့် command line tool တို့လိုအပ်ပါည်။ ကျွန်ုပ်တို့၏ ပထမဆုံးသင်ခန်းစာ [Programming Languages နှင့် Tools of the Trade အကြောင်းမိတ်ဆက်](../../1-getting-started-lessons/1-intro-to-programming-languages) သည် ဤ tools များအတွက် သင့်အတွက် အကောင်းဆုံးဖြစ်မည့် ရွေးချယ်မှုများကို လမ်းညွှန်ပေးပါမည်။
သင်ရိုးကို သင့်ကွန်ပျူတာတွင် locally run လုပ်ရန် text editor, browser နှင့် command line tool တို့လိုအပ်ပါည်။ ကျွန်ုပ်တို့၏ ပထမဆုံးသင်ခန်းစာ [Programming Languages and Tools of the Trade အကြောင်းအရာ](../../1-getting-started-lessons/1-intro-to-programming-languages) သည် ဤ tools များအတွက် ရွေးချယ်စရာများကို သင့်အား လမ်းညွှန်ပေးပါမည်။
ကျွန်ုပ်တို့၏ အကြံပြုချက်မှာ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကို editor အဖြစ် အသုံးပြုရန်ဖြစ်ပြီး၊ ၎င်းတွင် built-in [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ပါဝင်သည်။ Visual Studio Code ကို [ဒီမှာ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) download လုပ်နိုင်ပါသည်။
ကျွန်ုပ်တို့၏ အကြံပြုချက်မှာ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကို သင်၏ editor အဖြစ် အသုံးပြုရန်ဖြစ်ပြီး [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ကို built-in အဖြစ်ပါဝင်သည်။ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ကို [ဒီမှာ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ဒေါင်းလုပ်လုပ်ပါ။
1. သင့် repository ကို သင့်ကွန်ပျူတာသို့ Clone လုပ်ပါ။ **Code** ခလုတ်ကို နှိပ်ပြီး URL ကို copy လုပ်ပါ-
1. သင့် repository ကို သင့်ကွန်ပျူတာသို့ Clone လုပ်ပါ။ **Code** ခလုတ်ကို နှိပ်ပြီး URL ကို ကူးယူပါ:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
ထို့နောက် [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) တွင် [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ကို ဖွင့်ပြီး အောက်ပါ command ကို run လုပ်ပါ၊ `<your-repository-url>` ကို သင်က copy လုပ်ထားသော URL ဖြင့် အစားထိုးပါ-
ထို့နောက် [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) တွင် [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ကို ဖွင့်ပြီး အောက်ပါ command ကို run လုပ်ပါ၊ `<your-repository-url>` ကို သင်ကူးယူထားသော URL ဖြင့် အစားထိုးပါ။
```bash
git clone <your-repository-url>
```
2. Visual Studio Code တွင် folder ကို ဖွင့်ပါ။ **File** > **Open Folder** ကို နှိပ်ပြီး သင် Clone လုပ်ထားသော folder ကို ရွေးပါ။
> အကြံပြု Visual Studio Code extensions:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code တွင် HTML စာမျက်နှာများကို preview ပြရန်
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - ကုဒ်ကို ပိုမိုလျင်မြန်စွာရေးနိုင်ရန်အတွက် အကူအညီပေးသည်
2. Visual Studio Code တွင် folder ကို ဖွင့်ပါ။ **File** > **Open Folder** ကို နှိပ်ပြီး သင် Clone လုပ်ထားသော folder ကို ရွေးပါ။
## 📂 သင်ခန်းစာတစ်ခုစီတွင် ပါဝင်သောအရာများ:
> အကြံပြုထားသော Visual Studio Code extensions:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code အတွင်း HTML စာမျက်နှာများကို preview ပြုလုပ်ရန်
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - သင့်ကို code ရေးသားမှုကို ပိုမိုမြန်ဆန်စေဖို့ ကူညီပေးမယ့် tool
## 📂 သင်ခန်းစာတစ်ခုစီတွင် ပါဝင်သည်များ:
- ရွေးချယ်နိုင်သော sketchnote
- ရွေးချယ်နိုင်သော အပိုဗီဒီယို
- သင်ခန်းစာမတိုင်မီ အပူပေးမေးခွန်း
- ရွေးချယ်နိုင်သော ထပ်ဆောင်းဗီဒီယို
- သင်ခန်းစာမတိုင်မီ အပူတက်မေးခွန်း
- ရေးသားထားသော သင်ခန်းစာ
- ပရောဂျက်အခြေခံ သင်ခန်းစာများအတွက် ပရောဂျက်ကို တစ်ဆင့်ချင်း လမ်းညွှန်ချက်များ
- အသိပညာ စစ်ဆေးမှုများ
- ပရောဂျက်အခြေပြု သင်ခန်းစာများအတွက် ပရောဂျက်တည်ဆောက်နည်း လမ်းညွှန်ချက်များ
- အသိပညာစစ်ဆေးမှုများ
- စိန်ခေါ်မှု
- အပိုဖတ်ရှုရန်
- ထပ်ဆောင်းဖတ်ရှုရန်စာများ
- လုပ်ငန်းတာဝန်
- [သင်ခန်းစာပြီးဆုံးပြီးနောက် မေးခွန်း](https://ff-quizzes.netlify.app/web/)
- [သင်ခန်းစာပြီးနောက် မေးခွန်း](https://ff-quizzes.netlify.app/web/)
> **မေးခွန်းများအကြောင်း မှတ်ချက်**: မေးခွန်းအားလုံးကို Quiz-app ဖိုလ်ဒါတွင် ထည့်ထားပြီး၊ ၃ မေးခွန်းစီပါဝင်သော စုစုပေါင်း ၄၈ မေးခွန်းရှိသည်။ [ဒီမှာ](https://ff-quizzes.netlify.app/web/) ရရှိနိုင်ပြီး၊ quiz app ကို ဒေသတွင်းတွင် အလုပ်လုပ်စေခြင်း သို့မဟုတ် Azure တွင် တင်နိုင်သည်။ `quiz-app` ဖိုလ်ဒါရှိ လမ်းညွှန်ချက်များကို လိုက်နာပါ။
> **မေးခွန်းများအကြောင်းမှတ်ချက်**: မေးခွန်းအားလုံးကို Quiz-app ဖိုလ်ဒါတွင် ထည့်သွင်းထားပြီး၊ မေးခွန်း ၃ ခုပါသော စုစုပေါင်း ၄၈ ခုရှိသည်။ [ဒီမှာ](https://ff-quizzes.netlify.app/web/) ရနိုင်ပြီး၊ quiz app ကို locally သို့မဟုတ် Azure တွင် တင်ဆောင်နိုင်သည်။ `quiz-app` ဖိုလ်ဒါတွင် ရှိသော လမ်းညွှန်ချက်များကို လိုက်နာပါ။
## 🗃️ သင်ခန်းစာများ
| | ပရောဂျက်အမည် | သင်ကြားသော အကြောင်းအရာများ | သင်ယူရမည့် ရည်ရွယ်ချက်များ | သင်ခန်းစာချိတ်ဆက် | အရေးသားသူ |
| | ပရောဂျက်အမည် | သင်ကြားမည့်အကြောင်းအရာများ | သင်ယူရမည့်ရည်မှန်းချက်များ | သင်ခန်းစာချိတ်ဆက် | စာရေးသူ |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | စတင်ခြင်း | Programming နှင့် Tools of the Trade အကြောင်းအကျဉ်း | Programming ဘာသာရပ်များ၏ အခြေခံအကြောင်းအရာများနှင့် ပရော်ဖက်ရှင်နယ် Developer များအလုပ်လုပ်ရာတွင် အကူအညီပေးသော software များအကြောင်းကို သင်ယူပါ | [Programming ဘာသာရပ်များနှင့် Tools of the Trade အကြောင်းအကျဉ်း](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | စတင်ခြင်း | GitHub အခြေခံများ၊ အဖွဲ့နှင့်အတူ အလုပ်လုပ်ခြင်း | GitHub ကို သင်၏ပရောဂျက်တွင် အသုံးပြုနည်း၊ code base တွင် အခြားသူများနှင့် ပူးပေါင်းလုပ်ဆောင်နည်း | [GitHub အခြေခံများ](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | စတင်ခြင်း | Accessibility | web accessibility အခြေခံအကြောင်းအရာများကို သင်ယူပါ | [Accessibility အခြေခံ](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS အခြေခံ | JavaScript Data Types | JavaScript data types အခြေခံအကြောင်းအရာများ | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS အခြေခံ | Functions နှင့် Methods | application logic flow ကို စီမံရန်အတွက် functions နှင့် methods အကြောင်းကို သင်ယူပါ | [Functions နှင့် Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS အခြေခံ | JS ဖြင့် ဆုံးဖြတ်ချက်များ ချမှတ်ခြင်း | decision-making methods အသုံးပြု၍ သင်၏ကုဒ်တွင် အခြေအနေများ ဖန်တီးနည်းကို သင်ယူပါ | [ဆုံးဖြတ်ချက်များ ချမှတ်ခြင်း](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS အခြေခံ | Arrays နှင့် Loops | JavaScript တွင် arrays နှင့် loops အသုံးပြု၍ data ကို အလုပ်လုပ်ခြင်း | [Arrays နှင့် Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML ကို လက်တွေ့ကျကျ အသုံးပြုခြင်း | online terrarium ဖန်တီးရန် HTML ကို တည်ဆောက်ပြီး layout တည်ဆောက်ခြင်းကို အာရုံစိုက်ပါ | [HTML အကြောင်းအကျဉ်း](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS ကို လက်တွေ့ကျကျ အသုံးပြုခြင်း | online terrarium ကို responsive ဖြစ်စေရန် CSS ကို တည်ဆောက်ပြီး CSS အခြေခံများကို အာရုံစိုက်ပါ | [CSS အကြောင်းအကျဉ်း](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM ကို စီမံခြင်း | terrarium ကို drag/drop interface အဖြစ် လုပ်ဆောင်စေရန် JavaScript ကို တည်ဆောက်ပြီး closures နှင့် DOM ကို စီမံခြင်းကို အာရုံစိုက်ပါ | [JavaScript Closures, DOM ကို စီမံခြင်း](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Typing Game တစ်ခု တည်ဆောက်ခြင်း | JavaScript app ၏ logic ကို keyboard events အသုံးပြု၍ စီမံနည်းကို သင်ယူပါ | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Browser များနှင့် အလုပ်လုပ်ခြင်း | Browser များအလုပ်လုပ်ပုံ၊ ၎င်းတို့၏ သမိုင်းကြောင်းနှင့် browser extension ၏ ပထမဆုံး elements များကို scaffold တည်ဆောက်နည်းကို သင်ယူပါ | [Browser များအကြောင်း](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Form တစ်ခု တည်ဆောက်ခြင်း၊ API ကို ခေါ်သုံးခြင်းနှင့် local storage တွင် variables များ သိမ်းဆည်းခြင်း | Browser extension ၏ JavaScript elements များကို API ကို ခေါ်သုံးပြီး local storage တွင် သိမ်းဆည်းထားသော variables များကို အသုံးပြု၍ တည်ဆောက်ပါ | [APIs, Forms, နှင့် Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Browser ၏ Background processes, web performance | Browser ၏ background processes ကို extension ၏ icon ကို စီမံရန် အသုံးပြုပြီး၊ web performance နှင့် optimization များအကြောင်းကို သင်ယူပါ | [Background Tasks နှင့် Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript ဖြင့် အဆင့်မြင့် Game Development | Game တစ်ခု တည်ဆောက်ရန် Inheritance ကို Classes နှင့် Composition နှင့် Pub/Sub pattern အသုံးပြုနည်းကို သင်ယူပါ | [အဆင့်မြင့် Game Development အကြောင်းအကျဉ်း](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Canvas တွင် ရေးဆွဲခြင်း | Canvas API အကြောင်းကို သင်ယူပြီး screen တွင် elements များကို ရေးဆွဲရန် အသုံးပြုပါ | [Canvas တွင် ရေးဆွဲခြင်း](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Screen ပေါ်တွင် elements များကို ရွှေ့ခြင်း | Cartesian coordinates နှင့် Canvas API ကို အသုံးပြု၍ elements များကို motion ရရှိစေရန် သင်ယူပါ | [Elements များကို ရွှေ့ခြင်း](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Keypress များကို အသုံးပြု၍ elements များကို တိုက်မိစေပြီး cooling function ကို အသုံးပြု၍ game performance ကို အာရုံစိုက်ပါ | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | အမှတ်တွက်ခြင်း | Game ၏ status နှင့် performance အပေါ် အခြေခံ math calculation များကို လုပ်ဆောင်ပါ | [အမှတ်တွက်ခြင်း](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Game ကို အဆုံးသတ်ခြင်းနှင့် ပြန်စတင်ခြင်း | Game ကို အဆုံးသတ်ခြင်းနှင့် ပြန်စတင်ခြင်းအကြောင်း၊ assets များကို ရှင်းလင်းခြင်းနှင့် variable values များကို ပြန်လည်သတ်မှတ်ခြင်းကို သင်ယူပါ | [အဆုံးသတ်အခြေအနေ](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Web App တွင် HTML Templates နှင့် Routes | Multipage website architecture ၏ scaffold ကို routing နှင့် HTML templates အသုံးပြု၍ တည်ဆောက်နည်းကို သင်ယူပါ | [HTML Templates နှင့် Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Login နှင့် Registration Form တည်ဆောက်ခြင်း | Form များကို တည်ဆောက်ခြင်းနှင့် validation routines ကို စီမံနည်းကို သင်ယူပါ | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Data ကို Fetching နှင့် အသုံးပြုနည်း | သင်၏ app တွင် data အဝင်အထွက်၊ fetch နည်း၊ သိမ်းဆည်းနည်းနှင့် ဖျက်ပစ်နည်းကို သင်ယူပါ | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | State Management အကြောင်းအရာများ | သင်၏ app ၏ state ကို retain နည်းနှင့် programmatically စီမံနည်းကို သင်ယူပါ | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode နှင့် အလုပ်လုပ်ခြင်း | Code editor ကို အသုံးပြုနည်း| [VScode Code Editor ကို အသုံးပြုပါ](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI နှင့် အလုပ်လုပ်ခြင်း | သင်၏ AI assistant ကို တည်ဆောက်နည်း | [AI Assistant project](./9-chat-project/README.md) | Chris |
| 01 | စတင်ခြင်း | Programming နှင့် Tools of the Trade အကြောင်းမိတ်ဆက် | Programming ဘာသာစကားများနှင့် ပရော်ဖက်ရှင်နယ် developer များအလုပ်လုပ်ရာတွင် အသုံးပြုသော software များအကြောင်းကို လေ့လာပါ | [Programming ဘာသာစကားများနှင့် Tools of the Trade အကြောင်းမိတ်ဆက်](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | စတင်ခြင်း | GitHub အခြေခံများ၊ အဖွဲ့နှင့်အတူ အလုပ်လုပ်ခြင်း | သင့် project တွင် GitHub ကို ဘယ်လိုအသုံးပြုမလဲ၊ အခြေခံ code base တွင် အခြားသူများနှင့် ဘယ်လိုပူးပေါင်းဆောင်ရွက်မလဲ | [GitHub အခြေခံများ](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | စတင်ခြင်း | လက်လှမ်းမီမှု | Web accessibility အခြေခံများကို လေ့လာပါ | [လက်လှမ်းမီမှု အခြေခံများ](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS အခြေခံ | JavaScript Data Types | JavaScript data types အခြေခံများ | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS အခြေခံ | Functions နှင့် Methods | Application ၏ logic flow ကို စီမံခန့်ခွဲရန် functions နှင့် methods အကြောင်းကို လေ့လာပါ | [Functions နှင့် Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS အခြေခံ | JS ဖြင့် ဆုံးဖြတ်ချက်များချခြင်း | Decision-making နည်းလမ်းများကို အသုံးပြု၍ သင့် code တွင် အခြေအနေများ ဖန်တီးနည်းကို လေ့လာပါ | [ဆုံးဖြတ်ချက်များချခြင်း](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS အခြေခံ | Arrays နှင့် Loops | JavaScript တွင် arrays နှင့် loops ကို အသုံးပြု၍ data ကို စီမံခန့်ခွဲပါ | [Arrays နှင့် Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML ကို လက်တွေ့အသုံးပြုခြင်း | Online terrarium တစ်ခုကို ဖန်တီးရန် HTML ကို တည်ဆောက်ပါ၊ layout တည်ဆောက်ခြင်းကို အဓိကထားပါ | [HTML အကြောင်းမိတ်ဆက်](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS ကို လက်တွေ့အသုံးပြုခြင်း | Online terrarium ကို style ပြုလုပ်ရန် CSS ကို တည်ဆောက်ပါ၊ CSS အခြေခံများနှင့် page ကို responsive ဖြစ်စေရန် အဓိကထားပါ | [CSS အကြောင်းမိတ်ဆက်](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Terrarium ကို drag/drop interface အဖြစ် လုပ်ဆောင်စေရန် JavaScript ကို တည်ဆောက်ပါ၊ closures နှင့် 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) | Typing Game တစ်ခု တည်ဆောက်ခြင်း | JavaScript app ၏ logic ကို keyboard events အသုံးပြု၍ စီမံခန့်ခွဲနည်းကို လေ့လာပါ | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Browser များနှင့် အလုပ်လုပ်ခြင်း | Browser များအလုပ်လုပ်ပုံ၊ ၎င်းတို့၏ သမိုင်းကြောင်းနှင့် browser extension ၏ ပထမဆုံး elements များကို scaffold ပြုလုပ်နည်းကို လေ့လာပါ | [Browser များအကြောင်း](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Form တစ်ခု တည်ဆောက်ခြင်း၊ API တစ်ခုကို ခေါ်ယူခြင်းနှင့် local storage တွင် variables များသိမ်းဆည်းခြင်း | Browser extension ၏ JavaScript elements များကို တည်ဆောက်ပါ၊ local storage တွင် သိမ်းဆည်းထားသော variables များကို အသုံးပြု၍ API တစ်ခုကို ခေါ်ယူပါ | [APIs, Forms, နှင့် Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Browser ၏ background processes, web performance | Extension ၏ icon ကို စီမံရန် browser ၏ background processes ကို အသုံးပြုပါ၊ web performance နှင့် optimization အချို့ကို လေ့လာပါ | [Background Tasks နှင့် Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript ဖြင့် ပိုမိုအဆင့်မြင့် Game Development | Game တစ်ခုတည်ဆောက်ရန် Inheritance ကို Classes နှင့် Composition နှစ်မျိုးလုံးဖြင့် အသုံးပြုနည်းနှင့် Pub/Sub pattern ကို လေ့လာပါ | [အဆင့်မြင့် Game Development အကြောင်းမိတ်ဆက်](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Canvas တွင် ရေးဆွဲခြင်း | Screen ပေါ်တွင် elements များကို ရေးဆွဲရန် Canvas API အကြောင်းကို လေ့လာပါ | [Canvas တွင် ရေးဆွဲခြင်း](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Screen ပေါ်တွင် elements များကို ရွှေ့ခြင်း | Cartesian coordinates နှင့် Canvas API ကို အသုံးပြု၍ elements များကို ရွှေ့လျားစေခြင်းနည်းကို ရှာဖွေပါ | [Elements များကို ရွှေ့ခြင်း](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Keypress များကို အသုံးပြု၍ elements များကို တိုက်ဆိုင်စေပြီး၊ game performance အတွက် cooldown function တစ်ခုကို ပံ့ပိုးပါ | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | အမှတ်တွက်ခြင်း | Game ၏ status နှင့် performance အပေါ်မူတည်၍ သင်္ချာတွက်ချက်မှုများကို ဆောင်ရွက်ပါ | [အမှတ်တွက်ခြင်း](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Game ကို အဆုံးသတ်ခြင်းနှင့် ပြန်စတင်ခြင်း | Game ကို အဆုံးသတ်ခြင်းနှင့် ပြန်စတင်ခြင်းအကြောင်း၊ assets များကို ရှင်းလင်းခြင်းနှင့် variable values များကို ပြန်လည်သတ်မှတ်ခြင်းအကြောင်းကို လေ့လာပါ | [အဆုံးသတ်ခြင်းအခြေအနေ](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Web App တစ်ခုတွင် HTML Templates နှင့် Routes | Multipage website တစ်ခု၏ architecture ကို routing နှင့် HTML templates အသုံးပြု၍ scaffold ပြုလုပ်နည်းကို လေ့လာပါ | [HTML Templates နှင့် Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Login နှင့် Registration Form တစ်ခု တည်ဆောက်ခြင်း | Form တစ်ခုတည်ဆောက်ခြင်းနှင့် validation routines များကို စီမံခန့်ခွဲနည်းကို လေ့လာပါ | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Data Fetching နှင့် အသုံးပြုနည်းများ | သင့် app တွင် data များ ဘယ်လိုဝင်ရောက်ပြီး ထွက်သွားမလဲ၊ data များကို fetch, store, dispose ပြုလုပ်နည်းကို လေ့လာပါ | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | State Management အကြောင်းအရာများ | သင့် app ၏ state ကို ဘယ်လိုထိန်းသိမ်းပြီး programmatically စီမံခန့်ခွဲမလဲကို လေ့လာပါ | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode နှင့် အလုပ်လုပ်ခြင်း | Code editor ကို အသုံးပြုနည်းကို လေ့လာပါ | [VScode Code Editor ကို အသုံးပြုပါ](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI နှင့် အလုပ်လုပ်ခြင်း | သင့်ကိုယ်ပိုင် AI assistant တစ်ခု တည်ဆောက်နည်းကို လေ့လာပါ | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 သင်ကြားမှုနည်းလမ်း
ကျွန်ုပ်တို့၏ သင်ရိုးညွှန်းတ်းကို အဓိက သင်ကြားမှုနည်းလမ်းနှစ်ခုအပေါ် အခြေခံထားသည်:
* ပရောဂျက်အခြေခံ သင်ကြားမှု
ကျွန်ုပ်တို့၏ သင်ရိုးညွှန်းတ်းကို အဓိက သင်ကြားမှုနည်းလမ်းနှစ်ခုအပေါ် အခြေခံထားသည်:
* ပရောဂျက်အခြေပြု သင်ကြားမှု
* မကြာခဏ မေးခွန်းများ
ဒီအစီအစဉ်သည် JavaScript, HTML, CSS ၏ အခြေခံများနှင့် ယနေ့ Web Developer များအသုံးပြုသော နောက်ဆုံးပေါ် tools နှင့် techniques များကို သင်ကြားပေးသည်။ ကျောင်းသားများသည် typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, နှင့် business များအတွက် banking app တည်ဆောက်ခြင်းဖြင့် လက်တွေ့ကျကျ အတွေ့အကြုံရရှိမည်ဖြစ်သည်။ အစီအစဉ်၏ အဆုံးတွင် ကျောင်းသားများသည် Web Development အကြောင်းကို ခိုင်မာစွာ နားလည်သွားမည်ဖြစ်သည်။
> 🎓 ဒီသင်ရိုးညွှန်းတန်း၏ ပထမဆုံး သင်ခန်းစာများကို Microsoft Learn တွင် [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) အဖြစ် လေ့လာနိုင်ပါသည်။
ဒီအစီအစဉ်သည် JavaScript, HTML, CSS ၏ အခြေခံများနှင့် ယနေ့ Web Developer များအသုံးပြုနေသော နောက်ဆုံးပေါ် tools နှင့် နည်းလမ်းများကို သင်ကြားပေးသည်။ ကျောင်းသားများသည် Typing Game, Virtual Terrarium, Eco-Friendly Browser Extension, Space-Invader-Style Game, Banking App for Businesses တို့ကို တည်ဆောက်ခြင်းဖြင့် လက်တွေ့အတွေ့အကြုံရရှိမည်ဖြစ်သည်။ အစီအစဉ်၏ နောက်ဆုံးတွင် Web Development အကြောင်းကို အခြေခံအားကောင်းစွာ နားလည်သွားမည်ဖြစ်သည်။
အကြောင်းအရာများကို ပရောဂျက်များနှင့် ကိုက်ညီစေရန် သေချာစေခြင်းဖြင့် ကျောင်းသားများအတွက် ပိုမိုစိတ်ဝင်စားစေပြီး အကြောင်းအရာများကို ပိုမိုမှတ်မိစေမည်ဖြစ်သည်။ JavaScript အခြေခံများကို concept များကို မိတ်ဆက်ရန် သင်ခန်းစာများနှင့် "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video tutorial စုစည်းမှုမှ video တစ်ခုနှင့် တွဲဖက်ရေးသားထားသည်။
> 🎓 ဒီသင်ရိုးညွှန်းတမ်း၏ ပထမဆုံး သင်ခန်းစာအချို့ကို Microsoft Learn တွင် [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) အဖြစ် လေ့လာနိုင်ပါသည်။
ထို့အပြင်၊ သင်ခန်းစာမတိုင်မီ မေးခွန်းတစ်ခုသည် ကျောင်းသား၏ အာရုံစိုက်မှုကို သင်ခန်းစာအကြောင်းအရာသို့ ဦးတည်စေပြီး၊ သင်ခန်းစာပြီးဆုံးပြီးနောက် မေးခွန်းတစ်ခုသည် အကြောင်းအရာများကို ပိုမိုမှတ်မိစေမည်ဖြစ်သည်။ ဒီသင်ရိုးညွှန်းတန်းကို အပြည့်အစုံ သို့မဟုတ် အစိတ်အပိုင်းအလိုက် လေ့လာနိုင်ပြီး၊ ပရောဂျက်များသည် သေးငယ်ပြီး ၁၂ ပတ်အတွင်း ပိုမိုရှုပ်ထွေးလာမည်ဖြစ်သည်။
ပရောဂျက်များနှင့် အကြောင်းအရာများကို ကိုက်ညီစေရန် သေချာစေခြင်းဖြင့် ကျောင်းသားများအတွက် လေ့လာမှုလုပ်ငန်းစဉ်ကို ပိုမိုစိတ်ဝင်စားစေပြီး အကြောင်းအရာများကို ပိုမိုမှတ်မိစေပါသည်။ ထို့အပြင် JavaScript အခြေခံများကို မိတ်ဆက်သည့် သင်ခန်းစာအချို့ကို "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ဗီဒီယို tutorial စုစည်းမှုမှ ဗီဒီယိုနှင့် တွဲဖက်ရေးသားခဲ့ပါသည်။ ဒီသင်ရိုးညွှန်းတမ်းကို အပြည့်အစုံ သို့မဟုတ် အစိတ်အပိုင်းအချို့သာ လေ့လာနိုင်သည်။
JavaScript frameworks များကို မိတ်ဆက်ခြင်းကို ရည်ရွယ်လျက် Web Developer အဖြစ် framework ကို အသုံးပြုမီ အခြေခံကျသော ကျွမ်းကျင်မှုများကို အာရုံစိုက်ရန် ရည်ရွယ်ထားသော်လည်း၊ ဒီသင်ရိုးညွှန်းတန်းကို ပြီးဆုံးပြီးနောက် Node.js အကြောင်းကို "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" video စုစည်းမှုမှ လေ့လာခြင်းသည် ကောင်းမွန်သော နောက်တစ်ဆင့်ဖြစ်နိုင်သည်။
JavaScript frameworks များကို မိတ်ဆက်ခြင်းကို ရှောင်ကြဉ်ထားပြီး၊ framework တစ်ခုကို အသုံးပြုမီ Web Developer အဖြစ် လိုအပ်သော အခြေခံကျသည့် ကျွမ်းကျင်မှုများကို အဓိကထားသင်ကြားပေးထားသည်။ ဒီသင်ရိုးညွှန်းတမ်းကို ပြီးဆုံးပြီးနောက် လေ့လာရန် နောက်တစ်ဆင့်ကတော့ "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" ဗီဒီယိုစုစည်းမှုဖြင့် Node.js အကြောင်းကို လေ့လာခြင်းဖြစ်သည်။
> ကျွန်ုပ်တို့၏ [Code of Conduct](CODE_OF_CONDUCT.md) နှင့် [Contributing](CONTRIBUTING.md) လမ်းညွှန်ချက်များကို ကြည့်ရှုပါ။ သင့်၏ အဆောက်အအုံဆိုင်ရာ အကြံပြုချက်များကို ကြိုဆိုပါသည်!
> ကျွန်ုပ်တို့၏ [Code of Conduct](CODE_OF_CONDUCT.md) နှင့် [Contributing](CONTRIBUTING.md) လမ်းညွှန်ချက်များကို ကြည့်ပါ။ သင့်၏ အဆောက်အအုံဆန်းစစ်ချက်များကို ကြိုဆိုပါသည်!
## 🧭 အွန်လိုင်းမရှိဘဲ အသုံးပြုခြင်း
## 🧭 အော့ဖ်လိုင်း အသုံးပြုမှု
ဒီ documentation ကို [Docsify](https://docsify.js.org/#/) အသုံးပြု၍ အွန်လိုင်းမရှိဘဲ အသုံးပြုနိုင်သည်။ ဒီ repo ကို fork လုပ်ပြီး၊ သင့် local machine တွင် [Docsify install](https://docsify.js.org/#/quickstart) လုပ်ပါ၊ ထို့နောက် repo ၏ root folder တွင် `docsify serve` ရိုက်ပါ။ website ကို သင့် localhost ၏ port 3000 တွင် serve လုပ်မည်: `localhost:3000`
ဒီ documentation ကို [Docsify](https://docsify.js.org/#/) အသုံးပြု၍ အော့ဖ်လိုင်းတွင် လည်ပတ်နိုင်သည်။ ဒီ repo ကို fork လုပ်ပြီး၊ သင့် local machine တွင် [Docsify](https://docsify.js.org/#/quickstart) ကို install လုပ်ပါ၊ ထို့နောက် ဒီ repo ၏ root folder တွင် `docsify serve` ကို ရိုက်ထည့်ပါ။ Website ကို localhost: `localhost:3000` တွင် port 3000 တွင် လည်ပတ်မည်ဖြစ်သည်
## 📘 PDF
သင်ခန်းစာများအားလုံး၏ PDF ကို [ဒီမှာ](https://
[![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)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
သင်ခန်းစာအားလုံး၏ PDF ကို [ဒီမှာ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ရနိုင်ပါသည်။
## 🎒 အခြားသင်တန်းများ
ကျွန်ုပ်တို့၏အဖွဲ့သည် အခြားသင်တန်းများကိုလည်း ထုတ်လုပ်ပါသည်! ကြည့်ပါ:
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### 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)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Generative AI Series
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Generative AI Series
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Core Learning
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### အခြေခံသင်ကြားမှုများ
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot Series
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
### Copilot စီးရီး
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## အကူအညီရယူခြင်း
## အကူအညီရယူခြင်း
AI အက်ပ်များ တည်ဆောက်ရာတွင် အခက်အခဲရှိပါက သို့မဟုတ် မေးခွန်းများရှိပါက MCP အကြောင်း ဆွေးနွေးရန် သင်တန်းသားများနှင့် အတွေ့အကြုံရှိ ဖွံ့ဖြိုးရေးသူများနှင့် ပူးပေါင်းပါ။ မေးခွန်းများကို ကြိုဆိုပြီး အသိပညာများကို အခမဲ့မျှဝေသော ပံ့ပိုးမှုရှိသော အသိုင်းအဝိုင်းတစ်ခုဖြစ်ပါသည်။
AI အက်ပ်များတည်ဆောက်ရာတွင် အခက်အခဲရှိပါက သို့မဟုတ် မေးခွန်းများရှိပါက MCP အကြောင်း ဆွေးနွေးမှုများတွင် အခြားလေ့လာသူများနှင့် အတွေ့အကြုံရှိသော ဖွံ့ဖြိုးရေးသူများနှင့် ပူးပေါင်းပါ။ မေးခွန်းများကို ကြိုဆိုပြီး အသိပညာများကို လွတ်လပ်စွာမျှဝေသော ပံ့ပိုးမှုရှိသော အသိုင်းအဝိုင်းတစ်ခုဖြစ်သည်။
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
ထုတ်ကုန်အကြံပြုချက်များ သို့မဟုတ် တည်ဆောက်ရာတွင် အမှားများရှိပါက အောက်ပါလင့်ခ်သို့ သွားပါ-
ထုတ်ကုန်အကြံပြုချက်များ သို့မဟုတ် တည်ဆောက်ရာတွင် အမှားများရှိပါက အောက်ပါနေရာသို့ သွားပါ-
[![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)
[![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)
## လိုင်စင်
## လိုင်စင်
ဤ repository သည် MIT လိုင်စင်အောက်တွင် လိုင်စင်ရရှိထားပါသည်။ အသေးစိတ်အချက်အလက်များအတွက် [LICENSE](../../LICENSE) ဖိုင်ကို ကြည့်ပါ။
ဤ repository သည် MIT လိုင်စင်အောက်တွင် လိုင်စင်ရရှိထားပါသည်။ အသေးစိတ်အချက်အလက်များအတွက် [LICENSE](../../LICENSE) ဖိုင်ကို ကြည့်ပါ။
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**ဝန်ခံချက်**:
ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှန်ကန်မှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက်ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတည်သော ရင်းမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များမှ ဘာသာပြန်ခြင်းကို အကြံပြုပါသည်။ ဤဘာသာပြန်ကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
**အကြောင်းကြားချက်**:
ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,135 +1,131 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "63e29f5a308b533df9d70336bbb2e2b8",
"translation_date": "2025-11-18T17:09:21+00:00",
"original_hash": "caff943951276a4459a687166f3dfae2",
"translation_date": "2025-12-19T10:28:27+00:00",
"source_file": "README.md",
"language_code": "uk"
}
-->
[![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)
[![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)
[![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/)
[![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)
# Веб-розробка для початківців - навчальна програма
Вивчайте основи веб-розробки за допомогою нашого 12-тижневого курсу від Microsoft Cloud Advocates. Кожен із 24 уроків охоплює JavaScript, CSS і HTML через практичні проєкти, такі як тераріуми, розширення для браузера та космічні ігри. Беріть участь у вікторинах, обговореннях і практичних завданнях. Покращуйте свої навички та закріплюйте знання завдяки ефективній проєктній методології. Почніть свою подорож у програмуванні вже сьогодні!
Приєднуйтесь до спільноти Azure AI Foundry Discord
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Веб-розробка для початківців - Курс
Дотримуйтесь цих кроків, щоб почати використовувати ці ресурси:
1. **Форкніть репозиторій**: Натисніть [![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. **Клонуйте репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Приєднуйтесь до Azure AI Foundry Discord та спілкуйтесь з експертами та іншими розробниками**](https://discord.com/invite/ByRwuEEgH4)
Вивчайте основи веб-розробки з нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен із 24 уроків охоплює JavaScript, CSS та HTML через практичні проєкти, такі як тераріуми, розширення для браузера та космічні ігри. Беріть участь у вікторинах, обговореннях і практичних завданнях. Покращуйте свої навички та закріплюйте знання завдяки нашій ефективній проєктно-орієнтованій методиці. Почніть свою подорож у програмуванні вже сьогодні!
### 🌐 Підтримка багатомовності
Приєднуйтесь до спільноти Azure AI Foundry у Discord
#### Підтримується через GitHub Action (автоматично та завжди актуально)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Арабська](../ar/README.md) | [Бенгальська](../bn/README.md) | [Болгарська](../bg/README.md) | [Бірманська (М'янма)](../my/README.md) | [Китайська (спрощена)](../zh/README.md) | [Китайська (традиційна, Гонконг)](../hk/README.md) | [Китайська (традиційна, Макао)](../mo/README.md) | [Китайська (традиційна, Тайвань)](../tw/README.md) | [Хорватська](../hr/README.md) | [Чеська](../cs/README.md) | [Данська](../da/README.md) | [Нідерландська](../nl/README.md) | [Естонська](../et/README.md) | [Фінська](../fi/README.md) | [Французька](../fr/README.md) | [Німецька](../de/README.md) | [Грецька](../el/README.md) | [Іврит](../he/README.md) | [Гінді](../hi/README.md) | [Угорська](../hu/README.md) | [Індонезійська](../id/README.md) | [Італійська](../it/README.md) | [Японська](../ja/README.md) | [Корейська](../ko/README.md) | [Литовська](../lt/README.md) | [Малайська](../ms/README.md) | [Маратхі](../mr/README.md) | [Непальська](../ne/README.md) | [Норвезька](../no/README.md) | [Перська (фарсі)](../fa/README.md) | [Польська](../pl/README.md) | [Португальська (Бразилія)](../br/README.md) | [Португальська (Португалія)](../pt/README.md) | [Панджабі (Гурмухі)](../pa/README.md) | [Румунська](../ro/README.md) | [Російська](../ru/README.md) | [Сербська (кирилиця)](../sr/README.md) | [Словацька](../sk/README.md) | [Словенська](../sl/README.md) | [Іспанська](../es/README.md) | [Суахілі](../sw/README.md) | [Шведська](../sv/README.md) | [Тагальська (Філіппіни)](../tl/README.md) | [Тамільська](../ta/README.md) | [Тайська](../th/README.md) | [Турецька](../tr/README.md) | [Українська](./README.md) | [Урду](../ur/README.md) | [В'єтнамська](../vi/README.md)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
Виконайте ці кроки, щоб почати використовувати ці ресурси:
1. **Форкніть репозиторій**: Натисніть [![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. **Клонуйте репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Приєднуйтесь до Azure AI Foundry Discord і знайомтесь з експертами та іншими розробниками**](https://discord.com/invite/ByRwuEEgH4)
**Якщо ви хочете додати додаткові переклади, список підтримуваних мов наведено [тут](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)
#### Підтримується через GitHub Action (автоматично та завжди актуально)
#### 🧑‍🎓 _Ви студент?_
<!-- 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/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../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) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../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) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](./README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
Відвідайте [**Сторінку для студентів**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете ресурси для початківців, студентські пакети та навіть способи отримати безкоштовний сертифікат. Це сторінка, яку варто додати в закладки та перевіряти час від часу, оскільки ми щомісяця змінюємо контент.
**Якщо ви хочете додати додаткові переклади, список підтримуваних мов знаходиться [тут](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
### 📣 Оголошення - Нові завдання з режимом GitHub Copilot Agent!
[![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)
Додано нове завдання, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це нове завдання для вас, яке можна виконати за допомогою GitHub Copilot і режиму Agent. Якщо ви ще не використовували режим Agent, він здатний не лише генерувати текст, але й створювати та редагувати файли, виконувати команди тощо.
#### 🧑‍🎓 _Ви студент?_
### 📣 Оголошення - _Новий проєкт для створення за допомогою генеративного AI_
Відвідайте [**сторінку Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете ресурси для початківців, студентські пакети та навіть способи отримати безкоштовний ваучер на сертифікацію. Це сторінка, яку варто додати в закладки та перевіряти час від часу, оскільки ми щомісяця оновлюємо контент.
Додано новий проєкт AI Assistant, ознайомтеся з ним [проєкт](./09-chat-project/README.md)
### 📣 Оголошення - Нові виклики з режимом GitHub Copilot Agent!
### 📣 Оголошення - _Нова навчальна програма_ з генеративного AI для JavaScript щойно випущена
Додано новий виклик, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це новий виклик для вас, який можна виконати за допомогою GitHub Copilot і режиму Agent. Якщо ви ще не використовували режим Agent, він здатний не лише генерувати текст, але й створювати та редагувати файли, виконувати команди тощо.
Не пропустіть нашу нову навчальну програму з генеративного AI!
### 📣 Оголошення - _Новий проєкт для створення за допомогою генеративного ШІ_
Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб розпочати!
Додано новий проєкт AI Assistant, ознайомтеся з ним [тут](./09-chat-project/README.md)
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.uk.png)
### 📣 Оголошення - _Новий курс_ з генеративного ШІ для JavaScript
- Уроки, що охоплюють все від основ до RAG.
- Спілкуйтеся з історичними персонажами за допомогою GenAI та нашого додатку-компаньйона.
- Весела та захоплююча розповідь, ви будете подорожувати у часі!
Не пропустіть наш новий курс з генеративного ШІ!
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.uk.png)
Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб розпочати!
Кожен урок включає завдання для виконання, перевірку знань і виклик, який допоможе вам освоїти такі теми, як:
- Створення запитів і інженерія запитів
- Генерація тексту та зображень для додатків
- Додатки для пошуку
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.uk.png)
Відвідайте [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), щоб розпочати!
- Уроки, що охоплюють все від основ до RAG.
- Взаємодія з історичними персонажами за допомогою GenAI та нашого додатку-компаньйона.
- Захоплюючий наратив, ви будете подорожувати в часі!
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.uk.png)
Кожен урок включає завдання для виконання, перевірку знань і виклик, щоб допомогти вам вивчити такі теми, як:
- Створення запитів і їх оптимізація
- Генерація тексту та зображень
- Пошукові додатки
## 🌱 Початок роботи
Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб розпочати!
> **Вчителі**, ми [додали кілька пропозицій](for-teachers.md) щодо використання цієї навчальної програми. Ми будемо раді вашим відгукам [у нашому форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
## 🌱 Початок роботи
**[Учні](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для кожного уроку починайте з вікторини перед лекцією, читайте матеріал лекції, виконуйте різні завдання та перевіряйте своє розуміння за допомогою вікторини після лекції.
> **Вчителі**, ми [додали кілька пропозицій](for-teachers.md) щодо використання цього курсу. Ми будемо раді вашим відгукам [у нашому форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
Щоб покращити ваш навчальний досвід, спілкуйтеся з однолітками, щоб працювати над проєктами разом! Обговорення заохочуються у нашому [форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), де наша команда модераторів буде доступна для відповіді на ваші запитання.
**[Учні](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для кожного уроку починайте з вікторини перед лекцією, читайте матеріал лекції, виконуйте різні завдання та перевіряйте свої знання за допомогою вікторини після лекції.
Для подальшого навчання ми настійно рекомендуємо ознайомитися з [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для додаткових навчальних матеріалів.
Щоб покращити свій досвід навчання, спілкуйтеся з однолітками для спільної роботи над проєктами! Обговорення заохочуються у нашому [форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), де наша команда модераторів буде доступна для відповіді на ваші запитання.
### 📋 Налаштування вашого середовища
Для подальшого навчання ми настійно рекомендуємо дослідити [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для додаткових навчальних матеріалів.
Ця навчальна програма має готове середовище для розробки! Починаючи, ви можете вибрати запуск навчальної програми в [Codespace](https://github.com/features/codespaces/) (_середовище на основі браузера, без необхідності встановлення_), або локально на вашому комп'ютері, використовуючи текстовий редактор, такий як [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
### 📋 Налаштування середовища
#### Створіть свій репозиторій
Щоб легко зберігати вашу роботу, рекомендується створити власну копію цього репозиторію. Ви можете зробити це, натиснувши кнопку **Use this template** у верхній частині сторінки. Це створить новий репозиторій у вашому обліковому записі GitHub з копією навчальної програми.
Цей курс має готове середовище для розробки! На початку ви можете вибрати запуск курсу в [Codespace](https://github.com/features/codespaces/) (_браузерне середовище, яке не потребує встановлення_), або локально на вашому комп'ютері за допомогою текстового редактора, такого як [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Дотримуйтесь цих кроків:
1. **Форкніть репозиторій**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки.
2. **Клонуйте репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Створіть свій репозиторій
Щоб легко зберігати свою роботу, рекомендується створити власну копію цього репозиторію. Ви можете зробити це, натиснувши кнопку **Use this template** у верхній частині сторінки. Це створить новий репозиторій у вашому обліковому записі GitHub з копією курсу.
#### Запуск навчальної програми в Codespace
Виконайте ці кроки:
1. **Форкніть репозиторій**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки.
2. **Клонуйте репозиторій**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code** і виберіть **Open with Codespaces**. Це створить новий Codespace для роботи.
#### Запуск курсу в Codespace
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.uk.png)
У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code** і виберіть **Open with Codespaces**. Це створить новий Codespace для роботи.
#### Запуск навчальної програми локально на вашому комп'ютері
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.uk.png)
Щоб запустити цю навчальну програму локально на вашому комп'ютері, вам знадобиться текстовий редактор, браузер і інструмент командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), проведе вас через різні варіанти кожного з цих інструментів, щоб ви могли вибрати те, що найкраще підходить для вас.
#### Запуск курсу локально на вашому комп'ютері
Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як редактор, який також має вбудований [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Ви можете завантажити Visual Studio Code [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Щоб запустити цей курс локально на вашому комп'ютері, вам знадобиться текстовий редактор, браузер і інструмент командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), проведе вас через різні варіанти для кожного з цих інструментів, щоб ви могли вибрати те, що найкраще підходить для вас.
Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як ваш редактор, який також має вбудований [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Ви можете завантажити Visual Studio Code [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонуйте ваш репозиторій на комп'ютер. Ви можете зробити це, натиснувши кнопку **Code** і скопіювавши URL:
1. Клонуйте свій репозиторій на комп'ютер. Ви можете зробити це, натиснувши кнопку **Code** і скопіювавши URL:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
Потім відкрийте [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) у [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) і виконайте наступну команду, замінивши `<your-repository-url>` на URL, який ви щойно скопіювали:
Потім відкрийте [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) у [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) і виконайте наступну команду, замінивши `<your-repository-url>` на URL, який ви щойно скопіювали:
```bash
git clone <your-repository-url>
```
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder** і вибравши папку, яку ви щойно клонували.
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder** і вибравши папку, яку ви щойно клонували.
> Рекомендовані розширення для Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для перегляду HTML-сторінок у Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - допомагає писати код швидше
> Рекомендовані розширення для Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для попереднього перегляду HTML-сторінок у Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - допоможе вам писати код швидше
## 📂 Кожен урок включає:
@ -137,14 +133,14 @@ CO_OP_TRANSLATOR_METADATA:
- необов'язкове додаткове відео
- розігрівний тест перед уроком
- письмовий урок
- для уроків, заснованих на проєктах, покрокові інструкції щодо створення проєкту
- для уроків, заснованих на проєктах, покрокові інструкції зі створення проєкту
- перевірка знань
- завдання
- додаткове читання
- додаткові матеріали для читання
- домашнє завдання
- [тест після уроку](https://ff-quizzes.netlify.app/web/)
> **Примітка щодо тестів**: Усі тести знаходяться в папці Quiz-app, всього 48 тестів по три питання кожен. Вони доступні [тут](https://ff-quizzes.netlify.app/web/), додаток для тестів можна запустити локально або розгорнути на Azure; дотримуйтесь інструкцій у папці `quiz-app`.
> **Примітка щодо тестів**: Усі тести знаходяться в папці Quiz-app, всього 48 тестів по три питання кожен. Вони доступні [тут](https://ff-quizzes.netlify.app/web/), додаток для тестів можна запустити локально або розгорнути в Azure; дотримуйтесь інструкцій у папці `quiz-app`.
## 🗃️ Уроки
@ -152,30 +148,30 @@ CO_OP_TRANSLATOR_METADATA:
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Початок роботи | Вступ до програмування та інструментів розробника | Дізнайтеся основи більшості мов програмування та про програмне забезпечення, яке допомагає професійним розробникам виконувати свою роботу | [Вступ до мов програмування та інструментів розробника](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Початок роботи | Основи GitHub, включаючи роботу в команді | Як використовувати GitHub у вашому проєкті, як співпрацювати з іншими над кодовою базою | [Вступ до GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Початок роботи | Доступність | Дізнайтеся основи веб-доступності | [Основи доступності](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Початок роботи | Доступність | Вивчіть основи веб-доступності | [Основи доступності](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основи JS | Типи даних у JavaScript | Основи типів даних у JavaScript | [Типи даних](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основи JS | Функції та методи | Дізнайтеся про функції та методи для управління логікою додатка | [Функції та методи](./2-js-basics/2-functions-methods/README.md) | Jasmine і Christopher |
| 05 | Основи JS | Функції та методи | Дізнайтеся про функції та методи для управління логікою додатка | [Функції та методи](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | Основи JS | Прийняття рішень у JS | Дізнайтеся, як створювати умови у вашому коді за допомогою методів прийняття рішень | [Прийняття рішень](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основи JS | Масиви та цикли | Робота з даними за допомогою масивів і циклів у JavaScript | [Масиви та цикли](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | Основи JS | Масиви та цикли | Робота з даними за допомогою масивів та циклів у JavaScript | [Масиви та цикли](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Тераріум](./3-terrarium/solution/README.md) | HTML на практиці | Створіть HTML для онлайн-тераріуму, зосереджуючись на створенні макета | [Вступ до HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Тераріум](./3-terrarium/solution/README.md) | CSS на практиці | Створіть CSS для стилізації онлайн-тераріуму, зосереджуючись на основах CSS, включаючи адаптивність сторінки | [Вступ до CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Тераріум](./3-terrarium/solution/README.md) | Замикання у JavaScript, маніпуляція DOM | Створіть JavaScript для функціонування тераріуму як інтерфейсу перетягування, зосереджуючись на замиканнях і маніпуляції DOM | [Замикання у JavaScript, маніпуляція DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Гра на друкування](./4-typing-game/solution/README.md) | Створення гри на друкування | Дізнайтеся, як використовувати події клавіатури для управління логікою вашого JavaScript-додатка | [Програмування на основі подій](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Зелений розширення для браузера](./5-browser-extension/solution/README.md) | Робота з браузерами | Дізнайтеся, як працюють браузери, їх історію та як створити перші елементи розширення для браузера | [Про браузери](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Зелений розширення для браузера](./5-browser-extension/solution/README.md) | Створення форми, виклик API та збереження змінних у локальному сховищі | Створіть елементи JavaScript вашого розширення для браузера, щоб викликати API, використовуючи змінні, збережені в локальному сховищі | [API, форми та локальне сховище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Зелений розширення для браузера](./5-browser-extension/solution/README.md) | Фонові процеси в браузері, продуктивність вебу | Використовуйте фонові процеси браузера для управління іконкою розширення; дізнайтеся про продуктивність вебу та деякі оптимізації | [Фонові завдання та продуктивність](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Космічна гра](./6-space-game/solution/README.md) | Більш просунута розробка ігор з JavaScript | Дізнайтеся про наслідування, використовуючи як класи, так і композицію, а також про шаблон Pub/Sub, готуючись до створення гри | [Вступ до просунутої розробки ігор](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Космічна гра](./6-space-game/solution/README.md) | Малювання на canvas | Дізнайтеся про API Canvas, який використовується для малювання елементів на екрані | [Малювання на canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Космічна гра](./6-space-game/solution/README.md) | Переміщення елементів по екрану | Дізнайтеся, як елементи можуть набувати руху, використовуючи декартові координати та API Canvas | [Переміщення елементів](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Космічна гра](./6-space-game/solution/README.md) | Виявлення зіткнень | Зробіть так, щоб елементи зіткнулися та реагували один на одного за допомогою натискань клавіш, а також забезпечте функцію охолодження для продуктивності гри | [Виявлення зіткнень](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Космічна гра](./6-space-game/solution/README.md) | Підрахунок очок | Виконуйте математичні обчислення на основі статусу гри та продуктивності | [Підрахунок очок](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Космічна гра](./6-space-game/solution/README.md) | Завершення та перезапуск гри | Дізнайтеся про завершення та перезапуск гри, включаючи очищення ресурсів та скидання значень змінних | [Умови завершення](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банківський додаток](./7-bank-project/solution/README.md) | HTML-шаблони та маршрути у веб-додатку | Дізнайтеся, як створити структуру архітектури багатосторінкового вебсайту, використовуючи маршрути та HTML-шаблони | [HTML-шаблони та маршрути](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банківський додаток](./7-bank-project/solution/README.md) | Створення форми входу та реєстрації | Дізнайтеся про створення форм та обробку процедур перевірки | [Форми](./7-bank-project/2-forms/README.md) | Yohan |
| 09 | [Тераріум](./3-terrarium/solution/README.md) | CSS на практиці | Створіть CSS для стилізації онлайн-тераріуму, зосереджуючись на основах CSS, включаючи адаптивність | [Вступ до CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Тераріум](./3-terrarium/solution/README.md) | Замикання у JavaScript, маніпуляція DOM | Створіть JavaScript для функціонування тераріуму як інтерфейсу перетягування, зосереджуючись на замиканнях та маніпуляції DOM | [Замикання у JavaScript, маніпуляція DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Гра на друкування](./4-typing-game/solution/README.md) | Створення гри на друкування | Дізнайтеся, як використовувати події клавіатури для управління логікою вашого JavaScript-додатка | [Програмування, кероване подіями](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Розширення для браузера Green](./5-browser-extension/solution/README.md) | Робота з браузерами | Дізнайтеся, як працюють браузери, їх історію, і як створити перші елементи розширення для браузера | [Про браузери](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Розширення для браузера Green](./5-browser-extension/solution/README.md) | Створення форми, виклик API та збереження змінних у локальному сховищі | Створіть JavaScript-елементи вашого розширення для браузера, щоб викликати API, використовуючи змінні, збережені у локальному сховищі | [API, форми та локальне сховище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Розширення для браузера Green](./5-browser-extension/solution/README.md) | Фонові процеси у браузері, продуктивність вебу | Використовуйте фонові процеси браузера для управління іконкою розширення; дізнайтеся про продуктивність вебу та оптимізації | [Фонові завдання та продуктивність](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Космічна гра](./6-space-game/solution/README.md) | Більш просунута розробка ігор з JavaScript | Дізнайтеся про наслідування, використовуючи як класи, так і композицію, а також патерн Pub/Sub, готуючись до створення гри | [Вступ до просунутої розробки ігор](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Космічна гра](./6-space-game/solution/README.md) | Малювання на canvas | Дізнайтеся про Canvas API, який використовується для малювання елементів на екрані | [Малювання на canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Космічна гра](./6-space-game/solution/README.md) | Переміщення елементів по екрану | Дізнайтеся, як елементи можуть рухатися, використовуючи декартові координати та Canvas API | [Переміщення елементів](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Космічна гра](./6-space-game/solution/README.md) | Виявлення зіткнень | Зробіть так, щоб елементи стикалися та реагували один на одного, використовуючи натискання клавіш, і забезпечте функцію затримки для продуктивності гри | [Виявлення зіткнень](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Космічна гра](./6-space-game/solution/README.md) | Підрахунок очок | Виконуйте математичні обчислення на основі статусу та продуктивності гри | [Підрахунок очок](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Космічна гра](./6-space-game/solution/README.md) | Завершення та перезапуск гри | Дізнайтеся, як завершувати та перезапускати гру, включаючи очищення ресурсів та скидання значень змінних | [Умови завершення](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банківський додаток](./7-bank-project/solution/README.md) | HTML-шаблони та маршрути у веб-додатку | Дізнайтеся, як створити структуру багатосторінкового вебсайту, використовуючи маршрути та HTML-шаблони | [HTML-шаблони та маршрути](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банківський додаток](./7-bank-project/solution/README.md) | Створення форми входу та реєстрації | Дізнайтеся, як створювати форми та обробляти процедури перевірки | [Форми](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банківський додаток](./7-bank-project/solution/README.md) | Методи отримання та використання даних | Як дані надходять у ваш додаток, як їх отримувати, зберігати та видаляти | [Дані](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банківський додаток](./7-bank-project/solution/README.md) | Концепти управління станом | Дізнайтеся, як ваш додаток зберігає стан і як ним управляти програмно | [Управління станом](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Браузер/VScode Code](../../8-code-editor) | Робота з VScode | Дізнайтеся, як використовувати редактор коду | [Використання редактора коду VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Асистенти](./9-chat-project/README.md) | Робота з AI | Дізнайтеся, як створити власного AI асистента | [Проєкт AI Асистент](./9-chat-project/README.md) | Chris |
| 24 | [Банківський додаток](./7-bank-project/solution/README.md) | Концепти управління станом | Дізнайтеся, як ваш додаток зберігає стан і як ним керувати програмно | [Управління станом](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Код у браузері/VScode](../../8-code-editor) | Робота з VScode | Дізнайтеся, як використовувати редактор коду | [Використання редактора коду VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Асистенти](./9-chat-project/README.md) | Робота з AI | Дізнайтеся, як створити власного AI-асистента | [Проєкт AI Асистент](./9-chat-project/README.md) | Chris |
## 🏫 Педагогіка
@ -183,22 +179,22 @@ CO_OP_TRANSLATOR_METADATA:
* навчання на основі проєктів
* часті тести
Програма навчає основам JavaScript, HTML і CSS, а також найновішим інструментам і технікам, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи гру на друкування, віртуальний тераріум, екологічне розширення для браузера, гру в стилі космічних загарбників та банківський додаток для бізнесу. До кінця серії студенти отримають міцне розуміння веб-розробки.
Програма навчає основам JavaScript, HTML і CSS, а також найновішим інструментам і технікам, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи гру на друкування, віртуальний тераріум, екологічно чисте розширення для браузера, гру в стилі "космічних загарбників" і банківський додаток для бізнесу. До кінця серії студенти отримають міцне розуміння веб-розробки.
> 🎓 Ви можете пройти перші кілька уроків цієї програми як [Шлях навчання](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
> 🎓 Ви можете пройти перші кілька уроків цієї програми як [Навчальний шлях](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
Забезпечуючи відповідність контенту проєктам, процес стає більш захоплюючим для студентів, а засвоєння концептів буде покращено. Ми також написали кілька вступних уроків з основ JavaScript для введення концептів, у парі з відео з колекції "[Серія для початківців: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", деякі з авторів якої внесли свій вклад у цю навчальну програму.
Забезпечуючи відповідність контенту проєктам, процес стає більш захоплюючим для студентів, а засвоєння концептів посилюється. Ми також написали кілька вступних уроків з основ JavaScript, які супроводжуються відео з колекції "[Серія для початківців: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", деякі з авторів якої зробили внесок у цю навчальну програму.
Крім того, тест з низькими ставками перед заняттям налаштовує студента на вивчення теми, а другий тест після заняття забезпечує подальше засвоєння. Ця навчальна програма була розроблена як гнучка та цікава і може бути пройдена повністю або частково. Проєкти починаються з простих і стають дедалі складнішими до кінця 12-тижневого циклу.
Крім того, тест з низькими ставками перед уроком налаштовує студента на вивчення теми, а другий тест після уроку забезпечує подальше засвоєння. Ця навчальна програма була розроблена, щоб бути гнучкою та цікавою, і її можна проходити повністю або частково. Проєкти починаються з простих і стають дедалі складнішими до кінця 12-тижневого циклу.
Хоча ми навмисно уникали введення фреймворків JavaScript, щоб зосередитися на базових навичках, необхідних веб-розробнику перед освоєнням фреймворка, хорошим наступним кроком після завершення цієї програми буде вивчення Node.js через іншу колекцію відео: "[Серія для початківців: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Хоча ми свідомо уникали введення JavaScript-фреймворків, щоб зосередитися на базових навичках, необхідних веб-розробнику перед освоєнням фреймворків, наступним кроком після завершення цієї програми може бути вивчення Node.js через іншу колекцію відео: "[Серія для початківців: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Відвідайте наші [Правила поведінки](CODE_OF_CONDUCT.md) та [Рекомендації щодо внеску](CONTRIBUTING.md). Ми вітаємо ваші конструктивні відгуки!
## 🧭 Доступ офлайн
## 🧭 Офлайн-доступ
Ви можете запустити цю документацію офлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть цей репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на ваш локальний комп'ютер, а потім у кореневій папці цього репозиторію введіть `docsify serve`. Вебсайт буде запущений на порту 3000 на вашому localhost: `localhost:3000`.
Ви можете запустити цю документацію офлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть цей репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на ваш локальний комп'ютер, а потім у кореневій папці цього репозиторію введіть `docsify serve`. Вебсайт буде доступний на порту 3000 на вашому localhost: `localhost:3000`.
## 📘 PDF
@ -207,59 +203,63 @@ PDF усіх уроків можна знайти [тут](https://microsoft.git
## 🎒 Інші курси
Наша команда створює інші курси! Ознайомтеся:
Наша команда створює й інші курси! Ознайомтеся:
### LangChain
[![LangChain4j для початківців](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js для початківців](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Агенти
[![AZD для початківців](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 для початківців](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 для початківців](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)
[![AI Agents для початківців](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI для початківців](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 для початківців](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)
[![AI Агенти для початківців](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Серія про генеративний AI
[![Генеративний AI для початківців](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Генеративний AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Генеративний AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Генеративний AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Серія про генеративний AI
[![Генеративний AI для початківців](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Генеративний AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Генеративний AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Генеративний AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Основне навчання
[![ML для початківців](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science для початківців](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI для початківців](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Кібербезпека для початківців](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Веб-розробка для початківців](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT для початківців](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![Розробка XR для початківців](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Основне навчання
[![ML для початківців](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Наука про дані для початківців](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI для початківців](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Кібербезпека для початківців](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Веб-розробка для початківців](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT для початківців](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![Розробка XR для початківців](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Серія Copilot
[![Copilot для парного програмування з AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot для C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Пригоди з Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
### Серія Copilot
[![Copilot для парного програмування з AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot для C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Пригоди з Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Отримання допомоги
## Отримання допомоги
Якщо ви застрягли або маєте питання щодо створення AI-додатків, приєднуйтесь до обговорень про MCP разом з іншими учнями та досвідченими розробниками. Це підтримуюча спільнота, де питання вітаються, а знання діляться вільно.
Якщо ви застрягли або маєте питання щодо створення AI-додатків, приєднуйтесь до обговорень про MCP з іншими учнями та досвідченими розробниками. Це підтримуюча спільнота, де питання вітаються, а знання діляться вільно.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Якщо у вас є відгуки про продукт або виникають помилки під час створення, відвідайте:
Якщо у вас є відгуки про продукт або виникають помилки під час створення, відвідайте:
[![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)
[![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)
## Ліцензія
## Ліцензія
Цей репозиторій ліцензований за ліцензією MIT. Дивіться файл [LICENSE](../../LICENSE) для отримання додаткової інформації.
Цей репозиторій ліцензований за ліцензією MIT. Дивіться файл [LICENSE](../../LICENSE) для отримання додаткової інформації.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Відмова від відповідальності**:
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "63e29f5a308b533df9d70336bbb2e2b8",
"translation_date": "2025-11-18T17:02:55+00:00",
"original_hash": "caff943951276a4459a687166f3dfae2",
"translation_date": "2025-12-19T10:23:05+00:00",
"source_file": "README.md",
"language_code": "vi"
}
@ -14,22 +14,22 @@ CO_OP_TRANSLATOR_METADATA:
[![Chào mừng PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![Người theo dõi 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/)
[![Forks 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/)
[![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/)
[![Sao GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Phát triển Web cho Người mới bắt đầu - Một Chương trình học
# Phát triển Web cho Người mới bắt đầu - Một chương trình học
Học các kiến thức cơ bản về phát triển web với khóa học 12 tuần toàn diện của Microsoft Cloud Advocates. Mỗi bài học trong 24 bài sẽ đi sâu vào JavaScript, CSS và HTML thông qua các dự án thực hành như làm terrarium, tiện ích mở rộng trình duyệt và trò chơi không gian. Tham gia các bài kiểm tra, thảo luận và bài tập thực hành. Nâng cao kỹ năng và tối ưu hóa việc ghi nhớ kiến thức với phương pháp học dựa trên dự án hiệu quả của chúng tôi. Bắt đầu hành trình lập trình của bạn ngay hôm nay!
Học các kiến thức cơ bản về phát triển web với khóa học 12 tuần toàn diện của Microsoft Cloud Advocates. Mỗi bài học trong 24 bài sẽ đi sâu vào JavaScript, CSS và HTML thông qua các dự án thực hành như làm terrarium, tiện ích mở rộng trình duyệt và trò chơi không gian. Tham gia các bài kiểm tra, thảo luận và bài tập thực hành. Nâng cao kỹ năng và tối ưu hóa việc ghi nhớ kiến thức của bạn với phương pháp học dựa trên dự án hiệu quả của chúng tôi. Bắt đầu hành trình lập trình của bạn ngay hôm nay!
Tham gia cộng đồng Azure AI Foundry Discord
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Thực hiện các bước sau để bắt đầu sử dụng tài nguyên này:
1. **Fork Repository**: Nhấn [![Forks 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`
1. **Fork kho lưu trữ**: Nhấp vào [![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 kho lưu trữ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Tham gia Azure AI Foundry Discord và gặp gỡ các chuyên gia và nhà phát triển khác**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Hỗ trợ đa ngôn ngữ
@ -44,17 +44,17 @@ Thực hiện các bước sau để bắt đầu sử dụng tài nguyên này:
[![Mở trong 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)
#### 🧑‍🎓 _Bạn là sinh viên?_
#### 🧑‍🎓 _Bạn là học sinh/sinh viên?_
Truy cập [**Trang Hub Sinh viên**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) nơi bạn sẽ tìm thấy tài nguyên cho người mới bắt đầu, các gói dành cho sinh viên và thậm chí là cách nhận voucher chứng chỉ miễn phí. Đây là trang bạn nên đánh dấu và kiểm tra thường xuyên vì nội dung sẽ được thay đổi hàng tháng.
Truy cập [**Trang Hub dành cho Học sinh**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) nơi bạn sẽ tìm thấy tài nguyên cho người mới bắt đầu, các gói dành cho học sinh và thậm chí là cách nhận voucher chứng chỉ miễn phí. Đây là trang bạn nên đánh dấu và kiểm tra thường xuyên vì nội dung sẽ được thay đổi hàng tháng.
### 📣 Thông báo - Thử thách chế độ Agent của GitHub Copilot mới để hoàn thành!
Thử thách mới được thêm vào, tìm "Thử thách GitHub Copilot Agent 🚀" trong hầu hết các chương. Đây là thử thách mới để bạn hoàn thành bằng cách sử dụng GitHub Copilot và chế độ Agent. Nếu bạn chưa từng sử dụng chế độ Agent trước đây, nó không chỉ có khả năng tạo văn bản mà còn có thể tạo và chỉnh sửa tệp, chạy lệnh và nhiều hơn nữa.
Thử thách mới đã được thêm, tìm "Thử thách GitHub Copilot Agent 🚀" trong hầu hết các chương. Đây là một thử thách mới để bạn hoàn thành bằng cách sử dụng GitHub Copilot và chế độ Agent. Nếu bạn chưa từng sử dụng chế độ Agent trước đây, nó không chỉ có khả năng tạo văn bản mà còn có thể tạo và chỉnh sửa tệp, chạy lệnh và nhiều hơn nữa.
### 📣 Thông báo - _Dự án mới để xây dựng bằng AI Tạo sinh_
Dự án Trợ lý AI mới vừa được thêm vào, hãy xem [dự án](./09-chat-project/README.md)
Dự án Trợ lý AI mới vừa được thêm, hãy xem [dự án](./09-chat-project/README.md)
### 📣 Thông báo - _Chương trình học mới_ về AI Tạo sinh cho JavaScript vừa được phát hành
@ -72,7 +72,7 @@ Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) đ
Mỗi bài học bao gồm một bài tập để hoàn thành, một bài kiểm tra kiến thức và một thử thách để hướng dẫn bạn học các chủ đề như:
- Tạo prompt và kỹ thuật tạo prompt
- Tạo ứng dụng văn bản và hình ảnh
- Ứng dụng tạo văn bản và hình ảnh
- Ứng dụng tìm kiếm
Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) để bắt đầu!
@ -83,24 +83,24 @@ Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) đ
**[Người học](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, với mỗi bài học, hãy bắt đầu bằng bài kiểm tra trước bài giảng và tiếp tục đọc tài liệu bài giảng, hoàn thành các hoạt động khác nhau và kiểm tra hiểu biết của bạn với bài kiểm tra sau bài giảng.
Để nâng cao trải nghiệm học tập của bạn, hãy kết nối với bạn bè để cùng làm các dự án! Khuyến khích thảo luận trong [diễn đàn thảo luận](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) của chúng tôi, nơi đội ngũ quản trị viên sẽ sẵn sàng trả lời câu hỏi của bạn.
Để nâng cao trải nghiệm học tập của bạn, hãy kết nối với bạn bè để cùng làm các dự án! Khuyến khích thảo luận trong [diễn đàn thảo luận của chúng tôi](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) nơi đội ngũ quản trị viên của chúng tôi sẽ sẵn sàng trả lời câu hỏi của bạn.
Để mở rộng kiến thức của bạn, chúng tôi khuyến khích bạn khám phá [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) để thêm tài liệu học tập.
Để mở rộng kiến thức của bạn, chúng tôi khuyến khích bạn khám phá [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) để tìm thêm tài liệu học tập.
### 📋 Thiết lập môi trường của bạn
Chương trình học này đã có sẵn môi trường phát triển! Khi bạn bắt đầu, bạn có thể chọn chạy chương trình học trong một [Codespace](https://github.com/features/codespaces/) (_một môi trường dựa trên trình duyệt, không cần cài đặt_), hoặc trên máy tính của bạn bằng cách sử dụng trình soạn thảo văn bản như [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Tạo repository của bạn
Để dễ dàng lưu công việc của bạn, chúng tôi khuyến nghị bạn tạo một bản sao của repository này. Bạn có thể làm điều này bằng cách nhấn nút **Use this template** ở đầu trang. Điều này sẽ tạo một repository mới trong tài khoản GitHub của bạn với một bản sao của chương trình học.
#### Tạo kho lưu trữ của bạn
Để dễ dàng lưu công việc của bạn, chúng tôi khuyến nghị bạn tạo một bản sao của kho lưu trữ này. Bạn có thể làm điều này bằng cách nhấp vào nút **Use this template** ở đầu trang. Điều này sẽ tạo một kho lưu trữ mới trong tài khoản GitHub của bạn với một bản sao của chương trình học.
Thực hiện các bước sau:
1. **Fork Repository**: Nhấn nút "Fork" ở góc trên bên phải của trang này.
2. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Fork kho lưu trữ**: Nhấp vào nút "Fork" ở góc trên bên phải của trang này.
2. **Clone kho lưu trữ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Chạy chương trình học trong Codespace
Trong bản sao repository mà bạn đã tạo, nhấn nút **Code** và chọn **Open with Codespaces**. Điều này sẽ tạo một Codespace mới để bạn làm việc.
Trong bản sao kho lưu trữ mà bạn đã tạo, nhấp vào nút **Code** và chọn **Open with Codespaces**. Điều này sẽ tạo một Codespace mới để bạn làm việc.
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.vi.png)
@ -108,9 +108,9 @@ Trong bản sao repository mà bạn đã tạo, nhấn nút **Code** và chọn
Để chạy chương trình học này trên máy tính của bạn, bạn sẽ cần một trình soạn thảo văn bản, một trình duyệt và một công cụ dòng lệnh. Bài học đầu tiên của chúng tôi, [Giới thiệu về Ngôn ngữ Lập trình và Công cụ](../../1-getting-started-lessons/1-intro-to-programming-languages), sẽ hướng dẫn bạn qua các tùy chọn khác nhau cho từng công cụ này để bạn chọn những gì phù hợp nhất với bạn.
Chúng tôi khuyến nghị sử dụng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) làm trình soạn thảo, nó cũng có sẵn [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) tích hợp. Bạn có thể tải xuống Visual Studio Code [tại đây](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Chúng tôi khuyến nghị sử dụng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) làm trình soạn thảo, nó cũng có một [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) tích hợp sẵn. Bạn có thể tải xuống Visual Studio Code [tại đây](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone repository của bạn về máy tính. Bạn có thể làm điều này bằng cách nhấn nút **Code** và sao chép URL:
1. Clone kho lưu trữ của bạn về máy tính. Bạn có thể làm điều này bằng cách nhấp vào nút **Code** và sao chép URL:
[CodeSpace](./images/createcodespace.png)
@ -120,12 +120,12 @@ Chúng tôi khuyến nghị sử dụng [Visual Studio Code](https://code.visual
git clone <your-repository-url>
```
2. Mở thư mục trong Visual Studio Code. Bạn có thể làm điều này bằng cách nhấn **File** > **Open Folder** và chọn thư mục bạn vừa clone.
2. Mở thư mục trong Visual Studio Code. Bạn có thể làm điều này bằng cách nhấp vào **File** > **Open Folder** và chọn thư mục bạn vừa clone.
> Các tiện ích mở rộng Visual Studio Code được khuyến nghị:
> Các tiện ích mở rộng Visual Studio Code được khuyến nghị:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - để xem trước các trang HTML trong Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - hỗ trợ bạn viết code nhanh hơn
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - giúp bạn viết mã nhanh hơn
## 📂 Mỗi bài học bao gồm:
@ -133,7 +133,7 @@ Chúng tôi khuyến nghị sử dụng [Visual Studio Code](https://code.visual
- video bổ sung tùy chọn
- bài kiểm tra khởi động trước bài học
- bài học viết
- đối với các bài học dựa trên dự án, hướng dẫn từng bước cách xây dựng dự án
- đối với các bài học dựa trên dự án, hướng dẫn từng bước để xây dựng dự án
- kiểm tra kiến thức
- một thử thách
- tài liệu đọc bổ sung
@ -146,106 +146,112 @@ Chúng tôi khuyến nghị sử dụng [Visual Studio Code](https://code.visual
| | Tên Dự Án | Các Khái Niệm Được Dạy | Mục Tiêu Học Tập | Liên Kết Bài Học | Tác Giả |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Bắt Đầu | Giới thiệu về Lập trình và Công cụ hỗ trợ | Tìm hiểu các nguyên lý cơ bản của hầu hết các ngôn ngữ lập trình và phần mềm giúp các nhà phát triển chuyên nghiệp làm việc | [Giới thiệu về Ngôn ngữ Lập trình và Công cụ hỗ trợ](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Bắt Đầu | Cơ bản về GitHub, bao gồm làm việc nhóm | Cách sử dụng GitHub trong dự án của bạn, cách cộng tác với người khác trên một mã nguồn | [Giới thiệu về GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Bắt Đầu | Khả năng tiếp cận | Tìm hiểu các nguyên lý cơ bản về khả năng tiếp cận web | [Nguyên lý cơ bản về Khả năng tiếp cận](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Cơ bản JS | Các kiểu dữ liệu JavaScript | Các nguyên lý cơ bản về kiểu dữ liệu JavaScript | [Kiểu Dữ Liệu](./2-js-basics/1-data-types/README.md) | Jasmine |
| 01 | Bắt Đầu | Giới thiệu về Lập trình và Công cụ hỗ trợ | Tìm hiểu các nguyên lý cơ bản đằng sau hầu hết các ngôn ngữ lập trình và phần mềm giúp các nhà phát triển chuyên nghiệp làm việc | [Giới thiệu về Ngôn ngữ Lập trình và Công cụ hỗ trợ](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Bắt Đầu | Cơ bản về GitHub, bao gồm làm việc nhóm | Cách sử dụng GitHub trong dự án của bạn, cách cộng tác với người khác trên mã nguồn | [Giới thiệu về GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Bắt Đầu | Khả năng truy cập | Tìm hiểu các nguyên tắc cơ bản về khả năng truy cập web | [Nguyên tắc cơ bản về Khả năng truy cập](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Cơ bản JS | Kiểu dữ liệu trong JavaScript | Các nguyên tắc cơ bản về kiểu dữ liệu trong JavaScript | [Kiểu Dữ Liệu](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Cơ bản JS | Hàm và Phương thức | Tìm hiểu về hàm và phương thức để quản lý luồng logic của ứng dụng | [Hàm và Phương thức](./2-js-basics/2-functions-methods/README.md) | Jasmine và Christopher |
| 06 | Cơ bản JS | Ra quyết định với JS | Tìm hiểu cách tạo điều kiện trong mã của bạn bằng các phương pháp ra quyết định | [Ra quyết định](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | Cơ bản JS | Ra quyết định với JS | Tìm hiểu cách tạo điều kiện trong mã của bạn bằng các phương pháp ra quyết định | [Ra Quyết Định](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Cơ bản JS | Mảng và Vòng lặp | Làm việc với dữ liệu bằng mảng và vòng lặp trong JavaScript | [Mảng và Vòng lặp](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML trong thực tế | Xây dựng HTML để tạo một terrarium trực tuyến, tập trung vào việc xây dựng bố cục | [Giới thiệu về HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS trong thực tế | Xây dựng CSS để tạo kiểu cho terrarium trực tuyến, tập trung vào các nguyên cơ bản của CSS bao gồm làm cho trang web đáp ứng | [Giới thiệu về CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS trong thực tế | Xây dựng CSS để tạo kiểu cho terrarium trực tuyến, tập trung vào các nguyên tắc cơ bản của CSS bao gồm làm cho trang web đáp ứng | [Giới thiệu về CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Đóng gói JavaScript, thao tác DOM | Xây dựng JavaScript để làm cho terrarium hoạt động như một giao diện kéo/thả, tập trung vào đóng gói và thao tác DOM | [Đóng gói JavaScript, thao tác DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Xây dựng trò chơi gõ phím | Tìm hiểu cách sử dụng sự kiện bàn phím để điều khiển logic của ứng dụng JavaScript của bạn | [Lập trình dựa trên sự kiện](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Làm việc với trình duyệt | Tìm hiểu cách trình duyệt hoạt động, lịch sử của chúng, và cách tạo các phần tử đầu tiên của một tiện ích mở rộng trình duyệt | [Về trình duyệt](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Xây dựng một biểu mẫu, gọi API và lưu biến trong bộ nhớ cục bộ | Xây dựng các phần tử JavaScript của tiện ích mở rộng trình duyệt để gọi API bằng các biến được lưu trong bộ nhớ cục bộ | [APIs, Biểu mẫu, và Bộ nhớ cục bộ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Quá trình nền trong trình duyệt, hiệu suất web | Sử dụng các quá trình nền của trình duyệt để quản lý biểu tượng của tiện ích mở rộng; tìm hiểu về hiệu suất web và một số tối ưu hóa để cải thiện | [Nhiệm vụ nền và Hiệu suất](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Phát triển trò chơi nâng cao với JavaScript | Tìm hiểu về Kế thừa bằng cả Lớp và Thành phần, và mô hình Pub/Sub, chuẩn bị cho việc xây dựng trò chơi | [Giới thiệu về Phát triển trò chơi nâng cao](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Vẽ lên canvas | Tìm hiểu về API Canvas, được sử dụng để vẽ các phần tử lên màn hình | [Vẽ lên Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Di chuyển các phần tử trên màn hình | Khám phá cách các phần tử có thể chuyển động bằng cách sử dụng tọa độ Cartesian và API Canvas | [Di chuyển các phần tử](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Phát hiện va chạm | Làm cho các phần tử va chạm và phản ứng với nhau bằng cách sử dụng các phím nhấn và cung cấp chức năng làm mát để đảm bảo hiệu suất của trò chơi | [Phát hiện va chạm](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Ghi điểm | Thực hiện các phép tính toán dựa trên trạng thái và hiệu suất của trò chơi | [Ghi điểm](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kết thúc và khởi động lại trò chơi | Tìm hiểu về việc kết thúc và khởi động lại trò chơi, bao gồm việc dọn dẹp tài sản và đặt lại giá trị biến | [Điều kiện kết thúc](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Mẫu HTML và Định tuyến trong ứng dụng web | Tìm hiểu cách tạo khung kiến trúc của một trang web nhiều trang bằng cách định tuyến và mẫu HTML | [Mẫu HTML và Định tuyến](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Xây dựng Biểu mẫu Đăng nhập và Đăng ký | Tìm hiểu về việc xây dựng biểu mẫu và xử lý các quy trình xác thực | [Biểu mẫu](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Phương pháp Lấy và Sử dụng Dữ liệu | Cách dữ liệu luân chuyển vào và ra khỏi ứng dụng của bạn, cách lấy, lưu trữ và xử lý dữ liệu | [Dữ liệu](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Khái niệm về Quản lý Trạng thái | Tìm hiểu cách ứng dụng của bạn giữ trạng thái và cách quản lý nó bằng lập trình | [Quản lý Trạng thái](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Làm việc với VScode | Tìm hiểu cách sử dụng trình chỉnh sửa mã | [Sử dụng VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Làm việc với AI | Tìm hiểu cách xây dựng trợ lý AI của riêng bạn | [Dự án Trợ lý AI](./9-chat-project/README.md) | Chris |
| 11 | [Trò chơi gõ phím](./4-typing-game/solution/README.md) | Xây dựng Trò chơi gõ phím | Tìm hiểu cách sử dụng sự kiện bàn phím để điều khiển logic của ứng dụng JavaScript của bạn | [Lập trình dựa trên sự kiện](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Tiện ích mở rộng trình duyệt xanh](./5-browser-extension/solution/README.md) | Làm việc với trình duyệt | Tìm hiểu cách trình duyệt hoạt động, lịch sử của chúng và cách tạo các yếu tố đầu tiên của tiện ích mở rộng trình duyệt | [Về trình duyệt](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Tiện ích mở rộng trình duyệt xanh](./5-browser-extension/solution/README.md) | Xây dựng biểu mẫu, gọi API và lưu trữ biến trong bộ nhớ cục bộ | Xây dựng các yếu tố JavaScript của tiện ích mở rộng trình duyệt của bạn để gọi API bằng các biến được lưu trữ trong bộ nhớ cục bộ | [API, Biểu mẫu và Bộ nhớ cục bộ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Tiện ích mở rộng trình duyệt xanh](./5-browser-extension/solution/README.md) | Quá trình nền trong trình duyệt, hiệu suất web | Sử dụng các quá trình nền của trình duyệt để quản lý biểu tượng của tiện ích mở rộng; tìm hiểu về hiệu suất web và một số tối ưu hóa để cải thiện | [Nhiệm vụ nền và Hiệu suất](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Trò chơi không gian](./6-space-game/solution/README.md) | Phát triển trò chơi nâng cao hơn với JavaScript | Tìm hiểu về Kế thừa bằng cách sử dụng cả Lớp và Thành phần và mô hình Pub/Sub, chuẩn bị cho việc xây dựng trò chơi | [Giới thiệu về Phát triển Trò chơi Nâng cao](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Trò chơi không gian](./6-space-game/solution/README.md) | Vẽ lên canvas | Tìm hiểu về API Canvas, được sử dụng để vẽ các yếu tố lên màn hình | [Vẽ lên Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Trò chơi không gian](./6-space-game/solution/README.md) | Di chuyển các yếu tố trên màn hình | Khám phá cách các yếu tố có thể chuyển động bằng cách sử dụng tọa độ cartesian và API Canvas | [Di chuyển các yếu tố](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Trò chơi không gian](./6-space-game/solution/README.md) | Phát hiện va chạm | Làm cho các yếu tố va chạm và phản ứng với nhau bằng cách sử dụng các phím nhấn và cung cấp chức năng làm mát để đảm bảo hiệu suất của trò chơi | [Phát hiện Va chạm](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Trò chơi không gian](./6-space-game/solution/README.md) | Ghi điểm | Thực hiện các phép tính toán học dựa trên trạng thái và hiệu suất của trò chơi | [Ghi điểm](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Trò chơi không gian](./6-space-game/solution/README.md) | Kết thúc và khởi động lại trò chơi | Tìm hiểu về việc kết thúc và khởi động lại trò chơi, bao gồm dọn dẹp tài nguyên và đặt lại giá trị biến | [Điều kiện Kết thúc](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Mẫu HTML và Định tuyến trong Ứng dụng Web | Tìm hiểu cách tạo khung kiến trúc của một trang web nhiều trang bằng cách sử dụng định tuyến và mẫu HTML | [Mẫu HTML và Định tuyến](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Xây dựng Biểu mẫu Đăng nhập và Đăng ký | Tìm hiểu về việc xây dựng biểu mẫu và xử lý các quy trình xác thực | [Biểu mẫu](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Phương pháp Lấy và Sử dụng Dữ liệu | Cách dữ liệu luân chuyển vào và ra khỏi ứng dụng của bạn, cách lấy, lưu trữ và xử lý dữ liệu | [Dữ liệu](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Khái niệm về Quản lý Trạng thái | Tìm hiểu cách ứng dụng của bạn duy trì trạng thái và cách quản lý nó bằng lập trình | [Quản lý Trạng thái](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Trình duyệt/VScode Code](../../8-code-editor) | Làm việc với VScode | Tìm hiểu cách sử dụng trình soạn thảo mã | [Sử dụng Trình soạn thảo Mã VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Trợ lý AI](./9-chat-project/README.md) | Làm việc với AI | Tìm hiểu cách xây dựng trợ lý AI của riêng bạn | [Dự án Trợ lý AI](./9-chat-project/README.md) | Chris |
## 🏫 Phương pháp giảng dạy
Chương trình học của chúng tôi được thiết kế với hai nguyên lý giảng dạy chính:
Chương trình học của chúng tôi được thiết kế với hai nguyên tắc sư phạm chính:
* học tập dựa trên dự án
* kiểm tra thường xuyên
* bài kiểm tra thường xuyên
Chương trình giảng dạy các nguyên lý cơ bản của JavaScript, HTML, và CSS, cũng như các công cụ và kỹ thuật mới nhất mà các nhà phát triển web hiện nay sử dụng. Học viên sẽ có cơ hội phát triển kinh nghiệm thực tế bằng cách xây dựng trò chơi gõ phím, terrarium ảo, tiện ích mở rộng trình duyệt thân thiện với môi trường, trò chơi kiểu space-invader, và ứng dụng ngân hàng cho doanh nghiệp. Đến cuối chuỗi bài học, học viên sẽ có được sự hiểu biết vững chắc về phát triển web.
Chương trình giảng dạy các nguyên tắc cơ bản của JavaScript, HTML và CSS, cũng như các công cụ và kỹ thuật mới nhất được các nhà phát triển web hiện nay sử dụng. Học viên sẽ có cơ hội phát triển kinh nghiệm thực tế bằng cách xây dựng một trò chơi gõ phím, terrarium ảo, tiện ích mở rộng trình duyệt thân thiện với môi trường, trò chơi kiểu không gian và ứng dụng ngân hàng cho doanh nghiệp. Đến cuối chuỗi bài học, học viên sẽ có được sự hiểu biết vững chắc về phát triển web.
> 🎓 Bạn có thể tham gia một vài bài học đầu tiên trong chương trình này dưới dạng [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) trên Microsoft Learn!
> 🎓 Bạn có thể tham gia một số bài học đầu tiên trong chương trình này dưới dạng [Lộ trình học](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) trên Microsoft Learn!
Bằng cách đảm bảo nội dung phù hợp với các dự án, quá trình học tập trở nên hấp dẫn hơn đối với học viên và khả năng ghi nhớ các khái niệm sẽ được tăng cường. Chúng tôi cũng đã viết một số bài học khởi đầu về cơ bản JavaScript để giới thiệu các khái niệm, kết hợp với video từ bộ sưu tập "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", một số tác giả của bộ video này đã đóng góp vào chương trình học.
Bằng cách đảm bảo rằng nội dung phù hợp với các dự án, quá trình học tập trở nên thú vị hơn cho học viên và việc ghi nhớ các khái niệm sẽ được tăng cường. Chúng tôi cũng đã viết một số bài học khởi đầu về các nguyên tắc cơ bản của JavaScript để giới thiệu các khái niệm, kết hợp với video từ bộ sưu tập "[Dành cho người mới bắt đầu: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", một số tác giả của bộ sưu tập này đã đóng góp vào chương trình học này.
Ngoài ra, một bài kiểm tra nhẹ nhàng trước lớp sẽ định hướng ý định của học viên đối với việc học một chủ đề, trong khi bài kiểm tra thứ hai sau lớp sẽ đảm bảo khả năng ghi nhớ lâu dài. Chương trình học này được thiết kế linh hoạt và thú vị, có thể học toàn bộ hoặc từng phần. Các dự án bắt đầu nhỏ và trở nên phức tạp hơn vào cuối chu kỳ 12 tuần.
Ngoài ra, một bài kiểm tra không áp lực trước lớp sẽ định hướng ý định của học viên đối với việc học một chủ đề, trong khi một bài kiểm tra thứ hai sau lớp đảm bảo việc ghi nhớ thêm. Chương trình học này được thiết kế linh hoạt và thú vị, có thể học toàn bộ hoặc từng phần. Các dự án bắt đầu từ nhỏ và trở nên phức tạp hơn vào cuối chu kỳ 12 tuần.
Mặc dù chúng tôi cố tình tránh giới thiệu các framework JavaScript để tập trung vào các kỹ năng cơ bản cần thiết như một nhà phát triển web trước khi áp dụng framework, một bước tiếp theo tốt sau khi hoàn thành chương trình học này sẽ là tìm hiểu về Node.js thông qua một bộ sưu tập video khác: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Mặc dù chúng tôi cố ý tránh giới thiệu các framework JavaScript để tập trung vào các kỹ năng cơ bản cần thiết như một nhà phát triển web trước khi áp dụng một framework, một bước tiếp theo tốt sau khi hoàn thành chương trình học này sẽ là tìm hiểu về Node.js thông qua một bộ sưu tập video khác: "[Dành cho người mới bắt đầu: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Ghé thăm [Quy tắc ứng xử](CODE_OF_CONDUCT.md) và hướng dẫn [Đóng góp](CONTRIBUTING.md) của chúng tôi. Chúng tôi hoan nghênh phản hồi mang tính xây dựng của bạn!
> Hãy ghé thăm [Quy tắc ứng xử](CODE_OF_CONDUCT.md) và [Hướng dẫn đóng góp](CONTRIBUTING.md) của chúng tôi. Chúng tôi hoan nghênh phản hồi mang tính xây dựng của bạn!
## 🧭 Truy cập ngoại tuyến
Bạn có thể chạy tài liệu này ngoại tuyến bằng cách sử dụng [Docsify](https://docsify.js.org/#/). Fork repo này, [cài đặt Docsify](https://docsify.js.org/#/quickstart) trên máy của bạn, sau đó trong thư mục gốc của repo này, gõ `docsify serve`. Trang web sẽ được phục vụ trên cổng 3000 trên localhost của bạn: `localhost:3000`.
Bạn có thể chạy tài liệu này ngoại tuyến bằng cách sử dụng [Docsify](https://docsify.js.org/#/). Fork repo này, [cài đặt Docsify](https://docsify.js.org/#/quickstart) trên máy của bạn, sau đó trong thư mục gốc của repo này, gõ `docsify serve`. Trang web sẽ được phục vụ trên cổng 3000 trên localhost của bạn: `localhost:3000`.
## 📘 PDF
Một file PDF của tất cả các bài học có thể được tìm thấy [tại đây](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Một tệp PDF của tất cả các bài học có thể được tìm thấy [tại đây](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Các khóa học khác
Nhóm của chúng tôi sản xuất các khóa học khác! Hãy xem:
### LangChain
[![LangChain4j cho người mới bắt đầu](https://img.shields.io/badge/LangChain4j%20cho%20người%20mới%20bắt%20đầu-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js cho người mới bắt đầu](https://img.shields.io/badge/LangChain.js%20cho%20người%20mới%20bắt%20đầu-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### 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 cho Người Mới Bắt Đầu](https://img.shields.io/badge/Edge%20AI%20cho%20Người%20Mới%20Bắt%20Đầu-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP cho Người Mới Bắt Đầu](https://img.shields.io/badge/MCP%20cho%20Người%20Mới%20Bắt%20Đầu-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents cho Người Mới Bắt Đầu](https://img.shields.io/badge/AI%20Agents%20cho%20Người%20Mới%20Bắt%20Đầu-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AZD cho Người Mới Bắt Đầu](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 cho Người Mới Bắt Đầu](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 cho Người Mới Bắt Đầu](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)
[![AI Agents cho Người Mới Bắt Đầu](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Chuỗi Generative AI
[![Generative AI cho Người Mới Bắt Đầu](https://img.shields.io/badge/Generative%20AI%20cho%20Người%20Mới%20Bắt%20Đầu-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Chuỗi AI Tạo Sinh
[![AI Tạo Sinh cho Người Mới Bắt Đầu](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Tạo Sinh (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![AI Tạo Sinh (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![AI Tạo Sinh (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Học Tập Cốt Lõi
[![ML cho Người Mới Bắt Đầu](https://img.shields.io/badge/ML%20cho%20Người%20Mới%20Bắt%20Đầu-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Khoa Học Dữ Liệu cho Người Mới Bắt Đầu](https://img.shields.io/badge/Khoa%20Học%20Dữ%20Liệu%20cho%20Người%20Mới%20Bắt%20Đầu-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI cho Người Mới Bắt Đầu](https://img.shields.io/badge/AI%20cho%20Người%20Mới%20Bắt%20Đầu-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![An Ninh Mạng cho Người Mới Bắt Đầu](https://img.shields.io/badge/An%20Ninh%20Mạng%20cho%20Người%20Mới%20Bắt%20Đầu-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Phát Triển Web cho Người Mới Bắt Đầu](https://img.shields.io/badge/Phát%20Triển%20Web%20cho%20Người%20Mới%20Bắt%20Đầu-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT cho Người Mới Bắt Đầu](https://img.shields.io/badge/IoT%20cho%20Người%20Mới%20Bắt%20Đầu-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![Phát Triển XR cho Người Mới Bắt Đầu](https://img.shields.io/badge/Phát%20Triển%20XR%20cho%20Người%20Mới%20Bắt%20Đầu-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[![ML cho Người Mới Bắt Đầu](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Khoa Học Dữ Liệu cho Người Mới Bắt Đầu](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI cho Người Mới Bắt Đầu](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![An Ninh Mạng cho Người Mới Bắt Đầu](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Phát Triển Web cho Người Mới Bắt Đầu](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT cho Người Mới Bắt Đầu](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![Phát Triển XR cho Người Mới Bắt Đầu](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Chuỗi Copilot
[![Copilot cho Lập Trình Cặp AI](https://img.shields.io/badge/Copilot%20cho%20Lập%20Trình%20Cặp%20AI-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot cho C#/.NET](https://img.shields.io/badge/Copilot%20cho%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Cuộc Phiêu Lưu Copilot](https://img.shields.io/badge/Cuộc%20Phiêu%20Lưu%20Copilot-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
[![Copilot cho Lập Trình Cặp AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot cho C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Cuộc Phiêu Lưu với Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Nhận Hỗ Trợ
Nếu bạn gặp khó khăn hoặc có câu hỏi về việc xây dựng ứng dụng AI, hãy tham gia cùng các học viên và nhà phát triển có kinh nghiệm trong các cuộc thảo luận về MCP. Đây là một cộng đồng hỗ trợ, nơi các câu hỏi được chào đón và kiến thức được chia sẻ tự do.
Nếu bạn gặp khó khăn hoặc có bất kỳ câu hỏi nào về việc xây dựng ứng dụng AI, hãy tham gia cùng các học viên và nhà phát triển có kinh nghiệm trong các cuộc thảo luận về MCP. Đây là một cộng đồng hỗ trợ, nơi mọi câu hỏi đều được chào đón và kiến thức được chia sẻ tự do.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Nếu bạn có phản hồi về sản phẩm hoặc gặp lỗi trong quá trình xây dựng, hãy truy cập:
[![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)
[![Diễn Đàn Nhà Phát Triển Microsoft Foundry](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)
## Giấy Phép

Loading…
Cancel
Save