זהו מאגר תכנית לימודים חינוכית להוראת יסודות פיתוח אתרים למתחילים. התכנית היא קורס מקיף של 12 שבועות שפותח על ידי Microsoft Cloud Advocates, וכוללת 24 שיעורים מעשיים המכסים JavaScript, CSS ו-HTML.
מאגר זה הוא תוכנית לימודים חינוכית להוראת יסודות פיתוח ווב למתחילים. התוכנית היא קורס מקיף בן 12 שבועות שפותח על ידי Microsoft Cloud Advocates, הכולל 24 שיעורים מעשיים המכסים JavaScript, CSS ו-HTML.
- `7-bank-project/README.md` - אפליקציית בנקאות עם אימות
- `5-browser-extension/README.md` - פיתוח תוסף דפדפן
- `6-space-game/README.md` - פיתוח משחק מבוסס קנבס
- `9-chat-project/README.md` - פרויקט עוזר שיחה מבוסס AI
### מבנה 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). למרות שאנו שואפים לדיוק, יש לדעת כי תרגומים אוטומטיים עלולים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפת המקור שלו הוא המקור הסמכותי. לשם מידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. אנו לא נושאים באחריות לכל אי הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.
למד את היסודות של פיתוח ווב עם הקורס המקיף בן 12 השבועות שלנו על ידי Microsoft Cloud Advocates. כל אחד מ-24 השיעורים מתעמק ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כגון טרריום, תוספים לדפדפן ומשחקי חלל. השתתף בחידונים, דיונים ומשימות מעשיות. שפר את הכישורים שלך ואופטימיזציה לשימור הידע שלך עם הפדגוגיה הבסיסית שלנו המבוססת על פרויקטים. התחל את מסע הקידוד שלך היום!
למדו את יסודות פיתוח הווב עם קורס מקיף בן 12 שבועות בהובלת Microsoft Cloud Advocates. כל אחד מ-24 השיעורים מציע העמקה ב- JavaScript, CSS ו- HTML עם פרויקטים מעשיים כמו טרריומים, הרחבות לדפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ומשימות מעשיות. שפרו את הכישורים שלכם ואופטימיזציה של שימור הידע בעזרת מתודולוגית הפרויקטים שלנו. התחילו את מסלול הקידוד שלכם היום!
עקוב אחרי הצעדים הבאים כדי להתחיל להשתמש במשאבים הללו:
1. **העתק את המאגר**: לחץ על [](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. **שכפלו את המאגר Fork**: לחצו על [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **שכפלו את המאגר Clone**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**הצטרפו ל- Azure AI Foundry Discord ופגשו מומחים ומפתחים אחרים**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 תמיכה בריבוי שפות
### 🌐 תמיכה בשפות מרובות
#### נתמך באמצעות GitHub Action (אוטומטי ותמיד מעודכן)
> 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)**
**אם ברצונכם לתמוך בשפות תרגום נוספות הרשומות כאן [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](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 ומצב Agent. אם עדיין לא השתמשתם במצב Agent, הוא יכול לא רק לייצר טקסט אלא גם ליצור ולערוך קבצים, להפעיל פקודות ועוד.
### 📣 הכרזה - _פרויקט חדש לבנות בעזרת 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) כדי להתחיל!
כל שיעור כולל משימה להשלים, בדיקת ידע ואתגר שינחה אותך בנושאים כמו:
- יצירת prompt והנדסת prompt
כל שיעור כולל משימה להשלים, בדיקת ידע ואתגר שמנחה אתכם בנושאים כמו:
- prompt ו- prompt engineering
- יצירת אפליקציות טקסט ותמונה
- אפליקציות חיפוש
בקר ב-[https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) כדי להתחיל!
בקרו ב-[https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) כדי להתחיל!
## 🌱 התחלה
## 🌱 להתחלה
> **מורים**, כלולנו [הצעות](for-teachers.md) כיצד להשתמש בתוכנית זו. נשמח למשוב שלכם [בפורום הדיון](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **למורים**, כלול כאן [כמה הצעות](for-teachers.md) לשימוש בתוכנית הלימודים. נשמח לקבל את המשוב שלכם [בפורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, עבור כל שיעור, התחל עם חידון לפני ההרצאה והמשך בקריאת חומר ההרצאה, השלמת הפעילויות השונות ובדוק את הבנתך עם חידון אחרי ההרצאה.
**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, בכל שיעור, התחילו בחידון לפני ההרצאה והמשיכו בקריאת חומר ההרצאה, השלמת הפעילויות השונות ובדקו את ההבנה שלכם עם חידון לאחר ההרצאה.
כדי לשפר את חוויית הלמידה שלך, התחבר עם חבריך לעבודה על הפרויקטים ביחד! אנו מעודדים דיונים ב[פורום הדיון שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) שבו צוות המנהלים שלנו יעמוד לרשותך עם תשובות לשאלות.
כדי לשפר את חוויית הלמידה שלכם, התחברו עם חבריכם לעבודה משותפת על הפרויקטים! עידוד לדיונים בפורום הדיונים שלנו [כאן](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) שבו צוות המנחים שלנו זמין לשאלותיכם.
להעמקת ההשכלה שלך, אנו ממליצים בחום לחקור את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) עבור חומרים נוספים ללימוד.
לקידום נוסף של ההשכלה שלכם אנו ממליצים בחום לחקור את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) לחומרי לימוד נוספים.
### 📋 הגדרת סביבת העבודה שלך
### 📋 הגדרת סביבת העבודה שלכם
לתוכנית זו יש סביבת פיתוח מוכנה! כאשר אתה מתחיל, תוכל לבחור להפעיל את התוכנית ב-[Codespace](https://github.com/features/codespaces/) (_סביבה מבוססת דפדפן ללא צורך בהתקנות_), או מקומית במחשב שלך בעזרת עורך טקסט כגון [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
לתוכנית הלימודים הזו קיימת סביבת פיתוח מוכנה! כשאתם מתחילים תוכלו לבחור להפעיל את התוכנית ב-[Codespace](https://github.com/features/codespaces/) (_סביבה מבוססת דפדפן ללא צורך בהתקנות_), או מקומית במחשב שלכם בעזרת עורך טקסט כמו [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### צור את המאגר שלך
כדי שתוכל לשמור את העבודה שלך בקלות, מומלץ ליצור עותק משלך של המאגר הזה. ניתן לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש הדף. פעולה זו תיצור מאגר חדש בחשבון GitHub שלך עם עותק של תוכנית הלימודים.
#### צרו את המאגר שלכם
כדי שתוכלו לשמור את העבודה שלכם בקלות, מומלץ ליצור עותק משלכם של המאגר. ניתן לעשות זאת על ידי לחיצה על כפתור **Use this template** בפסגת הדף. זה ייצור מאגר חדש בחשבון GitHub שלכם עם עותק של תוכנית הלימודים.
עקוב אחרי הצעדים הבאים:
1. **העתק את המאגר**: לחץ על כפתור "Fork" בפינה הימנית העליונה של עמוד זה.
2. **שכפל את המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
עקבו אחר הצעדים האלה:
1. **שכפלו את המאגר Fork**: לחצו על כפתור "Fork" בפינה הימנית-עליונה של הדף.
2. **שכפלו את המאגר Clone**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### הפעלת התוכנית ב-Codespace
#### הפעלת תוכנית הלימודים ב-Codespace
בעותק שלך של המאגר שיצרת, לחץ על כפתור **Code** ובחר **Open with Codespaces**. פעולה זו תיצור עבורך Codespace חדש לעבודה.
בעותק שלכם של המאגר שיצרתם, לחצו על כפתור **Code** ובחרו **Open with Codespaces**. זה ייצור עבורכם Codespace חדש לעבודה.
כדי להפעיל תוכנית זו במחשב המקומי שלך, תזדקק לעורך טקסט, דפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [מבוא לשפות תכנות וכלי מסחר](../../1-getting-started-lessons/1-intro-to-programming-languages), ידריך אותך דרך אפשרויות שונות של כלים אלו כדי לבחור מה שמתאים לך ביותר.
כדי להפעיל את התוכנית מקומית, תזדקקו לעורך טקסט, דפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [הקדמה לשפות תכנות וכלי עבודה](../../1-getting-started-lessons/1-intro-to-programming-languages), ילווה אתכם באפשרויות שונות עבור כל אחד מהכלים כדי לבחור את המתאים ביותר עבורכם.
ההמלצה שלנו היא להשתמש ב-[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) כעורך שלך, שמכיל גם [טרמינל](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) מובנה. אתה יכול להוריד את Visual Studio Code [כאן](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
אנו ממליצים להשתמש ב-[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) כעורך שלכם, שכולל גם [טרמינל מובנה](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). ניתן להוריד את Visual Studio Code [כאן](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. שכפל את המאגר למחשב שלך. ניתן לעשות זאת על ידי לחיצה על כפתור **Code** והעתקת כתובת ה-URL:
1. שכפלו את המאגר למחשב שלכם. ניתן לעשות זאת על ידי לחיצה על כפתור **Code** והעתקת כתובת ה- URL:
[CodeSpace](./images/createcodespace.png)
אז פתחו את ה-[טרמינל](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) בתוך [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) והריצו את הפקודה הבאה, כאשר מחליפים את `<your-repository-url>` בכתובת ה-URL שהעתקתם זה עתה:
ואז, פתח את ה-[טרמינל](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) בתוך [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) והרץ את הפקודה הבאה, כשהחלף את `<your-repository-url>` בכתובת ה-URL שהעתקת:
```bash
git clone <your-repository-url>
```
2. פתחו את התיקייה ב-Visual Studio Code. ניתן לעשות זאת על ידי לחיצה על **File** > **Open Folder** ובחירת התיקייה שהעתקת זה עתה.
2. פתח את התיקייה ב-Visual Studio Code. ניתן לעשות זאת על ידי לחיצה על **קובץ** > **פתח תיקייה** ובחירת התיקייה שהעתקת זה עתה.
> הרחבות מומלצות ל-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/)
- [מבחן לאחר השיעור](https://ff-quizzes.netlify.app/web/)
> **הערה לגבי חידונים**: כל החידונים נמצאים בתיקיית Quiz-app, סה"כ 48 חידונים עם שלוש שאלות כל אחד. הם זמינים [כאן](https://ff-quizzes.netlify.app/web/) ואפליקציית החידון יכולה לפעול באופן מקומי או להיות מופעלת ב-Azure; עקבו אחר ההוראות בתיקיית `quiz-app`.
> **הערה לגבי מבחנים**: כל המבחנים נמצאים בתיקיית Quiz-app, 48 מבחנים בסה"כ, כל אחד עם שלוש שאלות. ניתן לגשת אליהם [כאן](https://ff-quizzes.netlify.app/web/). אפליקציית המבחנים יכולה לרוץ מקומית או להיות מפורסת ל-Azure; עקוב אחרי ההוראות בתיקיית `quiz-app`.
## 🗃️ שיעורים
| | שם הפרויקט | מושגים הנלמדים | מטרות הלמידה | שיעור מקושר | מחבר |
| 01 | התחלה | מבוא לתכנות וכלי העבודה | ללמוד את היסודות הבסיסיים שמאחורי רוב שפות התכנות ועל התוכנות המסייעות למפתחים מקצועיים בביצוע עבודתם | [מבוא לשפות תכנות וכלי העבודה](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 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 |
| | שם הפרויקט | המושגים הנלמדים | מטרות הלמידה | שיעור מקושר | מחבר |
| 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 | היסודות של סוגי הנתונים בג'אווה סקריפט | [סוגי נתונים](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | יסודות JS | פונקציות ושיטות | ללמוד על פונקציות ושיטות לניהול זרימת הלוגיקה של אפליקציה | [פונקציות ושיטות](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | יסודות JS | קבלת החלטות עם JS | ללמוד כיצד ליצור תנאים בקוד שלך באמצעות שיטות קבלת החלטות | [קבלת החלטות](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | יסודות JS | מערכים ולולאות | עבודה עם נתונים באמצעות מערכים ולולאות ב-JavaScript | [מערכים ולולאות](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [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 |
| 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 |
| 07 | יסודות JS | מערכים ולולאות | לעבוד עם נתונים באמצעות מערכים ולולאות בג'אווה סקריפט | [מערכים ולולאות](./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 באמצעות משתנים המאוחסנים באחסון המקומי | [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 | ללמוד על ירושה באמצעות מחלקות וקומפוזיציה ודפוס Pub/Sub, כהכנה לבניית משחק | [מבוא לפיתוח משחק מתקדם](./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 |
| 17 | [משחק חלל](./6-space-game/solution/README.md) | הזזת אלמנטים על המסך | לגלות כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-API של Canvas | [הזזת אלמנטים סביב](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [משחק חלל](./6-space-game/solution/README.md) | זיהוי התנגשויות | לגרום לאלמנטים להתנגש ולהגיב זה לזה באמצעות לחיצות מקשים ולספק פונקציית קירור לוודא ביצועים טובים למשחק | [זיהוי התנגשויות](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [משחק חלל](./6-space-game/solution/README.md) | שמירת ניקוד | לבצע חישובים מתמטיים על פי מצב וביצועי המשחק | [שמירת ניקוד](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [משחק חלל](./6-space-game/solution/README.md) | סיום ואתחול המשחק | ללמוד על סיום ואתחול המשחק, כולל ניקוי משאבים ואיפוס ערכי משתנים | [תנאי הסיום](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | תבניות HTML ונתיבי ניווט באפליקציית ווב | ללמוד כיצד ליצור את מבנה אתר אינטרנט רב דפי באמצעות נתיבים ותבניות HTML | [תבניות HTML ונתיבי ניווט](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | לבנות טופס כניסה והרשמה | ללמוד על בניית טפסים וטיפול בתהליכי אימות | [טפסים](./7-bank-project/2-forms/README.md) | Yohan |
| 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 |
| 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 |
## 🏫 פדגוגיה
תוכנית הלימודים שלנו מתוכננת עם שני עקרונות פדגוגיים מרכזיים:
תכנית הלימודים שלנו עוצבה עם שני עקרונות פדגוגיים מרכזיים:
* למידה מבוססת פרויקטים
* חידונים תכופים
* מבחנים תכופים
התכנית מלמדת את היסודות של 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 כדי להציג מושגים, בצירוף וידאו מסדרת ה-[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon), שחלק מהמחברים שלהם תרמו לתכנית זו.
בנוסף, חידון בעל סיכון נמוך לפני השיעור מגדיר את כוונתו של התלמיד ללמוד נושא, בעוד שחידון שני לאחר השיעור מבטיח שימור נוסף. תוכנית הלימודים הזו עוצבה להיות גמישה ומהנה וניתן ללמוד אותה במלואה או בחלקה. הפרויקטים מתחילים קטנים ומתקדמים בצורה מורכבת יותר עד לסיום מחזור 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 באמצעות אוסף וידאו נוסף: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> בקרו ב-[קוד ההתנהגות שלנו](CODE_OF_CONDUCT.md) ובכללי [התרומה שלנו](CONTRIBUTING.md). נשמח לקבל את המשוב הבונה שלך!
## 🧭 גישה לא מקוונת
ניתן להפעיל תיעוד זה במצב לא מקוון באמצעות [Docsify](https://docsify.js.org/#/). צרפו את הריפוזיטורי הזה, [התקינו את Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלכם, ואז בתיקיית השורש של הריפוזיטורי הזה, הקלידו `docsify serve`. האתר יפעל על פורט 3000 ב-localhost שלכם: `localhost:3000`.
ניתן להריץ תיעוד זה באוף-ליין באמצעות [Docsify](https://docsify.js.org/#/). פצל את המאגר הזה, [התקן את Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלך, ולאחר מכן בתיקיית השורש של מאגר זה, הקלד `docsify serve`. האתר יהיה זמין בפורט 3000 במחשב המקומי: `localhost:3000`.
## 📘 PDF
קובץ PDF של כל השיעורים זמין [כאן](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
קובץ PDF של כל השיעורים ניתן למצוא [כאן](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 קורסים נוספים
הצוות שלנו מייצר קורסים נוספים! בדקו:
הצוות שלנו מפיק קורסים נוספים! בדקו:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### סדרת AI יצירתי
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### למידה בסיסית
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
אם אתם נתקעים או יש לכם שאלות לגבי בניית אפליקציות AI. הצטרפו ללומדים אחרים ומפתחים מנוסים בדיונים על MCP. זו קהילה תומכת שבה שאלות מתקבלות בברכה והידע משותף בחופשיות.
אם נתקעתם או יש לכם שאלות לגבי בניית אפליקציות בינה מלאכותית. הצטרפו ללומדים ולמפתחים מנוסים בדיונים על MCP. זוהי קהילה תומכת שבה שאלות מתקבלות בברכה והידע משותף בחופשיות.
[](https://aka.ms/foundry/forum)
## רישיון
@ -266,6 +264,6 @@
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב למקור המוסמך. למידע קריטי מומלץ להשתמש בתרגום מקצועי אנושי. אנו לא נשא באחריות לכל הבנה שגויה או פרשנות מוטעית הנובעת מהשימוש בתרגום זה.
**הצהרת אי-אחריות**:
מסמך זה תורגם באמצעות שירות תרגום אוטומטי מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). על אף שאנו שואפים לדייק, יש לקחת בחשבון כי תרגומים אוטומטיים עלולים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית הוא המקור הסמכותי. עבור מידע קריטי מומלץ להשתמש בתרגום מקצועי ובידי אדם. איננו אחראים לכל אי-הבנה או פרשנות שגויה הנובעים משימוש בתרגום זה.
Ini adalah repositori kurikulum 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 edukasi untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini merupakan kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran langsung yang mencakup JavaScript, CSS, dan HTML.
### Komponen Utama
- **Konten Pendidikan**: 24 pelajaran terstruktur yang diorganisasi ke 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)
- **Dukungan Multi-bahasa**: Terjemahan otomatis untuk lebih dari 50 bahasa melalui GitHub Actions
- Token GitHub harus dengan izin minimal diperlukan
### Akses GitHub Models
- Personal Access Tokens (PAT) diperlukan untuk GitHub Models
- Token harus disimpan sebagai variabel lingkungan
- Jangan pernah mengkomit token atau kredensial
- Personal Access Tokens (PAT) diperlukan untuk GitHub Models
- Token harus disimpan sebagai variabel lingkungan
- Jangan pernah commit token atau kredensial
## Catatan Tambahan
### Target Audiens
- Pemula lengkap dalam pengembangan web
- Siswa dan pembelajar mandiri
- Guru yang menggunakan kurikulum di kelas
- Konten dirancang untuk aksesibilitas dan pembangunan keterampilan bertahap
- Pemula lengkap dalam pengembangan web
- Siswa dan pembelajar mandiri
- Guru yang menggunakan kurikulum di kelas
- Konten dirancang untuk aksesibilitas dan pembangunan keterampilan bertahap
### Filosofi Pendidikan
### Filosofi Edukasi
- Pendekatan pembelajaran berbasis proyek
- Pemeriksaan pengetahuan yang sering (kuis)
- Latihan coding langsung
- Contoh aplikasi dunia nyata
- Fokus pada dasar-dasar sebelum framework
- Pendekatan pembelajaran berbasis proyek
- Pemeriksaan pengetahuan yang sering (kuis)
- Latihan coding langsung
- Contoh aplikasi dunia nyata
- 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 yang aktif
- Pembaruan rutin pada dependensi dan konten
- Isu dan diskusi dipantau oleh pemelihara
- Pembaruan terjemahan otomatis melalui 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
- [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 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 mendetail pada proyek individual, lihat file README di:
- `quiz-app/README.md` - aplikasi kuis Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan autentikasi
- `5-browser-extension/README.md` - pengembangan ekstensi browser
- `6-space-game/README.md` - pengembangan game berbasis canvas
- `9-chat-project/README.md` - proyek asisten chat AI
### Struktur Monorepo
Meskipun bukan monorepo tradisional, repositori ini berisi beberapa proyek independen:
- Setiap pelajaran bersifat mandiri
- Proyek tidak berbagi dependensi
- Bekerja pada proyek individual tanpa memengaruhi yang lain
- Clone seluruh repositori untuk pengalaman kurikulum penuh
Meskipun bukan monorepo tradisional, repositori ini berisi beberapa proyek independen:
- Setiap pelajaran berdiri sendiri
- Proyek tidak berbagi dependensi
- Kerjakan proyek individual tanpa memengaruhi yang lain
- Clone seluruh repo untuk pengalaman kurikulum lengkap
---
<!-- 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 memberikan terjemahan yang akurat, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sah dan utama. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.
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 selama 12 minggu oleh Microsoft Cloud Advocates. Setiap dari 24 pelajaran mengeksplorasi 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. Mulailah perjalanan coding Anda hari ini!
Bergabunglah dengan Komunitas Discord Azure AI Foundry
> Repository ini mencakup lebih dari 50 bahasa terjemahan yang secara signifikan meningkatkan ukuran unduhan. Untuk clone tanpa terjemahan, gunakan sparse checkout:
> Repositori ini mencakup lebih dari 50 terjemahan bahasa yang secara signifikan meningkatkan ukuran unduhan. Untuk meng-clone tanpa terjemahan, gunakan sparse checkout:
> 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 memberikan 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 dukungan bahasa terjemahan tambahan, daftar bahasa yang didukung terdapat [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Apakah Anda seorang pelajar?_
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) di mana Anda akan menemukan sumber daya untuk pemula, paket pelajar, dan bahkan cara mendapat voucher sertifikat gratis. Ini adalah halaman yang ingin Anda favoritkan dan periksa secara berkala karena konten kami akan diperbarui 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 dapat membuat dan mengedit file, menjalankan perintah dan lainnya.
### 📣 Pengumuman - _Proyek Baru untuk Dibangun menggunakan Generative AI_
### 📣 Pengumuman - _Proyek Baru untuk dibangun menggunakan AI Generatif_
Proyek Asisten AI baru baru saja ditambahkan, cek [proyek](./9-chat-project/README.md)
Proyek Asisten AI baru saja ditambahkan, periksa [proyek](./9-chat-project/README.md)
### 📣 Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru saja dirilis
### 📣 Pengumuman - _Kurikulum Baru_ tentang AI Generatif untuk JavaScript baru saja dirilis
Jangan lewatkan kurikulum Generative AI baru kami!
Jangan lewatkan kurikulum AI Generatif baru kami!
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 mulai!
Setiap pelajaran mencakup tugas yang harus diselesaikan, pemeriksaan pengetahuan dan tantangan untuk membantu Anda mempelajari topik seperti:
Setiap pelajaran mencakup tugas untuk diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk membimbing Anda belajar topik seperti:
- Prompting dan rekayasa prompt
- Pembuatan aplikasi teks dan gambar
- Aplikasi pencarian
Kunjungi [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) untuk memulai!
Kunjungi [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) untuk mulai!
## 🌱 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)!
> **Guru**, kami telah [menyertakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami sangat mengharapkan masukan 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.
**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis pra-kuliah dan lanjutkan dengan membaca materi kuliah, menyelesaikan berbagai aktivitas, dan periksa pemahaman Anda dengan kuis pasca-kuliah.
Untuk meningkatkan pengalaman belajar Anda, 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 sebaya Anda untuk mengerjakan proyek bersama! Diskusi sangat dianjurkan di [forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) di mana tim moderator kami akan siap 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 menyarankan menjelajahi [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan studi 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 untuk menjalankan kurikulum di [Codespace](https://github.com/features/codespaces/) (_lingkungan berbasis browser, tanpa perlu instalasi_), atau secara lokal di komputer 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.
#### Buat repositori Anda
Agar Anda mudah menyimpan pekerjaan Anda, disarankan untuk membuat salinan repositori ini. Anda dapat melakukannya dengan mengklik tombol **Use this template** di bagian atas halaman. Ini akan membuat repositori baru di akun GitHub Anda dengan salinan kurikulum.
Ikuti langkah berikut:
1. **Fork Repository**: Klik tombol "Fork" di pojok kanan atas halaman ini.
Di salinan repository yang Anda buat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda bekerja.
Di salinan repositori yang Anda buat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda bekerja di dalamnya.
#### 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 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 pilihan untuk masing-masing alat ini agar Anda memilih yang paling sesuai dengan kebutuhan.
Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai editor Anda, yang juga memiliki [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bawaan. Anda dapat mengunduh Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clone repository Anda ke komputer Anda. Anda bisa melakukannya dengan mengklik tombol **Code** dan menyalin URL:
1. Clone repositori 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, gantikan`<your-repository-url>` dengan URL yang baru saja Anda salin:
2. Buka folder di Visual Studio Code. Anda dapat melakukan ini 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
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk mempratinjau halaman HTML di dalam Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - untuk membantu Anda menulis kode lebih cepat
> **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 masing-masing tiga pertanyaan. 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`.
## 🗃️ Pelajaran
| | Nama Proyek | Konsep yang Diajarkan | Tujuan Pembelajaran | Pelajaran Terkait | Penulis |
| | 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 |
| 01 | Memulai | Pengenalan Pemrograman dan Alat Kerja | Pelajari dasar-dasar yang mendasari sebagian besar bahasa pemrograman dan tentang perangkat lunak yang membantu pengembang profesional menjalankan pekerjaan mereka | [Intro ke Bahasa Pemrograman dan 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, bagaimana 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 JavaScript | Dasar-dasar tipe data JavaScript | [Tipe Data](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Dasar JS | Fungsi dan Metode | Pelajari tentang fungsi dan metode untuk mengelola alur logika aplikasi | [Fungsi dan Metode](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher |
| 06 | Dasar JS | Membuat Keputusan dengan JS | Pelajari cara membuat kondisi dalam kode Anda menggunakan metode pengambilan keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Dasar JS | Array dan Loop | Bekerja dengan data menggunakan array dan loop dalam JavaScript | [Array dan Loop](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktek | 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) | CSS dalam Praktek | Bangun CSS untuk menata 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) | Closures JavaScript, manipulasi DOM | Bangun JavaScript untuk membuat terrarium berfungsi sebagai antarmuka drag/drop, fokus pada closures dan manipulasi DOM | [Closures JavaScript, 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 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 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 optimisasi 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 Lanjutan dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan untuk membuat game | [Pengenalan ke Pengembangan Game Lanjutan](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Menggambar ke canvas | Pelajari API Canvas, 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 bisa bergerak menggunakan koordinat kartesius dan API Canvas | [Memindahkan Elemen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Deteksi tabrakan | Buat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan berikan 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 | Lakukan 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 mereset nilai variabel | [Kondisi Akhir](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Template HTML dan Rute dalam Aplikasi Web | Pelajari cara membuat kerangka arsitektur website multipage menggunakan routing dan template HTML | [Template HTML dan Rute](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Membangun Formulir Login dan Pendaftaran | Pelajari tentang membangun formulir dan menangani prosedur validasi | [Formulir](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi Anda, cara mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Manajemen Status | Pelajari bagaimana aplikasi Anda mempertahankan status dan cara mengelolanya secara programatik | [Manajemen Status](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Bekerja dengan VScode | Pelajari cara menggunakan editor kode | [Menggunakan 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 kunci:
* 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 mengembangkan pengalaman langsung dengan membangun permainan mengetik, terrarium virtual, ekstensi browser ramah lingkungan, permainan ala penyerang luar angkasa, dan aplikasi perbankan untuk bisnis. Pada akhir seri, siswa akan memperoleh 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 konten sejalan dengan proyek, proses menjadi lebih menarik bagi siswa dan retensi konsep akan ditingkatkan. Kami juga menulis beberapa pelajaran awal tentang dasar-dasar JavaScript untuk memperkenalkan konsep, dipadukan 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 dalam 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 kesulitan rendah sebelum kelas menetapkan niat siswa untuk mempelajari topik, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan dan dapat diambil secara keseluruhan atau sebagian. Proyek dimulai dari kecil dan menjadi semakin kompleks sampai 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 secara sengaja kami menghindari memperkenalkan framework JavaScript agar fokus pada keterampilan dasar yang dibutuhkan sebagai pengembang web sebelum memakai framework, langkah selanjutnya yang baik setelah menyelesaikan kurikulum ini adalah belajar tentang Node.js lewat 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
## 🧭 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) pada mesin lokal Anda, kemudian di folder root repo ini, ketik `docsify serve`. Situs web akan disajikan pada port 3000 di localhost Anda: `localhost:3000`.
## 📘 PDF
@ -207,16 +206,16 @@ PDF dari semua pelajaran dapat ditemukan [di sini](https://microsoft.github.io/W
## 🎒 Kursus Lainnya
Tim kami menghasilkan kursus lain! Lihat:
Tim kami juga menghasilkan kursus lain! Lihat:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agen
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -251,11 +250,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 sesama pelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung di mana pertanyaan diterima dan pengetahuan dibagikan dengan bebas.
@ -267,5 +266,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 otoritatif. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau salah tafsir yang timbul dari penggunaan terjemahan ini.
Đâ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 lưu trữ chương trình giảng dạy nhằm dạy các kiến thức cơ bản về phát triển web cho người mới bắt đầu. Chương trình gồm một khóa học toàn diện trong 12 tuần được phát triển bởi các Chuyên viên Hỗ trợ Microsoft Cloud, bao gồm 24 bài học thực hành về JavaScript, CSS và HTML.
### Các thành phần chính
### 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
- **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 theo cấu trúc được tổ chức thành các mô-đun dự án
- **Dự án thực hành**: Terrarium, Trò chơi đánh máy, Tiện ích mở rộng trình duyệt, Trò chơi Space, Ứng dụng ngân hàng, Trình soạn thảo mã, và Trợ lý Chat AI
- Xác minh biến môi trường GITHUB_TOKEN đã được thiết lập
- Đảm bảo đã cài gói OpenAI: `pip install openai`
- Kiểm tra biến môi trường GITHUB_TOKEN đã đặt chưa
- Kiểm tra quyền truy cập GitHub Models
**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 docsify-cli toàn cục: `npm install -g docsify-cli`
- Chạy từ thư mục gốc của kho lưu trữ
- Kiểm tra file `docs/_sidebar.md` có tồn tại không
### 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 tiện ích mở rộng Live Server cho các dự án HTML
- Cài ESLint và Prettier để định dạng nhất quán
- Dùng DevTools trình duyệt để gỡ lỗi JavaScript
- Dự án Vue cài thêm tiện ích Vue DevTools trên trình duyệt
### Cân nhắc hiệu suất
### Cân nhắc 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ố lượng file dịch lớn (50+ ngôn ngữ) làm cho việc clone toàn bộ rất nặng
- Sử dụng clone nông nếu chỉ làm việc với nội dung: `git clone --depth 1`
- Loại trừ 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)
- Loại trừ phần dịch khỏi tìm kiếm khi làm việc với nội dung tiếng Anh
- Quy trình build lần đầu có thể chậm (npm install, build Vite)
## Cân nhắc bảo mật
### 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 lưu trữ
- Dùng file `.env` (đã được đưa vào`.gitignore`)
- Document các biến môi trường bắt buộc trong README dự án
### 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
- Cập nhật phụ thuộc thường xuyên
- Token GitHub nên có quyền tối thiểu cần thiết
### Truy cập GitHub Models
- 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
- Cần Token Truy cập Cá nhân (PAT) cho GitHub Models
- Token nên lưu dưới biến môi trường
- Không bao giờ commit token hoặc thông tin đăng nhập
## Ghi chú bổ sung
### Đối tượng mục tiêu
### Đối tượng hướng tới
- 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ảng viên sử dụng chương trình trong lớp học
- Nội dung thiết kế cho dễ truy cập và phát triển kỹ năng từng bước
### 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 đố)
- Phương pháp học dựa trên dự án
- Kiểm tra kiến thức thường xuyên (trắc nghiệm)
- Bài tập mã hóa thực hành
- 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 các framework
### Bảo trì kho tài liệu
### Bảo trì kho lưu trữ
- Cộng đồng người học và người đóng góp tích cực
- Cộng đồng người học và đóng góp viên năng động
- Cập nhật thường xuyên các phụ thuộc và nội dung
- 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
- Giám sát issue và thảo luận bởi người duy trì
- Tự động cập nhật bản dịch qua GitHub Actions
### 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
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) được khuyên dùng cho người học
- Các khóa học bổ sung: AI sinh tạo, Khoa học dữ liệu, ML, IoT có sẵn
### Làm việc với các dự án cụ thể
### Làm việc với 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 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 trên 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
Mặc dù không phải monorepo truyền thống, kho này chứa nhiều dự án độc lập:
- Mỗi bài học là một đơn vị riêng biệt
- Các dự án không chia sẻ phụ thuộc
- Làm việc trên 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 đủ
- Làm việc trên từng dự án riêng biệt mà không ảnh hưởng đến các dự án khác
- Clone toàn bộ kho để trải nghiệm toàn bộ chương trình học
---
**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.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Tuyên bố từ chối trách nhiệm**:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ gốc của nó nên được coi là nguồn chính xác và đáng tin cậy. Đối với các thông tin quan trọng, nên sử dụng bản dịch do con người chuyên nghiệp thực hiện. Chúng tôi không chịu trách nhiệm về bất kỳ sự hiểu lầm hoặc giải thích sai nào phát sinh từ việc sử dụng bản dịch này.
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
# 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 Đào Tạo
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 kéo dài 12 tuần của Microsoft Cloud Advocates. Mỗi trong số 24 bài học sẽ đi sâu vào JavaScript, CSS và HTML 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 tiễn. Nâng cao kỹ năng và tối ưu việc ghi nhớ kiến thức với phương pháp 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!
> 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. Để sao chép mà không có bản dịch, sử dụng sparse checkout:
@ -41,84 +41,80 @@ Thực hiện các bước sau để bắt đầu sử dụng các tài nguyên
> Đ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.
<!-- 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 hỗ trợ cho các ngôn ngữ dịch khác, những ngôn ngữ được hỗ trợ được liệt kê [tại đây](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Bạn là học sinh sinh viên?_
#### 🧑🎓 _Bạn là học sinh/ 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, gói dành cho sinh viên và thậm chí cả cách để có được phiếu chứng chỉ 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.
### 📣 Thông báo - Thử thách Chế độ Tác nhân GitHub Copilot mới để hoàn thành!
### 📣 Thông báo - Các 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, hãy tìm "GitHub Copilot Agent Challenge 🚀" trong hầu hết các chương. Đây là một thử thách mới để bạn hoàn thành bằng cách sử dụng GitHub Copilot và chế độ Agent. Nếu bạn chưa sử dụng chế độ Agent 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 file, 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 tạo bằ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, hãy kiểm tra [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 Đào Tạo 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 đào tạo 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!
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
Mỗi bài học bao gồm một bài tập để hoàn thành, một bài kiểm tra kiến thức và một thử thách để hướng dẫn bạn học các chủ đề như:
- Việc tạo prompt và kỹ thuật prompt engineering
- 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!
## 🌱 Bắt Đầu
> **Các 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 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)!
## 🌱 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)!
**[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)**, cho 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 đọc tài liệu bài giảng, hoàn thành các hoạt động đa dạng 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.
Để nâng cao trải nghiệm học tập, hãy kết nối với các bạn cùng học để làm dự án cùng nhau! Khuyến khích thảo luận trong [diễn đàn thảo luận của chúng tôi](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) nơi nhóm điều phối viên của chúng tôi sẽ sẵn sàng trả lời các 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.
Để thúc đẩy việc học tập của bạn, chúng tôi rất khuyến khích bạn khám phá [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) để tìm tài liệu học thêm.
### 📋 Cài đặt môi trường của bạn
### 📋 Cài đặt môi trường
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 này đã chuẩn bị sẵn môi trường phát triển! Khi bắt đầu bạn có thể chọn chạy chương trình trong [Codespace](https://github.com/features/codespaces/) (_một 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 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, nê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 **Use this template** ở trên đầ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 đào tạo.
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.
Để 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 này trên máy tính, 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ụ Làm Việc](../../1-getting-started-lessons/1-intro-to-programming-languages), sẽ hướng dẫn bạn qua các lựa chọn cho từng công cụ để bạn chọn cái 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).
Chúng tôi đề xuất sử dụng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) làm trình soạn thảo, nó cũng có [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).
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. 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ấn 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) 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:
```bash
git clone <your-repository-url>
@ -126,93 +122,92 @@ Sau đó, mở [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT
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.
> Các tiện ích mở rộng được đề xuất cho Visual Studio Code:
> Các tiện ích mở rộng Visual Studio Code được đề xuất:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - để xem trước các trang HTML trong Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - giúp bạn viết mã nhanh hơn
## 📂 Mỗi bài học bao gồm:
- sketchnote tùy chọn
- ghi chú minh hoạ 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
- đố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
- bài học viết
- đối với các bài học 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
- thử thách
- bài đọ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`.
> **Lưu ý về các bài kiểm tra:** Tất cả các bài kiểm tra được chứa trong thư mục Quiz-app, tổng cộng 48 bài kiểm tra với ba câu hỏi mỗi bài. Chúng có sẵn [ở đây](https://ff-quizzes.netlify.app/web/) và ứng dụng 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`.
## 🗃️ 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 dụng | Tìm hiểu nền tảng cơ bản của hầu hết các ngôn ngữ lập trình và phần mềm hỗ trợ các nhà phát triển chuyên nghiệp làm việc | [Giới thiệu về ngôn ngữ lập trình và công cụ chuyên dụng](./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ách cộng tác với người khác trên mã nguồn | [Giới thiệu về GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Bắt đầu | Khả năng truy cập | Tìm hiểu các kiến thức cơ bản về truy cập web | [Kiến thức cơ bản về khả năng truy cập](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Cơ bản | Kiểu dữ liệu JavaScript | Kiến thức cơ bản về các kiểu dữ liệu trong JavaScript | [Kiểu dữ liệu](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Cơ bản | Hàm và phương thức | Tìm hiểu về hàm và phương thức để quản lý luồng logic của ứng dụng | [Hàm và phương thức](./2-js-basics/2-functions-methods/README.md) | Jasmine và Christopher |
| 06 | JS Cơ bản | Quyết định với JS | Học cách tạo điều kiện trong mã bằng các phương pháp ra quyết định | [Ra quyết định](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | 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 | [Mảng và Vòng lặp](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML trong thực hành | 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 | [Giới thiệu về HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS trong thực hành | 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 cho trang đáp ứng | [Giới thiệu về CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Đóng gói JavaScript, thao tác DOM | Xây dựng JavaScript để làm cho terrarium hoạt động như giao diện kéo/thả, tập trung vào đóng gói và thao tác DOM | [Đóng gói JavaScript, thao tác DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Xây dựng trò chơi gõ phím | Tìm hiểu cách sử dụng sự kiện bàn phím để điều khiển logic ứng dụng JavaScript | [Lập trình theo sự kiện](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Làm việc với trình duyệt | Tìm hiểu cách các trình duyệt hoạt động, lịch sử của chúng, và cách dựng sườn các thành phần đầu tiên của tiện ích mở rộng trình duyệt | [Về trình duyệt](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Xây dựng biểu mẫu, gọi API và lưu biến vào bộ nhớ cục bộ | Xây dựng các thành phần JavaScript của tiện ích trình duyệt để gọi API sử dụng biến được lưu trong bộ nhớ cục bộ | [API, Biểu mẫu và Bộ nhớ cục bộ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Quá trình nền trong trình duyệt, hiệu suất web | Sử dụng các 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 để cải thiện hiệu suất | [Các tác vụ nền và hiệu suất](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Phát triển trò chơi nâng cao với JavaScript | Tìm hiểu về Kế thừa sử dụng cả Lớp và Cấu trúc, cũng như mô hình Pub/Sub, chuẩn bị cho việc xây dựng trò chơi | [Giới thiệu phát triển trò chơi nâng cao](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Vẽ lên canvas | Tìm hiểu về API Canvas, dùng để vẽ các thành phần lên màn hình | [Vẽ lên Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Di chuyển các thành phần xung quanh màn hình | Khám phá cách các thành phần có thể chuyển động sử dụng tọa độ Cartesian và API Canvas | [Di chuyển các thành phần](./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 thành phần va chạm và phản ứng với nhau sử dụng phím bấm và cung cấp một hàm cooldown để đảm bảo hiệu suất cho trò chơi | [Phát hiện va chạm](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | 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 | [Tính điểm](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kết thúc và khởi động lại trò chơi | Tìm hiểu về kết thúc và khởi động lại trò chơi, bao gồm dọn dẹp tài nguyên và đặt lại giá trị biến | [Điều kiện kết thúc](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Mẫu HTML và Định tuyến trong ứng dụng web | Tìm hiểu cách tạo khung kiến trúc cho một trang web đa trang sử dụng định tuyến và mẫu HTML | [Mẫu HTML và Định tuyến](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Xây dựng Biểu mẫu Đăng nhập và Đăng ký | Tìm hiểu về xây dựng biểu mẫu và xử lý các quy trình kiểm tra hợp lệ | [Biểu mẫu](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Phương thức lấy và sử dụng dữ liệu | Cách dữ liệu luân chuyển vào và ra khỏi ứng dụng của bạn, cách lấy, lưu trữ và loại bỏ nó | [Dữ liệu](./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 | [Quản lý trạng thái](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Làm việc với VScode | Học cách sử dụng trình soạn thảo mã | [Sử dụng trình soạn thảo mã VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Làm việc với AI | Tìm hiểu cách xây dựng trợ lý AI của riêng bạn | [Dự án trợ lý AI](./9-chat-project/README.md) | Chris |
## 🏫 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 giảng dạy của chúng tôi được thiết kế với hai nguyên tắc giảng dạy chính:
* học dựa trên dự án
* các bài kiểm tra thường xuyên
* bài kiểm tra thường xuyên
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 những 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 sử dụng bởi các nhà phát triển web ngày nay. 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 môi trường, trò chơi phong cách space-invader 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ó 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ể học vài bài đầu 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 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ớ các khái niệm được tăng cường. Chúng tôi cũng đã xây dựng 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 video "[Seri dành cho người mới bắt đầu về: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", một số tác giả đã đóng góp 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 khi lớp học bắt đầu đặt mục tiêu học của học viên cho chủ đề, trong khi một bài kiểm tra thứ hai sau lớp giúp đảm bảo ghi nhớ kiến thức lâu hơn. 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à trở nên phức tạp hơn theo 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ố ý 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 sau khi hoàn thành chương trình có thể là học về Node.js qua bộ sưu tập video khác: "[Seri dành cho người mới bắt đầu về: 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 [Đóng góp](CONTRIBUTING.md) của chúng tôi. Chúng tôi rất 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/#/). Fork 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ẽ được phục vụ 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).
Bạn có thể tìm thấy file PDF của tất cả các bài học [ở đâ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
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -223,7 +218,7 @@ Nhóm của chúng tôi sản xuất các khóa học khác! Hãy xem:
---
### Chuỗi AI Tạo Sinh
### Series AI Tạo sinh
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -231,7 +226,7 @@ Nhóm của chúng tôi sản xuất các khóa học khác! Hãy xem:
---
### Học Tập Cốt Lõi
### Học cốt lõi
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -242,29 +237,29 @@ Nhóm của chúng tôi sản xuất các khóa học khác! Hãy xem:
---
### Chuỗi Copilot
### Series Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Nếu bạn gặp khó khăn hoặc có 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. Hãy tham gia cùng những người học 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 hoan nghênh và kiến thức được chia sẻ thoải mái.
Kho lưu trữ này được cấp phép theo giấy phép MIT. Xem tệp [LICENSE](../../LICENSE) để biết thêm thông tin.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Tuyên bố miễn trừ trách nhiệm**:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi 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.
**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 nỗ lực đả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 sai sót. 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. Đối với những thông tin quan trọng, khuyến khích sử dụng dịch vụ dịch thuật chuyên nghiệp do con người thực hiện. Chúng tôi không chịu trách nhiệm về bất kỳ sự hiểu lầm hoặc giải thích sai nào phát sinh từ việc sử dụng bản dịch này.
localizeflow[bot]
3 weeks ago