זהו מאגר תוכן חינוכי ללימוד יסודות פיתוח ווב למתחילים. הקורס הינו קורס מקיף בן 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` - פיתוח משחק בקנבס
- `6-space-game/README.md` - פיתוח משחק מבוסס Canvas
- `9-chat-project/README.md` - פרויקט עוזר צ'אט מבוסס AI
### מבנה מונורפו
למרות שאינו מונורפו קלאסי, מאגר זה כולל מספר פרויקטים עצמאיים:
- כל שיעור עצמאי בפני עצמו
- פרויקטים אינם חולקים תלויות
- עבודות על פרויקטים בודדים ללא השפעה על אחרים
- שכפל את כל המאגר לחוויית קורס מלאה
אף שזו לא מונורפו קלאסית, המאגר מכיל מספר פרויקטים עצמאיים:
- כל שיעור הוא עצמאי
- אין שיתוף תלותים בין פרויקטים
- העבודה על פרויקטים בודדים ללא השפעה על האחרים
- שכפל את כל המאגר לחוויית הלימוד המלאה
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**כתב ויתור**:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עלולים להכיל שגיאות או אי-דיוקים. יש להסתמך על המסמך המקורי בשפת המקור כמקור הסמכות. למידע קריטי מומלץ לבצע תרגום מקצועי על ידי אדם. אנו לא נישא באחריות לכל אי-הבנה או פרשנות לא נכונה הנובעת משימוש בתרגום זה.
מסמך זה תורגם באמצעות שירות התרגום בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לשים לב כי תרגומים ממוחשבים עלולים להכיל טעויות או אי-דיוקים. יש להתייחס למסמך המקורי בשפתו המקורית כמקור הסמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי מתרגם אנושי. אנו לא אחראיים לכל אי-הבנה או פרשנות שגויה הנובעות מהשימוש בתרגום זה.
למדו את יסודות פיתוח האינטרנט עם הקורס המקיף שלנו של 12 שבועות שנבנה על ידי מומחי Microsoft Cloud. כל אחד מ-24 השיעורים מתעמק ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרריום, תוספי דפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ופעילויות מעשיות. שפרו את היכולות שלכם ואופטמו את חווית הלמידה עם שיטת הלימוד המבוססת פרויקטים שלנו. התחילו את מסע התכנות שלכם היום!
למדו את יסודות פיתוח האינטרנט עם הקורס המקיף שלנו בן 12 השבועות על ידי Microsoft Cloud Advocates. כל אחת מ-24 השיעורים מתעמקת ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרטריומים, תוספות לדפדפן, ומשחקי חלל. התנסו עם חידונים, דיונים ומשימות מעשיות. שפרו את הכישורים שלכם ואופטימיזו את השימור של הידע עם הפדגוגיה היעילה שלנו המבוססת על פרויקטים. התחילו את מסע הקידוד שלכם היום!
> מאגר זה כולל מעל 50 תרגומים שונים שמגדילים משמעותית את גודל ההורדה. כדי לשכפל בלי תרגומים, השתמשו ב-sparse checkout:
> מאגר זה כולל למעלה מ-50 שפות תרגום, מה שמגדיל משמעותית את גודל ההורדה. לשכפול ללא תרגומים, השתמשו ב-sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,42 +48,41 @@
> 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://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _האם אתה תלמיד?_
בקר ב[**דף מרכז התלמיד**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) בו תמצאו משאבי מתחילים, חבילת תלמידים ואפילו דרכים לקבל שובר הסמכה חינמי. זהו הדף שכדאי לשמור כסימנייה ולבדוק מעת לעת כאשר אנו מחליפים תוכן מדי חודש.
בקרו ב-[**דף מרכז התלמיד**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) שם תמצאו משאבים למתחילים, חבילות לסטודנטים ועוד דרכים לקבל שובר לתעודה חינמית. זה הדף שכדאי לכם לסמן בבקבוק ולעיין בו מדי פעם כשאנו מחליפים תוכן מדי חודש.
### 📣 הכרזה - אתגרי מצב סוכן חדש ל-GitHub Copilot להשלים!
### 📣 הכרזה - אתגרי מצב GitHub Copilot Agent חדשים להשלים!
אתגר חדש נוסף, חפשו "GitHub Copilot Agent Challenge 🚀" ברוב הפרקים. זהו אתגר חדש עבורכם להשלים בעזרת GitHub Copilot ומצב סוכן. אם לא השתמשתם במצב סוכן קודם, הוא מסוגל לא רק ליצור טקסט אלא גם ליצור ולערוך קבצים, להפעיל פקודות ועוד.
אתגר חדש נוסף, חפשו "GitHub Copilot Agent Challenge 🚀" ברוב הפרקים. זהו אתגר חדש עבורכם להשלים תוך שימוש ב-GitHub Copilot ובמצב Agent. אם לא השתמשתם במצב Agent קודם לכן, הוא מסוגל לא רק לייצר טקסט אלא גם ליצור ולערוך קבצים, להריץ פקודות ועוד.
### 📣 הכרזה - _פרויקט חדש לבנייה באמצעות AI גנרטיבי_
פרויקט עוזר AI חדש נוסף, בדקו את [הפרויקט](./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) כדי להתחיל!
כל שיעור כולל מטלה להשלים, בדיקת ידע ואתגר שינחו אתכם בלימוד נושאים כגון:
- הנעת פקודות והנדסת פרומפטים
כל שיעור כולל משימה להשלים, בדיקת ידע ואתגר להנחות אותך בנושאים כמו:
- יצירת פקודות והנדסת פקודות
- יצירת אפליקציות טקסט ותמונה
- אפליקציות חיפוש
@ -91,43 +90,43 @@
## 🌱 התחלת העבודה
## 🌱 להתחיל
> **מורים**, כללנו [כמה הצעות](for-teachers.md) לשימוש בתוכנית לימודים זו. נשמח למשוב שלכם [בפורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **מורים**, כללנו [הצעות](for-teachers.md) כיצד להשתמש בתכנית לימודים זו. נשמח למשוב שלכם [בפורום הדיון שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, עבור כל שיעור, התחילו בחידון מקדים ועברו על חומר ההרצאה, השלימו פעילויות שונות ובדקו את ההבנה שלכם עם החידון לאחר ההרצאה.
**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, עבור כל שיעור, התחילו בחידון טרום-הרצאה ועקבו אחר קריאת חומר ההרצאה, השלמת הפעילויות השונות ובדיקת ההבנה שלכם עם חידון לאחר ההרצאה.
כדי לשפר את חוויית הלמידה שלכם, התחברו לחברים לקבוצות עבודה על הפרויקטים יחד! עידוד דיונים בפורום הדיונים שלנו [בפורום הדיונים](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) בו צוות המנהלים שלנו יהיה זמין למענה על שאלותכם.
כדי לשפר את חוויית הלמידה שלכם, התחברו עם חבריכם לעבוד יחד על הפרויקטים! דיונים מומלצים ב[פורום הדיון שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) שבו צוות המפמ"רים שלנו יהיה זמין לענות על שאלותיכם.
לקידום הלימודים, אנו ממליצים בחום לבדוק את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) למשאבי לימוד נוספים.
להרחבת ההשכלה שלכם, אנו ממליצים בחום לחקור את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) לקבלת חומרי לימוד נוספים.
### 📋 הקמת סביבת הפיתוח שלכם
### 📋 הגדרת סביבת העבודה שלכם
לתוכנית הלימודים הזו יש סביבת פיתוח מוכנה לשימוש! כאשר תתחילו, תוכלו לבחור להריץ את תוכנית הלימודים ב-[Codespace](https://github.com/features/codespaces/) (_סביבת דפדפן ללא צורך בהתקנות_), או מקומית במחשב שלכם באמצעות עורך טקסט כמו [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
לתכנית לימודים זו קיימת סביבת פיתוח מוכנה לשימוש! כאשר תתחילו תוכלו לבחור להריץ את התכנית ב-[Codespace](https://github.com/features/codespaces/) (_סביבת עבודה בדפדפן ללא צורך בהתקנות_), או מקומית במחשב שלכם תוך שימוש בעורך טקסט כמו [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### צרו את המאגר שלכם
כדי שתוכלו לשמור בקלות את העבודה שלכם, מומלץ ליצור עותק אישי של המאגר. ניתן לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש הדף. זה ייצור מאגר חדש בחשבון GitHub שלכם עם עותק של תוכנית הלימודים.
#### צרו את מאגר הקוד שלכם
כדי שתוכלו לשמור את העבודה שלכם בקלות, מומלץ ליצור עותק משלכם של מאגר הקוד הזה. ניתן לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש הדף. זה ייצור מאגר חדש בחשבון ה-GitHub שלכם עם עותק של תכנית הלימודים.
עקבו אחרי השלבים הבאים:
1. **פיצול המאגר**: לחצו על כפתור "Fork" בפינה הימנית העליונה של הדף הזה.
להריץ תוכנית לימודים זו במחשב שלכם, תזדקקו לעורך טקסט, לדפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [הקדמה לשפות תכנות וכלי עבודה](../../1-getting-started-lessons/1-intro-to-programming-languages), יכוון אתכם דרך אפשרויות שונות לכל אחד מהכלים הללו כדי שתוכלו לבחור את המתאים לכם ביותר.
כדי להריץ תכנית לימודים זו באופן מקומי, תזדקקו לעורך טקסט, לדפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [מבוא לשפות תכנות וכלים מקצועיים](../../1-getting-started-lessons/1-intro-to-programming-languages), ידריך אתכם דרך אפשרויות שונות לכל אחד מהכלים לבחירתכם.
ההמלצה שלנו היא להשתמש ב-[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) כעורך שלכם, שיש גם [טרמינל](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) מובנה. ניתן להוריד את Visual Studio Code [כאן](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
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)
לאחר מכן, פתח את [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 שהעתקת זה עתה:
לאחר מכן, פתח את [הטרמינל](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>
@ -138,84 +137,85 @@
> הרחבות מומלצות ל-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/) אפליקציית החנים ניתנת להרצה מקומית או פריסה ב-Azure; עקוב אחר ההוראות שבתיקיית `quiz-app`.
> **הערה על חידונים**: כל החידונים נמצאים בתיקיית Quiz-app, 48 חידונים בסך הכול עם שלוש שאלות בכל אחד מהם. הם זמינים [כאן](https://ff-quizzes.netlify.app/web/) ניתן להריץ את אפליקציית החידון באופן מקומי או לפרוס אותה לאזור; עקבו אחרי ההוראות בתיקיית `quiz-app`.
## 🗃️ שיעורים
| | שם הפרויקט | המושגים הנלמדים | יעדי הלמידה | השיעור המקושר | מחבר |
| 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 |
| | שם הפרויקט | מושגים שנלמדים | מטרות הלמידה | שיעור מקושר | מחבר |
| 01 | מתחילים | מבוא לתכנות וכלי המסחר | למדו את היסודות הבסיסיים שמאחורי רוב שפות התכנות ועל התוכנה שעוזרת למפתחים מקצועיים לבצע את עבודתם | [מבוא לשפות תכנות וכלי מסחר](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ג'אזמין |
| 02 | מתחילים | יסודות GitHub, כולל עבודה בצוות | כיצד להשתמש ב-GitHub בפרויקט שלך, כיצד לשתף פעולה עם אחרים בבסיס קוד | [מבוא ל-GitHub](./1-getting-started-lessons/2-github-basics/README.md) | פלור |
| 03 | מתחילים | נגישות | למדו את יסודות הנגישות באינטרנט | [יסודות הנגישות](./1-getting-started-lessons/3-accessibility/README.md) | כריסטופר |
| 04 | יסודות JS | סוגי נתונים ב-JavaScript | היסודות של סוגי הנתונים ב-JavaScript | [סוגי נתונים](./2-js-basics/1-data-types/README.md) | ג'אזמין |
| 06 | יסודות JS | קבלת החלטות עם JS | למדו כיצד ליצור תנאים בקוד שלכם באמצעות שיטות קבלת החלטות | [קבלת החלטות](./2-js-basics/3-making-decisions/README.md) | ג'אזמין |
| 07 | יסודות JS | מערכים ולולאות | עבודה עם נתונים באמצעות מערכים ולולאות ב-JavaScript | [מערכים ולולאות](./2-js-basics/4-arrays-loops/README.md) | ג'אזמין |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML בפעולה | בניית ה-HTML ליצירת טרריום מקוון, התמקדות בבניית פריסה | [מבוא ל-HTML](./3-terrarium/1-intro-to-html/README.md) | ג'ן |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, מניפולציית DOM | בניית הקוד ב-JavaScript כדי לגרום לטרריום לתפקד כממשק גרירה ושחרור, עם דגש על Closure ומניפולציית DOM | [JavaScript Closures, מניפולציית DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | ג'ן |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | בניית משחק הקלדה | למדו כיצד להשתמש באירועי מקלדת כדי לנהל את הלוגיקה של אפליקציית ה-JavaScript שלכם | [תכנות מוכוון אירועים](./4-typing-game/typing-game/README.md) | כריסטופר |
| 12 | [הרחבת דפדפן ירוקה](./5-browser-extension/solution/README.md) | עבודה עם דפדפנים | למדו כיצד דפדפנים עובדים, ההיסטוריה שלהם, ואיך להקים את רכיבי הבסיס של הרחבת דפדפן | [על דפדפנים](./5-browser-extension/1-about-browsers/README.md) | ג'ן |
| 13 | [הרחבת דפדפן ירוקה](./5-browser-extension/solution/README.md) | בניית טופס, קריאה ל-API ואחסון משתנים בזיכרון מקומי | בנו את רכיבי ה-JavaScript של הרחבת הדפדפן שלכם לקריאה ל-API תוך שימוש במשתנים המאוחסנים בזיכרון המקומי | [API, טפסים ואחסון מקומי](./5-browser-extension/2-forms-browsers-local-storage/README.md) | ג'ן |
| 14 | [הרחבת דפדפן ירוקה](./5-browser-extension/solution/README.md) | תהליכים ברקע בדפדפן, ביצועי ווב | השתמשו בתהליכים ברקע של הדפדפן לניהול האייקון של ההרחבה; למדו על ביצועי רשת וכמה אופטימיזציות לשיפור ביצועי ההרחבה | [משימות רקע וביצועים](./5-browser-extension/3-background-tasks-and-performance/README.md) | ג'ן |
| 15 | [משחק חלל](./6-space-game/solution/README.md) | פיתוח משחק מתקדם יותר עם JavaScript | למדו על ירושה באמצעות מחלקות וקומפוזיציה וגם על תבנית Pub/Sub, כהכנה לבניית משחק | [מבוא לפיתוח משחק מתקדם](./6-space-game/1-introduction/README.md) | כריס |
| 16 | [משחק חלל](./6-space-game/solution/README.md) | ציור על הקנבס | למדו על Canvas API, המשמש לציור אלמנטים על המסך | [ציור על קנבס](./6-space-game/2-drawing-to-canvas/README.md) | כריס |
| 17 | [משחק חלל](./6-space-game/solution/README.md) | הזזת אלמנטים על המסך | גלו כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-Canvas API | [הזזת אלמנטים](./6-space-game/3-moving-elements-around/README.md) | כריס |
| 18 | [משחק חלל](./6-space-game/solution/README.md) | זיהוי התנגשות | הפכו אלמנטים להתנגש ולהגיב זה לזה באמצעות לחיצות מקשים וספקו פונקציית קירור כדי לוודא ביצועים טובים במשחק | [זיהוי התנגשות](./6-space-game/4-collision-detection/README.md) | כריס |
| 19 | [משחק חלל](./6-space-game/solution/README.md) | שמירת ניקוד | בצעו חישובים מתמטיים על בסיס מצב המשחק והביצועים | [שימור ניקוד](./6-space-game/5-keeping-score/README.md) | כריס |
| 20 | [משחק חלל](./6-space-game/solution/README.md) | סיום והפעלה מחדש של המשחק | למדו על סיום והפעלה מחדש של המשחק, כולל ניקוי משאבים ואיפוס ערכי משתנים | [תנאי סיום](./6-space-game/6-end-condition/README.md) | כריס |
| 21 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | תבניות HTML ונתיבים באפליקציית ווב | למדו כיצד ליצור תשתית של אתר רב-דפי באמצעות ניתוב ותבניות HTML | [תבניות HTML ונתיבים](./7-bank-project/1-template-route/README.md) | יוהאן |
| 22 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | בניית טופס התחברות והרשמה | למדו על בניית טפסים וטיפול בשגרות אימות | [טפסים](./7-bank-project/2-forms/README.md) | יוהאן |
| 23 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | שיטות לקבלת שימוש בנתונים | כיצד נתונים זורמים פנימה והחוצה מהאפליקציה שלך, כיצד לאחסן אותם, לשלוף אותם ולפנות אותם | [נתונים](./7-bank-project/3-data/README.md) | יוהאן |
| 24 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | מושגי ניהול מצב | למדו כיצד האפליקציה שלכם שומרת מצב וכיצד לנהל אותו תכנותית | [ניהול מצבים](./7-bank-project/4-state-management/README.md) | יוהאן |
| 25 | [קוד דפדפן/VScode](../../8-code-editor) | עבודה עם VScode | למדו כיצד להשתמש בעורך קוד| [שימוש בעורך קוד VScode](./8-code-editor/1-using-a-code-editor/README.md) | כריס |
| 26 | [עוזרי בינה מלאכותית](./9-chat-project/README.md) | עבודה עם בינה מלאכותית | למדו כיצד לבנות עוזר AI משלכם | [פרויקט עוזר AI](./9-chat-project/README.md) | כריס |
## 🏫 פדגוגיה
תכנית הלימודים שלנו מעוצבת עם שני עקרונות פדגוגיים מרכזיים:
* למידה מבוססת פרויקטים
* חנים תכופים
* חידונים תכופים
הקורס מלמד את היסודות של JavaScript, HTML ו-CSS, וכן את הכלים והטכניקות העדכניים ביותר בהם משתמשים מפתחי האינטרנט של היום. לסטודנטים תהיה הזדמנות לפתח ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון פלישת החלל ואפליקציית בנקאות לעסקים. בסיום הסדרה הסטודנטים ירכשו הבנה איתנה של פיתוח ווב.
התכנית מלמדת את הבסיס של JavaScript, HTML, ו-CSS, כמו גם את הכלים והשיטות העדכניות שמשתמשים בהם מפתחי ווב כיום. לתלמידים תינתן ההזדמנות לפתח ניסיון מעשי באמצעות בניית משחק הקלדה, טרריום וירטואלי, הרחבת דפדפן אקולוגית, משחק בסגנון Space Invaders, ואפליקציית בנקאות לעסקים. בסיום הסדרה, התלמידים ירכשו הבנה מוצקה של פיתוח אתרי אינטרנט.
> 🎓 ניתן לקחת את כמה השיעורים הראשונים בתכנית זו כ-[מרכז למידה](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ב-Microsoft Learn!
> 🎓 ניתן לקחת את השיעורים הראשונים בתכנית זו כ-[נתיב למידה](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ב-Microsoft Learn!
על ידי הבטחת התאמה של התכנים לפרויקטים, התהליך נעשה מעניין יותר עבור הסטודנטים והחזקת המושגים תוגבר. כמו כן, כתבנו כמה שיעורי פתיחה ביסודות JavaScript כדי להציג מושגים, יחד עם וידאו מסדרת "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" של סרטוני הדרכה, שחלק מהמחברים שלהם תרמו לתכנית זו.
על ידי הבטחת ההתאמה בין התוכן לפרויקטים, התהליך נעשה יותר מרתק עבור התלמידים וזכירת המושגים מועצמת. כמו כן כתבנו מספר שיעורי בסיס ב-JavaScript להכרות עם מושגים, בתוספת וידאו מתוך אוסף ההדרכות "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", חלק מהכותבים שלהם תרמו לתכנית לימודים זו.
בנוסף, בחן ללא סיכון לפני השיעור מגדיר את כוונת הסטודנט ללמוד נושא, בעוד בחן שני לאחר השיעור מבטיח החזקה נוספת. תכנית הלימודים עוצבה להיות גמישה ומהנה וניתן לקחת אותה בשלמותה או בחלקים. הפרויקטים מתחילים קטנים והופכים למורכבים יותר לקראת סיום מחזור של 12 שבועות.
בנוסף, חידון בעל סיכון נמוך לפני השיעור מגדיר את כוונת התלמיד ללמידת נושא, בעוד שחידון שני לאחר הכיתה מבטיח זכירה נוספת. תכנית הלימודים עוצבה להיות גמישה ומהנה וניתן לעבור אותה כולה או בחלקה. הפרויקטים מתחילים קטנים והולכים ומסובכים לקראת סוף מחזור של 12 שבועות.
בעוד שהימנענו בכוונה מהכנסת מסגרות JavaScript כדי להתמקד בכישורים הבסיסיים הנדרשים כמפתח ווב לפני אימוץ מסגרת, צעד טוב להשלמת תכנית זו הוא ללמוד על Node.js דרך אוסף וידאו נוסף: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
אמנם הימנענו במודע מהכנסת מסגרות JavaScript כדי להתמקד בכישורים הבסיסיים הדרושים כמפתח ווב לפני אימוץ מסגרת, צעד טוב הבא להשלמת תכנית זו יהיה ללמוד על Node.js באמצעות אוסף וידאו נוסף: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
ניתן להפעיל תיעוד זה במצב לא מקוון באמצעות [Docsify](https://docsify.js.org/#/). נסה לפצל מאגר זה, [התקן Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלך, ואז בתיקיית השורש של המאגר הקלד `docsify serve`. האתר יופעל בפורט 3000 על ה-localhost שלך: `localhost:3000`.
ניתן להפעיל תיעוד זה במצב לא מקוון באמצעות [Docsify](https://docsify.js.org/#/). פצלו את הרפו, [התקינו Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלכם, ואז בתיקיית השורש של הרפו, הקלידו `docsify serve`. האתר יפעל על פורט 3000 במחשב המקומי שלכם: `localhost:3000`.
## 📘 קובץ PDF
## 📘 PDF
ניתן למצוא קובץ PDF של כל השיעורים [כאן](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 קורסים נוספים
הצוות שלנו מפיק קורסים נוספים! בדקו את:
## 🎒 קורסים אחרים
הצוות שלנו מפיק קורסים נוספים! עיינו ב:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -224,7 +224,7 @@
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / סוכנים
### 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)
@ -232,7 +232,7 @@
---
### סדרת בינה מלאכותית גנרטיבית
### סדרת AI גנרטיבי
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -240,7 +240,7 @@
---
### לימוד יסודי
### לימודהבסיסית
[](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)
@ -251,7 +251,7 @@
---
### סדרת 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)
אם אתה נתקע או יש לך שאלות לגבי בניית אפליקציות בינה מלאכותית. הצטרף ללומדים אחרים ומפתחים מנוסים בדיונים על MCP. זוהי קהילה תומכת שבה שאלות מתקבלות בברכה והידע משותף בחופשיות.
אם אתם נתקעים או יש לכם שאלות לגבי בניית אפליקציות AI. הצטרפו ללומדים אחרים ולמפתחים מנוסים לדיונים על 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 curriculum-repository voor het onderwijzen van webontwikkeling basisprincipes aan beginners. Het curriculum is een uitgebreide cursus van 12 weken ontwikkeld door Microsoft Cloud Advocates, met 24 praktijkgerichte lessen over JavaScript, CSS en HTML.
Dit is een educatieve curriculumrepository voor het aanleren van webontwikkelingbasisprincipes 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
### Belangrijkste Componenten
- **Educatieve Inhoud**: 24 gestructureerde lessen georganiseerd in projectgebaseerde modules
- **Praktische Projecten**: Terrarium, Typing Game, Browser Extensie, Space Game, Banking App, Code Editor en AI Chat Assistent
- `9-chat-project/README.md` - AI chat-assistent project
### Monorepo Structuur
### Monorepo-structuur
Hoewel dit geen traditionele monorepo is, bevat deze repository meerdere onafhankelijke projecten:
- Elke les is zelfvoorzienend
- Projecten delen geen dependencies
- Werk aan individuele projecten zonder anderen te beïnvloeden
- Clone de volledige repo voor de volledige curriculum ervaring
Hoewel geen traditionele monorepo, bevat deze repository meerdere onafhankelijke projecten:
- Elke les is zelfstandig
- Projecten delen geen dependencies
- Werk aan individuele projecten zonder anderen te beïnvloeden
- Clone hele repo voor de volledige curriculumervaring
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
Dit document is vertaald met behulp van de AI-vertalingsdienst [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onjuistheden kunnen bevatten. Het originele document in de oorspronkelijke taal wordt beschouwd als de gezaghebbende bron. Voor belangrijke 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 vertaaldienst [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onjuistheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet als de gezaghebbende bron worden beschouwd. 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.
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!
Leer de basisprincipes van webontwikkeling met onze 12-weekse cursus van Microsoft Cloud Advocates. Elke van de 24 lessen duikt in JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtegames. Doe mee met quizzen, discussies en praktische opdrachten. Verbeter je vaardigheden en optimaliseer je kennisbehoud met onze effectieve projectgerichte didactiek. Begin vandaag nog met je codeerreis!
Word lid van de Azure AI Foundry Discord Community
Sluit je aan bij de Azure AI Foundry Discord Community
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)
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 The Azure AI Foundry Discord en ontmoet experts en medeontwikkelaars**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Meertalige Ondersteuning
### 🌐 Meertalige ondersteuning
#### Ondersteund via GitHub Actie (Geautomatiseerd & Altijd Actueel)
#### Ondersteund via GitHub Action (Geautomatiseerd & altijd up-to-date)
> Deze repository bevat meer dan 50 taalvertalingen, wat de downloadgrootte aanzienlijk vergroot. Om zonder vertalingen te clonen, gebruik sparse checkout:
> Deze repository bevat meer dan 50 taalvertalingen, wat de downloadgrootte aanzienlijk verhoogt. Om te clonen zonder vertalingen, gebruik je sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -51,78 +51,78 @@ Volg deze stappen om aan de slag te gaan met deze bronnen:
> 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 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)**
**Als je wilt dat er extra vertalingen worden ondersteund, staan deze [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 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.
Bezoek de [**Student Hubpagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersmaterialen, studentpakketten en zelfs manieren vindt om een gratis certificaatvoucher te krijgen. Dit is de pagina die je wilt bookmarken en van tijd tot tijd wilt bekijken, omdat we maandelijks inhoud wisselen.
### 📣 Aankondiging - Nieuwe GitHub Copilot Agent modus uitdagingen om te voltooien!
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.
Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dat is een nieuwe uitdaging om te voltooien met behulp van GitHub Copilot en de Agent-modus. Als je Agent-modus nog niet eerder hebt gebruikt, kan deze niet alleen tekst genereren, maar ook bestanden maken en bewerken, opdrachten uitvoeren en meer.
### 📣 Aankondiging - _Nieuw project om te bouwen met Generatieve AI_
### 📣 Aankondiging - _Nieuw project om te bouwen met Generatieve AI_
Nieuw AI-assistentproject zojuist toegevoegd, bekijk het [project](./9-chat-project/README.md)
Net toegevoegd: een nieuw AI-assistentproject, 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 net uitgebracht
Mis ons nieuwe Generatieve AIcurriculum niet!
Mis ons nieuwe Generatieve AI-curriculum niet!
Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen!
Elke les bevat een opdracht om te voltooien, een kenniscontrole en een uitdaging om je te begeleiden bij het leren over onderwerpen zoals:
Elke les bevat een opdracht om te voltooien, een kennischeck en een uitdaging die je begeleidt bij het leren van onderwerpen zoals:
- Prompting en prompt engineering
- Generatie van tekst- en afbeeldingsapps
- Zoekapps
- Tekst- en beeldapplicatie-generatie
- Zoek-applicaties
Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te starten!
Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen!
## 🌱 Aan de slag
> **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)!
> **Docenten**, we hebben [enkele suggesties opgenomen](for-teachers.md) over hoe dit curriculum te 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)**, 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.
**[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.
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 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 moderators beschikbaar zal zijn om je vragen te beantwoorden.
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.
Om je opleiding verder te bevorderen, raden we sterk aan om [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! 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).
Dit curriculum heeft een ontwikkelomgeving klaar voor gebruik! Als je begint kun je ervoor kiezen om het curriculum te draaien 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).
#### Maak je repository aan
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.
#### Maak je eigen repository
Om je werk gemakkelijk op te slaan, wordt het aanbevolen om een 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 aan 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.
2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Het curriculum draaien in een Codespace
#### Het curriculum uitvoeren in een Codespace
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.
In je 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 werkruimte.
#### Het curriculum lokaal uitvoeren op je computer
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.
Om dit curriculum lokaal op je computer uit te voeren, 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 voor jou werkt.
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.
Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) te gebruiken als je editor, 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).
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)
@ -133,10 +133,10 @@ Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc
git clone <your-repository-url>
```
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.
2. Open de map in Visual Studio Code. Dit kun je doen door te klikken op **Bestand** > **Map openen** en de map te selecteren die je zojuist hebt gekloond.
> Aanbevolen Visual Studio Code-extensies:
> Aanbevolen Visual Studio Codeextensies:
>
> * [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
@ -145,78 +145,78 @@ Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc
- optionele sketchnote
- optionele aanvullende video
- warming-up quiz vóór de les
- geschreven les
- voor projectgerichte lessen, stapsgewijze handleidingen om het project te bouwen
- kenniscontroles
- warming-up quiz voor de les
- schriftelijke les
- voor projectgebaseerde lessen, stapsgewijze handleidingen over hoe het project te bouwen
- kennistests
- een uitdaging
- aanvullende lectuur
- aanvullende leesstof
- 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 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.
> **Een opmerking over quizzes**: Alle quizzes bevinden zich in de Quiz-app map, in totaal 48 quizzes met 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.
| 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 |
| 01 | Aan de slag | Introductie tot programmeren en de gebruikte tools | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt | [Introductie tot Programmeertalen en Tools](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Aan de slag | Basis van GitHub, inclusief samenwerken in een team | Hoe je GitHub gebruikt in je project, hoe je samenwerkt met anderen aan een codebase | [Introductie tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Aan de slag | Toegankelijkheid | Leer de basis van webtoegankelijkheid | [Toegankelijkheidsbasisprincipes](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basis | JavaScript Datatypes | De basis van JavaScript datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basis | Functies en Methodes | Leer over functies en methodes om de logica van een applicatie te beheren | [Functies en Methodes](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher |
| 06 | JS Basis | Beslissingen maken met JS | Leer hoe je voorwaarden creëert in je code via beslissingsmethodes | [Beslissingen maken](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basis | 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 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 CSS-basis en 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 voor het terrarium om te functioneren als een 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 | [Typing Game](./4-typing-game/solution/README.md) | Bouw een Typing Game | Leer hoe je toetsevenementen gebruikt om de logica van je JavaScript app aan te sturen | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Werken met Browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browser-extensie opzet | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Formulieren maken, API aanroepen en variabelen opslaan in lokale opslag | Bouw de JavaScript-elementen van je browser-extensie om een API aan te roepen met gebruik van variabelen opgeslagen in lokaal opslag | [API's, Formulieren en Lokale Opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het icoon 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 | [Space Game](./6-space-game/solution/README.md) | Meer geavanceerde gameontwikkeling met JavaScript | Leer over Overerving met zowel Klassen als Compositie en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een game | [Introductie tot Geavanceerde Gameontwikkeling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./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 | [Space Game](./6-space-game/solution/README.md) | Elementen bewegen over het scherm | Ontdek hoe elementen beweging krijgen met behulp van cartesische coördinaten en de Canvas API | [Elementen Bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Detectie van botsingen | Laat elementen botsen en reageren op elkaar via toetsaanslagen en zorg voor een cooldown-functie ter verbetering van prestaties | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./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 | [Space Game](./6-space-game/solution/README.md) | Het spel beëindigen en opnieuw starten | Leer over het beëindigen en herstarten van het spel, inclusief opruimen van assets en resetten van variabelen | [De eindvoorwaarde](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-templates en routes in een webapp | Leer hoe je de structuur van een meerpagina-website maakt met routing en HTML-templates | [HTML-templates en Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking 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 | [Banking App](./7-bank-project/solution/README.md) | Methoden voor het ophalen en gebruiken van data | 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 | [Banking App](./7-bank-project/solution/README.md) | Concepten van state management | Leer hoe je app de staat behoudt en hoe je dit 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 van 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 |
## 🏫 Pedagogiek
Onze curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten:
Onze leerstof is ontworpen met twee belangrijke pedagogische principes in gedachten:
* projectgebaseerd leren
* frequente quizzen
* regelmatige quizzes
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.
Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die hedendaagse webontwikkelaars gebruiken. Studenten krijgen de kans om praktijkervaring op te doen door het bouwen van een typing game, virtueel terrarium, milieuvriendelijke browser-extensie, space-invader-stijl game en een banking app voor bedrijven. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling verworven.
> 🎓 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!
> 🎓 Je kunt de eerste lessen in deze leerstof volgen als een [Leertraject](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn!
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.
Door ervoor te zorgen dat de inhoud aansluit bij projecten, wordt het proces boeiender voor studenten en wordt het vasthouden van concepten vergroot. We hebben ook verschillende startlessen in JavaScript basics geschreven 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)" verzameling van videotutorials, waarvan enkele auteurs hebben bijgedragen aan deze leerstof.
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.
Daarnaast zet een low-stakes quiz voor een les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les zorgt voor verdere opname. Deze leerstof is ontworpen om flexibel en leuk te zijn en kan geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer tegen het einde van de 12-weekse cyclus.
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)".
Hoewel we er bewust voor hebben gekozen om geen JavaScript-frameworks te introduceren om te focussen op de basisvaardigheden die een webontwikkelaar nodig heeft vóór het gebruik van een framework, zou een goede volgende stap om deze leerstof te voltooien het leren over Node.js kunnen 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 stellen je constructieve feedback op prijs!
> Bekijk onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We verwelkomen je constructieve feedback!
## 🧭 Offline toegang
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`.
Je kunt deze documentatie offline draaien met behulp van [Docsify](https://docsify.js.org/#/). Fork deze repo, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine en typ in de hoofdmap van deze repo `docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`.
## 📘 PDF
Een PDF van alle lessen is hier te vinden [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andere Cursussen
Ons team produceert ook andere cursussen! Neem een kijkje bij:
Ons team maakt ook andere cursussen! Bekijk:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -233,7 +233,7 @@ Ons team produceert ook andere cursussen! Neem een kijkje bij:
---
### Generatieve AI Serie
### Generative AI Series
[](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)
@ -252,7 +252,7 @@ Ons team produceert ook andere cursussen! Neem een kijkje bij:
---
### Copilot Serie
### Copilot Series
[](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)
@ -260,11 +260,11 @@ Ons team produceert ook andere cursussen! Neem een kijkje bij:
## Hulp Krijgen
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.
Als je vastloopt of vragen hebt over het bouwen van AI-apps. Sluit je aan bij mede-leren en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende gemeenschap waar vragen welkom zijn en kennis vrij wordt gedeeld.
@ -276,5 +276,5 @@ 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 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.
Dit document is vertaald met behulp van de AI-vertalingsdienst [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we 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 als de gezaghebbende bron worden beschouwd. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortkomen uit het gebruik van deze vertaling.
Đây là khoá học giáo dục nhằm dạy các kiến thức cơ bản về phát triển web cho người mới bắt đầu. Khoá học là một khóa toàn diện kéo dài 12 tuần do Microsoft Cloud Advocates phát triển, với 24 bài học thực hành bao gồm JavaScript, CSS, và HTML.
Đây là khoá học giáo dục dành cho việc giảng dạy các kiến thức cơ bản về phát triển web cho người mới bắt đầu. Khóa học là một chương trình 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ới các chủ đề 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 trong các mô-đun dự án
- **Dự án thực tế**: Terrarium, Trò chơi gõ chữ, Tiện ích mở rộng trình duyệt, Trò chơi không gian, Ứng dụng ngân hàng, Trình chỉnh sửa mã, và Trợ lý chat AI
- **Bài kiểm tra tương tác**: 48 bài kiểm tra với 3 câu hỏi mỗi bài (đánh giá trước/sau bài học)
- **Hỗ trợ đa ngôn ngữ**: Dịch tự động hơn 50 ngôn ngữ qua GitHub Actions
- **Công nghệ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (cho các dự án AI)
- **Nội dung giáo dục**: 24 bài học có cấu trúc được tổ chức theo các mô-đun dự án
- **Dự án thực hành**: Terrarium, Trò chơi gõ phím, Tiện ích mở rộng trình duyệt, Trò chơi không gian, Ứng dụng ngân hàng, Trình chỉnh sửa mã và Trợ lý chat AI
- **Bài kiểm tra tương tác**: 48 bài kiểm tra với 3 câu hỏi mỗi bài (đánh giá trước và sau bài học)
- **Hỗ trợ đa ngôn ngữ**: Dịch tự động cho hơn 50 ngôn ngữ thông qua GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) được 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ác mô-đun Microsoft Learn](https://docs.microsoft.com/learn/)
- [Tài nguyên Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) đề xuất cho người học
- Các khóa học thêm: AI Generative, Khoa học dữ liệu, ML, IoT
### 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 file README tại:
Hướng dẫn chi tiết trong file README của các thư mục:
- `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
- `7-bank-project/README.md` - Ứng dụng ngân hàng với 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
- `6-space-game/README.md` - Phát triển trò chơi dựa trên Canvas
- `9-chat-project/README.md` - Dự án trợ lý chat AI
### Cấu trúc Monorepo
Mặc dù không phải monorepo truyền thống, kho lưu trữ này chứa nhiều dự án riêng biệt:
- Mỗi bài học là độc lập
- Các dự án không chia sẻ phụ thuộc
- Làm việc riêng từng dự án mà không ảnh hưởng nhau
- Clone toàn bộ kho để có trải nghiệm khoá học đầy đủ
Không phải monorepo kiểu truyền thống, kho này chứa nhiều dự án độc lập:
- Mỗi bài học là một đơn vị riêng biệt
- Các dự án không chia sẻ dependencies
- Làm việc trên từng dự án riêng biệt không ảnh hưởng dự án khác
- Clone toàn bộ repo để trải nghiệm toàn diện khóa học
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Tuyên bố từ chối trách nhiệm**:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ gốc của nó nên được coi là nguồn tin cậy chính thức. Đối với thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp do con người thực hiện. 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 diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng bản dịch tự động có thể chứa lỗi hoặc sai sót. Tài liệu gốc bằng ngôn ngữ nguyên bản của nó nên được coi là nguồn chính xác nhất. Đối với thông tin quan trọng, nên sử dụng dịch thuật chuyên nghiệp do con người thực hiện. Chúng tôi không chịu trách nhiệm đối với bất kỳ sự hiểu nhầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[](http://makeapullrequest.com)
[](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 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!
Học các 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 Microsoft Cloud Advocates tổ chức. Mỗi trong số 24 bài học sẽ đi sâu vào JavaScript, CSS, và HTML thông qua các dự án thực hành như terrarium, tiện ích 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 hành. Nâng cao kỹ năng và tối ưu khả năng ghi nhớ kiến thức của bạn với phương pháp học dựa trên dự án hiệu quả của chúng tôi. Bắt đầu hành trình lập trình của bạn ngay hôm nay!
> 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:
> Repository này bao gồm hơn 50 bản dịch ngôn ngữ làm cho dung lượng tải về tăng đáng kể. Để clone mà không có bản dịch, hãy dùng sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,42 +48,41 @@ Thực hiện các bước sau để bắt đầu sử dụng các tài nguyên
> 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.
> Điều này cung cấp cho bạn mọi thứ bạn cần để hoàn tất khóa học với tốc độ tải 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ợ, danh sách có tại [đây](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Nếu bạn muốn có thêm ngôn ngữ dịch hỗ trợ được liệt kê [ở đâ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?_
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.
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ụ học sinh và thậm chí cả 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ỳ khi 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ông báo - Thử thách mới Chế độ GitHub Copilot Agent để hoàn thành!
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ử thách mới được thêm vào, hãy tìm "GitHub Copilot Agent Challenge 🚀" trong hầu hết các chương. Đây là thử thách mới để bạn hoàn thành bằng cách sử dụng GitHub Copilot và Chế độ Agent. Nếu bạn chưa từng dùng Chế độ Agent trước đây, nó không chỉ tạo văn bản mà còn có thể tạo và chỉnh sửa tệp, chạy lệnh và hơn thế 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 AI Tạo Tác_
Dự án trợ lý AI mới vừa được thêm vào, xem tại [dự án](./9-chat-project/README.md)
Dự án trợ lý AI mới vừa được thêm, xem tại [dự án](./9-chat-project/README.md)
### 📣 Thông báo - _Chương Trình 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ề AI Tạo Tác cho JavaScript vừa được phát hành
Đừng bỏ lỡ chương trình Generative AI mới của chúng tôi!
Đừng bỏ lỡ chương trình AI Tạo Tác 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!
> **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)!
> **Giáo viên**, chúng tôi đã [bao gồm một số đề xuất](for-teachers.md) về cách sử dụng chương trình học này. Chúng tôi rất mong nhận phản hồi từ bạn [trong diễn đàn thảo luận của chúng tôi](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Người học](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 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.
**[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 giờ học và tiếp tục với việc đọc tài liệu bài giảng, hoàn thành các hoạt động khác nhau và kiểm tra hiểu biết của bạn bằng bài kiểm tra sau giờ học.
Để 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.
Để nâng cao trải nghiệm học tập, hãy kết nối với bạn bè cùng học để làm dự án cùng nhau! Việc 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 phối viên của chúng tôi sẽ có mặt để trả lời câu hỏi của bạn.
Để 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.
Để mở rộng kiến thức, chúng tôi rất khuyên bạn khám phá [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) để có thêm tài liệu học.
### 📋 Thiết lập môi trường làm việc
### 📋 Thiết lập môi trường của bạn
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).
Chương trình này có một môi trường phát triển sẵn sàng để dùng! Khi bắt đầu, bạn có thể chọn chạy chương trình trong [Codespace](https://github.com/features/codespaces/) (_một môi trường dựa trên trình duyệt, không cần cài đặt_), hoặc trên máy tính của bạn bằng một trình chỉnh sửa 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, 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.
#### Tạo repository của bạn
Để bạn dễ dàng lưu công việc, nên tạo bản sao repository này cho riêng bạn. Bạn có thể làm điều này bằng cách nhấp nút **Use this template** ở đầu trang. Điều này sẽ tạo một repository mới trong tài khoản GitHub của bạn với bản sao chương trình học.
Làm theo các bước sau:
1. **Tạo bản sao kho lưu trữ (Fork Repository)**: Nhấp vào nút "Fork" ở góc trên bên phải trang này.
Để 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.
Để chạy chương trình này trên máy tính của bạn, bạn sẽ cần một trình chỉnh sửa 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ụ Phát Triển](../../1-getting-started-lessons/1-intro-to-programming-languages), sẽ hướng dẫn bạn qua các lựa chọn khác nhau cho mỗi công cụ để bạn có thể chọn cái phù hợp nhất.
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:
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, nó cũng có [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) tích hợp sẵn. Bạn có thể tải Visual Studio Code [tại đây](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Sao chép kho lưu trữ của bạn về máy tính. Bạn có thể làm điều này bằng cách nhấn nút **Code** và sao chép URL:
[CodeSpace](./images/createcodespace.png)
@ -133,89 +132,90 @@ Chúng tôi khuyên dùng [Visual Studio Code](https://code.visualstudio.com/?WT
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**File** > **Open Folder** và chọn thư mục bạn vừa sao chép.
2. Mở thư mục trong Visual Studio Code. Bạn có thể làm điều này bằng cách nhấn**File** > **Open Folder** và chọn thư mục bạn vừa sao chép.
> Các tiện ích mở rộng được khuyến nghị cho Visual Studio Code:
> Các tiện ích mở rộng Visual Studio Code được khuyên dùng:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - để xem trước các trang HTML trong Visual Studio Code
> * [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
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - giúp bạn viết mã nhanh hơn
## 📂 Mỗi bài học bao gồm:
- sketchnote tùy chọn
- video bổ sung tùy chọn
- bản ghi chú vẽ tay tùy chọn
- video bổ trợ 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ự án, hướng dẫn từng bước cách xây dựng dự án
- với bài học dự án, hướng dẫn từng bước để 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/)
- đọc thêm bổ trợ
- bài tập
- [bài kiểm tra sau bài học](https://ff-quizzes.netlify.app/web/)
> **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`.
> **Lưu ý về các bài kiểm tra**: Tất cả các bài kiểm tra đều đượ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 3 câu hỏi. Chúng có sẵn [ở đây](https://ff-quizzes.netlify.app/web/) ứng dụng kiểm tra có thể chạy cục bộ hoặc được triển khai lên Azure; hãy làm theo hướng dẫn trong thư mục `quiz-app`.
## 🗃️ Các bài học
| | Tên dự án | Khái niệm được dạy | Mục tiêu học tập | Bài học liên quan | Tác giả |
| 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 |
| | Tên Dự Án | Các Khái Niệm Được Giảng 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 môn | Tìm hiểu cơ bản về nền tảng của hầu hết ngôn ngữ lập trình và về phần mềm hỗ trợ các nhà phát triển chuyên nghiệp | [Giới thiệu về Ngôn ngữ Lập trình và Công cụ chuyên môn](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Bắt Đầu | Kiến thức cơ bản về GitHub, làm việc theo nhóm | Cách sử dụng GitHub trong dự án, cách cộng tác với những người khác trên cùng mã nguồn | [Giới thiệu về GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Bắt Đầu | Khả năng tiếp cận | Tìm hiểu cơ bản về khả năng tiếp cận web | [Kiến thức cơ bản về Khả năng tiếp cận](./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 | [Kiểu Dữ liệu](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Cơ Bản | Hàm và Phương thức | Tìm hiểu về hàm và phương thức để quản lý luồng logic của ứng dụng | [Hàm và Phương thức](./2-js-basics/2-functions-methods/README.md) | Jasmine và Christopher |
| 06 | JS Cơ Bản | Quyết định với JS | Tìm hiểu cách tạo điều kiện trong mã bằng các phương pháp ra quyết định | [Ra Quyết Định](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Cơ Bản | Mảng và Vòng lặp | Làm việc với dữ liệu sử dụng mảng và vòng lặp trong JavaScript | [Mảng và Vòng lặp](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | Thực hành HTML | Xây dựng HTML để tạo terrarium trực tuyến, tập trung vào xây dựng bố cục | [Giới thiệu về HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | Thực hành CSS | Xây dựng CSS để tạo kiểu cho terrarium trực tuyến, tập trung vào những kiến thức cơ bản về CSS bao gồm làm cho trang hiển thị responsive | [Giới thiệu về CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Đóng gói JavaScript, thao tác DOM | Xây dựng JavaScript để làm terrarium hoạt động như một giao diện kéo/thả, tập trung vào sử dụng closures và thao tác DOM | [Closures trong JavaScript, thao tác DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Xây dựng trò chơi đánh máy | Tìm hiểu cách sử dụng sự kiện bàn phím để điều khiển logic trong ứng dụng JavaScript của bạn | [Lập trình theo sự kiện](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Làm việc với trình duyệt | Tìm hiểu cách hoạt động của trình duyệt, lịch sử của chúng và cách tạo 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 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Xây dựng form, gọi API và lưu biến trong bộ nhớ cục bộ | Xây dựng các phần tử JavaScript của tiện ích mở rộng trình duyệt để gọi API sử dụng biến được lưu trong bộ nhớ cục bộ | [API, Form và Bộ nhớ cục bộ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Tiến trình nền trong trình duyệt, hiệu năng web | Sử dụng 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 | [Tiến trình nền và Hiệu năng](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Phát triển game nâng cao 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 về Phát triển Game Nâng cao](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Vẽ trên canvas | Tìm hiểu về Canvas API, dùng để vẽ các phần tử lên màn hình | [Vẽ trên Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Di chuyển các phần tử trên màn hình | Khám phá cách các phần tử có thể chuyển động sử dụng tọa độ Descartes và Canvas API | [Di chuyển các phần tử](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Phát hiện va chạm| Làm cho các phần tử va chạm và phản ứng với nhau bằng các phím nhấn, đồng thời cung cấp hàm cooldown để đảm bảo hiệu năng game | [Phát hiện Va chạm](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Giữ điểm số | 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 game | [Giữ điểm số](./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 game | Tìm hiểu về cách kết thúc và khởi động lại game, bao gồm dọn dẹp tài nguyên và đặt lại giá trị các biến | [Điều kiện kết thúc](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Mẫu HTML và Định tuyến trong Ứng dụng Web | Tìm hiểu cách tạo bộ khung kiến trúc website đa trang sử dụng định tuyến và mẫu HTML | [Mẫu HTML và Định tuyến](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Xây dựng Form Đăng nhập và Đăng ký | Tìm hiểu về xây dựng form và xử lý các quy trình xác thực | [Form](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Phương pháp lấy và sử dụng dữ liệu | Cách dữ liệu chảy vào và ra ứng dụng, cách lấy dữ liệu, lưu trữ và loại bỏ dữ liệu | [Dữ liệu](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Khái niệm Quản lý Trạng thái | Tìm hiểu cách ứng dụng giữ trạng thái và cách quản lý bằng lập trình | [Quản lý Trạng thái](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Làm việc với VScode | Tìm hiểu cách sử dụng trình 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 | [AI Assistants](./9-chat-project/README.md) | Làm việc với AI | Tìm hiểu cách xây dựng trợ lý AI của riêng bạn | [Dự án Trợ lý AI](./9-chat-project/README.md) | Chris |
## 🏫 Phương pháp giảng dạy
Chương trình học của chúng tôi được thiết kế với hai nguyên tắc sư phạm chính:
* học theo dự án
Chương trình học được thiết kế dựa trên hai nguyên tắc sư phạm chính:
* học qua dự án
* các bài kiểm tra thường xuyên
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.
Chương trình giảng dạy dạy các kiến thức nền tảng của JavaScript, HTML, và CSS, cũng như các công cụ và kỹ thuật mới nhất mà các nhà phát triển web hiện nay sử dụng. Học viên sẽ có cơ hội phát triển kinh nghiệm thực hành bằng cách xây dựng một 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 space-invader, và một ứng dụng ngân hàng cho doanh nghiệp. Cuối chuỗi bài học, học viên sẽ nắm vững kiến thức về phát triển web.
> 🎓 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ạn có thể học các bài học đầu tiên trong chương trình học này như một [Lộ trình Học](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) trên Microsoft Learn!
Bằng cách đảm bảo nội dung phù hợp với các dự án, quá trình học trở nên hấp dẫn hơn đố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.
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 thú vị hơn với học viên và tăng cường việc 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ề các kiến thức cơ bản JavaScript để giới thiệu các khái niệm, kèm theo một video trong bộ sưu tập "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", một số tác giả của video góp phần xây dựng chương trình này.
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.
Ngoài ra, một bài kiểm tra nhẹ nhàng trước lớp giúp học viên xác định mục tiêu học tập 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 này được thiết kế linh hoạt và vui nhộn, có thể học toàn bộ hoặc một phần. Các dự án bắt đầu đơn giản và ngày càng phức tạp hơn sau 12 tuần học.
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)".
Mặc dù chúng tôi cố tình tránh giới thiệu các framework JavaScript để tập trung vào kỹ năng cơ bản cần thiết cho lập trình viên web trước khi chuyển sang học framework, bước tiếp theo tốt để hoàn thành chương trình này là học về Node.js qua bộ video khác: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Tham khảo [Quy tắc ứng xử](CODE_OF_CONDUCT.md) và [Hướng dẫn đóng góp](CONTRIBUTING.md) của chúng tôi. Chúng tôi rất hoan nghênh các phản hồi mang tính xây dựng của bạn!
> Hãy tham khảo [Quy tắc ứng xử](CODE_OF_CONDUCT.md) và [Đóng góp](CONTRIBUTING.md) của chúng tôi. Chúng tôi hoan nghênh những góp ý xây dựng của bạn!
## 🧭 Truy cập ngoại tuyến
## 🧭 Truy cập ngoài mạng
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`.
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/#/). Tạo nhánh (fork) kho này, [cài đặt Docsify](https://docsify.js.org/#/quickstart) trên máy cục bộ, và sau đó trong thư mục gốc của kho này, gõ `docsify serve`. Trang web 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).
Một tệp PDF của tất cả các bài học có thể được tìm thấy [ở đây](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Các Khóa Học Khác
Nhóm của chúng tôi cũng sản xuất các khóa học khác! Hãy xem:
Nhóm của chúng tôi sản xuất các khóa học khác! Hãy xem qua:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -232,7 +232,7 @@ 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:
---
### Chuỗi AI Sinh Tạo
### Dòng 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)
@ -251,7 +251,7 @@ 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:
---
### Chuỗi Copilot
### Dòng 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)
@ -259,11 +259,11 @@ 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:
## Nhận Trợ Giúp
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.
Nếu bạn bị mắc kẹt 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 các học viên khác và các nhà phát triển có kinh nghiệm trong các cuộc thảo luận về MCP. Đây là một cộng đồng hỗ trợ nơi các câu hỏi được chào đón và kiến thức được chia sẻ một cách tự do.
@ -274,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ố 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.
**Tuyên bố từ chối trách nhiệm**:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi nỗ lực đảm bảo độ chính xác, xin lưu ý rằng 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ữ mẹ đẻ nên được xem là nguồn tham khảo chính xác nhất. Đối với thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp 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 hay giải thích sai nào phát sinh từ việc sử dụng bản dịch này.
localizeflow[bot]
6 days ago