**Jika Anda ingin mendukung bahasa tambahan, daftar bahasa yang didukung tersedia [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _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. Ini adalah halaman 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 kami mengganti konten setiap bulan.
### 📣 Pengumuman - Tantangan mode Agen GitHub Copilot baru untuk diselesaikan!
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 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 studi tambahan.
Untuk melanjutkan pendidikan Anda, kami sangat merekomendasikan menjelajahi [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan belajar tambahan.
### 📋 Menyiapkan lingkungan Anda
@ -108,11 +108,11 @@ Di salinan repository Anda yang telah dibuat, klik tombol **Code** dan pilih **O
#### Menjalankan kurikulum secara lokal di komputer Anda
Untuk menjalankan kurikulum ini secara lokal di komputer Anda, Anda memerlukan editor teks, browser, dan alat baris perintah. Pelajaran pertama kami, [Pengenalan Bahasa Pemrograman dan Alat 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 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.
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 dapat melakukannya dengan mengklik tombol **Code** dan menyalin URL:
1. Clone repository Anda ke komputer Anda. Anda dapat melakukannya dengan mengklik tombol **Code** dan menyalin URL:
[CodeSpace](./images/createcodespace.png)
@ -143,32 +143,32 @@ Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstud
- tugas
- [kuis setelah pelajaran](https://ff-quizzes.netlify.app/web/)
> **Catatan tentang kuis**: Semua kuis terdapat di folder Quiz-app, total 48 kuis masing-masing terdiri dari tiga pertanyaan. Kuis tersedia [di sini](https://ff-quizzes.netlify.app/web/) dan aplikasi kuis dapat dijalankan secara lokal atau di-deploy ke Azure; ikuti instruksi di folder `quiz-app`.
> **Catatan tentang kuis**: Semua kuis terdapat di folder Quiz-app, total 48 kuis dengan masing-masing tiga pertanyaan. Kuis tersedia [di sini](https://ff-quizzes.netlify.app/web/) dan aplikasi kuis dapat dijalankan secara lokal atau di-deploy ke Azure; ikuti instruksi di folder `quiz-app`.
## 🗃️ Pelajaran
| | Nama Proyek | Konsep yang Diajarkan | Tujuan Pembelajaran | Pelajaran Terkait | Penulis |
| 01 | Memulai | Pengantar Pemrograman dan Alat yang Digunakan | Pelajari dasar-dasar di balik sebagian besar bahasa pemrograman dan perangkat lunak yang membantu pengembang profesional melakukan pekerjaannya | [Pengantar Bahasa Pemrograman dan Alat yang Digunakan](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| | Nama Proyek | Konsep yang Diajarkan | Tujuan Pembelajaran | Tautan Pelajaran | Penulis |
| 01 | Memulai | Pengantar Pemrograman dan Alat yang Digunakan | Pelajari dasar-dasar di balik sebagian besar bahasa pemrograman dan perangkat lunak yang membantu pengembang profesional bekerja | [Pengantar Bahasa Pemrograman dan Alat yang Digunakan](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Memulai | Dasar-dasar GitHub, termasuk bekerja dalam tim | Cara menggunakan GitHub dalam proyek Anda, cara berkolaborasi dengan orang lain pada basis kode | [Pengantar GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Memulai | Aksesibilitas | Pelajari dasar-dasar aksesibilitas web | [Dasar-dasar Aksesibilitas](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Dasar JS | Tipe Data JavaScript | Dasar-dasar tipe data JavaScript | [Tipe Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Dasar JS | Fungsi dan Metode | Pelajari tentang fungsi dan metode untuk mengelola alur logika aplikasi | [Fungsi dan Metode](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher |
| 06 | Dasar JS | Membuat Keputusan dengan JS | Pelajari cara membuat kondisi dalam kode Anda menggunakan metode pengambilan keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Dasar JS | Array dan Loop | Bekerja dengan data menggunakan array dan loop dalam JavaScript | [Array dan Loop](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktik | Bangun HTML untuk membuat terrarium online, fokus pada membangun tata letak | [Pengantar HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Praktik | Bangun CSS untuk menata terrarium online, fokus pada dasar-dasar CSS termasuk membuat halaman responsif | [Pengantar CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Bangun JavaScript untuk membuat terrarium berfungsi sebagai antarmuka drag/drop, fokus pada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bangun Game Mengetik | Pelajari cara menggunakan event keyboard untuk menggerakkan logika aplikasi JavaScript Anda | [Pemrograman Berbasis Event](./4-typing-game/typing-game/README.md) | Christopher |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktik | Bangun HTML untuk membuat terrarium online, dengan fokus pada membangun tata letak | [Pengantar HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Praktik | Bangun CSS untuk menata terrarium online, dengan fokus pada dasar-dasar CSS termasuk membuat halaman responsif | [Pengantar CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Bangun JavaScript untuk membuat terrarium berfungsi sebagai antarmuka seret/lepas, dengan fokus pada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Membangun Game Mengetik | Pelajari cara menggunakan peristiwa keyboard untuk menggerakkan logika aplikasi JavaScript Anda | [Pemrograman Berbasis Peristiwa](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bekerja dengan Browser | Pelajari cara kerja browser, sejarahnya, dan cara membuat elemen pertama dari ekstensi browser | [Tentang Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Membangun formulir, memanggil API, dan menyimpan variabel di penyimpanan lokal | Bangun elemen JavaScript dari ekstensi browser Anda untuk memanggil API menggunakan variabel yang disimpan di penyimpanan lokal | [API, Formulir, dan Penyimpanan Lokal](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Proses latar belakang di browser, kinerja web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang kinerja web dan beberapa optimasi untuk meningkatkan | [Tugas Latar Belakang dan Kinerja](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Pengembangan Game yang Lebih Lanjut dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan untuk membangun game | [Pengantar Pengembangan Game Lanjutan](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Space Game](./6-space-game/solution/README.md) | Pengembangan Game Lanjutan dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan untuk membangun game | [Pengantar Pengembangan Game Lanjutan](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Menggambar ke kanvas | Pelajari tentang API Kanvas, yang digunakan untuk menggambar elemen ke layar | [Menggambar ke Kanvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Menggerakkan elemen di layar | Temukan cara elemen dapat bergerak menggunakan koordinat kartesian dan API Kanvas | [Menggerakkan Elemen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Deteksi Tabrakan | Buat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan sediakan fungsi cooldown untuk memastikan kinerja game | [Deteksi Tabrakan](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Menjaga Skor | Lakukan perhitungan matematika berdasarkan status dan kinerja game | [Menjaga Skor](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Mengakhiri dan Memulai Ulang Game | Pelajari tentang mengakhiri dan memulai ulang game, termasuk membersihkan aset dan mengatur ulang nilai variabel | [Kondisi Akhir](./6-space-game/6-end-condition/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Memindahkan elemen di layar | Temukan cara elemen dapat bergerak menggunakan koordinat kartesian dan API Kanvas | [Memindahkan Elemen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Deteksi tabrakan | Buat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan sediakan fungsi cooldown untuk memastikan kinerja game | [Deteksi Tabrakan](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Menjaga skor | Lakukan perhitungan matematika berdasarkan status dan kinerja game | [Menjaga Skor](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Mengakhiri dan memulai ulang game | Pelajari tentang mengakhiri dan memulai ulang game, termasuk membersihkan aset dan mengatur ulang nilai variabel | [Kondisi Akhir](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Template HTML dan Rute dalam Aplikasi Web | Pelajari cara membuat kerangka arsitektur situs web multipage menggunakan routing dan template HTML | [Template HTML dan Rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Membangun Formulir Login dan Registrasi | Pelajari tentang membangun formulir dan menangani rutinitas validasi | [Formulir](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi Anda, cara mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
@ -184,18 +184,18 @@ Kurikulum kami dirancang dengan dua prinsip pedagogi utama:
Program ini mengajarkan dasar-dasar JavaScript, HTML, dan CSS, serta alat dan teknik terbaru yang digunakan oleh pengembang web saat ini. Siswa akan memiliki kesempatan untuk mengembangkan pengalaman langsung dengan membangun game mengetik, terrarium virtual, ekstensi browser ramah lingkungan, game bergaya space-invader, dan aplikasi perbankan untuk bisnis. Pada akhir seri, siswa akan memiliki pemahaman yang solid tentang pengembangan web.
> 🎓 Anda dapat mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
> 🎓 Anda dapat mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai [Jalur Belajar](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 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.
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.
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 diikuti 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: "[Beginner Series to: 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: "[Seri Pemula: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Kunjungi [Kode Etik](CODE_OF_CONDUCT.md) dan panduan [Kontribusi](CONTRIBUTING.md) kami. Kami menyambut umpan balik konstruktif Anda!
> Kunjungi [Kode Etik](CODE_OF_CONDUCT.md) dan pedoman [Kontribusi](CONTRIBUTING.md) kami. Kami menyambut umpan balik konstruktif Anda!
## 🧭 Akses Offline
## 🧭 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`.
@ -206,56 +206,58 @@ PDF dari semua pelajaran dapat ditemukan [di sini](https://microsoft.github.io/W
## 🎒 Kursus Lainnya
Tim kami juga membuat kursus lainnya! Lihat:
Tim kami juga memproduksi kursus lainnya! Lihat:
### 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/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Agen
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### 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/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)
### Pembelajaran Inti
[](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)
---
### Seri Copilot
[](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://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)
Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI, bergabunglah dengan:
Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI, bergabunglah dengan sesama pelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung di mana pertanyaan diterima dan pengetahuan dibagikan secara bebas.
[](https://aka.ms/foundry/discord)
Jika Anda memiliki masukan produk atau menemukan kesalahan saat membangun, kunjungi:
Jika Anda memiliki masukan produk atau menemukan kesalahan saat membangun, kunjungi:
[](https://aka.ms/foundry/forum)
Repositori ini dilisensikan di bawah lisensi MIT. Lihat file [LICENSE](../../LICENSE) untuk informasi lebih lanjut.
Repositori ini dilisensikan di bawah lisensi MIT. Lihat file [LICENSE](../../LICENSE) untuk informasi lebih lanjut.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini.
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.
Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを使った実践的なプロジェクト（テラリウム、ブラウザ拡張機能、宇宙ゲームなど）を通じて学びます。クイズ、ディスカッション、実践課題を通じてスキルを向上させ、プロジェクトベースの効果的な学習方法で知識を深めましょう。今すぐコーディングの旅を始めましょう！
Microsoft Cloud Advocatesによる12週間の包括的なコースで、ウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを、テラリウム、ブラウザ拡張機能、宇宙ゲームなどの実践的なプロジェクトを通じて学びます。クイズ、ディスカッション、実践課題に取り組みながら、スキルを向上させ、知識の定着を最適化しましょう。今日からコーディングの旅を始めましょう！
Azure AI Foundry Discordコミュニティに参加しましょう
[](https://discord.com/invite/ByRwuEEgH4)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _学生の皆さんへ_
@ -50,51 +50,51 @@ 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
git clone <your-repository-url>
```
2. Visual Studio Codeでフォルダを開きます。**File** > **Open Folder**をクリックし、クローンしたフォルダを選択してください。
2. Visual Studio Codeでフォルダを開きます。**File** > **Open Folder**をクリックし、クローンしたフォルダを選択します。
> 推奨されるVisual Studio Code拡張機能:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code内でHTMLページをプレビューするためのツール
プロジェクトに合わせて内容を調整することで、学生にとってより魅力的なプロセスとなり、概念の定着が促進されます。また、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/foundry/discord)
[](https://aka.ms/foundry/forum)
Pelajari asas pembangunan web dengan kursus komprehensif 12 minggu kami 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 pengekalan pengetahuan dengan pedagogi berasaskan projek kami yang berkesan. Mulakan perjalanan pengkodan anda hari ini!
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!
Sertai Komuniti Discord Azure AI Foundry
[](https://discord.com/invite/ByRwuEEgH4)
**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)**
@ -46,32 +46,32 @@ Ikuti langkah-langkah ini untuk mula menggunakan sumber ini:
#### 🧑🎓 _Adakah anda seorang pelajar?_
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 dikemas kini setiap bulan.
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.
### 📣 Pengumuman - Cabaran mod Agen GitHub Copilot baharu untuk diselesaikan!
### 📣 Pengumuman - Cabaran mod Agen GitHub Copilot baru untuk diselesaikan!
Cabaran baharu ditambah, cari "Cabaran Agen GitHub Copilot 🚀" dalam kebanyakan bab. Ini adalah cabaran baharu untuk anda selesaikan menggunakan GitHub Copilot dan mod Agen. Jika anda belum pernah menggunakan mod Agen sebelum ini, ia mampu bukan sahaja menjana teks tetapi juga mencipta dan mengedit fail, menjalankan arahan dan banyak lagi.
Cabaran baru ditambah, cari "Cabaran Agen GitHub Copilot 🚀" dalam kebanyakan bab. Ini adalah cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan mod Agen. Jika anda belum pernah menggunakan mod Agen sebelum ini, ia mampu bukan sahaja menjana teks tetapi juga mencipta dan mengedit fail, menjalankan arahan dan banyak lagi.
### 📣 Pengumuman - _Projek Baharu untuk dibina menggunakan AI Generatif_
### 📣 Pengumuman - _Projek Baru untuk dibina menggunakan AI Generatif_
Projek Pembantu AI baharu 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 Baharu_ mengenai AI Generatif untuk JavaScript baru sahaja dilancarkan
### 📣 Pengumuman - _Kurikulum Baru_ mengenai AI Generatif untuk JavaScript baru sahaja dikeluarkan
Jangan lepaskan kurikulum AI Generatif baharu kami!
Jangan lepaskan kurikulum AI Generatif baru kami!
Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk bermula!
Setiap pelajaran termasuk tugasan untuk diselesaikan, semakan pengetahuan dan cabaran untuk membimbing anda mempelajari topik seperti:
- Pemintaan dan kejuruteraan pemintaan
Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda mempelajari topik seperti:
- Prompting dan kejuruteraan prompt
- Penjanaan aplikasi teks dan imej
- Aplikasi carian
@ -79,11 +79,11 @@ Lawati [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) un
## 🌱 Memulakan
## 🌱 Bermula
> **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)!
> **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)!
**[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.
**[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.
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.
@ -91,18 +91,18 @@ Untuk melanjutkan pendidikan anda, kami sangat mengesyorkan meneroka [Microsoft
### 📋 Menyediakan persekitaran anda
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).
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).
#### 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 baharu 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:
1. **Fork Repositori**: Klik pada butang "Fork" di sudut kanan atas halaman ini.
1. **Fork Repositori**: Klik 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 baharu untuk anda bekerja.
Dalam salinan repositori ini yang anda cipta, klik butang **Code** dan pilih **Open with Codespaces**. Ini akan mencipta Codespace baru untuk anda bekerja.
@ -116,7 +116,7 @@ Cadangan kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.
[CodeSpace](./images/createcodespace.png)
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan arahan berikut, gantikan `<your-repository-url>` dengan URL yang baru anda salin:
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan arahan berikut, menggantikan `<your-repository-url>` dengan URL yang baru anda salin:
```bash
git clone <your-repository-url>
@ -125,18 +125,18 @@ Cadangan kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.
2. Buka folder dalam Visual Studio Code. Anda boleh melakukannya dengan mengklik **File** > **Open Folder** dan memilih folder yang baru anda clone.
> Sambungan Visual Studio Code yang disyorkan:
> Sambungan Visual Studio Code yang disyorkan:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk melihat pratonton halaman HTML dalam Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk pratonton halaman HTML dalam Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - untuk membantu anda menulis kod dengan lebih pantas
## 📂 Setiap pelajaran termasuk:
## 📂 Setiap pelajaran merangkumi:
- sketchnote pilihan
- video tambahan pilihan
- kuiz pemanasan sebelum pelajaran
- pelajaran bertulis
- untuk pelajaran berasaskan projek, panduan langkah demi langkah untuk membina projek
- untuk pelajaran berasaskan projek, panduan langkah demi langkah tentang cara membina projek
- semakan pengetahuan
- cabaran
- bacaan tambahan
@ -147,30 +147,30 @@ Cadangan kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.
## 🗃️ Pelajaran
| | Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Berkaitan | Penulis |
| 01 | Memulakan | 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 GitHub, termasuk bekerja dengan pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain pada pangkalan kod | [Pengenalan kepada GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Memulakan | Kebolehcapaian | Belajar asas kebolehcapaian web | [Asas Kebolehcapaian](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| | Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Terpaut | Penulis |
| 01 | Memulakan Asas | Pengenalan kepada Pengaturcaraan dan Alat yang Digunakan | Belajar asas di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan kerja mereka | [Pengenalan kepada Bahasa Pengaturcaraan dan Alat yang Digunakan](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Memulakan Asas | Asas GitHub, termasuk bekerja dengan pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain dalam pangkalan kod | [Pengenalan kepada GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Memulakan Asas | Kebolehcapaian | Belajar asas kebolehcapaian web | [Asas Kebolehcapaian](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Asas JS | Jenis Data JavaScript | Asas jenis data JavaScript | [Jenis Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Asas JS | Fungsi dan Kaedah | Belajar tentang fungsi dan kaedah untuk mengurus aliran logik aplikasi | [Fungsi dan Kaedah](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher |
| 06 | Asas JS | Membuat Keputusan dengan JS | Belajar cara mencipta syarat dalam kod anda menggunakan kaedah membuat keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Asas JS | Array dan Gelung | Bekerja dengan data menggunakan array dan gelung dalam JavaScript | [Array dan Gelung](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Amalan | Bina HTML untuk mencipta terrarium dalam talian, memberi tumpuan kepada membina susun atur | [Pengenalan kepada HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Amalan | Bina CSS untuk menggayakan terrarium dalam talian, memberi tumpuan kepada asas CSS termasuk menjadikan halaman responsif | [Pengenalan kepada CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Bina JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/lepas, memberi tumpuan kepada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Permainan Menaip](./4-typing-game/solution/README.md) | Bina Permainan Menaip | Belajar cara menggunakan acara papan kekunci untuk memacu logik aplikasi JavaScript anda | [Pengaturcaraan Berasaskan Acara](./4-typing-game/typing-game/README.md) | Christopher |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktik | Membina HTML untuk mencipta terrarium dalam talian, memberi tumpuan kepada membina susun atur | [Pengenalan kepada HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Praktik | Membina CSS untuk menggayakan terrarium dalam talian, memberi tumpuan kepada asas CSS termasuk menjadikan halaman responsif | [Pengenalan kepada CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Membina JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/lepas, memberi tumpuan kepada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Permainan Menaip](./4-typing-game/solution/README.md) | Membina Permainan Menaip | Belajar cara menggunakan acara papan kekunci untuk memacu logik aplikasi JavaScript anda | [Pengaturcaraan Berasaskan Acara](./4-typing-game/typing-game/README.md) | Christopher |
| 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 | Bina 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 | Gunakan 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 Lanjut 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 pada kanvas | Belajar tentang API Kanvas, digunakan untuk melukis elemen pada skrin | [Melukis pada Kanvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menggerakkan elemen di sekitar skrin | Ketahui 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 | Buat elemen bertembung dan bertindak balas antara satu sama lain menggunakan penekanan kekunci dan sediakan fungsi cooldown untuk memastikan prestasi permainan | [Pengesanan Perlanggaran](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menjaga skor | Lakukan pengiraan matematik berdasarkan status dan prestasi permainan | [Menjaga Skor](./6-space-game/5-keeping-score/README.md) | Chris |
| 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 |
| 15 | [Permainan Angkasa](./6-space-game/solution/README.md) | Pembangunan Permainan yang Lebih Lanjutan dengan JavaScript | Belajar tentang Pewarisan menggunakan kedua-dua Kelas dan Komposisi serta corak Pub/Sub, sebagai persediaan untuk membina permainan | [Pengenalan kepada Pembangunan Permainan Lanjutan](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Permainan Angkasa](./6-space-game/solution/README.md) | Melukis ke kanvas | Belajar tentang API Kanvas, digunakan untuk melukis elemen ke skrin | [Melukis ke Kanvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menggerakkan elemen di sekitar skrin | Mengetahui cara elemen boleh memperoleh gerakan menggunakan koordinat Cartesian dan API Kanvas | [Menggerakkan Elemen di Sekitar](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Permainan Angkasa](./6-space-game/solution/README.md) | Pengesanan perlanggaran | Membuat elemen bertembung dan bertindak balas antara satu sama lain menggunakan penekanan kekunci dan menyediakan fungsi cooldown untuk memastikan prestasi permainan | [Pengesanan Perlanggaran](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menyimpan skor | Melakukan pengiraan matematik berdasarkan status dan prestasi permainan | [Menyimpan Skor](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menamatkan dan memulakan semula permainan | Belajar tentang menamatkan dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pembolehubah | [Keadaan Tamat](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Templat HTML dan Laluan dalam Aplikasi Web | Belajar cara mencipta rangka seni bina laman web berbilang halaman menggunakan laluan dan templat HTML | [Templat HTML dan Laluan](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Bina Borang Log Masuk dan Pendaftaran | Belajar tentang membina borang dan mengendalikan rutin pengesahan | [Borang](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Membina Borang Log Masuk dan Pendaftaran | Belajar tentang membina borang dan mengendalikan rutin pengesahan | [Borang](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Kaedah Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi anda, cara mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Konsep Pengurusan Keadaan | Belajar cara aplikasi anda mengekalkan keadaan dan cara menguruskannya secara programatik | [Pengurusan Keadaan](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Kod Pelayar/VScode](../../8-code-editor) | Bekerja dengan VScode | Belajar cara menggunakan editor kod| [Gunakan Editor Kod VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
@ -182,15 +182,15 @@ Kurikulum kami direka dengan dua prinsip pedagogi utama:
* pembelajaran berasaskan projek
* kuiz yang kerap
Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web masa kini. Pelajar akan berpeluang untuk mendapatkan pengalaman langsung 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 penceroboh angkasa, dan aplikasi perbankan untuk perniagaan. Menjelang akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh tentang pembangunan web.
> 🎓 Anda boleh mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
Dengan memastikan kandungan selaras dengan projek, proses pembelajaran menjadi lebih menarik untuk pelajar dan pengekalan konsep akan dipertingkatkan. Kami juga menulis beberapa pelajaran permulaan dalam asas JavaScript untuk memperkenalkan konsep, digabungkan dengan video daripada koleksi tutorial video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya menyumbang kepada kurikulum ini.
Selain itu, kuiz dengan risiko rendah sebelum kelas menetapkan niat pelajar untuk mempelajari topik, manakala kuiz kedua selepas kelas memastikan pengekalan yang lebih lanjut. Kurikulum ini direka bentuk 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 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.
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 mempelajari 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 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)".
> Lawati [Kod Etika](CODE_OF_CONDUCT.md) dan panduan [Menyumbang](CONTRIBUTING.md) kami. Kami mengalu-alukan maklum balas membina anda!
@ -208,7 +208,7 @@ PDF semua pelajaran boleh didapati [di sini](https://microsoft.github.io/Web-Dev
Pasukan kami menghasilkan kursus lain! Lihat:
### Azure / Edge / MCP / Ejen
### Azure / Edge / MCP / Agen
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -239,16 +239,17 @@ Pasukan kami menghasilkan kursus lain! Lihat:
[](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)
Jika anda menghadapi masalah atau mempunyai soalan tentang membina aplikasi AI, sertai:
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.
[](https://aka.ms/foundry/discord)
Jika anda mempunyai maklum balas produk atau menghadapi ralat semasa membina, lawati:
[](https://aka.ms/foundry/forum)
@ -256,5 +257,7 @@ Repositori ini dilesenkan di bawah lesen MIT. Lihat fail [LICENSE](../../LICENSE
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat yang kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
[](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 နှင့် 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 အဖြစ် အသုံးပြုရန်ဖြစ်ပြီး၊ ၎င်းတွင် [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 အဖြစ် အသုံးပြုရန်ဖြစ်ပြီး၊ ၎င်းတွင် 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 လုပ်နိုင်ပါသည်။
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript ဖြင့် အဆင့်မြင့် Game Development | Game တစ်ခုတည်ဆောက်ရန် Class နှင့် Composition အသုံးပြု၍ Inheritance အကြောင်း၊ Pub/Sub Pattern အကြောင်း သင်ယူပါ | [အဆင့်မြင့် Game Development မိတ်ဆက်](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Canvas တွင် ရေးဆွဲခြင်း | Screen တွင် Element များရေးဆွဲရန် အသုံးပြုသော Canvas API အကြောင်း သင်ယူပါ | [Canvas တွင် ရေးဆွဲခြင်း](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Screen ပေါ်တွင် Element များရွှေ့ခြင်း | Cartesian Coordinates နှင့် Canvas API အသုံးပြု၍ Element များကို Motion ရရှိစေခြင်းကို ရှာဖွေပါ | [Element များရွှေ့ခြင်း](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Collision Detection | Element များကို တိုက်မိစေပြီး Keypresses အသုံးပြု၍ တုံ့ပြန်မှုများပေးပါ၊ Game ၏ Performance အတွက် Cooldown Function တစ်ခု ပေးပါ | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | အမှတ်တွက်ခြင်း | Game ၏ Status နှင့် Performance အပေါ် အခြေခံ၍ Math Calculations များ ဆောင်ရွက်ပါ | [အမှတ်တွက်ခြင်း](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Game ကို အဆုံးသတ်ခြင်းနှင့် ပြန်စတင်ခြင်း | Game ကို အဆုံးသတ်ခြင်းနှင့် ပြန်စတင်ခြင်းအကြောင်း၊ Asset များကို ရှင်းလင်းခြင်းနှင့် Variable Values များကို ပြန်လည် Reset လုပ်ခြင်းကို သင်ယူပါ | [အဆုံးသတ်အခြေအနေ](./6-space-game/6-end-condition/README.md) | Chris |
[](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://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://aka.ms/foundry/discord)
[](https://aka.ms/foundry/forum)
# Веб-розробка для початківців - навчальна програма
Вивчайте основи веб-розробки за допомогою нашого 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://discord.com/invite/ByRwuEEgH4)
**Якщо ви хочете додати додаткові переклади, список підтримуваних мов знаходиться [тут](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)
#### 🧑🎓 _Ви студент?_
@ -50,29 +50,29 @@ CO_OP_TRANSLATOR_METADATA:
### 📣 Оголошення - Нові завдання з режимом 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 для JavaScript
### 📣 Оголошення - _Нова навчальна програма_ з генеративного AI для 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), щоб розпочати!
@ -83,7 +83,7 @@ CO_OP_TRANSLATOR_METADATA:
> **Вчителі**, ми [додали кілька пропозицій](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), де наша команда модераторів буде доступна для відповіді на ваші запитання.
@ -91,55 +91,56 @@ CO_OP_TRANSLATOR_METADATA:
### 📋 Налаштування вашого середовища
Ця навчальна програма має готове до використання середовище розробки! На початку ви можете вибрати запуск навчальної програми у [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 з копією навчальної програми.
Виконайте наступні кроки:
Дотримуйтесь цих кроків:
1. **Форкніть репозиторій**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки.
У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code**та виберіть **Open with Codespaces**. Це створить новий Codespace для роботи.
У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code**і виберіть **Open with Codespaces**. Це створить новий Codespace для роботи.
#### Запуск навчальної програми локально на вашому комп'ютері
Щоб запустити цю навчальну програму локально на вашому комп'ютері, вам знадобиться текстовий редактор, браузер та інструмент командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), проведе вас через різні варіанти кожного з цих інструментів, щоб ви могли вибрати те, що найкраще підходить для вас.
Щоб запустити цю навчальну програму локально на вашому комп'ютері, вам знадобиться текстовий редактор, браузер і інструмент командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), проведе вас через різні варіанти кожного з цих інструментів, щоб ви могли вибрати те, що найкраще підходить для вас.
Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як ваш редактор, який також має вбудований [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Ви можете завантажити Visual Studio Code [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ми рекомендуємо використовувати [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)
Потім відкрийте [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) у [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) та виконайте наступну команду, замінивши `<your-repository-url>` на URL, який ви щойно скопіювали:
Потім відкрийте [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) у [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) і виконайте наступну команду, замінивши `<your-repository-url>` на URL, який ви щойно скопіювали:
```bash
git clone <your-repository-url>
```
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder**та вибравши папку, яку ви щойно клонували.
2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder**і вибравши папку, яку ви щойно клонували.
> Рекомендовані розширення для Visual Studio Code:
> Рекомендовані розширення для 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) - допомагає писати код швидше
## 📂 Кожен урок включає:
- необов'язкову скетчноту
- необов'язковий скетчноут
- необов'язкове додаткове відео
- розігрівочний тест перед уроком
- письмовий матеріал уроку
- розігрівний тест перед уроком
- письмовий урок
- для уроків, заснованих на проєктах, покрокові інструкції щодо створення проєкту
- перевірку знань
- перевірка знань
- завдання
- додаткові матеріали для читання
- додаткове читання
- домашнє завдання
- [тест після уроку](https://ff-quizzes.netlify.app/web/)
@ -149,31 +150,31 @@ CO_OP_TRANSLATOR_METADATA:
| | Назва проєкту | Вивчені концепти | Навчальні цілі | Посилання на урок | Автор |
| 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 |
| 03 | Початок роботи | Доступність | Дізнайтеся основи веб-доступності | [Основи доступності](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основи JS | Типи даних у JavaScript | Основи типів даних у JavaScript | [Типи даних](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основи JS | Функції та методи | Дізнайтеся про функції та методи для управління логікою додатка | [Функції та методи](./2-js-basics/2-functions-methods/README.md) | Jasmine і Christopher |
| 06 | Основи JS | Прийняття рішень у JS | Дізнайтеся, як створювати умови у вашому коді за допомогою методів прийняття рішень | [Прийняття рішень](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основи JS | Масиви та цикли | Робота з даними за допомогою масивів та циклів у JavaScript | [Масиви та цикли](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | Основи JS | Масиви та цикли | Робота з даними за допомогою масивів і циклів у JavaScript | [Масиви та цикли](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Тераріум](./3-terrarium/solution/README.md) | HTML на практиці | Створіть HTML для онлайн-тераріуму, зосереджуючись на створенні макета | [Вступ до HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Тераріум](./3-terrarium/solution/README.md) | CSS на практиці | Створіть CSS для стилізації онлайн-тераріуму, зосереджуючись на основах CSS, включаючи адаптивність сторінки | [Вступ до CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Тераріум](./3-terrarium/solution/README.md) | Замикання JavaScript, маніпуляція DOM | Створіть JavaScript для функціонування тераріуму як інтерфейсу перетягування, зосереджуючись на замиканнях та маніпуляції DOM | [Замикання JavaScript, маніпуляція DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Гра на друкування](./4-typing-game/solution/README.md) | Створення гри на друкування | Дізнайтеся, як використовувати події клавіатури для управління логікою вашого JavaScript-додатка | [Програмування, кероване подіями](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Зелений розширення для браузера](./5-browser-extension/solution/README.md) | Робота з браузерами | Дізнайтеся, як працюють браузери, їхню історію та як створити перші елементи розширення для браузера | [Про браузери](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 10 | [Тераріум](./3-terrarium/solution/README.md) | Замикання уJavaScript, маніпуляція DOM | Створіть JavaScript для функціонування тераріуму як інтерфейсу перетягування, зосереджуючись на замиканнях і маніпуляції DOM | [Замиканняу JavaScript, маніпуляція DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Гра на друкування](./4-typing-game/solution/README.md) | Створення гри на друкування | Дізнайтеся, як використовувати події клавіатури для управління логікою вашого JavaScript-додатка | [Програмування на основі подій](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Зелений розширення для браузера](./5-browser-extension/solution/README.md) | Робота з браузерами | Дізнайтеся, як працюють браузери, їх історію та як створити перші елементи розширення для браузера | [Про браузери](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Зелений розширення для браузера](./5-browser-extension/solution/README.md) | Створення форми, виклик API та збереження змінних у локальному сховищі | Створіть елементи JavaScript вашого розширення для браузера, щоб викликати API, використовуючи змінні, збережені в локальному сховищі | [API, форми та локальне сховище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Зелений розширення для браузера](./5-browser-extension/solution/README.md) | Фонові процеси в браузері, продуктивність вебу | Використовуйте фонові процеси браузера для управління іконкою розширення; дізнайтеся про продуктивність вебу та деякі оптимізації | [Фонові завдання та продуктивність](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Космічна гра](./6-space-game/solution/README.md) | Більш просунута розробка ігор з JavaScript | Дізнайтеся про наслідування, використовуючи як класи, так і композицію, а також про шаблон Pub/Sub, готуючись до створення гри | [Вступ до просунутої розробки ігор](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Космічна гра](./6-space-game/solution/README.md) | Малювання на canvas | Дізнайтеся про API Canvas, який використовується для малювання елементів на екрані | [Малювання на canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Космічна гра](./6-space-game/solution/README.md) | Переміщення елементів по екрану | Дізнайтеся, як елементи можуть набувати руху, використовуючи декартові координати та API Canvas | [Переміщення елементів](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Космічна гра](./6-space-game/solution/README.md) | Виявлення зіткнень | Зробіть так, щоб елементи зіткнулися та реагували один на одного за допомогою натискань клавіш, забезпечте функцію охолодження для продуктивності гри | [Виявлення зіткнень](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Космічна гра](./6-space-game/solution/README.md) | Виявлення зіткнень | Зробіть так, щоб елементи зіткнулися та реагували один на одного за допомогою натискань клавіш, а також забезпечте функцію охолодження для продуктивності гри | [Виявлення зіткнень](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Космічна гра](./6-space-game/solution/README.md) | Підрахунок очок | Виконуйте математичні обчислення на основі статусу гри та продуктивності | [Підрахунок очок](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Космічна гра](./6-space-game/solution/README.md) | Завершення та перезапуск гри | Дізнайтеся про завершення та перезапуск гри, включаючи очищення ресурсів та скидання значень змінних | [Умови завершення](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банківський додаток](./7-bank-project/solution/README.md) | HTML-шаблони та маршрути у веб-додатку | Дізнайтеся, як створити структуру архітектури багатосторінкового веб-сайту, використовуючи маршрути та HTML-шаблони | [HTML-шаблони та маршрути](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Банківський додаток](./7-bank-project/solution/README.md) | HTML-шаблони та маршрути у веб-додатку | Дізнайтеся, як створити структуру архітектури багатосторінкового вебсайту, використовуючи маршрути та HTML-шаблони | [HTML-шаблони та маршрути](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банківський додаток](./7-bank-project/solution/README.md) | Створення форми входу та реєстрації | Дізнайтеся про створення форм та обробку процедур перевірки | [Форми](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банківський додаток](./7-bank-project/solution/README.md) | Методи отримання та використання даних | Як дані надходять у ваш додаток, як їх отримувати, зберігати та видаляти | [Дані](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банківський додаток](./7-bank-project/solution/README.md) | Концепти управління станом | Дізнайтеся, як ваш додаток зберігає стан і як ним управляти програмно | [Управління станом](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Браузер/Редактор коду VScode](../../8-code-editor) | Робота з VScode | Дізнайтеся, як використовувати редактор коду | [Використання редактора коду VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Браузер/VScode Code](../../8-code-editor) | Робота з VScode | Дізнайтеся, як використовувати редактор коду | [Використання редактора коду VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Асистенти](./9-chat-project/README.md) | Робота з AI | Дізнайтеся, як створити власного AI асистента | [Проєкт AI Асистент](./9-chat-project/README.md) | Chris |
## 🏫 Педагогіка
@ -182,22 +183,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!
Забезпечуючи відповідність контенту проєктам, процес стає більш захоплюючим для студентів, а засвоєння концептів буде покращено. Ми також написали кілька вступних уроків з основ 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)".
> Відвідайте наші [Правила поведінки](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
@ -208,6 +209,7 @@ PDF усіх уроків можна знайти [тут](https://microsoft.git
Наша команда створює інші курси! Ознайомтеся:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### 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)
@ -239,16 +241,17 @@ PDF усіх уроків можна знайти [тут](https://microsoft.git
[](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/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Отримання допомоги
Якщо ви застрягли або маєте питання щодо створення AI-додатків, приєднуйтесь:
Якщо ви застрягли або маєте питання щодо створення AI-додатків, приєднуйтесь до обговорень про MCP разом з іншими учнями та досвідченими розробниками. Це підтримуюча спільнота, де питання вітаються, а знання діляться вільно.
[](https://aka.ms/foundry/discord)
Якщо у вас є відгуки про продукт або виникають помилки під час створення, відвідайте:
[](https://aka.ms/foundry/forum)
@ -256,5 +259,7 @@ PDF усіх уроків можна знайти [тут](https://microsoft.git
---
<!-- 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/issues/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[](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 nguyên tắc cơ bản về phát triển web với khóa học toàn diện kéo dài 12 tuần của Microsoft Cloud Advocates. Mỗi bài học trong số 24 bài học sẽ đi sâu vào JavaScript, CSS và HTML thông qua các dự án thực hành như 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 tập dựa trên dự án hiệu quả. 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 với phương pháp học dựa trên dự án hiệu quả của chúng tôi. Bắt đầu hành trình lập trình của bạn ngay hôm nay!
Tham gia Cộng đồng Discord Azure AI Foundry
Tham gia cộng đồng Azure AI Foundry Discord
[](https://discord.com/invite/ByRwuEEgH4)
**Nếu bạn muốn có thêm các ngôn ngữ dịch, các ngôn ngữ được hỗ trợ được liệt kê [ở đây](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Nếu bạn muốn có thêm các ngôn ngữ dịch, danh sách các ngôn ngữ được hỗ trợ có [tại đây](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)
#### 🧑🎓 _Bạn là 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, gói dành cho sinh viên và thậm chí 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 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.
### 📣 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 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 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ô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 vào, 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 bỏ lỡ chương trình học mới về AI Tạo sinh của chúng tôi!
Đừng bỏ lỡ chương trình học AI Tạo sinh mới của chúng tôi!
Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) để bắt đầu!
Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) để bắt đầu!
Mỗi bài học bao gồm một bài tập để hoàn thành, kiểm tra kiến thức và một thử thách để hướng dẫn bạn học các chủ đề như:
- Tạo lời nhắc và kỹ thuật tạo lời nhắc
- Tạo ứng dụng văn bản và hình ảnh
- Ứng dụng tìm kiếm
Mỗi bài học bao gồm một bài tập để hoàn thành, một bài kiểm tra kiến thức và một thử thách để hướng dẫn bạn học các chủ đề như:
- Tạo prompt và kỹ thuật tạo prompt
- Tạo ứng dụng văn bản và hình ảnh
- Ứng dụng tìm kiếm
Truy cập [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) để bắt đầu!
Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) để bắt đầu!
## 🌱 Bắt đầu
## 🌱 Bắt đầu
> **Giáo viên**, chúng tôi đã [bao gồm một số gợi ý](for-teachers.md) về cách sử dụng chương trình học này. Chúng tôi rất mong nhận được phản hồi của bạn [trong diễn đàn thảo luận của chúng tôi](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Giáo viên**, chúng tôi đã [bao gồm một số gợi ý](for-teachers.md) về cách sử dụng chương trình học này. Chúng tôi rất mong nhận được phản hồi của bạn [trong diễn đàn thảo luận của chúng tôi](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Người học](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, đối với mỗi bài học, hãy bắt đầu với 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 sự 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) 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.
Để 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 kiến thức, 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.
Để 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.
### 📋 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ó môi trường phát triển sẵn sàng! 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
Để bạn dễ dàng lưu lại công việc của mình, chúng tôi khuyến khích bạn tạo một bản sao của repository này. Bạn có thể làm điều này bằng cách nhấn nút **Use this template** ở đầu trang. Điều này sẽ tạo một repository mới trong tài khoản GitHub của bạn với một bản sao của chương trình học.
#### Tạo repository của bạn
Để dễ dàng lưu công việc của bạn, chúng tôi khuyến nghị bạn tạo một bản sao của repository này. Bạn có thể làm điều này bằng cách nhấn nút **Use this template** ở đầu trang. Điều này sẽ tạo một repository mới trong tài khoản GitHub của bạn với một bản sao của chương trình học.
Làm theo 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.
Để chạy chương trình học 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 mỗi 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.
Khuyến nghị của chúng tôi là sử dụng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) làm trình soạn thảo, 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).
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).
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 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:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
Sau đó, mở [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) trong [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) và chạy lệnh sau, thay thế `<your-repository-url>` bằng URL bạn vừa sao chép:
Sau đó, mở [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) trong [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) và chạy lệnh sau, thay `<your-repository-url>` bằng URL bạn vừa sao chép:
```bash
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ấn **File** > **Open Folder** và chọn thư mục bạn vừa clone.
> Khuyến nghị các tiện ích mở rộng của Visual Studio Code:
>
> 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
- đối với các bài học dựa trên dự án, hướng dẫn từng bước cách xây dựng dự án
- kiểm tra kiến thức
- một thử thách
- tài liệu đọc bổ sung
- bài tập
- [bài kiểm tra sau bài học](https://ff-quizzes.netlify.app/web/)
- sketchnote tùy chọn
- video bổ sung tùy chọn
- bài kiểm tra khởi động trước bài học
- bài học viết
- đối với các bài học dựa trên dự án, hướng dẫn từng bước cách xây dựng dự án
- kiểm tra kiến thức
- một thử thách
- tài liệu đọc bổ sung
- bài tập
- [bài kiểm tra sau bài học](https://ff-quizzes.netlify.app/web/)
> **Lưu ý về bài kiểm tra**: Tất cả các bài kiểm tra nằm trong thư mục Quiz-app, tổng cộng 48 bài kiểm tra, mỗi bài gồm ba câu hỏi. Chúng có sẵn [tại đây](https://ff-quizzes.netlify.app/web/) và ứng dụng kiểm tra có thể chạy cục bộ hoặc triển khai trên Azure; làm theo hướng dẫn trong thư mục `quiz-app`.
> **Lưu ý về bài kiểm tra**: Tất cả các bài kiểm tra nằm trong thư mục Quiz-app, tổng cộng 48 bài kiểm tra, mỗi bài gồm ba câu hỏi. Chúng có sẵn [tại đây](https://ff-quizzes.netlify.app/web/) và ứng dụng kiểm tra có thể chạy cục bộ hoặc triển khai lên Azure; làm theo hướng dẫn trong thư mục `quiz-app`.
## 🗃️ Các bài học
| | Tên Dự Án | Các khái niệm được dạy | Mục tiêu học tập | Liên kết bài học | Tác giả |
| | Tên Dự Án | Các Khái Niệm Được Dạy | Mục Tiêu Học Tập | Liên Kết Bài Học | Tác Giả |
| 01 | Bắt đầu | Giới thiệu về lập trình và các 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 hiệu quả | [Giới thiệu về ngôn ngữ lập trình và các 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 hợp tác với người khác trên một cơ sở 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 tắc cơ bản về khả năng tiếp cận web | [Các nguyên tắc cơ bản về khả năng tiếp cận](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Cơ bản về JS | Các kiểu dữ liệu JavaScript | Các nguyên tắc cơ bản về kiểu dữ liệu JavaScript | [Kiểu dữ liệu](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Cơ bản về 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 về 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 về 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 thực hành | 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 thực hành | 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 |
| 01 | Bắt Đầu | Giới thiệu về Lập trình và Công cụ hỗ trợ | Tìm hiểu các nguyên lý cơ bản của hầu hết các ngôn ngữ lập trình và phần mềm giúp các nhà phát triển chuyên nghiệp làm việc | [Giới thiệu về Ngôn ngữ Lập trình và Công cụ hỗ trợ](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Bắt Đầu | Cơ bản về GitHub, bao gồm làm việc nhóm | Cách sử dụng GitHub trong dự án của bạn, cách cộng tác với người khác trên một mã nguồn | [Giới thiệu về GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Bắt Đầu | Khả năng tiếp cận | Tìm hiểu các nguyên lý cơ bản về khả năng tiếp cận web | [Nguyên lý cơ bản về Khả năng tiếp cận](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Cơ bản JS | Các kiểu dữ liệu JavaScript | Các nguyên lý cơ bản về kiểu dữ liệu JavaScript | [Kiểu Dữ Liệu](./2-js-basics/1-data-types/README.md) | Jasmine |
| 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 |
| 07 | Cơ bản JS | Mảng và Vòng lặp | Làm việc với dữ liệu bằng mảng và vòng lặp trong JavaScript | [Mảng và Vòng lặp](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML trong thực tế | Xây dựng HTML để tạo một terrarium trực tuyến, tập trung vào việc xây dựng bố cục | [Giới thiệu về HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS trong thực tế | Xây dựng CSS để tạo kiểu cho terrarium trực tuyến, tập trung vào các nguyên 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 |
| 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 đánh máy | 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 yếu tố đầu tiên của một tiện ích mở rộng trình duyệt | [Về trình duyệt](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Xây dựng biểu mẫu, gọi API và lưu 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 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 |
| 15 | [Space Game](./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ả 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 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 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 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 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 |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Xây dựng trò chơi gõ phím | Tìm hiểu cách sử dụng sự kiện bàn phím để điều khiển logic của ứng dụng JavaScript của bạn | [Lập trình dựa trên sự kiện](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Làm việc với trình duyệt | Tìm hiểu cách trình duyệt hoạt động, lịch sử của chúng, và cách tạo các phần tử đầu tiên của một tiện ích mở rộng trình duyệt | [Về trình duyệt](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Xây dựng một biểu mẫu, gọi API và lưu biến trong bộ nhớ cục bộ | Xây dựng các phần tử JavaScript của tiện ích mở rộng trình duyệt để gọi API bằng các biến được lưu trong bộ nhớ cục bộ | [APIs, Biểu mẫu, và Bộ nhớ cục bộ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Quá trình nền trong trình duyệt, hiệu suất web | Sử dụng các quá trình nền của trình duyệt để quản lý biểu tượng của tiện ích mở rộng; tìm hiểu về hiệu suất web và một số tối ưu hóa để cải thiện | [Nhiệm vụ nền và Hiệu suất](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Phát triển trò chơi nâng cao với JavaScript | Tìm hiểu về Kế thừa bằng cả Lớp và Thành phần, và mô hình Pub/Sub, chuẩn bị cho việc xây dựng trò chơi | [Giới thiệu về Phát triển trò chơi nâng cao](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Vẽ lên canvas | Tìm hiểu về API Canvas, được sử dụng để vẽ các phần tử lên màn hình | [Vẽ lên Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Di chuyển các phần tử trên màn hình | Khám phá cách các phần tử có thể chuyển động bằng cách sử dụng tọa độ Cartesian và API Canvas | [Di chuyển các phần tử](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Phát hiện va chạm | Làm cho các phần tử va chạm và phản ứng với nhau bằng cách sử dụng các phím nhấn và cung cấp chức năng làm mát để đảm bảo hiệu suất của trò chơi | [Phát hiện va chạm](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Ghi điểm | Thực hiện các phép tính toán dựa trên trạng thái và hiệu suất của trò chơi | [Ghi điểm](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kết thúc và khởi động lại trò chơi | Tìm hiểu về việc kết thúc và khởi động lại trò chơi, bao gồm việc dọn dẹp tài sản và đặt lại giá trị biến | [Điều kiện kết thúc](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Mẫu HTML và định tuyến trong ứng dụng web | Tìm hiểu cách tạo khung kiến trúc của một trang web nhiều trang bằng cách định tuyến và sử dụng mẫu HTML | [Mẫu HTML và định tuyến](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Xây dựng biểu mẫu đăng nhập và đăng ký | Tìm hiểu về việc xây dựng biểu mẫu và xử lý các quy trình xác thực | [Biểu mẫu](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Phương pháp lấy và sử dụng dữ liệu | Cách dữ liệu luân chuyển vào và ra khỏi ứng dụng của bạn, cách lấy, lưu trữ và xử lý dữ liệu | [Dữ liệu](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Khái niệm về quản lý trạng thái | Tìm hiểu cách ứng dụng của bạn giữ trạng thái và cách quản lý nó bằng lập trình | [Quản lý trạng thái](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [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 chỉnh sửa mã | [Sử dụng trình chỉnh sửa mã VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Trợ lý AI](./9-chat-project/README.md) | Làm việc với AI | Tìm hiểu cách xây dựng trợ lý AI của riêng bạn | [Dự án trợ lý AI](./9-chat-project/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Mẫu HTML và Định tuyến trong ứng dụng web | Tìm hiểu cách tạo khung kiến trúc của một trang web nhiều trang bằng cách định tuyến và mẫu HTML | [Mẫu HTML và Định tuyến](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Xây dựng Biểu mẫu Đăng nhập và Đăng ký | Tìm hiểu về việc xây dựng biểu mẫu và xử lý các quy trình xác thực | [Biểu mẫu](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Phương pháp Lấy và Sử dụng Dữ liệu | Cách dữ liệu luân chuyển vào và ra khỏi ứng dụng của bạn, cách lấy, lưu trữ và xử lý dữ liệu | [Dữ liệu](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Khái niệm về Quản lý Trạng thái | Tìm hiểu cách ứng dụng của bạn giữ trạng thái và cách quản lý nó bằng lập trình | [Quản lý Trạng thái](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Làm việc với VScode | Tìm hiểu cách sử dụng trình chỉnh sửa mã | [Sử dụng VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Làm việc với AI | Tìm hiểu cách xây dựng trợ lý AI của riêng bạn | [Dự án Trợ lý AI](./9-chat-project/README.md) | Chris |
## 🏫 Phương pháp giảng dạy
Chương trình học của chúng tôi được thiết kế dựa trên hai nguyên tắc giảng dạy chính:
* học tập dựa trên dự án
* bài kiểm tra thường xuyên
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:
* học tập dựa trên dự án
* 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 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 đánh máy, 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 xâm lược không gian và ứng dụng ngân hàng cho doanh nghiệp. Đến cuối loạt bài, 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 vài 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 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á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 "[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ộ sưu tập này đã đóng góp vào chương trình học.
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 nhẹ nhàng trước lớp sẽ định hướng học viên học một chủ đề, trong khi bài kiểm tra thứ hai sau lớp đảm bảo khả năng ghi nhớ tốt hơn. 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 một 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.
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ố 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 của một nhà phát triển web trước khi áp dụng framework, 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)".
> 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!
> Xem [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
@ -199,57 +200,60 @@ Bạn có thể chạy tài liệu này ngoại tuyến bằng cách sử dụng
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).
## 🎒 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! Xem thêm:
Nhóm của chúng tôi sản xuất các khóa học khác! Hãy xem:
### 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/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### 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/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Chuỗi AI Tạo Sinh
[](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)
### Chuỗi Generative AI
[](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)
---
### Học Tập Cốt Lõi
[](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)
### Học Tập Cốt Lõi
[](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)
---
### Chuỗi Copilot
[](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/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
### Chuỗi Copilot
[](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)
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:
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.
[](https://aka.ms/foundry/discord)
Nếu bạn có phản hồi về sản phẩm hoặc gặp lỗi trong quá trình xây dựng, hãy truy cập:
Nếu bạn có phản hồi về sản phẩm hoặc gặp lỗi trong quá trình xây dựng, hãy truy cập:
[](https://aka.ms/foundry/forum)
Kho lưu trữ này được cấp phép theo giấy phép MIT. Xem tệp [LICENSE](../../LICENSE) để biết thêm thông tin.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Tuyên bố miễn trừ trách nhiệm**:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với thông tin quan trọng, chúng tôi khuyến nghị sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp của con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.
leestott
2 weeks ago
committed by
GitHub