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

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

Browse Source
update-translations
localizeflow[bot] 2 days ago
parent 4d3d19aa32
commit 17330f06e8
12 changed files with 1053 additions and 872 deletions
Show Stats Download Patch File Download Diff File

12
translations/he/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:32:49+00:00",
"translation_date": "2026-02-06T17:49:11+00:00",
"source_file": "AGENTS.md",
"language_code": "he"
},
@ -516,11 +516,17 @@
"language_code": "he"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T18:40:49+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T17:43:17+00:00",
"source_file": "README.md",
"language_code": "he"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T17:47:36+00:00",
"source_file": "Roadmap.md",
"language_code": "he"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-27T20:04:03+00:00",

446
translations/he/AGENTS.md
Unescape View File

@ -1,24 +1,24 @@
# AGENTS.md
## סקירת הפרויקט
## סקירת פרויקט
זהו מאגר תכנית לימודים חינוכית להוראת יסודות פיתוח אתרים למתחילים. התכנית היא קורס מקיף של 12 שבועות שפותח על ידי Microsoft Cloud Advocates, וכוללת 24 שיעורים מעשיים המכסים JavaScript, CSS ו-HTML.
זהו מאגר תוכן חינוכי ללימוד יסודות פיתוח ווב למתחילים. התוכנית היא קורס מקיף בן 12 שבועות שפותח על ידי Microsoft Cloud Advocates, הכולל 24 שיעורים מעשיים המכסים JavaScript, CSS ו-HTML.
### רכיבים מרכזיים
- **תוכן חינוכי**: 24 שיעורים מובנים המאורגנים במודולים מבוססי פרויקטים
- **פרויקטים מעשיים**: טרריום, משחק הקלדה, הרחבת דפדפן, משחק חלל, אפליקציית בנקאות, עורך קוד ועוזר צ'אט מבוסס AI
- **חידונים אינטראקטיביים**: 48 חידונים עם 3 שאלות כל אחד (הערכות לפני/אחרי שיעור)
- **תמיכה רב-לשונית**: תרגומים אוטומטיים ל-50+ שפות באמצעות GitHub Actions
- **טכנולוגיות**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (לפרויקטי AI)
- **תוכן חינוכי**: 24 שיעורים מסודרים במודולים מבוססי פרויקטים
- **פרויקטים מעשיים**: טרטיום, משחק הקלדה, תוסף דפדפן, משחק חלל, אפליקציית בנקאות, עורך קוד ועוזר צ'ט מבוסס AI
- **חידונים אינטראקטיביים**: 48 חידונים עם 3 שאלות בכל אחד (מבחני לפני/אחרי השיעור)
- **תמיכה רב-שפתית**: תרגומים אוטומטיים ל-50+ שפות באמצעות GitHub Actions
- **טכנולוגיות**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (לפרויקטים מבוססי AI)
### ארכיטקטורה
- מאגר חינוכי עם מבנה מבוסס שיעורים
- כל תיקיית שיעור מכילה README, דוגמאות קוד ופתרונות
- פרויקטים עצמאיים בתיקיות נפרדות (quiz-app, פרויקטים שונים של שיעורים)
- מערכת תרגום באמצעות GitHub Actions (co-op-translator)
- תיעוד מוגש באמצעות Docsify וזמין כ-PDF
- מאגר חינוכי עם מבנה מבוסס שיעורים
- כל תיקיית שיעור כוללת README, דוגמאות קוד ופתרונות
- פרויקטים עצמאיים בתיקיות נפרדות (quiz-app, פרויקטים שונים בשיעורים)
- מערכת תרגום באמצעות GitHub Actions (co-op-translator)
- תיעוד מועבר דרך Docsify וזמין בפורמט PDF
## פקודות התקנה
@ -30,253 +30,253 @@
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### התקנת אפליקציית החידונים (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # הפעל את שרת הפיתוח
npm run build # בנייה לפרודקשן
npm run lint # הפעל את ESLint
```
### API של פרויקט הבנק (Node.js + Express)
### API לפרויקט בנק (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # הפעל את שרת ה-API
npm run lint # הפעל את ESLint
npm run format # עצב עם Prettier
```
### פרויקטים של הרחבות דפדפן
### פרויקטים של תוספי דפדפן
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# עקוב אחר הוראות טעינת תוספים ספציפיות לדפדפן
```
### פרויקטים של משחק החלל
### פרויקטים למשחק חלל
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# פתח את index.html בדפדפן או השתמש ב-Live Server
```
### פרויקט הצ'אט (Python Backend)
### פרויקט צ'ט (Backend בפייתון)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# הגדר את משתנה הסביבה GITHUB_TOKEN
python api.py
```
## תהליך פיתוח
## זרימת עבודה לפיתוח
### עבור תורמי תוכן
### לתורמים לתוכן
1. **צרו Fork למאגר** לחשבון GitHub שלכם
2. **שכפלו את ה-Fork** באופן מקומי
3. **צרו ענף חדש** לשינויים שלכם
4. בצעו שינויים בתוכן השיעורים או בדוגמאות הקוד
5. בדקו שינויים בקוד בתיקיות הפרויקטים הרלוונטיות
6. שלחו Pull Requests בהתאם להנחיות התרומה
1. **צור פורק** של המאגר לחשבון GitHub שלך
2. **שכפל את הפורק** למחשב המקומי
3. **צור סניף חדש** לשינויים שלך
4. בצע שינויים בתוכן השיעור או בדוגמאות הקוד
5. בדוק את שינויים בקוד בתיקיות הפרויקטים הרלוונטיות
6. הגש בקשות משיכה לפי קווי הנחיה לתרומה
### עבור לומדים
### ללומדים
1. צרו Fork או שכפלו את המאגר
2. נווטו לתיקיות השיעורים לפי הסדר
3. קראו את קבצי README לכל שיעור
4. השלימו חידונים לפני השיעור בכתובת https://ff-quizzes.netlify.app/web/
5. עבדו על דוגמאות הקוד בתיקיות השיעורים
6. השלימו משימות ואתגרים
7. בצעו חידונים לאחר השיעור
1. בצע פורק או שכפול של המאגר
2. נווט בתיקיות השיעורים לסדר כרונולוגי
3. קרא קבצי README לכל שיעור
4. השלם חידונים לפני השיעור בכתובת https://ff-quizzes.netlify.app/web/
5. עבד על דוגמאות הקוד שבתיקיות השיעור
6. השלם מטלות ואתגרים
7. בצע חידונים לאחר השיעור
### פיתוח חי
### פיתוח בזמן אמת
- **תיעוד**: הריצו `docsify serve` בתיקיית השורש (פורט 3000)
- **אפליקציית חידונים**: הריצו `npm run dev` בתיקיית quiz-app
- **פרויקטים**: השתמשו בתוסף Live Server של VS Code לפרויקטי HTML
- **פרויקטי API**: הריצו `npm start` בתיקיות ה-API הרלוונטיות
- **תיעוד**: הפעל `docsify serve` בתיקיית השורש (פורט 3000)
- **אפליקציית חידונים**: הפעל `npm run dev` בתיקיית quiz-app
- **פרויקטים**: השתמש בתוסף Live Server של VS Code לפרויקטים ב-HTML
- **פרויקטי API**: הפעל `npm start` בתיקיות ה-API המתאימות
## הוראות בדיקה
### בדיקת אפליקציית החידונים
### בדיקת אפליקציית חידונים
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # בדוק בעיות בסגנון הקוד
npm run build # אמת שהבנייה הצליחה
```
### בדיקת API של הבנק
### בדיקת API בנק
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # בדוק בעיות סגנון קוד
node server.js # אמת שהשרת מתחיל ללא שגיאות
```
### גישת בדיקה כללית
- זהו מאגר חינוכי ללא בדיקות אוטומטיות מקיפות
- בדיקות ידניות מתמקדות ב:
- דוגמאות קוד רצות ללא שגיאות
- קישורים בתיעוד עובדים כראוי
- בניית פרויקטים מסתיימת בהצלחה
- דוגמאות עוקבות אחר שיטות עבודה מומלצות
- זהו מאגר חינוכי ללא בדיקות אוטומטיות מקיפות
- בדיקה ידנית מתמקדת ב:
- הפעלת דוגמאות קוד ללא שגיאות
- קישורים בתיעוד עובדים כראוי
- בניית פרויקטים עוברת בהצלחה
- דוגמאות עוקבות אחרי עקרונות טובים
### בדיקות לפני שליחה
### בדיקות לפני הגשה
- הריצו `npm run lint` בתיקיות עם package.json
- ודאו שקישורי Markdown תקינים
- בדקו דוגמאות קוד בדפדפן או ב-Node.js
- בדקו שהתרגומים שומרים על מבנה נכון
- הרץ `npm run lint` בתיקיות עם package.json
- אמת שכל הקישורים ב-markdown תקינים
- בדוק דוגמאות קוד בדפדפן או Node.js
- ודא שהתרגומים שומרים על מבנה תקין
## הנחיות סגנון קוד
## קווי הנחיה לסגנון קוד
### JavaScript
- השתמשו בתחביר מודרני של ES6+
- עקבו אחר תצורות ESLint סטנדרטיות המסופקות בפרויקטים
- השתמשו בשמות משתנים ופונקציות משמעותיים לצורך בהירות חינוכית
- הוסיפו הערות המסבירות מושגים ללומדים
- עיצוב באמצעות Prettier במקומות שבהם מוגדר
- השתמש בתחביר מודרני (ES6+)
- עקוב אחר קונפיגורציות ESLint סטנדרטיות בפרויקטים
- השתמש בשמות משתנים ופונקציות משמעותיים להבהרת הלמידה
- הוסף הערות המסבירות מושגים ללומדים
- עצב באמצעות Prettier כשמוגדר
### HTML/CSS
- אלמנטים סמנטיים של HTML5
- עקרונות עיצוב רספונסיבי
- מוסכמות שמות מחלקות ברורות
- אלמנטים סמנטיים ב-HTML5
- עקרונות עיצוב רספונסיבי
- קונבנציות שמות class ברורות
- הערות המסבירות טכניקות CSS ללומדים
### Python
- הנחיות סגנון של PEP 8
- דוגמאות קוד ברורות וחינוכיות
- רמזי סוגים במקומות שבהם מועיל ללמידה
- קווי הנחיה לפי PEP 8
- דוגמאות קוד ברורות וחינוכיות
- רמזי טיפוסים היכן שמועילים ללמידה
### תיעוד Markdown
- היררכיית כותרות ברורה
- בלוקי קוד עם ציון שפה
- קישורים למשאבים נוספים
- צילומי מסך ותמונות בתיקיות `images/`
- טקסט חלופי לתמונות לצורך נגישות
- היררכיית כותרות ברורה
- בלוקי קוד עם ציון שפת הקוד
- קישורים למשאבים נוספים
- צילומי מסך ותמונות בתיקיית `images/`
- טקסט חלופי לתמונות לשם נגישות
### ארגון קבצים
- שיעורים ממוספרים לפי סדר (1-getting-started-lessons, 2-js-basics, וכו')
- לכל פרויקט יש `solution/` ולעיתים `start/` או `your-work/`
- תמונות מאוחסנות בתיקיות `images/` ספציפיות לשיעור
- תרגומים במבנה `translations/{language-code}/`
- שיעורים ממוספרים ברצף (1-getting-started-lessons, 2-js-basics וכו')
- בפרויקט יש תיקיות `solution/` ובדרך כלל `start/` או `your-work/`
- תמונות מאוחסנות בתיקיות `images/` ספציפיות לשיעור
- תרגומים בתיקיות `translations/{language-code}/`
## בנייה ופריסה
### פריסת אפליקציית חידונים (Azure Static Web Apps)
### פריסת אפליקציית החידונים (Azure Static Web Apps)
אפליקציית החידונים מוגדרת לפריסה ב-Azure Static Web Apps:
האפליקציה quiz-app מוגדרת לפריסה ב-Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # יוצר את התיקייה dist/
# מבצע פריסה באמצעות זרימת העבודה של GitHub Actions בעת דחיפה ל-main
```
קונפיגורציית Azure Static Web Apps:
- **מיקום האפליקציה**: `/quiz-app`
- **מיקום הפלט**: `dist`
- **זרימת עבודה**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
תצורת Azure Static Web Apps:
- **מיקום האפליקציה**: `/quiz-app`
- **מיקום הפלט**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### יצירת PDF לתיעוד
### יצירת PDF של התיעוד
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # התקן docsify-to-pdf
npm run convert # צור PDF מתוך docs
```
### תיעוד Docsify
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # התקן את Docsify באופן גלובלי
docsify serve # הפעל ב-localhost:3000
```
### בניות ספציפיות לפרויקט
### בניות ספציפיות לפרויקטים
לכל תיקיית פרויקט עשוי להיות תהליך בנייה משלה:
- פרויקטי Vue: `npm run build` יוצר חבילות ייצור
- פרויקטים סטטיים: אין שלב בנייה, הגישו קבצים ישירות
לכל תיקיית פרויקט עשוי להיות תהליך בנייה משלה:
- פרויקטי Vue: `npm run build` ליצירת חבילות הפקה
- פרויקטים סטטיים: ללא שלב בנייה, משרתים קבצים ישירות
## הנחיות Pull Request
## קווי הנחיה לבקשות משיכה (PR)
### פורמט כותרת
השתמשו בכותרות ברורות ותיאוריות המצביעות על תחום השינוי:
- `[Quiz-app] Add new quiz for lesson X`
- `[Lesson-3] Fix typo in terrarium project`
- `[Translation] Add Spanish translation for lesson 5`
- `[Docs] Update setup instructions`
השתמש בכותרות ברורות ותיאוריות המציינות את תחום השינוי:
- `[Quiz-app] הוספת חידון חדש לשיעור X`
- `[Lesson-3] תיקון שגיאה בפרויקט טרטיום`
- `[Translation] הוספת תרגום לספרדית לשיעור 5`
- `[Docs] עדכון הוראות התקנה`
### בדיקות נדרשות
לפני שליחת PR:
לפני הגשת PR:
1. **איכות קוד**:
- הריצו `npm run lint` בתיקיות הפרויקטים המושפעות
- תקנו את כל שגיאות ואזהרות הלינטר
1. **איכות קוד**:
- הרץ `npm run lint` בתיקיות הפרויקט הרלוונטיות
- תקן את כל שגיאות ואזהרות הלינט
2. **אימות בנייה**:
- הריצו `npm run build` אם רלוונטי
- ודאו שאין שגיאות בנייה
2. **בדיקת בנייה**:
- הרץ `npm run build` אם רלוונטי
- ודא שבעיית בנייה לא קיימת
3. **אימות קישורים**:
- בדקו את כל קישורי Markdown
- ודאו שהפניות לתמונות עובדות
3. **אימות קישורים**:
- בדוק את כל הקישורים ב-markdown
- אמת הפניות לתמונות עובדות
4. **סקירת תוכן**:
- בדקו שגיאות כתיב ודקדוק
- ודאו שדוגמאות הקוד נכונות וחינוכיות
- בדקו שהתרגומים שומרים על המשמעות המקורית
4. **בדיקת תוכן**:
- הגהה לאיות ודקדוק
- ודא דוגמאות קוד נכונות וחינוכיות
- אמת שהתרגומים שומרים על משמעות המקור
### דרישות תרומה
- הסכימו ל-Microsoft CLA (בדיקה אוטומטית ב-PR הראשון)
- עקבו אחר [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- ראו [CONTRIBUTING.md](./CONTRIBUTING.md) להנחיות מפורטות
- התייחסו למספרי בעיות בתיאור ה-PR אם רלוונטי
- הסכמה ל-CLA של מיקרוסופט (בדיקה אוטומטית ב-PR הראשון)
- עקוב אחר [קוד ההתנהגות של מיקרוסופט בקוד פתוח](https://opensource.microsoft.com/codeofconduct/)
- ראה [CONTRIBUTING.md](./CONTRIBUTING.md) לקווי הנחיה מפורטים
- הפנה מספרי נושאים בתיאור ה-PR אם רלוונטי
### תהליך סקירה
- PRs נסקרים על ידי מתחזקים והקהילה
- בהירות חינוכית היא בעדיפות
- דוגמאות קוד צריכות לעקוב אחר שיטות עבודה עדכניות
- תרגומים נסקרים לצורך דיוק והתאמה תרבותית
- סקירה עוברת על ידי מנהלים והקהילה
- בהירות חינוכית מקבלת עדיפות
- דוגמאות קוד צריכות לעקוב אחרי שיטות עבודה מומלצות עדכניות
- תרגומים נבדקים לדיוק ולהתאמה תרבותית
## מערכת תרגום
### תרגום אוטומטי
- משתמשת ב-GitHub Actions עם workflow של co-op-translator
- מתרגמת ל-50+ שפות באופן אוטומטי
- קבצי מקור בתיקיות הראשיות
- קבצים מתורגמים במבנה `translations/{language-code}/`
- משתמש ב-GitHub Actions עם זרימת העבודה co-op-translator
- מתרגם אוטומטית ל-50+ שפות
- קבצי מקור בתיקיות הראשיות
- קבצים מתורגמים ב`translations/{language-code}/`
### הוספת שיפורי תרגום ידניים
### הוספת שיפורים ידניים לתרגום
1. מצאו את הקובץ ב-`translations/{language-code}/`
2. בצעו שיפורים תוך שמירה על מבנה
3. ודאו שדוגמאות הקוד נשארות פונקציונליות
4. בדקו כל תוכן חידון מקומי
1. אתר את הקובץ ב-`translations/{language-code}/`
2. בצע שיפורים תוך שמירת המבנה
3. ודא שדוגמאות הקוד ממשיכות לפעול
4. בדוק תוכן חידון מקומי אם קיים
### מטא-נתונים של תרגום
### מטא מידע לתרגום
קבצים מתורגמים כוללים כותרת מטא-נתונים:
קבצים מתורגמים כוללים כותרת מטא-נתונים:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -288,119 +288,121 @@ CO_OP_TRANSLATOR_METADATA:
}
-->
```
## איתור באגים ופתרון בעיות
## איתור באגים וטיפול בבעיות
### בעיות נפוצות
**אפליקציית החידונים לא מתחילה**:
- בדקו גרסת Node.js (מומלץ v14+)
- מחקו `node_modules` ו-`package-lock.json`, הריצו `npm install` שוב
- בדקו קונפליקטים בפורט (ברירת מחדל: Vite משתמש בפורט 5173)
**אפליקציית חידונים לא מתחילה**:
- בדוק גרסת Node.js (מומלץ v14+)
- מחק `node_modules` ו-`package-lock.json`, הפעל `npm install` שוב
- בדוק קונפליקטים על הפורט (ברירת מחדל: Vite משתמש בפורט 5173)
**שרת API לא מתחיל**:
- ודאו שגרסת Node.js עומדת בדרישות המינימום (node >=10)
- בדקו אם הפורט כבר בשימוש
- ודאו שכל התלויות מותקנות עם `npm install`
**שרת API לא מתחיל**:
- אמת שגרסת Node.js היא לפחות 10 ומעלה
- בדוק האם הפורט תפוס כבר
- ודא שכל התלויות מותקנות עם `npm install`
**הרחבת דפדפן לא נטענת**:
- ודאו ש-manifest.json מעוצב כראוי
- בדקו שגיאות בקונסולת הדפדפן
- עקבו אחר הוראות התקנת הרחבות ספציפיות לדפדפן
**תוסף דפדפן לא נטען**:
- ודא שמניפסט.json מעוצב כהלכה
- בדוק את קונסולת הדפדפן לשגיאות
- עקוב אחר הוראות התקנה ייעודיות לדפדפן
**בעיות בפרויקט הצ'אט של Python**:
- ודאו שהחבילה OpenAI מותקנת: `pip install openai`
- בדקו שהמשתנה הסביבתי GITHUB_TOKEN מוגדר
- בדקו הרשאות גישה ל-GitHub Models
**בעיות בפרויקט צ'ט בפייתון**:
- ודא שהחבילה OpenAI מותקנת: `pip install openai`
- ודא שמשתנה הסביבה GITHUB_TOKEN מוגדר
- בדוק הרשאות גישה ל-GitHub Models
**Docsify לא מגיש תיעוד**:
- התקינו docsify-cli באופן גלובלי: `npm install -g docsify-cli`
- הריצו מתיקיית השורש של המאגר
- בדקו ש-`docs/_sidebar.md` קיים
**Docsify לא מעביר תיעוד**:
- התקן docsify-cli גלובלי: `npm install -g docsify-cli`
- הפעל בתיקיית השורש של המאגר
- ודא שקובץ `docs/_sidebar.md` קיים
### טיפים לסביבת פיתוח
- השתמשו ב-VS Code עם תוסף Live Server לפרויקטי HTML
- התקינו תוספי ESLint ו-Prettier לעיצוב עקבי
- השתמשו בכלי DevTools של הדפדפן לאיתור באגים ב-JavaScript
- לפרויקטי Vue, התקינו את תוסף Vue DevTools לדפדפן
- השתמש ב-VS Code עם תוסף Live Server לפרויקטים ב-HTML
- התקן את תוספי ESLint ו-Prettier לעיצוב עקבי
- השתמש ב-DevTools בדפדפן לאיתור באגים ב-JavaScript
- לפרויקטי Vue, התקן את תוסף Vue DevTools לדפדפן
### שיקולי ביצועים
### שיקולים לביצועים
- מספר גדול של קבצים מתורגמים (50+ שפות) גורם לכך ששכפולים מלאים גדולים
- השתמשו בשכפול רדוד אם עובדים רק על תוכן: `git clone --depth 1`
- החריגו תרגומים מחיפושים בעת עבודה על תוכן באנגלית
- תהליכי בנייה עשויים להיות איטיים בהרצה הראשונה (npm install, Vite build)
- כמות גדולה של קבצים מתורגמים (50+ שפות) יוצרת שכפולים גדולים
- השתמש בשכפול רדוד אם עובדים רק על התוכן: `git clone --depth 1`
- הוצא תרגומים מחיפושים בעת עבודה על תוכן באנגלית
- תהליכי בנייה עשויים להיות איטיים בהרצה ראשונה (npm install, בניית Vite)
## שיקולי אבטחה
### משתני סביבה
- מפתחות API לעולם לא צריכים להיות מחויבים למאגר
- השתמשו בקבצי `.env` (כבר ב-.gitignore)
- תעדו משתני סביבה נדרשים בקבצי README של הפרויקטים
- מפתחות API אסור שישמרו במאגר הקוד
- השתמש בקבצי `.env` (כבר ב-.gitignore)
- תעד את משתני הסביבה הדרושים ב-README של הפרויקטים
### פרויקטי Python
### פרויקטים בפייתון
- השתמשו בסביבות וירטואליות: `python -m venv venv`
- שמרו על תלויות מעודכנות
- אסימוני GitHub צריכים להיות בעלי הרשאות מינימליות נדרשות
- השתמש בסביבות וירטואליות: `python -m venv venv`
- שמור על התלויות מעודכנות
- טוקנים ל-GitHub צריכים להיות בעלי ההרשאות המינימליות הנחוצות
### גישה ל-GitHub Models
- נדרשים Personal Access Tokens (PAT) ל-GitHub Models
- אסימונים צריכים להיות מאוחסנים כמשתני סביבה
- לעולם אל תתחייבו אסימונים או אישורים
- טוקני גישה אישית (PAT) דרושים ל-GitHub Models
- טוקנים צריכים להיות מאוחסנים כמשתני סביבה
- לעולם אל תכלול טוקנים או הרשאות בקוד
## הערות נוספות
### קהל יעד
- מתחילים מוחלטים בפיתוח אתרים
- סטודנטים ולומדים עצמאיים
- מורים המשתמשים בתכנית הלימודים בכיתות
- התוכן מיועד לנגישות ולבניית מיומנויות הדרגתית
- מתחילים מוחלטים בפיתוח ווב
- סטודנטים ולומדים עצמאיים
- מורים המשתמשים בתוכנית בכיתות
- תוכן מותאם לנגישות ולבניית מיומנויות הדרגתית
### פילוסופיה חינוכית
- גישה מבוססת פרויקטים ללמידה
- בדיקות ידע תכופות (חידונים)
- תרגילי קוד מעשיים
- דוגמאות יישום בעולם האמיתי
- התמקדות ביסודות לפני מסגרות עבודה
- גישה מבוססת פרויקטים
- בדיקות ידע תכופות (חידונים)
- תרגילי קידוד מעשיים
- דוגמאות ליישום בעולם האמיתי
- דגש על יסודות לפני מסגרות עבודה
### תחזוקת המאגר
- קהילה פעילה של לומדים ותורמים
- עדכונים שוטפים לתלויות ולתוכן
- בעיות ודיונים מנוטרים על ידי מתחזקים
- עדכוני תרגום אוטומטיים באמצעות GitHub Actions
- קהילה פעילה של לומדים ותורמים
- עדכונים שוטפים לתלויות ולתוכן
- ניטור נושאים ודיונים על ידי מנהלים
- עדכוני תרגום אוטומטיים דרך GitHub Actions
### משאבים קשורים
- [מודולי Microsoft Learn](https://docs.microsoft.com/learn/)
- [משאבי Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) מומלץ ללומדים
- קורסים נוספים: Generative AI, Data Science, ML, IoT זמינים
- [מודולים של Microsoft Learn](https://docs.microsoft.com/learn/)
- [משאבים ב-Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) מומלץ ללומדים
- קורסים נוספים: בינה מלאכותית גנרטיבית, מדעי הנתונים, למידת מכונה, IoT זמינים
### עבודה עם פרויקטים ספציפיים
להוראות מפורטות על פרויקטים בודדים, עיינו בקבצי README ב:
- `quiz-app/README.md` - אפליקציית חידונים ב-Vue 3
- `7-bank-project/README.md` - אפליקציית בנקאות עם אימות
- `5-browser-extension/README.md` - פיתוח הרחבת דפדפן
- `6-space-game/README.md` - פיתוח משחק מבוסס Canvas
- `9-chat-project/README.md` - פרויקט עוזר צ'אט מבוסס AI
להוראות מפורטות על פרויקטים ספציפיים, עיין בקבצי README ב:
- `quiz-app/README.md` - אפליקציית חידונים ב-Vue 3
- `7-bank-project/README.md` - אפליקציית בנקאות עם אימות
- `5-browser-extension/README.md` - פיתוח תוסף דפדפן
- `6-space-game/README.md` - פיתוח משחק קנבס
- `9-chat-project/README.md` - פרויקט עוזר צ'ט מבוסס AI
### מבנה Monorepo
### מבנה מונורפו (Monorepo)
למרות שאינו Monorepo מסורתי, מאגר זה מכיל פרויקטים עצמאיים רבים:
- כל שיעור הוא עצמאי
- פרויקטים אינם חולקים תלויות
- עבודה על פרויקטים בודדים ללא השפעה על אחרים
- שכפלו את כל המאגר לחוויית תכנית לימודים מלאה
אמנם לא מונורפו קלאסי, מאגר זה מכיל פרויקטים עצמאיים מרובים:
- כל שיעור הוא עצמאי
- הפרויקטים לא חולקים תלויות
- עבד על פרויקטים נפרדים ללא השפעה על אחרים
- שכפל את כל המאגר לחווית לימוד מלאה
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדייק, יש לקחת בחשבון שתרגומים אוטומטיים עלולים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית יש להיחשב למקור הסמכותי. עבור מידע קריטי מומלץ להשתמש בתרגום מקצועי של אדם. אנו לא אחראים לכל אי הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

239
translations/he/README.md
Unescape View File

@ -2,7 +2,7 @@
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
@ -12,260 +12,259 @@
# פיתוח ווב למתחילים - תוכנית לימודים
למד את היסודות של פיתוח ווב עם הקורס המקיף בן 12 השבועות שלנו על ידי Microsoft Cloud Advocates. כל אחד מ-24 השיעורים מתעמק ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כגון טרריום, תוספים לדפדפן ומשחקי חלל. השתתף בחידונים, דיונים ומשימות מעשיות. שפר את הכישורים שלך ואופטימיזציה לשימור הידע שלך עם הפדגוגיה הבסיסית שלנו המבוססת על פרויקטים. התחל את מסע הקידוד שלך היום!
למדו את יסודות פיתוח האינטרנט עם הקורס המקיף בן 12 השבועות שלנו, בהנחיית מומחי Microsoft Cloud Advocates. כל אחד מ-24 השיעורים מתעמק ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרריום, תוספי דפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ומשימות מעשיות. שפרו את הכישורים שלכם ואופטמו את זכירת הידע בעזרת שיטת הלמידה המבוססת פרויקטים שלנו. התחילו את מסע הקידוד שלכם עוד היום!
הצטרף לקהילת Azure AI Foundry בדיסקורד
הצטרפו לקהילת ה-Discord של Azure AI Foundry
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
עקוב אחרי הצעדים הבאים כדי להתחיל להשתמש במשאבים הללו:
1. **העתק את המאגר**: לחץ על [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **שכפל את המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**הצטרף ל-Azure AI Foundry בדיסקורד ופגוש מומחים ומפתחים אחרים**](https://discord.com/invite/ByRwuEEgH4)
עקבו אחר השלבים הבאים כדי להתחיל להשתמש במשאבים אלו:
1. **שכפלו את המאגר**: לחצו [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **העתיקו את המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**הצטרפו ל-Discord של Azure AI Foundry ופגשו מומחים ומפתחים אחרים**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 תמיכה בריבוי שפות
#### נתמך באמצעות GitHub Action (אוטומטי ותמיד מעודכן)
#### נתמך דרך GitHub Action (אוטומטי ותמיד מעודכן)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](./README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **מעדיף לשכפל מקומית?**
> **מעדיפים לשכפל מקומית?**
> מאגר זה כולל למעלה מ-50 שפות תרגום המגדילות משמעותית את גודל ההורדה. לשכפל ללא תרגומים, השתמש ב־sparse checkout:
> מאגר זה כולל מעל 50 תרגומים המוסיפים משמעותית לגודל ההורדה. לשכפול ללא תרגומים, השתמשו ב-sparse checkout:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> זה נותן לך את כל מה שאתה צריך כדי להשלים את הקורס במהירות הורדה גבוהה יותר.
> זה נותן לכם כל מה שנדרש להשלמת הקורס עם הורדה מהירה יותר.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**אם תרצה ששפות תרגום נוספות יתמכו הן מופיעות [כאן](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**אם ברצונכם שיתווספו שפות תרגום נוספות, הן מפורטות [כאן](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _האם אתה סטודנט?_
#### 🧑‍🎓 _אתה סטודנט?_
בקר ב[**דף מרכז הסטודנט**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) שם תמצא מקורות למתחילים, חבילות לסטודנטים ואפילו דרכים לקבל שובר לתעודה חינמית. זהו הדף שתרצה לסמן ולבדוק מפעם לפעם כשאנו מחליפים תוכן מדי חודש.
בקר ב[**עמוד הסטודנט**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) שם תמצא מקורות למתחילים, ערכות לסטודנטים ואפילו דרכים לקבל שובר תעודה חינם. זה העמוד שתרצה לשמור ולהיכנס אליו בין פעם לפעם ככל שהתוכן מתעדכן מדי חודש.
### 📣 הכרזה - אתגרי מצב סוכן GitHub Copilot חדשים להשלים!
### 📣 הכרזה - אתגרים חדשים של GitHub Copilot Agent להשלמה!
אתגר חדש נוסף, חפש את "GitHub Copilot Agent Challenge 🚀" ברוב הפרקים. זה אתגר חדש עבורך להשלים בעזרת GitHub Copilot ומצב סוכן. אם לא השתמשת במצב סוכן קודם לכן, הוא מסוגל לא רק לייצר טקסט אלא גם ליצור ולערוך קבצים, להריץ פקודות ועוד.
התווסף אתגר חדש, חפשו "GitHub Copilot Agent Challenge 🚀" ברוב הפרקים. זה אתגר חדש שתוכלו להשלים באמצעות GitHub Copilot ומצב סוכן. אם לא השתמשתם במצב סוכן קודם, הוא לא רק מייצר טקסט, אלא גם מסוגל ליצור ולערוך קבצים, להריץ פקודות ועוד.
### 📣 הכרזה - _פרויקט חדש לבנות בעזרת AI גנרטיבי_
### 📣 הכרזה - _פרויקט חדש לבנייה עם AI גנרטיבי_
פרויקט עוזר AI חדש הוסף זה עתה, בדוק אותו [project](./9-chat-project/README.md)
פרויקט עוזר AI חדש נוסף, בדקו [את הפרויקט](./9-chat-project/README.md)
### 📣 הכרזה - _תוכנית לימודים חדשה_ על AI גנרטיבי עבור JavaScript שוחררה זה עתה
### 📣 הכרזה - _תוכנית לימודים חדשה_ על AI גנרטיבי עבור JavaScript שוחררה
אל תפספס את תוכנית ה-AI הגנרטיבי החדשה שלנו!
אל תפספסו את תוכנית ה-AI הגנרטיבי החדשה שלנו!
בקר ב-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) כדי להתחיל!
בקרו בכתובת [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) כדי להתחיל!
![Background](../../translated_images/he/background.148a8d43afde5730.webp)
- שיעורים המכסים הכל מהבסיס עד RAG.
- אינטראקציה עם דמויות היסטוריות בעזרת GenAI ואפליקציית הליווי שלנו.
- סיפור מהנה ומרתק, תצא למסע בזמן!
- שיעורים שמכסים הכל מהיסודות ועד RAG.
- אינטראקציה עם דמויות היסטוריות באמצעות GenAI ואפליקציית הליווי שלנו.
- תסריטוני כיף ומרתק, תעברו בזמן!
![character](../../translated_images/he/character.5c0dd8e067ffd693.webp)
כל שיעור כולל משימה להשלים, בדיקת ידע ואתגר שינחה אותך בנושאים כמו:
- יצירת prompt והנדסת prompt
כל שיעור כולל משימה להשלמה, בדיקת ידע ואתגר שידריכו אתכם בנושא כמו:
- הפעלה והנדסת פקודות Prompting
- יצירת אפליקציות טקסט ותמונה
- אפליקציות חיפוש
בקר ב-[https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) כדי להתחיל!
בקרו ב-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) כדי להתחיל!
## 🌱 התחלה
> **מורים**, כלולנו [הצעות](for-teachers.md) כיצד להשתמש בתוכנית זו. נשמח למשוב שלכם [בפורום הדיון](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **מדריכים**, כללנו [הצעות](for-teachers.md) לאופן השימוש בתוכנית זו. נשמח למשובכם [בפורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, עבור כל שיעור, התחל עם חידון לפני ההרצאה והמשך בקריאת חומר ההרצאה, השלמת הפעילויות השונות ובדוק את הבנתך עם חידון אחרי ההרצאה.
**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, לכל שיעור, התחילו בחידון טרם ההרצאה ועברו על חומר ההרצאה, השלימו פעילויות שונות ובדקו את הבנתכם בחידון לאחר ההרצאה.
כדי לשפר את חוויית הלמידה שלך, התחבר עם חבריך לעבודה על הפרויקטים ביחד! אנו מעודדים דיונים ב[פורום הדיון שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) שבו צוות המנהלים שלנו יעמוד לרשותך עם תשובות לשאלות.
כדי לשפר את חוויית הלמידה, התחברו עם חבריכם לעבודה משותפת על הפרויקטים! דיונים מעודדים בפורום הדיונים שלנו בכתובת [https://github.com/microsoft/Web-Dev-For-Beginners/discussions](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) שם צוות המודרטורים שלנו זמין לענות על שאלותיכם.
להעמקת ההשכלה שלך, אנו ממליצים בחום לחקור את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) עבור חומרים נוספים ללימוד.
להרחבת ההשכלה שלכם, אנו ממליצים בחום לבדוק את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) לחומרים נוספים ללימוד.
### 📋 הגדרת סביבת העבודה שלך
### 📋 הקמת סביבת הפיתוח שלכם
לתוכנית זו יש סביבת פיתוח מוכנה! כאשר אתה מתחיל, תוכל לבחור להפעיל את התוכנית ב-[Codespace](https://github.com/features/codespaces/) (_סביבה מבוססת דפדפן ללא צורך בהתקנות_), או מקומית במחשב שלך בעזרת עורך טקסט כגון [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
לתוכנית הלימודים הזו יש סביבת פיתוח מוכנה! כשמתחילים, תוכלו לבחור להריץ את התוכנית ב-[Codespace](https://github.com/features/codespaces/) (_סביבת דפדפן, ללא צורך בהתקנות_), או מקומית במחשב שלכם באמצעות עורך טקסט כמו [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### צור את המאגר שלך
כדי שתוכל לשמור את העבודה שלך בקלות, מומלץ ליצור עותק משלך של המאגר הזה. ניתן לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש הדף. פעולה זו תיצור מאגר חדש בחשבון GitHub שלך עם עותק של תוכנית הלימודים.
#### צרו את המאגר שלכם
כדי שיהיה לכם קל לשמור את העבודה, מומלץ ליצור העתק משלכם של המאגר. תוכלו לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש הדף. זה ייצור מאגר חדש בחשבון GitHub שלכם עם העתק של תוכנית הלימודים.
עקוב אחרי הצעדים הבאים:
1. **העתק את המאגר**: לחץ על כפתור "Fork" בפינה הימנית העליונה של עמוד זה.
2. **שכפל את המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
עקבו אחר השלבים הבאים:
1. **שכפלו את המאגר**: לחצו על כפתור "Fork" בפינה הימנית-עליונה של הדף.
2. **העתיקו את המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### הפעלת התוכנית ב-Codespace
#### הרצת תוכנית הלימודים ב-Codespace
בעותק שלך של המאגר שיצרת, לחץ על כפתור **Code** ובחר **Open with Codespaces**. פעולה זו תיצור עבורך Codespace חדש לעבודה.
בעותק המאגר שיצרתם, לחצו על כפתור **Code** ובחרו **Open with Codespaces**. זה ייצור לכם Codespace חדש לעבודה.
![Codespace](../../translated_images/he/createcodespace.0238bbf4d7a8d955.webp)
#### הפעלת התוכנית במחשב המקומי שלך
#### הרצת תוכנית הלימודים במחשב שלכם
כדי להפעיל תוכנית זו במחשב המקומי שלך, תזדקק לעורך טקסט, דפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [מבוא לשפות תכנות וכלי מסחר](../../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>` בקישור שהעתקת כעת:
```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/)
> **הערה לגבי חידונים**: כל החידונים נמצאים בתיקיית Quiz-app, סה"כ 48 חידונים עם שלוש שאלות כל אחד. הם זמינים [כאן](https://ff-quizzes.netlify.app/web/) ואפליקציית החידון יכולה לפעול באופן מקומי או להיות מופעלת ב-Azure; עקבו אחר ההוראות בתיקיית `quiz-app`.
> **הערה לגבי חידונים**: כל החידונים נמצאים בתיקיית Quiz-app, סך הכול 48 חידונים עם שלוש שאלות כל אחד. הם זמינים [כאן](https://ff-quizzes.netlify.app/web/) אפליקציית החידונים יכולה לפעול מקומית או להיות מופעלת באז'ור; עקוב אחר ההוראות בתיקיית `quiz-app`.
## 🗃️ שיעורים
| | שם הפרויקט | מושגים הנלמדים | מטרות הלמידה | שיעור מקושר | מחבר |
| :-: | :------------------------------------------------------: | :------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :--------------------: |
| 01 | התחלה | מבוא לתכנות וכלי העבודה | ללמוד את היסודות הבסיסיים שמאחורי רוב שפות התכנות ועל התוכנות המסייעות למפתחים מקצועיים בביצוע עבודתם | [מבוא לשפות תכנות וכלי העבודה](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | התחלה | יסודות GitHub, כולל עבודה בצוות | כיצד להשתמש ב-GitHub בפרויקט שלך, וכיצד לשתף פעולה עם אחרים על בסיס קוד | [מבוא ל-GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | התחלה | נגישות | ללמוד את היסודות של נגישות באינטרנט | [יסודות נגישות](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| | שם הפרויקט | מושגים שנלמדים | מטרות הלמידה | שיעור קשור | מחבר |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | התחלה | מבוא לתכנות וכלי העבודה | ללמוד את היסודות הבסיסיים של רוב שפות התכנות ועל תוכנה שעוזרת למפתחים מקצועיים לבצע את עבודתם | [מבוא לשפות תכנות וכלי עבודה](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | התחלה | יסודות GitHub, כולל עבודה בצוות | כיצד להשתמש ב-GitHub בפרויקט שלך, כיצד לשתף פעולה עם אחרים על בסיס קוד | [מבוא ל-GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | התחלה | נגישות | ללמוד את יסודות הנגישות באינטרנט | [יסודות הנגישות](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | יסודות JS | סוגי נתונים ב-JavaScript | היסודות של סוגי הנתונים ב-JavaScript | [סוגי נתונים](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | יסודות JS | פונקציות ושיטות | ללמוד על פונקציות ושיטות לניהול זרימת לוגיקת האפליקציה | [פונקציות ושיטות](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | יסודות JS | קבלת החלטות עם JS | ללמוד כיצד ליצור תנאים בקוד שלך באמצעות שיטות קבלת החלטות | [קבלת החלטות](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 05 | יסודות JS | פונקציות ומתודות | ללמוד על פונקציות ומתודות לניהול זרימת הלוגיקה של האפליקציה | [פונקציות ומתודות](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | יסודות JS | קבלת החלטות עם JS | ללמוד איך ליצור תנאים בקוד שלך באמצעות שיטות לקבלת החלטות | [קבלת החלטות](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | יסודות JS | מערכים ולולאות | עבודה עם נתונים באמצעות מערכים ולולאות ב-JavaScript | [מערכים ולולאות](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML בפרקטיקה | בניית ה-HTML ליצירת טרריום מקוון, התמקדות בבניית מיקום | [מבוא ל-HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS בפרקטיקה | בניית ה-CSS לעיצוב הטרריום המקוון, התמקדות ביסודות CSS כולל התאמת העמוד לתצוגה רספונסיבית | [מבוא ל-CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | סגירות ב-JavaScript, ניהול DOM | בניית קוד ה-JavaScript להפעלת הטרריום כממשק גרירה ושחרור, תוך התמקדות בסגירות וניהול ה-DOM | [סגירות JavaScript, ניהול DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./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 | ללמוד על ירושה עם מחלקות והרכבה, ועל תבנית הפרסום/ההרשמה, כהכנה לפיתוח משחק | [מבוא לפיתוח משחק מתקדם](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [משחק חלל](./6-space-game/solution/README.md) | ציור על הקנבס | ללמוד על API של Canvas, המשמש לציור אלמנטים על המסך | [ציור על הקנבס](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 08 | [טרריום](./3-terrarium/solution/README.md) | HTML בפועל | לבנות את ה-HTML ליצירת טרריום מקוון, התמקדות בבניית פריסת דף | [מבוא ל-HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [טרריום](./3-terrarium/solution/README.md) | CSS בפועל | לבנות את ה-CSS לעיצוב הטרריום המקוון, התמקדות ביסודות CSS כולל התאמת דף להגדרה רספונסיבית | [מבוא ל-CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [טרריום](./3-terrarium/solution/README.md) | סגירות JavaScript, מניפולציה של DOM | לבנות את הקוד ב-JavaScript להפעלת הטרריום כממשק גרירה ושחרור, עם דגש על סגירות ומניפולציה על ה-DOM | [סגירות JavaScript ומניפולציה על DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [משחק הקלדה](./4-typing-game/solution/README.md) | בניית משחק הקלדה | ללמוד איך להשתמש באירועי לוח מקשים כדי להניע את לוגיקת אפליקציית ה-JavaScript שלך | [תכנות מונחה אירועים](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | עבודה עם דפדפנים | ללמוד איך דפדפנים פועלים, ההיסטוריה שלהם וכיצד לבנות את האלמנטים הראשונים של תוסף דפדפן | [אודות דפדפנים](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | בניית טופס, קריאה ל-API ואחסון משתנים בזיכרון מקומי | לבנות את אלמנטי ה-JavaScript של תוסף הדפדפן שלך כדי לקרוא ל-API באמצעות משתנים המאוחסנים בזיכרון המקומי | [APIs, טפסים וזיכרון מקומי](./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 | ללמוד על ירושה באמצעות מחלקות וקומפוזיציה ודפוס הפרסום/הרשמה, כהכנה לבניית משחק | [מבוא לפיתוח משחק מתקדם](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [משחק חלל](./6-space-game/solution/README.md) | ציור על קנבס | ללמוד על Canvas API, המשמש לציור אלמנטים על המסך | [ציור על קנבס](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [משחק חלל](./6-space-game/solution/README.md) | הזזת אלמנטים על המסך | לגלות כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-Canvas API | [הזזת אלמנטים](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [משחק חלל](./6-space-game/solution/README.md) | זיהוי התנגשות | לגרום לאלמנטים להתנגש ולפעול זה כלפי זה באמצעות לחיצות מקשים ולספק פונקציית קירור כדי להבטיח ביצועים טובים של המשחק | [זיהוי התנגשות](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [משחק חלל](./6-space-game/solution/README.md) | שמירת ניקוד | ביצוע חישובים מתמטיים על סמך מצב וביצועי המשחק | [שמירת ניקוד](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [משחק חלל](./6-space-game/solution/README.md) | סיום והפעלה מחדש של המשחק | ללמוד על סיום והפעלה מחדש של המשחק, כולל ניקוי משאבים ואיפוס ערכי משתנים | [תנאי סיום](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | תבניות HTML ונתיבי ניווט באפליקציית אינטרנט | ללמוד כיצד ליצור את תצורת מבנה אתר מרובה עמודים באמצעות ניתוב ותבניות HTML | [תבניות ונתיבי ניווט HTML](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | בניית טופס התחברות והרשמה | ללמוד על בניית טפסים וטיפול בתהליכי אימות | [טפסים](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | שיטות אחזור ושימוש בנתונים | כיצד נתונים זורמים לתוך האפליקציה וממנה, כיצד לאחזר, לאחסן ולמחוק אותם | [נתונים](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | מושגי ניהול מצב | ללמוד כיצד האפליקציה שלך שומרת מצב וכיצד לנהל אותו תכנותית | [ניהול מצב](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [קוד דפדפן/VScode](../../8-code-editor) | עבודה עם VScode | ללמוד כיצד להשתמש בעורך קוד | [שימוש בעורך קוד VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [עוזרי AI](./9-chat-project/README.md) | עבודה עם AI | ללמוד כיצד לבנות עוזר AI אישי | [פרויקט עוזר AI](./9-chat-project/README.md) | Chris |
| 18 | [משחק חלל](./6-space-game/solution/README.md) | איתור התנגשויות | לגרום לאלמנטים להתנגש ולהגיב זה לזה באמצעות לחיצות מקשים ולספק פונקציית קירור לוודא ביצועים טובים במשחק | [איתור התנגשויות](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [משחק חלל](./6-space-game/solution/README.md) | ניהול ניקוד | ביצוע חישובים מתמטיים בהתאם למצב ולביצועי המשחק | [ניהול ניקוד](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [משחק חלל](./6-space-game/solution/README.md) | סיום והתחלה מחדש של המשחק | ללמוד על סיום והתחלה מחדש של המשחק, כולל ניקוי משאבים ואתחול ערכי משתנים | [תנאי סיום](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | תבניות HTML ונתיבים באפליקציית רשת | ללמוד איך ליצור את השלד של אתר רב-דפי באמצעות ניתוב ותבניות HTML | [תבניות HTML ונתיבים](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | בניית טופס התחברות והרשמה | ללמוד על בניית טפסים וטיפול בוולידציה | [טפסים](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | דרכי שליפה ושימוש בנתונים | כיצד זורמים הנתונים אל תוך האפליקציה וממנה, כיצד לשלוף, לאחסן ולהיפטר מהם | [נתונים](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | מושגי ניהול מצב | ללמוד כיצד האפליקציה שומרת ומנהלת מצב תכנית | [ניהול מצב](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [קוד דפדפן / VScode](../../8-code-editor) | עבודה עם VScode | ללמוד כיצד להשתמש בעורך קוד| [שימוש בעורך קוד VScode](./8-code-editor/1-using-a-code-editor/README.md) | כריס |
| 26 | [עוזרי AI](./9-chat-project/README.md) | עבודה עם AI | ללמוד איך לבנות עוזר AI משלך | [פרויקט עוזר AI](./9-chat-project/README.md) | כריס |
## 🏫 פדגוגיה
תוכנית הלימודים שלנו מתוכננת עם שני עקרונות פדגוגיים מרכזיים:
תכנית הלימודים שלנו מעוצבת עם שני עקרונות פדגוגיים מרכזיים:
* למידה מבוססת פרויקטים
* חידונים תכופים
התכנית מלמדת את היסודות של JavaScript, HTML ו-CSS, כמו גם את הכלים והטכניקות העדכניים ביותר בהם משתמשים מפתחי האינטרנט של היום. לסטודנטים תהיה הזדמנות לפתח ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון Invader מהחלל, ואפליקציית בנקאות לעסקים. בסיום הסדרה, הסטודנטים ירכשו הבנה יציבה של פיתוח אינטרנט.
הبرنامج מלמד את יסודות ה-JavaScript, HTML ו-CSS, וכן את הכלים והטכניקות העדכניות ביותר שמשתמשים בהם מפתחי אתרים כיום. לתלמידים תהיה הזדמנות לפתח ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון חלל-פולשנים, ואפליקציית בנקאות לעסקים. עם סיום הסדרה, התלמידים ירכשו הבנה מעמיקה של פיתוח אינטרנט.
> 🎓 ניתן ללמוד את השיעורים הראשונים בתוכנית זו כ-[נתיב למידה](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) באתר Microsoft Learn!
> 🎓 תוכל לקחת את השיעורים הראשונים בתכנית זו כ-[נתיב למידה](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) באתר Microsoft Learn!
באמצעות הבטחה שהתוכן יתאים לפרויקטים, התהליך נעשה יותר מעניין עבור הסטודנטים ושימור המושגים יתגבר. בנוסף, כתבנו כמה שיעורים התחלתיים ביסודות JavaScript להיכרות עם מושגים, יחד עם וידאו מהאוסף "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" המכיל מדריכי וידאו, חלקם אף תרמו לתוכנית זו.
על ידי וידוא שהתוכן מתאים לפרויקטים, התהליך הופך למרתק יותר עבור התלמידים ושימור המושגים ישתפר. בנוסף, כתבנו כמה שיעורים התחלתיים ביסודות JavaScript כדי להציג מושגים, יחד עם וידאו מ"קולקציית הסדרה למתחילים ב-JavaScript" (קישור) וחלק מהמחברים בה גם תרמו לתכנית זו.
בנוסף, חידון בעל סיכון נמוך לפני השיעור מגדיר את כוונתו של התלמיד ללמוד נושא, בעוד שחידון שני לאחר השיעור מבטיח שימור נוסף. תוכנית הלימודים הזו עוצבה להיות גמישה ומהנה וניתן ללמוד אותה במלואה או בחלקה. הפרויקטים מתחילים קטנים ומתקדמים בצורה מורכבת יותר עד לסיום מחזור 12 השבועות.
בנוסף, חידון זול לפני השיעור קובע את כוונת התלמיד ללמוד נושא, בעוד חידון שני אחרי השיעור מבטיח שימור נוסף. תכנית זו תוכננה להיות גמישה ומהנה וניתן לקחת אותה כולה או חלקית. הפרויקטים מתחילים קטנים והופכים למורכבים יותר עד סוף מחזור של 12 שבועות.
אמנם החלטנו במודע להימנע מלהציג מסגרות 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 דרך קולקציית וידאו אחרת: "[סדרה למתחילים ל-Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> בקרו ב[קוד התנהגות](CODE_OF_CONDUCT.md) וב[הנחיות לתרומה](CONTRIBUTING.md). נשמח למשוב בונה שלכם!
> בקר ב-[קוד ההתנהגות שלנו](CODE_OF_CONDUCT.md) ובקווים המנחים ל[תרומה](CONTRIBUTING.md). נשמח למשוב בונה ממך!
## 🧭 גישה לא מקוונת
ניתן להפעיל תיעוד זה במצב לא מקוון באמצעות [Docsify](https://docsify.js.org/#/). צרפו את הריפוזיטורי הזה, [התקינו את Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלכם, ואז בתיקיית השורש של הריפוזיטורי הזה, הקלידו `docsify serve`. האתר יפעל על פורט 3000 ב-localhost שלכם: `localhost:3000`.
תוכל להפעיל תיעוד זה במצב לא מקוון על ידי שימוש ב-[Docsify](https://docsify.js.org/#/). פצל את הריפו, [התקן את Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלך, ואז בתיקיית השורש של הריפו, הקלד `docsify serve`. האתר יופעל על פורט 3000 ב-localhost שלך: `localhost:3000`.
## 📘 PDF
קובץ PDF של כל השיעורים זמין [כאן](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
ניתן למצוא PDF של כל השיעורים [כאן](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 קורסים נוספים
הצוות שלנו מייצר קורסים נוספים! בדקו:
הצוות שלנו מייצר קורסים נוספים! קראו עוד:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain4j למתחילים](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js למתחילים](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain למתחילים](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / סוכנים
[![AZD למתחילים](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI למתחילים](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP למתחילים](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![סוכני AI למתחילים](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### סדרת AI יצירתי
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### סדרת בינה מלאכותית מחוללת
[![בינה מלאכותית מחוללת למתחילים](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![בינה מלאכותית מחוללת (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![בינה מלאכותית מחוללת (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![בינה מלאכותית מחוללת (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### לימוד בסיסי
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### למידה בסיסית
[![למידת מכונה למתחילים](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![מדע הנתונים למתחילים](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![בינה מלאכותית למתחילים](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![אבטחת סייבר למתחילים](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![פיתוח ווב למתחילים](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![אינטרנט של הדברים למתחילים](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![פיתוח XR למתחילים](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### סדרת קופיילוט
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
### סדרת קופילוט
[![קופילוט לתכנות זוגי עם AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![קופילוט ל-C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![הרפתקאות קופילוט](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## לקבלת עזרה
## קבלת עזרה
אם אתם נתקעים או יש לכם שאלות לגבי בניית אפליקציות AI. הצטרפו ללומדים אחרים ומפתחים מנוסים בדיונים על MCP. זו קהילה תומכת שבה שאלות מתקבלות בברכה והידע משותף בחופשיות.
אם אתה נתקל בקשיים או שיש לך שאלות בנוגע לבניית אפליקציות AI. הצטרף ללומדים ולעורכי תוכנה מנוסים בדיונים על MCP. זו קהילה תומכת שבה שאלות מתקבלות בשמחה והידע משותף בחופשיות.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
אם יש לכם משוב על המוצר או שגיאות בזמן הבנייה בקרו ב:
אם יש לך משוב על המוצר או שגיאות בזמן הבנייה, בקר ב:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## רישיון
מאגר זה מורשה תחת רישיון MIT. ראו את קובץ [LICENSE](../../LICENSE) לפרטים נוספים.
מאגר זה מורשה תחת רישיון MIT. ראה את הקובץ [LICENSE](../../LICENSE) לפרטים נוספים.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב למקור המוסמך. למידע קריטי מומלץ להשתמש בתרגום מקצועי אנושי. אנו לא נשא באחריות לכל הבנה שגויה או פרשנות מוטעית הנובעת מהשימוש בתרגום זה.
**כתב ויתור:**
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון כי תרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית יהווה את המקור הרשמי והמחייב. למידע קריטי מומלץ להשתמש בתרגום מקצועי על ידי מתרגם אנושי. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעים משימוש בתרגום זה.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/he/Roadmap.md
Unescape View File

@ -0,0 +1,53 @@
# מפת דרכים למאגר Web-Dev-For-Beginners של מיקרוסופט
**מאגר זה מספק מפת דרכים ללמידת יסודות פיתוח ווב עם דגש על JavaScript, HTML ו-CSS. תוכנית הלימודים גמישה וניתנת ללמידה במלואה או בחלקה, כאשר 24 שיעורים מפוזרים על פני 12 שבועות.**
## אבני דרך מרכזיות
* **שבועות 1-3:**
* מבוא לשפות תכנות וכלי העבודה
* יסודות GitHub
* נגישות
* יסודות JS: סוגי נתונים, פונקציות ומתודות
* קבלת החלטות ב-JS
* **שבועות 4-6:**
* מערכים ולולאות
* Terrarium: HTML במעשה
* CSS במעשה
* סגירות ב-JavaScript
* מניפולציה של DOM
* **שבועות 7-9:**
* משחק הקלדה: תכנות מונחה אירועים
* תוסף דפדפן ירוק: עבודה עם דפדפנים
* בניית טופס, קריאה ל-API ואחסון משתנים בזיכרון מקומי
* תהליכים ברקע בדפדפן
* ביצועי ווב
* **שבועות 10-12:**
* משחק חלל: פיתוח משחק מתקדם יותר ב-JavaScript
* ציור על קנבס
* הזזת אלמנטים על המסך
* זיהוי התנגשות
* ניהול ניקוד, סיום והפעלה מחדש של המשחק
* אפליקציית בנקאות: תבניות HTML ונתיבים באפליקציית ווב
* בניית טופס התחברות והרשמה
* שיטות אחזור ושימוש בנתונים
* עקרונות ניהול סטייט
## תוצאות הלמידה
**על ידי השלמת מפת דרכים זו, התלמידים ירכשו ניסיון מעשי בבניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון מתקיף חלל, ואפליקציית בנקאות לעסקים. בנוסף, הם יפתחו הבנה מוצקה של יסודות פיתוח ווב.**
## משאבים נוספים
* מאגר זה מספק שפע של משאבים ללמידה נוספת, כולל מדריכים, דוגמאות קוד ואתגרים.
* פלטפורמת Microsoft Learn מציעה מגוון קורסים ונתיבי למידה בפיתוח ווב.
* קהילות מקוונות כמו Stack Overflow ו-MDN Web Docs מספקות תמיכה ומשאבים יקרים ערך למפתחי ווב.
**אני מקווה שמפת דרכים זו תעזור לך במסלול הפיתוח ווב שלך!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדייק, יש לקחת בחשבון כי תרגומים אוטומטיים עלולים להכיל טעויות או אי דיוקים. המסמך המקורי בשפתו המקורית מהווה את המקור המוסמך. למידע קריטי מומלץ להשתמש בתרגום מקצועי שנערך על ידי אדם. איננו אחראים על כל הבנה שגויה או פרשנות מוטעית הנובעת מהשימוש בתרגום זה.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

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

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:34:08+00:00",
"translation_date": "2026-02-06T17:51:05+00:00",
"source_file": "AGENTS.md",
"language_code": "id"
},
@ -516,11 +516,17 @@
"language_code": "id"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T18:46:22+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T17:47:18+00:00",
"source_file": "README.md",
"language_code": "id"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T17:47:58+00:00",
"source_file": "Roadmap.md",
"language_code": "id"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-27T21:58:43+00:00",

294
translations/id/AGENTS.md
Unescape View File

@ -2,43 +2,43 @@
## Gambaran Proyek
Ini adalah repositori kurikulum pendidikan untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini merupakan kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, dengan 24 pelajaran praktis yang mencakup JavaScript, CSS, dan HTML.
Ini adalah repositori kurikulum pendidikan untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini merupakan kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktis yang mencakup JavaScript, CSS, dan HTML.
### Komponen Utama
- **Konten Pendidikan**: 24 pelajaran terstruktur yang diorganisasi ke dalam modul berbasis proyek
- **Konten Pendidikan**: 24 pelajaran terstruktur yang disusun dalam modul berbasis proyek
- **Proyek Praktis**: Terrarium, Permainan Mengetik, Ekstensi Browser, Permainan Luar Angkasa, Aplikasi Perbankan, Editor Kode, dan Asisten Chat AI
- **Kuis Interaktif**: 48 kuis dengan masing-masing 3 pertanyaan (penilaian sebelum/sesudah pelajaran)
- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan masing-masing (penilaian sebelum/sesudah pelajaran)
- **Dukungan Multi-bahasa**: Terjemahan otomatis untuk lebih dari 50 bahasa melalui GitHub Actions
- **Teknologi**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (untuk proyek AI)
### Arsitektur
- Repositori pendidikan dengan struktur berbasis pelajaran
- Repositori edukasi dengan struktur berbasis pelajaran
- Setiap folder pelajaran berisi README, contoh kode, dan solusi
- Proyek mandiri dalam direktori terpisah (quiz-app, berbagai proyek pelajaran)
- Sistem terjemahan menggunakan GitHub Actions (co-op-translator)
- Dokumentasi disajikan melalui Docsify dan tersedia dalam format PDF
- Proyek mandiri di direktori terpisah (quiz-app, berbagai proyek pelajaran)
- Sistem penerjemahan menggunakan GitHub Actions (co-op-translator)
- Dokumentasi disajikan via Docsify dan tersedia dalam format PDF
## Perintah Pengaturan
## Perintah Setup
Repositori ini terutama untuk konsumsi konten pendidikan. Untuk bekerja dengan proyek tertentu:
Repositori ini terutama untuk konsumsi konten edukasi. Untuk bekerja dengan proyek tertentu:
### Pengaturan Repositori Utama
### Setup Repositori Utama
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Pengaturan Aplikasi Kuis (Vue 3 + Vite)
### Setup Quiz App (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # Mulai server pengembangan
npm run build # Bangun untuk produksi
npm run lint # Jalankan ESLint
```
### API Proyek Bank (Node.js + Express)
@ -46,9 +46,9 @@ npm run lint # Run ESLint
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # Mulai server API
npm run lint # Jalankan ESLint
npm run format # Format dengan Prettier
```
### Proyek Ekstensi Browser
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# Ikuti petunjuk pemuatan ekstensi spesifik browser
```
### Proyek Permainan Luar Angkasa
@ -64,7 +64,7 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# Buka index.html di browser atau gunakan Live Server
```
### Proyek Chat (Backend Python)
@ -72,7 +72,7 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# Atur variabel lingkungan GITHUB_TOKEN
python api.py
```
@ -84,68 +84,68 @@ python api.py
2. **Clone fork Anda** secara lokal
3. **Buat cabang baru** untuk perubahan Anda
4. Lakukan perubahan pada konten pelajaran atau contoh kode
5. Uji perubahan kode di direktori proyek terkait
6. Kirim pull request sesuai panduan kontribusi
5. Uji setiap perubahan kode di direktori proyek terkait
6. Ajukan pull request sesuai panduan kontribusi
### Untuk Pelajar
### Untuk Pembelajar
1. Fork atau clone repositori
2. Navigasikan ke direktori pelajaran secara berurutan
2. Navigasi ke direktori pelajaran secara berurutan
3. Baca file README untuk setiap pelajaran
4. Selesaikan kuis sebelum pelajaran di https://ff-quizzes.netlify.app/web/
5. Kerjakan contoh kode di folder pelajaran
5. Kerjakan contoh kode dalam folder pelajaran
6. Selesaikan tugas dan tantangan
7. Ikuti kuis setelah pelajaran
### Pengembangan Langsung
- **Dokumentasi**: Jalankan `docsify serve` di root (port 3000)
- **Aplikasi Kuis**: Jalankan `npm run dev` di direktori quiz-app
- **Proyek**: Gunakan ekstensi Live Server di VS Code untuk proyek HTML
- **Proyek API**: Jalankan `npm start` di direktori API terkait
- **Quiz App**: Jalankan `npm run dev` di direktori quiz-app
- **Proyek**: Gunakan ekstensi VS Code Live Server untuk proyek HTML
- **API Proyek**: Jalankan `npm start` di direktori API masing-masing
## Instruksi Pengujian
### Pengujian Aplikasi Kuis
### Pengujian Quiz App
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # Periksa masalah gaya kode
npm run build # Verifikasi build berhasil
```
### Pengujian API Bank
### Pengujian Bank API
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # Periksa masalah gaya kode
node server.js # Verifikasi server mulai tanpa kesalahan
```
### Pendekatan Pengujian Umum
- Ini adalah repositori pendidikan tanpa pengujian otomatis yang komprehensif
- Pengujian manual berfokus pada:
- Contoh kode berjalan tanpa kesalahan
- Tautan dalam dokumentasi berfungsi dengan benar
- Proyek berhasil dibangun
- Ini adalah repositori edukasi tanpa pengujian otomatis lengkap
- Pengujian manual fokus pada:
- Contoh kode berjalan tanpa error
- Tautan di dokumentasi berfungsi dengan benar
- Build proyek selesai dengan sukses
- Contoh mengikuti praktik terbaik
### Pemeriksaan Sebelum Pengiriman
### Pemeriksaan Pra-pengajuan
- Jalankan `npm run lint` di direktori dengan package.json
- Verifikasi tautan markdown valid
- Uji contoh kode di browser atau Node.js
- Pastikan terjemahan mempertahankan struktur yang benar
- Periksa bahwa terjemahan mempertahankan struktur yang benar
## Panduan Gaya Kode
## Pedoman Gaya Kode
### JavaScript
- Gunakan sintaks ES6+ modern
- Ikuti konfigurasi ESLint standar yang disediakan dalam proyek
- Gunakan nama variabel dan fungsi yang bermakna untuk kejelasan pendidikan
- Tambahkan komentar yang menjelaskan konsep untuk pelajar
- Ikuti konfigurasi ESLint standar yang disediakan di proyek
- Gunakan nama variabel dan fungsi yang bermakna untuk kejelasan edukasi
- Tambahkan komentar menjelaskan konsep untuk pembelajar
- Format menggunakan Prettier jika dikonfigurasi
### HTML/CSS
@ -153,130 +153,130 @@ node server.js # Verify server starts without errors
- Elemen HTML5 semantik
- Prinsip desain responsif
- Konvensi penamaan kelas yang jelas
- Komentar yang menjelaskan teknik CSS untuk pelajar
- Komentar menjelaskan teknik CSS untuk pembelajar
### Python
- Panduan gaya PEP 8
- Pedoman gaya PEP 8
- Contoh kode yang jelas dan edukatif
- Petunjuk tipe di mana berguna untuk pembelajaran
- Tipe hint jika membantu pembelajaran
### Dokumentasi Markdown
- Hierarki judul yang jelas
- Hierarki heading yang jelas
- Blok kode dengan spesifikasi bahasa
- Tautan ke sumber daya tambahan
- Tangkapan layar dan gambar di direktori `images/`
- Teks alternatif untuk gambar demi aksesibilitas
- Teks alternatif untuk gambar guna aksesibilitas
### Organisasi File
### Organisasi Berkas
- Pelajaran diberi nomor secara berurutan (1-getting-started-lessons, 2-js-basics, dll.)
- Setiap proyek memiliki direktori `solution/` dan sering kali `start/` atau `your-work/`
- Pelajaran bernomor berurutan (1-getting-started-lessons, 2-js-basics, dll.)
- Setiap proyek memiliki direktori `solution/` dan sering `start/` atau `your-work/`
- Gambar disimpan di folder `images/` khusus pelajaran
- Terjemahan dalam struktur `translations/{language-code}/`
- Terjemahan di struktur `translations/{kode-bahasa}/`
## Pembangunan dan Penerapan
## Build dan Deployment
### Penerapan Aplikasi Kuis (Azure Static Web Apps)
### Deployment Quiz App (Azure Static Web Apps)
Aplikasi quiz-app dikonfigurasi untuk penerapan Azure Static Web Apps:
quiz-app dikonfigurasi untuk deployment Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # Membuat folder dist/
# Menerapkan melalui alur kerja GitHub Actions saat push ke main
```
Konfigurasi Azure Static Web Apps:
- **Lokasi aplikasi**: `/quiz-app`
- **Lokasi output**: `dist`
- **Alur kerja**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Pembuatan PDF Dokumentasi
### Generasi PDF Dokumentasi
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # Instal docsify-to-pdf
npm run convert # Hasilkan PDF dari docs
```
### Dokumentasi Docsify
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Instal Docsify secara global
docsify serve # Jalankan di localhost:3000
```
### Pembangunan Proyek Khusus
### Build Proyek Spesifik
Setiap direktori proyek mungkin memiliki proses pembangunan sendiri:
- Proyek Vue: `npm run build` membuat bundel produksi
- Proyek statis: Tidak ada langkah pembangunan, langsung sajikan file
Setiap direktori proyek mungkin memiliki proses build sendiri:
- Proyek Vue: `npm run build` membuat bundle produksi
- Proyek statis: Tidak ada langkah build, sajikan file langsung
## Panduan Pull Request
### Format Judul
Gunakan judul yang jelas dan deskriptif yang menunjukkan area perubahan:
Gunakan judul yang jelas dan deskriptif menunjukkan area perubahan:
- `[Quiz-app] Tambahkan kuis baru untuk pelajaran X`
- `[Lesson-3] Perbaiki typo di proyek terrarium`
- `[Translation] Tambahkan terjemahan bahasa Spanyol untuk pelajaran 5`
- `[Docs] Perbarui instruksi pengaturan`
- `[Translation] Tambahkan terjemahan Spanyol untuk pelajaran 5`
- `[Docs] Perbarui instruksi setup`
### Pemeriksaan yang Diperlukan
### Pemeriksaan Wajib
Sebelum mengirimkan PR:
Sebelum mengajukan PR:
1. **Kualitas Kode**:
- Jalankan `npm run lint` di direktori proyek yang terpengaruh
- Perbaiki semua kesalahan dan peringatan linting
- Jalankan `npm run lint` di direktori proyek terkait
- Perbaiki semua error dan peringatan linting
2. **Verifikasi Pembangunan**:
2. **Verifikasi Build**:
- Jalankan `npm run build` jika berlaku
- Pastikan tidak ada kesalahan pembangunan
- Pastikan tidak ada error build
3. **Validasi Tautan**:
- Uji semua tautan markdown
- Verifikasi referensi gambar berfungsi
4. **Tinjauan Konten**:
- Periksa ejaan dan tata bahasa
4. **Review Konten**:
- Koreksi ejaan dan tata bahasa
- Pastikan contoh kode benar dan edukatif
- Verifikasi terjemahan mempertahankan makna asli
### Persyaratan Kontribusi
- Setuju dengan Microsoft CLA (pemeriksaan otomatis pada PR pertama)
- Ikuti [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Lihat [CONTRIBUTING.md](./CONTRIBUTING.md) untuk panduan rinci
- Referensikan nomor masalah dalam deskripsi PR jika berlaku
- Setujui Microsoft CLA (pemeriksaan otomatis di PR pertama)
- Ikuti [Kode Etik Open Source Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Lihat [CONTRIBUTING.md](./CONTRIBUTING.md) untuk panduan detail
- Cantumkan nomor isu di deskripsi PR jika berlaku
### Proses Tinjauan
### Proses Review
- PR ditinjau oleh pemelihara dan komunitas
- Kejelasan pendidikan diprioritaskan
- Contoh kode harus mengikuti praktik terbaik terkini
- Terjemahan ditinjau untuk akurasi dan kesesuaian budaya
- PR akan direview oleh pemelihara dan komunitas
- Kejelasan edukasi diutamakan
- Contoh kode harus mengikuti praktik terbaik saat ini
- Terjemahan direview untuk keakuratan dan kesesuaian budaya
## Sistem Terjemahan
### Terjemahan Otomatis
- Menggunakan GitHub Actions dengan alur kerja co-op-translator
- Menerjemahkan ke lebih dari 50 bahasa secara otomatis
- File sumber di direktori utama
- File terjemahan di direktori `translations/{language-code}/`
- Menggunakan GitHub Actions dengan workflow co-op-translator
- Menerjemahkan ke 50+ bahasa secara otomatis
- Berkas sumber di direktori utama
- Berkas terjemahan di direktori `translations/{kode-bahasa}/`
### Menambahkan Perbaikan Terjemahan Manual
1. Temukan file di `translations/{language-code}/`
1. Temukan berkas di `translations/{kode-bahasa}/`
2. Lakukan perbaikan sambil mempertahankan struktur
3. Pastikan contoh kode tetap berfungsi
4. Uji konten kuis yang dilokalkan
4. Uji konten kuis yang telah dilokalisasi
### Metadata Terjemahan
File terjemahan menyertakan header metadata:
Berkas terjemahan menyertakan header metadata:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,114 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Masalah Umum
**Aplikasi kuis gagal dimulai**:
**Quiz app gagal mulai**:
- Periksa versi Node.js (disarankan v14+)
- Hapus `node_modules` dan `package-lock.json`, jalankan `npm install` lagi
- Hapus `node_modules` dan `package-lock.json`, jalankan `npm install` kembali
- Periksa konflik port (default: Vite menggunakan port 5173)
**Server API tidak dapat dimulai**:
- Verifikasi versi Node.js memenuhi minimum (node >=10)
- Periksa apakah port sudah digunakan
- Pastikan semua dependensi diinstal dengan `npm install`
**Server API tidak mulai**:
- Pastikan versi Node.js memenuhi minimal (node >=10)
- Cek apakah port sudah digunakan
- Pastikan semua dependensi terpasang dengan `npm install`
**Ekstensi browser tidak dapat dimuat**:
- Verifikasi manifest.json diformat dengan benar
- Periksa konsol browser untuk kesalahan
- Ikuti instruksi instalasi ekstensi spesifik browser
**Ekstensi browser tidak dimuat**:
- Pastikan manifest.json diformat dengan benar
- Periksa konsol browser untuk error
- Ikuti instruksi instalasi ekstensi khusus browser
**Masalah proyek chat Python**:
- Pastikan paket OpenAI diinstal: `pip install openai`
- Verifikasi variabel lingkungan GITHUB_TOKEN diatur
- Pastikan paket OpenAI terpasang: `pip install openai`
- Pastikan variabel lingkungan GITHUB_TOKEN diatur
- Periksa izin akses GitHub Models
**Docsify tidak menyajikan dokumen**:
- Instal docsify-cli secara global: `npm install -g docsify-cli`
**Docsify tidak menyajikan docs**:
- Pasang docsify-cli secara global: `npm install -g docsify-cli`
- Jalankan dari direktori root repositori
- Periksa bahwa `docs/_sidebar.md` ada
- Pastikan `docs/_sidebar.md` ada
### Tips Lingkungan Pengembangan
- Gunakan VS Code dengan ekstensi Live Server untuk proyek HTML
- Instal ekstensi ESLint dan Prettier untuk format yang konsisten
- Pasang ekstensi ESLint dan Prettier untuk format konsisten
- Gunakan DevTools browser untuk debugging JavaScript
- Untuk proyek Vue, instal ekstensi Vue DevTools di browser
- Untuk proyek Vue, pasang ekstensi Vue DevTools di browser
### Pertimbangan Performa
- Jumlah file terjemahan yang besar (50+ bahasa) membuat clone penuh menjadi besar
- Gunakan clone dangkal jika hanya bekerja pada konten: `git clone --depth 1`
- Kecualikan terjemahan dari pencarian saat bekerja pada konten bahasa Inggris
- Proses pembangunan mungkin lambat pada run pertama (npm install, Vite build)
- Banyak berkas terjemahan (50+ bahasa) membuat clone penuh besar
- Gunakan clone dangkal jika hanya mengerjakan konten: `git clone --depth 1`
- Kecualikan terjemahan dari pencarian saat mengerjakan konten bahasa Inggris
- Proses build mungkin lambat pada run pertama (npm install, build Vite)
## Pertimbangan Keamanan
### Variabel Lingkungan
- Kunci API tidak boleh dikomit ke repositori
- Gunakan file `.env` (sudah ada di `.gitignore`)
- Dokumentasikan variabel lingkungan yang diperlukan dalam README proyek
- Kunci API jangan pernah di-commit ke repositori
- Gunakan berkas `.env` (sudah ada di `.gitignore`)
- Dokumentasikan variabel lingkungan yang dibutuhkan di README proyek
### Proyek Python
- Gunakan lingkungan virtual: `python -m venv venv`
- Jaga agar dependensi tetap diperbarui
- Token GitHub harus memiliki izin minimum yang diperlukan
- Perbarui dependensi secara rutin
- Token GitHub harus memiliki izin minimal yang diperlukan
### Akses GitHub Models
- Personal Access Tokens (PAT) diperlukan untuk GitHub Models
- Token harus disimpan sebagai variabel lingkungan
- Jangan pernah mengkomit token atau kredensial
- Token disimpan sebagai variabel lingkungan
- Jangan pernah commit token atau kredensial
## Catatan Tambahan
### Target Audiens
### Sasaran Audiens
- Pemula lengkap dalam pengembangan web
- Siswa dan pembelajar mandiri
- Pelajar dan pembelajar mandiri
- Guru yang menggunakan kurikulum di kelas
- Konten dirancang untuk aksesibilitas dan pembangunan keterampilan bertahap
### Filosofi Pendidikan
- Pendekatan pembelajaran berbasis proyek
- Pemeriksaan pengetahuan yang sering (kuis)
- Pemeriksaan pengetahuan secara berkala (kuis)
- Latihan coding langsung
- Contoh aplikasi dunia nyata
- Fokus pada dasar-dasar sebelum framework
- Fokus pada dasar sebelum framework
### Pemeliharaan Repositori
- Komunitas aktif pelajar dan kontributor
- Pembaruan rutin untuk dependensi dan konten
- Masalah dan diskusi dipantau oleh pemelihara
- Pembaruan terjemahan otomatis melalui GitHub Actions
- Komunitas pembelajar dan kontributor aktif
- Pembaruan rutin pada dependensi dan konten
- Isu dan diskusi dipantau oleh pemelihara
- Pembaruan terjemahan otomatis via GitHub Actions
### Sumber Daya Terkait
- [Modul Microsoft Learn](https://docs.microsoft.com/learn/)
- [Sumber daya Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) direkomendasikan untuk pelajar
- Kursus tambahan: Generative AI, Data Science, ML, IoT tersedia
- [Sumber Daya Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) direkomendasikan untuk pembelajar
- Kursus tambahan: AI Generatif, Data Science, ML, kurikulum IoT tersedia
### Bekerja dengan Proyek Tertentu
### Bekerja dengan Proyek Spesifik
Untuk instruksi rinci tentang 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 permainan berbasis Canvas
- `9-chat-project/README.md` - Proyek asisten chat AI
Untuk instruksi rinci tentang proyek individual, 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 bersifat mandiri
- Setiap pelajaran berdiri sendiri
- Proyek tidak berbagi dependensi
- Bekerja pada proyek individual tanpa memengaruhi yang lain
- Clone seluruh repositori untuk pengalaman kurikulum penuh
- Kerjakan proyek individual tanpa memengaruhi yang lain
- Clone seluruh repo untuk pengalaman kurikulum lengkap
---
<!-- 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 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 akurasi, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang salah yang timbul dari penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

160
translations/id/README.md
Unescape View File

@ -2,7 +2,7 @@
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
@ -12,52 +12,52 @@
# Pengembangan Web untuk Pemula - Kurikulum
Pelajari dasar-dasar pengembangan web dengan kursus komprehensif 12 minggu kami yang diselenggarakan oleh Microsoft Cloud Advocates. Setiap dari 24 pelajaran membahas JavaScript, CSS, dan HTML melalui proyek langsung seperti terarium, ekstensi browser, dan permainan luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan Anda dan optimalkan retensi pengetahuan dengan pedagogi berbasis proyek yang efektif ini. Mulai perjalanan pemrograman Anda hari ini!
Pelajari dasar-dasar pengembangan web dengan kursus komprehensif 12 minggu kami oleh Microsoft Cloud Advocates. Setiap 24 pelajaran mendalami JavaScript, CSS, dan HTML melalui proyek langsung seperti terarium, ekstensi browser, dan game luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan Anda dan optimalkan retensi pengetahuan dengan pedagogi berbasis proyek yang efektif. Mulai perjalanan pemrograman Anda hari ini!
Bergabunglah dengan Komunitas Discord Azure AI Foundry
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ikuti langkah-langkah ini untuk mulai menggunakan sumber daya ini:
Ikuti langkah-langkah berikut untuk mulai menggunakan sumber daya ini:
1. **Fork Repository**: Klik [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Bergabung dengan Azure AI Foundry Discord dan temui para ahli serta sesama pengembang**](https://discord.com/invite/ByRwuEEgH4)
3. [**Bergabung Dengan Azure AI Foundry Discord dan temui para ahli serta pengembang lain**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Dukungan Multi-Bahasa
#### Didukung melalui GitHub Action (Otomatis & Selalu Terbaru)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arab](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgaria](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Cina (Sederhana)](../zh-CN/README.md) | [Cina (Tradisional, Hong Kong)](../zh-HK/README.md) | [Cina (Tradisional, Macau)](../zh-MO/README.md) | [Cina (Tradisional, Taiwan)](../zh-TW/README.md) | [Kroasia](../hr/README.md) | [Ceko](../cs/README.md) | [Denmark](../da/README.md) | [Belanda](../nl/README.md) | [Estonia](../et/README.md) | [Finlandia](../fi/README.md) | [Prancis](../fr/README.md) | [Jerman](../de/README.md) | [Yunani](../el/README.md) | [Ibrani](../he/README.md) | [Hindi](../hi/README.md) | [Hungaria](../hu/README.md) | [Indonesia](./README.md) | [Italia](../it/README.md) | [Jepang](../ja/README.md) | [Kannada](../kn/README.md) | [Korea](../ko/README.md) | [Lituania](../lt/README.md) | [Melayu](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Pidgin Nigeria](../pcm/README.md) | [Norwegia](../no/README.md) | [Persia (Farsi)](../fa/README.md) | [Polandia](../pl/README.md) | [Portugis (Brasil)](../pt-BR/README.md) | [Portugis (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumania](../ro/README.md) | [Rusia](../ru/README.md) | [Serbia (Sirilik)](../sr/README.md) | [Slowakia](../sk/README.md) | [Slovenia](../sl/README.md) | [Spanyol](../es/README.md) | [Swahili](../sw/README.md) | [Swedia](../sv/README.md) | [Tagalog (Filipina)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thailand](../th/README.md) | [Turki](../tr/README.md) | [Ukraina](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnam](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](./README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Lebih suka Clone Secara Lokal?**
> **Ingin Clone Secara Lokal?**
> Repository ini mencakup lebih dari 50 bahasa terjemahan yang secara signifikan meningkatkan ukuran unduhan. Untuk clone tanpa terjemahan, gunakan sparse checkout:
> Repository ini mencakup lebih dari 50 terjemahan bahasa yang secara signifikan meningkatkan ukuran unduhan. Untuk clone tanpa terjemahan, gunakan sparse checkout:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Ini memberi Anda semua yang dibutuhkan untuk menyelesaikan kursus dengan pengunduhan yang jauh lebih cepat.
> Ini memberi Anda semua yang Anda butuhkan untuk menyelesaikan kursus dengan unduhan yang jauh lebih cepat.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jika Anda menginginkan dukungan bahasa terjemahan 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 bahasa terjemahan tambahan didukung, daftar tersedia [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Buka di Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Buka%20di%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Apakah Anda seorang pelajar?_
#### 🧑‍🎓 _Apakah Anda seorang siswa?_
Kunjungi [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) tempat Anda akan menemukan sumber daya pemula, paket Pelajar, dan bahkan cara mendapatkan voucher sertifikat gratis. Ini adalah halaman yang ingin Anda tandai dan kunjungi secara berkala karena kami mengganti konten setiap bulan.
Kunjungi [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) tempat Anda akan menemukan sumber daya pemula, paket siswa, dan bahkan cara mendapatkan voucher sertifikat gratis. Ini adalah halaman yang ingin Anda tandai dan periksa dari waktu ke waktu karena kontennya kami ganti setiap bulan.
### 📣 Pengumuman - Tantangan mode GitHub Copilot Agent baru untuk diselesaikan!
Tantangan baru ditambahkan, cari "GitHub Copilot Agent Challenge 🚀" di sebagian besar bab. Ini adalah tantangan baru bagi Anda untuk menyelesaikan menggunakan GitHub Copilot dan mode Agent. Jika Anda belum pernah menggunakan mode Agent sebelumnya, mode ini mampu tidak hanya menghasilkan teks tetapi juga membuat dan mengedit file, menjalankan perintah, dan lainnya.
Tantangan Baru ditambahkan, cari "GitHub Copilot Agent Challenge 🚀" di sebagian besar bab. Itu adalah tantangan baru untuk Anda selesaikan menggunakan GitHub Copilot dan mode Agen. Jika Anda belum pernah menggunakan mode Agen sebelumnya, mode ini mampu tidak hanya menghasilkan teks tetapi juga membuat dan mengedit file, menjalankan perintah, dan lainnya.
### 📣 Pengumuman - _Proyek Baru untuk Dibangun menggunakan Generative AI_
### 📣 Pengumuman - _Proyek Baru untuk dibangun menggunakan Generative AI_
Proyek Asisten AI baru baru saja ditambahkan, cek [proyek](./9-chat-project/README.md)
Proyek Asisten AI baru baru saja ditambahkan, cek di [proyek](./9-chat-project/README.md)
### 📣 Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru saja dirilis
### 📣 Pengumuman - _Kurikulum Baru_ mengenai Generative AI untuk JavaScript baru saja dirilis
Jangan lewatkan kurikulum Generative AI baru kami!
@ -65,40 +65,40 @@ Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk
![Background](../../translated_images/id/background.148a8d43afde5730.webp)
- Pelajaran mencakup segala sesuatu dari dasar hingga RAG.
- Berinteraksi dengan karakter bersejarah menggunakan GenAI dan aplikasi pendamping kami.
- Narasi yang menyenangkan dan menarik, Anda akan melakukan perjalanan waktu!
- Pelajaran mencakup semuanya dari dasar hingga RAG.
- Berinteraksi dengan karakter historis menggunakan GenAI dan aplikasi pendamping kami.
- Narasi yang seru dan menyenangkan, Anda akan melakukan perjalanan waktu!
![character](../../translated_images/id/character.5c0dd8e067ffd693.webp)
Setiap pelajaran mencakup tugas yang harus diselesaikan, pemeriksaan pengetahuan dan tantangan untuk membantu Anda mempelajari topik seperti:
Setiap pelajaran mencakup tugas yang harus diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk membimbing Anda mempelajari topik seperti:
- Prompting dan rekayasa prompt
- Pembuatan aplikasi teks dan gambar
- Pengembangan aplikasi teks dan gambar
- Aplikasi pencarian
Kunjungi [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) untuk memulai!
Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai!
## 🌱 Memulai
> **Para guru**, kami telah [menyediakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami sangat menginginkan umpan balik Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Para Pengajar**, kami telah [menyediakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami sangat menginginkan umpan balik Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis pra-kuliah dan ikuti dengan membaca materi kuliah, menyelesaikan berbagai aktivitas dan memeriksa pemahaman Anda dengan kuis pasca-kuliah.
**[Pembelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis pra-ceramah dan lanjutkan dengan membaca materi ceramah, menyelesaikan berbagai aktivitas, dan periksa pemahaman Anda dengan kuis pasca-ceramah.
Untuk meningkatkan pengalaman belajar Anda, hubungkan dengan rekan Anda untuk mengerjakan proyek bersama! Diskusi sangat dianjurkan di [forum diskusi](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kami di mana tim moderator kami akan tersedia untuk menjawab pertanyaan Anda.
Untuk meningkatkan pengalaman belajar Anda, hubungkan dengan teman sejawat Anda untuk bekerja pada 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 memperdalam pendidikan Anda, kami sangat menyarankan menjelajahi [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk materi belajar tambahan.
Untuk memperdalam 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
Kurikulum ini sudah dilengkapi dengan lingkungan pengembangan yang siap digunakan! Saat Anda memulai, Anda dapat memilih menjalankan kurikulum di [Codespace](https://github.com/features/codespaces/) (_lingkungan berbasis browser tanpa perlu instalasi_), atau secara lokal di komputer Anda menggunakan editor teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Kurikulum ini memiliki lingkungan pengembangan yang siap pakai! Saat Anda memulai, Anda dapat memilih menjalankan kurikulum di [Codespace](https://github.com/features/codespaces/) (_lingkungan berbasis browser tanpa perlu instalasi_), atau secara lokal di komputer Anda menggunakan editor teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Buat repository Anda
Agar Anda mudah menyimpan pekerjaan Anda, disarankan untuk membuat salinan repository ini sendiri. Anda dapat melakukannya dengan mengklik tombol **Use this template** di bagian atas halaman. Ini akan membuat repository baru di akun GitHub Anda dengan salinan kurikulum.
Untuk memudahkan menyimpan pekerjaan Anda, disarankan agar Anda membuat salinan repository ini. Anda dapat melakukannya dengan mengklik tombol **Use this template** di bagian atas halaman. Ini akan membuat repository baru di akun GitHub Anda dengan salinan kurikulum.
Ikuti langkah berikut:
Ikuti langkah-langkah ini:
1. **Fork Repository**: Klik tombol "Fork" di pojok kanan atas halaman ini.
2. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
@ -110,96 +110,96 @@ Di salinan repository yang Anda buat, klik tombol **Code** dan pilih **Open with
#### Menjalankan kurikulum secara lokal di komputer Anda
Untuk menjalankan kurikulum ini secara lokal di komputer Anda, Anda membutuhkan editor teks, browser, dan alat baris perintah. Pelajaran pertama kami, [Pengantar Bahasa Pemrograman dan Alat Dagang](../../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 terbaik untuk Anda.
Untuk menjalankan kurikulum ini secara lokal di komputer Anda, Anda memerlukan editor teks, browser, dan alat baris perintah. Pelajaran pertama kami, [Pengenalan Bahasa Pemrograman dan Alat Perdagangan](../../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 cocok.
Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai editor Anda, yang juga memiliki [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bawaan. Anda dapat mengunduh Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai editor, yang juga memiliki [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bawaan. Anda dapat mengunduh Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone repository Anda ke komputer Anda. Anda bisa melakukannya dengan mengklik tombol **Code** dan menyalin URL:
1. Clone repository Anda ke komputer. Anda dapat melakukannya dengan mengklik tombol **Code** dan menyalin URL:
[CodeSpace](./images/createcodespace.png)
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) di dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan perintah berikut, ganti `<your-repository-url>` dengan URL yang baru saja Anda salin:
Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) di dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan perintah berikut, ganti `<your-repository-url>` dengan URL yang baru saja Anda salin:
```bash
git clone <your-repository-url>
```
2. Buka folder di Visual Studio Code. Anda dapat melakukan ini dengan mengklik **File** > **Open Folder** dan memilih folder yang baru saja Anda kloning.
2. Buka folder di Visual Studio Code. Anda dapat melakukannya dengan mengklik **File** > **Open Folder** dan memilih folder yang baru saja Anda kloning.
> Ekstensi Visual Studio Code yang disarankan:
> Ekstensi Visual Studio Code yang direkomendasikan:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk melihat pratinjau halaman HTML di dalam Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - membantu Anda menulis kode lebih cepat
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - untuk membantu Anda menulis kode lebih cepat
## 📂 Setiap pelajaran mencakup:
- sketchnote opsional
- video pelengkap opsional
- video tambahan opsional
- kuis pemanasan sebelum pelajaran
- pelajaran tertulis
- untuk pelajaran berbasis proyek, panduan langkah demi langkah tentang cara membangun proyek
- untuk pelajaran berbasis proyek, panduan langkah demi langkah tentang cara membangun proyek tersebut
- pemeriksaan pengetahuan
- tantangan
- bacaan pelengkap
- bacaan tambahan
- tugas
- [kuis pasca pelajaran](https://ff-quizzes.netlify.app/web/)
- [kuis pasca-pelajaran](https://ff-quizzes.netlify.app/web/)
> **Catatan tentang kuis**: Semua kuis ada di folder Quiz-app, total 48 kuis dengan tiga pertanyaan masing-masing. Mereka tersedia [di sini](https://ff-quizzes.netlify.app/web/) aplikasi kuis dapat dijalankan secara lokal atau dideploy ke Azure; ikuti instruksi di folder `quiz-app`.
> **Catatan tentang kuis**: Semua kuis terdapat dalam folder Quiz-app, total 48 kuis dengan tiga pertanyaan masing-masing. Kuis tersedia [di sini](https://ff-quizzes.netlify.app/web/) aplikasi kuis dapat dijalankan secara lokal atau dideploy ke Azure; ikuti instruksi di folder `quiz-app`.
## 🗃️ Pelajaran
| | Nama Proyek | Konsep yang Diajarkan | Tujuan Pembelajaran | Pelajaran Terkait | Penulis |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Memulai | Pengenalan Pemrograman dan Alat-alat Kerja | Pelajari dasar-dasar yang mendasari sebagian besar bahasa pemrograman dan tentang perangkat lunak yang membantu pengembang profesional melakukan pekerjaannya | [Intro ke Bahasa Pemrograman dan Alat-alat Kerja](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Memulai | Dasar-dasar GitHub, termasuk bekerja dengan tim | Cara menggunakan GitHub dalam proyek Anda, cara berkolaborasi dengan orang lain pada basis kode | [Intro ke 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 di JavaScript | Dasar-dasar tipe data di 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 Perulangan | Bekerja dengan data menggunakan array dan perulangan di JavaScript | [Array dan Perulangan](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | Praktik HTML | Bangun HTML untuk membuat terrarium online, fokus pada membangun tata letak | [Pengenalan ke HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | Praktik CSS | Bangun CSS untuk memberi gaya pada terrarium online, fokus pada dasar-dasar CSS termasuk membuat halaman responsif | [Pengenalan ke 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, fokus pada closure 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 |
| 12 | [Ekstensi Browser Hijau](./5-browser-extension/solution/README.md) | Bekerja dengan Browser | Pelajari cara kerja browser, sejarahnya, dan cara membuat elemen pertama ekstensi browser | [Tentang Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Ekstensi Browser Hijau](./5-browser-extension/solution/README.md) | Membangun form, memanggil API dan menyimpan variabel di local storage | Bangun elemen JavaScript dari ekstensi browser Anda untuk memanggil API menggunakan variabel yang disimpan di local storage | [API, Form, dan Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Ekstensi Browser Hijau](./5-browser-extension/solution/README.md) | Proses latar belakang di browser, performa web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang performa web dan beberapa optimasi untuk membuat | [Tugas Latar Belakang dan Performa](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Pengembangan Game Tingkat Lanjut dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan untuk membangun game | [Pengenalan Pengembangan Game Lanjutan](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Menggambar ke canvas | Pelajari tentang Canvas API, digunakan untuk menggambar elemen ke layar | [Menggambar ke Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Memindahkan elemen di layar | Temukan bagaimana elemen dapat bergerak menggunakan koordinat kartesius dan Canvas API | [Memindahkan Elemen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Deteksi tabrakan | Membuat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan menyediakan fungsi cooldown untuk memastikan performa game | [Deteksi Tabrakan](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Menjaga skor | Melakukan perhitungan matematika berdasarkan status dan performa game | [Menjaga Skor](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Mengakhiri dan memulai ulang game | Pelajari tentang mengakhiri dan memulai ulang game, termasuk membersihkan aset dan 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 di Aplikasi Web | Pelajari cara membuat kerangka arsitektur situs web multipage menggunakan routing dan template HTML | [Template HTML dan Rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Membuat Form Login dan Registrasi | Pelajari tentang membangun form dan menangani rutinitas validasi | [Form](./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 aplikasi Anda, cara mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Manajemen Status | Pelajari bagaimana aplikasi Anda mempertahankan status dan bagaimana mengelolanya secara program | [Manajemen Status](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Bekerja dengan VScode | Pelajari cara Menggunakan editor kode | [Gunakan Editor Kode VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| | Nama Proyek | Konsep yang Diajarkan | Tujuan Pembelajaran | Pelajaran Terkait | Penulis |
| :-: | :------------------------------------------------------: | :-----------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Memulai | Pengantar Pemrograman dan Alat-alat Perdagangan | Pelajari dasar-dasar yang mendasari sebagian besar bahasa pemrograman dan tentang perangkat lunak yang membantu pengembang profesional dalam pekerjaannya | [Pengantar Bahasa Pemrograman dan Alat-alat Perdagangan](./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-dasar JS | Tipe Data JavaScript | Dasar-dasar tipe data JavaScript | [Tipe Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Dasar-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-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-dasar JS | Array dan Loop | Bekerja dengan data menggunakan array dan loop di JavaScript | [Array dan Loop](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktik | Bangun HTML untuk membuat terrarium online, fokus pada membangun tata letak | [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) | JavaScript Closures, manipulasi DOM | Bangun JavaScript untuk membuat terrarium berfungsi sebagai antarmuka seret/jatuhkan, fokus pada closures dan manipulasi DOM | [JavaScript Closures, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Membangun Permainan Mengetik | Pelajari cara menggunakan event keyboard untuk menggerakkan logika aplikasi JavaScript Anda | [Pemrograman Berbasis Event](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bekerja dengan Browser | Pelajari cara kerja browser, sejarahnya, dan cara membuat kerangka 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, performa web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang performa web dan beberapa optimasi yang dilakukan | [Tugas Latar Belakang dan Performa](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Pengembangan Game Lanjutan dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan 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 canvas | Pelajari tentang Canvas API, yang digunakan untuk menggambar elemen ke layar | [Menggambar ke Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Memindahkan elemen ke sekitar layar | Temukan bagaimana elemen dapat bergerak menggunakan koordinat kartesian dan Canvas API | [Memindahkan Elemen Sekitar](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Deteksi Tabrakan | Membuat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan menyediakan fungsi pending untuk memastikan performa game | [Deteksi Tabrakan](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Menjaga skor | Melakukan perhitungan matematika berdasarkan status dan performa game | [Menjaga Skor](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Mengakhiri dan memulai ulang game | Pelajari tentang mengakhiri dan memulai ulang game, termasuk membersihkan aset dan 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 Routing dalam Web App | Pelajari cara membuat kerangka arsitektur situs web multipage menggunakan routing dan template HTML | [Template HTML dan Routing](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Membangun Form Login dan Registrasi | Pelajari tentang membangun formulir dan menangani rutinitas validasi | [Formulir](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode Pengambilan dan Penggunaan Data | Bagaimana data mengalir masuk dan keluar aplikasi Anda, cara mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Manajemen State | Pelajari bagaimana aplikasi Anda menyimpan state dan cara mengelolanya secara programatik | [Manajemen State](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Bekerja dengan VScode | Pelajari cara menggunakan editor kode| [Gunakan Editor Kode VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Bekerja dengan AI | Pelajari cara membangun asisten AI Anda sendiri | [Proyek Asisten AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogi
Kurikulum kami dirancang dengan dua prinsip pedagogis utama:
Kurikulum kami dirancang dengan dua prinsip pedagogis utama dalam pikiran:
* pembelajaran berbasis proyek
* kuis yang sering
Program ini mengajarkan dasar-dasar JavaScript, HTML, dan CSS, serta alat dan teknik terbaru yang digunakan oleh pengembang web saat ini. Siswa akan memiliki kesempatan untuk mengembangkan pengalaman langsung dengan membangun game mengetik, terrarium virtual, ekstensi browser ramah lingkungan, game bergaya penyerang luar angkasa, dan aplikasi perbankan untuk bisnis. Pada akhir seri, siswa akan mendapatkan pemahaman yang solid tentang pengembangan web.
Program ini mengajarkan dasar-dasar JavaScript, HTML, dan CSS, serta alat dan teknik terbaru yang digunakan oleh pengembang web saat ini. Siswa akan memiliki kesempatan untuk mengembangkan pengalaman langsung dengan membangun permainan mengetik, terrarium virtual, ekstensi browser ramah lingkungan, game gaya space invader, dan aplikasi perbankan untuk bisnis. Pada akhir rangkaian ini, siswa akan mendapatkan pemahaman yang solid tentang pengembangan web.
> 🎓 Anda dapat mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai [Jalur Belajar](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
Dengan memastikan bahwa konten sesuai dengan proyek, proses menjadi lebih menarik bagi siswa dan retensi konsep akan meningkat. Kami juga menulis beberapa pelajaran pemula dalam dasar-dasar JavaScript untuk memperkenalkan konsep, dipasangkan dengan video dari koleksi tutorial video "[Seri Pemula untuk: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya berkontribusi pada kurikulum ini.
Dengan memastikan bahwa konten selaras dengan proyek, proses menjadi lebih menarik bagi siswa dan retensi konsep akan ditingkatkan. Kami juga menulis beberapa pelajaran pengantar dalam dasar-dasar JavaScript untuk memperkenalkan konsep, disertai dengan video dari koleksi tutorial video "[Seri Pemula untuk: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya berkontribusi pada kurikulum ini.
Selain itu, kuis berisiko rendah sebelum kelas menetapkan niat siswa untuk mempelajari sebuah 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 mulai dari yang kecil dan semakin kompleks di akhir siklus 12 minggu.
Selain itu, kuis dengan tingkat tekanan rendah sebelum kelas menetapkan niat siswa terhadap pembelajaran topik, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan dan dapat diambil secara keseluruhan atau sebagian. Proyek dimulai dari yang sederhana dan menjadi semakin kompleks pada akhir siklus 12 minggu.
Meskipun kami sengaja menghindari memperkenalkan kerangka kerja JavaScript untuk memusatkan perhatian pada keterampilan dasar yang dibutuhkan sebagai pengembang web sebelum mengadopsi kerangka kerja, langkah selanjutnya yang baik untuk melengkapi kurikulum ini adalah mempelajari Node.js melalui koleksi video lainnya: "[Seri Pemula untuk: 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 dibutuhkan sebagai pengembang web sebelum mengadopsi kerangka kerja, langkah selanjutnya yang baik untuk menyelesaikan kurikulum ini adalah mempelajari tentang Node.js melalui koleksi video lain: "[Seri Pemula untuk: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Kunjungi pedoman [Kode Etik](CODE_OF_CONDUCT.md) dan [Kontribusi](CONTRIBUTING.md) kami. Kami menyambut umpan balik konstruktif Anda!
## 🧭 Akses offline
Anda dapat menjalankan dokumentasi ini secara offline dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repositori ini, [install Docsify](https://docsify.js.org/#/quickstart) di mesin lokal Anda, lalu di folder root repositori ini, ketik `docsify serve`. Situs web akan disajikan pada port 3000 di localhost Anda: `localhost:3000`.
Anda dapat menjalankan dokumentasi ini secara offline dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repo ini, [pasang Docsify](https://docsify.js.org/#/quickstart) di mesin lokal Anda, dan kemudian di folder root repo ini, ketik `docsify serve`. Situs web akan dilayani di port 3000 di localhost Anda: `localhost:3000`.
## 📘 PDF
@ -207,16 +207,16 @@ PDF dari semua pelajaran dapat ditemukan [di sini](https://microsoft.github.io/W
## 🎒 Kursus Lainnya
Tim kami menghasilkan kursus lain! Lihat:
Tim kami memproduksi kursus lain! Lihatlah:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agen
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -251,11 +251,11 @@ Tim kami menghasilkan kursus lain! Lihat:
## Mendapatkan Bantuan
Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI. Bergabunglah dengan sesama pelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung di mana pertanyaan disambut dan pengetahuan dibagikan secara bebas.
Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI. Bergabunglah dengan pembelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung di mana pertanyaan dipersilakan dan pengetahuan dibagikan secara bebas.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Jika Anda memiliki umpan balik produk atau kesalahan saat membangun kunjungi:
Jika Anda memiliki umpan balik produk atau mengalami kesalahan saat membangun, kunjungi:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
@ -267,5 +267,5 @@ Repositori ini dilisensikan di bawah lisensi MIT. Lihat file [LICENSE](../../LIC
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk mencapai akurasi, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang berwenang. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau salah tafsir yang timbul akibat penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk akurasi, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. Untuk informasi penting, disarankan menggunakan jasa terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau salah tafsir yang timbul dari penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/id/Roadmap.md
Unescape View File

@ -0,0 +1,53 @@
# Peta Jalan untuk Repository Web-Dev-For-Beginners Microsoft
**Repository ini menyediakan peta jalan untuk mempelajari dasar-dasar pengembangan web dengan fokus pada JavaScript, HTML, dan CSS. Kurikulumnya fleksibel dan dapat diambil secara keseluruhan atau sebagian, dengan 24 pelajaran yang tersebar selama 12 minggu.**
## Tonggak Penting
* **Minggu 1-3:**
* Pengenalan bahasa pemrograman dan alat perdagangan
* Dasar-dasar GitHub
* Aksesibilitas
* Dasar-dasar JS: tipe data, fungsi dan metode
* Membuat keputusan dengan JS
* **Minggu 4-6:**
* Array dan loop
* Terrarium: HTML dalam praktik
* CSS dalam praktik
* Penutupan JavaScript
* Manipulasi DOM
* **Minggu 7-9:**
* Permainan Mengetik: Pemrograman berbasis event
* Ekstensi Browser Hijau: Bekerja dengan browser
* Membangun formulir, memanggil API dan menyimpan variabel di penyimpanan lokal
* Proses latar belakang di browser
* Performa web
* **Minggu 10-12:**
* Permainan Luar Angkasa: Pengembangan permainan yang lebih maju dengan JavaScript
* Menggambar ke kanvas
* Memindahkan elemen di sekitar layar
* Deteksi tabrakan
* Menjaga skor, mengakhiri dan memulai ulang permainan
* Aplikasi Perbankan: Template HTML dan Rute di Aplikasi Web
* Membangun Formulir Login dan Registrasi
* Metode Pengambilan dan Penggunaan Data
* Konsep Manajemen Status
## Hasil Pembelajaran
**Dengan menyelesaikan peta jalan ini, siswa akan mendapatkan pengalaman langsung membangun permainan mengetik, terrarium virtual, ekstensi browser ramah lingkungan, permainan gaya penyerang luar angkasa, dan aplikasi perbankan untuk bisnis. Mereka juga akan mengembangkan pemahaman yang kuat tentang dasar-dasar pengembangan web.**
## Sumber Daya Tambahan
* Repository ini menyediakan banyak sumber daya untuk pembelajaran lebih lanjut, termasuk tutorial, contoh kode, dan tantangan.
* Platform Microsoft Learn menawarkan berbagai kursus pengembangan web dan jalur pembelajaran.
* Komunitas daring seperti Stack Overflow dan MDN Web Docs menyediakan dukungan dan sumber daya berharga untuk pengembang web.
**Saya harap peta jalan ini membantu Anda dalam perjalanan pengembangan web Anda!**
---
<!-- 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 mencapai akurasi, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. Untuk informasi penting, disarankan menggunakan jasa penerjemah profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau salah tafsir yang timbul dari penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

12
translations/vi/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:33:31+00:00",
"translation_date": "2026-02-06T17:50:12+00:00",
"source_file": "AGENTS.md",
"language_code": "vi"
},
@ -516,11 +516,17 @@
"language_code": "vi"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T18:44:30+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T17:45:37+00:00",
"source_file": "README.md",
"language_code": "vi"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T17:47:47+00:00",
"source_file": "Roadmap.md",
"language_code": "vi"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-27T21:58:31+00:00",

350
translations/vi/AGENTS.md
Unescape View File

@ -2,27 +2,27 @@
## Tổng quan dự án
Đây là kho tài liệu giáo dục dành cho việc giảng 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, bao gồm 24 bài học thực hành về JavaScript, CSS và HTML.
Đây là kho giáo trình giáo dụ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. Giáo trình là một khóa học toàn diện 12 tuần do Microsoft Cloud Advocates phát triển, với 24 bài học thực hành về JavaScript, CSS và HTML.
### Các thành phần chính
- **Nội dung giáo dục**: 24 bài học được tổ chức theo các mô-đun dựa trên 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 không gian, Ứng dụng ngân hàng, Trình chỉnh sửa mã, và Trợ lý chat AI
- **Câu đố tương tác**: 48 câu đố với 3 câu hỏi mỗi bài (đánh giá trước/sau bài học)
- **Hỗ trợ đa ngôn ngữ**: Dịch tự động sang hơn 50 ngôn ngữ thông qua GitHub Actions
- **Nội dung giáo dục**: 24 bài học có cấu trúc tổ chức thành các mô-đun dựa trên dự án
- **Dự án thực tế**: Terrarium, Trò chơi đánh máy, 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 chỉnh sửa mã, và Trợ lý chat 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/sau bài học)
- **Hỗ trợ đa ngôn ngữ**: Dịch tự động cho 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
- Kho tài liệu giáo dục với cấu trúc dựa trên 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 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 thuật sử dụng GitHub Actions (co-op-translator)
- Tài liệu được phục vụ qua Docsify và có sẵn dưới dạng PDF
- Kho giáo dục với cấu trúc theo bài học
- Mỗi thư mục bài học chứa README, ví dụ mã, và giải pháp
- 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 được phục vụ qua Docsify và có sẵn dạng PDF
## Lệnh thiết lập
Kho tài liệu này chủ yếu dành cho việc tiêu thụ nội dung giáo dục. Để làm việc với các dự án cụ thể:
Kho này chủ yếu dành cho việc tiêu thụ nội dung giáo dục. Để làm việc với các dự án cụ thể:
### Thiết lập kho chính
@ -31,48 +31,48 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Thiết lập ứng dụng câu đố (Vue 3 + Vite)
### Thiết lập Quiz App (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # Khởi động máy chủ phát triển
npm run build # Xây dựng cho môi trường sản xuất
npm run lint # Chạy ESLint
```
### API dự án ngân hàng (Node.js + Express)
### API dự án Ngân hàng (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # Khởi động máy chủ API
npm run lint # Chạy ESLint
npm run format # Định dạng với Prettier
```
### Dự án tiện ích mở rộng trình duyệt
### Dự án Tiện ích mở rộng trình duyệt
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# Làm theo hướng dẫn tải tiện ích mở rộng dành riêng cho trình duyệt
```
### Dự án trò chơi không gian
### Dự án Trò chơi không gian
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# Mở index.html trong trình duyệt hoặc sử dụng Live Server
```
### Dự án chat (Python Backend)
### Dự án Chat (Backend Python)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# Đặt biến môi trường GITHUB_TOKEN
python api.py
```
@ -80,203 +80,203 @@ python api.py
### Dành cho người đóng góp nội dung
1. **Fork kho tài liệu** vào tài khoản GitHub của bạn
2. **Clone fork của bạn** về máy
3. **Tạo một nhánh mới** cho các thay đổi của bạn
1. **Fork kho này** vào tài khoản GitHub của bạn
2. **Clone bản fork** về máy cục bộ
3. **Tạo nhánh mới** cho thay đổi của bạn
4. Thực hiện thay đổi nội dung bài học hoặc ví dụ mã
5. Kiểm tra các thay đổi mã trong các thư mục dự án liên quan
5. Kiểm thử các thay đổi mã trong thư mục dự án liên quan
6. Gửi pull request theo hướng dẫn đóng góp
### Dành cho người học
1. Fork hoặc clone kho tài liệu
2. Điều hướng đến các thư mục bài học theo thứ tự
3. Đọc các tệp README cho từng bài học
4. Hoàn thành câu đố trước bài học tại https://ff-quizzes.netlify.app/web/
5. Làm việc qua các ví dụ mã trong các thư mục bài học
6. Hoàn thành bài tập và thử thách
7. Làm câu đố sau bài học
1. Fork hoặc clone kho về
2. Truy cập tuần tự các thư mục bài học
3. Đọc các file README cho mỗi bài học
4. Hoàn thành các bài quiz trước bài học tại https://ff-quizzes.netlify.app/web/
5. Làm theo các ví dụ mã trong các thư mục bài học
6. Hoàn thành bài tập và thách thức
7. Làm bài quiz sau bài học
### Phát triển trực tiếp
- **Tài liệu**: Chạy `docsify serve` trong thư mục gốc (port 3000)
- **Ứng dụng câu đố**: Chạy `npm run dev` trong thư mục quiz-app
- **Dự án**: Sử dụng tiện ích Live Server của VS Code cho các dự án HTML
- **Tài liệu**: Chạy `docsify serve` ở thư mục gốc (cổng 3000)
- **Ứng dụng Quiz**: Chạy `npm run dev` trong thư mục quiz-app
- **Các dự án**: Sử dụng VS Code Live Server extension cho các dự án HTML
- **Dự án API**: Chạy `npm start` trong các thư mục API tương ứng
## Hướng dẫn kiểm tra
## Hướng dẫn kiểm thử
### Kiểm tra ứng dụng câu đố
### Kiểm thử Quiz App
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # Kiểm tra các vấn đề về kiểu mã
npm run build # Xác minh việc xây dựng thành công
```
### Kiểm tra API ngân hàng
### Kiểm thử API Ngân hàng
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # Kiểm tra các lỗi về phong cách mã nguồn
node server.js # Xác minh máy chủ khởi động mà không có lỗi nào
```
### Phương pháp kiểm tra chung
### Cách tiếp cận kiểm thử chung
- Đây là kho tài liệu giáo dục không có các bài kiểm tra tự động toàn diện
- Kiểm tra thủ công tập trung vào:
- Ví dụ mã chạy không có lỗi
- Các liên kết trong tài liệu hoạt động chính xác
- Dự án được xây dựng thành công
- Các ví dụ tuân theo các thực hành tốt nhất
- Đây là kho giáo dục không có kiểm thử tự động toàn diện
- Kiểm thử thủ công tập trung vào:
- Các ví dụ mã chạy không lỗi
- Các liên kết trong tài liệu hoạt động đúng
- Dự án xây dựng thành công
- Ví dụ theo các thực hành tốt nhất
### Kiểm tra trước khi gửi
- Chạy `npm run lint` trong các thư mục có package.json
- Xác minh các liên kết markdown hợp lệ
- Kiểm tra ví dụ mã trong trình duyệt hoặc Node.js
- Đảm bảo rằng các bản dịch duy trì cấu trúc đúng
- Kiểm thử các ví dụ mã trên trình duyệt hoặc Node.js
- Kiểm tra rằng các bản dịch giữ đúng cấu trúc
## Hướng dẫn phong cách mã
### JavaScript
- Sử dụng cú pháp ES6+ hiện đại
- Tuân theo cấu hình ESLint tiêu chuẩn được cung cấp trong các dự án
- Sử dụng tên biến và hàm có ý nghĩa để dễ hiểu cho người học
- Thêm nhận xét giải thích các khái niệm cho người học
- Tuân theo cấu hình ESLint chuẩn có trong dự án
- Dùng tên biến và hàm có ý nghĩa dễ hiểu cho giáo dục
- Thêm chú thích giải thích khái niệm cho người học
- Định dạng bằng Prettier nếu được cấu hình
### HTML/CSS
- Các phần tử HTML5 có tính ngữ nghĩa
- Các phần tử HTML5 có ngữ nghĩa
- Nguyên tắc thiết kế đáp ứng
- Quy ước đặt tên lớp rõ ràng
- Nhận xét giải thích các kỹ thuật CSS cho người học
- Quy ước đặt tên class rõ ràng
- Chú thích giải thích kỹ thuật CSS cho người học
### Python
- Hướng dẫn phong cách PEP 8
- Tuân thủ quy chuẩn PEP 8
- Ví dụ mã rõ ràng, mang tính giáo dục
- Gợi ý kiểu nơi hữu ích cho việc học
- Sử dụng type hints khi hữu ích cho việc học
### Tài liệu Markdown
- Cấu trúc tiêu đề rõ ràng
- Các khối mã có chỉ định ngôn ngữ
- Khối mã với chỉ định ngôn ngữ
- Liên kết đến các tài nguyên bổ sung
- Ảnh chụp màn hình và hình ảnh trong các thư mục `images/`
- Văn bản thay thế cho hình ảnh để tăng khả năng tiếp cận
- Ảnh chụp màn hình và hình ảnh trong thư mục `images/`
- Văn bản alt cho ảnh để hỗ trợ truy cập
### Tổ chức tệp
- Các bài học được đánh số theo thứ tự (1-getting-started-lessons, 2-js-basics, v.v.)
- Các bài học đánh số theo thứ tự (1-getting-started-lessons, 2-js-basics, v.v.)
- Mỗi dự án có thư mục `solution/` và thường có `start/` hoặc `your-work/`
- Hình ảnh được lưu trữ trong các thư mục `images/` cụ thể cho bài học
- Hình ảnh lưu trong thư mục `images/` riêng của từng bài học
- Các bản dịch trong cấu trúc `translations/{language-code}/`
## Xây dựng và triển khai
### Triển khai ứng dụng câu đố (Azure Static Web Apps)
### Triển khai Quiz App (Azure Static Web Apps)
Ứng dụng quiz-app được cấu hình để triển khai trên Azure Static Web Apps:
Quiz-app được cấu hình để triển khai trên Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # Tạo thư mục dist/
# Triển khai qua quy trình làm việc GitHub Actions khi đẩy lên nhánh main
```
Cấu hình Azure Static Web Apps:
- **Vị trí ứng dụng**: `/quiz-app`
- **Vị trí đầu ra**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- **Quy trình làm việc**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Tạo tài liệu PDF
### Tạo PDF tài liệu
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # Cài đặt docsify-to-pdf
npm run convert # Tạo PDF từ docs
```
### Tài liệu Docsify
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Cài đặt Docsify toàn cục
docsify serve # Phục vụ trên localhost:3000
```
### Xây dựng dự án cụ thể
### Xây dựng dự án riêng biệt
Mỗi thư mục dự án có thể có quy trình xây dựng riêng:
- Dự án Vue: `npm run build` tạo các gói sản phẩm
- Dự án tĩnh: Không có bước xây dựng, phục vụ tệp trực tiếp
Mỗi thư mục dự án có thể có quá trình xây dựng riêng:
- Dự án Vue: `npm run build` tạo các bundle sản xuất
- Dự án tĩnh: không có bước build, phục vụ trực tiếp các tệp
## Hướng dẫn pull request
## Hướng dẫn Pull Request
### Định dạng tiêu đề
Sử dụng tiêu đề rõ ràng, mô tả khu vực thay đổi:
- `[Quiz-app] Thêm câu đố mới cho bài học X`
- `[Quiz-app] Thêm bài quiz mới cho bài học X`
- `[Lesson-3] Sửa lỗi chính tả trong dự án terrarium`
- `[Translation] Thêm bản dịch tiếng Tây Ban Nha cho bài học 5`
- `[Translation] Thêm bản dịch tiếng Tây Ban Nha cho bài 5`
- `[Docs] Cập nhật hướng dẫn thiết lập`
### Kiểm tra bắt buộc
### Các kiểm tra bắt buộc
Trước khi gửi PR:
1. **Chất lượng mã**:
- Chạy `npm run lint` trong các thư mục dự án bị ảnh hưởng
- Sửa tất cả lỗi và cảnh báo linting
- Chạy `npm run lint` trong các thư mục dự án ảnh hưởng
- Sửa tất cả lỗi và cảnh báo lint
2. **Xác minh xây dựng**:
- Chạy `npm run build` nếu áp dụng
- Đảm bảo không có lỗi xây dựng
2. **Xác thực build**:
- Chạy `npm run build` nếu có
- Đảm bảo không có lỗi build
3. **Xác thực liên kết**:
- Kiểm tra tất cả các liên kết markdown
- Xác minh các tham chiếu hình ảnh hoạt động
3. **Xác minh liên kết**:
- Kiểm tra tất cả liên kết markdown
- Xác thực tham chiếu hình ảnh
4. **Xem xét nội dung**:
- Đọc lại để kiểm tra lỗi chính tả và ngữ pháp
4. **Rà soát nội dung**:
- Đọc lại lỗi chính tả và ngữ pháp
- Đảm bảo ví dụ mã chính xác và mang tính giáo dục
- Xác minh các bản dịch duy trì ý nghĩa ban đầu
- Kiểm tra bản dịch giữ nguyên ý nghĩa gốc
### Yêu cầu đóng góp
- Đồng ý với Microsoft CLA (kiểm tra tự động trên PR đầu tiên)
- Đồng ý Microsoft CLA (kiểm tra tự động lúc PR đầu tiên)
- Tuân theo [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Xem [CONTRIBUTING.md](./CONTRIBUTING.md) để biết hướng dẫn chi tiết
- Tham chiếu số vấn đề trong mô tả PR nếu áp dụng
- Tham chiếu số issue trong mô tả PR nếu có
### Quy trình xem xét
### Quy trình đánh giá
- PR được xem xét bởi người duy trì và cộng đồng
- Ưu tiên sự rõ ràng trong giáo dục
- Ví dụ mã nên tuân theo các thực hành tốt nhất hiện tại
- Các bản dịch được xem xét để đảm bảo độ chính xác và phù hợp văn hóa
- PR được các người duy trì và cộng đồng đánh giá
- Ưu tiên làm rõ mặt giáo dục
- Ví dụ mã nên theo các thực hành tốt hiện tại
- Bản dịch được đánh giá về độ chính xác và phù hợp văn hóa
## Hệ thống dịch thuật
## Hệ thống dịch
### Dịch tự động
- Sử dụng GitHub Actions với workflow co-op-translator
- Dịch tự động sang hơn 50 ngôn ngữ
- Tệp nguồn trong các thư mục chính
- Tệp dịch trong các thư mục `translations/{language-code}/`
- Các tệp nguồn ở thư mục chính
- Tệp dịch ở thư mục `translations/{language-code}/`
### Thêm cải tiến dịch thuật thủ công
### Thêm cải tiến dịch thủ công
1. Tìm tệp trong `translations/{language-code}/`
2. Thực hiện cải tiến trong khi duy trì cấu trúc
1. Tìm tệp ở `translations/{language-code}/`
2. Thực hiện cải tiến trong khi giữ cấu trúc
3. Đảm bảo ví dụ mã vẫn hoạt động
4. Kiểm tra bất kỳ nội dung câu đố được bản địa hóa
4. Kiểm thử nội dung quiz được bản địa hóa
### Metadata dịch thuật
### Metadata dịch
Các tệp dịch bao gồm tiêu đề metadata:
Các tệp dịch có bao gồm header metadata:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,118 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Gỡ lỗi và khắc phục sự cố
## Gỡ lỗi và xử lý sự cố
### Các vấn đề thường gặp
**Ứng dụng câu đố không khởi động**:
**Ứng dụng quiz không khởi động được**:
- Kiểm tra phiên bản Node.js (khuyến nghị v14+)
- Xóa `node_modules` và `package-lock.json`, chạy lại `npm install`
- Kiểm tra xung đột cổng (mặc định: Vite sử dụng cổng 5173)
- Kiểm tra xung đột cổng (mặc định Vite dùng cổng 5173)
**Máy chủ API không khởi động**:
- Xác minh phiên bản Node.js đáp ứng yêu cầu tối thiểu (node >=10)
- Kiểm tra xem cổng đã được sử dụng hay chưa
- Đảm bảo tất cả các phụ thuộc được cài đặt với `npm install`
**Máy chủ API không khởi động được**:
- Xác nhận phiên bản Node.js đạt yêu cầu (node >=10)
- Kiểm tra cổng có đang được sử dụng không
- Đảm bảo đã cài tất cả dependencies bằng `npm install`
**Tiện ích mở rộng trình duyệt không tải**:
- Xác minh manifest.json được định dạng đúng
- Kiểm tra lỗi trong bảng điều khiển trình duyệt
- Làm theo hướng dẫn cài đặt tiện ích mở rộng cụ thể cho trình duyệt
**Tiện ích mở rộng trình duyệt không tải được**:
- Kiểm tra manifest.json định dạng đúng
- Kiểm tra console trình duyệt có lỗi không
- Thực hiện theo hướng dẫn cài tiện ích mở rộng riêng cho trình duyệt
**Vấn đề dự án chat Python**:
- Đảm bảo gói OpenAI được cài đặt: `pip install openai`
- Xác minh biến môi trường GITHUB_TOKEN đã được thiết lập
- Kiểm tra quyền truy cập GitHub Models
- Đảm bảo đã cài gói OpenAI: `pip install openai`
- Xác nhận biến môi trường GITHUB_TOKEN đã được đặt
- Kiểm tra quyền truy cập Models trên GitHub
**Docsify không phục vụ tài liệu**:
- Cài đặt docsify-cli toàn cầu: `npm install -g docsify-cli`
- Chạy từ thư mục gốc của kho tài liệu
- Kiểm tra rằng `docs/_sidebar.md` tồn tại
- Cài đặt docsify-cli toàn cục: `npm install -g docsify-cli`
- Chạy từ thư mục gốc kho
- Kiểm tra `docs/_sidebar.md` có tồn tại không
### Mẹo môi trường phát triển
- Sử dụng VS Code với tiện ích Live Server cho các dự án HTML
- Cài đặt tiện ích ESLint và Prettier để định dạng nhất quán
- Sử dụng DevTools của trình duyệt để gỡ lỗi JavaScript
- Đối với các dự án Vue, cài đặt tiện ích Vue DevTools cho trình duyệt
- Dùng VS Code với extension Live Server cho các dự án HTML
- Cài đặt ESLint và Prettier để định dạng thống nhất
- Dùng DevTools trình duyệt để gỡ lỗi JavaScript
- Dự án Vue: cài extension Vue DevTools trình duyệt
### Cân nhắc hiệu suất
### Xem xét hiệu năng
- Số lượng lớn tệp dịch (hơn 50 ngôn ngữ) khiến việc clone đầy đủ trở nên lớn
- 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ừ các bả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 xây dựng có thể chậm trong lần chạy đầu tiên (npm install, Vite build)
- Số lượng file dịch lớn (hơn 50 ngôn ngữ) khiến clone toàn bộ nặng
- Dùng clone cạn 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 làm việc với nội dung tiếng Anh
- Quá trình build có thể chậm lần đầu (npm install, build Vite)
## Cân nhắc bảo mật
## Đảm bảo an toàn
### Biến môi trường
- Không bao giờ commit khóa API vào kho tài liệu
- Sử dụng tệp `.env` (đã có trong `.gitignore`)
- Tài liệu các biến môi trường cần thiết trong README của dự án
- Không bao giờ commit khóa API vào kho
- Sử dụng tệp `.env` (đã được thêm vào `.gitignore`)
- Tài liệu biến môi trường cần thiết trong các README dự án
### Dự án Python
- Sử dụng môi trường ảo: `python -m venv venv`
- Giữ các phụ thuộc được cập nhật
- Token GitHub nên có quyền tối thiểu cần thiết
- Giữ dependencies cập nhật
- GitHub token nên có quyền tối thiểu cần thiết
### Truy cập GitHub Models
### Quyền truy cập Models GitHub
- Yêu cầu Personal Access Tokens (PAT) cho GitHub Models
- Token nên được 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
- Cần có Personal Access Token (PAT) cho GitHub Models
- Token nên lưu trong biến môi trường
- Không bao giờ commit token hoặc thông tin xác thực
## Ghi chú bổ sung
### Đối tượng mục tiêu
- Người mới bắt đầu hoàn toàn với phát triển web
- Sinh viên và người tự học
- Giáo viên sử dụng chương trình học trong lớp học
- Nội dung được thiết kế để dễ tiếp cận và xây dựng kỹ năng dần dầ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áo viên sử dụng giáo trình trong lớp học
- Nội dung thiết kế phục vụ truy cập và phát triển kỹ năng từ từ
### Triết lý giáo dục
- Phương pháp học tập dựa trên dự án
- Kiểm tra kiến thức thường xuyên (câu đố)
- Bài tập mã hóa thực hành
- Phương pháp học dựa trên dự án
- Kiểm tra kiến thức thường xuyên (quiz)
- Thực hành mã hóa trực tiếp
- Ví dụ ứng dụng thực tế
- Tập trung vào các kiến thức cơ bản trước khi học framework
- Tập trung vào kiến thức nền tảng trước khi tới framework
### Bảo trì kho tài liệu
### Bảo trì kho
- Cộng đồng người học và người đóng góp tích cực
- Cập nhật thường xuyên các phụ thuộc và nội dung
- Các vấn đề và thảo luận được giám sát bởi người duy trì
- Cập nhật bản dịch tự động thông qua GitHub Actions
- Cộng đồng người học và đóng góp năng động
- Thường xuyên cập nhật dependencies và nội dung
- Vấn đề và thảo luận được người duy trì giám sát
- Cập nhật dịch tự động qua GitHub Actions
### Tài nguyên liên quan
- [Các mô-đun Microsoft Learn](https://docs.microsoft.com/learn/)
- [Các module 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 nghị cho người học
- Các khóa học bổ sung: Generative AI, Khoa học dữ liệu, ML, IoT có sẵn
- Khóa học thêm: AI Sinh tạo, Khoa học dữ liệu, ML, IoT có sẵn
### Làm việc với các dự án cụ thể
Để biết hướng dẫn chi tiết về từng dự án, tham khảo các tệp README trong:
- `quiz-app/README.md` - Ứng dụng câu đố Vue 3
- `7-bank-project/README.md` - Ứng dụng ngân hàng với xác thực
Hướng dẫn chi tiết cho từng dự án có trong các file 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 dựa 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
Mặc dù không phải là một monorepo truyền thống, kho tài liệu này chứa nhiều dự án độc lập:
- Mỗi bài học là tự chứa
- Các dự án không chia sẻ phụ thuộc
- Làm việc trên các dự án riêng lẻ mà không ảnh hưởng đến các dự án khác
- Clone toàn bộ kho tài liệu để trải nghiệm chương trình học đầy đủ
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 tự chứa
- Dự án không chia sẻ dependencies
- Làm việc trên từng dự án riêng mà không ảnh hưởng dự án khác
- Clone toàn bộ repo để trải nghiệm đầy đủ giáo trình
---
<!-- 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 các thông tin quan trọng, 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 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ữ nguyên bản nên được coi là nguồn thông tin chính xác và có thẩm quyền. Đối với các 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 đối với 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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

241
translations/vi/README.md
Unescape View File

@ -2,134 +2,133 @@
[![Người đóng góp GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![Vấn đề GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![Yêu cầu kéo GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![Chào đón PR](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![Chào đón PR](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![Người theo dõi GitHub](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![Nhánh GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![Sao GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Discord Microsoft Foundry](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Phát triển Web cho Người mới bắt đầu - Một Chương trình học
# Phát Triển Web Cho Người Mới Bắt Đầu - Một Chương Trình Học
Học các kiến thức cơ bản về phát triển web qua khóa học toàn diện 12 tuần của các Chuyên gia Microsoft Cloud Advocates. Mỗi 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 tế. Nâng cao kỹ năng và tối ưu khả năng ghi nhớ kiến thức với phương pháp học tập dựa trên dự án hiệu quả của chúng tôi. Bắt đầu hành trình lập trình của bạn ngay hôm nay!
Học những kiến thức cơ bản về phát triển web với khóa học toàn diện 12 tuần do các Chuyên Gia Microsoft Cloud biên soạn. Mỗi trong số 24 bài học đ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 với các bài kiểm tra, thảo luận và bài tập thực tế. 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 giảng dạy 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 trên Discord
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
[![Discord Microsoft Foundry](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Thực hiện các bước sau để bắt đầu sử dụng các tài nguyên này:
1. **Tạo Nhánh Repository**: Nhấp vào [![Nhánh GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Sao chép Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Tham gia Azure AI Foundry Discord và gặp gỡ các chuyên gia và đồng hành phát triển**](https://discord.com/invite/ByRwuEEgH4)
1. **Fork Kho Lưu Trữ**: Nhấn [![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone Kho Lưu Trữ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Tham gia Azure AI Foundry Discord và gặp gỡ các chuyên gia cùng các nhà phát triển khác**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Hỗ trợ Đa Ngôn ngữ
### 🌐 Hỗ trợ Đa Ngôn Ngữ
#### Hỗ trợ qua GitHub Action (Tự động & Luôn Cập nhật)
#### Hỗ trợ qua GitHub Action (Tự động & Luôn Cập Nhật)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Tiếng Ả Rập](../ar/README.md) | [Tiếng Bengal](../bn/README.md) | [Tiếng Bulgaria](../bg/README.md) | [Tiếng Miến Điện (Myanmar)](../my/README.md) | [Tiếng Trung (Giản thể)](../zh-CN/README.md) | [Tiếng Trung (Phồn thể, Hồng Kông)](../zh-HK/README.md) | [Tiếng Trung (Phồn thể, Macau)](../zh-MO/README.md) | [Tiếng Trung (Phồn thể, Đài Loan)](../zh-TW/README.md) | [Tiếng Croatia](../hr/README.md) | [Tiếng Séc](../cs/README.md) | [Tiếng Đan Mạch](../da/README.md) | [Tiếng Hà Lan](../nl/README.md) | [Tiếng Estonia](../et/README.md) | [Tiếng Phần Lan](../fi/README.md) | [Tiếng Pháp](../fr/README.md) | [Tiếng Đức](../de/README.md) | [Tiếng Hy Lạp](../el/README.md) | [Tiếng Do Thái](../he/README.md) | [Tiếng Hindi](../hi/README.md) | [Tiếng Hungary](../hu/README.md) | [Tiếng Indonesia](../id/README.md) | [Tiếng Ý](../it/README.md) | [Tiếng Nhật](../ja/README.md) | [Tiếng Kannada](../kn/README.md) | [Tiếng Hàn](../ko/README.md) | [Tiếng Litva](../lt/README.md) | [Tiếng Mã Lai](../ms/README.md) | [Tiếng Malayalam](../ml/README.md) | [Tiếng Marathi](../mr/README.md) | [Tiếng Nepal](../ne/README.md) | [Tiếng Pidgin Nigeria](../pcm/README.md) | [Tiếng Na Uy](../no/README.md) | [Tiếng Ba Tư (Farsi)](../fa/README.md) | [Tiếng Ba Lan](../pl/README.md) | [Tiếng Bồ Đào Nha (Brazil)](../pt-BR/README.md) | [Tiếng Bồ Đào Nha (Bồ Đào Nha)](../pt-PT/README.md) | [Tiếng Punjabi (Gurmukhi)](../pa/README.md) | [Tiếng Romania](../ro/README.md) | [Tiếng Nga](../ru/README.md) | [Tiếng Serbia (Chữ Kirin)](../sr/README.md) | [Tiếng Slovakia](../sk/README.md) | [Tiếng Slovenia](../sl/README.md) | [Tiếng Tây Ban Nha](../es/README.md) | [Tiếng Swahili](../sw/README.md) | [Tiếng Thụy Điển](../sv/README.md) | [Tiếng Tagalog (Philippines)](../tl/README.md) | [Tiếng Tamil](../ta/README.md) | [Tiếng Telugu](../te/README.md) | [Tiếng Thái](../th/README.md) | [Tiếng Thổ Nhĩ Kỳ](../tr/README.md) | [Tiếng Ukraina](../uk/README.md) | [Tiếng Urdu](../ur/README.md) | [Tiếng Việt](./README.md)
[Tiếng Ả Rập](../ar/README.md) | [Tiếng Bengal](../bn/README.md) | [Tiếng Bulgaria](../bg/README.md) | [Tiếng Miến Điện (Myanmar)](../my/README.md) | [Tiếng Trung (Giản thể)](../zh-CN/README.md) | [Tiếng Trung (Phồn thể, Hồng Kông)](../zh-HK/README.md) | [Tiếng Trung (Phồn thể, Macau)](../zh-MO/README.md) | [Tiếng Trung (Phồn thể, Đài Loan)](../zh-TW/README.md) | [Tiếng Croatia](../hr/README.md) | [Tiếng Séc](../cs/README.md) | [Tiếng Đan Mạch](../da/README.md) | [Tiếng Hà Lan](../nl/README.md) | [Tiếng Estonia](../et/README.md) | [Tiếng Phần Lan](../fi/README.md) | [Tiếng Pháp](../fr/README.md) | [Tiếng Đức](../de/README.md) | [Tiếng Hy Lạp](../el/README.md) | [Tiếng Do Thái](../he/README.md) | [Tiếng Hindi](../hi/README.md) | [Tiếng Hungary](../hu/README.md) | [Tiếng Indonesia](../id/README.md) | [Tiếng Ý](../it/README.md) | [Tiếng Nhật](../ja/README.md) | [Tiếng Kannada](../kn/README.md) | [Tiếng Hàn Quốc](../ko/README.md) | [Tiếng Litva](../lt/README.md) | [Tiếng Mã Lai](../ms/README.md) | [Tiếng Malayalam](../ml/README.md) | [Tiếng Marathi](../mr/README.md) | [Tiếng Nepal](../ne/README.md) | [Tiếng Pidgin Nigeria](../pcm/README.md) | [Tiếng Na Uy](../no/README.md) | [Tiếng Ba Tư (Farsi)](../fa/README.md) | [Tiếng Ba Lan](../pl/README.md) | [Tiếng Bồ Đào Nha (Brazil)](../pt-BR/README.md) | [Tiếng Bồ Đào Nha (Bồ Đào Nha)](../pt-PT/README.md) | [Tiếng Punjabi (Gurmukhi)](../pa/README.md) | [Tiếng Romania](../ro/README.md) | [Tiếng Nga](../ru/README.md) | [Tiếng Serbia (Chữ Kirin)](../sr/README.md) | [Tiếng Slovakia](../sk/README.md) | [Tiếng Slovenia](../sl/README.md) | [Tiếng Tây Ban Nha](../es/README.md) | [Tiếng Swahili](../sw/README.md) | [Tiếng Thụy Điển](../sv/README.md) | [Tiếng Tagalog (Philippines)](../tl/README.md) | [Tiếng Tamil](../ta/README.md) | [Tiếng Telugu](../te/README.md) | [Tiếng Thái](../th/README.md) | [Tiếng Thổ Nhĩ Kỳ](../tr/README.md) | [Tiếng Ukraina](../uk/README.md) | [Tiếng Urdu](../ur/README.md) | [Tiếng Việt](./README.md)
> **Ưu tiên Sao chép Cục bộ?**
> **Muốn Clone cục bộ?**
> Kho lưu trữ này bao gồm hơn 50 bản dịch ngôn ngữ, điều này làm tăng đáng kể kích thước tải xuống. Để sao chép mà không có bản dịch, hãy sử dụng kiểm tra rải rác:
> Kho lưu trữ này bao gồm hơn 50 bản dịch ngôn ngữ điều này làm tăng đáng kể kích thước tải xuống. Để clone mà không có bản dịch, hãy sử dụng sparse checkout:
> ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Điều này cung cấp cho bạn mọi thứ cần thiết để hoàn thành khóa học với tốc độ tải xuống nhanh hơn nhiều.
> Điều này sẽ cung cấp cho bạn tất cả những gì bạn cần để hoàn thành khóa học với tốc độ tải xuống nhanh hơn nhiều.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Nếu bạn muốn có thêm ngôn ngữ dịch được hỗ trợ, danh sách đượ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 được hỗ trợ được liệt kê [ở đây](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Mở trong Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Mở%20trong%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Bạn là học sinh sinh viên?_
#### 🧑‍🎓 _Bạn là sinh viên?_
Truy cập [**trang Trung Tâm 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 các tài nguyên dành cho người mới bắt đầu, các gói Sinh viên và thậm chí cách nhận phiếu chứng nhận miễn phí. Đây là trang bạn nên đánh dấu và kiểm tra thường xuyên khi chúng tôi thay đổi nội dung hàng tháng.
Truy cập trang [**Student Hub**](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, bộ dụng cụ dành cho sinh viên và thậm chí cách để nhận phiếu chứng nhận miễn phí. Đây là trang bạn nên đánh dấu và kiểm tra định kỳ vì chúng tôi thay đổi nội dung hàng tháng.
### 📣 Thông báo - Thử thách Chế độ Tác nhân GitHub Copilot mới để hoàn thành!
### 📣 Thông báo - Thử thách Chế độ GitHub Copilot Agent mới để hoàn thành!
Thử thách mới đã được thêm vào, tìm "Thử thách Chế độ Tác nhân GitHub Copilot 🚀" trong phần lớn các chương. Đó là thử thách mới dành cho bạn sử dụng GitHub Copilot và chế độ Tác nhân để hoàn thành. Nếu bạn chưa từng sử dụng chế độ Tác nhân trước đây, nó không chỉ 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 Challenge 🚀" trong hầu hết các chương. Đó là thử thách mới dành cho bạn sử dụng GitHub Copilot và chế độ Agent để hoàn thành. Nếu bạn chưa từng dùng chế độ Agent trước đây, nó không chỉ tạo ra 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 sử dụng AI Sinh tạo_
### 📣 Thông báo - _Dự án Mới để xây dựng sử dụng Generative AI_
Dự án Trợ lý AI mới vừa được thêm, xem dự án tại [project](./9-chat-project/README.md)
Dự án trợ lý AI mới vừa được thêm, xem [dự án](./9-chat-project/README.md)
### 📣 Thông báo - _Chương trình học Mới_ về AI Sinh tạo cho JavaScript vừa được phát hành
### 📣 Thông báo - _Chương trình học Mới_ về Generative AI cho JavaScript vừa được phát hành
Đừng bỏ lỡ chương trình học AI Sinh tạo mới của chúng tôi!
Đừng bỏ lỡ chương trình học Generative AI 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!
![Nền](../../translated_images/vi/background.148a8d43afde5730.webp)
- Bài học bao gồm mọi thứ từ cơ bản đến RAG.
- Tương tác với các nhân vật lịch sử bằng GenAI và ứng dụng đồng hành của chúng tôi.
- Câu chuyện vui nhộn và hấp dẫn, bạn sẽ du hành thời gian!
- Bài học bao gồm tất cả từ cơ bản đến RAG.
- Tương tác với các nhân vật lịch sử sử dụng GenAI và ứng dụng đồng hành của chúng tôi.
- Câu chuyện vui nhộn và hấp dẫn, bạn sẽ trải nghiệm du hành thời gian!
![nhân vật](../../translated_images/vi/character.5c0dd8e067ffd693.webp)
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ư:
- Kỹ thuật yêu cầu và xây dựng câu lệnh prompt
- Lập trình lời nhắc và kỹ thuật lập trình lời nhắc
- 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ố đề xuất](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 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 có [đưa ra 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](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 hiểu biết của bạn qua 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, bắt đầu với bài kiểm tra trước bài giảng và tiếp tục bằng cách đọc tài liệu giảng dạy, 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.
Để nâng cao trải nghiệm học tập, hãy kết nối với đồng nghiệp để làm việc cùng nhau trên 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ũ điều hành sẽ sẵn sàng trả lời các câu hỏi của bạn.
Để tăng cường trải nghiệm học tập, hãy kết nối với bạn bè để làm việc cùng nhau trên các dự án! Thảo luận được khuyến khích trong [diễn đàn thảo luận](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) nơi nhóm điều hành của chúng tôi sẽ sẵn sàng trả lời câu hỏi của bạn.
Để học sâu hơn, chúng tôi rất khuyên 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.
Để tiếp tục học tập, chúng tôi khuyến nghị 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.
### 📋 Cài đặt 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ôi trường trên trình duyệt, không cần cài đặt_), hoặc chạy cục bộ trên máy tính với 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 đã chuẩn bị môi trường phát triển sẵn sàng! Khi 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ôi trường dựa trên trình duyệt, không cần cài đặt_), hoặc chạy cục bộ trên máy tính của bạn bằ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 kho lưu trữ của bạn
Để dễ dàng lưu tác phẩm của bạn, bạn nên tạo một bản sao riêng của kho lưu trữ 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 kho lưu trữ mới trong tài khoản GitHub của bạn với bản sao chương trình học.
Để bạn dễ dàng lưu công việc, khuyến nghị bạn tạo bản sao kho lưu trữ này. Bạn có thể làm điều này bằng cách nhấn nút **Sử dụng mẫu này** ở đầu trang. Điều này sẽ tạo kho lưu trữ mới trong tài khoản GitHub của bạn với bản sao của chương trình học.
Thực hiện các bước sau:
1. **Tạo Nhánh Repository**: Nhấp nút "Fork" ở góc trên bên phải của trang này.
2. **Sao chép Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Fork Kho Lưu Trữ**: Nhấn nút "Fork" ở góc trên bên phải của trang này.
2. **Clone Kho Lưu Trữ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Chạy chương trình học trong Codespace
Trong bản sao kho lưu trữ mà bạn đã tạo, nhấp nút **Code** và chọn **Open with Codespaces**. Điều này sẽ tạo một Codespace mới để bạn làm việc.
Trong bản sao kho lưu trữ bạn vừa tạo, nhấn nút **Code** và chọn **Open with Codespaces**. Điều này sẽ tạo một Codespace mới để bạn làm việc.
![Codespace](../../translated_images/vi/createcodespace.0238bbf4d7a8d955.webp)
#### Chạy chương trình học trên máy tính cục bộ
#### Chạy chương trình học cục bộ trên máy tính của bạn
Để chạy chương trình học này trên máy tính, bạn cần một trình soạn thảo văn bản, trình duyệt và 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ụ Thương mại](../../1-getting-started-lessons/1-intro-to-programming-languages), sẽ hướng dẫn bạn qua các tùy chọn cho từng công cụ này để bạn chọn cái phù hợp nhất với mình.
Để 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ụ của nghề](../../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ụ để bạn chọn phù hợp nhất.
Chúng tôi khuyên bạn sử dụng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) làm trình soạn thảo, trình soạn này cũng có [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 Visual Studio Code [tại đây](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
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, trình soạn thảo này cũng có [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) tích hợp. Bạn có thể tải Visual Studio Code [tại đây](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Sao chép kho lưu trữ về máy tính của bạn. Bạn có thể làm điều này bằng cách nhấp nút **Code** và sao chép URL:
1. Clone kho lưu trữ về máy tính của bạn. Bạn có thể làm điều này bằng cách nhấp nút **Code** và sao chép URL:
[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) bên 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ấp vào **File** > **Open Folder** và chọn thư mục bạn vừa sao chép.
2. Mở thư mục trong Visual Studio Code. Bạn có thể làm điều này bằng cách nhấp vào **File** > **Open Folder** và chọn thư mục bạn vừa sao chép về.
> Các tiện ích mở rộng được đề xuất cho Visual Studio Code:
> Tiện ích mở rộng Visual Studio Code được khuyên dùng:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - để xem trước các trang HTML trong Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - để xem trước các trang HTML ngay trong Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - giúp bạn viết mã nhanh hơn
## 📂 Mỗi bài học bao gồm:
@ -137,124 +136,124 @@ Sau đó, mở [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT
- 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 bằng văn bản
- 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 kiểm tra sau bài học [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
> **Ghi chú về bài kiểm tra**: Tất cả bài kiểm tra đều 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/), ứng dụng bài kiểm tra có thể chạy cục bộ hoặc được triển khai lên Azure; làm theo hướng dẫn trong thư mục `quiz-app`.
> **Ghi chú về các bài kiểm tra:** Tất cả bài kiểm tra nằm trong thư mục Quiz-app, tổng cộng 48 bài với mỗi bài gồm ba câu hỏi. Chúng có thể truy cập [tại đây](https://ff-quizzes.netlify.app/web/). Ứng dụng kiểm tra có thể chạy cục bộ hoặc triển khai trên Azure; hãy làm theo hướng dẫn trong thư mục `quiz-app`.
## 🗃️ Các bài học
| | Tên Dự Án | Khái Niệm Được Dạy | Mục Tiêu Học Tập | Bài Học Liên Kết | Tác Giả |
| | Tên Dự Án | Khái Niệm Được Dạy | Mục Tiêu Học Tập | Bài Học Liên Kết | Tác Giả |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Bắt Đầu | Giới thiệu Lập trình và Công cụ Nghề nghiệp | Học các kiến thức cơ bản đằng sau hầu hết các ngôn ngữ lập trình và về phần mềm giúp các nhà phát triển chuyên nghiệp làm việc | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Bắt Đầu | Cơ bản về GitHub, bao gồm làm việc nhóm | Cách sử dụng GitHub trong dự án của bạn, cách cộng tác với người khác trên mã nguồn | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Bắt Đầu | Khả năng tiếp cận | Học các kiến thức cơ bản về khả năng tiếp cận web | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Cơ Bản | Các loại dữ liệu trong JavaScript | Các kiến thức cơ bản về loại dữ liệu trong JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Cơ Bản | Hàm và Phương thức | Học về các hàm và phương thức để quản lý luồng logic của ứng dụng | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Cơ Bản | Quyết định với JS | Học cách tạo điều kiện trong mã của bạn sử dụng các phương pháp ra quyết định | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Cơ Bản | Mảng và Vòng lặp | Làm việc với dữ liệu sử dụng mảng và vòng lặp trong JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | Thực hành HTML | Xây dựng HTML để tạo một terrarium trực tuyến, tập trung vào xây dựng bố cục | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | Thực hành CSS | Xây dựng CSS để tạo kiểu cho terrarium trực tuyến, tập trung vào các kiến thức cơ bản về CSS bao gồm làm trang web phản hồi | [Introduction to 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 để 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 | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Xây dựng một Trò chơi Gõ phím | Học cách sử dụng sự kiện bàn phím để điều khiển logic của ứng dụng JavaScript | [Event-Driven Programming](./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 | Học cách trình duyệt hoạt động, lịch sử của chúng và cách tạo khung cho các phần tử đầu tiên của tiện ích mở rộng trình duyệt | [About Browsers](./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 trữ 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 sử dụng biến lưu trong bộ nhớ cục bộ | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Các quy trình nền trong trình duyệt, hiệu suất web | Sử dụng các quy trình nền của trình duyệt để quản lý biểu tượng tiện ích; tìm hiểu về hiệu suất web và một số tối ưu hóa để nâng cao | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Phát triển Game nâng cao hơn với JavaScript | Học về kế thừa sử dụng cả Lớp và Tổng hợp và mẫu Pub/Sub, chuẩn bị cho việc xây dựng game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Vẽ trên canvas | Học về Canvas API, dùng để vẽ các phần tử lên màn hình | [Drawing to 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ử quanh màn hình | Khám phá cách các phần tử có thể chuyển động sử dụng tọa độ Đề-các và Canvas API | [Moving Elements Around](./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 sử dụng phím bấm và cung cấp chức năng hạ nhiệt để đảm bảo hiệu suất trò chơi | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Tính đ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 | [Keeping Score](./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 | Học về kết thúc và khởi động lại trò chơi, bao gồm dọn dẹp tài sản và đặt lại biến | [The Ending Condition](./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 | Học cách tạo khung kiến trúc của một trang web đa trang sử dụng định tuyến và mẫu HTML | [HTML Templates and Routes](./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ý | Học về xây dựng biểu mẫu và xử lý các quy trình xác thực | [Forms](./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 đi vào và ra khỏi ứng dụng của bạn, cách lấy nó, lưu trữ và loại bỏ | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Khái niệm Quản lý Trạng thái | Học cách ứng dụng giữ trạng thái và quản lý nó một cách lập trình | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Làm việc với VScode | Học cách sử dụng trình soạn thảo mã | [Use 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 | Học cách xây dựng trợ lý AI của riêng bạn | [AI Assistant project](./9-chat-project/README.md) | Chris |
| 01 | Bắt Đầu | Giới thiệu về Lập trình và Công cụ chuyên ngành | Tìm hiểu các nền tảng cơ bản đằng sau hầu hết ngôn ngữ lập trình và về phần mềm giúp các nhà phát triển chuyên nghiệp làm việc | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Bắt Đầu | Những điều cơ bản về GitHub, bao gồm làm việc nhóm | Cách sử dụng GitHub trong dự án của bạn, cách cộng tác với người khác trên mã nguồn | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Bắt Đầu | Khả năng tiếp cận (Accessibility) | Học những kiến thức cơ bản về khả năng tiếp cận trên web | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Cơ Bản | Các kiểu dữ liệu trong JavaScript | Những kiến thức cơ bản về các kiểu dữ liệu trong JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Cơ Bản | Các hàm và phương thức | Tìm hiểu về các hàm và phương thức để quản lý luồng logic ứng dụng | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Cơ Bản | Tạo quyết định với JS | Học 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 | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Cơ Bản | Mảng và vòng lặp | Làm việc với dữ liệu sử dụng mảng và vòng lặp trong JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML trong thực hành | Xây dựng HTML để tạo một môi trường sinh thái trực tuyến, tập trung vào xây dựng bố cục | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS trong thực hành | Xây dựng CSS để tạo kiểu cho môi trường sinh thái trực tuyến, tập trung vào các kiến thức cơ bản về CSS bao gồm làm trang responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closure trong JavaScript, thao tác DOM | Xây dựng JavaScript để làm cho môi trường sinh thái hoạt động như giao diện kéo/thả, tập trung vào closure và thao tác DOM | [JavaScript Closures, DOM manipulation](./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 | Học cách sử dụng sự kiện bàn phím để điều khiển logic ứng dụng JavaScript của bạn | [Event-Driven Programming](./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 các trình duyệt hoạt động, lịch sử của chúng, và cách khởi tạo các phần tử đầu tiên của tiện ích trình duyệt | [About Browsers](./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ộ (local storage) | Xây dựng các phần tử JavaScript của tiện ích trình duyệt để gọi API sử dụng biến lưu trong bộ nhớ cục bộ | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Các tiến trình nền trong trình duyệt, hiệu năng web | Sử dụng các tiến trình nền của trình duyệt để quản lý biểu tượng tiện ích; tìm hiểu về hiệu năng web và một số tối ưu hóa để cải thiện | [Background Tasks and Performance](./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 sử dụng cả lớp (Classes) và thành phần (Composition) và mẫu Pub/Sub, chuẩn bị cho việc xây dựng trò chơi | [Introduction to Advanced Game Development](./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 | [Drawing to 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ử quanh màn hình | Khám phá cách các phần tử có thể chuyển động bằng tọa độ Đề-các và API Canvas | [Moving Elements Around](./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 phím bấm và cung cấp chức năng làm nguội để đảm bảo hiệu năng trò chơi | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Giữ điểm | Thực hiện các phép toán dựa trên trạng thái và hiệu năng của trò chơi | [Keeping Score](./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ề kết thúc và khởi động lại trò chơi, bao gồm dọn dẹp tài nguyên và đặt lại giá trị biến | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Mẫu HTML và các tuyến trong ứng dụng web | Học cách tạo khung kiến trúc cho website nhiều trang bằng cách dùng routing và mẫu HTML | [HTML Templates and Routes](./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 cách xây dựng biểu mẫu và xử lý các quy trình xác thực | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Các phương pháp lấy và sử dụng dữ liệu | Cách luồng dữ liệu đi 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 | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Khái niệm 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 | [State Management](./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 soạn thảo mã | [Use 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 | Học cách xây dựng trợ lý AI riêng của bạn | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Phương pháp giảng dạy
Chương trình giảng dạy của chúng tôi được thiết kế với hai nguyên tắc sư phạm chính:
Chương trình của chúng tôi được thiết kế dựa trên hai nguyên tắc giáo dục chính:
* học dựa trên dự án
* các bài kiểm tra thường xuyên
* kiểm tra định kỳ
Chương trình dạy các kiến thức cơ bản về JavaScript, HTML và CSS, cũng như các công cụ và kỹ thuật mới nhất được các nhà phát triển web hiện nay sử dụng. Học viên sẽ có cơ hội phát triển kinh nghiệm thực tế bằng cách xây dựng một trò chơi gõ phím, terrarium ảo, tiện ích mở rộng trình duyệt thân thiện với môi trường, trò chơi kiểu không gian xâm lược, và ứng dụng ngân hàng cho doanh nghiệp. Cuối chuỗi bài học, học viên sẽ có được hiểu biết vững chắc về phát triển web.
Chương trình dạy các kiến thức cơ bản về JavaScript, HTML và CSS, cũng như các công cụ và kỹ thuật mới nhất được các nhà phát triển web hiện nay sử dụng. Học viên sẽ có cơ hội trải nghiệm thực hành thông qua việc xây dựng trò chơi đánh máy, môi trường sinh thái ảo, tiện ích mở rộng trình duyệt thân thiện môi trường, trò chơi kiểu không gian xâm lược và một ứng dụng ngân hàng dành cho doanh nghiệp. Đến cuối chuỗi bài học, học viên sẽ thu được hiểu biết vững chắc về phát triển web.
> 🎓 Bạn có thể học những bài đầu tiên trong chương trình này như một [Đường Học](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) trên Microsoft Learn!
> 🎓 Bạn có thể bắt đầu với vài bài học đầu tiên trong chương trình này như một [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 trở nên hấp dẫn hơn cho học viên và việc ghi nhớ kiến thức 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 tài liệu video "[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 nó cũng góp phần vào chương trình giảng dạy này.
Bằng cách đảm bảo nội dung phù hợp với các dự án, quá trình học được làm thú vị hơn cho học viên và việc ghi nhớ các khái niệm cũng đượ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èm theo 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)", trong đó một số tác giả đã góp phần cho chương trình này.
Ngoài ra, một bài kiểm tra với mức độ áp lực thấp trước lớp nhằm đặt mục tiêu cho học viên hướng tới việc học một chủ đề, trong khi bài kiểm tra thứ hai sau lớp đảm bảo việc lưu giữ kiến thức. Chương trình này được thiết kế linh hoạt và vui nhộn, có thể học toàn bộ hoặc từng phần. Các dự án bắt đầu nhỏ và ngày càng 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ẹ trước lớp đặt mục tiêu học tập cho học sinh, trong khi bài kiểm tra thứ hai sau lớp đảm bảo việc ghi nhớ sâu thêm. Chương trình 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à ngày càng phức tạp hơn vào cuối chu kỳ 12 tuần.
Trong khi chúng tôi cố ý tránh giới thiệu các framework JavaScript để tập trung vào kỹ năng cơ bản cần có của nhà phát triển web trước khi áp dụng một framework, bước tiếp theo tốt để hoàn thành chương trình giảng dạy này là học về Node.js qua một bộ 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ó chủ ý 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 cho nhà phát triển web trước khi áp dụng framework, bước tiếp theo tốt để hoàn thành chương trình này là học về Node.js qua bộ video khác: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Tham khảo [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 các phản hồi xây dựng của bạn!
> Truy cập [Bộ Quy tắc Ứng xử](CODE_OF_CONDUCT.md) và [Hướng Dẫn Góp Phần](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 Offline
## 🧭 Truy cập ngoại tuyến
Bạn có thể chạy tài liệu này offline bằng cách sử dụng [Docsify](https://docsify.js.org/#/). Tạo một bản fork repo này, [cài đặt Docsify](https://docsify.js.org/#/quickstart) trên máy tính của bạn, sau đó trong thư mục gốc của repo này, gõ `docsify serve`. Trang web sẽ được phục vụ tại cổng 3000 trên localhost của bạn: `localhost:3000`.
Bạn có thể chạy tài liệu này ngoại tuyến bằng cách sử dụng [Docsify](https://docsify.js.org/#/). Sao chép repo này, [cài đặt Docsify](https://docsify.js.org/#/quickstart) trên máy cục bộ của bạn, rồi trong thư mục gốc của repo này, gõ `docsify serve`. Website sẽ chạy trên cổng 3000 tại localhost của bạn: `localhost:3000`.
## 📘 PDF
Một bản 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).
File PDF tất cả các bài học có thể tìm thấy [tại đây](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Các Khóa Học Khác
Nhóm của chúng tôi sản xuất các khóa học khác! Hãy xem:
## 🎒 Các khóa học khác
Nhóm của chúng tôi còn sản xuất các khóa học khác! Hãy xem:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain4j cho Người mới bắt đầu](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js cho Người mới bắt đầu](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain cho Người mới bắt đầu](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AZD cho Người mới bắt đầu](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI cho Người mới bắt đầu](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP cho Người mới bắt đầu](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents cho Người mới bắt đầu](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Chuỗi AI Tạo Sinh
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[![AI Tạo Sinh cho Người mới bắt đầu](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Tạo Sinh (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![AI Tạo Sinh (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![AI Tạo Sinh (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Học Tập Cốt Lõi
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Học Tập Cơ Bản
[![ML cho Người mới bắt đầu](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Khoa học Dữ liệu cho Người mới bắt đầu](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI cho Người mới bắt đầu](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![An ninh mạng cho Người mới bắt đầu](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Phát triển Web cho Người mới bắt đầu](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT cho Người mới bắt đầu](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![Phát triển XR cho Người mới bắt đầu](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Chuỗi Copilot
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
[![Copilot cho Lập trình Đôi AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot cho C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Phiêu lưu Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Nhận Trợ Giúp
## Nhận Hỗ Trợ
Nếu bạn gặp khó khăn hoặc có bất kỳ câu hỏi nào về việc xây dựng các ứng dụng AI. Hãy tham gia cùng các học viên khác và các nhà phát triển có kinh nghiệm trong các cuộc thảo luận về MCP. Đây là một cộng đồng hỗ trợ nơi các câu hỏi được chào đón và kiến thức được chia sẻ tự do.
Nếu bạn gặp khó khăn hoặc có bất kỳ câu hỏi nào về việc xây dựng ứng dụng AI. 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 luôn được chào đón và kiến thức được chia sẻ tự do.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Nếu bạn có phản hồi về sản phẩm hoặc lỗi trong khi 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 khi xây dựng, hãy truy cập:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
@ -266,5 +265,5 @@ Kho lưu trữ này được cấp phép theo giấy phép MIT. Xem tệp [LICEN
<!-- 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 nỗ lực đảm bảo tính chính xác, xin lưu ý rằng 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 tham khảo chính thức. Đối với thông tin quan trọng, khuyến nghị 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 đối với bất kỳ sự hiểu lầm hay 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 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 chính thức và đáng tin cậy. Đối với các 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 về bất kỳ sự hiểu nhầ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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/vi/Roadmap.md
Unescape View File

@ -0,0 +1,53 @@
# Lộ trình cho Kho lưu trữ Web-Dev-For-Beginners của Microsoft
**Kho lưu trữ này cung cấp một lộ trình để học các kiến thức cơ bản về phát triển web với trọng tâm là JavaScript, HTML và CSS. Chương trình học linh hoạt và có thể học toàn bộ hoặc một phần, với 24 bài học trải đều trong 12 tuần.**
## Các Cột Mốc Chính
* **Tuần 1-3:**
* Giới thiệu về ngôn ngữ lập trình và các công cụ
* Cơ bản về GitHub
* Khả năng truy cập
* Các kiến thức cơ bản về JS: kiểu dữ liệu, hàm và phương thức
* Ra quyết định với JS
* **Tuần 4-6:**
* Mảng và vòng lặp
* Terrarium: HTML trong thực hành
* CSS trong thực hành
* Các closure trong JavaScript
* Thao tác với DOM
* **Tuần 7-9:**
* Trò chơi gõ chữ: Lập trình sự kiện
* Phần mở rộng trình duyệt xanh: Làm việc với trình duyệt
* Xây dựng biểu mẫu, gọi API và lưu biến vào bộ nhớ cục bộ
* Quá trình nền trong trình duyệt
* Hiệu suất Web
* **Tuần 10-12:**
* Trò chơi không gian: Phát triển trò chơi nâng cao với JavaScript
* Vẽ lên canvas
* Di chuyển các phần tử trên màn hình
* Phát hiện va chạm
* Ghi điểm, kết thúc và khởi động lại trò chơi
* Ứng dụng ngân hàng: Mẫu HTML và các đường dẫn trong ứng dụng web
* Xây dựng Biểu mẫu đăng nhập và đăng ký
* Phương pháp lấy và sử dụng dữ liệu
* Khái niệm về Quản lý Trạng thái
## Kết Quả Học Tập
**Bằng việc hoàn thành lộ trình này, học viên sẽ có kinh nghiệm thực tế trong việc xây dựng trò chơi gõ chữ, terrarium ảo, phần mở rộng trình duyệt thân thiện với môi trường, trò chơi bắn xâm lược không gian và một ứng dụng ngân hàng cho doanh nghiệp. Họ cũng sẽ phát triển hiểu biết vững chắc về các kiến thức cơ bản trong phát triển web.**
## Tài Nguyên Bổ Sung
* Kho lưu trữ này cung cấp nhiều tài nguyên để học thêm, bao gồm các hướng dẫn, ví dụ mã và thử thách.
* Nền tảng Microsoft Learn cung cấp đa dạng các khóa học và lộ trình học phát triển web.
* Các cộng đồng trực tuyến như Stack Overflow và MDN Web Docs cung cấp sự hỗ trợ và tài nguyên giá trị cho các nhà phát triển web.
**Hy vọng lộ trình này sẽ giúp bạn trên hành trình phát triển web của mình!**
---
<!-- 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 bản dịch tự động có thể chứa lỗi hoặc sự không chính xác. Tài liệu gốc bằng ngôn ngữ gốc nên được coi là nguồn thông tin chính xác nhất. Đối với các thông tin quan trọng, khuyến nghị sử dụng 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 về bất kỳ 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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Write Preview
Loading…
Cancel
Save