מאגר זה הוא תוכנית לימודים חינוכית להוראת יסודות פיתוח ווב למתחילים. התוכנית היא קורס מקיף בן 12 שבועות שפותח על ידי Microsoft Cloud Advocates, הכולל 24 שיעורים מעשיים המכסים JavaScript, CSS ו-HTML.
זהו מאגר תוכן חינוכי ללימוד יסודות פיתוח ווב למתחילים. התוכנית היא קורס מקיף בן 12 שבועות שפותח על ידי Microsoft Cloud Advocates, עם 24 שיעורים מעשיים המכסים JavaScript, CSS ו-HTML.
- `7-bank-project/README.md` - אפליקציית בנקאות עם אימות משתמש
- `5-browser-extension/README.md` - פיתוח הרחבת דפדפן
- `6-space-game/README.md` - פיתוח משחק מבוסס Canvas
- `9-chat-project/README.md` - פרויקט עוזר שיחה מבוסס AI
### מבנה מונורפוזיטורי
### מבנה מונורפו
למרות שאינו מונורפוזיטורי מסורתי, המאגר כולל מספר פרויקטים עצמאיים:
- כל שיעור הוא עצמאי
- פרויקטים אינם משתפים תלויות
- עבודה על פרויקטים בודדים ללא השפעה על אחרים
- שכפל את כל המאגר כדי לקבל את חוויית התוכנית המלאה
למרות שאינו מונורפו קלאסי, המאגר מכיל פרויקטים עצמאיים מרובים:
- כל שיעור עצמאי לחלוטין
- פרויקטים אינם חולקים תלויות
- עבודה על פרויקטים בודדים ללא השפעה על אחרים
- שכפל את כל המאגר עבור חוויית קורס מלאה
---
<!-- 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). למרות שאנו שואפים לדיוק, יש להכיר בכך שתירגומים אוטומטיים עלולים לכלול שגיאות או אי-דיוקים. יש להסתמך על המסמך המקורי בשפת המקור כמקור המוסמך. עבור מידע קריטי, מומלץ לבצע תרגום מקצועי על ידי אדם. איננו אחראים לכל אי הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.
Ini adalah repositori kurikulum edukasi untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini merupakan kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran langsung yang mencakup JavaScript, CSS, dan HTML.
Ini adalah repositori kurikulum pendidikan untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini adalah kursus 12 minggu yang komprehensif yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktis yang mencakup JavaScript, CSS, dan HTML.
### Komponen Utama
- **Konten Edukasi**: 24 pelajaran terstruktur yang diatur dalam modul berbasis proyek
- **Proyek Praktis**: Terrarium, Game Mengetik, Ekstensi Browser, Game Luar Angkasa, Aplikasi Perbankan, Editor Kode, dan Asisten Chat AI
- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan setiap kuis (evaluasi sebelum/setelah pelajaran)
- **Dukungan Multi-bahasa**: Terjemahan otomatis untuk 50+ bahasa melalui GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) direkomendasikan untuk pembelajar
- Kursus tambahan: Generative AI, Data Science, ML, kurikulum IoT tersedia
### Bekerja dengan Proyek Spesifik
### Bekerja dengan Proyek Tertentu
Untuk instruksi mendetail pada proyek individual, lihat file README di:
- `quiz-app/README.md` - aplikasi kuis Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan autentikasi
- `5-browser-extension/README.md` - pengembangan ekstensi browser
- `6-space-game/README.md` - pengembangan game berbasis canvas
- `9-chat-project/README.md` - proyek asisten chat AI
Untuk instruksi rinci proyek individu, lihat README di:
- `quiz-app/README.md` - aplikasi kuis Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan autentikasi
- `5-browser-extension/README.md` - pengembangan ekstensi browser
- `6-space-game/README.md` - pengembangan game berbasis canvas
- `9-chat-project/README.md` - proyek asisten chat AI
### Struktur Monorepo
Meskipun bukan monorepo tradisional, repositori ini berisi beberapa proyek independen:
- Setiap pelajaran berdiri sendiri
- Proyek tidak berbagi dependensi
- Kerjakan proyek individual tanpa memengaruhi yang lain
- Clone seluruh repo untuk pengalaman kurikulum lengkap
Meski bukan monorepo tradisional, repositori ini mengandung banyak proyek independen:
- Setiap pelajaran mandiri
- Proyek tidak berbagi dependensi
- Kerjakan proyek individual tanpa memengaruhi yang lain
- Clone seluruh repositori untuk pengalaman kurikulum lengkap
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan terjemahan yang akurat, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sah dan utama. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan terjemahan yang akurat, harap diketahui bahwa terjemahan otomatis dapat mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang berwenang. Untuk informasi penting, disarankan menggunakan jasa penerjemah profesional manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau kesalahan interpretasi yang timbul dari penggunaan terjemahan ini.
Đây là kho lưu trữ chương trình giảng dạy nhằm dạy các kiến thức cơ bản về phát triển web cho người mới bắt đầu. Chương trình gồm một khóa học toàn diện trong 12 tuần được phát triển bởi các Chuyên viên Hỗ trợ Microsoft Cloud, bao gồm 24 bài học thực hành về JavaScript, CSS và HTML.
Đây là khoá học giáo dục dành cho việc dạy các kiến thức cơ bản về phát triển web cho người mới bắt đầu. Chương trình học là một khóa học toàn diện kéo dài 12 tuần được phát triển bởi Microsoft Cloud Advocates, gồm 24 bài học thực hành về JavaScript, CSS và HTML.
### Thành phần chính
### Các Thành Phần Chính
- **Nội dung giáo dục**: 24 bài học theo cấu trúc được tổ chức thành các mô-đun dự án
- **Dự án thực hành**: Terrarium, Trò chơi đánh máy, Tiện ích mở rộng trình duyệt, Trò chơi Space, Ứng dụng ngân hàng, Trình soạn thảo mã, và Trợ lý Chat AI
- **Hỗ trợ đa ngôn ngữ**: Dịch tự động cho hơn 50 ngôn ngữ qua GitHub Actions
- **Nội dung giáo dục**: 24 bài học có cấu trúc, tổ chức theo các module dự án
- **Dự án thực tế**: Terrarium, Trò chơi gõ chữ, Tiện ích mở rộng trình duyệt, Trò chơi không gian, Ứng dụng ngân hàng, Trình soạn thảo mã, và Trợ lý trò chuyện AI
- **Bài kiểm tra tương tác**: 48 bài kiểm tra với 3 câu hỏi mỗi bài (đánh giá trước và sau bài học)
- **Hỗ trợ đa ngôn ngữ**: Dịch tự động sang hơn 50 ngôn ngữ qua GitHub Actions
- **Công nghệ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (cho các dự án AI)
### Kiến trúc
### Kiến Trúc
- Kho lưu trữ giáo dục có cấu trúc theo từng bài học
- Mỗi thư mục bài học chứa README, ví dụ mã, và giải pháp
- Các dự án độc lập nằm trong các thư mục riêng biệt (quiz-app, các dự án bài học khác nhau)
- Khoá học giáo dục với cấu trúc theo từng bài học
- Mỗi thư mục bài học chứa tệp README, ví dụ mã và giải pháp
- Các dự án độc lập trong các thư mục riêng biệt (quiz-app, các dự án bài học khác nhau)
- Hệ thống dịch sử dụng GitHub Actions (co-op-translator)
- Tài liệu phục vụ qua Docsify và có sẵn dưới dạng PDF
- Tài liệu được phục vụ qua Docsify và có định dạng PDF
## Lệnh thiết lập
## Lệnh Cài Đặt
Kho lưu trữ này chủ yếu dành cho việc sử dụng nội dung giáo dục. Để làm việc với các dự án cụ thể:
Kho lưu trữ này chủ yếu dùng để học tập nội dung. Để làm việc với các dự án cụ thể:
- Đảm bảo đã cài đặt đầy đủ dependencies bằng `npm install`
**Tiện ích mở rộng trình duyệt không nạp được**:
- Kiểm tra file manifest.json định dạng đúng
- Kiểm tra console trình duyệt xem có lỗi không
- Làm theo hướng dẫn cài tiện ích mở rộng theo trình duyệt
**Tiện ích mở rộng trình duyệt không tải được**:
- Kiểm tra manifest.json hợp lệ
- Kiểm tra console trình duyệt xem có lỗi
- Làm theo hướng dẫn cài đặt riêng cho trình duyệt
**Vấn đề dự án chat Python**:
- Đảm bảo đã cài gói OpenAI: `pip install openai`
- Kiểm tra biến môi trường GITHUB_TOKEN đã đặt chưa
- Đảm bảo đã cài đặt gói OpenAI: `pip install openai`
- Kiểm tra biến môi trường GITHUB_TOKEN đã thiết lập
- Kiểm tra quyền truy cập GitHub Models
**Docsify không phục vụ tài liệu**:
- Cài docsify-cli toàn cục: `npm install -g docsify-cli`
- Chạy từ thư mục gốc của kho lưu trữ
- Kiểm tra file `docs/_sidebar.md` có tồn tại không
- Cài đặt docsify-cli toàn cục: `npm install -g docsify-cli`
- Chạy từ thư mục gốc kho lưu trữ
- Kiểm tra tồn tại tệp `docs/_sidebar.md`
### Mẹo môi trường phát triển
### Mẹo Môi Trường Phát Triển
- Dùng VS Code với tiện ích mở rộng Live Server cho các dự án HTML
- Cài ESLint và Prettier để định dạng nhất quán
- Dùng DevTools trình duyệt để gỡ lỗi JavaScript
- Dự án Vue cài thêm tiện ích Vue DevTools trên trình duyệt
- Dùng VS Code với tiện ích Live Server cho dự án HTML
- Cài đặt tiện ích ESLint và Prettier để định dạng nhất quán
- Sử dụng DevTools trình duyệt để gỡ lỗi JavaScript
- Với Vue, cài đặt tiện ích mở rộng Vue DevTools trên trình duyệt
### Cân nhắc hiệu năng
### Cân Nhắc Hiệu Năng
- Số lượng file dịch lớn (50+ ngôn ngữ) làm cho việc clone toàn bộ rất nặng
- Sử dụng clone nông nếu chỉ làm việc với nội dung: `git clone --depth 1`
- Loại trừ phần dịch khỏi tìm kiếm khi làm việc với nội dung tiếng Anh
- Quy trình build lần đầu có thể chậm (npm install, build Vite)
- Số lượng tệp dịch lớn (50+ ngôn ngữ) khiến việc clone toàn bộ nặng
- Dùng clone nông nếu chỉ làm việc với nội dung: `git clone --depth 1`
- Loại trừ thư mục dịch khỏi tìm kiếm khi xử lý nội dung tiếng Anh
- Quy trình build có thể chậm lần đầu (npm install, build Vite)
## Cân nhắc bảo mật
## Cân Nhắc Về Bảo Mật
### Biến môi trường
### Biến Môi Trường
- Không bao giờ commit khóa API vào kho lưu trữ
- Dùng file `.env` (đã được đưa vào`.gitignore`)
- Document các biến môi trường bắt buộc trong README dự án
- Không bao giờ commit khoá API vào kho lưu trữ
- Sử dụng file `.env` (đã có trong`.gitignore`)
- Ghi chú biến môi trường cần thiết trong README dự án
### Dự án Python
### Dự Án Python
- Sử dụng môi trường ảo: `python -m venv venv`
- Cập nhật phụ thuộc thường xuyên
- Cập nhật dependencies thường xuyên
- Token GitHub nên có quyền tối thiểu cần thiết
### Truy cập GitHub Models
### Quyền Truy Cập GitHub Models
- Cần Token Truy cập Cá nhân (PAT) cho GitHub Models
- Token nên lưu dưới biến môi trường
- Cần Personal Access Tokens (PAT) để truy cập GitHub Models
- Token nên lưu trữ dưới dạng biến môi trường
- Không bao giờ commit token hoặc thông tin đăng nhập
## Ghi chú bổ sung
## Ghi Chú Bổ Sung
### Đối tượng hướng tới
### Đối Tượng Hướng Đến
- Người mới hoàn toàn với phát triển web
- Học sinh và người tự học
- Giảng viên sử dụng chương trình trong lớp học
- Nội dung thiết kế cho dễ truy cập và phát triển kỹ năng từng bước
- Sinh viên và người tự học
- Giáo viên sử dụng chương trình trong lớp học
- Nội dung thiết kế để dễ tiếp cận và phát triển kỹ năng tuần tự
### Triết lý giáo dục
### Triết Lý Giáo Dục
- Phương pháp học dựa trên dự án
- Kiểm tra kiến thức thường xuyên (trắc nghiệm)
- Phương pháp học theo dự án
- Kiểm tra kiến thức thường xuyên (quiz)
- Bài tập mã hóa thực hành
- Ví dụ ứng dụng thực tế
- Tập trung vào kiến thức nền tảng trước các framework
- Tập trung vào nền tảng trước khi học framework
### Bảo trì kho lưu trữ
### Bảo Trì Kho Lưu Trữ
- Cộng đồng người học và đóng góp viên năng động
- Cập nhật thường xuyên các phụ thuộc và nội dung
- Giám sát issue và thảo luận bởi người duy trì
- Tự động cập nhật bản dịch qua GitHub Actions
- Cộng đồng học tập và đóng góp tích cực
- Cập nhật thường xuyên các dependencies và nội dung
- Theo dõi issues và thảo luận bởi người quản lý
- Cập nhật dịch tự động qua GitHub Actions
### Tài nguyên liên quan
### Tài Nguyên Liên Quan
- [Các module Microsoft Learn](https://docs.microsoft.com/learn/)
- [Modules học Microsoft Learn](https://docs.microsoft.com/learn/)
- [Tài nguyên Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) được khuyên dùng cho người học
- Các khóa học bổ sung: AI sinh tạo, Khoa học dữ liệu, ML, IoT có sẵn
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) khuyến nghị cho người học
- Các khoá học bổ sung: AI Sinh tạo, Khoa học dữ liệu, ML, IoT
### Làm việc với dự án cụ thể
### Làm Việc Với Các Dự Án Cụ Thể
Hướng dẫn chi tiết cho từng dự án trong các file README:
Hướng dẫn chi tiết về các dự án riêng lẻ xem trong tệp README:
- `quiz-app/README.md` - Ứng dụng quiz Vue 3
- `7-bank-project/README.md` - Ứng dụng ngân hàng có xác thực
- `5-browser-extension/README.md` - Phát triển tiện ích mở rộng trình duyệt
- `6-space-game/README.md` - Phát triển trò chơi trên Canvas
- `6-space-game/README.md` - Phát triển trò chơi Canvas
- `9-chat-project/README.md` - Dự án trợ lý chat AI
### Cấu trúc Monorepo
### Cấu Trúc Monorepo
Mặc dù không phải monorepo truyền thống, kho này chứa nhiều dự án độc lập:
- Mỗi bài học là một đơn vị riêng biệt
- Các dự án không chia sẻ phụ thuộc
- Làm việc trên từng dự án riêng biệt mà không ảnh hưởng đến các dự án khác
- Clone toàn bộ kho để trải nghiệm toàn bộ chương trình học
Mặc dù không phải là monorepo truyền thống, kho này chứa nhiều dự án độc lập:
- Mỗi bài học là riêng biệt
- Các dự án không chia sẻ dependencies
- Làm việc trên từng dự án riêng không ảnh hưởng lẫn nhau
- Clone toàn bộ kho để trải nghiệm toàn bộ khóa học
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Tuyên bố từ chối 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ữ gốc của nó nên được coi là nguồn chính xác và đáng tin cậy. Đối với các thông tin quan trọng, nên sử dụng bản dịch do con người chuyên nghiệp thực hiện. Chúng tôi không chịu trách nhiệm về bất kỳ sự hiểu lầm hoặc giải thích 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 việc dịch tự động có thể chứa lỗi hoặc sai sót. Tài liệu gốc bằng ngôn ngữ gốc nên được xem là nguồn chính xác và uy tín nhất. Đối với những thông tin quan trọng, nên 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 đối với bất kỳ sự hiểu nhầm hay giải thích sai lệch nào phát sinh từ việc sử dụng bản dịch này.