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!
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!
Bergabunglah dengan Komunitas Discord Azure AI Foundry
Bergabunglah dengan Komunitas Discord Azure AI Foundry
**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)**
**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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Apakah Anda seorang pelajar?_
#### 🧑🎓 _Apakah Anda seorang pelajar?_
Kunjungi [**Halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana Anda akan menemukan sumber 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.
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 - Tantangan mode Agen GitHub Copilot baru untuk diselesaikan!
### 📣 Pengumuman - Tantangan mode Agen GitHub Copilot baru untuk diselesaikan!
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.
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 - _Proyek Baru untuk dibangun menggunakan Generative AI_
### 📣 Pengumuman - _Proyek Baru untuk Dibangun menggunakan Generative AI_
Proyek Asisten AI baru saja ditambahkan, lihat [proyek](./09-chat-project/README.md)
Proyek Asisten AI baru saja ditambahkan, cek [proyek](./09-chat-project/README.md)
### 📣 Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru saja dirilis
### 📣 Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru saja dirilis
@ -65,27 +65,25 @@ Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk
Setiap pelajaran mencakup tugas untuk diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk memandu Anda mempelajari topik seperti:
Setiap pelajaran mencakup tugas untuk diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk memandu Anda mempelajari topik seperti:
- Prompting dan rekayasa prompt
- Prompting dan rekayasa prompt
- Pembuatan aplikasi teks dan gambar
- Pembuatan aplikasi teks dan gambar
- Aplikasi pencarian
- Aplikasi pencarian
Kunjungi [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) untuk memulai!
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.
@ -93,26 +91,26 @@ Untuk melanjutkan pendidikan Anda, kami sangat merekomendasikan menjelajahi [Mic
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
#### Buat repositori 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.
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:
Ikuti langkah-langkah ini:
1. **Fork Repository**: Klik tombol "Fork" di sudut kanan atas halaman ini.
1. **Fork Repositori**: Klik tombol "Fork" di sudut kanan atas halaman ini.
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.
#### 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)
@ -124,7 +122,6 @@ Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstud
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:
> 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
> * [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
@ -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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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.
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.
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!
> 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`.
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,37 +206,43 @@ PDF dari semua pelajaran dapat ditemukan [di sini](https://microsoft.github.io/W
Tim kami juga memproduksi kursus lainnya! Lihat:
Tim kami juga memproduksi kursus lainnya! Lihat:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agen
### Azure / Edge / MCP / Agen
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Seri AI Generatif
### Seri AI Generatif
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Seri Copilot
### Seri Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
@ -259,5 +262,5 @@ Repositori ini dilisensikan di bawah lisensi MIT. Lihat file [LICENSE](../../LIC
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
**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.
Microsoft Cloud Advocatesによる12週間の包括的なコースで、ウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを、テラリウム、ブラウザ拡張機能、宇宙ゲームなどの実践的なプロジェクトを通じて学びます。クイズ、ディスカッション、実践課題に取り組みながら、スキルを向上させ、知識の定着を最適化しましょう。今日からコーディングの旅を始めましょう！
Microsoft Cloud Advocatesによる12週間の包括的なコースで、ウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを、テラリウム、ブラウザ拡張機能、宇宙ゲームなどの実践的なプロジェクトを通じて学びます。クイズ、ディスカッション、実践課題に取り組みながら、スキルを向上させ、知識を効果的に定着させましょう。今日からコーディングの旅を始めましょう！
@ -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アカウントに作成されます。
私たちのおすすめは、[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をダウンロードできます。
私たちのおすすめは、[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をダウンロードできます。
次に、[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
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Visual Studio Codeでフォルダを開きます。**File** > **Open Folder**をクリックし、クローンしたフォルダを選択します。
2. Visual Studio Codeでフォルダを開きます。**File** > **Open Folder**をクリックし、クローンしたフォルダを選択します。
> 推奨されるVisual Studio Code拡張機能:
> 推奨されるVisual Studio Code拡張機能:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code内でHTMLページをプレビューするため
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code内でHTMLページをプレビューするため
プロジェクトに合わせて内容を調整することで、学生にとってより魅力的なプロセスとなり、概念の定着が促進されます。また、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)"というビデオチュートリアルコレクションのビデオとペアリングしました。このコレクションの一部の著者は、このカリキュラムにも貢献しています。
JavaScriptフレームワークの導入を意図的に避け、フレームワークを採用する前にウェブ開発者として必要な基本スキルに集中していますが、このカリキュラムを完了した後の次のステップとして、Node.jsについて学ぶことをお勧めします。別のビデオコレクション: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"をご覧ください。
JavaScriptフレームワークの導入を意図的に避け、フレームワークを採用する前にウェブ開発者として必要な基本スキルに集中していますが、このカリキュラムを修了した後の次のステップとして、Node.jsについて学ぶことをお勧めします。別のビデオコレクション: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"をご覧ください。
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / エージェント
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
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!
**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)**
**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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Adakah anda seorang pelajar?_
#### 🧑🎓 _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!
### 📣 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)
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!
Jangan lepaskan kurikulum AI Generatif baru kami!
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk bermula!
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk bermula!
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
- Prompting dan kejuruteraan prompt
- Penjanaan aplikasi teks dan imej
- Penjanaan aplikasi teks dan imej
- Aplikasi carian
- Aplikasi carian
@ -81,28 +81,28 @@ Lawati [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) un
## 🌱 Bermula
## 🌱 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.
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
### 📋 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
#### 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.
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:
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.
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.
@ -116,7 +116,7 @@ Cadangan kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.
[CodeSpace](./images/createcodespace.png)
[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
```bash
git clone <your-repository-url>
git clone <your-repository-url>
@ -143,29 +143,29 @@ Cadangan kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.
- tugasan
- tugasan
- [kuiz selepas pelajaran](https://ff-quizzes.netlify.app/web/)
- [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
## 🗃️ 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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, memberi tumpuan kepada asas CSS termasuk menjadikan halaman responsif | [Pengenalan kepada CSS](./3-terrarium/2-intro-to-css/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, memberi tumpuan kepada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/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 memacu logik aplikasi JavaScript anda | [Pengaturcaraan Berasaskan Acara](./4-typing-game/typing-game/README.md) | Christopher |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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
* pembelajaran berasaskan projek
* kuiz yang kerap
* 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!
> 🎓 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!
> Lawati [Kod Etika](CODE_OF_CONDUCT.md) dan panduan [Menyumbang](CONTRIBUTING.md) kami. Kami mengalu-alukan maklum balas membina anda!
@ -208,8 +208,13 @@ PDF semua pelajaran boleh didapati [di sini](https://microsoft.github.io/Web-Dev
Pasukan kami menghasilkan kursus lain! Lihat:
Pasukan kami menghasilkan kursus lain! Lihat:
### Azure / Edge / MCP / Agen
### LangChain
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Ejen
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -243,7 +248,7 @@ Pasukan kami menghasilkan kursus lain! Lihat:
## 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.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### သင်ရိုးကို သင့်ကွန်ပျူတာတွင် 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) ဒေါင်းလုပ်လုပ်ပါ။
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
# Веб-розробка для початківців - навчальна програма
# Веб-розробка для початківців - Курс
Вивчайте основи веб-розробки за допомогою нашого 12-тижневого курсу від Microsoft Cloud Advocates. Кожен із 24 уроків охоплює JavaScript, CSS і HTML через практичні проєкти, такі як тераріуми, розширення для браузера та космічні ігри. Беріть участь у вікторинах, обговореннях і практичних завданнях. Покращуйте свої навички та закріплюйте знання завдяки ефективній проєктній методології. Почніть свою подорож у програмуванні вже сьогодні!
Вивчайте основи веб-розробки з нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен із 24 уроків охоплює JavaScript, CSS та HTML через практичні проєкти, такі як тераріуми, розширення для браузера та космічні ігри. Беріть участь у вікторинах, обговореннях і практичних завданнях. Покращуйте свої навички та закріплюйте знання завдяки нашій ефективній проєктно-орієнтованій методиці. Почніть свою подорож у програмуванні вже сьогодні!
Приєднуйтесь до спільноти Azure AI Foundry Discord
Приєднуйтесь до спільноти Azure AI Foundry уDiscord
**Якщо ви хочете додати додаткові переклади, список підтримуваних мов наведено [тут](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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Ви студент?_
#### 🧑🎓 _Ви студент?_
Відвідайте [**Сторінку для студентів**](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, він здатний не лише генерувати текст, але й створювати та редагувати файли, виконувати команди тощо.
Додано новий виклик, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це новий виклик для вас, який можна виконати за допомогою GitHub Copilot і режиму Agent. Якщо ви ще не використовували режим Agent, він здатний не лише генерувати текст, але й створювати та редагувати файли, виконувати команди тощо.
### 📣 Оголошення - _Новий проєкт для створення за допомогою генеративного AI_
### 📣 Оголошення - _Новий проєкт для створення за допомогою генеративного ШІ_
Додано новий проєкт AI Assistant, ознайомтеся з ним [проєкт](./09-chat-project/README.md)
Додано новий проєкт AI Assistant, ознайомтеся з ним [тут](./09-chat-project/README.md)
### 📣 Оголошення - _Нова навчальна програма_ з генеративного AI для JavaScript щойно випущена
### 📣 Оголошення - _Новий курс_ з генеративного ШІ для JavaScript
Не пропустіть нашу нову навчальну програму з генеративного 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), щоб розпочати!
Кожен урок включає завдання для виконання, перевірку знань і виклик, який допоможе вам освоїти такі теми, як:
Кожен урок включає завдання для виконання, перевірку знань і виклик, щоб допомогти вам вивчити такі теми, як:
- Створення запитів і інженерія запитів
- Створення запитів і їх оптимізація
- Генерація тексту та зображень для додатків
- Генерація тексту та зображень
- Додатки для пошуку
- Пошукові додатки
Відвідайте [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)**, для кожного уроку починайте з вікторини перед лекцією, читайте матеріал лекції, виконуйте різні завдання та перевіряйте своє розуміння за допомогою вікторини після лекції.
**[Учні](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для кожного уроку починайте з вікторини перед лекцією, читайте матеріал лекції, виконуйте різні завдання та перевіряйте свої знання за допомогою вікторини після лекції.
Щоб покращити ваш навчальний досвід, спілкуйтеся з однолітками, щоб працювати над проєктами разом! Обговорення заохочуються у нашому [форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), де наша команда модераторів буде доступна для відповіді на ваші запитання.
Щоб покращити свій досвід навчання, спілкуйтеся з однолітками для спільної роботи над проєктами! Обговорення заохочуються у нашому [форумі обговорень](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) для додаткових навчальних матеріалів.
Для подальшого навчання ми настійно рекомендуємо дослідити [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).
Цей курс має готове середовище для розробки! На початку ви можете вибрати запуск курсу в [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" у верхньому правому куті цієї сторінки.
1. **Форкніть репозиторій**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки.
У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code**і виберіть **Open with Codespaces**. Це створить новий Codespace для роботи.
У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code**і виберіть **Open with Codespaces**. Це створить новий Codespace для роботи.
#### Запуск навчальної програми локально на вашому комп'ютері
#### Запуск курсу локально на вашому комп'ютері
Щоб запустити цю навчальну програму локально на вашому комп'ютері, вам знадобиться текстовий редактор, браузер і інструмент командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](../../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)
@ -125,11 +122,10 @@ CO_OP_TRANSLATOR_METADATA:
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder**і вибравши папку, яку ви щойно клонували.
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder**і вибравши папку, яку ви щойно клонували.
> Рекомендовані розширення для Visual Studio Code:
> Рекомендовані розширення для Visual Studio Code:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для перегляду HTML-сторінок у 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) - допомагає писати код швидше
> * [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/)
- [тест після уроку](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`.
| 01 | Початок роботи | Вступ до програмування та інструментів розробника | Дізнайтеся основи більшості мов програмування та про програмне забезпечення, яке допомагає професійним розробникам виконувати свою роботу | [Вступ до мов програмування та інструментів розробника](./1-getting-started-lessons/1-intro-to-programming-languages/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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 12 | [Розширення для браузера Green](./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 |
| 13 | [Розширення для браузера Green](./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 |
| 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 |
| 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 |
| 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) | Переміщення елементів по екрану | Дізнайтеся, як елементи можуть набувати руху, використовуючи декартові координати та API Canvas | [Переміщення елементів](./6-space-game/3-moving-elements-around/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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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). Ми вітаємо ваші конструктивні відгуки!
> Відвідайте наші [Правила поведінки](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
## 📘 PDF
@ -207,14 +203,18 @@ PDF усіх уроків можна знайти [тут](https://microsoft.git
## 🎒 Інші курси
## 🎒 Інші курси
Наша команда створює інші курси! Ознайомтеся:
Наша команда створює й інші курси! Ознайомтеся:
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Агенти
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
@ -228,7 +228,7 @@ PDF усіх уроків можна знайти [тут](https://microsoft.git
### Основне навчання
### Основне навчання
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
@ -245,7 +245,7 @@ PDF усіх уроків можна знайти [тут](https://microsoft.git
## Отримання допомоги
## Отримання допомоги
Якщо ви застрягли або маєте питання щодо створення AI-додатків, приєднуйтесь до обговорень про MCP разом з іншими учнями та досвідченими розробниками. Це підтримуюча спільнота, де питання вітаються, а знання діляться вільно.
Якщо ви застрягли або маєте питання щодо створення AI-додатків, приєднуйтесь до обговорень про MCP з іншими учнями та досвідченими розробниками. Це підтримуюча спільнота, де питання вітаються, а знання діляться вільно.
@ -261,5 +261,5 @@ PDF усіх уроків можна знайти [тут](https://microsoft.git
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
<!-- 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). Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
# 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!
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)
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ữ
### 🌐 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:
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](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ô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_
### 📣 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
### 📣 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
**[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.
**[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) để có 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
### 📋 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).
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
#### 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 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.
Để 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:
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.
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.
@ -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ạ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)
[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>
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
> * [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
| 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 |
| 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ột mã nguồn | [Giới thiệu về GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 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 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 |
| 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 | 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 |
| 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 |
| 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 |
| 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 |
| 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 lý 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 |
| 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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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 | [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 |
| 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
## 🏫 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
* 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
## 🧭 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, và 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
## 📘 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
## 🎒 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:
Nhóm của chúng tôi sản xuất các khóa học khác! Hãy xem:
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Chuỗi Generative AI
### Chuỗi AI Tạo Sinh
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[-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
### Học Tập Cốt Lõi
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
---
### Chuỗi Copilot
### Chuỗi Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Nhận Hỗ Trợ
## 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.
[](https://aka.ms/foundry/forum)
leestott
9 months ago
committed by
GitHub