זהו מאגר תוכן חינוכי ללימוד יסודות פיתוח ווב למתחילים. התוכנית היא קורס מקיף בן 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
- `5-browser-extension/README.md` - פיתוח הרחבת דפדפן
- `6-space-game/README.md` - פיתוח משחק מבוסס canvas
- `9-chat-project/README.md` - פרויקט עוזר שיחה מבוסס AI
### מבנה מונורפו (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. כל אחד מ-24 השיעורים מתעמק ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרריום, תוספי דפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ופעילויות מעשיות. שפרו את היכולות שלכם ואופטמו את חווית הלמידה עם שיטת הלימוד המבוססת פרויקטים שלנו. התחילו את מסע התכנות שלכם היום!
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> זה נותן לכם את כל מה שצריך בכדי להשלים את הקורס במהירות הורדה גבוהה יותר.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**אם ברצונכם שיתווספו שפות תרגום נוספות, הן מפורטות [כאן](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**אם תרצו לתמוך בשפות תרגום נוספות, הן רשומות [כאן](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](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 Agent להשלמה!
### 📣 הכרזה - אתגרי מצב סוכן חדש ל-GitHub Copilot להשלים!
התווסף אתגר חדש, חפשו "GitHub Copilot Agent Challenge 🚀" ברוב הפרקים. זה אתגר חדש שתוכלו להשלים באמצעות GitHub Copilot ומצב סוכן. אם לא השתמשתם במצב סוכן קודם, הוא לא רק מייצר טקסט, אלא גם מסוגל ליצור ולערוך קבצים, להריץ פקודות ועוד.
אתגר חדש נוסף, חפשו "GitHub Copilot Agent Challenge 🚀" ברוב הפרקים. זהו אתגר חדש עבורכם להשלים בעזרת GitHub Copilot ומצב סוכן. אם לא השתמשתם במצב סוכן קודם, הוא מסוגל לא רק ליצור טקסט אלא גם ליצור ולערוך קבצים, להפעיל פקודות ועוד.
### 📣 הכרזה - _פרויקט חדש לבנייה עם AI גנרטיבי_
### 📣 הכרזה - _פרויקט חדש לבנייה באמצעות AI גנרטיבי_
פרויקט עוזר AI חדש נוסף, בדקו [את הפרויקט](./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) כדי להתחיל!
כל שיעור כולל משימה להשלמה, בדיקת ידע ואתגר שידריכו אתכם בנושא כמו:
- הפעלה והנדסת פקודות Prompting
כל שיעור כולל מטלה להשלים, בדיקת ידע ואתגר שינחו אתכם בלימוד נושאים כגון:
- הנעת פקודות והנדסת פרומפטים
- יצירת אפליקציות טקסט ותמונה
- אפליקציות חיפוש
@ -81,190 +91,189 @@
## 🌱 התחלה
## 🌱 התחלת העבודה
> **מדריכים**, כללנו [הצעות](for-teachers.md) לאופן השימוש בתוכנית זו. נשמח למשובכם [בפורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **מורים**, כללנו [כמה הצעות](for-teachers.md) לשימוש בתוכנית לימודים זו. נשמח למשוב שלכם [בפורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, לכל שיעור, התחילו בחידון טרם ההרצאה ועברו על חומר ההרצאה, השלימו פעילויות שונות ובדקו את הבנתכם בחידון לאחר ההרצאה.
**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, עבור כל שיעור, התחילו בחידון מקדים ועברו על חומר ההרצאה, השלימו פעילויות שונות ובדקו את ההבנה שלכם עם החידון לאחר ההרצאה.
כדי לשפר את חוויית הלמידה, התחברו עם חבריכם לעבודה משותפת על הפרויקטים! דיונים מעודדים בפורום הדיונים שלנו בכתובת [https://github.com/microsoft/Web-Dev-For-Beginners/discussions](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) שם צוות המודרטורים שלנו זמין לענות על שאלותיכם.
כדי לשפר את חוויית הלמידה שלכם, התחברו לחברים לקבוצות עבודה על הפרויקטים יחד! עידוד דיונים בפורום הדיונים שלנו [בפורום הדיונים](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) בו צוות המנהלים שלנו יהיה זמין למענה על שאלותכם.
להרחבת ההשכלה שלכם, אנו ממליצים בחום לבדוק את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) לחומרים נוספים ללימוד.
לקידום הלימודים, אנו ממליצים בחום לבדוק את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) למשאבי לימוד נוספים.
### 📋 הקמת סביבת הפיתוח שלכם
לתוכנית הלימודים הזו יש סביבת פיתוח מוכנה! כשמתחילים, תוכלו לבחור להריץ את התוכנית ב-[Codespace](https://github.com/features/codespaces/) (_סביבת דפדפן, ללא צורך בהתקנות_), או מקומית במחשב שלכם באמצעות עורך טקסט כמו [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
לתוכנית הלימודים הזו יש סביבת פיתוח מוכנה לשימוש! כאשר תתחילו, תוכלו לבחור להריץ את תוכנית הלימודים ב-[Codespace](https://github.com/features/codespaces/) (_סביבת דפדפן ללא צורך בהתקנות_), או מקומית במחשב שלכם באמצעות עורך טקסט כמו [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### צרו את המאגר שלכם
כדי שיהיה לכם קל לשמור את העבודה, מומלץ ליצור העתק משלכם של המאגר. תוכלו לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש הדף. זה ייצור מאגר חדש בחשבון GitHub שלכם עם העתק של תוכנית הלימודים.
כדי שתוכלו לשמור בקלות את העבודה שלכם, מומלץ ליצור עותק אישי של המאגר. ניתן לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש הדף. זה ייצור מאגר חדש בחשבון GitHub שלכם עם עותק של תוכנית הלימודים.
עקבו אחר השלבים הבאים:
1. **שכפלו את המאגר**: לחצו על כפתור "Fork" בפינה הימנית-עליונה של הדף.
2. **העתיקו את המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
עקבו אחרי השלבים הבאים:
1. **פיצול המאגר**: לחצו על כפתור "Fork" בפינה הימנית העליונה של הדף הזה.
כדי להריץ את תוכנית הלימודים במחשב שלכם, תזדקקו לעורך טקסט, דפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [מבוא לשפות תכנות וכלי עבודה](../../1-getting-started-lessons/1-intro-to-programming-languages), יסייע לכם לבחור מבין אפשרויות שונות לכל אחד מהכלים הללו.
#### הרצת תוכנית הלימודים מקומית במחשב שלכם
ההמלצה שלנו היא להשתמש ב-[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) כעורך, שיש לו גם [טרמינל](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) מובנה. ניתן להוריד את Visual Studio Code [פה](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
להריץ תוכנית לימודים זו במחשב שלכם, תזדקקו לעורך טקסט, לדפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [הקדמה לשפות תכנות וכלי עבודה](../../1-getting-started-lessons/1-intro-to-programming-languages), יכוון אתכם דרך אפשרויות שונות לכל אחד מהכלים הללו כדי שתוכלו לבחור את המתאים לכם ביותר.
1. העתיקו את המאגר שלכם למחשב. ניתן לעשות זאת על ידי לחיצה על כפתור **Code** והעתקת ה-URL:
ההמלצה שלנו היא להשתמש ב-[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) כעורך שלכם, שיש גם [טרמינל](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) מובנה. ניתן להוריד את Visual Studio Code [כאן](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
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>` בקישור שהעתקת כעת:
לאחר מכן, פתח את [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) בתוך [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) והרץ את הפקודה הבאה, כשהחלף את `<your-repository-url>` בכתובת ה-URL שהעתקת זה עתה:
```bash
git clone <your-repository-url>
```
2. פתח את התיקיה ב-Visual Studio Code. תוכל לעשות זאת על ידי לחיצה על **File** > **Open Folder** ובחירת התיקיה שהעתקת.
2. פתח את התיקייה ב-Visual Studio Code. ניתן לעשות זאת על ידי לחיצה על **File** > **Open Folder** ובחירת התיקייה ששכפלת זה עתה.
> הרחבות מומלצות ל-Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - לתצוגה מקדימה של דפי HTML בתוך Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - כדי לעזור לך לכתוב קוד מהר יותר
> * [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) - לעזור לך לכתוב קוד מהר יותר
## 📂 בכל שיעור כלולים:
## 📂 כל שיעור כולל:
- סקייטנוט אופציונלי
- וידאו משלים אופציונלי
- חידון חימום לפני השיעור
- הערת רישום אופציונלית
- וידאו תומך אופציונלי
- בחן חימום לפני השיעור
- שיעור כתוב
- לשיעורים מבוססי פרויקטים, מדריכים צעד-אחר-צעד כיצד לבנות את הפרויקט
- לשיעורים מבוססי פרויקט, מדריכים שלב אחרי שלב כיצד לבנות את הפרויקט
- בדיקות ידע
- אתגר
- קריאה משלימה
- קריאה תומכת
- מטלה
- [חידון לאחר השיעור](https://ff-quizzes.netlify.app/web/)
- [בחן לאחר השיעור](https://ff-quizzes.netlify.app/web/)
> **הערה לגבי חידונים**: כל החידונים נמצאים בתיקיית Quiz-app, סך הכול 48 חידונים עם שלוש שאלות כל אחד. הם זמינים [כאן](https://ff-quizzes.netlify.app/web/) אפליקציית החידונים יכולה לפעול מקומית או להיות מופעלת באז'ור; עקוב אחר ההוראות בתיקיית `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 |
| 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 | [טרריום](./3-terrarium/solution/README.md) | HTML בפועל | לבנות את ה-HTML ליצירת טרריום מקוון, התמקדות בבניית פריסת דף | [מבוא ל-HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [טרריום](./3-terrarium/solution/README.md) | CSS בפועל | לבנות את ה-CSS לעיצוב הטרריום המקוון, התמקדות ביסודות CSS כולל התאמת דף להגדרה רספונסיבית | [מבוא ל-CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [טרריום](./3-terrarium/solution/README.md) | סגירות JavaScript, מניפולציה של DOM | לבנות את הקוד ב-JavaScript להפעלת הטרריום כממשק גרירה ושחרור, עם דגש על סגירות ומניפולציה על ה-DOM | [סגירות JavaScript ומניפולציה על DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [משחק הקלדה](./4-typing-game/solution/README.md) | בניית משחק הקלדה | ללמוד איך להשתמש באירועי לוח מקשים כדי להניע את לוגיקת אפליקציית ה-JavaScript שלך | [תכנות מונחה אירועים](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | עבודה עם דפדפנים | ללמוד איך דפדפנים פועלים, ההיסטוריה שלהם וכיצד לבנות את האלמנטים הראשונים של תוסף דפדפן | [אודות דפדפנים](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | בניית טופס, קריאה ל-API ואחסון משתנים בזיכרון מקומי | לבנות את אלמנטי ה-JavaScript של תוסף הדפדפן שלך כדי לקרוא ל-API באמצעות משתנים המאוחסנים בזיכרון המקומי | [APIs, טפסים וזיכרון מקומי](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | תהליכים ברקע בדפדפן, ביצועי רשת | שימוש בתהליכים ברקע של הדפדפן כדי לנהל את הסמל של התוסף; ללמוד על ביצועי רשת וכמה אופטימיזציות לשיפור ביצועים | [משימות רקע וביצועים](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [משחק חלל](./6-space-game/solution/README.md) | פיתוח משחק מתקדם יותר עם JavaScript | ללמוד על ירושה באמצעות מחלקות וקומפוזיציה ודפוס הפרסום/הרשמה, כהכנה לבניית משחק | [מבוא לפיתוח משחק מתקדם](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [משחק חלל](./6-space-game/solution/README.md) | ציור על קנבס | ללמוד על Canvas API, המשמש לציור אלמנטים על המסך | [ציור על קנבס](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [משחק חלל](./6-space-game/solution/README.md) | הזזת אלמנטים על המסך | לגלות כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-Canvas API | [הזזת אלמנטים](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [משחק חלל](./6-space-game/solution/README.md) | איתור התנגשויות | לגרום לאלמנטים להתנגש ולהגיב זה לזה באמצעות לחיצות מקשים ולספק פונקציית קירור לוודא ביצועים טובים במשחק | [איתור התנגשויות](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [משחק חלל](./6-space-game/solution/README.md) | ניהול ניקוד | ביצוע חישובים מתמטיים בהתאם למצב ולביצועי המשחק | [ניהול ניקוד](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [משחק חלל](./6-space-game/solution/README.md) | סיום והתחלה מחדש של המשחק | ללמוד על סיום והתחלה מחדש של המשחק, כולל ניקוי משאבים ואתחול ערכי משתנים | [תנאי סיום](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | תבניות HTML ונתיבים באפליקציית רשת | ללמוד איך ליצור את השלד של אתר רב-דפי באמצעות ניתוב ותבניות HTML | [תבניות HTML ונתיבים](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | בניית טופס התחברות והרשמה | ללמוד על בניית טפסים וטיפול בוולידציה | [טפסים](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | דרכי שליפה ושימוש בנתונים | כיצד זורמים הנתונים אל תוך האפליקציה וממנה, כיצד לשלוף, לאחסן ולהיפטר מהם | [נתונים](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | מושגי ניהול מצב | ללמוד כיצד האפליקציה שומרת ומנהלת מצב תכנית | [ניהול מצב](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [קוד דפדפן / VScode](../../8-code-editor) | עבודה עם VScode | ללמוד כיצד להשתמש בעורך קוד| [שימוש בעורך קוד VScode](./8-code-editor/1-using-a-code-editor/README.md) | כריס |
| 26 | [עוזרי AI](./9-chat-project/README.md) | עבודה עם AI | ללמוד איך לבנות עוזר AI משלך | [פרויקט עוזר AI](./9-chat-project/README.md) | כריס |
| | שם הפרויקט | המושגים הנלמדים | יעדי הלמידה | השיעור המקושר | מחבר |
| 01 | התחלה מהירה | מבוא לתכנות וכלי המקצוע | למד את היסודות של רוב שפות התכנות ועל תוכנות המסייעות למפתחים מקצועיים לבצע את עבודתם | [Introduction to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | התחלה מהירה | יסודות GitHub, כולל עבודה עם צוות | כיצד להשתמש ב-GitHub בפרויקט שלך, כיצד לשתף פעולה עם אחרים בקוד | [Introduction to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | התחלה מהירה | נגישות | למד את היסודות של נגישות באינטרנט | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | יסודות JS | טיפוסי נתונים ב-JavaScript | היסודות של טיפוסי הנתונים ב-JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | יסודות JS | פונקציות ושיטות | למד על פונקציות ושיטות לניהול זרימת הלוגיקה של האפליקציה | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | יסודות JS | קבלת החלטות עם JS | למד כיצד ליצור תנאים בקוד שלך באמצעות שיטות קבלת החלטות | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | יסודות JS | מערכים ולולאות | עבודה עם נתונים באמצעות מערכים ולולאות ב-JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML בתרגול | בניית HTML ליצירת טרריום מקוון, תוך דגש על בניית פריסת עמוד | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS בתרגול | בניית CSS לעיצוב הטרריום המקוון, התמקדות ביסודות ה-CSS כולל עיצוב תגובתי של העמוד | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | סגירות JavaScript, מניפולציה של DOM | בניית JavaScript להפעלת הטרריום כממשק גרירה וגרירה, התמקדות בסגירות ומניפולציה של 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) | בניית משחק הקלדה | למד כיצד להשתמש באירועי מקלדת כדי להניע את הלוגיקה של אפליקציית ה-JavaScript שלך | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | עבודה עם דפדפנים | למד כיצד דפדפנים פועלים, ההיסטוריה שלהם, וכיצד לבנות את האלמנטים הראשונים של תוסף דפדפן | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | בניית טופס, קריאה ל-API ואחסון משתנים באחסון מקומי | בניית אלמנטים של JavaScript בתוסף הדפדפן שלך לקריאה ל-API תוך שימוש במשתנים המאוחסנים באחסון מקומי | [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) | תהליכים ברקע בדפדפן, ביצועי רשת | שימוש בתהליכים ברקע של הדפדפן כדי לנהל את האייקון של התוסף; לימוד על ביצועים ואופטימיזציות באינטרנט | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | פיתוח משחק מתקדם יותר ב-JavaScript | למד על ירושה באמצעות מחלקות והרכבה ודפוס Pub/Sub, כהכנה לבניית משחק | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | ציור ב-canvas | למד על ה-Canvas API, המשמש לציור אלמנטים על המסך | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | הזזת אלמנטים על המסך | גלה כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | זיהוי התנגשויות | לגרום לאלמנטים להתנגש ולתגובה זה לזה באמצעות לחיצות מקשים ולספק פונקציית קירור להבטחת ביצועי המשחק | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | שמירת ניקוד | בצע חישובים מתמטיים על בסיס מצב וביצועי המשחק | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | סיום והפעלה מחדש של המשחק | למד על סיום והפעלה מחדש של המשחק, כולל ניקוי משאבים ואיפוס ערכי משתנים | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | תבניות HTML ונתיבים באפליקציית רשת | למד כיצד ליצור את השלד של ארכיטקטורת אתר אינטרנט מרובה דפים באמצעות נתיבים ותבניות HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | בניית טופס כניסה והרשמה | למד על בניית טפסים וטיפול בשגרות אימות | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | שיטות של שליפה ושימוש בנתונים | כיצד נתונים זורמים לתוך ומחוץ לאפליקציה שלך, כיצד לשלוף אותם, לאחסן ולפנות אליהם | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | מושגי ניהול מדינה | למד כיצד האפליקציה שלך שומרת מדינה וכיצד לנהל אותה תוכניתית | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | עבודה עם VScode | למד להשתמש בעורך קוד | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | עבודה עם AI | למד לבנות עוזר AI משלך | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 פדגוגיה
תכנית הלימודים שלנו מעוצבת עם שני עקרונות פדגוגיים מרכזיים:
* למידה מבוססת פרויקטים
* חידונים תכופים
* חנים תכופים
הبرنامج מלמד את יסודות ה-JavaScript, HTML ו-CSS, וכן את הכלים והטכניקות העדכניות ביותר שמשתמשים בהם מפתחי אתרים כיום. לתלמידים תהיה הזדמנות לפתח ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון חלל-פולשנים, ואפליקציית בנקאות לעסקים. עם סיום הסדרה, התלמידים ירכשו הבנה מעמיקה של פיתוח אינטרנט.
הקורס מלמד את היסודות של JavaScript, HTML ו-CSS, וכן את הכלים והטכניקות העדכניים ביותר בהם משתמשים מפתחי האינטרנט של היום. לסטודנטים תהיה הזדמנות לפתח ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון פלישת החלל ואפליקציית בנקאות לעסקים. בסיום הסדרה הסטודנטים ירכשו הבנה איתנה של פיתוח ווב.
> 🎓 תוכל לקחת את השיעורים הראשונים בתכנית זו כ-[נתיב למידה](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) באתר Microsoft Learn!
> 🎓 ניתן לקחת את כמה השיעורים הראשונים בתכנית זו כ-[מרכז למידה](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ב-Microsoft Learn!
על ידי וידוא שהתוכן מתאים לפרויקטים, התהליך הופך למרתק יותר עבור התלמידים ושימור המושגים ישתפר. בנוסף, כתבנו כמה שיעורים התחלתיים ביסודות JavaScript כדי להציג מושגים, יחד עם וידאו מ"קולקציית הסדרה למתחילים ב-JavaScript" (קישור) וחלק מהמחברים בה גם תרמו לתכנית זו.
על ידי הבטחת התאמה של התכנים לפרויקטים, התהליך נעשה מעניין יותר עבור הסטודנטים והחזקת המושגים תוגבר. כמו כן, כתבנו כמה שיעורי פתיחה ביסודות 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 דרך קולקציית וידאו אחרת: "[סדרה למתחילים ל-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)".
תוכל להפעיל תיעוד זה במצב לא מקוון על ידי שימוש ב-[Docsify](https://docsify.js.org/#/). פצל את הריפו, [התקן את Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלך, ואז בתיקיית השורש של הריפו, הקלד `docsify serve`. האתר יופעל על פורט 3000 ב-localhost שלך: `localhost:3000`.
## 📘 PDF
ניתן למצוא PDF של כל השיעורים [כאן](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
ניתן להפעיל תיעוד זה במצב לא מקוון באמצעות [Docsify](https://docsify.js.org/#/). נסה לפצל מאגר זה, [התקן Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלך, ואז בתיקיית השורש של המאגר הקלד `docsify serve`. האתר יופעל בפורט 3000 על ה-localhost שלך: `localhost:3000`.
## 📘 קובץ PDF
ניתן למצוא קובץ PDF של כל השיעורים [כאן](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
[](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)
[](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)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### למידה בסיסית
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### סדרת קופילוט
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
אם אתה נתקל בקשיים או שיש לך שאלות בנוגע לבניית אפליקציות AI. הצטרף ללומדים ולעורכי תוכנה מנוסים בדיונים על MCP. זו קהילה תומכת שבה שאלות מתקבלות בשמחה והידע משותף בחופשיות.
אם אתה נתקע או יש לך שאלות לגבי בניית אפליקציות בינה מלאכותית. הצטרף ללומדים אחרים ומפתחים מנוסים בדיונים על MCP. זוהי קהילה תומכת שבה שאלות מתקבלות בברכה והידע משותף בחופשיות.
מאגר זה מורשה תחת רישיון MIT. ראה את הקובץ [LICENSE](../../LICENSE) לפרטים נוספים.
מאגר זה מורשה תחת רישיון MIT. ראה את קובץ [LICENSE](../../LICENSE) למידע נוסף.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**כתב ויתור:**
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון כי תרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית יהווה את המקור הרשמי והמחייב. למידע קריטי מומלץ להשתמש בתרגום מקצועי על ידי מתרגם אנושי. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעים משימוש בתרגום זה.
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון כי תרגומים אוטומטיים עלולים להכיל טעויות או ליקויים. יש להתייחס למסמך המקורי בשפתו המקורית כמקור סמכותי. למידע קריטי מומלץ לפנות לתרגום מקצועי על ידי אדם. איננו אחראים לכל אי הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.
Dit is een educatieve curriculumrepository voor het onderwijzen van webontwikkeling aan beginners. Het curriculum is een uitgebreide cursus van 12 weken ontwikkeld door Microsoft Cloud Advocates, met 24 hands-on lessen over JavaScript, CSS en HTML.
Dit is een educatieve curriculumrepository voor het onderwijzen van basisprincipes van webontwikkeling aan beginners. Het curriculum is een uitgebreide cursus van 12 weken ontwikkeld door Microsoft Cloud Advocates, met 24 praktische lessen die JavaScript, CSS en HTML behandelen.
### Belangrijkste Onderdelen
### Belangrijke Componenten
- **Educatieve inhoud**: 24 gestructureerde lessen georganiseerd in projectgebaseerde modules
- **Praktische projecten**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor en AI Chat Assistant
- `6-space-game/README.md` - Canvas-gebaseerde game ontwikkeling
- `9-chat-project/README.md` - AI chatassistent project
- `9-chat-project/README.md` - AI chatassistent project
### Monorepo Structuur
Hoewel dit geen traditionele monorepo is, bevat deze repository meerdere onafhankelijke projecten:
- Elke les is op zichzelf staand
- Elke les staat op zichzelf
- Projecten delen geen dependencies
- Werk aan individuele projecten zonder anderen te beïnvloeden
- Clone de hele repo voor de volledige curriculumervaring
- Werk aan afzonderlijke projecten zonder impact op anderen
- Clone de gehele repo voor de volledige curriculumervaring
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel wij streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal wordt beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, verzoeken wij u er rekening mee te houden dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal dient als de gezaghebbende bron te worden beschouwd. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Leer de basisprincipes van webontwikkeling met onze 12 weken durende uitgebreide cursus door Microsoft Cloud Advocates. Elke van de 24 lessen duikt in JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtespellen. Doe mee met quizzen, discussies en praktische opdrachten. Versterk je vaardigheden en optimaliseer je kennisretentie met onze effectieve projectgerichte didactiek. Begin vandaag nog met coderen!
Leer de basisprincipes van webontwikkeling met onze 12-weken durende uitgebreide cursus van Microsoft Cloud Advocates. Elk van de 24 lessen verdiept zich in JavaScript, CSS en HTML via hands-on projecten zoals terrariums, browserextensies en ruimtegames. Doe mee met quizzen, discussies en praktische opdrachten. Verbeter je vaardigheden en optimaliseer je kennisretentie met onze effectieve projectgebaseerde didactiek. Begin vandaag nog met coderen!
Word lid van de Azure AI Foundry Discord Community
Volg deze stappen om aan de slag te gaan met deze resources:
1. **Fork de Repository**: Klik op [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en medeontwikkelaars**](https://discord.com/invite/ByRwuEEgH4)
Volg deze stappen om aan de slag te gaan met deze bronnen:
1. **Fork de repository**: Klik op [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en mede-ontwikkelaars**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Meertalige Ondersteuning
#### Ondersteund via GitHub Action (Geautomatiseerd & Altijd Up-to-date)
#### Ondersteund via GitHub Actie (Geautomatiseerd & Altijd Actueel)
> Deze repository bevat meer dan 50 taalvertalingen, wat de downloadgrootte aanzienlijk vergroot. Om zonder vertalingen te clonen, gebruik dan sparse checkout:
>
> Deze repository bevat meer dan 50 taalvertalingen, wat de downloadgrootte aanzienlijk vergroot. Om zonder vertalingen te clonen, gebruik sparse checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Dit geeft je alles wat je nodig hebt om de cursus te voltooien met een veel snellere download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Als je wenst dat extra vertalingen ondersteund worden, zijn die hier te vinden [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Als je wilt dat er extra vertaaltalen worden ondersteund, zijn die te vinden [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Ben je een student?_
Bezoek de [**Student Hubpagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersbronnen, studentpakketten en zelfs manieren vindt om een gratis certificaatvoucher te bemachtigen. Dit is de pagina die je wilt bookmarken en af en toe bezoeken, aangezien we maandelijks content wisselen.
Bezoek de [**Student Hub-pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersmateriaal, studentenpakketten en zelfs manieren om een gratis certificaatvoucher te verkrijgen zult vinden. Dit is de pagina die je wilt bookmarken en van tijd tot tijd bekijken omdat we maandelijks de inhoud wisselen.
### 📣 Aankondiging - Nieuwe GitHub Copilot Agent-modus uitdagingen om te voltooien!
### 📣 Aankondiging - Nieuwe GitHub Copilot Agentmodus uitdagingen om te voltooien!
Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dit is een nieuwe uitdaging om te voltooien met behulp van GitHub Copilot en Agent-modus. Als je Agent-modus nog niet hebt gebruikt: het kan niet alleen tekst genereren, maar ook bestanden creëren en bewerken, opdrachten uitvoeren en meer.
Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dit is een nieuwe uitdaging voor jou om te voltooien met behulp van GitHub Copilot en Agent modus. Als je Agent modus nog niet hebt gebruikt, kan deze niet alleen tekst genereren, maar ook bestanden maken en bewerken, commando's uitvoeren en meer.
### 📣 Aankondiging - _Nieuw Project te bouwen met Generatieve AI_
### 📣 Aankondiging - _Nieuw project om te bouwen met Generatieve AI_
Nieuw AI-assistentproject toegevoegd, bekijk het [project](./9-chat-project/README.md)
Nieuw AI-assistentproject zojuist toegevoegd, bekijk het [project](./9-chat-project/README.md)
### 📣 Aankondiging - _Nieuw Curriculum_ over Generatieve AI voor JavaScript is zojuist uitgebracht
### 📣 Aankondiging - _Nieuw curriculum_ over Generatieve AI voor JavaScript is zojuist uitgebracht
Mis ons nieuwe Generatieve AI-curriculum niet!
Mis ons nieuwe Generatieve AIcurriculum niet!
Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen!
Elke les omvat een opdracht om te voltooien, een kennischeck en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals:
- Prompting en promptengineering
- Tekst- en afbeeldingsapp-generatie
Elke les bevat een opdracht om te voltooien, een kenniscontrole en een uitdaging om je te begeleiden bij het leren over onderwerpen zoals:
- Prompting en prompt engineering
- Generatie van tekst- en afbeeldingsapps
- Zoekapps
Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen!
Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te starten!
@ -84,128 +95,128 @@ Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te be
> **Docenten**, we hebben [enkele suggesties opgenomen](for-teachers.md) over hoe je dit curriculum kunt gebruiken. We horen graag je feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, voor elke les begin je met een pre-lecture quiz en ga je door met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je je begrip met de post-lecture quiz.
**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, begin bij elke les met een pre-lecture quiz en volg deze op door het leesmateriaal van de les door te nemen, de verschillende activiteiten te voltooien en je begrip te controleren met de post-lecture quiz.
Om je leerervaring te verbeteren, verbind je met je medestudenten om samen aan de projecten te werken! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderator beschikbaar zal zijn om je vragen te beantwoorden.
Om je leerervaring te verbeteren, verbind je met je medeleerlingen om samen aan de projecten te werken! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderatoren beschikbaar is om je vragen te beantwoorden.
Om je educatie verder te bevorderen, raden we ten zeerste aan Microsoft Learn te verkennen voor aanvullende studiematerialen: [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon).
Om je opleiding verder te brengen, raden we sterk aan de [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) te verkennen voor aanvullende studiematerialen.
### 📋 Je omgeving instellen
Dit curriculum heeft een ontwikkelomgeving die klaar is om te gebruiken! Terwijl je begint, kun je ervoor kiezen de cursus uit te voeren in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde, geen installatie benodigde omgeving_), of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Dit curriculum heeft een ontwikkelomgeving die klaar is om te gebruiken! Als je begint, kun je ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browser gebaseerde omgeving zonder installatie nodig_), of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Maak je repository aan
Om je werk makkelijk op te slaan, is het aanbevolen een eigen kopie van deze repository te maken. Dit kan je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository aan in je GitHub-account met een kopie van het curriculum.
Om je werk gemakkelijk op te slaan, wordt aangeraden om je eigen kopie van deze repository te maken. Dit kun je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository in je GitHub-account met een kopie van het curriculum.
Volg deze stappen:
1. **Fork de Repository**: Klik op de "Fork"-knop rechtsboven op deze pagina.
1. **Fork de Repository**: Klik op de "Fork"knop rechtsboven op deze pagina.
2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### De cursus draaien in een Codespace
#### Het curriculum draaien in een Codespace
In je kopie van deze repository die je hebt aangemaakt, klik je de knop **Code** en selecteer je **Open with Codespaces**. Dit maakt een nieuwe Codespace aan waarin je kunt werken.
In je eigen kopie van deze repository die je hebt gemaakt, klik op de **Code** knop en selecteer **Open with Codespaces**. Dit maakt een nieuwe Codespace voor je aan om in te werken.
Om deze cursus lokaal op je computer te draaien, heb je een teksteditor, een browser en een opdrachtregeltool nodig. Onze eerste les, [Introductie tot programmeertalen en tools van het vak](../../1-getting-started-lessons/1-intro-to-programming-languages), zal je door verschillende opties voor elk van deze tools leiden zodat je kunt kiezen wat het beste bij jou past.
#### Het curriculum lokaal op je computer draaien
We raden aan om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als editor te gebruiken, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Om dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een command line tool nodig. Onze eerste les, [Introductie tot Programmeertalen en Gereedschappen van het Vak](../../1-getting-started-lessons/1-intro-to-programming-languages), zal je door verschillende opties voor elk van deze tools leiden zodat je kunt kiezen wat het beste voor jou werkt.
1. Clone je repository naar je computer. Dit kan door op de knop **Code** te klikken en de URL te kopiëren:
Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als editor te gebruiken, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) downloaden.
1. Clone je repository naar je computer. Dit kun je doen door op de **Code** knop te klikken en de URL te kopiëren:
[CodeSpace](./images/createcodespace.png)
Open dan [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij u `<your-repository-url>` vervangt door de URL die u zojuist hebt gekopieerd:
Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij je `<your-repository-url>` vervangt door de URL die je zojuist hebt gekopieerd:
```bash
git clone <your-repository-url>
```
2. Open de map in Visual Studio Code. Dit kan door te klikken op **File** > **Open Folder** en de map te selecteren die u zojuist hebt gekloond.
2. Open de map in Visual Studio Code. Dit doe je door te klikken op **File** > **Open Folder** en de map te selecteren die je zojuist hebt gekloond.
> Aanbevolen Visual Studio Code-extensies:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's te bekijken binnen Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - om u te helpen sneller code te schrijven
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's binnen Visual Studio Code te bekijken
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - om je te helpen sneller code te schrijven
## 📂 Elke les bevat:
- optionele sketchnote
- optionele aanvullende video
- warming-up quiz voor de les
- warming-up quiz vóór de les
- geschreven les
- voor projectgebaseerde lessen, stapsgewijze handleidingen over hoe het project te bouwen
- kennistests
- voor projectgerichte lessen, stapsgewijze handleidingen om het project te bouwen
- kenniscontroles
- een uitdaging
- aanvullende lectuur
- opdracht
- [quiz na de les](https://ff-quizzes.netlify.app/web/)
> **Een opmerking over quizzen**: Alle quizzen bevinden zich in de Quiz-app map, in totaal 48 quizzen van elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/); de quiz-app kan lokaal worden uitgevoerd of worden gedeployed naar Azure; volg de instructies in de `quiz-app` map.
> **Een opmerking over quizzen**: Alle quizzen bevinden zich in de Quiz-app map, in totaal 48 quizzen met elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/). De quiz-app kan lokaal worden uitgevoerd of naar Azure worden gedeployed; volg de instructies in de `quiz-app` map.
| 01 | Aan de slag | Introductie in programmeren en tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt | [Introductie in programmeertalen en tools van het vak](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aan de slag | Basiskennis van GitHub, inclusief samenwerken in een team | Hoe GitHub te gebruiken in jouw project, hoe samen te werken met anderen aan een codebase | [Introductie in GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Aan de slag | Toegankelijkheid | Leer de basis van webtoegankelijkheid | [Fundamentals Toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Grundlagen | JavaScript Datatypes | De basis van JavaScript datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Grundlagen | Functies en Methoden| Leer over functies en methoden om de logica van een applicatie te beheren | [Functies en Methodes](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher |
| 06 | JS Grundlagen | Beslissingen maken met JS| Leer hoe je voorwaarden maakt in je code met besluitvormingsmethoden | [Beslissingen maken](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grundlagen | Arrays en Lussen | Werk met data via arrays en lussen in JavaScript | [Arrays en lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML om een online terrarium te maken, met focus op het bouwen van een layout | [Introductie in HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium te stylen, met basiskennis van CSS, inclusief het responsief maken van de pagina | [Introductie in CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulatie | Bouw de JavaScript om het terrarium als een sleep-en-zet-interface te laten functioneren, met focus op closures en DOM-manipulatie | [JavaScript Closures, DOM-manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typwedstrijd](./4-typing-game/solution/README.md) | Bouw een Typwedstrijd | Leer hoe je toetsenbordgebeurtenissen gebruikt om de logica van je JavaScript-app aan te sturen | [Gebeurtenisgestuurd programmeren](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Werken met browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie bouwt | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Formulier bouwen, API aanroepen en variabelen opslaan in local storage | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in local storage | [APIs, formulieren en local storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en optimalisaties | [Achtergrondtaken en prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Ruimte Spel](./6-space-game/solution/README.md) | Geavanceerde spelontwikkeling met JavaScript | Leer over overerving met zowel klassen als compositie en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een spel | [Introductie in geavanceerde spelontwikkeling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Ruimte Spel](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Ruimte Spel](./6-space-game/solution/README.md) | Elementen rond het scherm bewegen | Ontdek hoe elementen beweging krijgen met behulp van kartesische coördinaten en de Canvas API | [Elementen bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Ruimte Spel](./6-space-game/solution/README.md) | Detectie van botsingen | Laat elementen botsen en op elkaar reageren via toetsaanslagen en zorg voor een cooldown-functie om prestaties te waarborgen | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Ruimte Spel](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Score bijhouden](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Ruimte Spel](./6-space-game/solution/README.md) | Het spel beëindigen en herstarten | Leer over het beëindigen en herstarten van het spel, inclusief opruimen van middelen en resetten van variabelen | [De eindvoorwaarde](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML-sjablonen en routes in een webapp | Leer hoe je de opbouw van een meerpaginawebsite architectuur maakt met routing en HTML-sjablonen | [HTML-sjablonen en routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankapp](./7-bank-project/solution/README.md) | Bouw een inlog- en registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankapp](./7-bank-project/solution/README.md) | Methoden voor ophalen en gebruiken van data | Hoe data in en uit je app stroomt, hoe je het ophaalt, opslaat en verwijdert | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankapp](./7-bank-project/solution/README.md) | Concepten van State Management | Leer hoe je app state behoudt en hoe je die programmatisch beheert | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Werken met VScode | Leer hoe je een code-editor gebruikt | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Werken met AI | Leer hoe je je eigen AI-assistent bouwt | [AI Assistant project](./9-chat-project/README.md) | Chris |
| 01 | Aan de slag | Introductie tot programmeren en tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt hun werk te doen | [Intro tot Programmeertalen en Tools van het Vak](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aan de slag | Basisprincipes van GitHub, inclusief samenwerken in een team | Hoe je GitHub gebruikt in je project, hoe je samenwerkt met anderen aan een codebase | [Intro tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Aan de slag | Toegankelijkheid | Leer de basis van webtoegankelijkheid | [Toegankelijkheidsfundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basisprincipes | JavaScript Datatypes | De basis van JavaScript-datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basisprincipes | Functies en Methoden | Leer over functies en methoden om de logica van een applicatie te beheren | [Functies en Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher |
| 06 | JS Basisprincipes | Beslissingen nemen met JS | Leer hoe je voorwaarden maakt in je code met behulp van besluitvormingsmethoden | [Beslissingen nemen](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basisprincipes | Arrays en Lussen | Werk met data met behulp van arrays en lussen in JavaScript | [Arrays en Lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML om een online terrarium te creëren, met focus op het maken van een lay-out | [Introductie tot HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium te stylen, met focus op de basis van CSS inclusief het responsief maken van de pagina | [Introductie tot CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulatie | Bouw de JavaScript om het terrarium te laten functioneren als drag/drop-interface, met focus op closures en DOM-manipulatie | [JavaScript Closures, DOM-manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typen Spel](./4-typing-game/solution/README.md) | Bouw een Typingspel | Leer hoe je toetsenbord-events gebruikt om de logica van je JavaScript-app aan te sturen | [Event-Driven Programmeren](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Groene Browser Extensie](./5-browser-extension/solution/README.md) | Werken met Browsers | Leer hoe browsers werken, hun geschiedenis en hoe je de eerste elementen van een browserextensie maakt | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Groene Browser Extensie](./5-browser-extension/solution/README.md) | Bouw een formulier, bellen van een API en opslaan van variabelen in lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen die in lokale opslag zijn opgeslagen | [APIs, Formulieren en Lokale Opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Groene Browser Extensie](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en optimalisaties | [Achtergrondtaken en Prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Ruimte Spel](./6-space-game/solution/README.md) | Geavanceerdere spelontwikkeling met JavaScript | Leer over overerving met behulp van klassen en compositie en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een spel | [Introductie tot Geavanceerde Spelontwikkeling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Ruimte Spel](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Ruimte Spel](./6-space-game/solution/README.md) | Elementen verplaatsen over het scherm | Ontdek hoe elementen beweging krijgen met behulp van cartesiaanse coördinaten en de Canvas API | [Elementen Verplaatsen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Ruimte Spel](./6-space-game/solution/README.md) | Botsingsdetectie | Laat elementen botsen en op elkaar reageren met toetsdrukken en voorzie in een afkoelfunctie om de prestaties van het spel te waarborgen | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Ruimte Spel](./6-space-game/solution/README.md) | Puntentelling | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Puntentelling](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Ruimte Spel](./6-space-game/solution/README.md) | Het spel beëindigen en opnieuw starten | Leer over het beëindigen en opnieuw starten van het spel, inclusief het opruimen van assets en het resetten van variabelen | [De Eindvoorwaarde](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankieren App](./7-bank-project/solution/README.md) | HTML Templates en Routes in een Web App | Leer hoe je de opbouw van een multi-page website maakt met routing en HTML-templates | [HTML Templates en Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankieren App](./7-bank-project/solution/README.md) | Bouw een Login- en Registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankieren App](./7-bank-project/solution/README.md) | Methoden om data op te halen en te gebruiken | Hoe data in en uit je app stroomt, hoe je het ophaalt, opslaat en opruimt | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankieren App](./7-bank-project/solution/README.md) | Concepten van State Management | Leer hoe je app status behoudt en hoe je dat programmeerbaar beheert | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Werken met VScode | Leer hoe je een code-editor gebruikt| [Gebruik VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistenten](./9-chat-project/README.md) | Werken met AI | Leer hoe je je eigen AI-assistent bouwt | [AI Assistent project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogiek
Onze lesmethode is ontworpen met twee belangrijke pedagogische principes in gedachten:
Onze curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten:
* projectgebaseerd leren
* frequente quizzen
Het programma onderwijst de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die tegenwoordig door webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door het bouwen van een typwedstrijd, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-stijl spel en een bankapp voor bedrijven. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgebouwd.
Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die tegenwoordig door webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door het bouwen van een typingspel, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-stijl spel en een bankapp voor bedrijven. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgedaan.
> 🎓 Je kunt de eerste paar lessen van deze cursus volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn!
> 🎓 Je kunt de eerste lessen van dit curriculum volgen als een [Leerroute](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn!
Doordat de inhoud aansluit bij projecten, wordt het proces voor studenten boeiender en wordt het onthouden van concepten vergroot. We hebben ook verschillende startlessen in JavaScript basics geschreven om de concepten te introduceren, gekoppeld aan een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan deze cursus.
Door te zorgen dat de inhoud aansluit bij projecten wordt het leerproces boeiender voor studenten en wordt het vasthouden van concepten vergroot. We schreven ook enkele starterlessen in JavaScript-basisprincipes om concepten te introduceren, gecombineerd met een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie van videotutorials, waarvan enkele auteurs aan dit curriculum hebben bijgedragen.
Daarnaast zet een quiz met weinig inzet voor een les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les zorgt voor verdere retentie. Deze cursus is ontworpen om flexibel en leuk te zijn en kan geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer aan het einde van de 12-weekse cyclus.
Daarnaast zet een quiz met lage druk vóór de les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les verdere retentie waarborgt. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer aan het einde van de 12-weekse cyclus.
Hoewel we er bewust voor hebben gekozen om geen JavaScript-frameworks te introduceren, om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat je een framework adopteert, zou een goede vervolgstap na deze cursus het leren van Node.js zijn via een andere collectie video’s: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Hoewel we bewust hebben vermeden om JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar vóór het adopteren van een framework, zou een goede volgende stap na het voltooien van dit curriculum het leren over Node.js zijn via een andere collectie video's: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We verwelkomen je constructieve feedback!
> Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We stellen je constructieve feedback op prijs!
## 🧭 Offline toegang
Je kunt deze documentatie offline gebruiken met [Docsify](https://docsify.js.org/#/). Fork deze repository, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de hoofdmap van deze repository `docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`.
Je kunt deze documentatie offline gebruiken door gebruik te maken van [Docsify](https://docsify.js.org/#/). Fork deze repo, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de root-map van deze repo `docsify serve`. De website zal worden geserveerd op poort 3000 op je localhost: `localhost:3000`.
## 📘 PDF
Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Een PDF van alle lessen is hier te vinden [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andere Cursussen
Ons team maakt ook andere cursussen! Bekijk:
Ons team produceert ook andere cursussen! Neem een kijkje bij:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -247,13 +258,13 @@ Ons team maakt ook andere cursussen! Bekijk:
Als je vastloopt of vragen hebt over het bouwen van AI-apps. Doe mee aan discussies met mede-leerlingen en ervaren ontwikkelaars over MCP. Het is een ondersteunende gemeenschap waar vragen welkom zijn en kennis vrij wordt gedeeld.
Als je vastloopt of vragen hebt over het bouwen van AI-apps, doe mee met andere leerlingen en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende gemeenschap waar vragen welkom zijn en kennis vrij wordt gedeeld.
@ -264,6 +275,6 @@ Deze repository is gelicentieerd onder de MIT-licentie. Zie het [LICENSE](../../
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel wij streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u er rekening mee te houden dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal dient als gezaghebbende bron te worden beschouwd. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Đây là kho giáotrình giáo dục để dạy các kiến thức cơ bản về phát triển web cho người mới bắt đầu. Giáo trình là một khóa học toàn diện 12 tuần do Microsoft Cloud Advocates phát triển, với 24 bài học thực hành về JavaScript, CSS và HTML.
Đây là khoá học giáo dục để dạy các kiến thức cơ bản về phát triển web cho người mới bắt đầu. Khung chương trình là một khoá 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.
### Các thành phần chính
- **Nội dung giáo dục**: 24 bài học có cấu trúc tổ chức thành các mô-đun dựa trên dự án
- **Dự án thực tế**: Terrarium, Trò chơi đánh máy, Tiện ích mở rộng trình duyệt, Trò chơi không gian, Ứng dụng ngân hàng, Trình chỉnh sửa mã, và Trợ lý chat AI
- **Nội dung giáo dục**: 24 bài học có cấu trúc được tổ chức thành các mô-đun dự án
- **Dự án thực tế**: Terrarium, Trò chơi đánh máy, Tiện ích mở rộng trình duyệt, Trò chơi vũ trụ, Ứng dụng Ngân hàng, Trình soạn thảo mã, và Trợ lý trò chuyện AI
- **Bài kiểm tra tương tác**: 48 bài kiểm tra với 3 câu hỏi mỗi bài (đánh giá trước/sau bài học)
- **Hỗ trợ đa ngôn ngữ**: Dịch tự động cho hơn 50 ngôn ngữ qua GitHub Actions
- **Hỗ trợ đa ngôn ngữ**: Dịch tự động hơn 50 ngôn ngữ thông qua GitHub Actions
- **Công nghệ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (cho các dự án AI)
### Kiến trúc
- Kho giáo dục với cấu trúc theo bài học
- Mỗi thư mục bài học chứa README, ví dụ mã, và giải pháp
- Dự án độc lập trong các thư mục riêng biệt (quiz-app, các dự án bài học khác nhau)
- Khoá học giáo dục với cấu trúc dựa trên bài học
- Mỗi thư mục bài học chứa README, ví dụ mã và giải pháp
- Các dự án độc lập trong các thư mục riêng biệt (quiz-app, các dự án bài học khác nhau)
- Hệ thống dịch sử dụng GitHub Actions (co-op-translator)
- Tài liệu được phục vụ qua Docsify và có sẵn dạng PDF
- Tài liệu được cung cấp qua Docsify và có sẵn dưới dạng PDF
## Lệnh thiết lập
## Lệnh cài đặt
Kho này chủ yếu dành cho việc tiêu thụ nội dung giáo dục. Để làm việc với các dự án cụ thể:
Kho chứa chủ yếu dành cho việc sử dụng nội dung giáo dục. Để làm việc với các dự án cụ thể:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) khuyến nghị cho người học
- Các khoá học bổ sung: AI sinh tạo, Khoa học dữ liệu, ML, IoT có sẵn
### Làm việc với các dự án cụ thể
Hướng dẫn chi tiết cho từng dự án có trong các file README:
Hướng dẫn chi tiết về từng dự án có trong 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 Canvas
- `9-chat-project/README.md` - Dự án trợ lý chat AI
- `5-browser-extension/README.md` - Phát triển tiện ích trình duyệt
- `6-space-game/README.md` - Phát triển trò chơi canvas
- `9-chat-project/README.md` - Dự án trợ lý trò chuyện AI
### Cấu trúc Monorepo
### Cấu trúc monorepo
Mặc dù không phải monorepo truyền thống, kho này chứa nhiều dự án độc lập:
- Mỗi bài học tự chứa
- Dự án không chia sẻ dependencies
- Làm việc trên từng dự án riêng mà không ảnh hưởng dự án khác
- Clone toàn bộ repo để trải nghiệm đầy đủ giáo trình
- Mỗi bài học là riêng biệt
- Các dự án không chia sẻ phụ thuộc
- Làm việc trên dự án cá nhân mà không ảnh hưởng đến dự án khác
- Clone toàn bộ kho để có trải nghiệm toàn diện của khung chương trình
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Tuyên bố miễn trừ trách nhiệm**:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ nguyên bản nên được coi là nguồn thông tin chính xác và có thẩm quyền. Đối với các thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp của con người. Chúng tôi không chịu trách nhiệm đối với bất kỳ sự hiểu lầm hoặc giải thích sai nào phát sinh từ việc sử dụng bản dịch này.
**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 nên được coi là nguồn tham khảo chính xác nhất. Đối với những thông tin quan trọng, chúng tôi khuyến nghị dịch bởi chuyên gia dịch thuật có kinh nghiệm. Chúng tôi không chịu trách nhiệm về 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.
[](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
Học những kiến thức cơ bản về phát triển web với khóa học toàn diện 12 tuần do các Chuyên Gia Microsoft Cloud biên soạn. Mỗi trong số 24 bài học đi sâu vào JavaScript, CSS và HTML thông qua các dự án thực hành như terrarium, tiện ích mở rộng trình duyệt và trò chơi không gian. Tham gia với các bài kiểm tra, thảo luận và bài tập thực tế. Nâng cao kỹ năng và tối ưu hóa việc ghi nhớ kiến thức với phương pháp giảng dạy dựa trên dự án hiệu quả của chúng tôi. Bắt đầu hành trình lập trình của bạn ngay hôm nay!
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 do Microsoft Cloud Advocates tổ chức. Mỗi trong số 24 bài học sẽ đào sâu vào JavaScript, CSS và HTML qua các dự án thực hành như terrariums, tiện ích trình duyệt và trò chơi không gian. Tham gia với các bài kiểm tra, thảo luận và bài tập thực tế. Nâng cao kỹ năng của bạn và tối ưu hóa việc tiếp thu kiến thức với phương pháp giảng dạy dựa trên dự án hiệu quả của chúng tôi. Bắt đầu hành trình lập trình của bạn ngay hôm nay!
Tham gia cộng đồng Azure AI Foundry trên Discord
Tham gia cộng đồng Azure AI Foundry Discord
[](https://discord.gg/nTYy5BXMWG)
> Kho lưu trữ này bao gồm hơn 50 bản dịch ngôn ngữ điều này làm tăng đáng kể kích thước tải xuống. Để clone mà không có bản dịch, hãy sử dụng sparse checkout:
> **Muốn Sao Chép Nội Bộ?**
>
> Kho lưu trữ này bao gồm hơn 50 bản dịch ngôn ngữ làm kích thước tải về tăng lên đáng kể. Để sao chép mà không có các bản dịch, hãy sử dụng sparse checkout:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Điều này cung cấp cho bạn mọi thứ bạn cần để hoàn thành khóa học với tốc độ tải xuống nhanh hơn nhiều.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Nếu bạn muốn có thêm các ngôn ngữ dịch được hỗ trợ được liệt kê [ở đây](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Nếu bạn muốn có thêm các ngôn ngữ dịch được hỗ trợ, danh sách có tại [đây](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Bạn là sinh viên?_
Truy cập trang [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) nơi bạn sẽ tìm thấy tài nguyên cho người mới bắt đầu, bộ dụng cụ dành cho sinh viên và thậm chí cách để nhận phiếu chứng nhận miễn phí. Đây là trang bạn nên đánh dấu và kiểm tra định kỳ vì chúng tôi thay đổi nội dung hàng tháng.
Tham khảo [**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 tài nguyên dành cho người mới bắt đầu, bộ công cụ Sinh viên và thậm chí là cách lấy phiếu chứng nhận miễn phí. Đây là trang bạn nên đánh dấu và kiểm tra định kỳ vì chúng tôi thay đổi nội dung hàng tháng.
### 📣 Thông báo - Thử thách Chế độ GitHub Copilot Agent mới để hoàn thành!
Thử thách mới đã được thêm vào, tìm thử thách "GitHub Copilot Agent Challenge 🚀" trong hầu hết các chương. Đó là thử thách mới dành cho bạn sử dụng GitHub Copilot và chế độ Agent để hoàn thành. Nếu bạn chưa từng dùng chế độ Agent trước đây, nó không chỉ tạo ra văn bản mà còn có thể tạo và chỉnh sửa tệp, chạy lệnh và nhiều hơn nữa.
Thêm Thử thách mới, tìm kiếm "Thử thách GitHub Copilot Agent 🚀" trong hầu hết các chương. Đây là thử thách mới dành cho bạn hoàn thành sử dụng GitHub Copilot và chế độ Agent. Nếu bạn chưa từng dùng chế độ Agent trước đây, nó có khả năng không chỉ tạo văn bản mà còn tạo và chỉnh sửa tập tin, 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 Generative AI_
### 📣 Thông báo - _Dự án Mới xây dựng sử dụng Generative AI_
Dự án trợ lý AI mới vừa được thêm, xem [dự án](./9-chat-project/README.md)
Dự án trợ lý AI mới vừa được thêm vào, xem tại [dự án](./9-chat-project/README.md)
### 📣 Thông báo - _Chương trình học Mới_ về Generative AI cho JavaScript vừa được phát hành
### 📣 Thông báo - _Chương Trình Mới_ về Generative AI cho JavaScript vừa được phát hành
Đừng bỏ lỡ chương trình học Generative AI mới của chúng tôi!
Đừng bỏ lỡ chương trình 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ư:
- Lập trình lời nhắc và kỹ thuật lập trình lời nhắc
Mỗi bài học bao gồm bài tập để hoàn thành, kiểm tra kiến thức và thử thách để hướng dẫn bạn học các chủ đề như:
- Thúc đẩy và kỹ thuật thiết kế lời nhắc
- Tạo ứng dụng văn bản và hình ảnh
- Ứng dụng tìm kiếm
Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) để bắt đầu!
## 🌱 Bắt Đầu
> **Giáo viên**, chúng tôi có [đưa ra một số gợi ý](for-teachers.md) về cách sử dụng chương trình học này. Chúng tôi rất mong nhận được phản hồi của bạn [trong diễn đàn thảo luận](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Giáo viên**, chúng tôi đã [bao gồm một số gợi ý](for-teachers.md) về cách sử dụng chương trình học này. Chúng tôi rất mong nhận phản hồi từ bạn [trong diễn đàn thảo luận](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Người học](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, với mỗi bài học, bắt đầu với bài kiểm tra trước bài giảng và tiếp tục bằng cách đọc tài liệu giảng dạy, hoàn thành các hoạt động khác nhau và kiểm tra sự hiểu biết của bạn với bài kiểm tra sau bài giảng.
**[Người học](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, với từng 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 giảng dạy, hoàn thành các hoạt động khác nhau và kiểm tra hiểu biết của bạn với bài kiểm tra sau bài giảng.
Để tăng cường trải nghiệm học tập, hãy kết nối với bạn bè để làm việc cùng nhau trên các dự án! Thảo luận được khuyến khích trong [diễn đàn thảo luận](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) nơi nhóm điều hành của chúng tôi sẽ sẵn sàng trả lời câu hỏi của bạn.
Để nâng cao trải nghiệm học tập, kết nối với bạn bè để cùng làm các dự án! Khuyến khích thảo luận trong [diễn đàn thảo luận](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) nơi đội ngũ điều phối viên của chúng tôi sẽ có mặt để giải đáp các thắc mắc của bạn.
Để tiếp tục học tập, chúng tôi khuyến nghị bạn khám phá [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) để có thêm tài liệu học tập.
Để mở rộng kiến thức, chúng tôi 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.
### 📋 Thiết lập môi trường của bạn
### 📋 Thiết lập môi trường làm việc
Chương trình học này đã chuẩn bị môi trường phát triển sẵn sàng! Khi bắt đầu, bạn có thể chọn chạy chương trình học trong một [Codespace](https://github.com/features/codespaces/) (_môi trường dựa trên trình duyệt, không cần cài đặt_), hoặc chạy cục bộ trên máy tính của bạn bằng trình soạn thảo văn bản như [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Chương trình học này đã sẵn sàng môi trường phát triển! Khi bắt đầu, bạn có thể chọn chạy chương trình học trong [Codespace](https://github.com/features/codespaces/) (_môi trường dựa trên trình duyệt, không cần cài đặt_), hoặc chạy tại máy tính cá nhâ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
Để bạn dễ dàng lưu công việc, khuyến nghị bạn tạo bản sao kho lưu trữ này. Bạn có thể làm điều này bằng cách nhấn nút **Sử dụng mẫu này** ở đầu trang. Điều này sẽ tạo kho lưu trữ mới trong tài khoản GitHub của bạn với bản sao của chương trình học.
Để bạn dễ dàng lưu công việc, nên tạo bản sao riêng 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** phía trên 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.
Thực hiện các bước sau:
1. **Fork Kho Lưu Trữ**: Nhấn nút "Fork" ở góc trên bên phải của trang này.
#### Chạy chương trình học cục bộ trên máy tính của bạn
Để chạy chương trình học này trên máy tính của bạn, bạn sẽ cần một trình soạn thảo văn bản, một trình duyệt và một công cụ dòng lệnh. Bài học đầu tiên của chúng tôi, [Giới thiệu về Ngôn ngữ lập trình và Công cụ của nghề](../../1-getting-started-lessons/1-intro-to-programming-languages), sẽ hướng dẫn bạn qua các tùy chọn khác nhau cho mỗi công cụ để bạn chọn phù hợp nhất.
Khuyến nghị của chúng tôi là sử dụng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) làm trình soạn thảo, trình soạn thảo này cũng có [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) tích hợp. Bạn có thể tải Visual Studio Code [tại đây](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Chạy chương trình học trên máy tính cá nhân
Để chạy chương trình học này trên máy tính cá nhân, bạn cần 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ụ](../../1-getting-started-lessons/1-intro-to-programming-languages), sẽ hướng dẫn bạn qua các tùy chọn cho những công cụ này để bạn chọn lựa phù hợp nhất.
1. Clone kho lưu trữ về máy tính của bạn. Bạn có thể làm điều này bằng cách nhấp nút **Code** và sao chép URL:
Chúng tôi khuyên dùng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) làm trình soạn thảo, có tích hợp sẵn [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). 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ữ của bạn về máy tính. Bạn có thể làm điều này bằng cách nhấp vào nút **Code** và sao chép URL:
[CodeSpace](./images/createcodespace.png)
Sau đó, mở [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bên trong [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) và chạy lệnh sau, thay `<your-repository-url>` bằng URL bạn vừa sao chép:
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>
```
2. Mở thư mục trong Visual Studio Code. Bạn có thể làm điều này bằng cách nhấp vào **File** > **Open Folder** và chọn thư mục bạn vừa sao chép về.
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 **File** > **Open Folder** và chọn thư mục bạn vừa sao chép.
> Tiện ích mở rộng Visual Studio Code được khuyên dùng:
> Các tiện ích mở rộng được khuyến nghị cho Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - để xem trước các trang HTML ngay trong Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - giúp bạn viết mã nhanh hơn
> * [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 code nhanh hơn
## 📂 Mỗi bài học bao gồm:
@ -137,123 +147,123 @@ Sau đó, mở [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT
- video bổ sung tùy chọn
- bài kiểm tra khởi động trước bài học
- bài học viết
- đối với các bài học dựa trên dự án, hướng dẫn từng bước cách xây dựng dự án
- đố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
- bài kiểm tra sau bài học [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
> **Ghi chú về các bài kiểm tra:** Tất cả bài kiểm tra nằm trong thư mục Quiz-app, tổng cộng 48 bài với mỗi bài gồm ba câu hỏi. Chúng có thể truy cập [tại đây](https://ff-quizzes.netlify.app/web/). Ứng dụng kiểm tra có thể chạy cục bộ hoặc triển khai trên Azure; hãy làm theo hướng dẫn trong thư mục `quiz-app`.
> **Ghi chú về các bài kiểm tra**: Tất 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 mỗi bài gồm ba câu hỏi. Chúng có sẵn [ở đây](https://ff-quizzes.netlify.app/web/), ứng dụng quiz có thể chạy cục bộ hoặc triển khai lên Azure; làm theo hướng dẫn trong thư mục `quiz-app`.
## 🗃️ Các bài học
| | Tên Dự Án | 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 quan | Tác giả |
| 01 | Bắt Đầu | Giới thiệu về Lập trình và Công cụ chuyên ngành | Tìm hiểu các nền tảng cơ bản đằng sau hầu hết ngôn ngữ lập trình và về phần mềm giúp các nhà phát triển chuyên nghiệp làm việc | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Bắt Đầu | Những điều cơ bản về GitHub, bao gồm làm việc nhóm | Cách sử dụng GitHub trong dự án của bạn, cách cộng tác với người khác trên mã nguồn | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Bắt Đầu | Khả năng tiếp cận (Accessibility) | Học những kiến thức cơ bản về khả năng tiếp cận trên web | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Cơ Bản | Các kiểu dữ liệu trong JavaScript | Những kiến thức cơ bản về các kiểu dữ liệu trong JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Cơ Bản | Các hàm và phương thức | Tìm hiểu về các hàm và phương thức để quản lý luồng logic ứng dụng | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Cơ Bản | Tạo quyết định với JS | Học cách tạo điều kiện trong mã của bạn bằng các phương pháp ra quyết định | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Cơ Bản | Mảng và vòng lặp | Làm việc với dữ liệu sử dụng mảng và vòng lặp trong JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML trong thực hành | Xây dựng HTML để tạo một môi trường sinh thái trực tuyến, tập trung vào xây dựng bố cục | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS trong thực hành | Xây dựng CSS để tạo kiểu cho môi trường sinh thái trực tuyến, tập trung vào các kiến thức cơ bản về CSS bao gồm làm trang responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closure trong JavaScript, thao tác DOM | Xây dựng JavaScript để làm cho môi trường sinh thái hoạt động như giao diện kéo/thả, tập trung vào closure và thao tác DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Xây dựng trò chơi đánh máy | Học cách sử dụng sự kiện bàn phím để điều khiển logic ứng dụng JavaScript của bạn | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Làm việc với trình duyệt | Tìm hiểu cách các trình duyệt hoạt động, lịch sử của chúng, và cách khởi tạo các phần tử đầu tiên của tiện ích trình duyệt | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Xây dựng biểu mẫu, gọi API và lưu biến trong bộ nhớ cục bộ (local storage) | Xây dựng các phần tử JavaScript của tiện ích trình duyệt để gọi API sử dụng biến lưu trong bộ nhớ cục bộ | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Các tiến trình nền trong trình duyệt, hiệu năng web | Sử dụng các tiến trình nền của trình duyệt để quản lý biểu tượng tiện ích; tìm hiểu về hiệu năng web và một số tối ưu hóa để cải thiện | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Phát triển trò chơi nâng cao với JavaScript | Tìm hiểu về kế thừa sử dụng cả lớp (Classes) và thành phần (Composition) và mẫu Pub/Sub, chuẩn bị cho việc xây dựng trò chơi | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Vẽ lên canvas | Tìm hiểu về API Canvas, được sử dụng để vẽ các phần tử lên màn hình | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Di chuyển các phần tử quanh màn hình | Khám phá cách các phần tử có thể chuyển động bằng tọa độ Đề-các và API Canvas | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Phát hiện va chạm | Làm cho các phần tử va chạm và phản ứng với nhau bằng phím bấm và cung cấp chức năng làm nguội để đảm bảo hiệu năng trò chơi | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Giữ điểm | Thực hiện các phép toán dựa trên trạng thái và hiệu năng của trò chơi | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kết thúc và khởi động lại trò chơi | Tìm hiểu về kết thúc và khởi động lại trò chơi, bao gồm dọn dẹp tài nguyên và đặt lại giá trị biến | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Mẫu HTML và các tuyến trong ứng dụng web | Học cách tạo khung kiến trúc cho website nhiều trang bằng cách dùng routing và mẫu HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Xây dựng biểu mẫu đăng nhập và đăng ký | Tìm hiểu cách xây dựng biểu mẫu và xử lý các quy trình xác thực | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Các phương pháp lấy và sử dụng dữ liệu | Cách luồng dữ liệu đi vào và ra khỏi ứng dụng của bạn, cách lấy, lưu trữ và xử lý dữ liệu | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Khái niệm Quản lý trạng thái | Tìm hiểu cách ứng dụng của bạn giữ trạng thái và cách quản lý nó bằng lập trình | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Làm việc với VScode | Tìm hiểu cách sử dụng trình soạn thảo mã | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Làm việc với AI | Học cách xây dựng trợ lý AI riêng của bạn | [AI Assistant project](./9-chat-project/README.md) | Chris |
| 01 | Bắt đầu | Giới thiệu về Lập trình và Công cụ | Tìm hiểu các nguyên lý cơ bản đằng sau hầu hết các ngôn ngữ lập trình và phần mềm giúp các lập trình viên làm việc chuyên nghiệp | [Giới thiệu về Ngôn ngữ lập trình và Công cụ](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Bắt đầu | Các kiến thức cơ bản về GitHub, 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 cùng một mã nguồn | [Giới thiệu GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Bắt đầu | Khả năng truy cập | Học các kiến thức cơ bản về khả năng truy cập web | [Các kiến thức cơ bản về truy cập](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Cơ bản | Các kiểu dữ liệu trong JavaScript | Các kiến thức cơ bản về kiểu dữ liệu trong JavaScript | [Kiểu dữ liệu](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | 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 ứ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 | Lập quyết định với JS | Học cách tạo các điều kiện trong mã bằng các phương pháp quyết định | [Lập 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 thực hành | Tạo HTML để xây dựng một terrarium trực tuyến, tập trung vào xây dựng bố cục | [Giới thiệu HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS thực hành | Viết 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 của CSS bao gồm làm cho trang phản hồi | [Giới thiệu 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 | Viết JavaScript để làm cho terrarium có thể thao tác 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 | [Trò chơi đánh máy](./4-typing-game/solution/README.md) | Xây dựng trò chơi đánh máy | Học cách sử dụng các sự kiện bàn phím để điều khiển logic của ứng dụng JavaScript | [Lập trình hướng sự kiện](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Tiện ích mở rộng trình duyệt Xanh](./5-browser-extension/solution/README.md) | Làm việc với trình duyệt | Hiểu về hoạt động của trình duyệt, lịch sử và cách tạo cấu trúc các phần tử đầu tiên của tiện ích mở rộng trình duyệt | [Về trình duyệt](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Tiện ích mở rộng trình duyệt Xanh](./5-browser-extension/solution/README.md) | Xây dựng biểu mẫu, gọi API và lưu biến trong bộ nhớ local | 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ớ local | [API, Biểu mẫu và Bộ nhớ Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Tiện ích mở rộng trình duyệt Xanh](./5-browser-extension/solution/README.md) | Quá trình nền trong trình duyệt, hiệu suất web | Sử dụng các tiến trình nền của trình duyệt để quản lý biểu tượng tiện ích; tìm hiểu về hiệu suất web và một số tối ưu cho nó | [Tác vụ nền và hiệu suất](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Trò chơi không gian](./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à Thành phần cũng như mẫu Pub/Sub, chuẩn bị cho việc xây dựng game | [Giới thiệu phát triển game nâng cao](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Trò chơi không gian](./6-space-game/solution/README.md) | Vẽ lên canvas | Tìm hiểu API Canvas, được dùng để vẽ các phần tử lên màn hình | [Vẽ lên Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Trò chơi không gian](./6-space-game/solution/README.md) | Di chuyển các phần tử trên màn hình | Khám phá cách các phần tử có thể chuyển động sử dụng tọa độ Đề-các và API Canvas | [Di chuyển phần tử](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Trò chơi không gian](./6-space-game/solution/README.md) | Phát hiện va chạm | Làm cho các phần tử va chạm và phản ứng với nhau bằng phím bấm và cung cấp hàm hồi chiếu để đảm bảo hiệu suất game | [Phát hiện va chạm](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Trò chơi không gian](./6-space-game/solution/README.md) | Ghi điểm | Thực hiện các phép tính toán dựa trên trạng thái và hiệu suất của trò chơi | [Ghi điểm](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Trò chơi không gian](./6-space-game/solution/README.md) | Kết thúc và khởi động lại trò chơi | Tìm hiểu cách 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 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Mẫu HTML và Router trong ứng dụng web | Học cách tạo khung kiến trúc cho website nhiều trang sử dụng routing và mẫu HTML | [Mẫu HTML và Router](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Xây dựng Biểu mẫu Đăng nhập và Đăng ký | Tìm hiểu cách xây dựng biểu mẫu và xử lý các quy trình xác thực | [Biểu mẫu](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Các phương pháp lấy và sử dụng dữ liệu | Cách dữ liệu chảy vào ra ứng dụng của bạn, cách lấy dữ liệu, lưu trữ, và xử lý | [Dữ liệu](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Các 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ý lập trình | [Quản lý trạng thái](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Mã trình soạn thảo Browser/VScode](../../8-code-editor) | Làm việc với VScode | Tìm hiểu cách sử dụng trình soạn thảo mã | [Sử dụng trình soạn thảo VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Trợ lý AI](./9-chat-project/README.md) | Làm việc với AI | Tìm hiểu cách xây dựng trợ lý AI cho 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 của chúng tôi được thiết kế dựa trên hai nguyên tắc giáo dục chính:
* học dựa trên dự án
* kiểm tra định kỳ
Chương trình học của chúng tôi được thiết kế với hai nguyên tắc sư phạm chính:
* học theo dự án
* các 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 trải nghiệm thực hành thông qua việc xây dựng trò chơi đánh máy, môi trường sinh thái ảo, tiện ích mở rộng trình duyệt thân thiện môi trường, trò chơi kiểu không gian xâm lược và một ứng dụng ngân hàng dành cho doanh nghiệp. Đến cuối chuỗi bài học, học viên sẽ thu được hiểu biết vững chắc về phát triển web.
Chương trình giảng dạy dạy các kiến thức cơ bản của JavaScript, HTML và CSS, cũng như các công cụ và kỹ thuật mới nhất được các nhà phát triển web ngày nay sử dụng. Học viên sẽ có cơ hội thực hành xây dựng trò chơi đánh máy, terrarium ảo, tiện ích mở rộng trình duyệt thân thiện với môi trường, trò chơi kiểu không gian xâm lược và ứng dụng ngân hàng cho doanh nghiệp. Đến cuối chuỗi bài học, học viên sẽ có được hiểu biết vững chắc về phát triển web.
> 🎓 Bạn có thể bắt đầu với vài bài học đầu tiên trong chương trình này như một [Lộ trình học](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) trên Microsoft Learn!
> 🎓 Bạn có thể học một vài bài đầu tiên trong chương trình này như một [Lộ trình Học tập](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 được làm thú vị hơn cho học viên và việc ghi nhớ các khái niệm cũng được tăng cường. Chúng tôi cũng đã viết một số bài học khởi đầu về cơ bản JavaScript để giới thiệu các khái niệm, kèm theo video từ bộ sưu tập "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", trong đó một số tác giả đã góp phần cho chương trình này.
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 đối với học viên và tăng hiệu quả ghi nhớ các khái niệm. Chúng tôi cũng đã viết một số bài học khởi đầu về JavaScript cơ bản để giới thiệu các khái niệm, kết hợp với video từ bộ sưu tập "[Series cho người mới bắt đầu với JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", trong đó một số tác giả đã đóng góp cho chương trình học này.
Ngoài ra, một bài kiểm tra nhẹ trước lớp đặt mục tiêu học tập cho học sinh, trong khi bài kiểm tra thứ hai sau lớp đảm bảo việc ghi nhớ sâu thêm. Chương trình này được thiết kế linh hoạt và thú vị, có thể học toàn bộ hoặc từng phần. Các dự án bắt đầu nhỏ và ngày càng phức tạp hơn vào cuối chu kỳ 12 tuần.
Ngoài ra, một bài kiểm tra thấp điểm trước lớp giúp học viên tạo động lực học tập theo chủ đề, trong khi bài kiểm tra thứ hai sau lớp giúp củng cố kiến thức. Chương trình học này được thiết kế linh hoạt và thú vị, có thể học toàn bộ hoặc từng phần. Các dự án bắt đầu từ nhỏ và trở nên phức tạp hơn theo chu kỳ 12 tuần.
Mặc dù chúng tôi có chủ ý tránh giới thiệu các framework JavaScript để tập trung vào các kỹ năng cơ bản cần thiết cho nhà phát triển web trước khi áp dụng framework, bước tiếp theo tốt để hoàn thành chương trình này là học về Node.js qua bộ video khác: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Mặc dù chúng tôi đặc biệt tránh giới thiệu các framework JavaScript để tập trung vào kỹ năng cơ bản cần thiết cho lập trình viên web trước khi sử dụng framework, bước tiếp theo tốt để hoàn thành chương trình này là học về Node.js qua một bộ video khác: "[Series cho người mới bắt đầu với Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Truy cập [Bộ Quy tắc Ứng xử](CODE_OF_CONDUCT.md) và [Hướng Dẫn Góp Phần](CONTRIBUTING.md) của chúng tôi. Chúng tôi hoan nghênh phản hồi mang tính xây dựng của bạn!
> 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 rất hoan nghênh các phản hồi mang tính xây dựng của bạn!
## 🧭 Truy cập ngoại tuyến
Bạn có thể chạy tài liệu này ngoại tuyến bằng cách sử dụng [Docsify](https://docsify.js.org/#/). Sao chép repo này, [cài đặt Docsify](https://docsify.js.org/#/quickstart) trên máy cục bộ của bạn, rồi trong thư mục gốc của repo này, gõ `docsify serve`. Website sẽ chạy trên cổng 3000 tại localhost của bạn: `localhost:3000`.
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 kho lưu trữ này, [cài đặt Docsify](https://docsify.js.org/#/quickstart) trên máy của bạn, sau đó ở thư mục gốc của kho lưu trữ này, gõ lệnh `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 tệp PDF của tất cả các bài học có thể được tìm thấy [tại đây](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
File PDF tất cả các bài học có thể tìm thấy [tại đây](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Các Khóa Học Khác
## 🎒 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:
Nhóm của chúng tôi cũng 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)
[](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
[](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/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Chuỗi AI Tạo Sinh
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Chuỗi AI Sinh Tạo
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Học Tập Cơ Bản
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Học Tập Cốt Lõi
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Chuỗi Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://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 ứng dụng AI. Tham gia cùng các học viên và nhà phát triển có kinh nghiệm trong các cuộc thảo luận về MCP. Đây là một cộng đồng hỗ trợ nơi các câu hỏi luôn được chào đón và kiến thức được chia sẻ tự do.
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 giàu 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.
@ -264,6 +274,6 @@ Kho lưu trữ này được cấp phép theo giấy phép MIT. Xem tệp [LICEN
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Tuyên bố miễn trừ trách nhiệm**:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn chính thức và đáng tin cậy. Đối với các thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm về bất kỳ sự hiểu nhầm hoặc giải thích sai nào phát sinh từ việc sử dụng bản dịch này.
**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, vui lòng lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc sự không chính xác. Tài liệu gốc bằng ngôn ngữ gốc nên được xem là nguồn tin 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 bởi con người. Chúng tôi không chịu trách nhiệm đối với bất kỳ sự hiểu 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]
4 days ago