diff --git a/translations/he/.co-op-translator.json b/translations/he/.co-op-translator.json index 8637563e8..86c3a437c 100644 --- a/translations/he/.co-op-translator.json +++ b/translations/he/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-04T02:13:56+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T13:43:45+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "he" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:49:11+00:00", + "translation_date": "2026-03-06T13:51:56+00:00", "source_file": "AGENTS.md", "language_code": "he" }, @@ -516,8 +516,8 @@ "language_code": "he" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:43:17+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T13:40:37+00:00", "source_file": "README.md", "language_code": "he" }, diff --git a/translations/he/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/he/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 30fd8ee63..f8a3424e6 100644 --- a/translations/he/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/he/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,181 @@ -# מבוא לשפות תכנות וכלי פיתוח מודרניים +# مقدمة לשפות תכנות וכלים מודרניים למפתחים -היי שם, מפתח עתידי! 👋 אפשר לספר לך משהו שעדיין גורם לי להתרגש כל יום מחדש? אתה עומד לגלות שתכנות זה לא רק מחשבים – זה כמו לקבל כוחות-על שמאפשרים לך להפוך את הרעיונות הכי פרועים שלך למציאות! +היי שם, מפתח עתידי! 👋 אפשר לספר לך משהו שעדיין מצמרר אותי כל יום? אתה עומד לגלות שתכנות זה לא רק על מחשבים – זה על לקבל כוחות-על אמיתיים להביא את הרעיונות הפרועים שלך לחיים! -אתה מכיר את הרגע הזה שבו אתה משתמש באפליקציה האהובה עליך והכול פשוט עובד בצורה מושלמת? כשאתה לוחץ על כפתור ומשהו קסום קורה שגורם לך לחשוב "וואו, איך הם עשו את זה?" ובכן, מישהו בדיוק כמוך – כנראה יושב בבית קפה אהוב עליו ב-2 בלילה עם האספרסו השלישי שלו – כתב את הקוד שיצר את הקסם הזה. והנה מה שיפיל אותך מהכיסא: בסוף השיעור הזה, לא רק שתבין איך הם עשו את זה, אלא גם תשתוקק לנסות בעצמך! +אתה יודע את הרגע כשאתה משתמש באפליקציה האהובה עליך והכל פשוט מתאים בצורה מושלמת? כשאתה לוחץ על כפתור וקרה משהו קסום שגורם לך לחשוב "וואו, איך הם עשו את זה?" ובכן, מישהו בדיוק כמוך – כנראה יושב בבית הקפה האהוב עליו בשעה 2 לפנות בוקר עם אספרסו שלישי – כתב את הקוד שיצר את הקסם הזה. והנה מה שיפיל אותך מהרגליים: בסוף השיעור הזה, לא רק שתבין איך הם עשו את זה, אלא שגם תבער לנסות את זה בעצמך! -תראה, אני לגמרי מבין אם תכנות מרגיש לך מפחיד כרגע. כשאני התחלתי, באמת חשבתי שצריך להיות גאון מתמטי או להתחיל לתכנת מגיל חמש. אבל הנה מה ששינה לי את התפיסה לגמרי: תכנות זה בדיוק כמו ללמוד לנהל שיחות בשפה חדשה. מתחילים מ"שלום" ו"תודה", ואז מתקדמים להזמנת קפה, ולפני שאתה שם לב, אתה מנהל דיונים פילוסופיים עמוקים! רק שבמקרה הזה, אתה מנהל שיחות עם מחשבים, ובכנות? הם השותפים הכי סבלניים לשיחה שתפגוש – הם אף פעם לא שופטים את הטעויות שלך ותמיד מוכנים לנסות שוב! +תראה, אני לגמרי מבין אם התכנות מרגיש מפחיד כרגע. כשאני התחלתי, באמת חשבתי שאתה צריך להיות איזה גאון מתמטי או לקודד מאז שבילית חמש שנים. אבל הנה מה ששינה לגמרי את נקודת המבט שלי: תכנות זה בדיוק כמו ללמוד לנהל שיחות בשפה חדשה. אתה מתחיל ב"שלום" ו"תודה," ואז מגיע להזמין קפה, ולפני שאתה מבין, אתה מנהל שיחות פילוסופיות עמוקות! רק שבמקרה הזה, אתה מנהל שיחות עם מחשבים, ובאמת? הם השותפים הכי סבלניים לשיחה שתפגוש – הם אף פעם לא שופטים את הטעויות שלך ותמיד שמחים לנסות שוב! -היום, אנחנו הולכים לחקור את הכלים המדהימים שהופכים את פיתוח האינטרנט המודרני לא רק לאפשרי, אלא לממכר ברצינות. אני מדבר על אותם עורכים, דפדפנים ותהליכי עבודה שהמפתחים בנטפליקס, ספוטיפיי, ובסטודיו האפליקציות האהוב עליך משתמשים בהם כל יום. והנה החלק שיגרום לך לרקוד משמחה: רוב הכלים המקצועיים האלה, ברמת תעשייה, הם לגמרי בחינם! +היום אנחנו הולכים לחקור את הכלים המדהימים שהופכים את פיתוח האינטרנט המודרני לא רק לאפשרי, אלא גם ממכר ברצינות. אני מדבר על אותם עורכים, דפדפנים וזרמי עבודה שפותחים בנטפליקס, ספוטיפיי והסטודיו האינדי האהוב עליך משתמשים בהם כל יום. והנה החלק שיגרום לך לרקוד מרוצה: רוב הכלים האלו שהם ברמת מקצוענים ולפני תעשייה הם לגמרי חינמיים! -![מבוא לתכנות](../../../../translated_images/he/webdev101-programming.d6e3f98e61ac4bff.webp) -> איור מאת [Tomomi Imura](https://twitter.com/girlie_mac) +![Intro Programming](../../../../translated_images/he/webdev101-programming.d6e3f98e61ac4bff.webp) +> שיקנוט מאת [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You - section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + title המסע שלך בתכנות היום + section גלה + מה זה תכנות: 5: You + שפות תכנות: 4: You + סקירת כלים: 5: You + section חקור + עורכי קוד: 4: You + דפדפנים וכלי פיתוח: 5: You + שורת פקודה: 3: You + section תרגל + בלש שפות: 4: You + חקר כלים: 5: You + חיבור לקהילה: 5: You ``` - ## בוא נראה מה אתה כבר יודע! -לפני שנקפוץ לדברים המהנים, אני סקרן – מה אתה כבר יודע על עולם התכנות הזה? ואם אתה מסתכל על השאלות וחושב "אין לי מושג על שום דבר מזה", זה לא רק בסדר, זה מושלם! זה אומר שאתה בדיוק במקום הנכון. תחשוב על החידון הזה כמו מתיחות לפני אימון – אנחנו רק מחממים את שרירי המוח! +לפני שנתקפץ לדברים הכיפיים, אני סקרן – מה כבר אתה יודע על עולם התכנות הזה? ואם אתה מסתכל על השאלות האלה וחושב "אין לי בכלל מושג על כל זה," זה לא רק בסדר, זה מושלם! זה אומר שאתה במקום המתאים בדיוק. תחשוב על החידון הזה כמו התמתחות לפני אימון – אנחנו פשוט מחממים את השרירים של המוח! -[קח את חידון ההכנה לשיעור](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[עשו את החידון לפני השיעור](https://ff-quizzes.netlify.app/web/) -## ההרפתקה שאנחנו עומדים לצאת אליה יחד -אוקיי, אני באמת מתרגש ממה שאנחנו הולכים לחקור היום! ברצינות, הלוואי שיכולתי לראות את הפנים שלך כשחלק מהקונספטים האלה יתחברו. הנה המסע המדהים שאנחנו יוצאים אליו יחד: +## ההרפתקה שאנחנו עומדים לעשות יחד -- **מה זה בעצם תכנות (ולמה זה הדבר הכי מגניב שיש!)** – נגלה איך קוד הוא בעצם הקסם הבלתי נראה שמניע את כל מה שסביבך, מהשעון המעורר שיודע איכשהו שזה יום שני בבוקר ועד האלגוריתם שממליץ לך על הסרטים המושלמים בנטפליקס. -- **שפות תכנות והאישיות המדהימה שלהן** – תאר לעצמך שאתה נכנס למסיבה שבה לכל אדם יש כוחות-על שונים ודרכים ייחודיות לפתור בעיות. זה בדיוק העולם של שפות התכנות, ואתה הולך להתאהב בהן! -- **אבני הבניין הבסיסיות שמאפשרות קסם דיגיטלי** – תחשוב על זה כמו ערכת LEGO יצירתית אולטימטיבית. ברגע שתבין איך החלקים האלה מתחברים, תבין שאתה יכול לבנות כל דבר שהדמיון שלך חולם עליו. -- **כלים מקצועיים שיגרמו לך להרגיש כאילו קיבלת שרביט קסמים** – אני לא מגזים כאן – הכלים האלה באמת יגרמו לך להרגיש שיש לך כוחות-על, והחלק הכי טוב? אלה אותם כלים שהמקצוענים משתמשים בהם! +טוב, אני באמת מתרגש ממה שאנחנו הולכים לגלות היום! בכנות, הייתי רוצה לראות את פניך כשלחלק מהרעיונות האלו פתאום יתחברו. זו המסע המדהים שאנחנו לוקחים יחד: -> 💡 **הנה העניין**: אל תחשוב אפילו לנסות לזכור הכול היום! כרגע, אני רק רוצה שתרגיש את הניצוץ של ההתרגשות לגבי מה שאפשרי. הפרטים יידבקו באופן טבעי כשנתרגל יחד – ככה למידה אמיתית מתרחשת! +- **מה זה תכנות בעצם (ולמה זה הדבר הכי מגניב אי פעם!)** – נגלה איך קוד הוא בעצם הקסם הבלתי נראה שמפעיל את כל מה שסביבך, מהאזעקה שיודעת שזה יום שני בבוקר ועד האלגוריתם שממליץ בדיוק לך בנטפליקס +- **שפות התכנות ואישיותן המדהימות** – תדמיין שאתה נכנס למסיבה שכל אחד בה עם כוחות-על שונים ושיטות שונות לפתור בעיות. ככה העולם של שפות תכנות, ואתה הולך לאהוב להכיר אותן! +- **האבנים הבסיסיות שגורמות לקסם הדיגיטלי לקרות** – תחשוב על זה כמו ערכת לגו יצירתית על-סף – ברגע שאתה מבין איך החלקים האלו מתחברים, תבין שאתה יכול לבנות כל מה שהדמיון שלך חולם עליו +- **כלים מקצועיים שיגרמו לך להרגיש כמו שקיבלת שרביט קוסם** – אני לא מגזים פה – הכלים האלו באמת יגרמו לך להרגיש שיש לך כוחות-על, והחלק הכי טוב? אלה אותם כלים שהמקצוענים משתמשים בהם! -> אתה יכול לקחת את השיעור הזה ב-[Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> 💡 **הנה הדבר**: אל תחשוב אפילו לנסות לשנן הכל היום! כרגע, אני רק רוצה שתחוש את הניצוץ של ההתרגשות לגבי מה אפשרי. הפרטים יידבקו בטבעיות כשנתרגל יחד – כך באמת לומדים! -## אז מה זה בעצם *תכנות*? +> אתה יכול לקחת את השיעור הזה ב[Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -טוב, בואו ניגש לשאלה של מיליון הדולר: מה זה באמת תכנות? +## אז מה בדיוק *זה* תכנות? -אני אספר לך סיפור ששינה לגמרי את איך שאני חושב על זה. בשבוע שעבר ניסיתי להסביר לאמא שלי איך להשתמש בשלט החדש של הטלוויזיה החכמה שלנו. תפסתי את עצמי אומר דברים כמו "לחצי על הכפתור האדום, אבל לא הכפתור האדום הגדול, הכפתור האדום הקטן בצד שמאל... לא, השמאל השני שלך... אוקיי, עכשיו תחזיקי אותו לשתי שניות, לא אחת, לא שלוש..." מוכר? 😅 +טוב, בוא נתמודד עם השאלה במיליון דולר: מה זה תכנות, באמת? -זה תכנות! זו האמנות של לתת הוראות מפורטות, שלב אחר שלב, למשהו שהוא מאוד חזק אבל צריך שהכול יוסבר בצורה מושלמת. רק שבמקום להסביר לאמא שלך (שיכולה לשאול "איזה כפתור אדום?!"), אתה מסביר למחשב (שפשוט עושה בדיוק מה שאמרת, גם אם מה שאמרת לא בדיוק מה שהתכוונת). +אני אתן לך סיפור ששינה לגמרי איך אני חושב על זה. בשבוע שעבר, ניסיתי להסביר לאמא שלי איך להשתמש בשלט החדש שלנו לטלוויזיה החכמה. תפסתי את עצמי אומר דברים כמו "לחצי על הכפתור האדום, אבל לא הכפתור האדום הגדול, הכפתור האדום הקטן משמאל... לא, הצד השני שלך... טוב, עכשיו החזקי אותו לשתי שניות, לא אחת, לא שלוש..." נשמע מוכר? 😅 -הנה מה שהדהים אותי כשגיליתי את זה: מחשבים הם בעצם די פשוטים בבסיסם. הם מבינים רק שני דברים – 1 ו-0, שזה בעצם רק "כן" ו"לא" או "דלוק" ו"כבוי". זהו! אבל כאן מגיע הקסם – אנחנו לא צריכים לדבר ב-1 ו-0 כאילו אנחנו במטריקס. כאן נכנסות **שפות התכנות** לתמונה. הן כמו מתורגמן הכי טוב בעולם שלוקח את המחשבות האנושיות שלך ומתרגם אותן לשפת מחשב. +זה תכנות! זו האמנות לתת הוראות מפורטות שלב-אחרי-שלב למשהו מאוד חזק אבל צריך את כל הפרטים בדיוק מושלם. רק שבמקום להסביר לאמא שלך (שאולי שואלת "איזה כפתור אדום?!"), אתה מסביר למחשב (שפשוט עושה מה שאתה אומר, גם אם זה לא בדיוק מה שהתכוונת). -והנה מה שעדיין גורם לי לצמרמורת כל בוקר כשאני מתעורר: כל דבר דיגיטלי בחיים שלך התחיל עם מישהו בדיוק כמוך, כנראה יושב בפיג'מה עם כוס קפה, מקליד קוד במחשב הנייד שלו. הפילטר באינסטגרם שגורם לך להיראות מושלם? מישהו כתב את זה. ההמלצה שהובילה אותך לשיר החדש האהוב עליך? מפתח בנה את האלגוריתם הזה. האפליקציה שעוזרת לך לחלק את החשבון בארוחת ערב עם חברים? כן, מישהו חשב "זה מעצבן, אני בטוח יכול לפתור את זה" ואז... הוא עשה את זה! +וזה מה שהפיל אותי מהרגליים כשאני למדתי את זה לראשונה: מחשבים בעצם די פשוטים בבסיס שלהם. הם מבינים רק שתי דברים – 1 ו-0, שזה בעצם "כן" ו"לא" או "דלוק" ו"כבה." זהו! אבל כאן מתחיל הקסם – אנחנו לא צריכים לדבר ב-1 ו-0 כאילו אנחנו במטריקס. פה שפות תכנות באות להצלה. הן כמו המתרגם הכי טוב בעולם שלוקח את המחשבות האנושיות והרגילות שלך ומתרגם אותן לשפת המחשב. -כשאתה לומד לתכנת, אתה לא רק רוכש מיומנות חדשה – אתה הופך לחלק מהקהילה המדהימה הזו של פותרי בעיות שמבלים את ימיהם במחשבה, "מה אם אני יכול לבנות משהו שישפר את היום של מישהו קצת יותר?" בכנות, יש משהו יותר מגניב מזה? +והנה מה שעדיין מצמרר אותי כל בוקר כשאני קם: פשוט *הכל* הדיגיטלי בחייך התחיל ממישהו בדיוק כמוך, כנראה יושב בפיג'מה עם כוס קפה, מקליד קוד במחשב הנייד שלו. מסנן האינסטגרם שגורם לך להיראות מושלם? מישהו כתב את זה. ההמלצה שהובילה אותך לשיר האהוב החדש? מפתח בנה את האלגוריתם הזה. האפליקציה שעוזרת לך לחלק חשבון ארוחת ערב עם חברים? כן, מישהו חשב "זה מעצבן, בטח אני יכול לתקן את זה" ואז... הוא עשה את זה! -✅ **ציד עובדות כיפי**: הנה משהו מגניב לחפש כשיש לך רגע פנוי – מי לדעתך היה המתכנת הראשון בעולם? אני אתן לך רמז: זה אולי לא מי שאתה מצפה! הסיפור מאחורי האדם הזה הוא מרתק ומראה שתכנות תמיד היה קשור ליצירתיות ולחשיבה מחוץ לקופסה. +כשאתה לומד לתכנת, אתה לא רק רוכש מיומנות חדשה – אתה הופך לחלק מהקהילה המדהימה של פותרי הבעיות שמבלים את ימיהם בחשיבה, "מה אם אוכל לבנות משהו שישפר את היום של מישהו קצת?" באמת, יש משהו מגניב מזה? -### 🧠 **זמן לבדוק: איך אתה מרגיש?** +✅ **משימת עובדה מהנה**: הנה משהו ממש מגניב לחפש כשיש לך רגע פנוי – מי לדעתך היה מתכנת המחשב הראשון בעולם? אני אתן לך רמז: זה אולי לא מי שאתה מצפה! הסיפור מאחורי האדם הזה מרתק ומראה שתכנות תמיד היה על יצירתיות בפתרון בעיות וחשיבה מחוץ לקופסה. -**קח רגע לחשוב:** -- האם הרעיון של "לתת הוראות למחשבים" ברור לך עכשיו? -- האם אתה יכול לחשוב על משימה יומיומית שהיית רוצה להפוך לאוטומטית באמצעות תכנות? -- אילו שאלות עולות לך בראש לגבי כל עניין התכנות הזה? +### 🧠 **זמן בדיקה: איך אתה מרגיש?** + +**קח רגע להרהר:** +- האם ההבנה של "לתת הוראות למחשבים" הגיונית לך עכשיו? +- האם אתה יכול לחשוב על משימה יומית שתרצה לאוטומט בעזרת תכנות? +- אילו שאלות עולות לך בראש לגבי כל נושא התכנות הזה? -> **זכור**: זה לגמרי נורמלי אם חלק מהקונספטים עדיין לא ברורים לך. ללמוד תכנות זה כמו ללמוד שפה חדשה – לוקח זמן למוח לבנות את הקשרים הנכונים. אתה עושה עבודה נהדרת! +> **זכור**: זה לגמרי טבעי אם חלק מהקונספטים עדיין מרגישים מעורפלים כרגע. ללמוד תכנות זה כמו ללמוד שפה חדשה – לוקח זמן למוח שלך לבנות את המסלולים העצביים. אתה עושה עבודה מעולה! ## שפות תכנות הן כמו טעמים שונים של קסם -אוקיי, זה הולך להישמע מוזר, אבל תישאר איתי – שפות תכנות הן כמו סוגים שונים של מוזיקה. תחשוב על זה: יש לך ג'אז, שהוא חלק ומאולתר, רוק שהוא עוצמתי וישיר, קלאסי שהוא אלגנטי ומובנה, והיפ-הופ שהוא יצירתי ומלא ביטוי. לכל סגנון יש את האווירה שלו, את הקהילה של מעריצים נלהבים, וכל אחד מהם מושלם למצבי רוח ואירועים שונים. +טוב, זה הולך להישמע מוזר, אבל תתמיד איתי – שפות תכנות הן הרבה כמו סוגי מוזיקה שונים. תחשוב על זה: יש לך ג'אז שזורם ואימפרוביזטיבי, רוק חזק וישיר, קלאסי אלגנטי ומסודר, והיפ-הופ יצירתי ומביע. לכל סגנון יש אווירה משלו, קהילה של מעריצים מושקעים, וכל אחד מתאים למצבי רוח ואירועים שונים. -שפות תכנות עובדות בדיוק אותו הדבר! אתה לא תשתמש באותה שפה כדי לבנות משחק מובייל כיפי כמו שתשתמש כדי לנתח כמויות עצומות של נתוני אקלים, בדיוק כמו שלא תנגן מטאל כבד בשיעור יוגה (טוב, ברוב שיעורי היוגה בכל אופן! 😄). +שפות תכנות עובדות באותו אופן! לא היית משתמש באותה שפה לבניית משחק כיף למובייל כמו שתשתמש לניתוח כמויות עצומות של נתוני אקלים, בדיוק כפי שלא תשמיע מטאל קשה בשיעור יוגה (טוב, רוב שיעורי היוגה בכל מקרה! 😄). -אבל הנה מה שמדהים אותי כל פעם מחדש כשאני חושב על זה: השפות האלה הן כמו שיש לך את המתרגם הכי סבלני ומבריק בעולם שיושב ממש לידך. אתה יכול להביע את הרעיונות שלך בצורה שנראית טבעית למוח האנושי שלך, והן מטפלות בכל העבודה המורכבת של תרגום זה לשפת המחשב. זה כמו שיש לך חבר שמדבר בצורה מושלמת גם "יצירתיות אנושית" וגם "לוגיקה מחשבית" – והוא אף פעם לא מתעייף, אף פעם לא צריך הפסקות קפה, ואף פעם לא שופט אותך על כך ששאלת את אותה שאלה פעמיים! +אבל הנה מה שגורם לי להתפעל כל פעם שאני חושב על זה: השפות האלו הן כמו התרגום הכי סבלני וברור בעולם שיושב בדיוק לידך. אתה יכול להביע את הרעיונות שלך בצורה שמרגישה טבעית למוח האנושי שלך, והן מטפלות בכל העבודה המורכבת של תרגום זה ל-1 ו-0 שהמחשבים באמת מבינים. זה כמו להיות עם חבר שרה חריף בשתי השפות – "יצירתיות אנושית" ו"לוגיקת מחשב" – והם אף פעם לא מתעייפים, לא צריכים הפסקות קפה, ולא שופטים אותך כשאתה שואל את אותה השאלה פעמיים! -### שפות תכנות פופולריות והשימושים שלהן +### שפות תכנות פופולריות ושימושיהן ```mermaid mindmap - root((Programming Languages)) + root((שפות תכנות)) Web Development JavaScript - Frontend Magic - Interactive Websites + קסם הצד הקדמי + אתרי אינטראקטיב TypeScript - JavaScript + Types - Enterprise Apps + JavaScript + טיפוסים + אפליקציות ארגוניות Data & AI Python - Data Science - Machine Learning - Automation + מדעי הנתונים + למידת מכונה + אוטומציה R - Statistics - Research + סטטיסטיקה + מחקר Mobile Apps Java - Android - Enterprise + אנדרואיד + ארגוני Swift iOS - Apple Ecosystem + מערכת אקולוגית של אפל Kotlin - Modern Android - Cross-platform + אנדרואיד מודרני + רב-פלטפורמי Systems & Performance C++ - Games - Performance Critical + משחקים + ביצועים קריטיים Rust - Memory Safety - System Programming + בטיחות זיכרון + תכנות מערכת Go - Cloud Services - Scalable Backend + שירותי ענן + שרת אחורי מדרגי ``` - -| שפה | הכי טוב ל... | למה היא פופולרית | +| שפה | הטובה ביותר ל- | למה היא פופולרית | |----------|----------|------------------| -| **JavaScript** | פיתוח אתרים, ממשקי משתמש | פועלת בדפדפנים ומפעילה אתרים אינטראקטיביים | -| **Python** | מדעי הנתונים, אוטומציה, AI | קלה לקריאה ולמידה, ספריות חזקות | -| **Java** | אפליקציות ארגוניות, אפליקציות אנדרואיד | עצמאית מפלטפורמה, יציבה למערכות גדולות | -| **C#** | אפליקציות חלונות, פיתוח משחקים | תמיכה חזקה באקוסיסטם של מיקרוסופט | -| **Go** | שירותי ענן, מערכות אחוריות | מהירה, פשוטה, מעוצבת למחשוב מודרני | +| **JavaScript** | פיתוח ווב, ממשקי משתמש | רצה בדפדפנים ומאפשרת אתרי אינטראקטיביים | +| **Python** | מדעי הנתונים, אוטומציה, AI | קריאה ולמידה קלים, ספריות עוצמתיות | +| **Java** | יישומי ארגונים, אפליקציות אנדרואיד | עצמאית לפלטפורמה, עמידה למערכות גדולות | +| **C#** | אפליקציות ווינדוס, פיתוח משחקים | תמיכה חזקה מאקוסיסטם מיקרוסופט | +| **Go** | שירותי ענן, מערכות backend | מהירה, פשוטה, עוצבה למחשוב מודרני | -### שפות ברמה גבוהה מול שפות ברמה נמוכה +### שפות ברמה גבוהה לעומת ברמה נמוכה -אוקיי, זה היה באמת הקונספט ששבר לי את המוח כשאני התחלתי ללמוד, אז אני הולך לשתף את האנלוגיה שסוף סוף גרמה לי להבין את זה – ואני באמת מקווה שזה יעזור גם לך! +טוב, הכנה כנה: זה היה הקונספט ששבר לי את המוח כשהתחלתי ללמוד, אז אני אספר את האנלוגיה שאחרון שעשתה לי את הקליק – ואני ממש מקווה שהיא יעילה גם עבורך! -תאר לעצמך שאתה מבקר במדינה שבה אתה לא מדבר את השפה, ואתה נואש למצוא את השירותים הקרובים (כולנו היינו שם, נכון? 😅): +תדמיין שאתה מבקר במדינה שאינך מדבר את השפה שלה, ואתה חייב למצוא את השירותים הכי קרובים (כולנו היינו שם, נכון? 😅): -- **תכנות ברמה נמוכה** זה כמו ללמוד את הדיאלקט המקומי כל כך טוב שאתה יכול לשוחח עם הסבתא שמוכרת פירות בפינה באמצעות רפרנסים תרבותיים, סלנג מקומי ובדיחות פנימיות שרק מישהו שגדל שם יבין. מרשים מאוד ויעיל להפליא... אם במקרה אתה שולט! אבל די מכריע כשאתה רק מנסה למצוא שירותים. +- **תכנות ברמה נמוכה** זה כמו ללמוד את הניב המקומי כל כך טוב שאתה יכול לשוחח עם הסבתא שמוכרת פירות בפינה באמצעות רפרנסים תרבותיים, סלנג מקומי ובדיחות פנימיות שרק מי שגדל שם יבין. מרשים מאוד ויעיל... אם אתה שולט! אבל די מתסכל כשכל מה שאתה מנסה זה למצוא שירותים. -- **תכנות ברמה גבוהה** זה כמו שיש לך את החבר המקומי המדהים שפשוט מבין אותך. אתה יכול לומר "אני באמת צריך למצוא שירותים" באנגלית פשוטה, והוא מטפל בכל התרגום התרבותי ונותן לך הוראות בצורה שמובנת למוח הלא-מקומי שלך. +- **תכנות ברמה גבוהה** זה כמו שיש לך את החבר המקומי הנהדר הזה שמבין אותך. אתה יכול לומר "אני ממש צריך למצוא שירותים" באנגלית פשוטה, והוא מתרגם את כל הקונטקסט התרבותי ונותן לך הוראות בצורה שמגיעה טוב למוח הלא מקומי שלך. -במונחי תכנות: -- **שפות ברמה נמוכה** (כמו Assembly או C) מאפשרות לך לנהל שיחות מפורטות להפליא עם החומרה של המחשב, אבל אתה צריך לחשוב כמו מכונה, שזה... טוב, בוא נגיד שזה שינוי מחשבתי די גדול! -- **שפות ברמה גבוהה** (כמו JavaScript, Python או C#) מאפשרות לך לחשוב כמו בן אדם בזמן שהן מטפלות בכל שפת המכונה מאחורי הקלעים. בנוסף, יש להן קהילות מאוד מזמינות מלאות באנשים שזוכרים איך זה להיות חדש ורוצים באמת לעזור! +בתחום התכנות: +- **שפות ברמה נמוכה** (כמו Assembly או C) מאפשרות לך לנהל שיחות מפורטות מאוד עם חומרת המחשב האמיתית, אבל אתה צריך לחשוב כמו מכונה, שזה... טוב, בוא נגיד זה שינוי מנטלי גדול! +- **שפות ברמה גבוהה** (כמו JavaScript, Python או C#) מאפשרות לך לחשוב כמו בן אדם בזמן שהן מטפלות בכל שפת המכונה מאחורי הקלעים. בנוסף, יש להן קהילות מאוד תומכות מלאות בבני אדם שזוכרים איך היה להיות חדש ורוצים לעזור באמת! -נחש אילו אני הולך להציע לך להתחיל איתן? 😉 שפות ברמה גבוהה הן כמו גלגלי עזר שאתה אף פעם לא באמת רוצה להוריד כי הן הופכות את כל החוויה להרבה יותר מהנה! +נחש מה אני אמליץ להתחיל איתו? 😉 שפות ברמה גבוהה הן כמו גלגלי אימון שאתה אף פעם באמת לא רוצה לזרוק כי הן עושות את כל החוויה הרבה יותר מהנה! ```mermaid flowchart TB - A["👤 Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["👤 מחשבת האדם:
'אני רוצה לחשב מספרי פיבונאצ׳י'"] --> B{בחר רמת שפה} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + B -->|High-Level| C["🌟 JavaScript/Python
קל לקריאה ולכתיבה"] + B -->|Low-Level| D["⚙️ Assembly/C
שליטה ישירה בחומרה"] - C --> E["📝 Write: fibonacci(10)"] - D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 כתוב: fibonacci(10)"] + D --> F["📝 כתוב: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer Understanding:
Translator handles complexity"] + E --> G["🤖 הבנת מחשב:
המתרגם מטפל במורכבות"] F --> G - G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 אותו תוצאה:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### תן לי להראות לך למה שפות ברמה גבוהה הרבה יותר ידידותיות -### תן לי להראות לך למה שפות ברמה גבוהה כל כך ידידותיות - -אוקיי, אני עומד להראות לך משהו שמדגים בצורה מושלמת למה התאהבתי בשפות ברמה גבוהה, אבל קודם – אני צריך שתבטיח לי משהו. כשאתה רואה את דוגמת הקוד הראשונה, אל תיבהל! זה אמור להיראות מאיים. זו בדיוק הנקודה שאני מנסה להבהיר! +טוב, אני עומד להראות לך משהו שמדגים בצורה מושלמת למה התאהבתי בשפות ברמה גבוהה, אבל קודם – אני צריך שתבטיח לי משהו. כשתראה את דוגמת הקוד הראשונה, אל תיבהל! זה אמור להיראות מפחיד. זה בדיוק הנקודה שאני מעלה! -אנחנו הולכים להסתכל על אותה משימה בדיוק שנכתבה בשני סגנונות שונים לחלוטין. שניהם יוצרים את מה שנקרא רצף פיבונאצ'י – זה דפוס מתמטי יפהפה שבו כל מספר הוא סכום של שני הקודמים לו: 0, 1, 1, 2, 3, 5, 8, 13... (עובדה מעניינת: תמצא את הדפוס הזה כמעט בכל מקום בטבע – ספירלות של זרעי חמנייה, דפוסי אצטרובלים, אפילו הדרך שבה גלקסיות נוצרות!) +אנחנו עומדים לראות את אותה המשימה בדיוק כתובה בשתי סגנונות שונים לחלוטין. שתיהן יוצרים את רצף פיבונאצ'י – זה דפוס מתמטי יפהפה שבו כל מספר הוא סכום שני הקודמים לו: 0, 1, 1, 2, 3, 5, 8, 13... (עובדה: תמצא את הדפוס הזה בכל מקום בטבע – ספירלות בזרעי חמניות, דפוסי אשכולות אורנים, אפילו באופן היווצרות גלקסיות!) -מוכן לראות את ההבדל? בוא נתחיל! +מוכן לראות את ההבדל? בוא נצא לדרך! -**שפה ברמה גבוהה (JavaScript) – ידידותית לאדם:** +**שפה ברמה גבוהה (JavaScript) – ידידותית לבני אדם:** ```javascript -// Step 1: Basic Fibonacci setup +// שלב 1: הגדרת פיבונאצ'י בסיסית const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**הנה מה שהקוד הזה עושה:** -- **הגדרת** קבוע שמציין כמה מספרי פיבונאצ'י אנחנו רוצים ליצור -- **אתחול** שני משתנים למעקב אחר המספר הנוכחי והבא ברצף -- **הגדרת** ערכי ההתחלה (0 ו-1) שמגדירים את דפוס פיבונאצ'י +**מה שהקוד הזה עושה:** +- **הצהרת** קבוע לציון כמה מספרים בפיבונאצ'י אנחנו רוצים לייצר +- **אתחול** שני משתנים למעקב אחרי המספר הנוכחי והמספר הבא ברצף +- **הגדרת** הערכים ההתחלתיים (0 ו-1) שמגדירים את דפוס פיבונאצ'י - **הצגת** הודעת כותרת לזיהוי הפלט שלנו ```javascript -// Step 2: Generate the sequence with a loop +// שלב 2: יצירת הרצף עם לולאה for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // חישוב המספר הבא ברצף const sum = current + next; current = next; next = sum; } ``` -**פירוט מה קורה כאן:** -- **לולאה** דרך כל מיקום ברצף שלנו באמצעות לולאת `for` -- **הצגת** כל מספר עם מיקומו באמצעות תבנית פורמט טקסט -- **חישוב** המספר הבא ברצף פיבונאצ'י על ידי הוספת הערכים הנוכחיים והבאים -- **עדכון** משתני המעקב שלנו למעבר לאיטרציה הבאה +**פירוק מה שקורה כאן:** +- **לולאה** עוברת על כל מיקום ברצף שלנו באמצעות לולאת `for` +- **מציגה** כל מספר עם המיקום שלו באמצעות תבנית מחרוזות +- **מחושבת** המספר הבא בפיבונאצ'י על ידי סכימת הערכים הנוכחיים והבאים +- **מעודכנת** המשתנים למעקב לקראת האיטרציה הבאה ```javascript -// Step 3: Modern functional approach +// שלב 3: גישה פונקציונלית מודרנית const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,16 +219,16 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// דוגמת שימוש const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**במהלך הקוד הזה:** -- **יצרנו** פונקציה לשימוש חוזר באמצעות תחביר פונקציה מודרני -- **בנינו** מערך לאחסון הרצף המלא במקום להציג מספר אחד בכל פעם -- **השתמשנו** באינדקסים של מערך לחישוב כל מספר חדש מערכים קודמים -- **החזרנו** את הרצף המלא לשימוש גמיש בחלקים אחרים של התוכנית שלנו +**בדוגמה למעלה עשינו:** +- **יצירת** פונקציה שניתנת לשימוש חוזר באמצעות סינטקס של חץ מודרני +- **בניית** מערך לשמירת הרצף המלא במקום הצגה אחד-אחד +- **שימוש** באינדקסציה במערך לחישוב כל מספר חדש מתוך הערכים הקודמים +- **החזרת** הרצף המלא לשימוש גמיש בחלקים אחרים בתוכנית **שפה ברמה נמוכה (ARM Assembly) – ידידותית למחשב:** @@ -259,62 +257,62 @@ back add r0,r1 end ``` -שים לב איך הגרסה של JavaScript נקראת כמעט כמו הוראות באנגלית, בעוד שהגרסה של Assembly משתמשת בפקודות קריפטיות שמבצעות שליטה ישירה על המעבד של המחשב. שתיהן מבצעות את אותה משימה בדיוק, אבל השפה ברמה גבוהה הרבה יותר קלה להבנה, כתיבה ותחזוקה. +שים לב איך הגרסה ב-JavaScript כמעט קוראת כמו הוראות באנגלית, ואילו גרסת ה-Assembly משתמשת בפקודות מסתוריות ששולטות ישירות במעבד המחשב. שתיהן מבצעות את אותה המשימה בדיוק, אבל שפת הרמה הגבוהה הרבה יותר קלה לאנשים להבין, לכתוב ולתחזק. -**הבדלים מרכזיים שתשים לב אליהם:** -- **קריאות**: JavaScript משתמשת בשמות תיאוריים כמו `fibonacciCount` בעוד ש-Assembly משתמשת בתוויות קריפטיות כמו `r0`, `r1` -- **הערות**: שפות תכנות ברמה גבוהה מעודדות כתיבת הערות שמסבירות את הקוד והופכות אותו למובן מאליו. -- **מבנה**: הזרימה הלוגית של JavaScript תואמת את הדרך שבה בני אדם חושבים על בעיות שלב אחר שלב. -- **תחזוקה**: עדכון גרסת JavaScript לדרישות שונות הוא פשוט וברור. +**הבדלים עיקריים שתשים לב אליהם:** +- **קריאות**: JavaScript משתמש בשמות תיאוריים כמו `fibonacciCount` בעוד Assembly משתמשת בתוויות מסתוריות כמו `r0`, `r1` +- **הערות**: שפות ברמת על מעודדות הערות הסבר שמאפשרות לקוד לתעד את עצמו +- **מבנה**: הזרימה הלוגית ב-JavaScript מתאימה לאופן שבו בני אדם חושבים על בעיות שלב אחר שלב +- **תחזוקה**: עדכון הגרסה ב-JavaScript לצרכים שונים הוא פשוט וברור -✅ **על סדרת פיבונאצ'י**: הדפוס המספרי המדהים הזה (שבו כל מספר שווה לסכום של שני המספרים הקודמים: 0, 1, 1, 2, 3, 5, 8...) מופיע ממש *בכל מקום* בטבע! תמצאו אותו בספירלות של חמניות, בדפוסים של אצטרובלים, בצורת הקימור של קונכיות נאוטילוס ואפילו באופן שבו ענפי עצים גדלים. זה די מדהים איך מתמטיקה וקוד יכולים לעזור לנו להבין ולשחזר את הדפוסים שהטבע משתמש בהם כדי ליצור יופי! +✅ **על רצף פיבונאצ'י**: דפוס המספרים המרהיב הזה לחלוטין (בו כל מספר שווה לסכום שני המספרים שלפניו: 0, 1, 1, 2, 3, 5, 8...) מופיע ממש *בהכל* בטבע! תמצאו אותו בספירלות של חמניות, בדפוסי אשכולות אורנים, בצורה שבה קונכיות נאוטילוס מתעקמות, ואפילו בצורה שבה ענפי העצים גדלים. זה מדהים איך מתמטיקה וקוד יכולים לעזור לנו להבין ולשחזר את הדפוסים שהטבע משתמש בהם ליצירת יופי! -## אבני הבניין שמייצרות את הקסם +## אבני הבניין שגורמות לקסם לקרות -טוב, עכשיו כשכבר ראיתם איך שפות תכנות נראות בפעולה, בואו נפרק את החלקים הבסיסיים שמרכיבים כל תוכנה שנכתבה אי פעם. תחשבו עליהם כמו המרכיבים החיוניים במתכון האהוב עליכם – ברגע שתבינו מה כל אחד עושה, תוכלו לקרוא ולכתוב קוד כמעט בכל שפה! +טוב, עכשיו כשראית איך שפות תכנות נראות בפעולה, בואו נפרק את החלקים הבסיסיים שמרכיבים כל תוכנית שנכתבה אי פעם. תאזרו את זה כמו את מרכיבי המתכון האהוב עליכם – ברגע שתבינו מה כל אחד מהם עושה, תוכלו לקרוא ולכתוב קוד כמעט בכל שפה! -זה קצת כמו ללמוד את הדקדוק של תכנות. זוכרים בבית הספר שלמדתם על שמות עצם, פעלים ואיך להרכיב משפטים? לתכנות יש גרסה משלו לדקדוק, ובכנות, זה הרבה יותר הגיוני וסלחני מדקדוק באנגלית אי פעם! 😄 +זה קצת כמו ללמוד את הדקדוק של התכנות. זוכרים בבית הספר כשלמדתם על שמות עצם, פעלים ואיך להרכיב משפטים? לתכנות יש את הגרסה שלו של דקדוק, וכנות אומרת, היא הרבה יותר לוגית ומכילה מדקדוק האנגלית אי פעם היה! 😄 -### פקודות: ההוראות שלב אחר שלב +### משפטים: ההוראות שלב-אחר-שלב -נתחיל עם **פקודות** – הן כמו משפטים בודדים בשיחה עם המחשב שלכם. כל פקודה אומרת למחשב לעשות דבר ספציפי אחד, קצת כמו לתת הוראות: "פנה שמאלה כאן", "עצור באור אדום", "חנה במקום הזה". +נתחיל עם **משפטים** – אלה כמו משפטים בודדים בשיחה עם המחשב שלכם. כל משפט אומר למחשב לעשות דבר מסוים, קצת כמו לתת הוראות: "פנה שמאלה כאן," "תעצור באור האדום," "חנה במקום הזה." -מה שאני אוהב בפקודות זה כמה שהן בדרך כלל קריאות. תראו את זה: +מה שאני אוהב במשפטים הוא כמה שהם בדרך כלל קריאים. תסתכלו על זה: ```javascript -// Basic statements that perform single actions +// ביטויים בסיסיים שמבצעים פעולות בודדות const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` **הנה מה שהקוד הזה עושה:** -- **הכרזה** על משתנה קבוע לאחסון שם המשתמש -- **הצגת** הודעת ברכה בפלט הקונסולה -- **חישוב** ואחסון תוצאה של פעולה מתמטית +- **הכרז** על משתנה קבוע שבו ישמר שם משתמש +- **הצג** הודעת ברכה בקונסול +- **חשב** ושמור את התוצאה של פעולה מתמטית ```javascript -// Statements that interact with web pages +// הצהרות שמתקשרות עם דפי אינטרנט document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**שלב אחר שלב, הנה מה שקורה:** -- **שינוי** כותרת הדף שמופיעה בלשונית הדפדפן -- **שינוי** צבע הרקע של כל גוף הדף +**שלב אחר שלב, כך זה עובד:** +- **שנה** את כותרת העמוד שמופיעה בלשונית הדפדפן +- **שנה** את צבע הרקע של גוף הדף כולו -### משתנים: מערכת הזיכרון של התוכנה שלכם +### משתנים: מערכת הזיכרון של התוכנית שלך -אוקיי, **משתנים** הם בכנות אחד המושגים האהובים עליי ללמד כי הם כל כך דומים לדברים שאתם כבר משתמשים בהם כל יום! +טוב, **משתנים** הם באמת אחד המושגים האהובים עליי ללמד כי הם כל כך דומים לדברים שאתם כבר משתמשים בהם בכל יום! -תחשבו לרגע על רשימת אנשי הקשר בטלפון שלכם. אתם לא זוכרים את המספרים של כולם – במקום זאת, אתם שומרים "אמא", "החבר הכי טוב" או "פיצריה שמספקת עד 2 בלילה" ונותנים לטלפון לזכור את המספרים בפועל. משתנים עובדים בדיוק באותה צורה! הם כמו מיכלים עם תוויות שבהם התוכנה שלכם יכולה לאחסן מידע ולשלוף אותו מאוחר יותר באמצעות שם שבאמת הגיוני. +תחשבו על רשימת אנשי הקשר של הטלפון שלכם לרגע. אתם לא שומרים את כל המספרים בזיכרון – במקום זאת, אתם שומרים "אמא," "החבר הכי טוב," או "פיצה שמספקת עד השעה 2 בלילה" ונותנים לטלפון שלכם לזכור את המספרים האמיתיים. המשתנים עובדים בדיוק כמו זה! הם כמו מכולות מתוויות שבהן התוכנית שלכם יכולה לאחסן מידע ולשלוף אותו מאוחר יותר באמצעות שם שמתאים. -הנה מה שממש מגניב: משתנים יכולים להשתנות בזמן שהתוכנה שלכם פועלת (מכאן השם "משתנה" – הבנתם את הרעיון?). בדיוק כמו שאתם עשויים לעדכן את איש הקשר של הפיצריה כשאתם מגלים מקום אפילו טוב יותר, משתנים יכולים להתעדכן כשהתוכנה שלכם לומדת מידע חדש או כשהמצבים משתנים! +הסיבה שזה כל כך מגניב: משתנים יכולים להשתנות בזמן שהתוכנית רצה (ומכאן השם "משתנה" – הבנתם את הרמז?). בדיוק כמו שאתם אולי מעדכנים את האישור לפיצה כשאתם מגלים מקום טוב יותר, המשתנים יכולים להתעדכן כשהתוכנית לומדת מידע חדש או כשהמצבים משתנים! -תנו לי להראות לכם כמה זה פשוט ויפה: +תנו לי להראות לכם כמה פשוט זה יכול להיות: ```javascript -// Step 1: Creating basic variables +// שלב 1: יצירת משתנים בסיסיים const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -322,13 +320,13 @@ let isRaining = false; ``` **הבנת המושגים האלה:** -- **אחסון** ערכים שאינם משתנים במשתנים מסוג `const` (כמו שם האתר) -- **שימוש** ב-`let` לערכים שיכולים להשתנות במהלך התוכנית -- **הקצאת** סוגי נתונים שונים: מחרוזות (טקסט), מספרים ובוליאנים (אמת/שקר) -- **בחירת** שמות תיאוריים שמסבירים מה כל משתנה מכיל +- **אחסן** ערכים שלא משתנים במשתני `const` (כמו שם האתר) +- **השתמש** ב-`let` לערכים שיכולים להשתנות לאורך התוכנית שלך +- **הקצה** סוגי נתונים שונים: מחרוזות (טקסט), מספרים, ובוליאנים (אמת/שקר) +- **בחר** שמות תיאוריים שמסבירים מה מכיל כל משתנה ```javascript -// Step 2: Working with objects to group related data +// שלב 2: עבודה עם אובייקטים כדי לקבץ נתונים קשורים const weatherData = { location: "San Francisco", humidity: 65, @@ -336,50 +334,50 @@ const weatherData = { }; ``` -**בקטע הזה עשינו:** -- **יצירת** אובייקט לקיבוץ מידע קשור על מזג האוויר -- **ארגון** מספר חלקי מידע תחת שם משתנה אחד -- **שימוש** בזוגות מפתח-ערך כדי לתייג כל חלק מידע בצורה ברורה +**בקטע הקוד שלמעלה:** +- **יצרנו** אובייקט לארגון מידע קשור למזג האוויר +- **ארגנו** מספר פרטים תחת שם משתנה אחד +- **השתמשנו** בזוגות מפתח-ערך לתיוג ברור של כל פרט ```javascript -// Step 3: Using and updating variables +// שלב 3: שימוש ועדכון משתנים console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// עדכון משתנים ניתנים לשינוי currentWeather = "cloudy"; temperature = 68; ``` -**בואו נבין כל חלק:** -- **הצגת** מידע באמצעות תבניות מחרוזות עם תחביר `${}` -- **גישה** למאפייני אובייקט באמצעות נקודה (`weatherData.windSpeed`) -- **עדכון** משתנים שהוכרזו עם `let` כדי לשקף תנאים משתנים -- **שילוב** מספר משתנים ליצירת הודעות משמעותיות +**הבנת כל חלק:** +- **הצג** מידע באמצעות תבניות מחרוזת עם תחביר `${}` +- **גש** לתכונות של האובייקט באמצעות נקודה (`weatherData.windSpeed`) +- **עדכן** משתנים שהוכרזו ב-`let` כדי לשקף מצבים משתנים +- **שלב** מספר משתנים ליצירת הודעות משמעותיות ```javascript -// Step 4: Modern destructuring for cleaner code +// שלב 4: פיצול מודרני לקוד נקי יותר const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **מה שצריך לדעת:** -- **שליפת** מאפיינים ספציפיים מאובייקטים באמצעות השמה מפורקת -- **יצירת** משתנים חדשים באופן אוטומטי עם אותם שמות כמו מפתחות האובייקט -- **פישוט** קוד על ידי הימנעות משימוש חוזר בנקודה +- **חלץ** תכונות מסוימות מתוך אובייקטים באמצעות השמת פירוק +- **צור** משתנים חדשים אוטומטית עם אותם שמות כמו מפתחות האובייקט +- **פשט** את הקוד באמצעות הימנעות מחזרות של סימון נקודה -### זרימת שליטה: ללמד את התוכנה שלכם לחשוב +### זרימת בקרה: מלמד את התוכנית שלך לחשוב -אוקיי, כאן התכנות הופך למדהים באמת! **זרימת שליטה** היא בעצם ללמד את התוכנה שלכם איך לקבל החלטות חכמות, בדיוק כמו שאתם עושים כל יום בלי לחשוב על זה. +טוב, כאן התכנות נהיה לגמרי מדהים! **זרימת בקרה** זו בעצם ללמד את התוכנית שלך איך לקבל החלטות חכמות, בדיוק כמו שאתה עושה כל יום בלי אפילו לחשוב על זה. -תארו לעצמכם: הבוקר כנראה עברתם משהו כמו "אם יורד גשם, אני אקח מטריה. אם קר, אני אלבש מעיל. אם אני מאחר, אני אדלג על ארוחת הבוקר ואקח קפה בדרך." המוח שלכם באופן טבעי עוקב אחרי לוגיקת אם-אז עשרות פעמים ביום! +דמיין: הבוקר סביר שעברת משהו כמו "אם יורד גשם, אקח מטרייה. אם קר, אלבש מעיל. אם אני מאחר, אזווית ארוחת בוקר ואקח קפה בדרך." המוח שלך באופן טבעי עוקב אחרי לוגיקת אם-אז עשרות פעמים ביום! -זה מה שגורם לתוכניות להרגיש חכמות וחיות במקום פשוט לעקוב אחרי תסריט משעמם וצפוי. הן יכולות באמת להסתכל על מצב, להעריך מה קורה ולהגיב בהתאם. זה כמו לתת לתוכנה שלכם מוח שיכול להתאים את עצמו ולקבל החלטות! +זה מה שהופך תוכניות לאינטליגנטיות וחיות במקום פשוט לעקוב אחרי תסריט משעמם וניתן לחיזוי. הן יכולות להסתכל על מצב, להעריך מה קורה, ולהגיב בהתאם. זה כמו לתת לתוכנית שלך מוח שיכול להסתגל ולקבל החלטות! -רוצים לראות איך זה עובד בצורה יפהפייה? תנו לי להראות לכם: +רוצה לראות איך זה עובד בצורה מדהימה? תן לי להראות לך: ```javascript -// Step 1: Basic conditional logic +// שלב 1: לוגיקה תנאי בסיסית const userAge = 17; if (userAge >= 18) { @@ -390,14 +388,14 @@ if (userAge >= 18) { } ``` -**הנה מה שהקוד הזה עושה:** -- **בדיקה** אם גיל המשתמש עומד בדרישות ההצבעה -- **ביצוע** בלוקים קוד שונים בהתאם לתוצאת התנאי -- **חישוב** והצגת כמה זמן נותר עד לזכאות להצבעה אם מתחת לגיל 18 -- **מתן** משוב ספציפי ומועיל לכל תרחיש +**מה שהקוד הזה עושה:** +- **בדוק** אם גיל המשתמש עומד בדרישת ההצבעה +- **בצע** בלוקים שונים של קוד על בסיס תוצאת התנאי +- **חשב** והצג כמה זמן נותר עד שתהיה זכאות להצביע אם מתחת לגיל 18 +- **ספק** משוב ספציפי ומועיל לכל תרחיש ```javascript -// Step 2: Multiple conditions with logical operators +// שלב 2: תנאים מרובים עם אופרטורים לוגיים const userAge = 17; const hasPermission = true; @@ -411,24 +409,24 @@ if (userAge >= 18 && hasPermission) { ``` **פירוק מה שקורה כאן:** -- **שילוב** מספר תנאים באמצעות אופרטור `&&` (וגם) -- **יצירת** היררכיה של תנאים באמצעות `else if` למספר תרחישים -- **טיפול** בכל המקרים האפשריים עם משפט `else` סופי -- **מתן** משוב ברור וניתן לפעולה לכל מצב שונה +- **שלב** תנאים מרובים באמצעות האופרטור `&&` (וגם) +- **צור** היררכיית תנאים עם `else if` לתרחישים מרובים +- **טפל** בכל המקרים האפשריים עם משפט `else` סופי +- **ספק** משוב ברור ופעולתי לכל מצב שונה ```javascript -// Step 3: Concise conditional with ternary operator +// שלב 3: תנאי תמציתי עם אופרטור טרינרי const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` **מה שצריך לזכור:** -- **שימוש** באופרטור תנאי (`? :`) לתנאים פשוטים עם שתי אפשרויות -- **כתיבת** התנאי קודם, אחריו `?`, ואז תוצאה אמת, ואז `:`, ואז תוצאה שקר -- **יישום** דפוס זה כשצריך להקצות ערכים על בסיס תנאים +- **השתמש** באופרטור הטורנרי (`? :`) לתנאים פשוטים עם שתי אפשרויות +- **כתוב** תחילה את התנאי, אחריו `?`, אז תוצאה של אמת, אחריה `:`, ואז תוצאה של שקר +- **החל** את התבנית הזו כשצריך להקצות ערכים בהתבסס על תנאים ```javascript -// Step 4: Handling multiple specific cases +// שלב 4: טיפול במקרים ספציפיים מרובים const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -448,57 +446,56 @@ switch (dayOfWeek) { } ``` -**הקוד הזה משיג את הדברים הבאים:** -- **התאמה** של ערך המשתנה למספר מקרים ספציפיים -- **קיבוץ** מקרים דומים יחד (ימי חול מול סופי שבוע) -- **ביצוע** בלוק הקוד המתאים כשנמצא התאמה -- **הכללת** מקרה `default` לטיפול בערכים בלתי צפויים -- **שימוש** בפקודות `break` כדי למנוע מהקוד להמשיך למקרה הבא +**קוד זה משיג את הדברים הבאים:** +- **התאם** את ערך המשתנה למספר מקרים ספציפיים +- **קבץ** מקרים דומים יחד (ימי השבוע מול סופי שבוע) +- **בצע** את בלוק הקוד המתאים כאשר נמצא התאמה +- **כלול** מקרה `default` לטיפול בערכים לא צפויים +- **השתמש** בפקודות `break` כדי למנוע המשך לקוד במקרים הבאים -> 💡 **אנלוגיה לעולם האמיתי**: תחשבו על זרימת שליטה כמו שיש לכם GPS הכי סבלני בעולם שנותן לכם הוראות. הוא עשוי לומר "אם יש פקק ברחוב הראשי, קחו את הכביש המהיר במקום. אם יש עבודות בכביש המהיר, נסו את הדרך הנופית." תוכניות משתמשות בדיוק באותו סוג של לוגיקה תנאית כדי להגיב בצורה חכמה למצבים שונים ותמיד לתת למשתמשים את החוויה הטובה ביותר. +> 💡 **אנלוגיה מהחיים האמיתיים**: חשבו על זרימת הבקרה כמו על GPS הסבלני ביותר בעולם שנותן לך הוראות. הוא עשוי לומר "אם יש פקקים ברחוב הראשי, קח את הכביש המהיר במקום. אם יש עבודות בכביש המהיר, נסה את הדרך הנופית." תוכניות משתמשות באותו סוג לוגיקה מותנית כדי להגיב בצורה אינטליגנטית למצבים שונים ולספק למשתמשים את החוויה הטובה ביותר. -### 🎯 **בדיקת מושגים: שליטה באבני הבניין** +### 🎯 **בדיקת מושגים: שליטה באבני בניין** -**בואו נראה איך אתם מתקדמים עם היסודות:** -- האם אתם יכולים להסביר את ההבדל בין משתנה לפקודה במילים שלכם? -- תחשבו על תרחיש בעולם האמיתי שבו הייתם משתמשים בהחלטת אם-אז (כמו הדוגמה של ההצבעה שלנו) -- מה הפתיע אתכם בלוגיקת תכנות? +**בואו נראה איך אתם מסתדרים עם הבסיס:** +- האם תוכלו להסביר את ההבדל בין משתנה למשפט במילים שלכם? +- חשבו על תרחיש אמיתי שבו תשתמשו בהחלטת אם-אז (כמו בדוגמת ההצבעה שלנו) +- מה הפתיע אתכם בלוגיקת התכנות? -**בוסטר ביטחון מהיר:** +**הגברת בטחון מהירה:** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 הצהרות
(הוראות)"] --> B["📦 משתנים
(אחסון)"] --> C["🔀 זרימת בקרה
(החלטות)"] --> D["🎉 תוכנית עובדת!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` +✅ **מה שמגיע עכשיו**: אנחנו עומדים ליהנות ממש ממש קפיצה עמוקה יותר למושגים האלה כשנמשיך במסע המדהים הזה יחד! כרגע, תתמקדו בהרגשה של ההתרגשות מכל האפשרויות המדהימות שמלפניכם. הכישורים והטכניקות המדויקות יגיעו באופן טבעי כשנתרגל ביחד – מבטיח שזה יהיה הרבה יותר כיף ממה שציפיתם! -✅ **מה צפוי בהמשך**: אנחנו הולכים ליהנות בטירוף כשנעמיק עוד יותר במושגים האלה ונמשיך במסע המדהים הזה יחד! כרגע, פשוט תתמקדו בהתרגשות מכל האפשרויות המדהימות שמחכות לכם. הכישורים והטכניקות הספציפיים יידבקו באופן טבעי כשנתרגל יחד – אני מבטיח שזה הולך להיות הרבה יותר כיף ממה שאתם מצפים! - -## הכלים של המקצוע +## כלי המסחר -טוב, כאן אני באמת מתרגש עד שאני בקושי יכול להתאפק! 🚀 אנחנו עומדים לדבר על הכלים המדהימים שיגרמו לכם להרגיש כאילו קיבלתם את המפתחות לחללית דיגיטלית. +טוב, כאן אני באמת מתרגש עד כדי כך שקשה לי להתאפק! 🚀 אנחנו עומדים לדבר על הכלים המדהימים שגורמים לך להרגיש כאילו זה עתה קיבלת את מפתחות החללית הדיגיטלית. -אתם יודעים איך לשף יש את הסכינים המושלמים שמרגישים כמו הארכה של הידיים שלו? או איך למוזיקאי יש את הגיטרה האחת הזאת שנראה שהיא שרה ברגע שהוא נוגע בה? ובכן, למפתחים יש את הגרסה שלנו לכלים הקסומים האלה, והנה מה שיפיל לכם את הלסת – רובם לגמרי בחינם! +אתה יודע איך לשף יש את הסכינים המאוזנים להפליא שמרגישים כמו המשך של הידיים שלו? או איך למוזיקאי יש את הגיטרה שכשאוחזים בה היא כאילו שרה? ובכן, למפתחים יש את הגרסה שלהם של הכלים הקסומים האלה, והנה מה שיציף את המוח שלך לחלוטין – רובם לגמרי חינמיים! -אני כמעט קופץ מהכיסא שלי מרוב התרגשות לשתף אתכם בזה כי הם שינו לחלוטין איך אנחנו בונים תוכנה. אנחנו מדברים על עוזרי קוד מבוססי AI שיכולים לעזור לכתוב את הקוד שלכם (אני לא צוחק!), סביבות ענן שבהן תוכלו לבנות יישומים שלמים מכל מקום עם Wi-Fi, וכלי דיבאגינג כל כך מתקדמים שהם כמו ראיית רנטגן לתוכניות שלכם. +אני כמעט מתרוצץ בכיסא מהתרגשות לחשוף את זה לכם כי הם שינו לגמרי איך אנחנו בונים תוכנה. אנחנו מדברים על עוזרים לתכנות עם טכנולוגיית AI שיכולים לעזור לכתוב את הקוד שלך (בלי בדיחה!), סביבות ענן שבהן אתה יכול לבנות יישומים שלמים מכל מקום שיש בו Wi-Fi, וכלי ניפוי שגיאות כה מתקדמים שהם כמו להחזיק בראיית אקס-ריי לתוכניות שלך. -והנה החלק שעדיין נותן לי צמרמורת: אלה לא "כלים למתחילים" שתגדלו מהם. אלה אותם כלים מקצועיים בדיוק שמפתחים בגוגל, נטפליקס, ובסטודיו האפליקציות העצמאי שאתם אוהבים משתמשים בהם ממש ברגע זה. אתם הולכים להרגיש כל כך מקצועיים כשאתם משתמשים בהם! +והנה החלק שעדיין נותן לי צמרמורת: אלה לא כלים למתחילים שתעבור עליהם. אלה אותם כלים מקצועיים בדיוק שמפתחים ב-Google, Netflix, והסטודיו האינדיפנדנטי שאתה אוהב משתמשים בהם ברגע זה ממש. אתה תרגיש כמו מקצוען אמיתי כשאתה משתמש בהם! ```mermaid graph TD - A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚡ Command Line
(Automation & Tools)"] - D --> E["📚 Documentation
(Learning & Reference)"] - E --> F["🚀 Amazing Web App!"] + A["💡 הרעיון שלך"] --> B["⌨️ עורך קוד
(VS Code)"] + B --> C["🌐 כלי מפתח לדפדפן
(בדיקות ואיתור באגים)"] + C --> D["⚡ שורת פקודה
(אוטומציה וכלים)"] + D --> E["📚 תיעוד
(למידה והתייחסות)"] + E --> F["🚀 אפליקציית ווב מדהימה!"] - B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] - C -.-> H["📱 Device Testing
(Responsive Design)"] - D -.-> I["📦 Package Managers
(npm, yarn)"] - E -.-> J["👥 Community
(Stack Overflow)"] + B -.-> G["🤖 עוזר בינה מלאכותית
(GitHub Copilot)"] + C -.-> H["📱 בדיקת מכשירים
(עיצוב רספונסיבי)"] + D -.-> I["📦 מנהלי חבילות
(npm, yarn)"] + E -.-> J["👥 קהילה
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -507,150 +504,150 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` +### עורכי קוד ו-IDE: החברים הדיגיטליים החדשים שלך -### עורכי קוד ו-IDEs: החברים הדיגיטליים החדשים שלכם +בוא נדבר על עורכי קוד – הם הולכים להיות המקומות האהובים עליך לבלות! תחשוב עליהם כמקדש הקוד הפרטי שלך שבו תבלה את רוב הזמן ביצירה והתמקצעות של היצירות הדיגיטליות שלך. -בואו נדבר על עורכי קוד – הם עומדים להפוך למקומות האהובים עליכם לבלות בהם! תחשבו עליהם כעל מקדש הקוד האישי שלכם שבו תבלו את רוב הזמן ביצירת ושיפור היצירות הדיגיטליות שלכם. +אבל הנה מה שיש קסום מאוד בעורכים מודרניים: הם לא סתם עורך טקסט מפואר. הם כמו מנטור לתכנות הכי חכם ותומך שיושב לצידך 24/7. הם תופסים טעויות הקלדה עוד לפני שאתה שם לב, מציעים שיפורים שגורמים לך להיראות גאון, עוזרים לך להבין כל פיסת קוד, ויש אפילו כאלה שיכולים לנבא מה אתה עומד להקליד ולהציע להשלים את המחשבות שלך! -אבל הנה מה שממש קסום בעורכים מודרניים: הם לא רק עורכי טקסט מפוארים. הם כמו שיש לכם את המנטור הכי מבריק ותומך שיושב לידכם 24/7. הם תופסים את הטעויות שלכם לפני שאתם בכלל שמים לב, מציעים שיפורים שגורמים לכם להיראות כמו גאונים, עוזרים לכם להבין מה כל חלק בקוד עושה, וחלקם אפילו יכולים לנבא מה אתם עומדים להקליד ולהציע לסיים את המחשבות שלכם! +אני זוכר כשגיליתי את ההשלמה האוטומטית – הרגשתי ממש כאילו אני חי בעתיד. אתה מתחיל להקליד משהו, והעורך שלך אומר, "האם חשבת על הפונקציה הזו שעושה בדיוק את מה שאתה צריך?" זה כמו שיהיה לך קורא מחשבות כחבר הקוד! -אני זוכר כשגיליתי לראשונה השלמה אוטומטית – הרגשתי כאילו אני חי בעתיד. אתם מתחילים להקליד משהו, והעורך שלכם אומר, "היי, חשבתם על הפונקציה הזאת שעושה בדיוק מה שאתם צריכים?" זה כמו שיש לכם קורא מחשבות כחבר קוד שלכם! +**מה הופך את העורכים האלה למדהימים כל כך?** -**מה הופך את העורכים האלה לכל כך מדהימים?** +עורכי קוד מודרניים מציעים מערך מרשים של תכונות שנועדו להגביר את הפרודוקטיביות שלך: -עורכי קוד מודרניים מציעים מגוון מרשים של תכונות שנועדו לשפר את הפרודוקטיביות שלכם: +| תכונה | מה היא עושה | למה זה עוזר | +|---------|--------------|--------------| +| **הדגשת תחביר** | צובע חלקים שונים בקוד שלך | מקל על קריאת הקוד וזיהוי שגיאות | +| **השלמה אוטומטית** | מציע קוד כשאתה מקליד | מזרז את התכנות ומפחית טעויות הקלדה | +| **כלי ניפוי שגיאות** | עוזר למצוא ולתקן שגיאות | חוסך שעות של פתרון בעיות | +| **הרחבות** | מוסיף תכונות מתמחות | מאפשר התאמה אישית של העורך לכל טכנולוגיה | +| **עוזרי AI** | מציעים קוד והסברים | מ aceler מצביעים על למידה ופרודוקטיביות | -| תכונה | מה היא עושה | למה היא עוזרת | -|-------|--------------|---------------| -| **הדגשת תחביר** | צובעת חלקים שונים בקוד שלכם | מקלה על קריאת הקוד וזיהוי שגיאות | -| **השלמה אוטומטית** | מציעה קוד בזמן שאתם מקלידים | מאיצה את הכתיבה ומפחיתה טעויות | -| **כלי דיבאגינג** | עוזרים לכם למצוא ולתקן שגיאות | חוסכים שעות של פתרון בעיות | -| **הרחבות** | מוסיפות תכונות מיוחדות | מאפשרות התאמה אישית של העורך לכל טכנולוגיה | -| **עוזרי AI** | מציעים קוד והסברים | מאיצים את הלמידה והפרודוקטיביות | +> 🎥 **משאב וידאו**: רוצה לראות את הכלים האלה בפעולה? צפה ב-[וידאו כלים למסחר](https://youtube.com/watch?v=69WJeXGBdxg) למבט כולל. -> 🎥 **משאב וידאו**: רוצים לראות את הכלים האלה בפעולה? צפו ב-[וידאו על הכלים של המקצוע](https://youtube.com/watch?v=69WJeXGBdxg) לסקירה מקיפה. +#### עורכים מומלצים לפיתוח ווב -#### עורכים מומלצים לפיתוח אתרים - -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (חינם) -- הכי פופולרי בקרב מפתחי אתרים -- מערכת הרחבות מצוינת +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (חינמי) +- הפופולרי ביותר בקרב מפתחי ווב +- אקוסיסטם מצוין של הרחבות - טרמינל מובנה ואינטגרציה עם Git - **הרחבות חובה**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - הצעות קוד מבוססות AI + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - הצעות קוד מופעלות ב-AI - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - שיתוף פעולה בזמן אמת - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - עיצוב קוד אוטומטי - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - זיהוי טעויות כתיב בקוד + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - תפס טעויות כתיב בקוד -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (בתשלום, חינם לסטודנטים) -- כלי דיבאגינג ובדיקות מתקדמים -- השלמה חכמה של קוד +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (בתשלום, חינמי לסטודנטים) +- כלים מתקדמים לניפוי שגיאות ובדיקות +- השלמת קוד חכמה - בקרת גרסאות מובנית -**IDEs מבוססי ענן** (מחירים משתנים) -- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code מלא בדפדפן שלכם +**IDE מבוססי ענן** (מחירים משתנים) +- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code מלא בדפדפן שלך - [Replit](https://replit.com/) - מעולה ללמידה ושיתוף קוד -- [StackBlitz](https://stackblitz.com/) - פיתוח אתרים מלא, מיידי +- [StackBlitz](https://stackblitz.com/) - פיתוח ווב מיידי במלואו -> 💡 **טיפ להתחלה**: התחילו עם Visual Studio Code – הוא חינמי, בשימוש נרחב בתעשייה, ויש לו קהילה עצומה שיוצרת מדריכים והרחבות מועילים. +> 💡 **טיפ להתחלה**: התחל עם Visual Studio Code – הוא חינמי, בשימוש נרחב בתעשייה, ויש לו קהילה ענקית שיוצרת מדריכים והרחבות מועילות. -### דפדפני אינטרנט: המעבדה הסודית שלכם לפיתוח +### דפדפני אינטרנט: המעבדה הסודית שלך לפיתוח -אוקיי, תתכוננו להיות מופתעים לחלוטין! אתם יודעים איך השתמשתם בדפדפנים כדי לגלול ברשתות חברתיות ולצפות בסרטונים? ובכן, מתברר שהם הסתירו את המעבדה הסודית המדהימה הזאת למפתחים כל הזמן הזה, רק מחכים שתגלו אותה! +טוב, התכונן שינהפך לך את התודעה! אתה יודע איך אתה משתמש בדפדפנים לגלול ברשתות חברתיות ולצפות בסרטונים? אז מסתבר שהם הסתירו את המעבדה הסודית והמדהימה הזו לפיתוח כל הזמן הזה, מחכה שתגלה אותה! -בכל פעם שאתם לוחצים לחיצה ימנית על דף אינטרנט ובוחרים "Inspect Element", אתם פותחים עולם נסתר של כלי פיתוח שהם באמת יותר חזקים מחלק מהתוכנות היקרות ששילמתי עליהן מאות דולרים בעבר. זה כמו לגלות שהמטבח הרגיל שלכם מסתיר מעבדה של שף מקצועי מאחורי פאנל סודי! -בפעם הראשונה שמישהו הראה לי את כלי הפיתוח של הדפדפן, ביליתי בערך שלוש שעות בלחיצה על כל מיני דברים ואמרתי לעצמי "רגע, זה יכול לעשות גם את זה?!" אפשר ממש לערוך כל אתר בזמן אמת, לראות בדיוק כמה מהר הכל נטען, לבדוק איך האתר שלך נראה במכשירים שונים ואפילו לנפות שגיאות ב-JavaScript כמו מקצוען אמיתי. זה פשוט מדהים! +בכל פעם שלוחצים קליק ימני על דף אינטרנט ובוחרים "בדוק אלמנט," אתה פותח עולם נסתר של כלי מפתח שהם אותנטיים יותר חזקים מתוכנות יקרות ששילמתי להן מאות שקלים. זה כמו לגלות שהמטבח הרגיל שלך הסתיר מעבדת שף מקצועית מאחורי לוח סודי! +הפעם הראשונה שמישהו הראה לי את כלי הפיתוח בדפדפן (DevTools), ביליתי בערך שלוש שעות רק לוחץ סביב ואומר "חכה, גם את זה הוא יכול?!" בפועל, אפשר לערוך כל אתר בזמן אמת, לראות בדיוק כמה מהר הכל נטען, לבדוק איך האתר שלך נראה במכשירים שונים ואפילו לנפות באג‘ים ב-JavaScript כמו מקצוען אמיתי. זה פשוט מדהים ומעורר מחשבה! -**למה דפדפנים הם הנשק הסודי שלך:** +**הנה למה הדפדפנים הם הנשק הסודי שלך:** -כשאתה יוצר אתר או אפליקציה, אתה צריך לראות איך הם נראים ומתנהגים בעולם האמיתי. דפדפנים לא רק מציגים את העבודה שלך, אלא גם מספקים משוב מפורט על ביצועים, נגישות ובעיות פוטנציאליות. +כשאתה יוצר אתר או אפליקציה, אתה צריך לראות איך הם נראים ומתנהגים בעולם האמיתי. הדפדפנים לא רק מציגים את העבודה שלך, אלא גם מספקים משוב מפורט על ביצועים, נגישות ובעיות פוטנציאליות. -#### כלי פיתוח בדפדפן (DevTools) +#### כלי המפתח בדפדפן (DevTools) -דפדפנים מודרניים כוללים סוויטות פיתוח מקיפות: +דפדפנים מודרניים כוללים ערכות פיתוח מקיפות: -| קטגוריית כלי | מה הוא עושה | דוגמה לשימוש | +| קטגוריית כלי | מה הכלי עושה | דוגמה לשימוש | |---------------|--------------|------------------| -| **Element Inspector** | צפייה ועריכה של HTML/CSS בזמן אמת | התאמת עיצוב כדי לראות תוצאות מיידיות | -| **Console** | צפייה בהודעות שגיאה ובדיקת JavaScript | ניפוי בעיות וניסויים בקוד | -| **Network Monitor** | מעקב אחר טעינת משאבים | אופטימיזציה לביצועים וזמני טעינה | -| **Accessibility Checker** | בדיקה לעיצוב כוללני | לוודא שהאתר שלך עובד עבור כל המשתמשים | -| **Device Simulator** | תצוגה במידות מסך שונות | בדיקת עיצוב רספונסיבי ללא צורך במכשירים מרובים | +| **בוחן אלמנטים** | הצגה ועריכה של HTML/CSS בזמן אמת | התאמת עיצוב ותצוגה מיידית | +| **מסוף** | הצגת הודעות שגיאה ובדיקת JavaScript | פתרון בעיות ונסיונות קוד | +| **מוניטור רשת** | מעקב אחר טעינת משאבים | אופטימיזציה של ביצועים וזמנים לטעינה | +| **בודק נגישות** | בדיקה של עיצוב כוללני | הבטחת תקינות האתר לכל המשתמשים | +| **סימולטור מכשירים** | תצוגה במידות מסך שונות | בדיקת עיצוב רספונסיבי בלי מכשירים שונים | #### דפדפנים מומלצים לפיתוח -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - כלי פיתוח סטנדרטיים בתעשייה עם תיעוד נרחב -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - כלים מצוינים ל-CSS Grid ולנגישות -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - מבוסס על Chromium עם משאבי פיתוח של מיקרוסופט +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - כלי פיתוח נפוצים בתעשייה עם תיעוד נרחב +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - כלים מצוינים ל-CSS Grid ונגישות +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - מבוסס על Chromium עם מקורות פיתוח של מיקרוסופט + +> ⚠️ **טיפ חשוב לבדיקה**: תמיד בדוק אתרים שלך בכמה דפדפנים! מה שעובד מצוין ב-Chrome עשוי להראות שונה ב-Safari או Firefox. מפתחים מקצועיים בודקים בכל הדפדפנים המרכזיים כדי להבטיח חוויית משתמש עקבית. -> ⚠️ **טיפ חשוב לבדיקות**: תמיד בדוק את האתרים שלך בכמה דפדפנים! מה שעובד בצורה מושלמת ב-Chrome עשוי להיראות שונה ב-Safari או Firefox. מפתחים מקצועיים בודקים בכל הדפדפנים המרכזיים כדי להבטיח חוויות משתמש עקביות. -### כלי שורת הפקודה: השער שלך לכוחות העל של המפתחים +### כלי שורת הפקודה: שער הכוח שלך כמפתח -טוב, בואו נדבר בכנות על שורת הפקודה, כי אני רוצה שתשמעו את זה ממישהו שבאמת מבין. בפעם הראשונה שראיתי אותה – רק מסך שחור מפחיד עם טקסט מהבהב – חשבתי לעצמי, "לא, ממש לא! זה נראה כמו משהו מסרט האקרים משנות ה-80, ואני בטוח לא מספיק חכם בשביל זה!" 😅 +טוב, בואו נקדיש רגע של כנות לגבי שורת הפקודה, כי רוצה שתשמע את זה מאדם שמבין באמת. כשראיתי אותה לראשונה – רק מסך שחור מפחיד עם טקסט מהבהב – חשבתי ממש, "לא, בהחלט לא! זה נראה כמו משהו מסרט האקרים משנות ה-80, ואני בטוח לא חכם מספיק לזה!" 😅 -אבל הנה מה שהייתי רוצה שמישהו יגיד לי אז, ומה שאני אומר לכם עכשיו: שורת הפקודה לא מפחידה – היא בעצם כמו לנהל שיחה ישירה עם המחשב שלך. תחשבו על זה כמו ההבדל בין להזמין אוכל דרך אפליקציה מפוארת עם תמונות ותפריטים (שזה נחמד וקל) לבין להיכנס למסעדה המקומית האהובה עליכם, שם השף יודע בדיוק מה אתם אוהבים ויכול להכין משהו מושלם רק אם תגידו "תפתיע אותי במשהו מדהים." +אבל הנה מה שהייתי רוצה שמישהו היה אומר לי אז, ומה שאני אומר לך עכשיו: שורת הפקודה לא מפחידה – היא בעצם כמו שיחה ישירה עם המחשב שלך. תחשוב על זה כמו ההבדל בין להזמין אוכל דרך אפליקציה מפוארת עם תמונות ותפריטים (שזה נוח וקל) לבין להיכנס למסעדה האהובה עליך שבה השף יודע בדיוק מה אתה אוהב ויכול להכין משהו מושלם רק שתאמר "הפתע אותי במשהו מדהים." -שורת הפקודה היא המקום שבו מפתחים מרגישים כמו קוסמים אמיתיים. אתם מקלידים כמה מילים שנראות קסומות (טוב, הן רק פקודות, אבל הן מרגישות קסומות!), לוחצים על Enter, ובום – יצרתם מבני פרויקטים שלמים, התקנתם כלים חזקים מכל העולם, או פרסמתם את האפליקציה שלכם באינטרנט למיליוני אנשים. ברגע שתחוו את הכוח הזה בפעם הראשונה, זה באמת ממכר! +שורת הפקודה היא המקום שבו מפתחים מרגישים כמו קוסמים מוחלטים. אתה מקליד כמה מילים שנראות קסומות (טוב, הן סתם פקודות, אבל זה מרגיש קסום!), לוחץ אנטר, ויום-טוב – יצרת מבני פרויקטים שלמים, התקנת כלי פיתוח רבי עוצמה מרחבי העולם או פרסת את האפליקציה שלך באינטרנט למיליוני אנשים לצפייה. ברגע שאתה טועם את הכוח הזה, זה די ממכר! -**למה שורת הפקודה תהפוך לכלי האהוב עליכם:** +**למה שורת הפקודה תהפוך לכלי האהוב עליך:** -למרות שממשקים גרפיים נהדרים להרבה משימות, שורת הפקודה מצטיינת באוטומציה, דיוק ומהירות. הרבה כלי פיתוח עובדים בעיקר דרך ממשקי שורת פקודה, ולמידה כיצד להשתמש בהם ביעילות יכולה לשפר משמעותית את הפרודוקטיביות שלכם. +בעוד ממשקי גרפיקה מצוינים למשימות רבות, שורת הפקודה מצטיינת באוטומציה, דיוק ומהירות. רבים מכלי הפיתוח עובדים בעיקר בשורת פקודה, ולימוד השימוש בהם בצורה יעילה יכול לשפר פלאים את הפרודוקטיביות שלך. ```bash -# Step 1: Create and navigate to project directory +# שלב 1: צור ונווט לתיקיית הפרויקט mkdir my-awesome-website cd my-awesome-website ``` -**מה הקוד הזה עושה:** -- **יוצר** ספרייה חדשה בשם "my-awesome-website" עבור הפרויקט שלכם -- **מנווט** לתוך הספרייה החדשה כדי להתחיל לעבוד +**הנה מה שהקוד הזה עושה:** +- **יצירת** תיקייה חדשה בשם "my-awesome-website" עבור הפרויקט שלך +- **כניסה** לתיקייה החדשה כדי להתחיל עבודה ```bash -# Step 2: Initialize project with package.json +# שלב 2: אתחול הפרויקט עם package.json npm init -y -# Install modern development tools +# התקן כלי פיתוח מודרניים npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**שלב אחר שלב, מה קורה כאן:** -- **מאתחל** פרויקט חדש של Node.js עם הגדרות ברירת מחדל באמצעות `npm init -y` -- **מתקין** את Vite ככלי בנייה מודרני לפיתוח מהיר ובנייה לפרודקשן -- **מוסיף** את Prettier לעיצוב קוד אוטומטי ואת ESLint לבדיקת איכות קוד -- **משתמש** בדגל `--save-dev` כדי לסמן את אלה כתלויות לפיתוח בלבד +**שלב אחר שלב, הנה מה שקורה:** +- **איתחול** פרויקט Node.js חדש עם הגדרות ברירת מחדל באמצעות `npm init -y` +- **התקנת** Vite ככלי בנייה מודרני לפיתוח מהיר ובניית הפקה +- **הוספת** Prettier לפורמט אוטומטי של הקוד ו-ESLint לבדיקת איכות הקוד +- **שימוש** ב-`--save-dev` לסימון תלותות לפיתוח בלבד ```bash -# Step 3: Create project structure and files +# שלב 3: יצירת מבנה הפרויקט והקבצים mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# הפעלת שרת הפיתוח npx vite ``` -**במהלך זה, עשינו:** -- **ארגון** הפרויקט על ידי יצירת תיקיות נפרדות לקוד מקור ולמשאבים -- **יצירת** קובץ HTML בסיסי עם מבנה מסמך נכון -- **התחלת** שרת הפיתוח של Vite לטעינה מחדש בזמן אמת והחלפת מודולים חמים +**כפי שנעשה למעלה:** +- **ארגון** הפרויקט על ידי יצירת תיקיות נפרדות לקוד מקור ונכסים +- **יצירת** קובץ HTML בסיסי עם מבנה תקין +- **הפעלת** שרת הפיתוח של Vite לטעינה מחדש ו-Hot Module Replacement #### כלי שורת פקודה חיוניים לפיתוח אתרים -| כלי | מטרה | למה אתם צריכים אותו | +| כלי | מטרה | למה אתה צריך אותו | |------|---------|-----------------| -| **[Git](https://git-scm.com/)** | בקרת גרסאות | מעקב אחר שינויים, שיתוף פעולה עם אחרים, גיבוי העבודה שלכם | -| **[Node.js & npm](https://nodejs.org/)** | סביבת ריצה ל-JavaScript וניהול חבילות | הרצת JavaScript מחוץ לדפדפנים, התקנת כלי פיתוח מודרניים | -| **[Vite](https://vitejs.dev/)** | כלי בנייה ושרת פיתוח | פיתוח מהיר עם החלפת מודולים חמים | -| **[ESLint](https://eslint.org/)** | איכות קוד | זיהוי ותיקון אוטומטי של בעיות בקוד JavaScript | -| **[Prettier](https://prettier.io/)** | עיצוב קוד | שמירה על עיצוב קוד עקבי וקריא | +| **[Git](https://git-scm.com/)** | בקרת גרסאות | מעקב אחר שינויים, שיתוף פעולה, גיבוי עבודה | +| **[Node.js & npm](https://nodejs.org/)** | סביבת ריצה לנג'אווה סקריפט וניהול חבילות | הרצת JS מחוץ לדפדפן, התקנת כלי פיתוח מודרניים | +| **[Vite](https://vitejs.dev/)** | כלי בנייה ושרת פיתוח | פיתוח מהיר במיוחד עם החלפת מודולים חמה | +| **[ESLint](https://eslint.org/)** | איכות קוד | מציאת ותקון עצמאי של בעיות בקוד JS | +| **[Prettier](https://prettier.io/)** | עיצוב קוד | שמירה על קוד בפורמט אחיד וקריא | -#### אפשרויות ספציפיות לפלטפורמות +#### אפשרויות לפי פלטפורמה **Windows:** - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - טרמינל מודרני ועשיר בתכונות -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - סביבת סקריפטים חזקה +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - סביבה עוצמתית לסקריפטים - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - שורת הפקודה המסורתית של Windows **macOS:** @@ -658,78 +655,77 @@ npx vite - **[iTerm2](https://iterm2.com/)** - טרמינל משופר עם תכונות מתקדמות **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - shell סטנדרטי של Linux +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - מעטפת סטנדרטית בלינוקס - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - אמולטור טרמינל מתקדם > 💻 = מותקן מראש במערכת ההפעלה -> 🎯 **מסלול לימוד**: התחילו עם פקודות בסיסיות כמו `cd` (שינוי ספרייה), `ls` או `dir` (רשימת קבצים), ו-`mkdir` (יצירת תיקייה). תרגלו עם פקודות זרימת עבודה מודרניות כמו `npm install`, `git status`, ו-`code .` (פותח את הספרייה הנוכחית ב-VS Code). ככל שתהיו יותר נוחים, תתחילו ללמוד פקודות מתקדמות וטכניקות אוטומציה. +> 🎯 **נתיב למידה**: התחל בפקודות בסיסיות כמו `cd` (שנה תיקייה), `ls` או `dir` (רשום קבצים) ו-`mkdir` (צור תיקיה). התנסה בפקודות עבודה מודרניות כמו `npm install`, `git status` ו-`code .` (פותח את התיקייה הנוכחית ב-VS Code). עם הזמן תלמד פקודות מתקדמות וטכניקות אוטומציה. -### תיעוד: המנטור הלמידה שתמיד זמין +### תיעוד: המנטור ללמידה שתמיד לצדך -טוב, אני רוצה לשתף סוד קטן שיגרום לכם להרגיש הרבה יותר טוב לגבי היותכם מתחילים: אפילו המפתחים המנוסים ביותר מבלים חלק גדול מזמנם בקריאת תיעוד. וזה לא כי הם לא יודעים מה הם עושים – זה בעצם סימן לחוכמה! +טוב, תן לי לחלוק סוד קטן שיעזור לך להרגיש טוב יותר בתור מתחיל: גם המפתחים המנוסים מבלים הרבה זמן בקריאת תיעוד. וזה לא כי הם לא יודעים מה הם עושים – זה בעצם סימן לחכמה! -תחשבו על תיעוד כעל גישה למורים הכי סבלניים ומנוסים בעולם, שזמינים 24/7. נתקעתם בבעיה ב-2 בלילה? התיעוד שם עם חיבוק וירטואלי חם ותשובה מדויקת שאתם צריכים. רוצים ללמוד על תכונה חדשה ומגניבה שכולם מדברים עליה? התיעוד תומך בכם עם דוגמאות שלב אחר שלב. מנסים להבין למה משהו עובד כמו שהוא עובד? ניחשתם נכון – התיעוד מוכן להסביר את זה בצורה שתגרום לזה סוף סוף להתחבר! +תחשוב על התיעוד בתור גישה למורים הסבלניים, בעלי הידע העצום, הזמינים 24/7. תקוע בבעיה בשתיים לפנות בוקר? התיעוד שם עם חיבוק וירטואלי חם ותשובה מדויקת. רוצה ללמוד על תכונה חדשה שכולם מדברים עליה? התיעוד כאן עם דוגמאות שלב אחר שלב. מנסה להבין למה משהו עובד כמו שהוא עובד? ניחשת נכון – התיעוד מוכן להסביר בדרך שתגרום לך להבין לבסוף! -הנה משהו ששינה לגמרי את הפרספקטיבה שלי: עולם פיתוח האתרים מתקדם במהירות מדהימה, ואף אחד (אני מתכוון ממש אף אחד!) לא זוכר הכל בעל פה. ראיתי מפתחים בכירים עם ניסיון של 15+ שנים מחפשים תחביר בסיסי, ואתם יודעים מה? זה לא מביך – זה חכם! זה לא על זיכרון מושלם; זה על לדעת איפה למצוא תשובות אמינות במהירות ולהבין איך ליישם אותן. +הנה משהו ששינה לגמרי את נקודת המבט שלי: עולם הפיתוח מתקדם במהירות מטורפת, ואף אחד (אני מתכוון ממש אף אחד!) לא זוכר הכל בעל פה. ראיתי מפתחים בכירים עם מעל 15 שנות ניסיון שמחפשים דקדוק בסיסי, ואתה יודע מה? זה כלל לא מבייש – זה חכם! זה לא עניין של זיכרון מושלם, אלא לדעת איפה למצוא תשובות אמינות במהירות ולהבין איך ליישם אותן. -**היכן מתרחש הקסם האמיתי:** +**פה הקסם האמיתי קורה:** -מפתחים מקצועיים מבלים חלק משמעותי מזמנם בקריאת תיעוד – לא כי הם לא יודעים מה הם עושים, אלא כי עולם פיתוח האתרים מתפתח כל כך מהר, שהישארות מעודכנת דורשת למידה מתמשכת. תיעוד טוב עוזר לכם להבין לא רק *איך* להשתמש במשהו, אלא גם *למה* ו*מתי* להשתמש בו. +מפתחים מקצועיים מבלים מרבית זמנם בקריאת תיעוד – לא כי הם לא יודעים, אלא כי הנוף של פיתוח האינטרנט משתנה כל כך מהר שצריך ללמוד תמיד. תיעוד טוב מסייע לך להבין לא רק *איך* להשתמש במשהו, אלא *למה* ומתי להשתמש בו. #### משאבי תיעוד חיוניים **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** - הסטנדרט הזהב לתיעוד טכנולוגיות אינטרנט - מדריכים מקיפים ל-HTML, CSS ו-JavaScript -- כולל מידע על תאימות דפדפנים -- מציע דוגמאות מעשיות ודמואים אינטראקטיביים +- כולל מידע על תאימות לדפדפנים +- כולל דוגמאות מעשיות והדגמות אינטראקטיביות -**[Web.dev](https://web.dev)** (מאת Google) -- שיטות עבודה מומלצות לפיתוח אתרים מודרני -- מדריכים לאופטימיזציית ביצועים -- עקרונות עיצוב כוללני ונגישות -- מחקרים ממקרים אמיתיים +**[Web.dev](https://web.dev)** (מאת גוגל) +- שיטות עבודה מתקדמות לפיתוח אינטרנט +- מדריכים לאופטימיזציה של ביצועים +- עקרונות נגישות ועיצוב כוללני +- מקרי מבחן מפרויקטים אמיתיים **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- משאבי פיתוח לדפדפן Edge -- מדריכים לאפליקציות אינטרנט מתקדמות +- מקורות לפיתוח בדפדפן Edge +- מדריכים ל-Progressive Web Apps - תובנות לפיתוח חוצה פלטפורמות **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** - תוכניות לימוד מובנות - קורסי וידאו ממומחים בתעשייה -- תרגילי קידוד מעשיים +- תרגולים מעשיים -> 📚 **אסטרטגיית לימוד**: אל תנסו לשנן תיעוד – במקום זאת, למדו איך לנווט בו ביעילות. סמנו במועדפים הפניות שאתם משתמשים בהן לעיתים קרובות ותרגלו שימוש בפונקציות החיפוש כדי למצוא מידע ספציפי במהירות. +> 📚 **אסטרטגיית לימוד**: אל תנסה לשנן תיעוד – במקום זאת, למד איך לנווט בו ביעילות. סמן הפניות שימושיות בתדירות גבוהה ותרגל חיפוש מידע ספציפי במהירות. -### 🔧 **בדיקת שליטה בכלים: מה מדבר אליכם?** +### 🔧 **בדיקת שליטה בכלים: מה מדבר אליך?** -**קחו רגע לחשוב:** -- איזה כלי הכי מרגש אתכם לנסות ראשון? (אין תשובה שגויה!) -- האם שורת הפקודה עדיין מרגישה מאיימת, או שאתם סקרנים לגביה? -- האם אתם יכולים לדמיין שימוש בכלי הפיתוח של הדפדפן כדי להציץ מאחורי הקלעים של האתרים האהובים עליכם? +**קח רגע לחשוב:** +- איזה כלי הכי מתרגש לך לנסות ראשון? (אין תשובה לא נכונה!) +- האם שורת הפקודה עדיין מרגישה מאיימת, או שאתה סקרן לגביה? +- האם אתה יכול לדמיין להשתמש בכלי הפיתוח בדפדפן כדי להציץ מאחורי הקלעים של האתרים האהובים עליך? ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "זמן המפתח שהושקע עם כלים" + "עורך קוד" : 40 + "בדיקת דפדפן" : 25 + "שורת פקודה" : 15 + "קריאת תיעודים" : 15 + "איתור באגים" : 5 ``` +> **תובנה מעניינת**: מרבית המפתחים מבלים כ-40% מזמנם בעורך הקוד, אך שים לב כמה זמן מוקדש לבדיקה, ללמידה ולפתרון בעיות. תכנות זו לא רק כתיבת קוד – זו יצירת חוויות! -> **תובנה כיפית**: רוב המפתחים מבלים כ-40% מזמנם בעורך הקוד שלהם, אבל שימו לב כמה זמן מוקדש לבדיקות, למידה ופתרון בעיות. תכנות זה לא רק כתיבת קוד – זה יצירת חוויות! - -✅ **מחשבה מעניינת**: הנה משהו מעניין לחשוב עליו – איך לדעתכם הכלים לבניית אתרים (פיתוח) עשויים להיות שונים מהכלים לעיצוב המראה שלהם (עיצוב)? זה כמו ההבדל בין להיות אדריכל שמעצב בית יפה לבין הקבלן שבאמת בונה אותו. שניהם חיוניים, אבל הם צריכים ארגזי כלים שונים! מחשבה כזו באמת תעזור לכם לראות את התמונה הגדולה של איך אתרים מתעוררים לחיים. +✅ **מועד למחשבה**: הנה משהו מעניין לשקול – איך לדעתך הכלים לבניית אתרים (פיתוח) שונים מהכלים לעיצוב איך הם נראים (עיצוב)? זה כמו ההבדל בין אדריכל שמתכנן בית יפה לבין קבלן שבונה אותו בפועל. שניהם חשובים, אבל כל אחד זקוק לקופסת כלים שונה! חשיבה כזו תעזור לך לראות את התמונה הגדולה של איך אתרים באים לחיים. ## אתגר סוכן GitHub Copilot 🚀 -השתמשו במצב סוכן כדי להשלים את האתגר הבא: +השתמש במצב סוכן כדי להשלים את האתגר הבא: -**תיאור:** חקרו את התכונות של עורך קוד מודרני או IDE והדגימו כיצד הוא יכול לשפר את זרימת העבודה שלכם כמפתחי אתרים. +**תיאור:** חקור תכונות של עורך קוד מודרני או IDE והדגם כיצד הוא יכול לשפר את תהליך העבודה שלך כמפתח ווב. -**הנחיה:** בחרו עורך קוד או IDE (כמו Visual Studio Code, WebStorm או IDE מבוסס ענן). רשמו שלוש תכונות או הרחבות שעוזרות לכם לכתוב, לנפות שגיאות או לתחזק קוד בצורה יעילה יותר. עבור כל אחת, ספקו הסבר קצר על איך היא משפרת את זרימת העבודה שלכם. +**הנחיה:** בחר עורך קוד או IDE (כגון Visual Studio Code, WebStorm או IDE מבוסס ענן). פרט שלוש תכונות או הרחבות שעוזרות לך לכתוב, לנפות באגים או לתחזק קוד ביעילות. עבור כל אחד, הסבר בקצרה כיצד הוא מועיל לתהליך העבודה שלך. --- @@ -737,120 +733,121 @@ pie title "Developer Time Spent With Tools" **טוב, בלש, מוכן לתיק הראשון שלך?** -עכשיו כשיש לך את הבסיס המדהים הזה, יש לי הרפתקה שתעזור לך לראות עד כמה עולם התכנות מגוון ומרתק באמת. ותשמע – זה לא על כתיבת קוד עדיין, אז אין לחץ! תחשוב על עצמך כבלש שפות על התיק הראשון המרגש שלו! +עכשיו כשיש לך את הבסיס המדהים הזה, יש לי הרפתקה שתעזור לך לראות כמה העולם של התכנות מגוון ומרתק באמת. והקשב – זה לא על כתיבת קוד עדיין, אז בלי לחץ! תחשוב על עצמך כבלש שפת תכנות בתיק המרגש הראשון שלו! -**המשימה שלך, אם תבחר לקבל אותה:** -1. **הפוך לחוקר שפות**: בחר שלוש שפות תכנות מעולמות שונים לחלוטין – אולי אחת שבונה אתרים, אחת שיוצרת אפליקציות מובייל ואחת שמנתחת נתונים למדענים. מצא דוגמאות לאותה משימה פשוטה שנכתבה בכל אחת מהשפות. אני מבטיח שתהיה מופתע לחלוטין כמה הן יכולות להיראות שונות בזמן שהן עושות בדיוק את אותו הדבר! +**המשימה שלך, אם תבחר לקבלה:** +1. **הפוך לחוקר שפות:** בחר שלוש שפות תכנות מיקום שונים לגמרי – אולי אחת לבניית אתרים, אחת ליצירת אפליקציות מובייל, ואחת לעיבוד מידע למדענים. חפש דוגמאות לאותה משימה פשוטה בכל שפה. מבטיח שתתפלא עד כמה הן שונות למרות שהן עושות את אותו הדבר בדיוק! -2. **גלה את סיפורי המקור שלהן**: מה הופך כל שפה למיוחדת? הנה עובדה מגניבה – כל שפת תכנות נוצרה כי מישהו חשב, "אתם יודעים מה? חייב להיות דרך טובה יותר לפתור את הבעיה הספציפית הזו." האם תוכל להבין מה היו הבעיות האלה? חלק מהסיפורים האלה באמת מרתקים! +2. **גלה את סיפורי המקור שלהן:** מה עושה כל שפה למיוחדת? הנה עובדה מגניבה – כל שפת תכנות נוצרה כי מישהו חשב, "אתה יודע מה? חייב להיות דרך טובה יותר לפתור את הבעיה הזאת." האם תוכל לברר מה היו הבעיות האלה? כמה סיפורים ממש מסקרנים! -3. **פגוש את הקהילות**: בדוק כמה כל קהילה של השפה מסבירת פנים ונלהבת. חלקן כוללות מיליוני מפתחים שמשתפים ידע ועוזרים זה לזה, אחרות קטנות יותר אבל מאוד מלוכדות ותומכות. אתה תאהב לראות את האישיות השונה של הקהילות האלה! +3. **הכר את הקהילות:** בדוק כמה כל קהילה של שפה מסבירת פנים ותומכת. יש כאלו עם מיליוני מפתחים שמשתפים ידע ועוזרים זה לזה, אחרים קטנים אבל מאוחדים ותומכים. תאהב לראות את האישיויות השונות שיש לקהילות האלה! -4. **עקוב אחרי תחושת הבטן שלך**: איזו שפה מרגישה הכי נגישה לך כרגע? אל תדאג לגבי הבחירה "המושלמת" – פשוט הקשב לאינסטינקטים שלך! אין כאן תשובה שגויה, ותמיד תוכל לחקור אחרות מאוחר יותר. +4. **לך על האינטואיציה:** איזו שפה מרגישה לך הכי נגישה כרגע? אל תתחרט על הבחירה "המאושרת" – פשוט תקשיב לתחושת הבטן שלך! אין תשובה לא נכונה כאן, ותמיד תוכל לחקור שפות נוספות אחר כך. -**עבודת בלשות בונוס**: נסה לגלות אילו אתרים או אפליקציות גדולות נבנו עם כל שפה. אני מבטיח שתהיה מופתע לגלות מה מניע את Instagram, Netflix או את המשחק הנייד שאתה לא יכול להפסיק לשחק! +**עבודה נוספת לבלש:** נסה לגלות אילו אתרים או אפליקציות גדולות נבנו באיזו שפה. אני מבטיח שתתפלא לגלות מי מפעיל את Instagram, Netflix או את משחק המובייל שאי אפשר להפסיק לשחק בו! -> 💡 **זכור**: אתה לא מנסה להפוך למומחה באף אחת מהשפות האלה היום. אתה רק מכיר את השכונה לפני שאתה מחליט איפה אתה רוצה להתמקם. קח את הזמן, תהנה מזה ותן לסקרנות שלך להוביל אותך! +> 💡 **זכור**: אתה לא מנסה להפוך למומחה באף אחת מהשפות היום. אתה רק מכיר את השכונה לפני שתחליט איפה להקים חנות. קח את הזמן, תיהנה, ותן לסקרנות להוביל אותך! -## בואו נחגוג את מה שגיליתם! +## בוא נחגוג את מה שגילית! -וואו, ספגת כל כך הרבה מידע מדהים היום! אני באמת מתרגש לראות כמה מהמסע המדהים הזה נשאר איתך. וזכור – זה לא מבחן שבו אתה צריך להיות מושלם. זה יותר כמו חגיגה של כל הדברים המגניבים שלמדת על העולם המרתק הזה שאתה עומד לצלול לתוכו! +וואו, ספגת כל כך הרבה מידע מדהים היום! אני באמת מתרגש לראות כמה מהמסע המדהים הזה נחקק בך. וזכור – זה לא מבחן שבו צריך להיות מושלם. זו יותר חגיגה של כל הדברים המגניבים שלמדת על העולם המרתק הזה שאליו אתה עומד לצלול! -[קח את מבחן הסיכום לאחר השיעור](https://ff-quizzes.netlify.app/web/) -## סקירה ולימוד עצמי +[לקח את מבחן הערכה](https://ff-quizzes.netlify.app/web/) -**קחו את הזמן לחקור וליהנות מזה!** +## סקירה ולמידה עצמית -היום כיסיתם הרבה נושאים, וזה משהו להתגאות בו! עכשיו מגיע החלק הכיפי – לחקור את הנושאים שעוררו את סקרנותכם. זכרו, זה לא שיעורי בית – זו הרפתקה! +**קח את הזמן לךון וליהנות!** +כבר כיסית לא מעט היום, וזה משהו שצריך להתגאות בו! עכשיו מגיע החלק הכיפי – לחקור את הנושאים שהבעירו את הסקרנות שלך. תזכור, זה לא שיעורי בית – זו הרפתקה! -**צללו עמוק יותר למה שמלהיב אתכם:** +**צלול לעומק למה שמלהיב אותך:** -**התנסו בשפות תכנות:** -- בקרו באתרים הרשמיים של 2-3 שפות שתפסו את תשומת לבכם. לכל אחת יש אישיות וסיפור משלה! -- נסו כמה סביבות תכנות אונליין כמו [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), או [Replit](https://replit.com/). אל תפחדו להתנסות – אתם לא יכולים לשבור שום דבר! -- קראו על איך השפה האהובה עליכם נוצרה. באמת, חלק מהסיפורים האלה מרתקים ויעזרו לכם להבין למה השפות פועלות כפי שהן. +**תנסה בעצמך עם שפות תכנות:** +- בקר באתרי האינטרנט הרשמיים של 2-3 שפות שתפסו את תשומת ליבך. לכל אחת יש אישיות וסיפור משלה! +- נסה כמה מגרשי קוד אונליין כמו [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), או [Replit](https://replit.com/). אל תפחד להתנסות – אי אפשר לשבור שום דבר! +- קרא על איך שפת התכנות האהובה עליך נוצרה. ברצינות, כמה מהסיפורים האלו מרתקים ויעזרו לך להבין למה שפות עובדות כפי שהן עובדות. -**התרגלו לכלים החדשים שלכם:** -- הורידו את Visual Studio Code אם עדיין לא עשיתם זאת – זה חינמי ואתם הולכים לאהוב את זה! -- הקדישו כמה דקות לגלוש בשוק התוספים. זה כמו חנות אפליקציות לעורך הקוד שלכם! -- פתחו את כלי המפתחים בדפדפן שלכם ופשוט לחצו מסביב. אל תדאגו להבין הכל – פשוט תכירו את מה שיש שם. +**התרגל לכלים החדשים שלך:** +- הורד את Visual Studio Code אם עדיין לא עשית זאת – זה חינמי ותאהב את זה! +- הקדש כמה דקות לגלוש בשוק התוספים. זה כמו חנות אפליקציות לעורך הקוד שלך! +- פתח את כלי המפתחים בדפדפן שלך ותלחץ קצת כאן ושם. אל דאגה אם אינך מבין הכל – פשוט תתרגל למה שיש שם. -**הצטרפו לקהילה:** -- עקבו אחרי כמה קהילות מפתחים ב-[Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), או [GitHub](https://github.com/). קהילת התכנות מאוד מקבלת פנים למתחילים! -- צפו בכמה סרטוני תכנות ידידותיים למתחילים ביוטיוב. יש כל כך הרבה יוצרים נהדרים שם שזוכרים איך זה להיות מתחילים. -- שקלו להצטרף למפגשים מקומיים או קהילות אונליין. תאמינו לי, מפתחים אוהבים לעזור למתחילים! +**הצטרף לקהילה:** +- עקוב אחרי כמה קהילות מפתחים ב-[Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), או [GitHub](https://github.com/). קהילת התכנות פתוחה בצורה מדהימה לחדשים! +- צפה בכמה סרטונים ידידותיים למתחילים על כתיבת קוד ביוטיוב. יש כל כך הרבה יוצרים נהדרים שמזכירים מה זה להתחיל. +- שקול להצטרף למפגשים מקומיים או לקהילות אונליין. תאמין לי, מפתחים אוהבים לעזור לחדשים! + +> 🎯 **תקשיב, הנה מה שאני רוצה שתזכור**: לא מצפים ממך להפוך לקוסם קוד בן לילה! כרגע אתה פשוט מכיר את העולם החדש המדהים שאתה עומד להיות חלק ממנו. קח את הזמן, תהנה מהמסע, וזכור – כל מפתח שאתה מעריך ישב פעם בדיוק איפה שאתה עכשיו, מרגיש נלהב ואולי קצת מוצף. זה לגמרי נורמלי, וזה אומר שאתה בדרך הנכונה! -> 🎯 **הקשיבו, הנה מה שאני רוצה שתזכרו**: אף אחד לא מצפה שתהפכו לקוסמי תכנות בן לילה! כרגע, אתם רק מתחילים להכיר את העולם המדהים הזה שאתם עומדים להיות חלק ממנו. קחו את הזמן, תהנו מהמסע, וזכרו – כל מפתח שאתם מעריצים היה פעם בדיוק במקום שבו אתם נמצאים עכשיו, מרגיש נרגש ואולי קצת מוצף. זה לגמרי נורמלי, וזה אומר שאתם עושים את זה נכון. ---- ## משימה -[קריאת המסמכים](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **רמז קטן למשימה שלכם**: אני ממש אשמח לראות אתכם חוקרים כמה כלים שלא כיסינו עדיין! דלגו על העורכים, הדפדפנים וכלי שורת הפקודה שכבר דיברנו עליהם – יש יקום מדהים של כלים לפיתוח שמחכה להתגלות. חפשו כאלה שמתוחזקים באופן פעיל ויש להם קהילות תוססות ועוזרות (בדרך כלל יש להם את המדריכים הטובים ביותר ואת האנשים הכי תומכים כשאתם נתקעים וצריכים יד ידידותית). +> 💡 **דחף קטן למשימה שלך**: אני ממש אשמח לראות אותך חוקר כלים שאנחנו עדיין לא כיסינו! דלג על העורכים, הדפדפנים וכלי השורת פקודה שכבר דיברנו עליהם – יש כל כך הרבה עולם מדהים של כלי פיתוח מחכה שתגלה אותו. חפש כאלה שמטופלים באופן פעיל ויש להם קהילות תוססות ותומכות (אלו נוטות להיות עם ההדרכות הכי טובות והאנשים הכי מסבירים כשנתקעת וצריך ידידות). --- -## 🚀 ציר הזמן של מסע התכנות שלכם - -### ⚡ **מה אפשר לעשות ב-5 הדקות הבאות** -- [ ] סמנו במועדפים 2-3 אתרים של שפות תכנות שתפסו את תשומת לבכם -- [ ] הורידו את Visual Studio Code אם עדיין לא עשיתם זאת -- [ ] פתחו את כלי המפתחים בדפדפן שלכם (F12) ולחצו מסביב בכל אתר -- [ ] הצטרפו לקהילה אחת של תכנות (Dev.to, Reddit r/webdev, או Stack Overflow) - -### ⏰ **מה אפשר להשיג בשעה הקרובה** -- [ ] השלימו את מבחן הסיכום של השיעור וחשבו על התשובות שלכם -- [ ] התקינו את VS Code עם תוסף GitHub Copilot -- [ ] נסו דוגמת "Hello World" בשתי שפות תכנות שונות אונליין -- [ ] צפו בסרטון "יום בחיי מפתח" ביוטיוב -- [ ] התחילו את עבודת הבילוש שלכם על שפות תכנות (מהאתגר) - -### 📅 **ההרפתקה שלכם לשבוע הקרוב** -- [ ] השלימו את המשימה וחקרו 3 כלים חדשים לפיתוח -- [ ] עקבו אחרי 5 מפתחים או חשבונות תכנות ברשתות החברתיות -- [ ] נסו לבנות משהו קטן ב-CodePen או Replit (אפילו רק "שלום, [השם שלכם]!") -- [ ] קראו פוסט בבלוג של מפתח על מסע התכנות שלו -- [ ] הצטרפו למפגש וירטואלי או צפו בהרצאת תכנות -- [ ] התחילו ללמוד את השפה שבחרתם עם מדריכים אונליין - -### 🗓️ **הטרנספורמציה שלכם לחודש הקרוב** -- [ ] בנו את הפרויקט הקטן הראשון שלכם (אפילו דף אינטרנט פשוט נחשב!) -- [ ] תרמו לפרויקט קוד פתוח (התחילו עם תיקוני תיעוד) -- [ ] היו מנטורים למישהו שמתחיל את מסע התכנות שלו -- [ ] צרו את אתר תיק העבודות שלכם כמפתחים -- [ ] התחברו לקהילות מפתחים מקומיות או קבוצות לימוד -- [ ] התחילו לתכנן את אבן הדרך הבאה שלכם בלמידה +## 🚀 לוח הזמנים של מסע התכנות שלך + +### ⚡ **מה אפשר לעשות ב-5 הדקות הקרובות** +- [ ] שמור אתרי אינטרנט של 2-3 שפות תכנות שתפסו את תשומת ליבך +- [ ] הורד את Visual Studio Code אם עדיין לא עשית זאת +- [ ] פתח את כלי המפתחים בדפדפן (F12) ולחץ באתר כלשהו +- [ ] הצטרף לקהילת תכנות אחת (Dev.to, Reddit r/webdev, או Stack Overflow) + +### ⏰ **מה אפשר להשיג במהלך השעה הקרובה** +- [ ] סיים את המבחן לאחר השיעור והרהר בתשובות שלך +- [ ] התקן את תוסף GitHub Copilot ב-VS Code +- [ ] נסה דוגמת "Hello World" ב-2 שפות תכנות שונות אונליין +- [ ] צפה בסרטון "יום בחיי מפתח" ביוטיוב +- [ ] התחל בחקירת שפת התכנות שלך (מהאתגר) + +### 📅 **הרפתקה של שבוע שלם** +- [ ] סיים את המשימה וחקור 3 כלים חדשים לפיתוח +- [ ] עקוב אחרי 5 מפתחים או חשבונות תכנות ברשתות החברתיות +- [ ] נסה לבנות משהו קטן ב-CodePen או Replit (אפילו רק "Hello, [השמך שלך]!") +- [ ] קרא פוסט בלוג של מפתח על מסע התכנות שלו +- [ ] הצטרף למפגש וירטואלי או צפה בהרצאת תכנות +- [ ] התחל ללמוד את השפה שבחרת עם הדרכות אונליין + +### 🗓️ **הטרנספורמציה של חודש** +- [ ] בנה את הפרויקט הקטן הראשון שלך (אפילו דף אינטרנט פשוט נחשב!) +- [ ] תרום לפרויקט קוד פתוח (התחל בתיקוני תיעוד) +- [ ] היה מנטור למישהו שבא לעולם התכנות עכשיו +- [ ] צור אתר פורטפוליו כמפתח +- [ ] קשר לקהילות מפתחים מקומיות או קבוצות לימוד +- [ ] התחל לתכנן את שלב הלמידה הבא שלך ### 🎯 **בדיקת השתקפות סופית** -**לפני שתמשיכו, קחו רגע לחגוג:** -- מה הדבר האחד בתכנות שהלהיב אתכם היום? -- איזה כלי או מושג אתם רוצים לחקור קודם? -- איך אתם מרגישים לגבי התחלת מסע התכנות הזה? -- מה השאלה האחת שהייתם רוצים לשאול מפתח כרגע? +**לפני שאתה ממשיך, קח רגע לחגוג:** +- מה הדבר היחיד בתכנות שהלהיב אותך היום? +- איזה כלי או מושג אתה רוצה לחקור ראשון? +- איך אתה מרגיש לגבי התחלת מסע התכנות הזה? +- איזו שאלה היית רוצה לשאול מפתח כרגע? ```mermaid journey - title Your Confidence Building Journey - section Today - Curious: 3: You - Overwhelmed: 4: You - Excited: 5: You - section This Week - Exploring: 4: You - Learning: 5: You - Connecting: 4: You - section Next Month - Building: 5: You - Confident: 5: You - Helping Others: 5: You + title המסע שלך לבניית ביטחון עצמי + section היום + סקרן: 3: You + מוצף: 4: You + נרגש: 5: You + section השבוע הזה + חוקר: 4: You + לומד: 5: You + מתחבר: 4: You + section החודש הבא + בונה: 5: You + בטוח בעצמו: 5: You + עוזר לאחרים: 5: You ``` - -> 🌟 **זכרו**: כל מומחה היה פעם מתחיל. כל מפתח בכיר הרגיש בדיוק כמו שאתם מרגישים עכשיו – נרגש, אולי קצת מוצף, ובטוח סקרן לגבי מה שאפשרי. אתם בחברה מדהימה, והמסע הזה הולך להיות מדהים. ברוכים הבאים לעולם הנפלא של התכנות! 🎉 +> 🌟 **זכור**: כל מומחה היה פעם מתחיל. כל מפתח בכיר הרגיש בדיוק כמוך עכשיו – נלהב, אולי קצת מוצף, ומוזמן מאוד לגלות מה אפשרי. אתה בחברה מדהימה, והמסע הזה עומד להיות מרגש. ברוך הבא לעולם הנפלא של התכנות! 🎉 --- + **הצהרת אחריות**: -מסמך זה תורגם באמצעות שירות תרגום AI [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. איננו אחראים לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה. \ No newline at end of file +מסמך זה תורגם בשימוש בשירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עלולים להכיל שגיאות או אי דיוקים. יש להתייחס למסמך המקורי בשפתו כהמקור הסמכותי. למידע קריטי מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו אחראים לכל הבנה מוטעית או פרשנות שגויה הנובעת משימוש בתרגום זה. + \ No newline at end of file diff --git a/translations/he/AGENTS.md b/translations/he/AGENTS.md index dd5b489a3..b518aa9db 100644 --- a/translations/he/AGENTS.md +++ b/translations/he/AGENTS.md @@ -1,24 +1,24 @@ # AGENTS.md -## סקירת פרויקט +## סקירת הפרויקט -זהו מאגר תוכן חינוכי ללימוד יסודות פיתוח ווב למתחילים. התוכנית היא קורס מקיף בן 12 שבועות שפותח על ידי Microsoft Cloud Advocates, הכולל 24 שיעורים מעשיים המכסים JavaScript, CSS ו-HTML. +זהו מאגר תוכן חינוכי ללימוד יסודות פיתוח ווב למתחילים. תוכן הלימוד הוא קורס מקיף של 12 שבועות שפותח על ידי Microsoft Cloud Advocates, הכולל 24 שיעורים מעשיים המכסים JavaScript, CSS ו-HTML. ### רכיבים מרכזיים -- **תוכן חינוכי**: 24 שיעורים מסודרים במודולים מבוססי פרויקטים -- **פרויקטים מעשיים**: טרטיום, משחק הקלדה, תוסף דפדפן, משחק חלל, אפליקציית בנקאות, עורך קוד ועוזר צ'ט מבוסס AI -- **חידונים אינטראקטיביים**: 48 חידונים עם 3 שאלות בכל אחד (מבחני לפני/אחרי השיעור) -- **תמיכה רב-שפתית**: תרגומים אוטומטיים ל-50+ שפות באמצעות GitHub Actions -- **טכנולוגיות**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (לפרויקטים מבוססי AI) +- **תוכן חינוכי**: 24 שיעורים מובנים המחולקים למודולים מבוססי פרויקטים +- **פרויקטים מעשיים**: Terrarium, משחק הקלדה, הרחבת דפדפן, משחק חלל, אפליקציית בנקאות, עורך קוד ועוזר שיחה מבוסס AI +- **חידונים אינטראקטיביים**: 48 חידונים עם 3 שאלות כל אחד (הערכות לפני/אחרי שיעור) +- **תמיכה רב-שפתית**: תרגומים אוטומטיים ל-50+ שפות דרך GitHub Actions +- **טכנולוגיות**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (לפרויקטים מבוססי AI) ### ארכיטקטורה - מאגר חינוכי עם מבנה מבוסס שיעורים -- כל תיקיית שיעור כוללת README, דוגמאות קוד ופתרונות -- פרויקטים עצמאיים בתיקיות נפרדות (quiz-app, פרויקטים שונים בשיעורים) +- בכל תיקיית שיעור יש README, דוגמאות קוד ופתרונות +- פרויקטים עצמאיים בתיקיות נפרדות (quiz-app, פרויקטים שונים של שיעורים) - מערכת תרגום באמצעות GitHub Actions (co-op-translator) -- תיעוד מועבר דרך Docsify וזמין בפורמט PDF +- תיעוד שמוגש דרך Docsify וזמין גם כ-PDF ## פקודות התקנה @@ -30,253 +30,253 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` - -### התקנת אפליקציית החידונים (Vue 3 + Vite) + +### התקנת אפליקציית החידון (Vue 3 + Vite) ```bash cd quiz-app npm install -npm run dev # הפעל את שרת הפיתוח +npm run dev # הפעל שרת פיתוח npm run build # בנייה לפרודקשן -npm run lint # הפעל את ESLint +npm run lint # הרץ ESLint ``` - -### API לפרויקט בנק (Node.js + Express) + +### API פרויקט הבנק (Node.js + Express) ```bash cd 7-bank-project/api npm install -npm start # הפעל את שרת ה-API -npm run lint # הפעל את ESLint -npm run format # עצב עם Prettier +npm start # הפעל שרת API +npm run lint # הרץ ESLint +npm run format # עיצוב עם Prettier ``` - -### פרויקטים של תוספי דפדפן + +### פרויקטים של הרחבת דפדפן ```bash cd 5-browser-extension/solution npm install -# עקוב אחר הוראות טעינת תוספים ספציפיות לדפדפן +# עקוב אחר ההוראות לטעינת תוספים ספציפיים לדפדפן ``` - -### פרויקטים למשחק חלל + +### פרויקטים של משחק חלל ```bash cd 6-space-game/solution npm install # פתח את index.html בדפדפן או השתמש ב-Live Server ``` - -### פרויקט צ'ט (Backend בפייתון) + +### פרויקט השיחה (Python Backend) ```bash cd 9-chat-project/solution/backend/python pip install openai -# הגדר את משתנה הסביבה GITHUB_TOKEN +# הגדר משתנה סביבה GITHUB_TOKEN python api.py ``` - -## תהליך פיתוח -### לתורמים לתוכן +## תהליך הפיתוח + +### לתורמים תוכן -1. **צור פורק** של המאגר לחשבון GitHub שלך -2. **שכפל את הפורק** למחשב המקומי -3. **צור סניף חדש** לשינויים שלך +1. **בצע Fork למאגר** לחשבון ה-GitHub שלך +2. **Clone את ה-Fork** למחשב המקומי +3. **צור ענף חדש** לשינויים שלך 4. בצע שינויים בתוכן השיעור או בדוגמאות הקוד -5. בדוק את שינויים בקוד בתיקיות הפרויקטים הרלוונטיות -6. הגש בקשות משיכה לפי קווי הנחיה לתרומה +5. בדוק שינויים בקוד בתיקיות הפרויקטים הרלוונטיות +6. שלח Pull requests לפי הנחיות התרומה ### ללומדים -1. בצע פורק או שכפול של המאגר -2. נווט בתיקיות השיעורים לסדר כרונולוגי -3. קרא קבצי README לכל שיעור -4. השלם חידונים לפני השיעור בכתובת https://ff-quizzes.netlify.app/web/ -5. עבד על דוגמאות הקוד שבתיקיות השיעור -6. השלם מטלות ואתגרים -7. בצע חידונים לאחר השיעור +1. בצע Fork או Clone למאגר +2. עבור בתיקיות השיעורים בסדר כרונולוגי +3. קרא קבצי README של כל שיעור +4. מלא חידוני לפני השיעור בכתובת https://ff-quizzes.netlify.app/web/ +5. עבוד עם דוגמאות הקוד בתיקיות השיעור +6. שלם מטלות ואתגרים +7. עשה חידוני אחרי השיעור -### פיתוח בזמן אמת +### פיתוח חי -- **תיעוד**: הפעל `docsify serve` בתיקיית השורש (פורט 3000) -- **אפליקציית חידונים**: הפעל `npm run dev` בתיקיית quiz-app -- **פרויקטים**: השתמש בתוסף Live Server של VS Code לפרויקטים ב-HTML -- **פרויקטי API**: הפעל `npm start` בתיקיות ה-API המתאימות +- **תיעוד**: הרץ `docsify serve` בתיקיית השורש (פורט 3000) +- **אפליקציית חידון**: הרץ `npm run dev` בתיקיית quiz-app +- **פרויקטים**: השתמש בתוסף Live Server ב-VS Code לפרויקטי HTML +- **פרויקטי API**: הרץ `npm start` בתיקיות ה-API הרלוונטיות ## הוראות בדיקה -### בדיקת אפליקציית חידונים +### בדיקת אפליקציית החידון ```bash cd quiz-app npm run lint # בדוק בעיות בסגנון הקוד -npm run build # אמת שהבנייה הצליחה +npm run build # וודא שההידור מצליח ``` - -### בדיקת API בנק + +### בדיקת API הבנק ```bash cd 7-bank-project/api npm run lint # בדוק בעיות סגנון קוד -node server.js # אמת שהשרת מתחיל ללא שגיאות +node server.js # אשר שהשרת מתחיל ללא שגיאות ``` - + ### גישת בדיקה כללית -- זהו מאגר חינוכי ללא בדיקות אוטומטיות מקיפות -- בדיקה ידנית מתמקדת ב: - - הפעלת דוגמאות קוד ללא שגיאות - - קישורים בתיעוד עובדים כראוי - - בניית פרויקטים עוברת בהצלחה - - דוגמאות עוקבות אחרי עקרונות טובים +- מאגר חינוכי ללא בדיקות אוטומטיות יסודיות +- בדיקה ידנית ממוקדת ב: + - דוגמאות קוד רצות ללא שגיאות + - קישורים בתיעוד תקינים + - בניית פרויקטים מצליחה + - דוגמאות בהתאם לפרקטיקות מומלצות -### בדיקות לפני הגשה +### בדיקות לפני שליחה - הרץ `npm run lint` בתיקיות עם package.json -- אמת שכל הקישורים ב-markdown תקינים +- אמת קישורים ב-Markdown - בדוק דוגמאות קוד בדפדפן או Node.js -- ודא שהתרגומים שומרים על מבנה תקין +- ודא שהתרגומים שומרים על מבנה תקין -## קווי הנחיה לסגנון קוד +## קווים מנחים לסגנון קוד ### JavaScript -- השתמש בתחביר מודרני (ES6+) -- עקוב אחר קונפיגורציות ESLint סטנדרטיות בפרויקטים -- השתמש בשמות משתנים ופונקציות משמעותיים להבהרת הלמידה +- השתמש בתחביר מודרני ES6+ +- פעל לפי הגדרות ESLint סטנדרטיות במיזמים +- השתמש בשמות משתנים ופונקציות ברורים לחינוך - הוסף הערות המסבירות מושגים ללומדים -- עצב באמצעות Prettier כשמוגדר +- עיצוב עם Prettier במקומות המוגדרים ### HTML/CSS - אלמנטים סמנטיים ב-HTML5 - עקרונות עיצוב רספונסיבי -- קונבנציות שמות class ברורות -- הערות המסבירות טכניקות CSS ללומדים +- קונבציוסיות שמות מחלקות ברורה +- הערות המסבירות טכניקות CSS ללומדים ### Python -- קווי הנחיה לפי PEP 8 +- קווים מנחים לפי PEP 8 - דוגמאות קוד ברורות וחינוכיות -- רמזי טיפוסים היכן שמועילים ללמידה +- רמזים לסוגים היכן שמועילים ללמידה ### תיעוד Markdown - היררכיית כותרות ברורה -- בלוקי קוד עם ציון שפת הקוד +- קטעי קוד עם ציון שפה - קישורים למשאבים נוספים -- צילומי מסך ותמונות בתיקיית `images/` -- טקסט חלופי לתמונות לשם נגישות +- צילומי מסך ותמונות בתיקיות `images/` +- טקסט אלטרנטיבי לתמונות לנגישות ### ארגון קבצים -- שיעורים ממוספרים ברצף (1-getting-started-lessons, 2-js-basics וכו') -- בפרויקט יש תיקיות `solution/` ובדרך כלל `start/` או `your-work/` -- תמונות מאוחסנות בתיקיות `images/` ספציפיות לשיעור -- תרגומים בתיקיות `translations/{language-code}/` +- שיעורים ממוספרים ברצף (1-getting-started-lessons, 2-js-basics וכו’) +- לכל פרויקט תיקיית `solution/` ולרוב `start/` או `your-work/` +- תמונות בתיקיות `images/` עבור כל שיעור +- תרגומים במבנה `translations/{language-code}/` ## בנייה ופריסה -### פריסת אפליקציית החידונים (Azure Static Web Apps) +### פריסת אפליקציית החידון (Azure Static Web Apps) -האפליקציה quiz-app מוגדרת לפריסה ב-Azure Static Web Apps: +האפליקציה מוגדרת לפריסה ב-Azure Static Web Apps: ```bash cd quiz-app -npm run build # יוצר את התיקייה dist/ -# מבצע פריסה באמצעות זרימת העבודה של GitHub Actions בעת דחיפה ל-main +npm run build # יוצר תיקייה dist/ +# מפרסם דרך תהליך GitHub Actions בעת דחיפה ל-main ``` - -קונפיגורציית Azure Static Web Apps: -- **מיקום האפליקציה**: `/quiz-app` -- **מיקום הפלט**: `dist` -- **זרימת עבודה**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### יצירת PDF של התיעוד +הגדרות Azure Static Web Apps: +- **מיקום אפליקציה**: `/quiz-app` +- **מיקום פלט**: `dist` +- **תהליכי עבודה**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` + +### יצירת PDF תיעוד ```bash -npm install # התקן docsify-to-pdf -npm run convert # צור PDF מתוך docs +npm install # התקן את docsify-to-pdf +npm run convert # צור PDF מ-docs ``` - + ### תיעוד Docsify ```bash -npm install -g docsify-cli # התקן את Docsify באופן גלובלי -docsify serve # הפעל ב-localhost:3000 +npm install -g docsify-cli # התקן את Docsify באופן כללי +docsify serve # הפעל על localhost:3000 ``` - + ### בניות ספציפיות לפרויקט לכל תיקיית פרויקט עשוי להיות תהליך בנייה משלה: -- פרויקטי Vue: `npm run build` ליצירת חבילות הפקה -- פרויקטים סטטיים: ללא שלב בנייה, משרתים קבצים ישירות +- פרויקטי Vue: `npm run build` ליצירת חבילות ייצור +- פרויקטים סטטיים: אין שלב בנייה, שמירת קבצים ישירות -## קווי הנחיה לבקשות משיכה (PR) +## קווים מנחים לבקשת משיכה ### פורמט כותרת -השתמש בכותרות ברורות ותיאוריות המציינות את תחום השינוי: -- `[Quiz-app] הוספת חידון חדש לשיעור X` -- `[Lesson-3] תיקון שגיאה בפרויקט טרטיום` -- `[Translation] הוספת תרגום לספרדית לשיעור 5` -- `[Docs] עדכון הוראות התקנה` +השתמש בכותרות ברורות ומתארות המצביעות על תחום השינוי: +- `[Quiz-app] הוסף חידון חדש לשיעור X` +- `[Lesson-3] תקן טעות כתיב בפרויקט terrarium` +- `[Translation] הוסף תרגום ספרדי לשיעור 5` +- `[Docs] עדכן הוראות התקנה` -### בדיקות נדרשות +### בדיקות חובה -לפני הגשת PR: +לפני שליחת PR: 1. **איכות קוד**: - הרץ `npm run lint` בתיקיות הפרויקט הרלוונטיות - - תקן את כל שגיאות ואזהרות הלינט + - תקן את כל שגיאות והזהרות -2. **בדיקת בנייה**: +2. **אימות בנייה**: - הרץ `npm run build` אם רלוונטי - - ודא שבעיית בנייה לא קיימת + - ודא שאין שגיאות בבנייה 3. **אימות קישורים**: - - בדוק את כל הקישורים ב-markdown - - אמת הפניות לתמונות עובדות + - בדוק את כל קישורי Markdown + - אמת הפניות התמונה 4. **בדיקת תוכן**: - - הגהה לאיות ודקדוק - - ודא דוגמאות קוד נכונות וחינוכיות - - אמת שהתרגומים שומרים על משמעות המקור + - בדוק איות ודקדוק + - ודא שדוגמאות הקוד נכונות וחינוכיות + - אמת שהתרגומים שומרים על משמעות ### דרישות תרומה -- הסכמה ל-CLA של מיקרוסופט (בדיקה אוטומטית ב-PR הראשון) -- עקוב אחר [קוד ההתנהגות של מיקרוסופט בקוד פתוח](https://opensource.microsoft.com/codeofconduct/) -- ראה [CONTRIBUTING.md](./CONTRIBUTING.md) לקווי הנחיה מפורטים -- הפנה מספרי נושאים בתיאור ה-PR אם רלוונטי +- הסכמה ל-CLA של Microsoft (בדיקה אוטומטית בבקשה הראשונה) +- פעל לפי [קוד ההתנהגות של מיקרוסופט בקוד פתוח](https://opensource.microsoft.com/codeofconduct/) +- ראה [CONTRIBUTING.md](./CONTRIBUTING.md) להנחיות מפורטות +- כלול במידת הצורך מספרי נושאים בתיאור הבקשה ### תהליך סקירה -- סקירה עוברת על ידי מנהלים והקהילה -- בהירות חינוכית מקבלת עדיפות -- דוגמאות קוד צריכות לעקוב אחרי שיטות עבודה מומלצות עדכניות -- תרגומים נבדקים לדיוק ולהתאמה תרבותית +- בקשות משיכה ייבחנו על ידי מנהלים והקהילה +- עדיפות להקפדה על בהירות חינוכית +- דוגמאות קוד יעמדו בפרקטיקות עדכניות ומומלצות +- התרגומים יבדקו לדיוק ותאימות תרבותית ## מערכת תרגום ### תרגום אוטומטי -- משתמש ב-GitHub Actions עם זרימת העבודה co-op-translator -- מתרגם אוטומטית ל-50+ שפות +- משתמש ב-GitHub Actions עם תהליך co-op-translator +- מתרגם ל-50+ שפות אוטומטית - קבצי מקור בתיקיות הראשיות -- קבצים מתורגמים ב`translations/{language-code}/` +- קבצים מתורגמים בתיקיות `translations/{language-code}/` ### הוספת שיפורים ידניים לתרגום -1. אתר את הקובץ ב-`translations/{language-code}/` -2. בצע שיפורים תוך שמירת המבנה -3. ודא שדוגמאות הקוד ממשיכות לפעול -4. בדוק תוכן חידון מקומי אם קיים +1. אתר קובץ בתיקיית `translations/{language-code}/` +2. בצע שיפורים תוך שמירה על המבנה +3. ודא שדוגמאות הקוד עדיין מתפקדות +4. בדוק כל תוכן חידון מומלץ -### מטא מידע לתרגום +### מטא-נתוני תרגום -קבצים מתורגמים כוללים כותרת מטא-נתונים: +לקבצים מתורגמים יש כותרת מטא-נתונים: ```markdown ``` - -## איתור באגים וטיפול בבעיות + +## איתור ותיקון תקלות ### בעיות נפוצות -**אפליקציית חידונים לא מתחילה**: -- בדוק גרסת Node.js (מומלץ v14+) -- מחק `node_modules` ו-`package-lock.json`, הפעל `npm install` שוב -- בדוק קונפליקטים על הפורט (ברירת מחדל: Vite משתמש בפורט 5173) +**אפליקציית החידון לא מתחילה**: +- בדוק את גרסת Node.js (מומלץ v14+) +- מחק `node_modules` ו-`package-lock.json`, והרץ `npm install` מחדש +- בדוק אם הפורט תפוס (ברירת מחדל: Vite משתמש בפורט 5173) -**שרת API לא מתחיל**: -- אמת שגרסת Node.js היא לפחות 10 ומעלה -- בדוק האם הפורט תפוס כבר -- ודא שכל התלויות מותקנות עם `npm install` +**שרת ה-API לא מתחיל**: +- וודא שגרסת Node.js עומדת בדרישות (node >=10) +- בדוק אם הפורט תפוס +- ודא שכל התלויות מותקנות עם `npm install` -**תוסף דפדפן לא נטען**: -- ודא שמניפסט.json מעוצב כהלכה -- בדוק את קונסולת הדפדפן לשגיאות -- עקוב אחר הוראות התקנה ייעודיות לדפדפן +**הרחבת הדפדפן לא נטענת**: +- וודא שמניפסט.json מעוצב כראוי +- בדוק את קונסול הדפדפן לשגיאות +- פעל לפי הוראות התקנת ההרחבה הספציפיות לדפדפן -**בעיות בפרויקט צ'ט בפייתון**: +**בעיות בפרויקט השיחה בפייתון**: - ודא שהחבילה OpenAI מותקנת: `pip install openai` - ודא שמשתנה הסביבה GITHUB_TOKEN מוגדר -- בדוק הרשאות גישה ל-GitHub Models +- בדוק הרשאות גישה ל-GitHub Models -**Docsify לא מעביר תיעוד**: -- התקן docsify-cli גלובלי: `npm install -g docsify-cli` -- הפעל בתיקיית השורש של המאגר -- ודא שקובץ `docs/_sidebar.md` קיים +**Docsify לא מפעיל תיעוד**: +- התקן docsify-cli גלובלית: `npm install -g docsify-cli` +- הרץ מהספרייה השורשית של המאגר +- בדוק שקובץ `docs/_sidebar.md` קיים ### טיפים לסביבת פיתוח -- השתמש ב-VS Code עם תוסף Live Server לפרויקטים ב-HTML -- התקן את תוספי ESLint ו-Prettier לעיצוב עקבי -- השתמש ב-DevTools בדפדפן לאיתור באגים ב-JavaScript -- לפרויקטי Vue, התקן את תוסף Vue DevTools לדפדפן +- השתמש ב-VS Code עם תוסף Live Server לפרויקטי HTML +- התקן תוספי ESLint ו-Prettier לעיצוב עקבי +- השתמש ב-DevTools בדפדפן לניפוי שגיאות ב-JavaScript +- לפרויקטי Vue, התקן תוסף Vue DevTools בדפדפן -### שיקולים לביצועים +### שיקולי ביצועים -- כמות גדולה של קבצים מתורגמים (50+ שפות) יוצרת שכפולים גדולים -- השתמש בשכפול רדוד אם עובדים רק על התוכן: `git clone --depth 1` -- הוצא תרגומים מחיפושים בעת עבודה על תוכן באנגלית -- תהליכי בנייה עשויים להיות איטיים בהרצה ראשונה (npm install, בניית Vite) +- מספר גדול של קבצים מתורגמים (50+ שפות) מוביל לשיבוטים כבדים +- השתמש ב-clone שטחי אם עובדים רק על תוכן: `git clone --depth 1` +- אם עובדים רק על תוכן באנגלית, לא לכלול תרגומים בחיפושים +- תהליכי בנייה עשויים להיות איטיים בהרצה ראשונה (npm install, בניית Vite) ## שיקולי אבטחה ### משתני סביבה -- מפתחות API אסור שישמרו במאגר הקוד +- אסור להתחייב למאגר עם מפתחות API - השתמש בקבצי `.env` (כבר ב-.gitignore) -- תעד את משתני הסביבה הדרושים ב-README של הפרויקטים +- תעד משתני סביבה דרושים ב-README של הפרויקטים -### פרויקטים בפייתון +### פרויקטי Python - השתמש בסביבות וירטואליות: `python -m venv venv` -- שמור על התלויות מעודכנות -- טוקנים ל-GitHub צריכים להיות בעלי ההרשאות המינימליות הנחוצות +- שמור על עדכון התלויות +- אסימוני GitHub צריכים הרשאות מזעריות נדרשות -### גישה ל-GitHub Models +### גישת GitHub Models -- טוקני גישה אישית (PAT) דרושים ל-GitHub Models -- טוקנים צריכים להיות מאוחסנים כמשתני סביבה -- לעולם אל תכלול טוקנים או הרשאות בקוד +- דרוש Personal Access Tokens (PAT) לגישה ל-GitHub Models +- שמור אסימונים במשתני סביבה +- אסור להתחייב אסימונים או סיסמאות לקוד ## הערות נוספות @@ -358,51 +358,51 @@ CO_OP_TRANSLATOR_METADATA: - מתחילים מוחלטים בפיתוח ווב - סטודנטים ולומדים עצמאיים -- מורים המשתמשים בתוכנית בכיתות -- תוכן מותאם לנגישות ולבניית מיומנויות הדרגתית +- מורים המשתמשים בתוכנית בכיתה +- תוכן נגיש ובנוי לבניית מיומנויות בהדרגה ### פילוסופיה חינוכית -- גישה מבוססת פרויקטים +- גישת למידה מבוססת פרויקטים - בדיקות ידע תכופות (חידונים) -- תרגילי קידוד מעשיים -- דוגמאות ליישום בעולם האמיתי -- דגש על יסודות לפני מסגרות עבודה +- תרגילים מעשיים בקוד +- דוגמאות יישום בעולם האמיתי +- התמקדות ביסודות לפני מסגרות עבודה ### תחזוקת המאגר - קהילה פעילה של לומדים ותורמים - עדכונים שוטפים לתלויות ולתוכן -- ניטור נושאים ודיונים על ידי מנהלים -- עדכוני תרגום אוטומטיים דרך GitHub Actions +- ניהול דיונים ותקלות על ידי מנהלים +- עדכוני תרגום אוטומטיים באמצעות GitHub Actions ### משאבים קשורים -- [מודולים של Microsoft Learn](https://docs.microsoft.com/learn/) +- [מודולי Microsoft Learn](https://docs.microsoft.com/learn/) - [משאבים ב-Student Hub](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) מומלץ ללומדים -- קורסים נוספים: בינה מלאכותית גנרטיבית, מדעי הנתונים, למידת מכונה, IoT זמינים +- קורסים נוספים: Generative AI, Data Science, ML, IoT זמינים ### עבודה עם פרויקטים ספציפיים -להוראות מפורטות על פרויקטים ספציפיים, עיין בקבצי README ב: -- `quiz-app/README.md` - אפליקציית חידונים ב-Vue 3 +להוראות מפורטות לפרויקטים פרטניים, עיין בקבצי README ב: +- `quiz-app/README.md` - אפליקציית חידון ב-Vue 3 - `7-bank-project/README.md` - אפליקציית בנקאות עם אימות -- `5-browser-extension/README.md` - פיתוח תוסף דפדפן -- `6-space-game/README.md` - פיתוח משחק קנבס -- `9-chat-project/README.md` - פרויקט עוזר צ'ט מבוסס AI +- `5-browser-extension/README.md` - פיתוח הרחבת דפדפן +- `6-space-game/README.md` - פיתוח משחק מבוסס canvas +- `9-chat-project/README.md` - פרויקט עוזר שיחה מבוסס AI -### מבנה מונורפו (Monorepo) +### מבנה מונורפו -אמנם לא מונורפו קלאסי, מאגר זה מכיל פרויקטים עצמאיים מרובים: -- כל שיעור הוא עצמאי -- הפרויקטים לא חולקים תלויות -- עבד על פרויקטים נפרדים ללא השפעה על אחרים -- שכפל את כל המאגר לחווית לימוד מלאה +למרות שאינו מונורפו מסורתי, המאגר כולל מספר פרויקטים עצמאיים: +- כל שיעור עצמאי +- פרויקטים לא חולקים תלויות +- עבודה על פרויקטים נפרדים ללא השפעה הדדית +- שיבוט מלא של המאגר לחוויית תוכנית לימודים מלאה --- -**כתב ויתור**: -מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדייק, יש לקחת בחשבון שתרגומים אוטומטיים עלולים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית יש להיחשב למקור הסמכותי. עבור מידע קריטי מומלץ להשתמש בתרגום מקצועי של אדם. אנו לא אחראים לכל אי הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה. +**מידע חשוב**: +מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עלולים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית הוא המקור הסמכותי. עבור מידע קריטי מומלץ להשתמש בתרגום מקצועי על ידי בני אדם. אנו אינם אחראים לכל הבנה שגויה או פרשנות מוטעית הנובעות משימוש בתרגום זה. \ No newline at end of file diff --git a/translations/he/README.md b/translations/he/README.md index 3bad8e1e2..732fd2df5 100644 --- a/translations/he/README.md +++ b/translations/he/README.md @@ -10,70 +10,80 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# פיתוח ווב למתחילים - תוכנית לימודים +# פיתוח אתרים למתחילים - תוכנית לימודים -למדו את יסודות פיתוח האינטרנט עם הקורס המקיף בן 12 השבועות שלנו, בהנחיית מומחי Microsoft Cloud Advocates. כל אחד מ-24 השיעורים מתעמק ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרריום, תוספי דפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ומשימות מעשיות. שפרו את הכישורים שלכם ואופטמו את זכירת הידע בעזרת שיטת הלמידה המבוססת פרויקטים שלנו. התחילו את מסע הקידוד שלכם עוד היום! +למדו את יסודות פיתוח האינטרנט עם הקורס המקיף שלנו של 12 שבועות שנבנה על ידי מומחי Microsoft Cloud. כל אחד מ-24 השיעורים מתעמק ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרריום, תוספי דפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ופעילויות מעשיות. שפרו את היכולות שלכם ואופטמו את חווית הלמידה עם שיטת הלימוד המבוססת פרויקטים שלנו. התחילו את מסע התכנות שלכם היום! -הצטרפו לקהילת ה-Discord של Azure AI Foundry +הצטרפו לקהילת Azure AI Foundry ב-Discord [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -עקבו אחר השלבים הבאים כדי להתחיל להשתמש במשאבים אלו: -1. **שכפלו את המאגר**: לחצו [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **העתיקו את המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**הצטרפו ל-Discord של Azure AI Foundry ופגשו מומחים ומפתחים אחרים**](https://discord.com/invite/ByRwuEEgH4) +עקבו אחרי השלבים הבאים כדי להתחיל להשתמש במשאבים אלו: +1. **פיצול המאגר**: לחצו [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **שיבוט המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**הצטרפו ל-Azure AI Foundry בדיסקורד ובלו עם מומחים ומפתחים אחרים**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 תמיכה בריבוי שפות -#### נתמך דרך GitHub Action (אוטומטי ותמיד מעודכן) +#### נתמך באמצעות GitHub Action (אוטומטי ותמיד מעודכן) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](./README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) > **מעדיפים לשכפל מקומית?** - -> מאגר זה כולל מעל 50 תרגומים המוסיפים משמעותית לגודל ההורדה. לשכפול ללא תרגומים, השתמשו ב-sparse checkout: +> +> מאגר זה כולל מעל 50 תרגומים שונים שמגדילים משמעותית את גודל ההורדה. כדי לשכפל בלי תרגומים, השתמשו ב-sparse checkout: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> זה נותן לכם כל מה שנדרש להשלמת הקורס עם הורדה מהירה יותר. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> זה נותן לכם את כל מה שצריך בכדי להשלים את הקורס במהירות הורדה גבוהה יותר. -**אם ברצונכם שיתווספו שפות תרגום נוספות, הן מפורטות [כאן](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**אם תרצו לתמוך בשפות תרגום נוספות, הן רשומות [כאן](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -#### 🧑‍🎓 _אתה סטודנט?_ +#### 🧑‍🎓 _האם אתה תלמיד?_ -בקר ב[**עמוד הסטודנט**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) שם תמצא מקורות למתחילים, ערכות לסטודנטים ואפילו דרכים לקבל שובר תעודה חינם. זה העמוד שתרצה לשמור ולהיכנס אליו בין פעם לפעם ככל שהתוכן מתעדכן מדי חודש. +בקר ב[**דף מרכז התלמיד**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) בו תמצאו משאבי מתחילים, חבילת תלמידים ואפילו דרכים לקבל שובר הסמכה חינמי. זהו הדף שכדאי לשמור כסימנייה ולבדוק מעת לעת כאשר אנו מחליפים תוכן מדי חודש. -### 📣 הכרזה - אתגרים חדשים של GitHub Copilot Agent להשלמה! +### 📣 הכרזה - אתגרי מצב סוכן חדש ל-GitHub Copilot להשלים! -התווסף אתגר חדש, חפשו "GitHub Copilot Agent Challenge 🚀" ברוב הפרקים. זה אתגר חדש שתוכלו להשלים באמצעות GitHub Copilot ומצב סוכן. אם לא השתמשתם במצב סוכן קודם, הוא לא רק מייצר טקסט, אלא גם מסוגל ליצור ולערוך קבצים, להריץ פקודות ועוד. +אתגר חדש נוסף, חפשו "GitHub Copilot Agent Challenge 🚀" ברוב הפרקים. זהו אתגר חדש עבורכם להשלים בעזרת GitHub Copilot ומצב סוכן. אם לא השתמשתם במצב סוכן קודם, הוא מסוגל לא רק ליצור טקסט אלא גם ליצור ולערוך קבצים, להפעיל פקודות ועוד. -### 📣 הכרזה - _פרויקט חדש לבנייה עם AI גנרטיבי_ +### 📣 הכרזה - _פרויקט חדש לבנייה באמצעות AI גנרטיבי_ -פרויקט עוזר AI חדש נוסף, בדקו [את הפרויקט](./9-chat-project/README.md) +פרויקט עוזר AI חדש נוסף, בדקו את [הפרויקט](./9-chat-project/README.md) -### 📣 הכרזה - _תוכנית לימודים חדשה_ על AI גנרטיבי עבור JavaScript שוחררה +### 📣 הכרזה - _תוכנית לימודים חדשה_ על AI גנרטיבי ל-JavaScript זה עתה שוחררה -אל תפספסו את תוכנית ה-AI הגנרטיבי החדשה שלנו! +אל תפספסו את תוכנית הלימודים החדשה שלנו ב-AI גנרטיבי! -בקרו בכתובת [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) כדי להתחיל! +בקרו ב-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) כדי להתחיל! ![Background](../../translated_images/he/background.148a8d43afde5730.webp) -- שיעורים שמכסים הכל מהיסודות ועד RAG. -- אינטראקציה עם דמויות היסטוריות באמצעות GenAI ואפליקציית הליווי שלנו. -- תסריטוני כיף ומרתק, תעברו בזמן! +- שיעורים שמכסים הכל מהבסיס ועד RAG. +- התקשורת עם דמויות היסטוריות באמצעות GenAI והאפליקציה המלווית שלנו. +- נרטיב מהנה ומרתק, תנסו נסיעה בזמן! ![character](../../translated_images/he/character.5c0dd8e067ffd693.webp) -כל שיעור כולל משימה להשלמה, בדיקת ידע ואתגר שידריכו אתכם בנושא כמו: -- הפעלה והנדסת פקודות Prompting +כל שיעור כולל מטלה להשלים, בדיקת ידע ואתגר שינחו אתכם בלימוד נושאים כגון: +- הנעת פקודות והנדסת פרומפטים - יצירת אפליקציות טקסט ותמונה - אפליקציות חיפוש @@ -81,190 +91,189 @@ -## 🌱 התחלה +## 🌱 התחלת העבודה -> **מדריכים**, כללנו [הצעות](for-teachers.md) לאופן השימוש בתוכנית זו. נשמח למשובכם [בפורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **מורים**, כללנו [כמה הצעות](for-teachers.md) לשימוש בתוכנית לימודים זו. נשמח למשוב שלכם [בפורום הדיונים שלנו](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, לכל שיעור, התחילו בחידון טרם ההרצאה ועברו על חומר ההרצאה, השלימו פעילויות שונות ובדקו את הבנתכם בחידון לאחר ההרצאה. +**[לומדים](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, עבור כל שיעור, התחילו בחידון מקדים ועברו על חומר ההרצאה, השלימו פעילויות שונות ובדקו את ההבנה שלכם עם החידון לאחר ההרצאה. -כדי לשפר את חוויית הלמידה, התחברו עם חבריכם לעבודה משותפת על הפרויקטים! דיונים מעודדים בפורום הדיונים שלנו בכתובת [https://github.com/microsoft/Web-Dev-For-Beginners/discussions](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) שם צוות המודרטורים שלנו זמין לענות על שאלותיכם. +כדי לשפר את חוויית הלמידה שלכם, התחברו לחברים לקבוצות עבודה על הפרויקטים יחד! עידוד דיונים בפורום הדיונים שלנו [בפורום הדיונים](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) בו צוות המנהלים שלנו יהיה זמין למענה על שאלותכם. -להרחבת ההשכלה שלכם, אנו ממליצים בחום לבדוק את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) לחומרים נוספים ללימוד. +לקידום הלימודים, אנו ממליצים בחום לבדוק את [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) למשאבי לימוד נוספים. ### 📋 הקמת סביבת הפיתוח שלכם -לתוכנית הלימודים הזו יש סביבת פיתוח מוכנה! כשמתחילים, תוכלו לבחור להריץ את התוכנית ב-[Codespace](https://github.com/features/codespaces/) (_סביבת דפדפן, ללא צורך בהתקנות_), או מקומית במחשב שלכם באמצעות עורך טקסט כמו [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +לתוכנית הלימודים הזו יש סביבת פיתוח מוכנה לשימוש! כאשר תתחילו, תוכלו לבחור להריץ את תוכנית הלימודים ב-[Codespace](https://github.com/features/codespaces/) (_סביבת דפדפן ללא צורך בהתקנות_), או מקומית במחשב שלכם באמצעות עורך טקסט כמו [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### צרו את המאגר שלכם -כדי שיהיה לכם קל לשמור את העבודה, מומלץ ליצור העתק משלכם של המאגר. תוכלו לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש הדף. זה ייצור מאגר חדש בחשבון GitHub שלכם עם העתק של תוכנית הלימודים. +כדי שתוכלו לשמור בקלות את העבודה שלכם, מומלץ ליצור עותק אישי של המאגר. ניתן לעשות זאת על ידי לחיצה על כפתור **Use this template** בראש הדף. זה ייצור מאגר חדש בחשבון GitHub שלכם עם עותק של תוכנית הלימודים. -עקבו אחר השלבים הבאים: -1. **שכפלו את המאגר**: לחצו על כפתור "Fork" בפינה הימנית-עליונה של הדף. -2. **העתיקו את המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +עקבו אחרי השלבים הבאים: +1. **פיצול המאגר**: לחצו על כפתור "Fork" בפינה הימנית העליונה של הדף הזה. +2. **שיבוט המאגר**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### הרצת תוכנית הלימודים ב-Codespace -בעותק המאגר שיצרתם, לחצו על כפתור **Code** ובחרו **Open with Codespaces**. זה ייצור לכם Codespace חדש לעבודה. +בעותק שיצרתם של מאגר זה, לחצו על כפתור **Code** ובחרו **Open with Codespaces**. זה ייצור Codespace חדש עבורכם לעבוד בו. ![Codespace](../../translated_images/he/createcodespace.0238bbf4d7a8d955.webp) -#### הרצת תוכנית הלימודים במחשב שלכם - -כדי להריץ את תוכנית הלימודים במחשב שלכם, תזדקקו לעורך טקסט, דפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [מבוא לשפות תכנות וכלי עבודה](../../1-getting-started-lessons/1-intro-to-programming-languages), יסייע לכם לבחור מבין אפשרויות שונות לכל אחד מהכלים הללו. +#### הרצת תוכנית הלימודים מקומית במחשב שלכם -ההמלצה שלנו היא להשתמש ב-[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) כעורך, שיש לו גם [טרמינל](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) מובנה. ניתן להוריד את Visual Studio Code [פה](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +להריץ תוכנית לימודים זו במחשב שלכם, תזדקקו לעורך טקסט, לדפדפן וכלי שורת פקודה. השיעור הראשון שלנו, [הקדמה לשפות תכנות וכלי עבודה](../../1-getting-started-lessons/1-intro-to-programming-languages), יכוון אתכם דרך אפשרויות שונות לכל אחד מהכלים הללו כדי שתוכלו לבחור את המתאים לכם ביותר. - -1. העתיקו את המאגר שלכם למחשב. ניתן לעשות זאת על ידי לחיצה על כפתור **Code** והעתקת ה-URL: +ההמלצה שלנו היא להשתמש ב-[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) כעורך שלכם, שיש גם [טרמינל](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) מובנה. ניתן להוריד את Visual Studio Code [כאן](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. שכפל את המאגר שלך למחשב שלך. ניתן לעשות זאת על ידי לחיצה על לחצן **Code** והעתקת כתובת ה-URL: [CodeSpace](./images/createcodespace.png) -ואז, פתח את [הטרמינל](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) בתוך [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) והריץ את הפקודה הבאה, כשהחלפת את `` בקישור שהעתקת כעת: + + לאחר מכן, פתח את [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) והרץ את הפקודה הבאה, כשהחלף את `` בכתובת ה-URL שהעתקת זה עתה: ```bash git clone ``` -2. פתח את התיקיה ב-Visual Studio Code. תוכל לעשות זאת על ידי לחיצה על **File** > **Open Folder** ובחירת התיקיה שהעתקת. +2. פתח את התיקייה ב-Visual Studio Code. ניתן לעשות זאת על ידי לחיצה על **File** > **Open Folder** ובחירת התיקייה ששכפלת זה עתה. + > הרחבות מומלצות ל-Visual Studio Code: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - לתצוגה מקדימה של דפי HTML בתוך Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - כדי לעזור לך לכתוב קוד מהר יותר +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - לתצוגת תצוגה מקדימה של דפי HTML בתוך Visual Studio Code +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - לעזור לך לכתוב קוד מהר יותר -## 📂 בכל שיעור כלולים: +## 📂 כל שיעור כולל: -- סקייטנוט אופציונלי -- וידאו משלים אופציונלי -- חידון חימום לפני השיעור +- הערת רישום אופציונלית +- וידאו תומך אופציונלי +- בחן חימום לפני השיעור - שיעור כתוב -- לשיעורים מבוססי פרויקטים, מדריכים צעד-אחר-צעד כיצד לבנות את הפרויקט +- לשיעורים מבוססי פרויקט, מדריכים שלב אחרי שלב כיצד לבנות את הפרויקט - בדיקות ידע - אתגר -- קריאה משלימה +- קריאה תומכת - מטלה -- [חידון לאחר השיעור](https://ff-quizzes.netlify.app/web/) +- [בחן לאחר השיעור](https://ff-quizzes.netlify.app/web/) -> **הערה לגבי חידונים**: כל החידונים נמצאים בתיקיית Quiz-app, סך הכול 48 חידונים עם שלוש שאלות כל אחד. הם זמינים [כאן](https://ff-quizzes.netlify.app/web/) אפליקציית החידונים יכולה לפעול מקומית או להיות מופעלת באז'ור; עקוב אחר ההוראות בתיקיית `quiz-app`. +> **הערה על החנים**: כל החנים נמצאים בתיקיית Quiz-app, 48 חנים בסך הכל של שלוש שאלות כל אחד. הם זמינים [כאן](https://ff-quizzes.netlify.app/web/) אפליקציית החנים ניתנת להרצה מקומית או פריסה ב-Azure; עקוב אחר ההוראות שבתיקיית `quiz-app`. ## 🗃️ שיעורים -| | שם הפרויקט | מושגים שנלמדים | מטרות הלמידה | שיעור קשור | מחבר | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | התחלה | מבוא לתכנות וכלי העבודה | ללמוד את היסודות הבסיסיים של רוב שפות התכנות ועל תוכנה שעוזרת למפתחים מקצועיים לבצע את עבודתם | [מבוא לשפות תכנות וכלי עבודה](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | התחלה | יסודות GitHub, כולל עבודה בצוות | כיצד להשתמש ב-GitHub בפרויקט שלך, כיצד לשתף פעולה עם אחרים על בסיס קוד | [מבוא ל-GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | התחלה | נגישות | ללמוד את יסודות הנגישות באינטרנט | [יסודות הנגישות](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | יסודות JS | סוגי נתונים ב-JavaScript | היסודות של סוגי הנתונים ב-JavaScript | [סוגי נתונים](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | יסודות JS | פונקציות ומתודות | ללמוד על פונקציות ומתודות לניהול זרימת הלוגיקה של האפליקציה | [פונקציות ומתודות](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | יסודות JS | קבלת החלטות עם JS | ללמוד איך ליצור תנאים בקוד שלך באמצעות שיטות לקבלת החלטות | [קבלת החלטות](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | יסודות JS | מערכים ולולאות | עבודה עם נתונים באמצעות מערכים ולולאות ב-JavaScript | [מערכים ולולאות](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [טרריום](./3-terrarium/solution/README.md) | HTML בפועל | לבנות את ה-HTML ליצירת טרריום מקוון, התמקדות בבניית פריסת דף | [מבוא ל-HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [טרריום](./3-terrarium/solution/README.md) | CSS בפועל | לבנות את ה-CSS לעיצוב הטרריום המקוון, התמקדות ביסודות CSS כולל התאמת דף להגדרה רספונסיבית | [מבוא ל-CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [טרריום](./3-terrarium/solution/README.md) | סגירות JavaScript, מניפולציה של DOM | לבנות את הקוד ב-JavaScript להפעלת הטרריום כממשק גרירה ושחרור, עם דגש על סגירות ומניפולציה על ה-DOM | [סגירות JavaScript ומניפולציה על DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [משחק הקלדה](./4-typing-game/solution/README.md) | בניית משחק הקלדה | ללמוד איך להשתמש באירועי לוח מקשים כדי להניע את לוגיקת אפליקציית ה-JavaScript שלך | [תכנות מונחה אירועים](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | עבודה עם דפדפנים | ללמוד איך דפדפנים פועלים, ההיסטוריה שלהם וכיצד לבנות את האלמנטים הראשונים של תוסף דפדפן | [אודות דפדפנים](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | בניית טופס, קריאה ל-API ואחסון משתנים בזיכרון מקומי | לבנות את אלמנטי ה-JavaScript של תוסף הדפדפן שלך כדי לקרוא ל-API באמצעות משתנים המאוחסנים בזיכרון המקומי | [APIs, טפסים וזיכרון מקומי](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [תוסף דפדפן ירוק](./5-browser-extension/solution/README.md) | תהליכים ברקע בדפדפן, ביצועי רשת | שימוש בתהליכים ברקע של הדפדפן כדי לנהל את הסמל של התוסף; ללמוד על ביצועי רשת וכמה אופטימיזציות לשיפור ביצועים | [משימות רקע וביצועים](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [משחק חלל](./6-space-game/solution/README.md) | פיתוח משחק מתקדם יותר עם JavaScript | ללמוד על ירושה באמצעות מחלקות וקומפוזיציה ודפוס הפרסום/הרשמה, כהכנה לבניית משחק | [מבוא לפיתוח משחק מתקדם](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [משחק חלל](./6-space-game/solution/README.md) | ציור על קנבס | ללמוד על Canvas API, המשמש לציור אלמנטים על המסך | [ציור על קנבס](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [משחק חלל](./6-space-game/solution/README.md) | הזזת אלמנטים על המסך | לגלות כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-Canvas API | [הזזת אלמנטים](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [משחק חלל](./6-space-game/solution/README.md) | איתור התנגשויות | לגרום לאלמנטים להתנגש ולהגיב זה לזה באמצעות לחיצות מקשים ולספק פונקציית קירור לוודא ביצועים טובים במשחק | [איתור התנגשויות](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [משחק חלל](./6-space-game/solution/README.md) | ניהול ניקוד | ביצוע חישובים מתמטיים בהתאם למצב ולביצועי המשחק | [ניהול ניקוד](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [משחק חלל](./6-space-game/solution/README.md) | סיום והתחלה מחדש של המשחק | ללמוד על סיום והתחלה מחדש של המשחק, כולל ניקוי משאבים ואתחול ערכי משתנים | [תנאי סיום](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | תבניות HTML ונתיבים באפליקציית רשת | ללמוד איך ליצור את השלד של אתר רב-דפי באמצעות ניתוב ותבניות HTML | [תבניות HTML ונתיבים](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | בניית טופס התחברות והרשמה | ללמוד על בניית טפסים וטיפול בוולידציה | [טפסים](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | דרכי שליפה ושימוש בנתונים | כיצד זורמים הנתונים אל תוך האפליקציה וממנה, כיצד לשלוף, לאחסן ולהיפטר מהם | [נתונים](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [אפליקציית בנקאות](./7-bank-project/solution/README.md) | מושגי ניהול מצב | ללמוד כיצד האפליקציה שומרת ומנהלת מצב תכנית | [ניהול מצב](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [קוד דפדפן / VScode](../../8-code-editor) | עבודה עם VScode | ללמוד כיצד להשתמש בעורך קוד| [שימוש בעורך קוד VScode](./8-code-editor/1-using-a-code-editor/README.md) | כריס | -| 26 | [עוזרי AI](./9-chat-project/README.md) | עבודה עם AI | ללמוד איך לבנות עוזר AI משלך | [פרויקט עוזר AI](./9-chat-project/README.md) | כריס | +| | שם הפרויקט | המושגים הנלמדים | יעדי הלמידה | השיעור המקושר | מחבר | +| :-: | :------------------------------------------------------: | :-----------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------: | :-------------------: | +| 01 | התחלה מהירה | מבוא לתכנות וכלי המקצוע | למד את היסודות של רוב שפות התכנות ועל תוכנות המסייעות למפתחים מקצועיים לבצע את עבודתם | [Introduction to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | התחלה מהירה | יסודות GitHub, כולל עבודה עם צוות | כיצד להשתמש ב-GitHub בפרויקט שלך, כיצד לשתף פעולה עם אחרים בקוד | [Introduction to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | התחלה מהירה | נגישות | למד את היסודות של נגישות באינטרנט | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | יסודות JS | טיפוסי נתונים ב-JavaScript | היסודות של טיפוסי הנתונים ב-JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | יסודות JS | פונקציות ושיטות | למד על פונקציות ושיטות לניהול זרימת הלוגיקה של האפליקציה | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | יסודות JS | קבלת החלטות עם JS | למד כיצד ליצור תנאים בקוד שלך באמצעות שיטות קבלת החלטות | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | יסודות JS | מערכים ולולאות | עבודה עם נתונים באמצעות מערכים ולולאות ב-JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML בתרגול | בניית HTML ליצירת טרריום מקוון, תוך דגש על בניית פריסת עמוד | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS בתרגול | בניית CSS לעיצוב הטרריום המקוון, התמקדות ביסודות ה-CSS כולל עיצוב תגובתי של העמוד | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | סגירות JavaScript, מניפולציה של DOM | בניית JavaScript להפעלת הטרריום כממשק גרירה וגרירה, התמקדות בסגירות ומניפולציה של DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | בניית משחק הקלדה | למד כיצד להשתמש באירועי מקלדת כדי להניע את הלוגיקה של אפליקציית ה-JavaScript שלך | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | עבודה עם דפדפנים | למד כיצד דפדפנים פועלים, ההיסטוריה שלהם, וכיצד לבנות את האלמנטים הראשונים של תוסף דפדפן | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | בניית טופס, קריאה ל-API ואחסון משתנים באחסון מקומי | בניית אלמנטים של JavaScript בתוסף הדפדפן שלך לקריאה ל-API תוך שימוש במשתנים המאוחסנים באחסון מקומי | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | תהליכים ברקע בדפדפן, ביצועי רשת | שימוש בתהליכים ברקע של הדפדפן כדי לנהל את האייקון של התוסף; לימוד על ביצועים ואופטימיזציות באינטרנט | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | פיתוח משחק מתקדם יותר ב-JavaScript | למד על ירושה באמצעות מחלקות והרכבה ודפוס Pub/Sub, כהכנה לבניית משחק | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | ציור ב-canvas | למד על ה-Canvas API, המשמש לציור אלמנטים על המסך | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | הזזת אלמנטים על המסך | גלה כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | זיהוי התנגשויות | לגרום לאלמנטים להתנגש ולתגובה זה לזה באמצעות לחיצות מקשים ולספק פונקציית קירור להבטחת ביצועי המשחק | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | שמירת ניקוד | בצע חישובים מתמטיים על בסיס מצב וביצועי המשחק | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | סיום והפעלה מחדש של המשחק | למד על סיום והפעלה מחדש של המשחק, כולל ניקוי משאבים ואיפוס ערכי משתנים | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | תבניות HTML ונתיבים באפליקציית רשת | למד כיצד ליצור את השלד של ארכיטקטורת אתר אינטרנט מרובה דפים באמצעות נתיבים ותבניות HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | בניית טופס כניסה והרשמה | למד על בניית טפסים וטיפול בשגרות אימות | [Forms](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | שיטות של שליפה ושימוש בנתונים | כיצד נתונים זורמים לתוך ומחוץ לאפליקציה שלך, כיצד לשלוף אותם, לאחסן ולפנות אליהם | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | מושגי ניהול מדינה | למד כיצד האפליקציה שלך שומרת מדינה וכיצד לנהל אותה תוכניתית | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | עבודה עם VScode | למד להשתמש בעורך קוד | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | עבודה עם AI | למד לבנות עוזר AI משלך | [AI Assistant project](./9-chat-project/README.md) | Chris | ## 🏫 פדגוגיה תכנית הלימודים שלנו מעוצבת עם שני עקרונות פדגוגיים מרכזיים: * למידה מבוססת פרויקטים -* חידונים תכופים +* חנים תכופים -הبرنامج מלמד את יסודות ה-JavaScript, HTML ו-CSS, וכן את הכלים והטכניקות העדכניות ביותר שמשתמשים בהם מפתחי אתרים כיום. לתלמידים תהיה הזדמנות לפתח ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון חלל-פולשנים, ואפליקציית בנקאות לעסקים. עם סיום הסדרה, התלמידים ירכשו הבנה מעמיקה של פיתוח אינטרנט. +הקורס מלמד את היסודות של JavaScript, HTML ו-CSS, וכן את הכלים והטכניקות העדכניים ביותר בהם משתמשים מפתחי האינטרנט של היום. לסטודנטים תהיה הזדמנות לפתח ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון פלישת החלל ואפליקציית בנקאות לעסקים. בסיום הסדרה הסטודנטים ירכשו הבנה איתנה של פיתוח ווב. -> 🎓 תוכל לקחת את השיעורים הראשונים בתכנית זו כ-[נתיב למידה](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) באתר Microsoft Learn! +> 🎓 ניתן לקחת את כמה השיעורים הראשונים בתכנית זו כ-[מרכז למידה](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ב-Microsoft Learn! -על ידי וידוא שהתוכן מתאים לפרויקטים, התהליך הופך למרתק יותר עבור התלמידים ושימור המושגים ישתפר. בנוסף, כתבנו כמה שיעורים התחלתיים ביסודות JavaScript כדי להציג מושגים, יחד עם וידאו מ"קולקציית הסדרה למתחילים ב-JavaScript" (קישור) וחלק מהמחברים בה גם תרמו לתכנית זו. +על ידי הבטחת התאמה של התכנים לפרויקטים, התהליך נעשה מעניין יותר עבור הסטודנטים והחזקת המושגים תוגבר. כמו כן, כתבנו כמה שיעורי פתיחה ביסודות JavaScript כדי להציג מושגים, יחד עם וידאו מסדרת "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" של סרטוני הדרכה, שחלק מהמחברים שלהם תרמו לתכנית זו. -בנוסף, חידון זול לפני השיעור קובע את כוונת התלמיד ללמוד נושא, בעוד חידון שני אחרי השיעור מבטיח שימור נוסף. תכנית זו תוכננה להיות גמישה ומהנה וניתן לקחת אותה כולה או חלקית. הפרויקטים מתחילים קטנים והופכים למורכבים יותר עד סוף מחזור של 12 שבועות. +בנוסף, בחן ללא סיכון לפני השיעור מגדיר את כוונת הסטודנט ללמוד נושא, בעוד בחן שני לאחר השיעור מבטיח החזקה נוספת. תכנית הלימודים עוצבה להיות גמישה ומהנה וניתן לקחת אותה בשלמותה או בחלקים. הפרויקטים מתחילים קטנים והופכים למורכבים יותר לקראת סיום מחזור של 12 שבועות. -בעוד שנמנענו במכוון מהכנסת מסגרות JavaScript כדי להתרכז בכישורים הבסיסיים הדרושים למפתח ווב לפני אימוץ מסגרת, הצעד הבא הטוב להשלים תכנית זו הוא ללמוד על Node.js דרך קולקציית וידאו אחרת: "[סדרה למתחילים ל-Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +בעוד שהימנענו בכוונה מהכנסת מסגרות JavaScript כדי להתמקד בכישורים הבסיסיים הנדרשים כמפתח ווב לפני אימוץ מסגרת, צעד טוב להשלמת תכנית זו הוא ללמוד על Node.js דרך אוסף וידאו נוסף: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> בקר ב-[קוד ההתנהגות שלנו](CODE_OF_CONDUCT.md) ובקווים המנחים ל[תרומה](CONTRIBUTING.md). נשמח למשוב בונה ממך! +> בקר במדריך ההתנהגות שלנו [Code of Conduct](CODE_OF_CONDUCT.md) ובכללי ההשתתפות שלנו [Contributing](CONTRIBUTING.md). נשמח למשובכם הבונה! ## 🧭 גישה לא מקוונת -תוכל להפעיל תיעוד זה במצב לא מקוון על ידי שימוש ב-[Docsify](https://docsify.js.org/#/). פצל את הריפו, [התקן את Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלך, ואז בתיקיית השורש של הריפו, הקלד `docsify serve`. האתר יופעל על פורט 3000 ב-localhost שלך: `localhost:3000`. - -## 📘 PDF - -ניתן למצוא PDF של כל השיעורים [כאן](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +ניתן להפעיל תיעוד זה במצב לא מקוון באמצעות [Docsify](https://docsify.js.org/#/). נסה לפצל מאגר זה, [התקן Docsify](https://docsify.js.org/#/quickstart) במחשב המקומי שלך, ואז בתיקיית השורש של המאגר הקלד `docsify serve`. האתר יופעל בפורט 3000 על ה-localhost שלך: `localhost:3000`. +## 📘 קובץ PDF +ניתן למצוא קובץ PDF של כל השיעורים [כאן](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 קורסים נוספים -הצוות שלנו מייצר קורסים נוספים! קראו עוד: + +הצוות שלנו מפיק קורסים נוספים! בדקו את: ### LangChain -[![LangChain4j למתחילים](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) -[![LangChain.js למתחילים](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) -[![LangChain למתחילים](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- ### Azure / Edge / MCP / סוכנים -[![AZD למתחילים](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Edge AI למתחילים](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP למתחילים](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![סוכני AI למתחילים](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- -### סדרת בינה מלאכותית מחוללת -[![בינה מלאכותית מחוללת למתחילים](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![בינה מלאכותית מחוללת (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) -[![בינה מלאכותית מחוללת (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) -[![בינה מלאכותית מחוללת (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) +### סדרת בינה מלאכותית גנרטיבית +[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) +[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) +[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- -### למידה בסיסית -[![למידת מכונה למתחילים](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![מדע הנתונים למתחילים](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![בינה מלאכותית למתחילים](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) -[![אבטחת סייבר למתחילים](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![פיתוח ווב למתחילים](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![אינטרנט של הדברים למתחילים](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![פיתוח XR למתחילים](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) +### לימוד יסודי +[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- -### סדרת קופילוט -[![קופילוט לתכנות זוגי עם AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) -[![קופילוט ל-C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) -[![הרפתקאות קופילוט](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +### סדרת Copilot +[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) +[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) ## קבלת עזרה -אם אתה נתקל בקשיים או שיש לך שאלות בנוגע לבניית אפליקציות AI. הצטרף ללומדים ולעורכי תוכנה מנוסים בדיונים על MCP. זו קהילה תומכת שבה שאלות מתקבלות בשמחה והידע משותף בחופשיות. +אם אתה נתקע או יש לך שאלות לגבי בניית אפליקציות בינה מלאכותית. הצטרף ללומדים אחרים ומפתחים מנוסים בדיונים על MCP. זוהי קהילה תומכת שבה שאלות מתקבלות בברכה והידע משותף בחופשיות. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -אם יש לך משוב על המוצר או שגיאות בזמן הבנייה, בקר ב: +אם יש לך משוב על המוצר או שגיאות בזמן בנייה, בקר: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## רישיון -מאגר זה מורשה תחת רישיון MIT. ראה את הקובץ [LICENSE](../../LICENSE) לפרטים נוספים. +מאגר זה מורשה תחת רישיון MIT. ראה את קובץ [LICENSE](../../LICENSE) למידע נוסף. --- -**כתב ויתור:** -מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון כי תרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית יהווה את המקור הרשמי והמחייב. למידע קריטי מומלץ להשתמש בתרגום מקצועי על ידי מתרגם אנושי. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעים משימוש בתרגום זה. +**כתב ויתור**: +מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון כי תרגומים אוטומטיים עלולים להכיל טעויות או ליקויים. יש להתייחס למסמך המקורי בשפתו המקורית כמקור סמכותי. למידע קריטי מומלץ לפנות לתרגום מקצועי על ידי אדם. איננו אחראים לכל אי הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה. \ No newline at end of file diff --git a/translations/nl/.co-op-translator.json b/translations/nl/.co-op-translator.json index 3541b2556..db1723649 100644 --- a/translations/nl/.co-op-translator.json +++ b/translations/nl/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-04T01:51:13+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T13:39:14+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "nl" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:38:09+00:00", + "translation_date": "2026-03-06T13:50:56+00:00", "source_file": "AGENTS.md", "language_code": "nl" }, @@ -516,8 +516,8 @@ "language_code": "nl" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:33:51+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T13:36:25+00:00", "source_file": "README.md", "language_code": "nl" }, diff --git a/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md index d611eeef9..3867a7f3b 100644 --- a/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,181 @@ -# Introductie tot programmeertalen en moderne ontwikkeltools +# Introductie tot Programmeertalen en Moderne Ontwikkelaarstools + +Hey daar, toekomstige ontwikkelaar! 👋 Mag ik je iets vertellen dat me elke dag nog kippenvel geeft? Je staat op het punt te ontdekken dat programmeren niet alleen over computers gaat – het gaat erom dat je echte superkrachten hebt om je wildste ideeën tot leven te brengen! -Hoi daar, toekomstige ontwikkelaar! 👋 Mag ik je iets vertellen dat me elke dag weer kippenvel bezorgt? Je staat op het punt te ontdekken dat programmeren niet alleen over computers gaat – het is alsof je superkrachten krijgt om je wildste ideeën tot leven te brengen! +Je kent dat moment wel wanneer je je favoriete app gebruikt en alles gewoon perfect klikt? Wanneer je op een knop tikt en er iets magisch gebeurt waardoor je denkt "wow, hoe hebben ze DAT gedaan?" Wel, iemand net zoals jij – waarschijnlijk om 2 uur ’s nachts in zijn favoriete koffietent met zijn derde espresso – heeft de code geschreven die die magie creëerde. En hier komt het deel dat je versteld zal doen staan: aan het einde van deze les begrijp je niet alleen hoe ze het deden, maar je staat te popelen om het zelf te proberen! -Ken je dat moment waarop je je favoriete app gebruikt en alles gewoon perfect werkt? Wanneer je op een knop drukt en er iets magisch gebeurt waardoor je denkt: "Wow, hoe hebben ze DAT gedaan?" Nou, iemand zoals jij – waarschijnlijk zittend in hun favoriete koffietentje om 2 uur 's nachts met hun derde espresso – heeft de code geschreven die die magie creëerde. En hier komt het: aan het einde van deze les begrijp je niet alleen hoe ze dat deden, maar sta je te popelen om het zelf te proberen! +Kijk, ik snap helemaal dat programmeren nu misschien intimiderend aanvoelt. Toen ik net begon, dacht ik eerlijk gezegd dat je een soort rekenwonder moest zijn of al aan het coderen moest zijn sinds je vijf jaar was. Maar hier is wat mijn perspectief compleet veranderde: programmeren is precies als het leren voeren van gesprekken in een nieuwe taal. Je begint met "hallo" en "dank je," dan werk je toe naar het bestellen van koffie, en voor je het weet, voer je diepe filosofische gesprekken! Maar in dit geval heb je gesprekken met computers, en eerlijk? Zij zijn de meest geduldige gesprekspartners die je ooit zult hebben – ze beoordelen je fouten nooit en ze zijn altijd enthousiast om het opnieuw te proberen! -Luister, ik snap het helemaal als programmeren nu nog intimiderend lijkt. Toen ik begon, dacht ik eerlijk gezegd dat je een soort wiskundig genie moest zijn of al vanaf je vijfde aan het coderen moest zijn. Maar dit veranderde mijn hele kijk: programmeren is precies zoals het leren van een nieuwe taal. Je begint met "hallo" en "dank je," werkt toe naar het bestellen van koffie, en voor je het weet voer je diepe filosofische gesprekken! Alleen in dit geval voer je gesprekken met computers, en eerlijk? Ze zijn de meest geduldige gesprekspartners die je ooit zult hebben – ze oordelen nooit over je fouten en zijn altijd bereid om opnieuw te proberen! +Vandaag gaan we de ongelooflijke tools verkennen die moderne webontwikkeling niet alleen mogelijk maken, maar ook ronduit verslavend. Ik heb het over precies dezelfde editors, browsers en workflows die ontwikkelaars bij Netflix, Spotify en je favoriete indie-appstudio elke dag gebruiken. En hier komt het deel waar je een vreugdedansje van gaat doen: de meeste van deze professionele, industriestandaardtools zijn helemaal gratis! -Vandaag gaan we de geweldige tools verkennen die moderne webontwikkeling niet alleen mogelijk maken, maar ook verslavend leuk. Ik heb het over dezelfde editors, browsers en workflows die ontwikkelaars bij Netflix, Spotify en je favoriete indie-appstudio elke dag gebruiken. En hier komt het deel dat je een vreugdedansje laat doen: de meeste van deze professionele, industrienorm-tools zijn helemaal gratis! - -![Intro Programmering](../../../../translated_images/nl/webdev101-programming.d6e3f98e61ac4bff.webp) +![Intro Programming](../../../../translated_images/nl/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore + title Je Programmeerreis Vandaag + section Ontdekken + Wat is Programmeren: 5: You + Programmeertalen: 4: You + Overzicht Hulpmiddelen: 5: You + section Verkennen Code Editors: 4: You Browsers & DevTools: 5: You Command Line: 3: You - section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + section Oefenen + Taal Detective: 4: You + Hulpmiddel Verkenning: 5: You + Community Connectie: 5: You ``` +## Laten We Kijken Wat Je Al Weet! -## Laten we kijken wat je al weet! +Voordat we aan het leuke gedeelte beginnen, ben ik benieuwd – wat weet jij al over deze programmeerwereld? En luister, mocht je naar deze vragen kijken en denken "ik heb er letterlijk geen idee van," dan is dat niet alleen prima, het is perfect! Dat betekent dat je precies op de juiste plek bent. Zie deze quiz als een warming-up voor een workout – we maken die breinspieren alvast los! -Voordat we in de leuke dingen duiken, ben ik benieuwd – wat weet je al over deze programmeerwereld? En luister, als je naar deze vragen kijkt en denkt "Ik heb echt geen idee," dan is dat niet alleen oké, het is perfect! Dat betekent dat je precies op de juiste plek bent. Zie deze quiz als een warming-up voor een workout – we maken gewoon die hersenspieren warm! +[Neem de pre-les quiz](https://ff-quizzes.netlify.app/web/) -[Doe de pre-les quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## Het avontuur dat we samen gaan beleven +## Het Avontuur Waar We Samen Aan Gaan -Oké, ik ben echt super enthousiast over wat we vandaag gaan verkennen! Serieus, ik wou dat ik je gezicht kon zien wanneer sommige van deze concepten duidelijk worden. Hier is de geweldige reis die we samen gaan maken: +Oké, ik ben echt super enthousiast over wat we vandaag gaan ontdekken! Serieus, ik wou dat ik je gezicht kon zien als sommige van deze concepten ineens klikken. Dit is de ongelooflijke reis die we samen gaan maken: -- **Wat programmeren eigenlijk is (en waarom het het coolste ooit is!)** – We gaan ontdekken hoe code letterlijk de onzichtbare magie is achter alles om je heen, van dat alarm dat weet dat het maandagochtend is tot het algoritme dat je perfecte Netflix-aanbevelingen samenstelt. -- **Programmeertalen en hun geweldige persoonlijkheden** – Stel je voor dat je een feestje binnenloopt waar iedereen compleet verschillende superkrachten en manieren heeft om problemen op te lossen. Dat is hoe de wereld van programmeertalen is, en je gaat ervan genieten om ze te leren kennen! -- **De fundamentele bouwstenen die digitale magie mogelijk maken** – Zie dit als de ultieme creatieve LEGO-set. Zodra je begrijpt hoe deze stukken in elkaar passen, realiseer je je dat je letterlijk alles kunt bouwen wat je fantasie bedenkt. -- **Professionele tools die je het gevoel geven dat je een toverstok hebt gekregen** – Ik overdrijf niet – deze tools geven je echt het gevoel dat je superkrachten hebt, en het beste deel? Het zijn dezelfde tools die de professionals gebruiken! +- **Wat programmeren eigenlijk is (en waarom het het coolste ooit is!)** – We gaan ontdekken hoe code letterlijk de onzichtbare magie is die alles om je heen aandrijft, van dat alarm dat op de een of andere manier weet dat het maandagochtend is tot het algoritme dat perfect je Netflix-aanbevelingen samenstelt +- **Programmeertalen en hun geweldige persoonlijkheden** – Stel je eens voor dat je een feest binnenloopt waar iedereen compleet verschillende superkrachten en manieren heeft om problemen op te lossen. Zo is de wereld van programmeertalen, en je zult ze geweldig vinden om te ontmoeten! +- **De fundamentele bouwstenen die digitale magie mogelijk maken** – Zie deze als het ultieme creatieve LEGO-set. Zodra je begrijpt hoe deze stukjes in elkaar passen, besef je dat je letterlijk alles kunt bouwen wat je verbeelding maar kan bedenken +- **Professionele tools die je het gevoel geven alsof je zojuist een toverstaf hebt gekregen** – Ik overdrijf niet – deze tools geven je echt het gevoel dat je superkrachten hebt, en het beste deel? Het zijn dezelfde tools die de professionals gebruiken! -> 💡 **Hier is het ding**: Denk er niet eens aan om vandaag alles te proberen te onthouden! Voor nu wil ik alleen dat je die vonk van opwinding voelt over wat mogelijk is. De details blijven vanzelf hangen terwijl we samen oefenen – zo gebeurt echt leren! +> 💡 **Dit is het punt:** Probeer vandaag niet alles te memoriseren! Op dit moment wil ik alleen dat je die vonk van opwinding voelt over wat er mogelijk is. De details blijven vanzelf hangen terwijl we samen oefenen – zo leer je echt! -> Je kunt deze les volgen op [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Je kunt deze les volgen op [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Dus wat *is* programmeren eigenlijk? +## Dus Wat *Is* Programmering Eigenlijk? -Oké, laten we de miljoen-dollar vraag aanpakken: wat is programmeren nou echt? +Oké, laten we de miljoen-dollar-vraag aanpakken: wat is programmeren nu eigenlijk? -Ik geef je een verhaal dat mijn kijk hierop compleet veranderde. Vorige week probeerde ik mijn moeder uit te leggen hoe ze onze nieuwe afstandsbediening van de smart-tv moest gebruiken. Ik hoorde mezelf dingen zeggen zoals "Druk op de rode knop, maar niet de grote rode knop, de kleine rode knop aan de linkerkant... nee, je andere links... oké, houd hem nu twee seconden ingedrukt, niet één, niet drie..." Klinkt bekend? 😅 +Ik vertel je een verhaal dat mijn kijk hierop compleet veranderde. Vorige week probeerde ik mijn moeder uit te leggen hoe ze onze nieuwe smart TV-afstandsbediening moest gebruiken. Ik betrapte mezelf erop dat ik zei: "Druk op de rode knop, maar niet de grote rode knop, de kleine rode knop links... nee, je andere links... oké, hou ‘m nu twee seconden ingedrukt, niet één, niet drie..." Klinkt bekend? 😅 -Dat is programmeren! Het is de kunst van het geven van ongelooflijk gedetailleerde, stap-voor-stap instructies aan iets dat heel krachtig is maar alles perfect uitgelegd moet krijgen. Alleen in plaats van het uitleggen aan je moeder (die kan vragen "welke rode knop?!"), leg je het uit aan een computer (die precies doet wat je zegt, zelfs als wat je zei niet helemaal is wat je bedoelde). +Dat is programmeren! Het is de kunst om ongelooflijk gedetailleerde, stapsgewijze instructies te geven aan iets dat heel krachtig is maar alles perfect uitgelegd moet krijgen. Alleen leg je het niet uit aan je moeder (die kan vragen "welke rode knop?!"), maar aan een computer (die precies doet wat je zegt, ook als wat je zei niet helemaal is wat je bedoelde). -Wat mijn gedachten compleet veranderde toen ik dit leerde: computers zijn eigenlijk vrij simpel in hun kern. Ze begrijpen letterlijk maar twee dingen – 1 en 0, wat in feite gewoon "ja" en "nee" of "aan" en "uit" is. Dat is alles! Maar hier wordt het magisch – we hoeven niet in 1-en en 0-en te spreken alsof we in The Matrix zitten. Dat is waar **programmeertalen** ons te hulp schieten. Ze zijn als de beste vertaler ter wereld die je normale menselijke gedachten omzet in computertaal. +Dit blies mijn geest helemaal weg toen ik het voor het eerst leerde: computers zijn eigenlijk best eenvoudig van binnenuit. Ze begrijpen letterlijk maar twee dingen – 1 en 0, wat in feite gewoon "ja" en "nee" of "aan" en "uit" is. Dat is het! Maar hier wordt het magisch – we hoeven niet in 1’ en 0’s te praten alsof we in The Matrix zitten. Daar komen **programmeertalen** om de hoek kijken. Die zijn als de beste vertaler ter wereld die je volkomen normale menselijke gedachten vertaalt naar computertaal. -En hier is wat me elke ochtend nog steeds kippenvel bezorgt: letterlijk *alles* digitaal in je leven begon met iemand zoals jij, waarschijnlijk zittend in hun pyjama met een kop koffie, code typend op hun laptop. Dat Instagram-filter dat je er perfect uit laat zien? Iemand heeft dat gecodeerd. De aanbeveling die je naar je nieuwe favoriete nummer leidde? Een ontwikkelaar heeft dat algoritme gebouwd. De app die je helpt om de rekening van het diner met vrienden te splitsen? Ja, iemand dacht "dit is irritant, ik wed dat ik dit kan oplossen" en toen... deden ze het! +En dit geeft me nog steeds echte kippenvel elke ochtend als ik wakker word: letterlijk *alles* digitaal in je leven begon met iemand net zoals jij, waarschijnlijk in pyjama met een kop koffie, code typend op zijn laptop. Die Instagram-filter die je er perfect uit laat zien? Iemand heeft die gecodeerd. Die aanbeveling die je naar je nieuwe favoriete nummer leidde? Een ontwikkelaar heeft dat algoritme gebouwd. De app die je helpt om de rekening met vrienden te splitsen? Ja, iemand dacht "dit is vervelend, dat kan ik wel fixen" en toen... deden ze het! -Wanneer je leert programmeren, leer je niet alleen een nieuwe vaardigheid – je wordt onderdeel van deze geweldige gemeenschap van probleemoplossers die hun dagen doorbrengen met denken: "Wat als ik iets kon bouwen dat iemands dag net een beetje beter maakt?" Eerlijk, is er iets coolers dan dat? +Als je leert programmeren, leer je niet alleen een nieuwe vaardigheid – je wordt onderdeel van een ongelooflijke gemeenschap van probleemoplossers die hun dagen doorbrengen met denken: "Wat als ik iets kon bouwen dat iemands dag net een beetje beter maakt?" Eerlijk, is er iets cooler dan dat? -✅ **Leuk weetje om op te zoeken**: Hier is iets supergaafs om op te zoeken als je een momentje vrij hebt – wie denk je dat de eerste computerprogrammeur ter wereld was? Ik geef je een hint: het is misschien niet wie je verwacht! Het verhaal achter deze persoon is absoluut fascinerend en laat zien dat programmeren altijd al draaide om creatief problemen oplossen en buiten de gebaande paden denken. +✅ **Leuk weetje**: Hier is iets supergaafs om op te zoeken als je even tijd hebt – wie denk je dat ’s werelds eerste computerprogrammeur was? Ik geef je een hint: het is misschien niet wie je verwacht! Het verhaal achter deze persoon is absoluut fascinerend en laat zien dat programmeren altijd al ging over creatief problemen oplossen en buiten de gebaande paden denken. -### 🧠 **Check-in tijd: Hoe voel je je?** +### 🧠 **Check-in: Hoe Voel Je Je?** **Neem even de tijd om na te denken:** -- Begrijp je nu het idee van "instructies geven aan computers"? -- Kun je een dagelijkse taak bedenken die je zou willen automatiseren met programmeren? -- Welke vragen borrelen er op in je hoofd over dit hele programmeerconcept? +- Maakt het idee van "instructies geven aan computers" nu voor jou zin? +- Kun je een dagelijkse taak bedenken die je met programmeren zou willen automatiseren? +- Welke vragen borrelen er op in je hoofd over die hele programmeerwereld? -> **Onthoud**: Het is helemaal normaal als sommige concepten nu nog vaag aanvoelen. Programmeren leren is zoals het leren van een nieuwe taal – het kost tijd voordat je hersenen die neurale verbindingen opbouwen. Je doet het geweldig! +> **Onthoud:** Het is volkomen normaal als sommige concepten nu nog wazig aanvoelen. Programmeren leren is net zoals een nieuwe taal leren – het kost tijd om je hersenen die neurale paden te laten bouwen. Je doet het geweldig! -## Programmeertalen zijn als verschillende smaken van magie +## Programmeertalen Zijn Net Verschillende Smaken Magie -Oké, dit klinkt misschien een beetje vreemd, maar blijf bij me – programmeertalen zijn een beetje zoals verschillende soorten muziek. Denk er eens over na: je hebt jazz, dat soepel en improviserend is, rock dat krachtig en rechttoe rechtaan is, klassiek dat elegant en gestructureerd is, en hip-hop dat creatief en expressief is. Elke stijl heeft zijn eigen vibe, zijn eigen gemeenschap van gepassioneerde fans, en elke stijl is perfect voor verschillende stemmingen en gelegenheden. +Oké, dit klinkt raar, maar blijf even bij me – programmeertalen zijn net als verschillende soorten muziek. Denk er eens over na: je hebt jazz, wat soepel en improviserend is, rock die krachtig en rechttoe-rechtaan is, klassiek dat elegant en gestructureerd is, en hip-hop dat creatief en expressief is. Elke stijl heeft zijn eigen vibe, zijn eigen gemeenschap van gepassioneerde fans, en elke is perfect voor verschillende stemmingen en gelegenheden. -Programmeertalen werken precies hetzelfde! Je zou niet dezelfde taal gebruiken om een leuke mobiele game te bouwen als om enorme hoeveelheden klimaatdata te verwerken, net zoals je geen death metal zou spelen tijdens een yogales (nou ja, de meeste yogalessen! 😄). +Programmeertalen werken precies zo! Je zou niet dezelfde taal gebruiken om een leuk mobiel spel te bouwen als om enorme hoeveelheden klimaatdata te verwerken, net zoals je bij een yogales waarschijnlijk geen death metal afspeelt (nou ja, in de meeste yogalessen dan! 😄). -Maar hier is wat me elke keer weer verbaast: deze talen zijn als de meest geduldige, briljante tolk ter wereld die naast je zit. Je kunt je ideeën uiten op een manier die natuurlijk voelt voor je menselijke brein, en zij doen al het ongelooflijk complexe werk om dat te vertalen naar de 1-en en 0-en die computers daadwerkelijk spreken. Het is alsof je een vriend hebt die perfect vloeiend is in zowel "menselijke creativiteit" als "computerlogica" – en ze worden nooit moe, hebben nooit koffiepauzes nodig, en oordelen nooit als je dezelfde vraag twee keer stelt! +Maar hier gaat mijn verstand keer op keer stuk: deze talen zijn als de meest geduldige, briljante tolk ter wereld die naast je zit. Je kunt je ideeën uitdrukken op een manier die natuurlijk aanvoelt voor je menselijke brein, en zij regelen al het ongelooflijk complexe werk om dat te vertalen naar de 1’en en 0’en waar computers echt mee communiceren. Het is alsof je een vriend hebt die perfect vloeiend is in zowel "menselijke creativiteit" als "computerlogica" – en die nooit moe wordt, nooit koffiepauzes nodig heeft, en je nooit veroordeelt als je dezelfde vraag twee keer stelt! -### Populaire programmeertalen en hun toepassingen +### Populaire Programmeertalen en Waar Ze Voor Worden Gebruikt ```mermaid mindmap - root((Programming Languages)) - Web Development + root((Programmeertalen)) + Webontwikkeling JavaScript - Frontend Magic - Interactive Websites + Frontend Magie + Interactieve Websites TypeScript JavaScript + Types Enterprise Apps Data & AI Python - Data Science + Datawetenschap Machine Learning - Automation + Automatisering R - Statistics - Research - Mobile Apps + Statistiek + Onderzoek + Mobiele Apps Java Android Enterprise Swift iOS - Apple Ecosystem + Apple Ecosysteem Kotlin Modern Android Cross-platform - Systems & Performance + Systemen & Prestaties C++ Games - Performance Critical + Prestatiekritisch Rust - Memory Safety - System Programming + Geheugenveiligheid + Systeemprogrammering Go Cloud Services - Scalable Backend + Schaalbare Backend ``` - -| Taal | Beste voor | Waarom populair | -|------|------------|-----------------| -| **JavaScript** | Webontwikkeling, gebruikersinterfaces | Draait in browsers en maakt interactieve websites mogelijk | -| **Python** | Data science, automatisering, AI | Makkelijk te lezen en te leren, krachtige bibliotheken | +| Language | Best For | Why It's Popular | +|----------|----------|------------------| +| **JavaScript** | Webontwikkeling, gebruikersinterfaces | Draait in browsers en ondersteunt interactieve websites | +| **Python** | Datawetenschap, automatisering, AI | Makkelijk te lezen en te leren, krachtige bibliotheken | | **Java** | Enterprise-applicaties, Android-apps | Platformonafhankelijk, robuust voor grote systemen | -| **C#** | Windows-applicaties, gameontwikkeling | Sterke ondersteuning vanuit het Microsoft-ecosysteem | -| **Go** | Cloudservices, backendsystemen | Snel, simpel, ontworpen voor moderne computing | +| **C#** | Windows-applicaties, game-ontwikkeling | Sterke ondersteuning van het Microsoft-ecosysteem | +| **Go** | Cloud-services, backendsystemen | Snel, simpel, ontworpen voor moderne computing | -### High-level vs. Low-level talen +### High-Level versus Low-Level Talen -Oké, dit was eerlijk gezegd het concept dat mijn brein brak toen ik begon met leren, dus ik ga de analogie delen die het eindelijk duidelijk maakte voor mij – en ik hoop echt dat het jou ook helpt! +Oké, dit was eerlijk gezegd het concept dat mijn brein brak toen ik begon, dus ik deel de analogie die het voor mij uiteindelijk duidelijk maakte – en hopelijk helpt het jou ook! -Stel je voor dat je een land bezoekt waar je de taal niet spreekt, en je moet dringend de dichtstbijzijnde wc vinden (we hebben het allemaal meegemaakt, toch? 😅): +Stel je voor dat je in een land bent waar je de taal niet spreekt en je dringend het dichtstbijzijnde toilet moet vinden (we zijn allemaal wel eens zo geweest, toch? 😅): -- **Low-level programmeren** is alsof je de lokale dialecten zo goed leert dat je kunt praten met de oma die fruit verkoopt op de hoek, met culturele verwijzingen, lokale slang en inside jokes die alleen iemand die daar is opgegroeid begrijpt. Super indrukwekkend en ongelooflijk efficiënt... als je toevallig vloeiend bent! Maar behoorlijk overweldigend als je gewoon een wc probeert te vinden. +- **Low-level programmeren** is alsof je de lokale dialect zo goed leert dat je een praatje kan maken met de oma die fruit verkoopt op de hoek, met culturele verwijzingen, lokale straattaal en inside jokes die alleen iemand die daar is opgegroeid zou begrijpen. Supper indrukwekkend en ongelooflijk efficiënt... als je toevallig vloeiend bent! Maar best overweldigend als je alleen een wc zoekt. -- **High-level programmeren** is alsof je die geweldige lokale vriend hebt die je gewoon begrijpt. Je kunt zeggen "Ik moet echt een wc vinden" in gewoon Nederlands, en zij regelen alle culturele vertaling en geven je aanwijzingen op een manier die perfect logisch is voor jouw niet-lokale brein. +- **High-level programmeren** is alsof je die geweldige lokale vriend hebt die je gewoon begrijpt. Je zegt "ik moet echt een wc vinden" in gewoon Engels, en die regelt dan alle culturele vertaling en geeft je aanwijzingen die voor jouw niet-lokale brein helemaal logisch zijn. -In programmeertermen: -- **Low-level talen** (zoals Assembly of C) laten je ongelooflijk gedetailleerde gesprekken voeren met de daadwerkelijke hardware van de computer, maar je moet denken als een machine, wat... nou ja, laten we zeggen dat het een behoorlijke mentale verschuiving is! -- **High-level talen** (zoals JavaScript, Python of C#) laten je denken als een mens terwijl zij alle machine-taal achter de schermen afhandelen. Plus, ze hebben ongelooflijk gastvrije gemeenschappen vol mensen die zich herinneren hoe het was om nieuw te zijn en echt willen helpen! +In programmeertaal: +- **Low-level talen** (zoals Assembly of C) laten je heel gedetailleerd praten met de hardware van de computer, maar je moet denken als een machine, wat... nou ja, zeg maar een behoorlijke mentale omschakeling is! +- **High-level talen** (zoals JavaScript, Python of C#) laten je denken als een mens terwijl zij het machine-taaltje achter de schermen regelen. Bovendien hebben ze ongelooflijk gastvrije communities vol mensen die zich herinneren hoe het was om nieuw te zijn en die je echt willen helpen! -Raad eens welke ik ga voorstellen om mee te beginnen? 😉 High-level talen zijn als zijwieltjes die je eigenlijk nooit wilt afnemen omdat ze de hele ervaring zoveel leuker maken! +Raad eens met welke talen ik zou aanraden te beginnen? 😉 High-level talen zijn zoals zijwieltjes die je eigenlijk nooit wilt afdoen omdat ze alles zoveel leuker maken! ```mermaid flowchart TB - A["👤 Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["👤 Menselijke Gedachte:
'Ik wil Fibonacci-getallen berekenen'"] --> B{Kies Taalniveau} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + B -->|Hoog Niveau| C["🌟 JavaScript/Python
Makkelijk te lezen en schrijven"] + B -->|Laag Niveau| D["⚙️ Assembly/C
Directe hardwarecontrole"] - C --> E["📝 Write: fibonacci(10)"] - D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Schrijf: fibonacci(10)"] + D --> F["📝 Schrijf: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer Understanding:
Translator handles complexity"] + E --> G["🤖 Computer Begrip:
Vertaler handelt complexiteit af"] F --> G - G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Zelfde Resultaat:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### Ik Laat Je Zien Waarom High-Level Talen Veel Vriendelijker Zijn -### Laat me je laten zien waarom high-level talen zoveel vriendelijker zijn - -Oké, ik ga je iets laten zien dat perfect laat zien waarom ik verliefd werd op high-level talen, maar eerst – ik wil dat je me iets belooft. Wanneer je dat eerste codevoorbeeld ziet, niet in paniek raken! Het is bedoeld om intimiderend te lijken. Dat is precies het punt dat ik wil maken! +Oké, ik ga je iets laten zien dat perfect illustreert waarom ik verliefd werd op high-level talen, maar eerst – beloof me iets. Als je die eerste codevoorbeelden ziet, raak niet in paniek! Het hoort er een beetje intimiderend uit te zien. Dat is precies het punt dat ik maak! -We gaan naar dezelfde taak kijken, geschreven in twee compleet verschillende stijlen. Beide creëren wat de Fibonacci-reeks wordt genoemd – het is een prachtige wiskundige patroon waarbij elk getal de som is van de twee ervoor: 0, 1, 1, 2, 3, 5, 8, 13... (Leuk weetje: je vindt dit patroon letterlijk overal in de natuur – zonnebloemzaadspiralen, dennenappels, zelfs de manier waarop sterrenstelsels worden gevormd!) +We gaan naar exact dezelfde taak kijken, geschreven in twee totaal verschillende stijlen. Beide maken wat men de Fibonacci-reeks noemt – het is zo’n prachtig wiskundig patroon waarbij elk getal de som is van de twee voorgaande: 0, 1, 1, 2, 3, 5, 8, 13... (Leuk weetje: je vindt dit patroon letterlijk overal in de natuur – in zonnebloemzaadspiraaltjes, dennenappelpatronen en zelfs in de vorming van sterrenstelsels!) -Klaar om het verschil te zien? Laten we gaan! +Klaar om het verschil te zien? Let’s go! **High-level taal (JavaScript) – Mensvriendelijk:** ```javascript -// Step 1: Basic Fibonacci setup +// Stap 1: Basisopzet van Fibonacci const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Wat deze code doet:** +**Dit doet deze code:** - **Declareert** een constante om aan te geven hoeveel Fibonacci-getallen we willen genereren -- **Initialiseert** twee variabelen om de huidige en volgende getallen in de reeks bij te houden -- **Stelt in** de startwaarden (0 en 1) die het Fibonacci-patroon definiëren -- **Toont** een koptekst om onze uitvoer te identificeren +- **Initialiseert** twee variabelen om het huidige en volgende nummer in de reeks bij te houden +- **Stelt in** de beginwaarden (0 en 1) die het Fibonacci-patroon definiëren +- **Laat zien** een koptekstbericht om onze output te identificeren ```javascript -// Step 2: Generate the sequence with a loop +// Stap 2: Genereer de reeks met een lus for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Bereken het volgende nummer in de reeks const sum = current + next; current = next; next = sum; } ``` -**Wat hier gebeurt:** -- **Loopt** door elke positie in onze reeks met een `for`-lus -- **Toont** elk getal met zijn positie met behulp van template literal formatting -- **Bereken** het volgende Fibonacci-getal door huidige en volgende waarden op te tellen -- **Update** onze trackingvariabelen om door te gaan naar de volgende iteratie +**Wat hier gebeurt, uitgelegd:** +- **Loop** door elke positie in onze reeks met een `for`-lus +- **Toon** elk getal met zijn positie met behulp van template literals +- **Bereken** het volgende Fibonacci-getal door huidige en volgende waardes op te tellen +- **Update** onze variabelen om naar de volgende iteratie te gaan ```javascript -// Step 3: Modern functional approach +// Stap 3: Moderne functionele benadering const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,16 +219,16 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Voorbeeld van gebruik const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**Hier hebben we:** -- **Een herbruikbare functie gemaakt** met moderne arrow function syntax -- **Een array gebouwd** om de volledige reeks op te slaan in plaats van één voor één weer te geven -- **Array-indexering gebruikt** om elk nieuw getal te berekenen op basis van eerdere waarden -- **De volledige reeks geretourneerd** voor flexibel gebruik in andere delen van ons programma +**In de bovenstaande hebben we:** +- **Een herbruikbare functie gemaakt** met moderne arrow function-syntaxis +- **Een array gebouwd** om de hele reeks op te slaan in plaats van één voor één weer te geven +- **Array-indexering gebruikt** om elk nieuw getal uit vorige waardes te berekenen +- **De volledige reeks teruggegeven** voor flexibel gebruik in andere delen van ons programma **Low-level taal (ARM Assembly) – Computer-vriendelijk:** @@ -259,127 +257,128 @@ back add r0,r1 end ``` -Merk op hoe de JavaScript-versie bijna leest als Engelse instructies, terwijl de Assembly-versie cryptische commando's gebruikt die direct de processor van de computer aansturen. Beide bereiken exact dezelfde taak, maar de high-level taal is veel gemakkelijker voor mensen om te begrijpen, te schrijven en te onderhouden. +Merk op hoe de JavaScript-versie bijna leest als Engelse instructies, terwijl de Assembly-versie cryptische commando’s gebruikt die direct de processor van de computer aansturen. Beide bereiken exact dezelfde taak, maar de high-level taal is veel makkelijker voor mensen om te begrijpen, schrijven en onderhouden. -**Belangrijke verschillen die je zult opmerken:** -- **Leesbaarheid**: JavaScript gebruikt beschrijvende namen zoals `fibonacciCount`, terwijl Assembly cryptische labels gebruikt zoals `r0`, `r1`. -- **Opmerkingen**: Hoogwaardige programmeertalen moedigen verklarende opmerkingen aan die de code zelf documenterend maken -- **Structuur**: De logische opbouw van JavaScript sluit aan bij hoe mensen problemen stap voor stap benaderen -- **Onderhoud**: Het bijwerken van de JavaScript-versie voor verschillende vereisten is eenvoudig en duidelijk +**Belangrijkste verschillen die je zult zien:** +- **Leesbaarheid**: JavaScript gebruikt beschrijvende namen zoals `fibonacciCount` terwijl Assembly cryptische labels gebruikt zoals `r0`, `r1` +- **Commentaar**: Hoog-niveau talen moedigen verklarende commentaren aan die de code zelf-documenterend maken +- **Structuur**: De logische stroom van JavaScript komt overeen met hoe mensen stap voor stap over problemen nadenken +- **Onderhoud**: Het bijwerken van de JavaScript-versie voor verschillende vereisten is eenvoudig en duidelijk -✅ **Over de Fibonacci-reeks**: Dit absoluut prachtige getallenpatroon (waarbij elk getal gelijk is aan de som van de twee voorgaande: 0, 1, 1, 2, 3, 5, 8...) komt letterlijk *overal* in de natuur voor! Je vindt het in zonnebloemspiralen, patronen op dennenappels, de kromming van nautilusschelpen en zelfs in de manier waarop boomtakken groeien. Het is echt ongelooflijk hoe wiskunde en code ons kunnen helpen de patronen te begrijpen en te recreëren die de natuur gebruikt om schoonheid te creëren! +✅ **Over de Fibonacci-reeks**: Dit absoluut prachtige getallenpatroon (waarbij elk getal gelijk is aan de som van de twee ervoor: 0, 1, 1, 2, 3, 5, 8...) komt letterlijk *overal* in de natuur voor! Je vindt het in zonnebloemspiralen, dennenappels, de manier waarop nautilusschelpen krullen, en zelfs in hoe boomtakken groeien. Het is best verbluffend hoe wiskunde en code ons kunnen helpen de patronen die de natuur gebruikt om schoonheid te creëren te begrijpen en na te bootsen! -## De bouwstenen die de magie mogelijk maken -Oké, nu je hebt gezien hoe programmeertalen eruitzien in actie, laten we de fundamentele onderdelen bekijken die letterlijk elk programma ooit geschreven vormen. Zie deze als de essentiële ingrediënten in je favoriete recept – zodra je begrijpt wat elk onderdeel doet, kun je code lezen en schrijven in vrijwel elke taal! +## De Bouwstenen Die De Magie Maken -Dit is een beetje zoals het leren van de grammatica van programmeren. Herinner je je nog dat je op school leerde over zelfstandige naamwoorden, werkwoorden en hoe je zinnen samenstelt? Programmeren heeft zijn eigen versie van grammatica, en eerlijk gezegd is het veel logischer en vergevingsgezinder dan de Engelse grammatica ooit was! 😄 +Oké, nu je hebt gezien hoe programmeertalen er in actie uitzien, laten we de fundamentele stukjes ontleden die letterlijk elk programma ooit geschreven vormen. Zie deze als de essentiële ingrediënten in je favoriete recept – zodra je begrijpt wat elk ervan doet, kun je vrijwel elke taal lezen en schrijven! -### Statements: De stap-voor-stap instructies +Dit is een beetje als het leren van de grammatica van programmeren. Weet je nog op school toen je leerde over zelfstandige naamwoorden, werkwoorden, en hoe je zinnen in elkaar zet? Programmeren heeft zijn eigen versie van grammatica, en eerlijk gezegd is die veel logischer en vergevingsgezinder dan de Engelse grammatica ooit was! 😄 -Laten we beginnen met **statements** – dit zijn als individuele zinnen in een gesprek met je computer. Elk statement vertelt de computer om één specifieke taak uit te voeren, een beetje zoals het geven van aanwijzingen: "Sla hier linksaf," "Stop bij het rode licht," "Parkeer op die plek." +### Statements: De Stapsgewijze Instructies -Wat ik geweldig vind aan statements is hoe leesbaar ze meestal zijn. Kijk maar: +Laten we beginnen met **statements** – deze zijn als individuele zinnen in een gesprek met je computer. Elk statement vertelt de computer om één specifiek ding te doen, een beetje als het geven van aanwijzingen: "Sla hier linksaf," "Stop bij het rode licht," "Parkeer op die plek." + +Wat ik leuk vind aan statements is hoe leesbaar ze meestal zijn. Kijk hier eens naar: ```javascript -// Basic statements that perform single actions +// Basisverklaringen die enkele acties uitvoeren const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**Wat deze code doet:** -- **Declareer** een constante variabele om de naam van een gebruiker op te slaan -- **Toon** een begroetingsbericht in de console-output -- **Bereken** en sla het resultaat van een wiskundige bewerking op + +**Dit is wat deze code doet:** +- **Declareer** een constante variabele om de naam van een gebruiker op te slaan +- **Toon** een begroetingsbericht in de console-uitvoer +- **Bereken** en sla het resultaat van een wiskundige bewerking op ```javascript -// Statements that interact with web pages +// Instructies die interageren met webpagina's document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**Stap voor stap, wat er gebeurt:** -- **Wijzig** de titel van de webpagina die in het browsertabblad verschijnt -- **Verander** de achtergrondkleur van de hele pagina -### Variabelen: Het geheugensysteem van je programma +**Stap voor stap, dit gebeurt er:** +- **Wijzig** de titel van de webpagina die in het browsertabblad verschijnt +- **Verander** de achtergrondkleur van de hele pagina -Oké, **variabelen** zijn eerlijk gezegd een van mijn absolute favoriete concepten om uit te leggen, omdat ze zo veel lijken op dingen die je elke dag al gebruikt! +### Variabelen: Het Geheugensysteem van Je Programma -Denk eens aan de contactenlijst op je telefoon. Je onthoudt niet ieders telefoonnummer – in plaats daarvan sla je "Mama," "Beste Vriend" of "Pizzeria die tot 2 uur 's nachts bezorgt" op en laat je telefoon de daadwerkelijke nummers onthouden. Variabelen werken precies hetzelfde! Ze zijn als gelabelde containers waarin je programma informatie kan opslaan en later kan ophalen met een naam die daadwerkelijk logisch is. +Oké, **variabelen** zijn eerlijk gezegd een van mijn allerfavoriete concepten om uit te leggen omdat ze zo erg lijken op dingen die je elke dag al gebruikt! -Wat echt cool is: variabelen kunnen veranderen terwijl je programma draait (vandaar de naam "variabel" – snap je wat ze gedaan hebben?). Net zoals je dat contact van de pizzeria bijwerkt wanneer je een nog betere plek ontdekt, kunnen variabelen worden bijgewerkt terwijl je programma nieuwe informatie leert of wanneer situaties veranderen! +Denk even aan je telefooncontactenlijst. Je onthoudt niet het telefoonnummer van iedereen – in plaats daarvan sla je op "Mama," "Beste Vriend," of "Pizzaria Die Tot 2 uur 's nachts Bezorgen" en laat je telefoon de nummers onthouden. Variabelen werken precies hetzelfde! Ze zijn als gelabelde containers waarin je programma informatie kan opslaan en later kan ophalen met een naam die echt logisch is. -Laat me je laten zien hoe prachtig eenvoudig dit kan zijn: +Wat echt gaaf is: variabelen kunnen veranderen terwijl je programma draait (vandaar de naam "variabele" – zie wat ze daar deden?). Net als dat je misschien dat pizzaria-contact bijwerkt wanneer je ergens nog beter ontdekt, kunnen variabelen worden bijgewerkt als je programma nieuwe informatie leert of als situaties veranderen! + +Laat me je laten zien hoe mooi simpel dit kan zijn: ```javascript -// Step 1: Creating basic variables +// Stap 1: Basisvariabelen aanmaken const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**Deze concepten begrijpen:** -- **Sla** onveranderlijke waarden op in `const`-variabelen (zoals de naam van een site) -- **Gebruik** `let` voor waarden die tijdens je programma kunnen veranderen -- **Ken** verschillende datatypes toe: strings (tekst), nummers en booleans (waar/onwaar) -- **Kies** beschrijvende namen die uitleggen wat elke variabele bevat + +**Deze concepten begrijpen:** +- **Sla** onveranderlijke waarden op in `const`-variabelen (zoals een sitenaam) +- **Gebruik** `let` voor waarden die gedurende je programma kunnen veranderen +- **Ken** verschillende datatypes toe: strings (tekst), nummers, en booleans (waar/onwaar) +- **Kies** beschrijvende namen die uitleggen wat elke variabele bevat ```javascript -// Step 2: Working with objects to group related data +// Stap 2: Werken met objecten om gerelateerde gegevens te groeperen const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**In het bovenstaande hebben we:** -- **Een object gemaakt** om gerelateerde weersinformatie te groeperen -- **Meerdere gegevens georganiseerd** onder één variabelenaam -- **Key-value paren gebruikt** om elk stukje informatie duidelijk te labelen + +**Hierboven hebben we:** +- **Een object gemaakt** om gerelateerde weersinformatie te groeperen +- **Meerdere stukjes data georganiseerd** onder één variabelenaam +- **Sleutel-waarde paren gebruikt** om elk stuk informatie duidelijk te labelen ```javascript -// Step 3: Using and updating variables +// Stap 3: Variabelen gebruiken en bijwerken console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Veranderbare variabelen bijwerken currentWeather = "cloudy"; temperature = 68; ``` - -**Laten we elk onderdeel begrijpen:** -- **Toon** informatie met behulp van template literals met `${}`-syntax -- **Toegang krijgen tot** objecteigenschappen met puntnotatie (`weatherData.windSpeed`) -- **Update** variabelen gedeclareerd met `let` om veranderende omstandigheden weer te geven -- **Combineer** meerdere variabelen om betekenisvolle berichten te maken + +**Laten we elk onderdeel begrijpen:** +- **Toon** informatie met template-literals met `${}` syntax +- **Benader** objecteigenschappen met dot notatie (`weatherData.windSpeed`) +- **Werk** variabelen die met `let` zijn gedeclareerd bij om veranderende omstandigheden weer te geven +- **Combineer** meerdere variabelen om betekenisvolle berichten te maken ```javascript -// Step 4: Modern destructuring for cleaner code +// Stap 4: Moderne destructurering voor schonere code const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` - -**Wat je moet weten:** -- **Haal** specifieke eigenschappen uit objecten met destructuring assignment -- **Maak** automatisch nieuwe variabelen met dezelfde namen als objectkeys -- **Vereenvoudig** code door herhaalde puntnotatie te vermijden -### Control Flow: Je programma leren denken +**Wat je moet weten:** +- **Pak** specifieke eigenschappen uit objecten met destructuring assignment +- **Maak** automatisch nieuwe variabelen aan met dezelfde namen als de sleutels van het object +- **Vereenvoudig** code door repetitief gebruik van dot notatie te vermijden -Oké, hier wordt programmeren echt ongelooflijk! **Control flow** is in feite je programma leren hoe het slimme beslissingen kan nemen, precies zoals jij dat elke dag doet zonder er zelfs maar over na te denken. +### Control Flow: Je Programma Leren Denken -Stel je dit voor: vanmorgen ging je waarschijnlijk door iets als "Als het regent, pak ik een paraplu. Als het koud is, trek ik een jas aan. Als ik haast heb, sla ik het ontbijt over en haal ik koffie onderweg." Je brein volgt natuurlijk deze if-then logica tientallen keren per dag! +Oké, dit is waar programmeren echt verbluffend wordt! **Control flow** is in feite je programma leren slimme beslissingen te nemen, precies zoals jij elke dag doet zonder erbij na te denken. -Dit is wat programma's intelligent en levendig maakt in plaats van gewoon een saaie, voorspelbare script te volgen. Ze kunnen daadwerkelijk naar een situatie kijken, evalueren wat er gebeurt en gepast reageren. Het is alsof je je programma een brein geeft dat kan aanpassen en keuzes kan maken! +Stel je voor: vanmorgen dacht je waarschijnlijk iets als "Als het regent, pak ik een paraplu. Als het koud is, doe ik een jas aan. Als ik te laat ben, sla ik het ontbijt over en pak ik koffie onderweg." Je brein volgt deze als-dan-logica tientallen keren per dag automatisch! -Wil je zien hoe prachtig dit werkt? Laat me het je laten zien: +Dit maakt programma's intelligent en levendig in plaats van alleen maar een saaie, voorspelbare script te volgen. Ze kunnen echt naar een situatie kijken, evalueren wat er gebeurt, en gepast reageren. Het is alsof je je programma een brein geeft dat zich kan aanpassen en keuzes kan maken! + +Wil je zien hoe prachtig dit werkt? Laat me je laten zien: ```javascript -// Step 1: Basic conditional logic +// Stap 1: Basis voorwaardelijke logica const userAge = 17; if (userAge >= 18) { @@ -389,15 +388,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**Wat deze code doet:** -- **Controleer** of de leeftijd van de gebruiker voldoet aan de stemvereiste -- **Voer** verschillende codeblokken uit op basis van het resultaat van de voorwaarde -- **Bereken** en toon hoe lang het nog duurt tot stemgerechtigheid als de gebruiker jonger is dan 18 -- **Geef** specifieke, nuttige feedback voor elk scenario + +**Dit is wat deze code doet:** +- **Controleer** of de leeftijd van de gebruiker aan de stemgerechtigde eis voldoet +- **Voer** verschillende codeblokken uit op basis van het resultaat van de conditie +- **Bereken** en toon hoe lang het duurt tot stemgerechtigdheid als onder de 18 +- **Geef** specifieke, behulpzame feedback voor elk scenario ```javascript -// Step 2: Multiple conditions with logical operators +// Stap 2: Meerdere voorwaarden met logische operatoren const userAge = 17; const hasPermission = true; @@ -409,26 +408,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**Wat hier gebeurt, uitgelegd:** -- **Combineer** meerdere voorwaarden met de `&&` (en) operator -- **Creëer** een hiërarchie van voorwaarden met `else if` voor meerdere scenario's -- **Behandel** alle mogelijke gevallen met een laatste `else`-statement -- **Geef** duidelijke, uitvoerbare feedback voor elke verschillende situatie + +**Hier is een analyse van wat er gebeurt:** +- **Combineer** meerdere voorwaarden met de `&&` (en) operator +- **Maak** een hiërarchie van voorwaarden met `else if` voor meerdere scenario's +- **Behandel** alle mogelijke gevallen met een laatste `else` statement +- **Geef** duidelijke, bruikbare feedback voor elke verschillende situatie ```javascript -// Step 3: Concise conditional with ternary operator +// Stap 3: Bondige voorwaarde met ternary-operator const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**Wat je moet onthouden:** -- **Gebruik** de ternary operator (`? :`) voor eenvoudige twee-optie voorwaarden -- **Schrijf** eerst de voorwaarde, gevolgd door `?`, dan het resultaat bij true, dan `:`, dan het resultaat bij false -- **Pas** dit patroon toe wanneer je waarden moet toewijzen op basis van voorwaarden + +**Dit moet je onthouden:** +- **Gebruik** de ternary-operator (`? :`) voor eenvoudige twee-keuze voorwaarden +- **Schrijf** eerst de conditie, gevolgd door `?`, dan het resultaat als waar, dan `:`, gevolgd door het resultaat als onwaar +- **Pas** dit patroon toe wanneer je waarden wilt toewijzen op basis van voorwaarden ```javascript -// Step 4: Handling multiple specific cases +// Stap 4: Omgaan met meerdere specifieke gevallen const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -447,58 +446,57 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` - -**Wat deze code bereikt:** -- **Vergelijk** de waarde van de variabele met meerdere specifieke gevallen -- **Groepeer** vergelijkbare gevallen samen (weekdagen vs. weekenden) -- **Voer** het juiste codeblok uit wanneer er een match wordt gevonden -- **Voeg** een `default`-geval toe om onverwachte waarden te behandelen -- **Gebruik** `break`-statements om te voorkomen dat de code doorgaat naar het volgende geval -> 💡 **Echte wereld analogie**: Denk aan control flow als het hebben van 's werelds meest geduldige GPS die je aanwijzingen geeft. Het kan zeggen: "Als er verkeer is op Main Street, neem dan de snelweg. Als er constructie is op de snelweg, probeer dan de schilderachtige route." Programma's gebruiken precies hetzelfde soort logica om intelligent te reageren op verschillende situaties en gebruikers altijd de best mogelijke ervaring te bieden. +**Deze code doet het volgende:** +- **Vergelijk** de variabele waarde met meerdere specifieke gevallen +- **Groeperen** soortgelijke gevallen (weekdagen versus weekend) +- **Voer** het juiste codeblok uit wanneer er een match is +- **Gebruik** een `default`-case om onverwachte waarden te behandelen +- **Gebruik** `break` statements om te voorkomen dat code doorgaat naar het volgende geval -### 🎯 **Concept Check: Beheersing van de bouwstenen** +> 💡 **Reële analogie**: Denk aan control flow als de meest geduldige GPS ter wereld die je aanwijzingen geeft. Hij zegt misschien "Als er file is op de Hoofdstraat, neem dan de snelweg. Als er wegwerkzaamheden zijn op de snelweg, probeer dan de schilderachtige route." Programma's gebruiken precies hetzelfde soort conditionele logica om intelligent op verschillende situaties te reageren en altijd de beste gebruikerservaring te bieden. -**Laten we kijken hoe je het doet met de basisprincipes:** -- Kun je in je eigen woorden het verschil uitleggen tussen een variabele en een statement? -- Denk aan een scenario uit de echte wereld waarin je een if-then beslissing zou gebruiken (zoals ons stemvoorbeeld) -- Wat is één ding over programmeerlogica dat je heeft verrast? +### 🎯 **Conceptcheck: Meesterschap van Bouwstenen** -**Snelle zelfvertrouwen boost:** +**Laten we kijken hoe het gaat met de basis:** +- Kun je het verschil uitleggen tussen een variabele en een statement in je eigen woorden? +- Bedenk een scenario uit de echte wereld waarin je een als-dan beslissing zou gebruiken (zoals ons stemvoorbeeld) +- Wat verbaasde je het meest aan programmeerlogica? + +**Snelle zelfvertrouwenboost:** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 Verklaringen
(Instructies)"] --> B["📦 Variabelen
(Opslag)"] --> C["🔀 Stroomregeling
(Beslissingen)"] --> D["🎉 Werkend Programma!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` - -✅ **Wat er hierna komt**: We gaan ontzettend veel plezier hebben met het verder verdiepen in deze concepten terwijl we samen deze geweldige reis voortzetten! Focus nu gewoon op het voelen van die opwinding over alle geweldige mogelijkheden die voor je liggen. De specifieke vaardigheden en technieken zullen vanzelf blijven hangen terwijl we samen oefenen – ik beloof dat dit zoveel leuker gaat zijn dan je misschien verwacht! +✅ **Wat staat er hierna te wachten?** We gaan samen ontzettend veel plezier beleven als we dieper ingaan op deze concepten tijdens onze geweldige reis! Focus nu gewoon op het opbouwen van dat gevoel van opwinding over alle fantastische mogelijkheden die voor je liggen. De specifieke vaardigheden en technieken zullen vanzelf blijven hangen als we samen oefenen – ik beloof dat dit veel leuker gaat worden dan je misschien verwacht! -## Tools van het vak +## Tools of the Trade -Oké, dit is eerlijk gezegd waar ik zo enthousiast van word dat ik mezelf nauwelijks kan bedwingen! 🚀 We gaan het hebben over de ongelooflijke tools die je het gevoel gaan geven alsof je net de sleutels van een digitale ruimteschip hebt gekregen. +Oké, hier word ik eerlijk gezegd zo enthousiast dat ik mezelf bijna niet kan bedwingen! 🚀 We gaan het hebben over de geweldige tools die je het gevoel gaan geven alsof je zojuist de sleutels van een digitale ruimteschip hebt gekregen. -Weet je hoe een chef die perfect uitgebalanceerde messen heeft die aanvoelen als verlengstukken van hun handen? Of hoe een muzikant die ene gitaar heeft die lijkt te zingen zodra ze hem aanraken? Nou, ontwikkelaars hebben onze eigen versie van deze magische tools, en hier is wat je absoluut zal verbazen – de meeste zijn helemaal gratis! +Je weet hoe een chef die perfect uitgebalanceerde messen heeft die voelen als een verlengstuk van zijn handen? Of hoe een muzikant die ene gitaar heeft die lijkt te zingen zodra hij hem aanraakt? Nou, ontwikkelaars hebben onze eigen versie van deze magische tools, en hier komt iets wat je helemaal omver gaat blazen – de meeste zijn helemaal gratis! -Ik zit praktisch te stuiteren op mijn stoel bij het idee om deze met je te delen, omdat ze volledig hebben veranderd hoe we software bouwen. We hebben het over AI-gestuurde code-assistenten die je kunnen helpen je code te schrijven (ik maak geen grapje!), cloudomgevingen waar je volledige applicaties kunt bouwen vanaf letterlijk elke plek met Wi-Fi, en debuggingtools die zo geavanceerd zijn dat ze aanvoelen als röntgenzicht voor je programma's. +Ik zit praktisch te stuiteren in mijn stoel als ik aan het delen hiervan denk omdat ze de manier waarop we software bouwen totaal hebben veranderd. We hebben het over AI-gestuurde code-assistenten die je kunnen helpen met coderen (ik maak geen grapje!), cloudomgevingen waar je complete applicaties kunt bouwen vanaf letterlijk overal met Wi-Fi, en debugtools zo geavanceerd dat ze net röntgenvisie voor je programma's zijn. -En hier is het deel dat me nog steeds kippenvel geeft: dit zijn geen "beginners-tools" die je ontgroeit. Dit zijn precies dezelfde professionele tools die ontwikkelaars bij Google, Netflix en dat indie-appstudio die je geweldig vindt op dit moment gebruiken. Je gaat je zo'n pro voelen als je ze gebruikt! +En hier komt het deel dat me nog steeds kippenvel bezorgt: dit zijn niet "beginners-tools" waar je overheen groeit. Dit zijn precies dezelfde professionele tools die ontwikkelaars bij Google, Netflix en die indie app studio die jij leuk vindt op dit moment gebruiken. Je gaat je zo’n pro voelen als je ze gebruikt! ```mermaid graph TD - A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚡ Command Line
(Automation & Tools)"] - D --> E["📚 Documentation
(Learning & Reference)"] - E --> F["🚀 Amazing Web App!"] + A["💡 Jouw Idee"] --> B["⌨️ Code Editor
(VS Code)"] + B --> C["🌐 Browser DevTools
(Testen & Debuggen)"] + C --> D["⚡ Command Line
(Automatisering & Gereedschap)"] + D --> E["📚 Documentatie
(Leren & Referentie)"] + E --> F["🚀 Geweldige Web App!"] - B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] - C -.-> H["📱 Device Testing
(Responsive Design)"] - D -.-> I["📦 Package Managers
(npm, yarn)"] - E -.-> J["👥 Community
(Stack Overflow)"] + B -.-> G["🤖 AI Assistent
(GitHub Copilot)"] + C -.-> H["📱 Apparaattesten
(Responsief Ontwerp)"] + D -.-> I["📦 Pakketbeheerders
(npm, yarn)"] + E -.-> J["👥 Gemeenschap
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -507,229 +505,230 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` - -### Code-editors en IDE's: Je nieuwe digitale beste vrienden +### Code Editors en IDE's: Je Nieuwe Digitale Beste Vrienden + +Laten we praten over code editors – die gaan serieus je nieuwe favoriete plekken worden om te hangen! Zie ze als je persoonlijke codingsanctuarium waar je het grootste deel van je tijd zult doorbrengen om je digitale creaties te ontwerpen en perfectioneren. -Laten we het hebben over code-editors – deze gaan serieus je nieuwe favoriete plekken worden om rond te hangen! Zie ze als je persoonlijke code-heiligdom waar je de meeste tijd zult doorbrengen met het maken en perfectioneren van je digitale creaties. +Maar hier komt het magische van moderne editors: ze zijn niet zomaar chique teksteditors. Ze zijn alsof de meest briljante, ondersteunende code-mentor 24/7 naast je zit. Ze vangen je tikfouten voordat jij ze doorhebt, suggereren verbeteringen die je als een genie doen lijken, helpen je te begrijpen wat elk stuk code doet, en sommige kunnen zelfs voorspellen wat je gaat typen en bieden aan je gedachte af te maken! -Maar hier is wat absoluut magisch is aan moderne editors: ze zijn niet alleen fancy teksteditors. Ze zijn als het hebben van de meest briljante, ondersteunende code-mentor die 24/7 naast je zit. Ze vangen je typefouten op voordat je ze zelfs maar opmerkt, stellen verbeteringen voor die je eruit laten zien als een genie, helpen je te begrijpen wat elk stukje code doet, en sommige kunnen zelfs voorspellen wat je gaat typen en aanbieden om je gedachten af te maken! +Ik herinner me nog toen ik auto-completion ontdekte – ik voelde me letterlijk alsof ik in de toekomst leefde. Je begint iets te typen en je editor zegt: "Hé, dacht je aan deze functie die precies doet wat je nodig hebt?" Het is alsof je een gedachtenlezer als code buddy hebt! -Ik herinner me nog toen ik voor het eerst autocompletion ontdekte – ik voelde me letterlijk alsof ik in de toekomst leefde. Je begint iets te typen, en je editor zegt: "Hé, dacht je aan deze functie die precies doet wat je nodig hebt?" Het is alsof je een gedachtenlezer hebt als je code-buddy! +**Wat maakt deze editors zo ongelooflijk?** -**Wat maakt deze editors zo geweldig?** +Moderne code editors bieden een indrukwekkende reeks functies die je productiviteit verhogen: -Moderne code-editors bieden een indrukwekkende reeks functies die zijn ontworpen om je productiviteit te verhogen: +| Functie | Wat het Doet | Waarom Het Helpt | +|---------|--------------|------------------| +| **Syntax Highlighting** | Kleurt verschillende delen van je code | Maakt code makkelijker leesbaar en fouten sneller zichtbaar | +| **Auto-completion** | Sugereert code terwijl je typt | Versnelt coderen en vermindert tikfouten | +| **Debugging Tools** | Helpt je fouten te vinden en op te lossen | Bespaart uren aan probleemoplossing | +| **Extensions** | Voegt gespecialiseerde functies toe | Maak je editor op maat voor elke technologie | +| **AI Assistants** | Sugereert code en uitleg | Versnelt leren en productiviteit | -| Functie | Wat het doet | Waarom het helpt | -|---------|--------------|------------------| -| **Syntax Highlighting** | Kleurt verschillende delen van je code | Maakt code gemakkelijker te lezen en fouten te spotten | -| **Auto-completion** | Stelt code voor terwijl je typt | Versnelt coderen en vermindert typefouten | -| **Debugging Tools** | Helpt je fouten te vinden en op te lossen | Bespaart uren aan probleemoplossing | -| **Extensions** | Voegt gespecialiseerde functies toe | Past je editor aan voor elke technologie | -| **AI Assistants** | Stelt code en uitleg voor | Versnelt leren en productiviteit | +> 🎥 **Video Resource**: Wil je deze tools in actie zien? Bekijk deze [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) voor een uitgebreide overzicht. -> 🎥 **Video Resource**: Wil je deze tools in actie zien? Bekijk deze [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) voor een uitgebreide uitleg. +#### Aanbevolen Editors voor Web Development -#### Aanbevolen editors voor webontwikkeling +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis) +- Meest populair onder webontwikkelaars +- Uitstekend ecosysteem van extensies +- Ingebouwde terminal en Git-integratie +- **Onmisbare extensies**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-aangedreven code suggesties + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Real-time samenwerking + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatische code-opmaak + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Vang tikfouten in je code -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis) -- Meest populair onder webontwikkelaars -- Uitstekend extensie-ecosysteem -- Ingebouwde terminal en Git-integratie -- **Must-have extensies**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-gestuurde codevoorstellen - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Real-time samenwerking - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatische code-opmaak - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Vang typefouten in je code +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Betaald, gratis voor studenten) +- Geavanceerde debug- en testtools +- Intelligente code-aanvulling +- Ingebouwde versiecontrole -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Betaald, gratis voor studenten) -- Geavanceerde debugging- en testtools -- Intelligente code-completion -- Ingebouwde versiebeheer +**Cloud-Based IDEs** (Verschillende prijzen) +- [GitHub Codespaces](https://github.com/features/codespaces) - Volledige VS Code in je browser +- [Replit](https://replit.com/) - Geweldig om te leren en code te delen +- [StackBlitz](https://stackblitz.com/) - Directe full-stack webontwikkeling -**Cloud-gebaseerde IDE's** (Verschillende prijzen) -- [GitHub Codespaces](https://github.com/features/codespaces) - Volledige VS Code in je browser -- [Replit](https://replit.com/) - Geweldig om te leren en code te delen -- [StackBlitz](https://stackblitz.com/) - Directe, full-stack webontwikkeling +> 💡 **Begintip**: Begin met Visual Studio Code – het is gratis, wordt veel gebruikt in de industrie en heeft een enorme community die handige tutorials en extensies maakt. -> 💡 **Beginnerstip**: Begin met Visual Studio Code – het is gratis, veel gebruikt in de industrie en heeft een enorme community die nuttige tutorials en extensies maakt. -### Webbrowsers: Je geheime ontwikkellaboratorium +### Web Browsers: Je Geheime Ontwikkellabo -Oké, bereid je voor om compleet verbaasd te zijn! Weet je hoe je browsers gebruikt om door sociale media te scrollen en video's te bekijken? Nou, het blijkt dat ze al die tijd een ongelooflijk geheim ontwikkellaboratorium verborgen hebben, gewoon wachtend om door jou ontdekt te worden! +Oké, bereid je voor om je geest compleet te laten verbazen! Je weet hoe je browsers hebt gebruikt om door sociale media te scrollen en video's te kijken? Het blijkt dat ze al die tijd een ongelooflijk geheim ontwikkellaboratorium verborgen hebben, gewoon wachtend op jouw ontdekking! -Elke keer dat je met de rechtermuisknop op een webpagina klikt en "Element inspecteren" selecteert, open je een verborgen wereld van ontwikkelaarstools die eerlijk gezegd krachtiger zijn dan sommige dure software waar ik vroeger honderden euro's voor betaalde. Het is alsof je ontdekt dat je gewone keuken een professioneel laboratorium voor chef-koks verbergt achter een geheime deur! -De eerste keer dat iemand mij de browser DevTools liet zien, heb ik ongeveer drie uur lang rondgeklikt en gedacht: "WACHT, DAT KAN HET OOK?!" Je kunt letterlijk elke website in real-time bewerken, precies zien hoe snel alles laadt, testen hoe je site eruitziet op verschillende apparaten, en zelfs JavaScript debuggen als een echte professional. Het is echt verbluffend! +Elke keer als je met de rechtermuisknop op een webpagina klikt en "Element inspecteren" kiest, open je een verborgen wereld van ontwikkelaarstools die eerlijk gezegd krachtiger zijn dan sommige dure software waarvoor ik vroeger honderden euro's betaalde. Het is alsof je ontdekt dat je gewone keuken achter een geheime paneel een professionele cheflaboratorium heeft verborgen! +De eerste keer dat iemand mij browser DevTools liet zien, heb ik ongeveer drie uur rondgeklikt en gezegd: "WACHT, DAT KAN HET OOK?!" Je kunt letterlijk elke website in realtime bewerken, precies zien hoe snel alles laadt, testen hoe je site eruitziet op verschillende apparaten, en zelfs JavaScript debuggen als een echte pro. Het is gewoonweg verbluffend! -**Waarom browsers jouw geheime wapen zijn:** +**Dit is waarom browsers je geheime wapen zijn:** -Wanneer je een website of webapplicatie maakt, moet je zien hoe het eruitziet en functioneert in de echte wereld. Browsers tonen niet alleen je werk, maar geven ook gedetailleerde feedback over prestaties, toegankelijkheid en mogelijke problemen. +Wanneer je een website of webapplicatie maakt, moet je zien hoe die eruitziet en werkt in de echte wereld. Browsers tonen niet alleen je werk, maar geven ook gedetailleerde feedback over prestaties, toegankelijkheid en mogelijke problemen. #### Browser Developer Tools (DevTools) Moderne browsers bevatten uitgebreide ontwikkelsuites: -| Categorie Tool | Wat het doet | Voorbeeldgebruik | -|----------------|--------------|------------------| -| **Element Inspector** | Bekijk en bewerk HTML/CSS in real-time | Pas styling aan en zie directe resultaten | +| Toolcategorie | Wat Het Doet | Voorbeeld Gebruik | +|---------------|--------------|------------------| +| **Element Inspector** | Bekijk en bewerk HTML/CSS in realtime | Pas styling aan om direct resultaat te zien | | **Console** | Bekijk foutmeldingen en test JavaScript | Debug problemen en experimenteer met code | | **Network Monitor** | Volg hoe bronnen laden | Optimaliseer prestaties en laadtijden | -| **Accessibility Checker** | Test op inclusieve ontwerpen | Zorg dat je site werkt voor alle gebruikers | -| **Device Simulator** | Bekijk hoe je site eruitziet op verschillende schermformaten | Test responsief ontwerp zonder meerdere apparaten | +| **Accessibility Checker** | Test op inclusief ontwerp | Zorg dat je site voor alle gebruikers werkt | +| **Device Simulator** | Bekijk op verschillende schermformaten | Test responsief ontwerp zonder meerdere apparaten | -#### Aanbevolen browsers voor ontwikkeling +#### Aanbevolen Browsers voor Ontwikkeling -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools van industriestandaard met uitgebreide documentatie -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Uitstekende CSS Grid- en toegankelijkheidstools -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Gebouwd op Chromium met Microsofts ontwikkelaarsbronnen +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industriestandaard DevTools met uitgebreide documentatie +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Uitstekende CSS Grid en toegankelijkheidstools +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Gebouwd op Chromium met Microsofts ontwikkelaarsmiddelen -> ⚠️ **Belangrijke testtip**: Test je websites altijd in meerdere browsers! Wat perfect werkt in Chrome kan er anders uitzien in Safari of Firefox. Professionele ontwikkelaars testen in alle grote browsers om een consistente gebruikerservaring te garanderen. +> ⚠️ **Belangrijke Testtip**: Test je websites altijd in meerdere browsers! Wat perfect werkt in Chrome kan er anders uitzien in Safari of Firefox. Professionele ontwikkelaars testen in alle grote browsers om consistente gebruikerservaring te garanderen. -### Command Line Tools: Jouw toegangspoort tot ontwikkelaars-superkrachten -Oké, laten we even eerlijk zijn over de command line, want ik wil dat je dit hoort van iemand die het echt begrijpt. De eerste keer dat ik het zag – gewoon dat enge zwarte scherm met knipperende tekst – dacht ik letterlijk: "Nee, absoluut niet! Dit lijkt op iets uit een hackerfilm uit de jaren 80, en ik ben hier zeker niet slim genoeg voor!" 😅 +### Command Line Tools: Jouw Toegang tot Ontwikkelaarskracht -Maar hier is wat ik toen had willen weten, en wat ik je nu vertel: de command line is niet eng – het is eigenlijk alsof je een direct gesprek hebt met je computer. Zie het als het verschil tussen eten bestellen via een fancy app met plaatjes en menu's (wat leuk en makkelijk is) versus binnenlopen bij je favoriete lokale restaurant waar de chef precies weet wat je lekker vindt en iets perfects kan maken door gewoon te zeggen: "verras me met iets geweldigs." +Oké, laten we even eerlijk zijn over de command line, want ik wil dat je dit hoort van iemand die het echt begrijpt. Toen ik het voor het eerst zag – zo’n enge zwarte scherm met knipperende tekst – dacht ik letterlijk: "Nee, absoluut niet! Dit lijkt wel iets uit een hackerfilm uit de jaren ’80, en ik ben zeker niet slim genoeg hiervoor!" 😅 -De command line is waar ontwikkelaars zich als echte tovenaars voelen. Je typt een paar schijnbaar magische woorden (oké, het zijn gewoon commando's, maar ze voelen magisch!), drukt op enter, en BOEM – je hebt complete projectstructuren gemaakt, krachtige tools van over de hele wereld geïnstalleerd, of je app op internet gezet voor miljoenen mensen om te zien. Zodra je een voorproefje krijgt van die kracht, is het eerlijk gezegd best verslavend! +Maar hier is wat ik wenste dat iemand me toen had verteld, en wat ik je nu vertel: de command line is niet eng – het is eigenlijk alsof je een direct gesprek hebt met je computer. Zie het als het verschil tussen eten bestellen via een chique app met plaatjes en menu’s (wat makkelijk en fijn is), versus binnenlopen in je favoriete lokale restaurant waar de chef precies weet wat je lekker vindt en iets perfects klaarmaakt als jij zegt "verras me maar met iets geweldigs." -**Waarom de command line je favoriete tool wordt:** +De command line is waar ontwikkelaars zich echte tovenaars voelen. Je typt een paar ogenschijnlijk magische woorden (oké, het zijn gewoon opdrachten, maar het voelt magisch!), drukt op enter, en BOEM – je hebt complete projectstructuren gemaakt, krachtige tools van over de hele wereld geïnstalleerd, of je app online gezet zodat miljoenen mensen het kunnen zien. Zodra je die kracht eenmaal proeft, is het eerlijk gezegd best verslavend! -Hoewel grafische interfaces geweldig zijn voor veel taken, blinkt de command line uit in automatisering, precisie en snelheid. Veel ontwikkeltools werken voornamelijk via command line interfaces, en leren hoe je ze efficiënt kunt gebruiken kan je productiviteit enorm verbeteren. +**Waarom de command line jouw favoriete tool wordt:** + +Hoewel grafische interfaces fantastisch zijn voor veel taken, blinkt de command line uit in automatisering, precisie en snelheid. Veel ontwikkeltools werken voornamelijk via command line interfaces, en leren hoe je die efficiënt gebruikt, kan je productiviteit enorm verhogen. ```bash -# Step 1: Create and navigate to project directory +# Stap 1: Maak de projectmap aan en ga er naartoe mkdir my-awesome-website cd my-awesome-website ``` -**Wat deze code doet:** -- **Maak** een nieuwe map genaamd "my-awesome-website" voor je project -- **Navigeer** naar de nieuw aangemaakte map om te beginnen met werken +**Dit is wat deze code doet:** +- **Maak** een nieuwe map genaamd "my-awesome-website" aan voor je project +- **Ga** naar de nieuw aangemaakte map om te beginnen met werken ```bash -# Step 2: Initialize project with package.json +# Stap 2: Initialiseer het project met package.json npm init -y -# Install modern development tools +# Installeer moderne ontwikkeltools npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Stap voor stap, wat er gebeurt:** +**Stap voor stap, dit gebeurt er:** - **Initialiseer** een nieuw Node.js-project met standaardinstellingen via `npm init -y` -- **Installeer** Vite als een moderne buildtool voor snelle ontwikkeling en productie-builds -- **Voeg** Prettier toe voor automatische codeformattering en ESLint voor codekwaliteitscontroles -- **Gebruik** de `--save-dev` vlag om deze als alleen-ontwikkelingsafhankelijkheden te markeren +- **Installeer** Vite als moderne build tool voor snelle ontwikkeling en productie builds +- **Voeg toe** Prettier voor automatische codeformattering en ESLint voor codekwaliteitschecks +- **Gebruik** de `--save-dev` vlag om deze als alleen voor ontwikkeling te markeren ```bash -# Step 3: Create project structure and files +# Stap 3: Maak projectstructuur en bestanden aan mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Start de ontwikkelserver npx vite ``` -**Hier hebben we:** -- **Georganiseerd** ons project door aparte mappen te maken voor broncode en assets -- **Een basis HTML-bestand gegenereerd** met een correcte documentstructuur -- **De Vite ontwikkelserver gestart** voor live herladen en hot module replacement +**Hierboven hebben we:** +- **Georganiseerd** door aparte mappen te maken voor broncode en assets +- **Gegenereerd** een basis HTML-bestand met correcte documentstructuur +- **Gestart** de Vite ontwikkelserver voor live herladen en hot module replacement #### Essentiële Command Line Tools voor Webontwikkeling -| Tool | Doel | Waarom je het nodig hebt | -|------|------|--------------------------| -| **[Git](https://git-scm.com/)** | Versiebeheer | Volg wijzigingen, werk samen met anderen, maak een back-up van je werk | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & pakketbeheer | Voer JavaScript buiten browsers uit, installeer moderne ontwikkeltools | -| **[Vite](https://vitejs.dev/)** | Buildtool & ontwikkelserver | Razendsnelle ontwikkeling met hot module replacement | -| **[ESLint](https://eslint.org/)** | Codekwaliteit | Vind en los automatisch problemen in je JavaScript op | -| **[Prettier](https://prettier.io/)** | Codeformattering | Houd je code consistent geformatteerd en leesbaar | +| Tool | Doel | Waarom Je Het Nodig Hebt | +|------|---------|-----------------| +| **[Git](https://git-scm.com/)** | Versiebeheer | Wijzigingen bijhouden, samenwerken en back-ups maken | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript-runtime & pakketbeheer | JavaScript buiten browsers draaien, moderne ontwikkeltools installeren | +| **[Vite](https://vitejs.dev/)** | Build tool & dev server | Supersnelle ontwikkeling met hot module replacement | +| **[ESLint](https://eslint.org/)** | Codekwaliteit | Automatisch problemen vinden en oplossen in je JavaScript | +| **[Prettier](https://prettier.io/)** | Codeformattering | Houd je code consistent en leesbaar opgemaakt | -#### Platformspecifieke opties +#### Platform-specifieke Opties **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderne, uitgebreide terminal +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderne, feature-rijke terminal - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Krachtige scriptingomgeving - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Traditionele Windows command line **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Ingebouwde terminalapplicatie -- **[iTerm2](https://iterm2.com/)** - Geavanceerde terminal met extra functies +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Ingebouwde terminal applicatie +- **[iTerm2](https://iterm2.com/)** - Verbeterde terminal met geavanceerde functies **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standaard Linux shell -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Geavanceerde terminalemulator +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Geavanceerde terminal emulator + +> 💻 = Voorgeïnstalleerd op het besturingssysteem -> 💻 = Vooraf geïnstalleerd op het besturingssysteem +> 🎯 **Leerroute**: Begin met basiscommando’s zoals `cd` (directory veranderen), `ls` of `dir` (bestanden weergeven), en `mkdir` (map maken). Oefen met moderne workflowcommando’s zoals `npm install`, `git status` en `code .` (opent de huidige map in VS Code). Naarmate je meer vertrouwd raakt, pak je vanzelf geavanceerdere opdrachten en automatiseringstechnieken op. -> 🎯 **Leerpad**: Begin met basiscommando's zoals `cd` (verander map), `ls` of `dir` (lijst bestanden), en `mkdir` (maak map). Oefen met moderne workflowcommando's zoals `npm install`, `git status`, en `code .` (opent huidige map in VS Code). Naarmate je meer vertrouwd raakt, leer je vanzelf meer geavanceerde commando's en automatiseringstechnieken. -### Documentatie: Jouw altijd beschikbare leermentor +### Documentatie: Jouw 24/7 Leermentor -Oké, laat me een klein geheim delen dat je een stuk beter laat voelen over het zijn van een beginner: zelfs de meest ervaren ontwikkelaars besteden een groot deel van hun tijd aan het lezen van documentatie. En dat is niet omdat ze niet weten wat ze doen – het is eigenlijk een teken van wijsheid! +Oké, ik deel een klein geheim dat je echt een stuk beter laat voelen over beginner zijn: zelfs de meest ervaren ontwikkelaars besteden een groot deel van hun tijd aan het lezen van documentatie. En dat is niet omdat ze niet weten wat ze doen – het is juist een teken van wijsheid! -Zie documentatie als toegang tot de meest geduldige, deskundige leraren ter wereld die 24/7 beschikbaar zijn. Vastlopen op een probleem om 2 uur 's nachts? Documentatie is er met een warme virtuele knuffel en precies het antwoord dat je nodig hebt. Wil je leren over een coole nieuwe functie waar iedereen over praat? Documentatie helpt je met stapsgewijze voorbeelden. Probeer je te begrijpen waarom iets werkt zoals het werkt? Je raadt het al – documentatie staat klaar om het uit te leggen op een manier die eindelijk duidelijk wordt! +Zie documentatie als de meest geduldige, deskundige leraren ter wereld die 24/7 voor je klaarstaan. Zit je om 2 uur ’s nachts vast met een probleem? Documentatie is er met een virtuele warme knuffel en precies het antwoord dat je nodig hebt. Wil je leren over een coole nieuwe feature waar iedereen het over heeft? Documentatie staat voor je klaar met stapsgewijze voorbeelden. Probeer je te begrijpen waarom iets werkt zoals het werkt? Je raadt het al – documentatie legt het uit op een manier waardoor het eindelijk klikt! -Hier is iets dat mijn perspectief volledig veranderde: de wereld van webontwikkeling beweegt ongelooflijk snel, en niemand (ik bedoel echt niemand!) onthoudt alles. Ik heb senior ontwikkelaars met meer dan 15 jaar ervaring basis-syntaxis zien opzoeken, en weet je wat? Dat is niet gênant – dat is slim! Het gaat niet om een perfect geheugen hebben; het gaat erom snel betrouwbare antwoorden te vinden en te begrijpen hoe je ze kunt toepassen. +Hier is iets dat mijn kijk compleet heeft veranderd: de wereld van webontwikkeling beweegt ongelooflijk snel, en niemand (ik bedoel echt NIEMAND!) onthoudt alles uit zijn hoofd. Ik heb senior developers met meer dan 15 jaar ervaring basale syntax zien opzoeken, en weet je? Dat is niet beschamend – dat is slim! Het gaat niet om het hebben van een perfect geheugen, maar om weten waar je snel betrouwbare antwoorden vindt en hoe je die toepast. **Hier gebeurt de echte magie:** -Professionele ontwikkelaars besteden een aanzienlijk deel van hun tijd aan het lezen van documentatie – niet omdat ze niet weten wat ze doen, maar omdat het webontwikkelingslandschap zo snel evolueert dat up-to-date blijven continu leren vereist. Goede documentatie helpt je niet alleen te begrijpen *hoe* je iets gebruikt, maar ook *waarom* en *wanneer* je het moet gebruiken. +Professionele ontwikkelaars besteden een flink deel van hun tijd aan documentatie – niet omdat ze niet weten wat ze doen, maar omdat het landschap van webontwikkeling zo snel verandert dat je up-to-date blijven continu moet bijleren. Goede documentatie helpt je niet alleen te begrijpen *hoe* je iets gebruikt, maar ook *waarom* en *wanneer* je het moet gebruiken. -#### Essentiële documentatiebronnen +#### Essentiële Documentatiebronnen **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- De gouden standaard voor webtechnologie-documentatie +- De gouden standaard voor webtechnologie documentatie - Uitgebreide gidsen voor HTML, CSS en JavaScript -- Inclusief browsercompatibiliteitsinformatie -- Bevat praktische voorbeelden en interactieve demo's +- Bevat informatie over browsercompatibiliteit +- Beschikt over praktische voorbeelden en interactieve demo’s **[Web.dev](https://web.dev)** (door Google) -- Moderne webontwikkelingsbest practices +- Moderne best practices in webontwikkeling - Gidsen voor prestatieoptimalisatie -- Principes van toegankelijkheid en inclusief ontwerp -- Case studies van echte projecten +- Principes voor toegankelijkheid en inclusief ontwerp +- Case-studies uit de praktijk **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Edge browser ontwikkelingsbronnen -- Progressive Web App gidsen -- Inzichten in cross-platform ontwikkeling +- Ontwikkelbronnen voor de Edge browser +- Progressive Web App handleidingen +- Inzichten over cross-platform ontwikkeling **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Gestructureerde leerprogramma's -- Videocursussen van industrie-experts -- Hands-on codeeropdrachten +- Gestructureerde leertrajecten +- Videocursussen van experts uit de industrie +- Praktische codeeroefeningen -> 📚 **Studie strategie**: Probeer documentatie niet te onthouden – leer in plaats daarvan hoe je het efficiënt kunt navigeren. Maak bladwijzers van vaak gebruikte referenties en oefen met de zoekfuncties om snel specifieke informatie te vinden. +> 📚 **Studie-strategie**: Probeer documentatie niet te onthouden – leer in plaats daarvan hoe je er efficiënt in navigeert. Zet vaak gebruikte referenties als bladwijzer en oefen het zoeken om snel specifieke informatie te vinden. -### 🔧 **Tool Mastery Check: Wat spreekt je aan?** +### 🔧 **Check Jouw Toolbeheersing: Wat Spreekt Jou Aan?** -**Neem een moment om te overwegen:** +**Neem even de tijd om na te denken:** - Welke tool wil je als eerste proberen? (Er is geen fout antwoord!) - Voelt de command line nog steeds intimiderend, of ben je er nieuwsgierig naar? -- Kun je je voorstellen dat je browser DevTools gebruikt om achter de schermen van je favoriete websites te kijken? +- Kun je je voorstellen browser DevTools te gebruiken om achter de schermen van je favoriete websites te kijken? ```mermaid -pie title "Developer Time Spent With Tools" +pie title "Ontwikkelaarstijd Besteed aan Hulpmiddelen" "Code Editor" : 40 "Browser Testing" : 25 "Command Line" : 15 "Reading Docs" : 15 "Debugging" : 5 ``` +> **Leuke tip**: De meeste ontwikkelaars besteden ongeveer 40% van hun tijd in hun code-editor, maar merk op hoeveel tijd naar testen, leren en probleemoplossing gaat. Programmeren gaat niet alleen over code schrijven – het gaat over het creëren van ervaringen! -> **Leuke inzicht**: De meeste ontwikkelaars besteden ongeveer 40% van hun tijd in hun code-editor, maar let op hoeveel tijd gaat naar testen, leren en probleemoplossing. Programmeren gaat niet alleen over code schrijven – het gaat over het creëren van ervaringen! - -✅ **Om over na te denken**: Hier is iets interessants om over na te denken – hoe denk je dat de tools voor het bouwen van websites (ontwikkeling) verschillen van de tools voor het ontwerpen van hoe ze eruitzien (ontwerp)? Het is zoals het verschil tussen een architect die een prachtig huis ontwerpt en de aannemer die het daadwerkelijk bouwt. Beide zijn cruciaal, maar ze hebben verschillende gereedschapskisten nodig! Dit soort denken helpt je echt om het grotere plaatje te zien van hoe websites tot leven komen. +✅ **Denkstof**: Hier is iets om over na te denken – hoe denk je dat tools voor het bouwen van websites (ontwikkeling) verschillen van tools voor het ontwerpen van hoe ze eruitzien (design)? Het is als het verschil tussen een architect die een mooi huis ontwerpt en de aannemer die het daadwerkelijk bouwt. Beiden zijn cruciaal, maar ze hebben verschillende gereedschapskisten nodig! Dit soort denken helpt je echt het grotere geheel te zien van hoe websites tot leven komen. ## GitHub Copilot Agent Challenge 🚀 Gebruik de Agent-modus om de volgende uitdaging te voltooien: -**Beschrijving:** Verken de functies van een moderne code-editor of IDE en demonstreer hoe deze je workflow als webontwikkelaar kan verbeteren. +**Beschrijving:** Verken de functies van een moderne code-editor of IDE en demonstreer hoe dit je workflow als webontwikkelaar kan verbeteren. -**Prompt:** Kies een code-editor of IDE (zoals Visual Studio Code, WebStorm of een cloud-gebaseerde IDE). Noem drie functies of extensies die je helpen om efficiënter code te schrijven, debuggen of onderhouden. Geef voor elk een korte uitleg over hoe het je workflow ten goede komt. +**Prompt:** Kies een code-editor of IDE (zoals Visual Studio Code, WebStorm, of een cloud-gebaseerde IDE). Noem drie functies of extensies die je helpen efficiënter code te schrijven, debuggen of onderhouden. Geef bij elk een korte uitleg hoe het je workflow verbetert. --- @@ -737,93 +736,94 @@ Gebruik de Agent-modus om de volgende uitdaging te voltooien: **Oké, detective, klaar voor je eerste zaak?** -Nu je deze geweldige basis hebt, heb ik een avontuur dat je helpt te zien hoe ongelooflijk divers en fascinerend de programmeerwereld echt is. En luister – dit gaat nog niet over code schrijven, dus geen druk daar! Zie jezelf als een programmeertaal-detective op je allereerste spannende zaak! +Nu je deze geweldige basis hebt, heb ik een avontuur voor je dat je gaat laten zien hoe ongelooflijk divers en fascinerend de wereld van programmeren eigenlijk is. En onthoud – dit gaat nog niet over code schrijven, dus geen druk! Zie jezelf als een programmeertale detective bij je allereerste spannende zaak! -**Je missie, als je ervoor kiest om deze te accepteren:** -1. **Word een taalverkenner**: Kies drie programmeertalen uit totaal verschillende werelden – misschien één die websites bouwt, één die mobiele apps maakt, en één die data verwerkt voor wetenschappers. Zoek voorbeelden van dezelfde eenvoudige taak geschreven in elke taal. Ik beloof je dat je versteld zult staan van hoe verschillend ze eruit kunnen zien terwijl ze precies hetzelfde doen! +**Je missie, als je die accepteert:** +1. **Word een taalontdekker**: Kies drie programmeertalen uit totaal verschillende werelden – misschien één die websites bouwt, één die mobiele apps maakt, en één die data verwerkt voor wetenschappers. Zoek voorbeelden van dezelfde eenvoudige taak geschreven in elke taal. Ik beloof je dat je versteld zult staan hoe verschillend ze eruit kunnen zien terwijl ze precies hetzelfde doen! -2. **Ontdek hun oorsprongsverhalen**: Wat maakt elke taal speciaal? Hier is een cool feit – elke programmeertaal is gemaakt omdat iemand dacht: "Weet je wat? Er moet een betere manier zijn om dit specifieke probleem op te lossen." Kun je achterhalen wat die problemen waren? Sommige van deze verhalen zijn echt fascinerend! +2. **Ontdek hun ontstaan**: Wat maakt elke taal speciaal? Hier is een leuk feit – elke programmeertaal is gemaakt omdat iemand dacht: "Weet je wat? Er moet een betere manier zijn om dit specifieke probleem op te lossen." Kun je uitzoeken wat die problemen waren? Sommige van deze verhalen zijn echt fascinerend! -3. **Ontmoet de gemeenschappen**: Bekijk hoe gastvrij en gepassioneerd de gemeenschap van elke taal is. Sommige hebben miljoenen ontwikkelaars die kennis delen en elkaar helpen, andere zijn kleiner maar ongelooflijk hecht en ondersteunend. Je zult het geweldig vinden om de verschillende persoonlijkheden van deze gemeenschappen te zien! +3. **Leer de communities kennen**: Kijk hoe gastvrij en gepassioneerd elke taal-community is. Sommige hebben miljoenen ontwikkelaars die kennis delen en elkaar helpen, anderen zijn kleiner maar ontzettend hecht en ondersteunend. Je gaat het leuk vinden om de verschillende persoonlijkheden te zien! -4. **Volg je gevoel**: Welke taal voelt op dit moment het meest toegankelijk voor jou? Maak je geen zorgen over het maken van de "perfecte" keuze – luister gewoon naar je instinct! Er is hier echt geen fout antwoord, en je kunt later altijd andere talen verkennen. +4. **Volg je intuïtie**: Welke taal voelt op dit moment het meest toegankelijk voor jou? Maak je geen zorgen over de "perfecte" keuze – luister gewoon naar je instinct! Er is echt geen fout antwoord, en je kunt altijd later andere talen ontdekken. -**Bonus detectivewerk**: Kijk of je kunt ontdekken welke grote websites of apps met elke taal zijn gebouwd. Ik garandeer je dat je versteld zult staan als je ontdekt wat Instagram, Netflix of die mobiele game die je niet kunt stoppen met spelen aandrijft! +**Bonus detectivewerk**: Kijk of je kunt ontdekken welke grote websites of apps met elke taal zijn gebouwd. Ik garandeer dat je versteld zult staan van wat Instagram, Netflix of dat mobiele spelletje dat je niet kunt stoppen met spelen, aandrijft! -> 💡 **Onthoud**: Je probeert vandaag niet een expert te worden in een van deze talen. Je leert gewoon de buurt kennen voordat je besluit waar je wilt gaan wonen. Neem je tijd, geniet ervan, en laat je nieuwsgierigheid je leiden! +> 💡 **Onthoud**: Je probeert vandaag geen expert te worden in deze talen. Je leert alleen de buurt kennen voordat je beslist waar je wilt gaan wonen. Neem je tijd, heb plezier, en laat je nieuwsgierigheid je leiden! ## Laten we vieren wat je hebt ontdekt! -Wauw, je hebt vandaag zoveel geweldige informatie opgenomen! Ik ben echt enthousiast om te zien hoeveel van deze geweldige reis bij je is blijven hangen. En onthoud – dit is geen test waar je alles perfect moet doen. Dit is meer een viering van alle coole dingen die je hebt geleerd over deze fascinerende wereld waarin je je gaat verdiepen! +Jeetje mina, je hebt vandaag zo veel geweldige informatie in je opgenomen! Ik ben echt benieuwd hoeveel van deze geweldige reis je is bijgebleven. En onthoud – dit is geen toets waar je alles perfect moet doen. Dit is meer een viering van alle toffe dingen die je hebt geleerd over deze fascinerende wereld waar je zo in gaat duiken! + +[Neem de post-les quiz](https://ff-quizzes.netlify.app/web/) -[Doe de quiz na de les](https://ff-quizzes.netlify.app/web/) ## Review & Zelfstudie -**Neem de tijd om te verkennen en er plezier in te hebben!** +**Neem de tijd om te ontdekken en plezier te hebben!** -Je hebt vandaag veel geleerd, en daar mag je trots op zijn! Nu komt het leuke gedeelte – de onderwerpen verkennen die je nieuwsgierigheid hebben gewekt. Onthoud, dit is geen huiswerk – het is een avontuur! +Je hebt vandaag veel geleerd, en dat is iets om trots op te zijn! Nu komt het leukste deel – het verkennen van de onderwerpen die je nieuwsgierigheid hebben gewekt. Onthoud, dit is geen huiswerk – het is een avontuur! -**Duik dieper in wat je interesseert:** +**Verdiep je in wat jou enthousiast maakt:** -**Ga aan de slag met programmeertalen:** -- Bezoek de officiële websites van 2-3 talen die je aandacht hebben getrokken. Elke taal heeft zijn eigen persoonlijkheid en verhaal! -- Probeer enkele online coding playgrounds zoals [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) of [Replit](https://replit.com/). Wees niet bang om te experimenteren – je kunt niets kapot maken! -- Lees over hoe jouw favoriete programmeertaal is ontstaan. Echt waar, sommige van deze verhalen zijn fascinerend en helpen je te begrijpen waarom talen werken zoals ze doen. +**Ga praktisch aan de slag met programmeertalen:** +- Bezoek de officiële websites van 2-3 talen die je aandacht trokken. Elke taal heeft zijn eigen persoonlijkheid en verhaal! +- Probeer wat online codeerplatforms zoals [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), of [Replit](https://replit.com/). Wees niet bang om te experimenteren – je kunt niets stuk maken! +- Lees over hoe jouw favoriete taal is ontstaan. Echt, sommige van deze oorsprongsverhalen zijn fascinerend en helpen je te begrijpen waarom talen werken zoals ze doen. **Word vertrouwd met je nieuwe tools:** -- Download Visual Studio Code als je dat nog niet hebt gedaan – het is gratis en je gaat het geweldig vinden! -- Besteed een paar minuten aan het bladeren door de Extensions-marktplaats. Het is net een app store voor je code-editor! -- Open de Developer Tools van je browser en klik gewoon rond. Maak je geen zorgen over alles begrijpen – raak gewoon vertrouwd met wat er is. +- Download Visual Studio Code als je dat nog niet gedaan hebt – het is gratis en je gaat het geweldig vinden! +- Neem een paar minuten de tijd om de extensiemarkt te verkennen. Het is als een appwinkel voor je code-editor! +- Open de ontwikkelaarstools van je browser en klik wat rond. Maak je geen zorgen als je niet alles begrijpt – raak gewoon vertrouwd met wat er is. **Sluit je aan bij de community:** -- Volg enkele ontwikkelaarsgemeenschappen op [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) of [GitHub](https://github.com/). De programmeergemeenschap is ongelooflijk gastvrij voor nieuwkomers! -- Bekijk enkele beginnersvriendelijke programmeervideo's op YouTube. Er zijn zoveel geweldige makers die zich herinneren hoe het is om net te beginnen. -- Overweeg om deel te nemen aan lokale meetups of online gemeenschappen. Geloof me, ontwikkelaars helpen graag nieuwkomers! +- Volg enkele ontwikkelaarscommunity’s op [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), of [GitHub](https://github.com/). De programmeergemeenschap verwelkomt nieuwkomers ontzettend graag! +- Bekijk beginner-vriendelijke codeervideo’s op YouTube. Er zijn zoveel geweldige makers die zich herinneren hoe het is om te beginnen. +- Overweeg om deel te nemen aan lokale meetups of online communities. Geloof me, ontwikkelaars helpen nieuwkomers graag! -> 🎯 **Luister, dit wil ik dat je onthoudt**: Je wordt niet verwacht om van de ene op de andere dag een programmeerexpert te worden! Op dit moment leer je gewoon deze geweldige nieuwe wereld kennen waar je deel van gaat uitmaken. Neem de tijd, geniet van de reis, en onthoud – elke ontwikkelaar die je bewondert, zat ooit precies waar jij nu zit, enthousiast en misschien een beetje overweldigd. Dat is helemaal normaal, en het betekent dat je het goed doet! +> 🎯 **Luister, dit wil ik dat je onthoudt**: Je hoeft niet van de ene op de andere dag een programmeer-expert te worden! Op dit moment leer je alleen deze geweldige nieuwe wereld kennen waar je deel van gaat uitmaken. Neem je tijd, geniet van de reis, en onthoud – elke ontwikkelaar die je bewondert zat ooit precies waar jij nu zit, voelde zich enthousiast en misschien een beetje overweldigd. Dat is heel normaal, en het betekent dat je het goed doet! ## Opdracht -[De documentatie lezen](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **Een kleine aanmoediging voor je opdracht**: Ik zou het geweldig vinden om te zien dat je enkele tools verkent die we nog niet hebben behandeld! Sla de editors, browsers en commandoregeltools over waar we het al over hebben gehad – er is een hele ongelooflijke wereld van geweldige ontwikkeltools die erop wachten om ontdekt te worden. Zoek naar tools die actief worden onderhouden en een levendige, behulpzame community hebben (deze hebben meestal de beste tutorials en de meest ondersteunende mensen wanneer je onvermijdelijk vastloopt en een helpende hand nodig hebt). +> 💡 **Een kleine hint voor je opdracht**: Ik zou het fantastisch vinden als je tools gaat ontdekken die we nog niet behandeld hebben! Sla de editors, browsers en commandline-tools over waar we het al over gehad hebben – er is een hele geweldige wereld van ontwikkeltools die wachten om ontdekt te worden. Zoek naar tools die actief worden onderhouden en levendige, behulpzame communities hebben (deze hebben meestal de beste tutorials en de meest ondersteunende mensen wanneer je vastloopt en een helpende hand nodig hebt). --- -## 🚀 Jouw Programmeerreis Tijdlijn +## 🚀 Je Programmeerreis Tijdlijn -### ⚡ **Wat Je Binnen 5 Minuten Kunt Doen** -- [ ] Bookmark 2-3 websites van programmeertalen die je interessant vindt +### ⚡ **Wat je in de volgende 5 minuten kunt doen** +- [ ] Bookmark 2-3 websites van programmeertalen die je aandacht trokken - [ ] Download Visual Studio Code als je dat nog niet hebt gedaan -- [ ] Open de DevTools van je browser (F12) en klik rond op een willekeurige website -- [ ] Sluit je aan bij één programmeergemeenschap (Dev.to, Reddit r/webdev, of Stack Overflow) +- [ ] Open de DevTools van je browser (F12) en klik wat rond op een website +- [ ] Sluit je aan bij een programmeergemeenschap (Dev.to, Reddit r/webdev, of Stack Overflow) -### ⏰ **Wat Je Binnen Een Uur Kunt Bereiken** +### ⏰ **Wat je dit uur kunt bereiken** - [ ] Maak de quiz na de les en reflecteer op je antwoorden - [ ] Stel VS Code in met de GitHub Copilot-extensie -- [ ] Probeer een "Hello World"-voorbeeld in 2 verschillende programmeertalen online -- [ ] Bekijk een "Dag uit het leven van een ontwikkelaar"-video op YouTube -- [ ] Begin met je programmeertaal-detectivewerk (uit de uitdaging) +- [ ] Probeer een "Hello World" voorbeeld in 2 verschillende programmeertalen online +- [ ] Bekijk een video “Dag uit het leven van een ontwikkelaar” op YouTube +- [ ] Begin je detectivewerk voor programmeertalen (uit de uitdaging) -### 📅 **Je Weeklange Avontuur** -- [ ] Maak de opdracht af en verken 3 nieuwe ontwikkeltools +### 📅 **Je weeklange avontuur** +- [ ] Maak de opdracht af en ontdek 3 nieuwe ontwikkeltools - [ ] Volg 5 ontwikkelaars of programmeeraccounts op sociale media -- [ ] Probeer iets kleins te bouwen in CodePen of Replit (zelfs "Hallo, [Jouw Naam]!") -- [ ] Lees een blogpost van een ontwikkelaar over hun programmeerreis -- [ ] Neem deel aan een virtuele meetup of bekijk een programmeerpresentatie -- [ ] Begin met het leren van je gekozen programmeertaal via online tutorials - -### 🗓️ **Je Maandlange Transformatie** -- [ ] Bouw je eerste kleine project (zelfs een eenvoudige webpagina telt!) -- [ ] Draag bij aan een open-sourceproject (begin met documentatiefixes) -- [ ] Begeleid iemand die net begint met programmeren -- [ ] Maak je ontwikkelaarsportfolio-website -- [ ] Maak contact met lokale ontwikkelaarsgemeenschappen of studiegroepen +- [ ] Probeer iets kleins te bouwen in CodePen of Replit (zelfs maar “Hello, [Je Naam]!”) +- [ ] Lees een blogpost van een ontwikkelaar over iemands codeerreis +- [ ] Doe mee aan een virtuele meetup of bekijk een programmeertalk +- [ ] Begin je gekozen programmeertaal te leren met online tutorials + +### 🗓️ **Je maandlange transformatie** +- [ ] Bouw je eerste kleine project (zelfs een simpele webpagina telt!) +- [ ] Draag bij aan een open-sourceproject (begin met documentatie-aanpassingen) +- [ ] Word mentor van iemand die net begint met programmeren +- [ ] Maak je eigen ontwikkelaarsportfolio-website +- [ ] Verbind met lokale ontwikkelaarsgemeenschappen of studiegroepen - [ ] Begin met het plannen van je volgende leerdoel -### 🎯 **Eindreflectie Check-in** +### 🎯 **Laatste reflectiecontrole** **Voordat je verder gaat, neem een moment om te vieren:** - Wat is één ding aan programmeren dat je vandaag enthousiast maakte? @@ -833,24 +833,25 @@ Je hebt vandaag veel geleerd, en daar mag je trots op zijn! Nu komt het leuke ge ```mermaid journey - title Your Confidence Building Journey - section Today - Curious: 3: You - Overwhelmed: 4: You - Excited: 5: You - section This Week - Exploring: 4: You - Learning: 5: You - Connecting: 4: You - section Next Month - Building: 5: You - Confident: 5: You - Helping Others: 5: You + title Jouw Zelfvertrouwen Opbouw Reis + section Vandaag + Nieuwsgierig: 3: You + Overweldigd: 4: You + Enthousiast: 5: You + section Deze Week + Verkennen: 4: You + Leren: 5: You + Verbinden: 4: You + section Volgende Maand + Bouwen: 5: You + Zelfverzekerd: 5: You + Anderen Helpen: 5: You ``` - -> 🌟 **Onthoud**: Elke expert was ooit een beginner. Elke senior ontwikkelaar heeft zich ooit precies zo gevoeld als jij nu – enthousiast, misschien een beetje overweldigd, en zeker nieuwsgierig naar wat mogelijk is. Je bent in geweldig gezelschap, en deze reis gaat ongelooflijk worden. Welkom in de prachtige wereld van programmeren! 🎉 +> 🌟 **Onthoud**: Elke expert was ooit een beginner. Elke senior developer voelde zich ooit precies zoals jij je nu voelt – enthousiast, misschien een beetje overweldigd, en zeker nieuwsgierig naar wat er mogelijk is. Je bent in geweldig gezelschap, en deze reis gaat geweldig worden. Welkom in de prachtige wereld van programmeren! 🎉 --- -**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 zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. \ No newline at end of file + +**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, kan het voorkomen dat geautomatiseerde vertalingen fouten of onnauwkeurigheden bevatten. Het oorspronkelijke document in de oorspronkelijke taal dient als de gezaghebbende bron te worden beschouwd. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. + \ No newline at end of file diff --git a/translations/nl/AGENTS.md b/translations/nl/AGENTS.md index 7a774d3c7..929e39c37 100644 --- a/translations/nl/AGENTS.md +++ b/translations/nl/AGENTS.md @@ -2,25 +2,25 @@ ## Projectoverzicht -Dit is een educatieve curriculumrepository voor het onderwijzen van webontwikkeling aan beginners. Het curriculum is een uitgebreide cursus van 12 weken ontwikkeld door Microsoft Cloud Advocates, met 24 hands-on lessen over JavaScript, CSS en HTML. +Dit is een educatieve curriculumrepository voor het onderwijzen van basisprincipes van webontwikkeling aan beginners. Het curriculum is een uitgebreide cursus van 12 weken ontwikkeld door Microsoft Cloud Advocates, met 24 praktische lessen die JavaScript, CSS en HTML behandelen. -### Belangrijkste Onderdelen +### Belangrijke Componenten -- **Educatieve inhoud**: 24 gestructureerde lessen georganiseerd in projectgebaseerde modules -- **Praktische projecten**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor en AI Chat Assistant -- **Interactieve quizzen**: 48 quizzen met elk 3 vragen (pre/post-les beoordelingen) -- **Meertalige ondersteuning**: Geautomatiseerde vertalingen voor 50+ talen via GitHub Actions +- **Educatieve Inhoud**: 24 gestructureerde lessen georganiseerd in projectgebaseerde modules +- **Praktische Projecten**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor en AI Chat Assistant +- **Interactieve Quizzen**: 48 quizzen met elk 3 vragen (voor/na lesbeoordelingen) +- **Meertalige Ondersteuning**: Automatische vertalingen voor 50+ talen via GitHub Actions - **Technologieën**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (voor AI-projecten) ### Architectuur - Educatieve repository met lesgebaseerde structuur - Elke lesmap bevat README, codevoorbeelden en oplossingen -- Losstaande projecten in aparte directories (quiz-app, diverse lesprojecten) -- Vertalingssysteem via GitHub Actions (co-op-translator) -- Documentatie geserveerd via Docsify en beschikbaar als PDF +- Onafhankelijke projecten in aparte mappen (quiz-app, diverse lesprojecten) +- Vertalingssysteem met GitHub Actions (co-op-translator) +- Documentatie geleverd via Docsify en beschikbaar als PDF -## Setup Commando's +## Installatiecommando's Deze repository is primair bedoeld voor het consumeren van educatieve inhoud. Voor het werken met specifieke projecten: @@ -48,7 +48,7 @@ cd 7-bank-project/api npm install npm start # Start API-server npm run lint # Voer ESLint uit -npm run format # Opmaak met Prettier +npm run format # Format met Prettier ``` ### Browser Extension Projecten @@ -72,87 +72,87 @@ npm install ```bash cd 9-chat-project/solution/backend/python pip install openai -# Stel de omgevingsvariabele GITHUB_TOKEN in +# Stel de GITHUB_TOKEN omgevingsvariabele in python api.py ``` ## Ontwikkelworkflow -### Voor Inhoud Bijdragers +### Voor Inhoudbijdragers 1. **Fork de repository** naar je GitHub-account 2. **Clone je fork** lokaal -3. **Maak een nieuwe branch** aan voor je wijzigingen -4. Breng wijzigingen aan in lesinhoud of codevoorbeelden -5. Test eventuele codewijzigingen in relevante projectdirectories +3. **Maak een nieuwe branch** voor je wijzigingen +4. Pas lesinhoud of codevoorbeelden aan +5. Test codewijzigingen in relevante projectmappen 6. Dien pull requests in volgens de bijdrage-richtlijnen ### Voor Leerlingen 1. Fork of clone de repository -2. Navigeer sequentieel naar lesdirectories -3. Lees README-bestanden voor iedere les -4. Maak de pre-les quizzen op https://ff-quizzes.netlify.app/web/ -5. Werk door codevoorbeelden in lesmappen -6. Voltooi opdrachten en uitdagingen +2. Navigeer sequentieel door de lesmappen +3. Lees de README-bestanden van elke les +4. Maak pre-les quizzen op https://ff-quizzes.netlify.app/web/ +5. Werk door codevoorbeelden in de lesmappen +6. Maak opdrachten en uitdagingen af 7. Maak post-les quizzen ### Live Ontwikkeling -- **Documentatie**: Run `docsify serve` in root (poort 3000) -- **Quiz App**: Run `npm run dev` in quiz-app directory +- **Documentatie**: Voer `docsify serve` uit in de root (poort 3000) +- **Quiz App**: Voer `npm run dev` uit in quiz-app map - **Projecten**: Gebruik VS Code Live Server extensie voor HTML-projecten -- **API Projecten**: Run `npm start` in respectievelijke API directories +- **API Projecten**: Voer `npm start` uit in respectievelijke API-mappen ## Testinstructies -### Quiz App Testing +### Quiz App Testen ```bash cd quiz-app -npm run lint # Controleer op problemen met code-stijl -npm run build # Verifieer dat de build slaagt +npm run lint # Controleer op code stijlproblemen +npm run build # Controleer of de build slaagt ``` -### Bank API Testing +### Bank API Testen ```bash cd 7-bank-project/api -npm run lint # Controleren op problemen met de code stijl -node server.js # Controleren of de server zonder fouten start +npm run lint # Controleer op problemen met code stijl +node server.js # Controleer of de server zonder fouten start ``` ### Algemene Testaanpak - Dit is een educatieve repository zonder uitgebreide geautomatiseerde tests -- Handmatig testen focust op: - - Codevoorbeelden draaien zonder fouten - - Links in documentatie werken correct - - Project builds verlopen succesvol - - Voorbeelden volgen best practices +- Handmatig testen richt zich op: + - Codevoorbeelden die foutloos draaien + - Links in documentatie die werken + - Project builds die succesvol afronden + - Voorbeelden die best practices volgen -### Pre-Submission Checks +### Pre-submissie Checks -- Run `npm run lint` in directories met package.json -- Verifieer dat markdown links geldig zijn +- Voer `npm run lint` uit in mappen met package.json +- Controleer of markdown links geldig zijn - Test codevoorbeelden in browser of Node.js -- Controleer dat vertalingen juiste structuur behouden +- Controleer dat vertalingen structuur behouden -## Code Style Richtlijnen +## Code Stijlrichtlijnen ### JavaScript - Gebruik moderne ES6+ syntax -- Volg standaard ESLint configuraties zoals in projecten opgegeven +- Volg standaard ESLint-configuraties in projecten - Gebruik betekenisvolle variabele- en functienamen voor educatieve duidelijkheid -- Voeg commentaar toe die concepten uitlegt voor leerlingen +- Voeg commentaar toe dat concepten uitlegt voor leerlingen - Format met Prettier waar geconfigureerd ### HTML/CSS -- Semantische HTML5-elementen -- Responsive design principes -- Duidelijke class naming conventies +- Semantische HTML5 elementen +- Responsieve designprincipes +- Duidelijke klassennamenconventies - Commentaar dat CSS-technieken uitlegt voor leerlingen ### Python @@ -166,13 +166,13 @@ node server.js # Controleren of de server zonder fouten start - Duidelijke koppenhiërarchie - Codeblokken met taalspecificatie - Links naar aanvullende bronnen -- Screenshots en afbeeldingen in `images/` directories +- Screenshots en afbeeldingen in `images/` mappen - Alt-tekst voor afbeeldingen voor toegankelijkheid ### Bestandsorganisatie -- Lessen oplopend genummerd (1-getting-started-lessons, 2-js-basics, etc.) -- Elk project heeft `solution/` en vaak `start/` of `your-work/` directories +- Lessen genummerd in volgorde (1-getting-started-lessons, 2-js-basics, enz.) +- Elk project heeft `solution/` en vaak `start/` of `your-work/` mappen - Afbeeldingen opgeslagen in les-specifieke `images/` mappen - Vertalingen in `translations/{language-code}/` structuur @@ -184,7 +184,7 @@ De quiz-app is geconfigureerd voor Azure Static Web Apps deployment: ```bash cd quiz-app -npm run build # Maakt map dist/ aan +npm run build # Maakt dist/ map aan # Zet uit via GitHub Actions workflow bij push naar main ``` @@ -193,7 +193,7 @@ Azure Static Web Apps configuratie: - **Output locatie**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Generatie van Documentatie PDF +### PDF Generatie Documentatie ```bash npm install # Installeer docsify-to-pdf @@ -204,14 +204,14 @@ npm run convert # Genereer PDF van docs ```bash npm install -g docsify-cli # Installeer Docsify wereldwijd -docsify serve # Server op localhost:3000 +docsify serve # Serveer op localhost:3000 ``` ### Projectspecifieke Builds -Elke projectdirectory kan zijn eigen buildproces hebben: -- Vue projecten: `npm run build` creëert productie bundles -- Statische projecten: Geen buildstap, serveer bestanden direct +Elke projectmap kan een eigen buildproces hebben: +- Vue projecten: `npm run build` maakt productie bundles +- Statische projecten: Geen build stap, serveer bestanden direct ## Pull Request Richtlijnen @@ -219,64 +219,64 @@ Elke projectdirectory kan zijn eigen buildproces hebben: Gebruik duidelijke, beschrijvende titels die het wijzigingsgebied aangeven: - `[Quiz-app] Voeg nieuwe quiz toe voor les X` -- `[Lesson-3] Corrigeer typefout in terrarium project` -- `[Translation] Voeg Spaanse vertaling toe voor les 5` -- `[Docs] Werk setup-instructies bij` +- `[Les-3] Corrigeer typefout in terrarium project` +- `[Vertaling] Voeg Spaanse vertaling toe voor les 5` +- `[Docs] Update installatie-instructies` ### Vereiste Checks Voor het indienen van een PR: 1. **Codekwaliteit**: - - Run `npm run lint` in de betrokken projectdirectories - - Los alle linting-fouten en waarschuwingen op + - Voer `npm run lint` uit in getroffen projectmappen + - Los alle lintfouten en waarschuwingen op -2. **Build-verificatie**: - - Run `npm run build` indien van toepassing +2. **Build Verificatie**: + - Voer `npm run build` uit indien van toepassing - Zorg dat er geen buildfouten zijn -3. **Link validatie**: +3. **Link Validatie**: - Test alle markdown links - - Verifieer dat afbeeldingsreferenties werken + - Verifieer dat afbeeldingen correct verwijzen 4. **Inhoud Review**: - - Corrigeer spelling en grammatica + - Controleer spelling en grammatica - Zorg dat codevoorbeelden correct en educatief zijn - Controleer dat vertalingen oorspronkelijke betekenis behouden -### Bijdrage Vereisten +### Bijdragereisen -- Ga akkoord met Microsoft CLA (automatische check bij eerste PR) -- Volg de [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Ga akkoord met Microsoft CLA (geautomatiseerde check bij eerste PR) +- Volg de [Microsoft Open Source Gedragscode](https://opensource.microsoft.com/codeofconduct/) - Zie [CONTRIBUTING.md](./CONTRIBUTING.md) voor gedetailleerde richtlijnen -- Verwijs naar issuetickets in PR-beschrijving indien relevant +- Verwijs naar issue nummers in PR omschrijving indien van toepassing ### Review Proces -- PR's worden beoordeeld door maintainers en community -- Educatieve duidelijkheid wordt prioriteit gegeven -- Codevoorbeelden moeten huidige best practices volgen -- Vertalingen worden beoordeeld op nauwkeurigheid en culturele passendheid +- PR's worden beoordeeld door maintainers en de gemeenschap +- Educatieve helderheid heeft prioriteit +- Codevoorbeelden dienen best practices te volgen +- Vertalingen worden gecontroleerd op nauwkeurigheid en culturele relevantie ## Vertalingssysteem ### Geautomatiseerde Vertaling -- Gebruikt GitHub Actions met co-op-translator workflow -- Vertalingen naar 50+ talen automatisch -- Bronbestanden in hoofddirectories -- Vertaalde bestanden in `translations/{language-code}/` directories +- Maakt gebruik van GitHub Actions met co-op-translator workflow +- Verzamelt vertalingen in 50+ talen automatisch +- Bronbestanden in hoofdmappen +- Vertaalde bestanden in `translations/{language-code}/` mappen ### Handmatige Vertaalverbeteringen Toevoegen -1. Zoek bestand op in `translations/{language-code}/` -2. Breng verbeteringen aan met behoud van structuur +1. Zoek bestand in `translations/{language-code}/` +2. Breng verbeteringen aan terwijl de structuur behouden blijft 3. Zorg dat codevoorbeelden functioneel blijven -4. Test eventuele gelokaliseerde quizinhoud +4. Test gelokaliseerde quizcontent ### Vertaal Metadata -Vertaalde bestanden bevatten metadata header: +Vertaalde bestanden bevatten metadata-header: ```markdown ``` -## Debugging en Probleemoplossing +## Debuggen en Probleemoplossing ### Veelvoorkomende Problemen **Quiz app start niet**: - Controleer Node.js versie (v14+ aanbevolen) -- Verwijder `node_modules` en `package-lock.json`, run `npm install` opnieuw +- Verwijder `node_modules` en `package-lock.json`, voer `npm install` opnieuw uit - Controleer op poortconflicten (standaard: Vite gebruikt poort 5173) **API server start niet**: -- Verifieer dat Node.js versie minimaal is (node >=10) +- Controleer Node.js versie (node >=10) - Controleer of poort al in gebruik is -- Zorg dat alle dependencies geïnstalleerd zijn met `npm install` +- Zorg dat alle dependencies zijn geïnstalleerd met `npm install` **Browser extensie laadt niet**: - Controleer of manifest.json correct is geformatteerd -- Bekijk browserconsole op fouten -- Volg browser-specifieke installatie-instructies voor extensies +- Check browser console op fouten +- Volg browser-specifieke installatie-instructies **Python chat project problemen**: -- Zorg dat OpenAI pakket geïnstalleerd is: `pip install openai` -- Controleer of GITHUB_TOKEN omgevingsvariabele ingesteld is +- Zorg dat OpenAI package geïnstalleerd is: `pip install openai` +- Controleer of GITHUB_TOKEN omgevingvariabele is ingesteld - Controleer GitHub Models toegangsrechten -**Docsify serveert geen documentatie**: +**Docsify serveert geen docs**: - Installeer docsify-cli globaal: `npm install -g docsify-cli` -- Run vanuit root van repository +- Voer uit vanuit root van repository - Controleer dat `docs/_sidebar.md` bestaat -### Tips voor Ontwikkelomgeving +### Ontwikkelomgeving Tips -- Gebruik VS Code met Live Server-extensie voor HTML-projecten -- Installeer ESLint en Prettier extensies voor consistente formattering -- Gebruik browser DevTools voor debugging van JavaScript -- Voor Vue projecten, installeer Vue DevTools browserextensie +- Gebruik VS Code met Live Server extensie voor HTML-projecten +- Installeer ESLint en Prettier extensies voor consistente formatting +- Gebruik browser DevTools voor JavaScript debugging +- Installeer Vue DevTools browser extensie voor Vue projecten ### Prestatie Overwegingen -- Groot aantal vertaalde bestanden (50+ talen) betekent grote volledige clones +- Groot aantal vertaalde bestanden (50+ talen) maakt volledige clones groot - Gebruik shallow clone als je alleen aan inhoud werkt: `git clone --depth 1` -- Sluit vertalingen uit van zoekopdrachten bij werken in Engelse inhoud -- Buildprocessen kunnen traag zijn bij eerste run (npm install, Vite build) +- Sluit vertalingen uit in zoekopdrachten wanneer je aan Engelse inhoud werkt +- Build processen kunnen traag zijn bij eerste run (npm install, Vite build) ## Beveiligingsoverwegingen ### Omgevingsvariabelen -- API-sleutels mogen nooit in de repository gecommit worden -- Gebruik `.env` bestanden (staan al in `.gitignore`) -- Documenteer vereiste omgevingsvariabelen in project READMEs +- API-sleutels mogen nooit gecommit worden in repository +- Gebruik `.env` bestanden (al opgenomen in `.gitignore`) +- Documenteer vereiste omgevingsvariabelen in project README's ### Python Projecten @@ -348,61 +348,61 @@ CO_OP_TRANSLATOR_METADATA: ### GitHub Models Toegang -- Persoonlijke toegangs-token (PAT) vereist voor GitHub Models +- Personal Access Tokens (PAT) zijn vereist voor GitHub Models - Tokens moeten als omgevingsvariabelen worden opgeslagen -- Tokens en inloggegevens nooit comitten +- Tokens of credentials nooit commiten ## Aanvullende Notities ### Doelgroep -- Complete beginners in webontwikkeling -- Studenten en zelflerenden +- Volledige beginners in webontwikkeling +- Studenten en zelfstudie - Docenten die curriculum in klaslokalen gebruiken -- Inhoud is ontworpen voor toegankelijkheid en geleidelijke vaardighedenopbouw +- Inhoud is ontworpen voor toegankelijkheid en geleidelijke vaardigheidsopbouw ### Educatieve Filosofie -- Projectgebaseerde leerbenadering -- Regelmatige kennischecks (quizzen) -- Hands-on programmeeroefeningen -- Voorbeelden met echte toepassingen -- Focus op basisprincipes vóór frameworks +- Project-gebaseerde leerbenadering +- Frequent kenniscontroles (quizzen) +- Praktische codeer oefeningen +- Voorbeelden uit de echte wereld +- Focus op basisprincipes voor frameworks ### Repository Onderhoud -- Actieve gemeenschap van leerlingen en bijdragers +- Actieve community van leerlingen en bijdragers - Regelmatige updates van dependencies en inhoud -- Issues en discussies worden gemonitord door maintainers -- Vertaalupdates geautomatiseerd via GitHub Actions +- Issues en discussies worden door maintainers gemonitord +- Vertalingsupdates geautomatiseerd via GitHub Actions ### Gerelateerde Bronnen - [Microsoft Learn modules](https://docs.microsoft.com/learn/) - [Student Hub bronnen](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) aanbevolen voor leerlingen -- Extra cursussen: Generatieve AI, Data Science, ML, IoT curricula beschikbaar +- Extra cursussen: generatieve AI, data science, ML, IoT curricula beschikbaar ### Werken met Specifieke Projecten -Voor gedetailleerde instructies per individueel project, zie de README-bestanden in: +Voor gedetailleerde instructies over individuele projecten, zie de README-bestanden in: - `quiz-app/README.md` - Vue 3 quizapplicatie -- `7-bank-project/README.md` - Banking applicatie met authenticatie +- `7-bank-project/README.md` - Bankapplicatie met authenticatie - `5-browser-extension/README.md` - Browser extensie ontwikkeling - `6-space-game/README.md` - Canvas-gebaseerde game ontwikkeling -- `9-chat-project/README.md` - AI chat assistent project +- `9-chat-project/README.md` - AI chatassistent project ### Monorepo Structuur Hoewel dit geen traditionele monorepo is, bevat deze repository meerdere onafhankelijke projecten: -- Elke les is op zichzelf staand +- Elke les staat op zichzelf - Projecten delen geen dependencies -- Werk aan individuele projecten zonder anderen te beïnvloeden -- Clone de hele repo voor de volledige curriculumervaring +- Werk aan afzonderlijke projecten zonder impact op anderen +- Clone de gehele repo voor de volledige curriculumervaring --- **Disclaimer**: -Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel wij streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal wordt beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. +Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, verzoeken wij u er rekening mee te houden dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal dient als de gezaghebbende bron te worden beschouwd. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. \ No newline at end of file diff --git a/translations/nl/README.md b/translations/nl/README.md index 6a1cd466d..14343d343 100644 --- a/translations/nl/README.md +++ b/translations/nl/README.md @@ -12,71 +12,82 @@ # Webontwikkeling voor Beginners - Een Curriculum -Leer de basisprincipes van webontwikkeling met onze 12 weken durende uitgebreide cursus door Microsoft Cloud Advocates. Elke van de 24 lessen duikt in JavaScript, CSS en HTML via praktische projecten zoals terrariums, browserextensies en ruimtespellen. Doe mee met quizzen, discussies en praktische opdrachten. Versterk je vaardigheden en optimaliseer je kennisretentie met onze effectieve projectgerichte didactiek. Begin vandaag nog met coderen! +Leer de basisprincipes van webontwikkeling met onze 12-weken durende uitgebreide cursus van Microsoft Cloud Advocates. Elk van de 24 lessen verdiept zich in JavaScript, CSS en HTML via hands-on projecten zoals terrariums, browserextensies en ruimtegames. Doe mee met quizzen, discussies en praktische opdrachten. Verbeter je vaardigheden en optimaliseer je kennisretentie met onze effectieve projectgebaseerde didactiek. Begin vandaag nog met coderen! Word lid van de Azure AI Foundry Discord Community [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Volg deze stappen om aan de slag te gaan met deze resources: -1. **Fork de Repository**: Klik op [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en medeontwikkelaars**](https://discord.com/invite/ByRwuEEgH4) +Volg deze stappen om aan de slag te gaan met deze bronnen: +1. **Fork de repository**: Klik op [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Clone de repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Word lid van de Azure AI Foundry Discord en ontmoet experts en mede-ontwikkelaars**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Meertalige Ondersteuning -#### Ondersteund via GitHub Action (Geautomatiseerd & Altijd Up-to-date) +#### Ondersteund via GitHub Actie (Geautomatiseerd & Altijd Actueel) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](./README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) > **Liever lokaal clonen?** - -> Deze repository bevat meer dan 50 taalvertalingen, wat de downloadgrootte aanzienlijk vergroot. Om zonder vertalingen te clonen, gebruik dan sparse checkout: +> +> Deze repository bevat meer dan 50 taalvertalingen, wat de downloadgrootte aanzienlijk vergroot. Om zonder vertalingen te clonen, gebruik sparse checkout: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> > Dit geeft je alles wat je nodig hebt om de cursus te voltooien met een veel snellere download. -**Als je wenst dat extra vertalingen ondersteund worden, zijn die hier te vinden [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Als je wilt dat er extra vertaaltalen worden ondersteund, zijn die te vinden [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Ben je een student?_ -Bezoek de [**Student Hub pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersbronnen, studentpakketten en zelfs manieren vindt om een gratis certificaatvoucher te bemachtigen. Dit is de pagina die je wilt bookmarken en af en toe bezoeken, aangezien we maandelijks content wisselen. +Bezoek de [**Student Hub-pagina**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) waar je beginnersmateriaal, studentenpakketten en zelfs manieren om een gratis certificaatvoucher te verkrijgen zult vinden. Dit is de pagina die je wilt bookmarken en van tijd tot tijd bekijken omdat we maandelijks de inhoud wisselen. -### 📣 Aankondiging - Nieuwe GitHub Copilot Agent-modus uitdagingen om te voltooien! +### 📣 Aankondiging - Nieuwe GitHub Copilot Agent modus uitdagingen om te voltooien! -Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dit is een nieuwe uitdaging om te voltooien met behulp van GitHub Copilot en Agent-modus. Als je Agent-modus nog niet hebt gebruikt: het kan niet alleen tekst genereren, maar ook bestanden creëren en bewerken, opdrachten uitvoeren en meer. +Nieuwe uitdaging toegevoegd, zoek naar "GitHub Copilot Agent Challenge 🚀" in de meeste hoofdstukken. Dit is een nieuwe uitdaging voor jou om te voltooien met behulp van GitHub Copilot en Agent modus. Als je Agent modus nog niet hebt gebruikt, kan deze niet alleen tekst genereren, maar ook bestanden maken en bewerken, commando's uitvoeren en meer. -### 📣 Aankondiging - _Nieuw Project te bouwen met Generatieve AI_ +### 📣 Aankondiging - _Nieuw project om te bouwen met Generatieve AI_ -Nieuw AI-assistentproject toegevoegd, bekijk het [project](./9-chat-project/README.md) +Nieuw AI-assistent project zojuist toegevoegd, bekijk het [project](./9-chat-project/README.md) -### 📣 Aankondiging - _Nieuw Curriculum_ over Generatieve AI voor JavaScript is zojuist uitgebracht +### 📣 Aankondiging - _Nieuw curriculum_ over Generatieve AI voor JavaScript is zojuist uitgebracht -Mis ons nieuwe Generatieve AI-curriculum niet! +Mis ons nieuwe Generatieve AI curriculum niet! Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen! ![Background](../../translated_images/nl/background.148a8d43afde5730.webp) - Lessen die alles behandelen van basisprincipes tot RAG. -- Interactie met historische personages via GenAI en onze compagnon-app. -- Leuk en boeiend verhaal, je reist door de tijd! +- Interageer met historische figuren met GenAI en onze begeleidende app. +- Leuk en boeiend verhaal, je gaat tijdreizen! ![character](../../translated_images/nl/character.5c0dd8e067ffd693.webp) -Elke les omvat een opdracht om te voltooien, een kennischeck en een uitdaging om je te begeleiden bij het leren van onderwerpen zoals: -- Prompting en promptengineering -- Tekst- en afbeeldingsapp-generatie + +Elke les bevat een opdracht om te voltooien, een kenniscontrole en een uitdaging om je te begeleiden bij het leren over onderwerpen zoals: +- Prompting en prompt engineering +- Generatie van tekst- en afbeeldingsapps - Zoekapps -Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te beginnen! +Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te starten! @@ -84,128 +95,128 @@ Bezoek [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) om te be > **Docenten**, we hebben [enkele suggesties opgenomen](for-teachers.md) over hoe je dit curriculum kunt gebruiken. We horen graag je feedback [in ons discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, voor elke les begin je met een pre-lecture quiz en ga je door met het lezen van het lesmateriaal, het voltooien van de verschillende activiteiten en controleer je je begrip met de post-lecture quiz. +**[Leerlingen](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, begin bij elke les met een pre-lecture quiz en volg deze op door het leesmateriaal van de les door te nemen, de verschillende activiteiten te voltooien en je begrip te controleren met de post-lecture quiz. -Om je leerervaring te verbeteren, verbind je met je medestudenten om samen aan de projecten te werken! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderator beschikbaar zal zijn om je vragen te beantwoorden. +Om je leerervaring te verbeteren, verbind je met je medeleerlingen om samen aan de projecten te werken! Discussies worden aangemoedigd in ons [discussieforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) waar ons team van moderatoren beschikbaar is om je vragen te beantwoorden. -Om je educatie verder te bevorderen, raden we ten zeerste aan Microsoft Learn te verkennen voor aanvullende studiematerialen: [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon). +Om je opleiding verder te brengen, raden we sterk aan de [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) te verkennen voor aanvullende studiematerialen. ### 📋 Je omgeving instellen -Dit curriculum heeft een ontwikkelomgeving die klaar is om te gebruiken! Terwijl je begint, kun je ervoor kiezen de cursus uit te voeren in een [Codespace](https://github.com/features/codespaces/) (_een browsergebaseerde, geen installatie benodigde omgeving_), of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Dit curriculum heeft een ontwikkelomgeving die klaar is om te gebruiken! Als je begint, kun je ervoor kiezen om het curriculum te draaien in een [Codespace](https://github.com/features/codespaces/) (_een browser gebaseerde omgeving zonder installatie nodig_), of lokaal op je computer met een teksteditor zoals [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Maak je repository aan -Om je werk makkelijk op te slaan, is het aanbevolen een eigen kopie van deze repository te maken. Dit kan je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository aan in je GitHub-account met een kopie van het curriculum. +Om je werk gemakkelijk op te slaan, wordt aangeraden om je eigen kopie van deze repository te maken. Dit kun je doen door op de knop **Use this template** bovenaan de pagina te klikken. Dit maakt een nieuwe repository in je GitHub-account met een kopie van het curriculum. Volg deze stappen: -1. **Fork de Repository**: Klik op de "Fork"-knop rechtsboven op deze pagina. +1. **Fork de Repository**: Klik op de "Fork" knop rechtsboven op deze pagina. 2. **Clone de Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### De cursus draaien in een Codespace +#### Het curriculum draaien in een Codespace -In je kopie van deze repository die je hebt aangemaakt, klik je de knop **Code** en selecteer je **Open with Codespaces**. Dit maakt een nieuwe Codespace aan waarin je kunt werken. +In je eigen kopie van deze repository die je hebt gemaakt, klik op de **Code** knop en selecteer **Open with Codespaces**. Dit maakt een nieuwe Codespace voor je aan om in te werken. ![Codespace](../../translated_images/nl/createcodespace.0238bbf4d7a8d955.webp) -#### De cursus lokaal draaien op je computer - -Om deze cursus lokaal op je computer te draaien, heb je een teksteditor, een browser en een opdrachtregeltool nodig. Onze eerste les, [Introductie tot programmeertalen en tools van het vak](../../1-getting-started-lessons/1-intro-to-programming-languages), zal je door verschillende opties voor elk van deze tools leiden zodat je kunt kiezen wat het beste bij jou past. +#### Het curriculum lokaal op je computer draaien -We raden aan om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als editor te gebruiken, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier downloaden](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Om dit curriculum lokaal op je computer te draaien, heb je een teksteditor, een browser en een command line tool nodig. Onze eerste les, [Introductie tot Programmeertalen en Gereedschappen van het Vak](../../1-getting-started-lessons/1-intro-to-programming-languages), zal je door verschillende opties voor elk van deze tools leiden zodat je kunt kiezen wat het beste voor jou werkt. -1. Clone je repository naar je computer. Dit kan door op de knop **Code** te klikken en de URL te kopiëren: +Onze aanbeveling is om [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als editor te gebruiken, die ook een ingebouwde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) heeft. Je kunt Visual Studio Code [hier](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) downloaden. +1. Clone je repository naar je computer. Dit kun je doen door op de **Code** knop te klikken en de URL te kopiëren: [CodeSpace](./images/createcodespace.png) - Open dan [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij u `` vervangt door de URL die u zojuist hebt gekopieerd: + + Open vervolgens [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) binnen [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) en voer het volgende commando uit, waarbij je `` vervangt door de URL die je zojuist hebt gekopieerd: ```bash git clone ``` -2. Open de map in Visual Studio Code. Dit kan door te klikken op **File** > **Open Folder** en de map te selecteren die u zojuist hebt gekloond. +2. Open de map in Visual Studio Code. Dit doe je door te klikken op **File** > **Open Folder** en de map te selecteren die je zojuist hebt gekloond. > Aanbevolen Visual Studio Code-extensies: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's te bekijken binnen Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - om u te helpen sneller code te schrijven +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - om HTML-pagina's binnen Visual Studio Code te bekijken +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - om je te helpen sneller code te schrijven ## 📂 Elke les bevat: - optionele sketchnote - optionele aanvullende video -- warming-up quiz voor de les +- warming-up quiz vóór de les - geschreven les -- voor projectgebaseerde lessen, stapsgewijze handleidingen over hoe het project te bouwen -- kennistests +- voor projectgerichte lessen, stapsgewijze handleidingen om het project te bouwen +- kenniscontroles - een uitdaging - aanvullende lectuur - opdracht - [quiz na de les](https://ff-quizzes.netlify.app/web/) -> **Een opmerking over quizzen**: Alle quizzen bevinden zich in de Quiz-app map, in totaal 48 quizzen van elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/); de quiz-app kan lokaal worden uitgevoerd of worden gedeployed naar Azure; volg de instructies in de `quiz-app` map. +> **Een opmerking over quizzen**: Alle quizzen bevinden zich in de Quiz-app map, in totaal 48 quizzen met elk drie vragen. Ze zijn beschikbaar [hier](https://ff-quizzes.netlify.app/web/). De quiz-app kan lokaal worden uitgevoerd of naar Azure worden gedeployed; volg de instructies in de `quiz-app` map. ## 🗃️ Lessen -| | Projectnaam | Aangeleerde Concepten | Leerdoelen | Gelinkte Les | Auteur | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Aan de slag | Introductie in programmeren en tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt | [Introductie in programmeertalen en tools van het vak](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Aan de slag | Basiskennis van GitHub, inclusief samenwerken in een team | Hoe GitHub te gebruiken in jouw project, hoe samen te werken met anderen aan een codebase | [Introductie in GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Aan de slag | Toegankelijkheid | Leer de basis van webtoegankelijkheid | [Fundamentals Toegankelijkheid](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Grundlagen | JavaScript Datatypes | De basis van JavaScript datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Grundlagen | Functies en Methoden | Leer over functies en methoden om de logica van een applicatie te beheren | [Functies en Methodes](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher | -| 06 | JS Grundlagen | Beslissingen maken met JS | Leer hoe je voorwaarden maakt in je code met besluitvormingsmethoden | [Beslissingen maken](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Grundlagen | Arrays en Lussen | Werk met data via arrays en lussen in JavaScript | [Arrays en lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML om een online terrarium te maken, met focus op het bouwen van een layout | [Introductie in HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium te stylen, met basiskennis van CSS, inclusief het responsief maken van de pagina | [Introductie in CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulatie | Bouw de JavaScript om het terrarium als een sleep-en-zet-interface te laten functioneren, met focus op closures en DOM-manipulatie | [JavaScript Closures, DOM-manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typwedstrijd](./4-typing-game/solution/README.md) | Bouw een Typwedstrijd | Leer hoe je toetsenbordgebeurtenissen gebruikt om de logica van je JavaScript-app aan te sturen | [Gebeurtenisgestuurd programmeren](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Werken met browsers | Leer hoe browsers werken, hun geschiedenis, en hoe je de eerste elementen van een browserextensie bouwt | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Formulier bouwen, API aanroepen en variabelen opslaan in local storage | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen opgeslagen in local storage | [APIs, formulieren en local storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Groene Browserextensie](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en optimalisaties | [Achtergrondtaken en prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Ruimte Spel](./6-space-game/solution/README.md) | Geavanceerde spelontwikkeling met JavaScript | Leer over overerving met zowel klassen als compositie en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een spel | [Introductie in geavanceerde spelontwikkeling](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Ruimte Spel](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Ruimte Spel](./6-space-game/solution/README.md) | Elementen rond het scherm bewegen | Ontdek hoe elementen beweging krijgen met behulp van kartesische coördinaten en de Canvas API | [Elementen bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Ruimte Spel](./6-space-game/solution/README.md) | Detectie van botsingen | Laat elementen botsen en op elkaar reageren via toetsaanslagen en zorg voor een cooldown-functie om prestaties te waarborgen | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Ruimte Spel](./6-space-game/solution/README.md) | Score bijhouden | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Score bijhouden](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Ruimte Spel](./6-space-game/solution/README.md) | Het spel beëindigen en herstarten | Leer over het beëindigen en herstarten van het spel, inclusief opruimen van middelen en resetten van variabelen | [De eindvoorwaarde](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML-sjablonen en routes in een webapp | Leer hoe je de opbouw van een meerpaginawebsite architectuur maakt met routing en HTML-sjablonen | [HTML-sjablonen en routes](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Bankapp](./7-bank-project/solution/README.md) | Bouw een inlog- en registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Bankapp](./7-bank-project/solution/README.md) | Methoden voor ophalen en gebruiken van data | Hoe data in en uit je app stroomt, hoe je het ophaalt, opslaat en verwijdert | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Bankapp](./7-bank-project/solution/README.md) | Concepten van State Management | Leer hoe je app state behoudt en hoe je die programmatisch beheert | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Werken met VScode | Leer hoe je een code-editor gebruikt | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Werken met AI | Leer hoe je je eigen AI-assistent bouwt | [AI Assistant project](./9-chat-project/README.md) | Chris | +| | Projectnaam | Behandelde Concepten | Leerdoelen | Gekoppelde Les | Auteur | +| :-: | :------------------------------------------------------: | :-------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Aan de slag | Introductie tot programmeren en tools van het vak | Leer de basisprincipes achter de meeste programmeertalen en over software die professionele ontwikkelaars helpt hun werk te doen | [Intro tot Programmeertalen en Tools van het Vak](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Aan de slag | Basisprincipes van GitHub, inclusief samenwerken in een team | Hoe je GitHub gebruikt in je project, hoe je samenwerkt met anderen aan een codebase | [Intro tot GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Aan de slag | Toegankelijkheid | Leer de basis van webtoegankelijkheid | [Toegankelijkheidsfundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Basisprincipes | JavaScript Datatypes | De basis van JavaScript-datatypes | [Datatypes](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Basisprincipes | Functies en Methoden | Leer over functies en methoden om de logica van een applicatie te beheren | [Functies en Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine en Christopher | +| 06 | JS Basisprincipes | Beslissingen nemen met JS | Leer hoe je voorwaarden maakt in je code met behulp van besluitvormingsmethoden | [Beslissingen nemen](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Basisprincipes | Arrays en Lussen | Werk met data met behulp van arrays en lussen in JavaScript | [Arrays en Lussen](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in de praktijk | Bouw de HTML om een online terrarium te creëren, met focus op het maken van een lay-out | [Introductie tot HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in de praktijk | Bouw de CSS om het online terrarium te stylen, met focus op de basis van CSS inclusief het responsief maken van de pagina | [Introductie tot CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-manipulatie | Bouw de JavaScript om het terrarium te laten functioneren als drag/drop-interface, met focus op closures en DOM-manipulatie | [JavaScript Closures, DOM-manipulatie](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typen Spel](./4-typing-game/solution/README.md) | Bouw een Typingspel | Leer hoe je toetsenbord-events gebruikt om de logica van je JavaScript-app aan te sturen | [Event-Driven Programmeren](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Groene Browser Extensie](./5-browser-extension/solution/README.md) | Werken met Browsers | Leer hoe browsers werken, hun geschiedenis en hoe je de eerste elementen van een browserextensie maakt | [Over Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Groene Browser Extensie](./5-browser-extension/solution/README.md) | Bouw een formulier, bellen van een API en opslaan van variabelen in lokale opslag | Bouw de JavaScript-elementen van je browserextensie om een API aan te roepen met variabelen die in lokale opslag zijn opgeslagen | [APIs, Formulieren en Lokale Opslag](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Groene Browser Extensie](./5-browser-extension/solution/README.md) | Achtergrondprocessen in de browser, webprestaties | Gebruik de achtergrondprocessen van de browser om het pictogram van de extensie te beheren; leer over webprestaties en optimalisaties | [Achtergrondtaken en Prestaties](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Ruimte Spel](./6-space-game/solution/README.md) | Geavanceerdere spelontwikkeling met JavaScript | Leer over overerving met behulp van klassen en compositie en het Pub/Sub-patroon, ter voorbereiding op het bouwen van een spel | [Introductie tot Geavanceerde Spelontwikkeling](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Ruimte Spel](./6-space-game/solution/README.md) | Tekenen op canvas | Leer over de Canvas API, gebruikt om elementen op een scherm te tekenen | [Tekenen op Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Ruimte Spel](./6-space-game/solution/README.md) | Elementen verplaatsen over het scherm | Ontdek hoe elementen beweging krijgen met behulp van cartesiaanse coördinaten en de Canvas API | [Elementen Verplaatsen](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Ruimte Spel](./6-space-game/solution/README.md) | Botsingsdetectie | Laat elementen botsen en op elkaar reageren met toetsdrukken en voorzie in een afkoelfunctie om de prestaties van het spel te waarborgen | [Botsingsdetectie](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Ruimte Spel](./6-space-game/solution/README.md) | Puntentelling | Voer wiskundige berekeningen uit op basis van de status en prestaties van het spel | [Puntentelling](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Ruimte Spel](./6-space-game/solution/README.md) | Het spel beëindigen en opnieuw starten | Leer over het beëindigen en opnieuw starten van het spel, inclusief het opruimen van assets en het resetten van variabelen | [De Eindvoorwaarde](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Bankieren App](./7-bank-project/solution/README.md) | HTML Templates en Routes in een Web App | Leer hoe je de opbouw van een multi-page website maakt met routing en HTML-templates | [HTML Templates en Routes](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Bankieren App](./7-bank-project/solution/README.md) | Bouw een Login- en Registratieformulier | Leer over het bouwen van formulieren en het afhandelen van validatieroutines | [Formulieren](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Bankieren App](./7-bank-project/solution/README.md) | Methoden om data op te halen en te gebruiken | Hoe data in en uit je app stroomt, hoe je het ophaalt, opslaat en opruimt | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Bankieren App](./7-bank-project/solution/README.md) | Concepten van State Management | Leer hoe je app status behoudt en hoe je dat programmeerbaar beheert | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Werken met VScode | Leer hoe je een code-editor gebruikt| [Gebruik VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistenten](./9-chat-project/README.md) | Werken met AI | Leer hoe je je eigen AI-assistent bouwt | [AI Assistent project](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogiek -Onze lesmethode is ontworpen met twee belangrijke pedagogische principes in gedachten: +Onze curriculum is ontworpen met twee belangrijke pedagogische principes in gedachten: * projectgebaseerd leren * frequente quizzen -Het programma onderwijst de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die tegenwoordig door webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door het bouwen van een typwedstrijd, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-stijl spel en een bankapp voor bedrijven. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgebouwd. +Het programma leert de basisprincipes van JavaScript, HTML en CSS, evenals de nieuwste tools en technieken die tegenwoordig door webontwikkelaars worden gebruikt. Studenten krijgen de kans om praktische ervaring op te doen door het bouwen van een typingspel, virtueel terrarium, milieuvriendelijke browserextensie, space-invader-stijl spel en een bankapp voor bedrijven. Aan het einde van de serie hebben studenten een solide begrip van webontwikkeling opgedaan. -> 🎓 Je kunt de eerste paar lessen van deze cursus volgen als een [Leerpad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn! +> 🎓 Je kunt de eerste lessen van dit curriculum volgen als een [Leerroute](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) op Microsoft Learn! -Doordat de inhoud aansluit bij projecten, wordt het proces voor studenten boeiender en wordt het onthouden van concepten vergroot. We hebben ook verschillende startlessen in JavaScript basics geschreven om de concepten te introduceren, gekoppeld aan een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie van videotutorials, waarvan sommige auteurs hebben bijgedragen aan deze cursus. +Door te zorgen dat de inhoud aansluit bij projecten wordt het leerproces boeiender voor studenten en wordt het vasthouden van concepten vergroot. We schreven ook enkele starterlessen in JavaScript-basisprincipes om concepten te introduceren, gecombineerd met een video uit de "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collectie van videotutorials, waarvan enkele auteurs aan dit curriculum hebben bijgedragen. -Daarnaast zet een quiz met weinig inzet voor een les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les zorgt voor verdere retentie. Deze cursus is ontworpen om flexibel en leuk te zijn en kan geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer aan het einde van de 12-weekse cyclus. +Daarnaast zet een quiz met lage druk vóór de les de intentie van de student om een onderwerp te leren, terwijl een tweede quiz na de les verdere retentie waarborgt. Dit curriculum is ontworpen om flexibel en leuk te zijn en kan geheel of gedeeltelijk worden gevolgd. De projecten beginnen klein en worden steeds complexer aan het einde van de 12-weekse cyclus. -Hoewel we er bewust voor hebben gekozen om geen JavaScript-frameworks te introduceren, om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar voordat je een framework adopteert, zou een goede vervolgstap na deze cursus het leren van Node.js zijn via een andere collectie video’s: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Hoewel we bewust hebben vermeden om JavaScript-frameworks te introduceren om ons te concentreren op de basisvaardigheden die nodig zijn als webontwikkelaar vóór het adopteren van een framework, zou een goede volgende stap na het voltooien van dit curriculum het leren over Node.js zijn via een andere collectie video's: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We verwelkomen je constructieve feedback! +> Bezoek onze [Gedragscode](CODE_OF_CONDUCT.md) en [Bijdragen](CONTRIBUTING.md) richtlijnen. We stellen je constructieve feedback op prijs! ## 🧭 Offline toegang -Je kunt deze documentatie offline gebruiken met [Docsify](https://docsify.js.org/#/). Fork deze repository, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de hoofdmap van deze repository `docsify serve`. De website wordt geserveerd op poort 3000 op je localhost: `localhost:3000`. +Je kunt deze documentatie offline gebruiken door gebruik te maken van [Docsify](https://docsify.js.org/#/). Fork deze repo, [installeer Docsify](https://docsify.js.org/#/quickstart) op je lokale machine, en typ vervolgens in de root-map van deze repo `docsify serve`. De website zal worden geserveerd op poort 3000 op je localhost: `localhost:3000`. ## 📘 PDF - -Een PDF van alle lessen is te vinden [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +Een PDF van alle lessen is hier te vinden [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Andere Cursussen -Ons team maakt ook andere cursussen! Bekijk: + +Ons team produceert ook andere cursussen! Neem een kijkje bij: ### LangChain @@ -247,13 +258,13 @@ Ons team maakt ook andere cursussen! Bekijk: [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## Hulp krijgen +## Hulp Krijgen -Als je vastloopt of vragen hebt over het bouwen van AI-apps. Doe mee aan discussies met mede-leerlingen en ervaren ontwikkelaars over MCP. Het is een ondersteunende gemeenschap waar vragen welkom zijn en kennis vrij wordt gedeeld. +Als je vastloopt of vragen hebt over het bouwen van AI-apps, doe mee met andere leerlingen en ervaren ontwikkelaars in discussies over MCP. Het is een ondersteunende gemeenschap waar vragen welkom zijn en kennis vrij wordt gedeeld. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Als je productfeedback hebt of fouten tegenkomt tijdens het bouwen, bezoek dan: +Als je productfeedback hebt of fouten tegenkomt tijdens het bouwen, bezoek: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) @@ -264,6 +275,6 @@ Deze repository is gelicentieerd onder de MIT-licentie. Zie het [LICENSE](../../ --- -**Disclaimer**: -Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel wij streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. +**Disclaimer**: +Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u er rekening mee te houden dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal dient als gezaghebbende bron te worden beschouwd. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. \ No newline at end of file diff --git a/translations/vi/.co-op-translator.json b/translations/vi/.co-op-translator.json index 320b303f8..0a5fe885e 100644 --- a/translations/vi/.co-op-translator.json +++ b/translations/vi/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-06T11:14:44+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T13:49:59+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "vi" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:50:12+00:00", + "translation_date": "2026-03-06T13:53:01+00:00", "source_file": "AGENTS.md", "language_code": "vi" }, @@ -516,8 +516,8 @@ "language_code": "vi" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:45:37+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T13:45:48+00:00", "source_file": "README.md", "language_code": "vi" }, diff --git a/translations/vi/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/vi/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 93b42fb70..f68896ee9 100644 --- a/translations/vi/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/vi/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,181 @@ # Giới thiệu về Ngôn ngữ Lập trình và Công cụ Phát triển Hiện đại -Chào bạn, nhà phát triển tương lai! 👋 Tôi có thể nói với bạn điều gì đó khiến tôi vẫn còn nổi da gà mỗi ngày không? Bạn sắp khám phá ra rằng lập trình không chỉ là về máy tính – mà còn là siêu năng lực thực sự để biến những ý tưởng táo bạo nhất của bạn thành hiện thực! +Chào bạn, nhà phát triển tương lai! 👋 Mình có thể kể cho bạn điều gì đó làm mình ớn lạnh mỗi ngày không? Bạn sắp khám phá ra rằng lập trình không chỉ là về máy tính – mà là có những siêu năng lực thực sự để biến những ý tưởng điên rồ nhất của bạn thành hiện thực! -Bạn có biết cảm giác khi sử dụng ứng dụng yêu thích của mình và mọi thứ hoạt động hoàn hảo? Khi bạn nhấn một nút và điều gì đó kỳ diệu xảy ra khiến bạn phải thốt lên "wow, họ đã LÀM điều đó như thế nào?" Thì đây, ai đó giống như bạn – có lẽ đang ngồi trong quán cà phê yêu thích lúc 2 giờ sáng với ly espresso thứ ba – đã viết mã tạo nên điều kỳ diệu đó. Và điều này sẽ khiến bạn ngạc nhiên: đến cuối bài học này, bạn không chỉ hiểu cách họ làm điều đó, mà bạn còn sẽ háo hức thử làm điều đó! +Bạn có biết cảm giác khi đang dùng ứng dụng yêu thích và mọi thứ cứ khớp hoàn hảo không? Khi bạn nhấn nút và điều gì đó thật kỳ diệu xảy ra khiến bạn phải thốt lên "wow, làm sao họ làm được vậy?" Vâng, chính người như bạn – có thể đang ngồi trong quán cà phê yêu thích lúc 2 giờ sáng với tách espresso thứ ba – đã viết đoạn mã tạo ra sự kỳ diệu đó. Và đây là điều sẽ làm bạn kinh ngạc: đến cuối bài học này, bạn không chỉ hiểu họ đã làm như thế nào, mà bạn còn háo hức muốn thử tự làm nữa! -Nghe này, tôi hoàn toàn hiểu nếu lập trình có vẻ đáng sợ ngay bây giờ. Khi tôi mới bắt đầu, tôi thực sự nghĩ rằng bạn cần phải là một thiên tài toán học hoặc đã lập trình từ khi còn nhỏ. Nhưng đây là điều đã thay đổi hoàn toàn quan điểm của tôi: lập trình giống như học cách giao tiếp bằng một ngôn ngữ mới. Bạn bắt đầu với "xin chào" và "cảm ơn," sau đó tiến tới gọi cà phê, và trước khi bạn nhận ra, bạn đang có những cuộc thảo luận triết học sâu sắc! Ngoại trừ trong trường hợp này, bạn đang trò chuyện với máy tính, và thành thật mà nói? Chúng là những đối tác trò chuyện kiên nhẫn nhất mà bạn từng có – chúng không bao giờ phán xét lỗi của bạn và luôn sẵn sàng thử lại! +Nghe này, mình hoàn toàn hiểu nếu lập trình bây giờ có vẻ đáng sợ với bạn. Khi mình mới bắt đầu, mình thật sự nghĩ rằng bạn cần phải là thiên tài toán học hoặc đã lập trình từ khi 5 tuổi. Nhưng đây là điều đã hoàn toàn thay đổi quan điểm của mình: lập trình chính xác như học cách trò chuyện trong một ngôn ngữ mới. Bạn bắt đầu với "xin chào" và "cảm ơn," rồi đến lúc đặt cà phê, và không lâu sau, bạn đang có những cuộc thảo luận triết lý sâu sắc! Ngoại trừ trường hợp này, bạn đang nói chuyện với máy tính, và thật lòng mà nói? Họ là những đối tác trò chuyện kiên nhẫn nhất bạn từng gặp – họ không bao giờ phán xét lỗi của bạn và luôn hào hứng thử lại! -Hôm nay, chúng ta sẽ khám phá những công cụ tuyệt vời làm cho phát triển web hiện đại không chỉ khả thi mà còn thực sự gây nghiện. Tôi đang nói về chính những trình soạn thảo, trình duyệt và quy trình làm việc mà các nhà phát triển tại Netflix, Spotify, và studio ứng dụng indie yêu thích của bạn sử dụng mỗi ngày. Và đây là phần sẽ khiến bạn nhảy múa vui vẻ: hầu hết các công cụ chuyên nghiệp, tiêu chuẩn ngành này đều hoàn toàn miễn phí! +Hôm nay, chúng ta sẽ khám phá những công cụ tuyệt vời giúp phát triển web hiện đại không chỉ có thể mà còn rất gây nghiện. Mình đang nói về chính những trình soạn thảo, trình duyệt, và quy trình làm việc mà các nhà phát triển ở Netflix, Spotify, và studio ứng dụng indie yêu thích của bạn dùng mỗi ngày. Và đây là phần làm bạn nhảy cẫng lên vui mừng: hầu hết các công cụ chuyên nghiệp, chuẩn công nghiệp này hoàn toàn miễn phí! -![Giới thiệu Lập trình](../../../../translated_images/vi/webdev101-programming.d6e3f98e61ac4bff.webp) +![Intro Programming](../../../../translated_images/vi/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover + title Hành Trình Lập Trình Của Bạn Hôm Nay + section Khám Phá What is Programming: 5: You Programming Languages: 4: You Tools Overview: 5: You - section Explore + section Khám Phá Code Editors: 4: You Browsers & DevTools: 5: You Command Line: 3: You - section Practice + section Thực Hành Language Detective: 4: You Tool Exploration: 5: You Community Connection: 5: You ``` +## Hãy Xem Bạn Đã Biết Gì Rồi! -## Hãy Xem Bạn Đã Biết Những Gì! +Trước khi chúng ta bước vào phần thú vị, mình tò mò – bạn đã biết gì về thế giới lập trình này rồi? Và nghe này, nếu bạn đang nhìn vào những câu hỏi này và nghĩ "Tôi thật sự chẳng biết gì cả," thì điều đó không chỉ ổn, mà còn là hoàn hảo! Điều đó có nghĩa bạn đang ở đúng nơi rồi đấy. Hãy xem bài kiểm tra nhỏ này như việc khởi động trước khi tập thể dục – chúng ta chỉ đang làm nóng các cơ não thôi! -Trước khi chúng ta bắt đầu phần thú vị, tôi tò mò – bạn đã biết gì về thế giới lập trình này? Và nghe này, nếu bạn nhìn vào những câu hỏi này và nghĩ "Tôi thực sự không biết gì về bất kỳ điều này," thì không chỉ là ổn, mà còn hoàn hảo! Điều đó có nghĩa là bạn đang ở đúng nơi. Hãy nghĩ về bài kiểm tra này như việc khởi động trước khi tập luyện – chúng ta chỉ đang làm nóng các cơ não thôi! +[Tham gia bài kiểm tra trước bài học](https://ff-quizzes.netlify.app/web/) -[Tham gia bài kiểm tra trước bài học](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## Cuộc Phiêu Lưu Chúng Ta Sắp Đi Cùng Nhau +## Cuộc Phiêu Lưu Mà Chúng Ta Sẽ Cùng Đi Qua -Được rồi, tôi thực sự rất phấn khích về những gì chúng ta sẽ khám phá hôm nay! Thật sự, tôi ước mình có thể thấy khuôn mặt của bạn khi một số khái niệm này trở nên rõ ràng. Đây là hành trình tuyệt vời mà chúng ta sẽ cùng nhau thực hiện: +Được rồi, mình thật sự đầy háo hức về những gì chúng ta sẽ khám phá hôm nay! Thật sự, mình ước có thể nhìn thấy khuôn mặt bạn khi một số khái niệm bật sáng trong đầu bạn. Dưới đây là chuyến hành trình tuyệt vời mà chúng ta sẽ đi cùng nhau: -- **Lập trình thực sự là gì (và tại sao nó là điều tuyệt vời nhất!)** – Chúng ta sẽ khám phá cách mã hóa thực sự là phép thuật vô hình vận hành mọi thứ xung quanh bạn, từ chiếc đồng hồ báo thức biết rằng hôm nay là thứ Hai đến thuật toán chọn lọc hoàn hảo các gợi ý Netflix của bạn -- **Ngôn ngữ lập trình và tính cách tuyệt vời của chúng** – Hãy tưởng tượng bạn bước vào một bữa tiệc nơi mỗi người có siêu năng lực hoàn toàn khác nhau và cách giải quyết vấn đề riêng biệt. Đó là thế giới của ngôn ngữ lập trình, và bạn sẽ thích gặp gỡ chúng! -- **Những khối xây dựng cơ bản tạo nên phép thuật số** – Hãy nghĩ về chúng như bộ LEGO sáng tạo tối thượng. Một khi bạn hiểu cách các mảnh ghép này kết hợp với nhau, bạn sẽ nhận ra rằng bạn có thể xây dựng bất cứ thứ gì mà trí tưởng tượng của bạn mơ ước -- **Công cụ chuyên nghiệp sẽ khiến bạn cảm thấy như vừa được trao cây đũa phép của phù thủy** – Tôi không nói quá đâu – những công cụ này thực sự sẽ khiến bạn cảm thấy như có siêu năng lực, và phần tuyệt vời nhất? Chúng là những công cụ mà các chuyên gia sử dụng! +- **Lập trình thực sự là gì (và tại sao nó tuyệt vời nhất!)** – Chúng ta sẽ khám phá cách mà mã lệnh chính là phép thuật vô hình cung cấp năng lượng cho mọi thứ xung quanh bạn, từ cái chuông báo thức biết là thứ Hai đến thuật toán lựa chọn đề xuất Netflix hoàn hảo của bạn +- **Các ngôn ngữ lập trình và tính cách đặc biệt của chúng** – Hãy tưởng tượng bạn bước vào một bữa tiệc nơi mỗi người có những siêu năng lực và cách giải quyết vấn đề hoàn toàn khác nhau. Đó chính là thế giới ngôn ngữ lập trình, và bạn sẽ thích gặp gỡ họ! +- **Những viên gạch nền tảng tạo nên phép thuật số** – Hãy coi chúng như bộ LEGO sáng tạo tối thượng. Khi bạn hiểu cách các mảnh ghép này khớp với nhau, bạn sẽ nhận ra bạn có thể xây dựng bất cứ thứ gì trong tưởng tượng của bạn +- **Công cụ chuyên nghiệp giúp bạn cảm thấy như vừa được trao cho cây đũa thần** – Mình không nói quá đâu – những công cụ này thực sự sẽ làm bạn cảm thấy có siêu năng lực, và phần hay nhất? Chúng là những công cụ mà các chuyên gia sử dụng! -> 💡 **Điều quan trọng**: Đừng nghĩ đến việc cố gắng ghi nhớ mọi thứ hôm nay! Ngay bây giờ, tôi chỉ muốn bạn cảm nhận được sự phấn khích về những gì có thể. Các chi tiết sẽ tự nhiên gắn bó khi chúng ta thực hành cùng nhau – đó là cách học thực sự diễn ra! +> 💡 **Một điều này nhé:** Đừng nghĩ đến việc cố gắng ghi nhớ tất cả hôm nay! Bây giờ, mình chỉ muốn bạn cảm nhận được tia lửa phấn khích về những gì có thể làm được. Các chi tiết sẽ tự nhiên lưu lại khi chúng ta cùng luyện tập – đó chính là cách học thực sự! -> Bạn có thể tham gia bài học này trên [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Bạn có thể học bài này trên [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Vậy Lập trình Thực sự Là Gì? +## Vậy Lập Trình Thật Ra *Là Gì*? -Được rồi, hãy giải quyết câu hỏi triệu đô: lập trình thực sự là gì? +Được rồi, hãy cùng trả lời câu hỏi triệu đô: lập trình thật sự là gì? -Tôi sẽ kể cho bạn một câu chuyện đã hoàn toàn thay đổi cách tôi nghĩ về điều này. Tuần trước, tôi đang cố gắng giải thích cho mẹ tôi cách sử dụng điều khiển từ xa của TV thông minh mới. Tôi đã nói những câu như "Nhấn nút đỏ, nhưng không phải nút đỏ lớn, nút đỏ nhỏ ở bên trái... không, bên trái khác của mẹ... được rồi, giờ giữ nó trong hai giây, không phải một, không phải ba..." Nghe quen không? 😅 +Mình sẽ kể bạn một câu chuyện đã làm mình thay đổi hoàn toàn cách nghĩ về điều này. Tuần trước, mình cố giải thích cho mẹ mình cách sử dụng chiếc điều khiển TV thông minh mới. Mình bắt gặp mình nói những câu kiểu như "Nhấn nút đỏ, nhưng không phải nút đỏ lớn, mà là nút đỏ nhỏ bên trái... không, bên trái kia kìa... được rồi, giữ nút đó hai giây, không phải một, không phải ba..." Nghe quen không? 😅 -Đó chính là lập trình! Đó là nghệ thuật đưa ra các hướng dẫn chi tiết, từng bước cho một thứ rất mạnh mẽ nhưng cần mọi thứ được giải thích hoàn hảo. Ngoại trừ việc thay vì giải thích cho mẹ bạn (người có thể hỏi "nút đỏ nào?!"), bạn đang giải thích cho một máy tính (máy chỉ làm đúng những gì bạn nói, ngay cả khi điều bạn nói không hoàn toàn là điều bạn muốn). +Đó chính là lập trình! Đó là nghệ thuật đưa ra chỉ dẫn cực kỳ chi tiết, từng bước cho một thứ rất mạnh mẽ nhưng cần mọi thứ được nói rõ ràng hoàn hảo. Ngoại trừ không phải giải thích cho mẹ bạn (người có thể hỏi "nút đỏ nào?"), mà bạn đang giải thích cho máy tính (máy tính chỉ làm đúng những gì bạn nói, dù bạn nói chưa đúng ý). -Điều khiến tôi ngạc nhiên khi lần đầu tiên học điều này: máy tính thực sự khá đơn giản ở cốt lõi của chúng. Chúng chỉ hiểu hai điều – 1 và 0, về cơ bản chỉ là "có" và "không" hoặc "bật" và "tắt." Chỉ vậy thôi! Nhưng đây là nơi nó trở nên kỳ diệu – chúng ta không cần phải nói bằng 1 và 0 như trong The Matrix. Đó là nơi **ngôn ngữ lập trình** xuất hiện. Chúng giống như có người phiên dịch tốt nhất thế giới, người chuyển đổi suy nghĩ hoàn toàn bình thường của bạn thành ngôn ngữ máy tính. +Cái đã làm mình kinh ngạc khi mới học là: máy tính thực ra rất đơn giản ở cốt lõi. Chúng chỉ hiểu hai thứ – 1 và 0, tức là "có" và "không" hoặc "bật" và "tắt." Chỉ vậy thôi! Nhưng đây là điều kỳ diệu – chúng ta không cần nói bằng 1 và 0 như trong Ma Trận. Đó là khi **ngôn ngữ lập trình** cứu cánh. Chúng là như phiên dịch viên giỏi nhất thế giới, biến những suy nghĩ bình thường của con người thành ngôn ngữ máy tính. -Và đây là điều khiến tôi vẫn nổi da gà mỗi sáng khi thức dậy: mọi thứ kỹ thuật số trong cuộc sống của bạn đều bắt đầu với ai đó giống như bạn, có lẽ đang ngồi trong bộ đồ ngủ với một tách cà phê, gõ mã trên máy tính xách tay của họ. Bộ lọc Instagram làm bạn trông hoàn hảo? Ai đó đã mã hóa nó. Gợi ý dẫn bạn đến bài hát yêu thích mới của bạn? Một nhà phát triển đã xây dựng thuật toán đó. Ứng dụng giúp bạn chia hóa đơn bữa tối với bạn bè? Đúng vậy, ai đó đã nghĩ "điều này thật phiền phức, tôi cá là tôi có thể sửa điều này" và sau đó... họ đã làm được! +Và đây là điều vẫn làm mình rùng mình mỗi sáng khi thức dậy: thật sự *mọi thứ* kỹ thuật số trong cuộc sống của bạn bắt đầu bởi ai đó giống bạn, có thể đang mặc đồ ngủ với tách cà phê, gõ mã trên laptop. Bộ lọc Instagram làm bạn trông hoàn hảo? Ai đó đã viết mã đó. Thuật toán gợi ý bài hát mới yêu thích của bạn? Một nhà phát triển đã xây dựng thuật toán đó. Ứng dụng giúp bạn chia tiền ăn tối với bạn bè? Vâng, ai đó đã nghĩ "điều này thật phiền, mình chắc có thể sửa được" rồi... họ đã làm! -Khi bạn học lập trình, bạn không chỉ học một kỹ năng mới – bạn đang trở thành một phần của cộng đồng tuyệt vời này gồm những người giải quyết vấn đề, những người dành cả ngày để nghĩ, "Nếu tôi có thể xây dựng thứ gì đó làm cho ngày của ai đó tốt hơn một chút thì sao?" Thành thật mà nói, có điều gì tuyệt vời hơn thế không? +Khi bạn học lập trình, bạn không chỉ học thêm một kỹ năng mới – bạn trở thành một phần của cộng đồng những người giải quyết vấn đề tuyệt vời này, những người dành cả ngày suy nghĩ, "Nếu mình có thể xây dựng một thứ làm cho ngày của ai đó tốt hơn một chút thì sao nhỉ?" Thật sự, có gì ngầu hơn thế? -✅ **Săn Tìm Sự Thật Thú Vị**: Đây là điều siêu thú vị để tìm hiểu khi bạn có thời gian rảnh – bạn nghĩ ai là lập trình viên máy tính đầu tiên trên thế giới? Tôi sẽ gợi ý: có thể không phải là người bạn mong đợi! Câu chuyện về người này thực sự hấp dẫn và cho thấy rằng lập trình luôn là về giải quyết vấn đề sáng tạo và suy nghĩ vượt ra ngoài khuôn khổ. +✅ **Trò chơi thú vị:** Đây là điều cực kỳ thú vị để tìm hiểu khi bạn có thời gian rảnh – bạn có nghĩ ai là người lập trình máy tính đầu tiên trên thế giới không? Mình sẽ cho bạn một gợi ý: có thể không phải người bạn đang nghĩ! Câu chuyện về người này rất hấp dẫn và cho thấy lập trình luôn là về sáng tạo giải quyết vấn đề và tư duy khác biệt. -### 🧠 **Thời gian Kiểm tra: Bạn Cảm Thấy Thế Nào?** +### 🧠 **Giờ Kiểm Tra: Bạn Cảm Thấy Thế Nào?** -**Hãy dành một chút thời gian để suy ngẫm:** -- Ý tưởng "đưa ra hướng dẫn cho máy tính" có làm bạn cảm thấy dễ hiểu hơn không? -- Bạn có thể nghĩ đến một nhiệm vụ hàng ngày mà bạn muốn tự động hóa bằng lập trình không? -- Những câu hỏi nào đang nảy lên trong đầu bạn về toàn bộ chuyện lập trình này? +**Dành chút thời gian suy nghĩ:** +- Ý tưởng "đưa hướng dẫn cho máy tính" có hợp lý với bạn không? +- Bạn có thể nghĩ ra một công việc hàng ngày bạn muốn tự động hóa bằng lập trình không? +- Có những câu hỏi nào đang nảy lên trong đầu bạn về lập trình? -> **Nhớ nhé**: Hoàn toàn bình thường nếu một số khái niệm vẫn còn mơ hồ ngay bây giờ. Học lập trình giống như học một ngôn ngữ mới – cần thời gian để não bạn xây dựng các đường dẫn thần kinh đó. Bạn đang làm rất tốt! +> **Nhớ nhé:** Bình thường nếu một số khái niệm còn mơ hồ lúc này. Học lập trình như học một ngôn ngữ mới – cần thời gian để não bạn xây dựng các kết nối thần kinh. Bạn đang làm rất tốt rồi! -## Ngôn ngữ Lập trình Giống Như Những Hương Vị Phép Thuật Khác Nhau +## Ngôn Ngữ Lập Trình Giống Như Những Hương Vị Phép Thuật Khác Nhau -Được rồi, điều này nghe có vẻ kỳ lạ, nhưng hãy cùng tôi – ngôn ngữ lập trình rất giống các thể loại âm nhạc khác nhau. Hãy nghĩ về nó: bạn có jazz, mượt mà và ngẫu hứng, rock mạnh mẽ và trực tiếp, cổ điển thanh lịch và có cấu trúc, và hip-hop sáng tạo và biểu cảm. Mỗi phong cách có cảm giác riêng, cộng đồng người hâm mộ đam mê riêng, và mỗi phong cách đều hoàn hảo cho các tâm trạng và dịp khác nhau. +Được rồi, điều này nghe có vẻ lạ nhưng hãy theo mình – ngôn ngữ lập trình giống như các thể loại nhạc khác nhau. Nghĩ mà xem: bạn có jazz mượt mà và ứng biến, nhạc rock mãnh liệt và trực tiếp, nhạc cổ điển thanh lịch và có cấu trúc, và hip-hop sáng tạo và biểu cảm. Mỗi thể loại có phong cách riêng, cộng đồng fan đam mê riêng, và mỗi loại phù hợp với tâm trạng và dịp khác nhau. -Ngôn ngữ lập trình hoạt động chính xác như vậy! Bạn sẽ không sử dụng cùng một ngôn ngữ để xây dựng một trò chơi di động vui nhộn mà bạn sẽ sử dụng để xử lý lượng lớn dữ liệu khí hậu, giống như bạn sẽ không chơi death metal trong một lớp yoga (chà, hầu hết các lớp yoga thôi! 😄). +Ngôn ngữ lập trình cũng hoạt động y hệt vậy! Bạn sẽ không dùng cùng ngôn ngữ để tạo game di động vui nhộn như lúc xử lý khối dữ liệu khổng lồ về khí hậu, cũng giống như bạn không chơi nhạc death metal trong lớp yoga (thường là thế 😄). -Nhưng đây là điều khiến tôi ngạc nhiên mỗi khi nghĩ về nó: những ngôn ngữ này giống như có người phiên dịch kiên nhẫn và thông minh nhất thế giới ngồi ngay bên cạnh bạn. Bạn có thể diễn đạt ý tưởng của mình theo cách cảm thấy tự nhiên với bộ não con người, và họ xử lý tất cả công việc cực kỳ phức tạp để chuyển đổi điều đó thành 1 và 0 mà máy tính thực sự hiểu. Nó giống như có một người bạn hoàn toàn thông thạo cả "sáng tạo của con người" và "logic của máy tính" – và họ không bao giờ mệt mỏi, không bao giờ cần nghỉ uống cà phê, và không bao giờ phán xét bạn vì hỏi cùng một câu hỏi hai lần! +Nhưng điều làm mình kinh ngạc mỗi lần nghĩ đến: những ngôn ngữ này giống như có một phiên dịch viên kiên nhẫn, tuyệt vời ngồi ngay bên cạnh bạn. Bạn có thể diễn đạt ý tưởng theo cách tự nhiên với bộ não con người, và họ xử lý tất cả công việc phức tạp đưa thành 1 và 0 mà máy tính thực sự hiểu. Giống như có một người bạn thông thạo cả "sáng tạo của con người" và "logic của máy tính" – và họ không bao giờ mệt, không cần nghỉ cà phê, và không bao giờ phán xét bạn hỏi lại cùng một câu hai lần! -### Các Ngôn ngữ Lập trình Phổ biến và Ứng dụng của Chúng +### Các Ngôn Ngữ Lập Trình Phổ Biến và Ứng Dụng ```mermaid mindmap - root((Programming Languages)) + root((Ngôn Ngữ Lập Trình)) Web Development JavaScript - Frontend Magic - Interactive Websites + Phép Thuật Frontend + Trang Web Tương Tác TypeScript - JavaScript + Types - Enterprise Apps + JavaScript + Kiểu Dữ Liệu + Ứng Dụng Doanh Nghiệp Data & AI Python - Data Science - Machine Learning - Automation + Khoa Học Dữ Liệu + Học Máy + Tự Động Hóa R - Statistics - Research + Thống Kê + Nghiên Cứu Mobile Apps Java Android - Enterprise + Doanh Nghiệp Swift iOS - Apple Ecosystem + Hệ Sinh Thái Apple Kotlin - Modern Android - Cross-platform + Android Hiện Đại + Đa Nền Tảng Systems & Performance C++ - Games - Performance Critical + Trò Chơi + Hiệu Năng Quan Trọng Rust - Memory Safety - System Programming + An Toàn Bộ Nhớ + Lập Trình Hệ Thống Go - Cloud Services - Scalable Backend + Dịch Vụ Đám Mây + Backend Có Khả Năng Mở Rộng ``` +| Ngôn ngữ | Tốt nhất cho | Tại sao phổ biến | +|----------|--------------|------------------| +| **JavaScript** | Phát triển web, giao diện người dùng | Chạy trên trình duyệt và cung cấp năng lượng cho các trang web tương tác | +| **Python** | Khoa học dữ liệu, tự động hóa, AI | Dễ đọc và học, có thư viện mạnh mẽ | +| **Java** | Ứng dụng doanh nghiệp, ứng dụng Android | Độc lập nền tảng, bền vững cho hệ thống lớn | +| **C#** | Ứng dụng Windows, phát triển game | Hỗ trợ mạnh mẽ từ hệ sinh thái Microsoft | +| **Go** | Dịch vụ đám mây, hệ thống backend | Nhanh, đơn giản, được thiết kế cho điện toán hiện đại | -| Ngôn ngữ | Tốt nhất cho | Tại sao nó phổ biến | -|----------|--------------|---------------------| -| **JavaScript** | Phát triển web, giao diện người dùng | Chạy trong trình duyệt và cung cấp sức mạnh cho các trang web tương tác | -| **Python** | Khoa học dữ liệu, tự động hóa, AI | Dễ đọc và học, thư viện mạnh mẽ | -| **Java** | Ứng dụng doanh nghiệp, ứng dụng Android | Độc lập nền tảng, mạnh mẽ cho hệ thống lớn | -| **C#** | Ứng dụng Windows, phát triển trò chơi | Hỗ trợ mạnh mẽ từ hệ sinh thái Microsoft | -| **Go** | Dịch vụ đám mây, hệ thống backend | Nhanh, đơn giản, được thiết kế cho tính toán hiện đại | +### Ngôn ngữ Cấp Cao và Cấp Thấp -### Ngôn ngữ Cấp Cao vs. Cấp Thấp +Được rồi, thực sự đây là khái niệm làm mình khá bối rối khi mới học, vậy mình sẽ chia sẻ phép ẩn dụ khiến mình hiểu ra – và mình hy vọng cũng giúp bạn! -Được rồi, đây thực sự là khái niệm đã làm tôi "đau đầu" khi tôi mới bắt đầu học, vì vậy tôi sẽ chia sẻ phép so sánh cuối cùng đã giúp tôi hiểu – và tôi thực sự hy vọng nó cũng giúp bạn! +Hãy tưởng tượng bạn đang du lịch một đất nước mà bạn không biết ngôn ngữ và bạn rất cần tìm phòng vệ sinh gần nhất (ai cũng từng trải qua chứ? 😅): -Hãy tưởng tượng bạn đang đến một quốc gia mà bạn không nói được ngôn ngữ, và bạn rất cần tìm nhà vệ sinh gần nhất (chúng ta đều từng trải qua điều này, đúng không? 😅): +- **Lập trình cấp thấp** giống như học ngôn ngữ địa phương đến mức bạn có thể trò chuyện với bà bán hoa quả góc phố sử dụng các tham chiếu văn hóa, tiếng lóng địa phương, và những câu đùa mà chỉ người bản xứ mới hiểu. Rất ấn tượng và hiệu quả... nếu bạn thành thạo! Nhưng khá quá tải khi bạn chỉ muốn tìm nhà vệ sinh thôi. -- **Lập trình cấp thấp** giống như học ngôn ngữ địa phương đến mức bạn có thể trò chuyện với bà cụ bán trái cây ở góc phố bằng các tham chiếu văn hóa, tiếng lóng địa phương, và những câu chuyện cười nội bộ mà chỉ người lớn lên ở đó mới hiểu. Rất ấn tượng và cực kỳ hiệu quả... nếu bạn tình cờ thông thạo! Nhưng khá áp lực khi bạn chỉ đang cố tìm nhà vệ sinh. +- **Lập trình cấp cao** giống như có một người bạn địa phương tuyệt vời hiểu bạn. Bạn có thể nói "Tôi rất cần tìm nhà vệ sinh" bằng tiếng Anh đơn giản, và họ xử lý việc phiên dịch văn hóa và chỉ đường sao cho bộ não không phải bản địa của bạn cũng hiểu rõ. -- **Lập trình cấp cao** giống như có người bạn địa phương tuyệt vời hiểu bạn. Bạn có thể nói "Tôi thực sự cần tìm nhà vệ sinh" bằng tiếng Anh đơn giản, và họ xử lý tất cả việc dịch thuật văn hóa và chỉ đường theo cách hoàn toàn dễ hiểu với bộ não không phải người địa phương của bạn. +Ở lập trình: +- **Ngôn ngữ cấp thấp** (như Assembly hoặc C) cho phép bạn trò chuyện cực kỳ chi tiết với phần cứng máy tính thực tế, nhưng bạn cần nghĩ như máy, điều này... nói chung là một sự chuyển đổi tư duy khá lớn! +- **Ngôn ngữ cấp cao** (như JavaScript, Python, hay C#) cho phép bạn suy nghĩ như con người trong khi chúng xử lý mọi "ngôn ngữ máy" phía sau. Hơn nữa, chúng có cộng đồng rất thân thiện với nhiều người nhớ được cảm giác mới học và thật lòng muốn giúp đỡ! -Trong thuật ngữ lập trình: -- **Ngôn ngữ cấp thấp** (như Assembly hoặc C) cho phép bạn có các cuộc trò chuyện cực kỳ chi tiết với phần cứng thực tế của máy tính, nhưng bạn cần suy nghĩ như một cỗ máy, điều này... chà, hãy nói rằng đó là một sự thay đổi lớn về tư duy! -- **Ngôn ngữ cấp cao** (như JavaScript, Python, hoặc C#) cho phép bạn suy nghĩ như một con người trong khi chúng xử lý tất cả các ngôn ngữ máy móc phía sau. Thêm vào đó, chúng có những cộng đồng cực kỳ thân thiện đầy những người nhớ cảm giác khi mới bắt đầu và thực sự muốn giúp đỡ! - -Bạn đoán xem tôi sẽ gợi ý bạn bắt đầu với loại nào? 😉 Ngôn ngữ cấp cao giống như có bánh xe tập đi mà bạn không bao giờ muốn tháo ra vì chúng làm cho toàn bộ trải nghiệm trở nên thú vị hơn rất nhiều! +Bạn đoán mình sẽ đề xuất bạn bắt đầu với loại nào? 😉 Ngôn ngữ cấp cao như có bánh xe tập đi mà bạn không muốn tháo ra vì chúng khiến trải nghiệm thú vị hơn nhiều! ```mermaid flowchart TB - A["👤 Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["👤 Suy nghĩ con người:
'Tôi muốn tính số Fibonacci'"] --> B{Chọn cấp độ ngôn ngữ} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + B -->|Cấp cao| C["🌟 JavaScript/Python
Dễ đọc và viết"] + B -->|Cấp thấp| D["⚙️ Assembly/C
Điều khiển phần cứng trực tiếp"] - C --> E["📝 Write: fibonacci(10)"] - D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + C --> E["📝 Viết: fibonacci(10)"] + D --> F["📝 Viết: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Computer Understanding:
Translator handles complexity"] + E --> G["🤖 Máy tính hiểu:
Bộ dịch xử lý độ phức tạp"] F --> G - G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Kết quả giống nhau:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### Để Mình Cho Bạn Xem Tại Sao Ngôn Ngữ Cấp Cao Thân Thiện Hơn Rất Nhiều -### Để Tôi Cho Bạn Thấy Tại Sao Ngôn Ngữ Cấp Cao Thân Thiện Hơn Rất Nhiều - -Được rồi, tôi sắp cho bạn thấy điều gì đó hoàn toàn minh họa tại sao tôi yêu thích ngôn ngữ cấp cao, nhưng trước tiên – tôi cần bạn hứa với tôi một điều. Khi bạn thấy ví dụ mã đầu tiên, đừng hoảng sợ! Nó được thiết kế để trông đáng sợ. Đó chính là điểm tôi muốn làm rõ! +Được rồi, mình sắp cho bạn xem điều thể hiện hoàn hảo tại sao mình yêu ngôn ngữ cấp cao, nhưng trước tiên – mình cần bạn hứa một điều. Khi bạn thấy ví dụ mã đầu tiên, đừng hoảng sợ! Nó đúng là trông có vẻ đáng sợ. Đó chính là điểm mình muốn làm nổi bật! -Chúng ta sẽ xem cùng một nhiệm vụ được viết bằng hai phong cách hoàn toàn khác nhau. Cả hai đều tạo ra cái gọi là dãy Fibonacci – đó là một mẫu toán học đẹp mắt, trong đó mỗi số là tổng của hai số trước đó: 0, 1, 1, 2, 3, 5, 8, 13... (Sự thật thú vị: bạn sẽ tìm thấy mẫu này ở khắp mọi nơi trong tự nhiên – xoắn hạt hướng dương, mẫu hình quả thông, thậm chí cả cách các thiên hà hình thành!) +Chúng ta sẽ xem cùng một tác vụ viết theo hai phong cách hoàn toàn khác nhau. Cả hai tạo ra cái gọi là dãy số Fibonacci – đây là mẫu toán học đẹp tuyệt, mỗi số là tổng của hai số trước: 0, 1, 1, 2, 3, 5, 8, 13... (Thú vị nhé: bạn sẽ thấy mẫu này ở khắp nơi trong thiên nhiên – vòng xoắn hạt hướng dương, mô hình quả thông, thậm chí cả cách các thiên hà hình thành!) -Sẵn sàng để thấy sự khác biệt chưa? Đi thôi! +Sẵn sàng thấy sự khác biệt chưa? Cùng xem nào! **Ngôn ngữ cấp cao (JavaScript) – Thân thiện với con người:** ```javascript -// Step 1: Basic Fibonacci setup +// Bước 1: Thiết lập cơ bản dãy Fibonacci const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Đây là những gì mã này làm:** -- **Khai báo** một hằng số để chỉ định số lượng số Fibonacci chúng ta muốn tạo +**Mã này làm gì:** +- **Khai báo** một hằng số để xác định bao nhiêu số Fibonacci muốn tạo ra - **Khởi tạo** hai biến để theo dõi số hiện tại và số tiếp theo trong dãy -- **Thiết lập** các giá trị bắt đầu (0 và 1) xác định mẫu Fibonacci -- **Hiển thị** một thông báo tiêu đề để xác định đầu ra của chúng ta +- **Thiết lập** giá trị bắt đầu (0 và 1) định nghĩa mẫu Fibonacci +- **Hiển thị** tiêu đề để xác định kết quả đầu ra ```javascript -// Step 2: Generate the sequence with a loop +// Bước 2: Tạo chuỗi với vòng lặp for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Tính số tiếp theo trong chuỗi const sum = current + next; current = next; next = sum; } ``` -**Phân tích những gì xảy ra ở đây:** -- **Lặp lại** qua từng vị trí trong dãy bằng vòng lặp `for` -- **Hiển thị** từng số với vị trí của nó bằng cách định dạng chuỗi mẫu +**Phân tích những gì xảy ra:** +- **Lặp qua** từng vị trí trong dãy bằng vòng `for` +- **Hiển thị** mỗi số cùng chỉ số bằng cú pháp template literal - **Tính toán** số Fibonacci tiếp theo bằng cách cộng giá trị hiện tại và tiếp theo -- **Cập nhật** các biến theo dõi để chuyển sang lần lặp tiếp theo +- **Cập nhật** biến theo dõi để chuyển sang vòng lặp kế tiếp ```javascript -// Step 3: Modern functional approach +// Bước 3: Phương pháp hàm hiện đại const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,15 +219,15 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Ví dụ sử dụng const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**Trong đoạn mã trên, chúng ta đã:** -- **Tạo** một hàm có thể tái sử dụng bằng cú pháp hàm mũi tên hiện đại -- **Xây dựng** một mảng để lưu trữ toàn bộ dãy thay vì hiển thị từng số một -- **Sử dụng** chỉ số mảng để tính toán từng số mới từ các giá trị trước đó +**Trong đoạn trên, ta đã:** +- **Tạo** hàm dùng lại bằng cú pháp arrow function hiện đại +- **Xây dựng** mảng để lưu toàn bộ dãy thay vì hiển thị từng số +- **Dùng** chỉ số mảng để tính số mới từ các số trước đó - **Trả về** toàn bộ dãy để sử dụng linh hoạt trong các phần khác của chương trình **Ngôn ngữ cấp thấp (ARM Assembly) – Thân thiện với máy tính:** @@ -259,127 +257,127 @@ back add r0,r1 end ``` -Hãy chú ý cách phiên bản JavaScript gần như đọc giống như hướng dẫn bằng tiếng Anh, trong khi phiên bản Assembly sử dụng các lệnh khó hiểu trực tiếp điều khiển bộ xử lý của máy tính. Cả hai đều hoàn thành cùng một nhiệm vụ, nhưng ngôn ngữ cấp cao dễ hiểu, viết và duy trì hơn rất nhiều. +Bạn để ý phiên bản JavaScript đọc gần như là các hướng dẫn bằng tiếng Anh, còn phiên bản Assembly dùng các lệnh bí ẩn điều khiển trực tiếp bộ xử lý máy tính. Cả hai đều hoàn thành cùng một nhiệm vụ, nhưng ngôn ngữ cấp cao dễ hiểu, viết và bảo trì hơn nhiều đối với con người. -**Những khác biệt chính bạn sẽ nhận thấy:** -- **Độ dễ đọc**: JavaScript sử dụng các tên mô tả như `fibonacciCount` trong khi Assembly sử dụng các nhãn khó hiểu như `r0`, `r1` -- **Bình luận**: Ngôn ngữ lập trình cấp cao khuyến khích việc sử dụng các bình luận giải thích, giúp mã nguồn tự giải thích. -- **Cấu trúc**: Dòng logic của JavaScript phù hợp với cách con người suy nghĩ về vấn đề từng bước một. -- **Bảo trì**: Việc cập nhật phiên bản JavaScript cho các yêu cầu khác nhau rất dễ dàng và rõ ràng. +**Điểm khác biệt chính bạn sẽ nhận thấy:** +- **Khả năng đọc hiểu**: JavaScript sử dụng các tên mô tả như `fibonacciCount` trong khi Assembly dùng các nhãn khó hiểu như `r0`, `r1` +- **Chú thích**: Ngôn ngữ cấp cao khuyến khích các chú thích giải thích giúp mã tự tài liệu hóa +- **Cấu trúc**: Luồng logic trong JavaScript khớp với cách con người suy nghĩ vấn đề theo từng bước +- **Bảo trì**: Việc cập nhật phiên bản JavaScript để đáp ứng các yêu cầu khác nhau là đơn giản và rõ ràng -✅ **Về dãy số Fibonacci**: Mẫu số tuyệt đẹp này (mỗi số bằng tổng của hai số trước đó: 0, 1, 1, 2, 3, 5, 8...) xuất hiện khắp nơi trong tự nhiên! Bạn sẽ thấy nó trong các vòng xoắn của hoa hướng dương, mẫu hình của quả thông, cách vỏ ốc nautilus uốn cong, và thậm chí trong cách các nhánh cây mọc. Thật đáng kinh ngạc khi toán học và lập trình có thể giúp chúng ta hiểu và tái tạo các mẫu mà tự nhiên sử dụng để tạo ra vẻ đẹp! +✅ **Về dãy số Fibonacci**: Mẫu số tuyệt đẹp này (nơi mỗi số bằng tổng của hai số trước nó: 0, 1, 1, 2, 3, 5, 8...) xuất hiện khắp nơi trong thiên nhiên! Bạn sẽ thấy nó trong các vòng xoắn của hoa hướng dương, họa tiết quả thông, cách vỏ nautilus uốn cong, thậm chí trong cách các cành cây phát triển. Thật khó tin khi toán học và mã có thể giúp chúng ta hiểu và tái tạo các mẫu mà thiên nhiên sử dụng để tạo ra vẻ đẹp! -## Những khối xây dựng tạo nên điều kỳ diệu +## Những Khối Xây Dựng Tạo Nên Phép Màu -Được rồi, bây giờ bạn đã thấy ngôn ngữ lập trình trông như thế nào khi hoạt động, hãy cùng phân tích các thành phần cơ bản tạo nên mọi chương trình từng được viết. Hãy nghĩ về chúng như những nguyên liệu thiết yếu trong công thức nấu ăn yêu thích của bạn – một khi bạn hiểu mỗi thành phần làm gì, bạn sẽ có thể đọc và viết mã trong hầu hết mọi ngôn ngữ! +Được rồi, giờ bạn đã thấy các ngôn ngữ lập trình trông như thế nào khi vận hành, hãy cùng phân tích những thành phần cơ bản tạo nên gần như mỗi chương trình từng được viết. Hãy nghĩ về chúng như những nguyên liệu cần thiết trong công thức yêu thích của bạn – khi bạn hiểu từng phần làm gì, bạn sẽ có thể đọc và viết mã trong hầu hết mọi ngôn ngữ! -Điều này giống như học ngữ pháp của lập trình. Nhớ lại hồi đi học, khi bạn học về danh từ, động từ và cách ghép câu lại với nhau? Lập trình có phiên bản ngữ pháp riêng của nó, và thành thật mà nói, nó logic và dễ chịu hơn ngữ pháp tiếng Anh rất nhiều! 😄 +Điều này giống như học ngữ pháp lập trình vậy. Nhớ hồi đi học bạn học về danh từ, động từ, và cách ghép câu à? Lập trình cũng có phiên bản ngữ pháp riêng của nó, và thật lòng mà nói, nó logic và dễ chịu hơn ngữ pháp tiếng Anh rất nhiều! 😄 -### Câu lệnh: Các hướng dẫn từng bước +### Mệnh Lệnh: Hướng Dẫn Từng Bước -Hãy bắt đầu với **câu lệnh** – chúng giống như các câu riêng lẻ trong một cuộc trò chuyện với máy tính của bạn. Mỗi câu lệnh nói với máy tính làm một việc cụ thể, giống như đưa ra chỉ dẫn: "Rẽ trái ở đây," "Dừng lại ở đèn đỏ," "Đỗ xe vào chỗ đó." +Hãy bắt đầu với **mệnh lệnh** – chúng giống như những câu đơn lẻ trong cuộc trò chuyện với máy tính của bạn. Mỗi mệnh lệnh bảo máy tính làm một việc cụ thể, giống như việc chỉ đường: "Rẽ trái ở đây," "Dừng lại tại đèn đỏ," "Đỗ xe ở chỗ đó." -Điều tôi thích ở câu lệnh là chúng thường rất dễ đọc. Xem thử nhé: +Điều tôi thích ở các mệnh lệnh là chúng thường rất dễ đọc. Nhìn này: ```javascript -// Basic statements that perform single actions +// Các câu lệnh cơ bản thực hiện các hành động đơn lẻ const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**Đây là những gì đoạn mã này làm:** -- **Khai báo** một biến hằng để lưu tên người dùng -- **Hiển thị** một thông báo chào mừng trên bảng điều khiển -- **Tính toán** và lưu kết quả của một phép toán + +**Mã này làm gì:** +- **Khai báo** một biến hằng để lưu tên người dùng +- **Hiển thị** một lời chào lên bảng điều khiển +- **Tính toán** và lưu kết quả của một phép toán ```javascript -// Statements that interact with web pages +// Các câu lệnh tương tác với các trang web document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` + +**Từng bước diễn ra như sau:** +- **Sửa đổi** tiêu đề trang xuất hiện trên tab trình duyệt +- **Thay đổi** màu nền toàn bộ trang -**Từng bước, đây là những gì đang xảy ra:** -- **Thay đổi** tiêu đề của trang web xuất hiện trên tab trình duyệt -- **Thay đổi** màu nền của toàn bộ phần thân trang - -### Biến: Hệ thống bộ nhớ của chương trình +### Biến: Hệ Thống Bộ Nhớ Của Chương Trình Bạn -Được rồi, **biến** thực sự là một trong những khái niệm tôi yêu thích nhất để dạy vì chúng rất giống với những thứ bạn đã sử dụng hàng ngày! +Okay, **biến** thật sự là một trong những khái niệm tôi thích nhất để dạy vì chúng rất giống những thứ bạn đã dùng hàng ngày! -Hãy nghĩ về danh bạ điện thoại của bạn. Bạn không nhớ số điện thoại của mọi người – thay vào đó, bạn lưu "Mẹ," "Bạn thân," hoặc "Quán pizza giao hàng đến 2 giờ sáng" và để điện thoại nhớ các số thực tế. Biến hoạt động chính xác như vậy! Chúng giống như những hộp được gắn nhãn nơi chương trình của bạn có thể lưu trữ thông tin và truy xuất sau đó bằng một cái tên thực sự có ý nghĩa. +Hãy nghĩ về danh bạ điện thoại. Bạn không nhớ số điện thoại của mọi người – thay vào đó, bạn lưu "Mẹ," "Bạn thân," hoặc "Quán Pizza giao hàng đến 2 giờ sáng" và để điện thoại ghi nhớ số thực. Biến cũng hoạt động y hệt vậy! Chúng giống những hộp có nhãn, nơi chương trình bạn có thể lưu trữ thông tin và truy xuất lại sau này bằng một cái tên rất dễ hiểu. -Điều thú vị là: biến có thể thay đổi khi chương trình của bạn chạy (do đó có tên là "biến" – bạn thấy họ làm gì không?). Giống như bạn có thể cập nhật liên lạc của quán pizza khi tìm được nơi nào đó ngon hơn, các biến có thể được cập nhật khi chương trình của bạn học được thông tin mới hoặc khi tình huống thay đổi! +Điều thật sự tuyệt là: biến có thể thay đổi khi chương trình chạy (đó là lý do gọi là "biến" – thấy họ chơi chữ chưa?). Giống như bạn có thể cập nhật số quán pizza nếu tìm được chỗ ngon hơn, các biến cũng có thể được cập nhật khi chương trình học thêm thông tin mới hoặc khi tình huống thay đổi! -Hãy để tôi cho bạn thấy điều này đơn giản và đẹp đẽ như thế nào: +Để tôi cho bạn thấy điều này thật đơn giản thế nào: ```javascript -// Step 1: Creating basic variables +// Bước 1: Tạo các biến cơ bản const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**Hiểu các khái niệm này:** -- **Lưu trữ** các giá trị không thay đổi trong biến `const` (như tên trang web) -- **Sử dụng** `let` cho các giá trị có thể thay đổi trong suốt chương trình -- **Gán** các kiểu dữ liệu khác nhau: chuỗi (văn bản), số, và boolean (đúng/sai) -- **Chọn** tên mô tả để giải thích mỗi biến chứa gì + +**Hiểu các khái niệm này:** +- **Lưu** các giá trị không đổi trong biến `const` (như tên trang) +- **Dùng** `let` cho những giá trị có thể thay đổi trong chương trình +- **Gán** các kiểu dữ liệu khác nhau: chuỗi (text), số, và boolean (đúng/sai) +- **Chọn** tên biến mô tả dữ liệu một cách rõ ràng ```javascript -// Step 2: Working with objects to group related data +// Bước 2: Làm việc với các đối tượng để nhóm dữ liệu có liên quan const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**Trong đoạn trên, chúng ta đã:** -- **Tạo** một đối tượng để nhóm thông tin thời tiết liên quan lại với nhau -- **Tổ chức** nhiều mẩu dữ liệu dưới một tên biến -- **Sử dụng** cặp khóa-giá trị để gắn nhãn rõ ràng từng mẩu thông tin + +**Ở ví dụ trên, chúng ta đã:** +- **Tạo** một đối tượng để nhóm thông tin thời tiết liên quan +- **Sắp xếp** nhiều dữ liệu dưới một tên biến duy nhất +- **Dùng** cặp khóa-giá trị để gắn nhãn từng thông tin rõ ràng ```javascript -// Step 3: Using and updating variables +// Bước 3: Sử dụng và cập nhật biến console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Cập nhật các biến có thể thay đổi currentWeather = "cloudy"; temperature = 68; ``` - -**Hãy hiểu từng phần:** -- **Hiển thị** thông tin bằng cách sử dụng template literals với cú pháp `${}` -- **Truy cập** thuộc tính của đối tượng bằng cách sử dụng dot notation (`weatherData.windSpeed`) -- **Cập nhật** các biến được khai báo với `let` để phản ánh điều kiện thay đổi -- **Kết hợp** nhiều biến để tạo ra các thông điệp có ý nghĩa + +**Hiểu từng phần:** +- **Hiển thị** thông tin dùng chuỗi mẫu kèm cú pháp `${}` +- **Truy cập** thuộc tính của đối tượng bằng dấu chấm (`weatherData.windSpeed`) +- **Cập nhật** các biến khai báo bằng `let` để phản ánh điều kiện thay đổi +- **Kết hợp** nhiều biến để tạo ra các thông điệp có ý nghĩa ```javascript -// Step 4: Modern destructuring for cleaner code +// Bước 4: Phá cấu trúc hiện đại để mã sạch hơn const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` + +**Cần biết:** +- **Trích xuất** các thuộc tính cụ thể của đối tượng bằng phép gán phân rã +- **Tạo** biến mới tự động cùng tên với các khóa trong đối tượng +- **Đơn giản hóa** mã bằng cách tránh lặp lại cú pháp dấu chấm -**Những gì bạn cần biết:** -- **Trích xuất** các thuộc tính cụ thể từ đối tượng bằng cách sử dụng destructuring assignment -- **Tạo** các biến mới tự động với cùng tên như các khóa của đối tượng -- **Đơn giản hóa** mã bằng cách tránh lặp lại dot notation - -### Dòng điều khiển: Dạy chương trình của bạn cách suy nghĩ +### Luồng Điều Khiển: Dạy Chương Trình Bạn Cách Nghĩ -Được rồi, đây là nơi lập trình trở nên cực kỳ thú vị! **Dòng điều khiển** về cơ bản là dạy chương trình của bạn cách đưa ra quyết định thông minh, giống như bạn làm mỗi ngày mà không cần suy nghĩ. +Okay, đây là phần làm lập trình trở nên cực kỳ kinh ngạc! **Luồng điều khiển** về cơ bản là dạy chương trình làm thế nào để đưa ra các quyết định thông minh, giống như bạn làm từng ngày mà chẳng cần suy nghĩ nhiều. -Hãy tưởng tượng điều này: sáng nay bạn có thể đã trải qua điều gì đó như "Nếu trời mưa, tôi sẽ mang ô. Nếu trời lạnh, tôi sẽ mặc áo khoác. Nếu tôi trễ giờ, tôi sẽ bỏ qua bữa sáng và mua cà phê trên đường đi." Bộ não của bạn tự nhiên tuân theo logic if-then hàng chục lần mỗi ngày! +Hãy tưởng tượng: sáng nay bạn có thể đã trải qua kiểu logic như "Nếu trời mưa, tôi sẽ mang ô. Nếu trời lạnh, tôi sẽ mặc áo khoác. Nếu tôi đi trễ, tôi sẽ bỏ bữa sáng và lấy cà phê trên đường." Bộ não bạn tự nhiên làm theo quy luật if-then này hàng chục lần mỗi ngày! -Đây là điều làm cho các chương trình cảm thấy thông minh và sống động thay vì chỉ tuân theo một kịch bản nhàm chán, dễ đoán. Chúng thực sự có thể nhìn vào một tình huống, đánh giá những gì đang xảy ra, và phản ứng phù hợp. Nó giống như cho chương trình của bạn một bộ não có thể thích nghi và đưa ra lựa chọn! +Chính điều này khiến các chương trình cảm thấy thông minh và sống động thay vì chỉ tuân theo kịch bản khô khan, máy móc. Chúng có thể nhìn vào một tình huống, đánh giá điều gì đang xảy ra, và phản ứng phù hợp. Giống như trao cho chương trình một bộ não để thích ứng và lựa chọn! -Muốn thấy điều này hoạt động đẹp đẽ như thế nào? Để tôi cho bạn xem: +Muốn thấy nó vận hành tuyệt vời thế nào? Để tôi cho bạn xem: ```javascript -// Step 1: Basic conditional logic +// Bước 1: Logic điều kiện cơ bản const userAge = 17; if (userAge >= 18) { @@ -389,15 +387,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**Đây là những gì đoạn mã này làm:** -- **Kiểm tra** xem tuổi của người dùng có đáp ứng yêu cầu bầu cử không -- **Thực thi** các khối mã khác nhau dựa trên kết quả điều kiện -- **Tính toán** và hiển thị thời gian còn lại cho đến khi đủ tuổi bầu cử nếu dưới 18 -- **Cung cấp** phản hồi cụ thể, hữu ích cho từng trường hợp + +**Mã này làm gì:** +- **Kiểm tra** xem tuổi người dùng có đủ điều kiện bầu cử không +- **Chạy** các đoạn mã khác nhau dựa vào kết quả điều kiện +- **Tính toán** và hiển thị khoảng thời gian chờ đủ tuổi bầu cử nếu chưa đủ 18 +- **Cung cấp** phản hồi cụ thể, hữu ích cho từng trường hợp ```javascript -// Step 2: Multiple conditions with logical operators +// Bước 2: Nhiều điều kiện với toán tử logic const userAge = 17; const hasPermission = true; @@ -409,26 +407,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**Phân tích những gì xảy ra ở đây:** -- **Kết hợp** nhiều điều kiện bằng cách sử dụng toán tử `&&` (và) -- **Tạo** một hệ thống phân cấp điều kiện bằng cách sử dụng `else if` cho nhiều trường hợp -- **Xử lý** tất cả các trường hợp có thể với câu lệnh `else` cuối cùng -- **Cung cấp** phản hồi rõ ràng, có thể hành động cho từng tình huống khác nhau + +**Phân tích diễn biến:** +- **Kết hợp** nhiều điều kiện với toán tử `&&` (và) +- **Tạo** hệ thống điều kiện phân loại bằng `else if` cho nhiều tình huống +- **Xử lý** tất cả các trường hợp với câu lệnh `else` cuối cùng +- **Đưa ra** phản hồi rõ ràng, khả thi cho mỗi tình huống khác nhau ```javascript -// Step 3: Concise conditional with ternary operator +// Bước 3: Câu điều kiện ngắn gọn với toán tử tam phân const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**Những gì bạn cần nhớ:** -- **Sử dụng** toán tử ternary (`? :`) cho các điều kiện đơn giản hai tùy chọn -- **Viết** điều kiện trước, theo sau là `?`, sau đó kết quả đúng, sau đó `:`, sau đó kết quả sai -- **Áp dụng** mẫu này khi bạn cần gán giá trị dựa trên điều kiện + +**Cần nhớ:** +- **Dùng** toán tử ba ngôi (`? :`) cho các điều kiện có hai lựa chọn đơn giản +- **Viết** điều kiện đầu tiên, theo sau là `?`, kết quả đúng, rồi `:`, kết quả sai +- **Áp dụng** mẫu này khi cần gán giá trị dựa trên điều kiện ```javascript -// Step 4: Handling multiple specific cases +// Bước 4: Xử lý nhiều trường hợp cụ thể const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -447,58 +445,57 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` + +**Mã làm được:** +- **So khớp** giá trị biến với nhiều trường hợp cụ thể +- **Nhóm** các trường hợp tương đồng (ngày trong tuần so với cuối tuần) +- **Thực hiện** đoạn mã tương ứng khi tìm thấy khớp +- **Bao gồm** trường hợp `default` để xử lý giá trị bất ngờ +- **Dùng** câu lệnh `break` để ngăn không thực hiện tiếp các trường hợp phía sau -**Đoạn mã này thực hiện các điều sau:** -- **So khớp** giá trị biến với nhiều trường hợp cụ thể -- **Nhóm** các trường hợp tương tự lại với nhau (ngày trong tuần so với cuối tuần) -- **Thực thi** khối mã phù hợp khi tìm thấy sự so khớp -- **Bao gồm** một trường hợp `default` để xử lý các giá trị không mong đợi -- **Sử dụng** câu lệnh `break` để ngăn mã tiếp tục đến trường hợp tiếp theo - -> 💡 **Ví dụ thực tế**: Hãy nghĩ về dòng điều khiển như có GPS kiên nhẫn nhất thế giới đang chỉ đường cho bạn. Nó có thể nói "Nếu có kẹt xe trên đường Main, hãy đi đường cao tốc. Nếu có công trình xây dựng chặn đường cao tốc, hãy thử đi đường cảnh quan." Các chương trình sử dụng loại logic điều kiện này để phản ứng thông minh với các tình huống khác nhau và luôn mang lại trải nghiệm tốt nhất có thể cho người dùng. +> 💡 **Minh họa thực tế**: Hãy nghĩ luồng điều khiển giống như bạn có một GPS cực kỳ kiên nhẫn chỉ đường. Nó có thể nói "Nếu trên đường Main đang kẹt xe, hãy đi cao tốc. Nếu cao tốc bị chặn do công trường, thử đi đường ngắm cảnh." Các chương trình dùng đúng kiểu logic có điều kiện này để phản ứng thông minh với các tình huống khác nhau và luôn mang lại trải nghiệm tốt nhất cho người dùng. -### 🎯 **Kiểm tra khái niệm: Làm chủ các khối xây dựng** +### 🎯 **Kiểm Tra Khái Niệm: Làm Chủ Các Khối Xây Dựng** -**Hãy xem bạn đang làm thế nào với các nguyên tắc cơ bản:** -- Bạn có thể giải thích sự khác biệt giữa biến và câu lệnh bằng lời của mình không? -- Nghĩ về một tình huống thực tế nơi bạn sẽ sử dụng quyết định if-then (như ví dụ bầu cử của chúng ta) -- Điều gì về logic lập trình khiến bạn ngạc nhiên? +**Cùng xem bạn làm thế nào với kiến thức nền tảng:** +- Bạn có thể giải thích sự khác biệt giữa biến và mệnh lệnh bằng lời của bạn? +- Nghĩ về một tình huống thực tế bạn sẽ dùng lệnh if-then (như ví dụ bầu cử) +- Điều gì về logic lập trình khiến bạn bất ngờ nhất? -**Tăng cường sự tự tin nhanh chóng:** +**Tăng sự tự tin nhanh:** ```mermaid flowchart LR - A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + A["📝 Câu lệnh
(Hướng dẫn)"] --> B["📦 Biến
(Lưu trữ)"] --> C["🔀 Luồng điều khiển
(Quyết định)"] --> D["🎉 Chương trình hoạt động!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` +``` +✅ **Điều tiếp theo**: Chúng ta sẽ có một chuyến phiêu lưu đầy thú vị khám phá sâu hơn các khái niệm này! Hiện giờ, hãy tập trung cảm nhận sự phấn khích về mọi khả năng tuyệt vời đang chờ phía trước. Kỹ năng và kỹ thuật cụ thể sẽ đi vào tiềm thức khi ta luyện tập cùng nhau – tôi đảm bảo đây sẽ vui hơn bạn tưởng rất nhiều! -✅ **Tiếp theo là gì**: Chúng ta sẽ có một khoảng thời gian tuyệt vời khám phá sâu hơn các khái niệm này khi tiếp tục hành trình tuyệt vời này cùng nhau! Ngay bây giờ, chỉ cần tập trung vào cảm giác phấn khích về tất cả những khả năng tuyệt vời phía trước. Các kỹ năng và kỹ thuật cụ thể sẽ tự nhiên gắn bó khi chúng ta thực hành cùng nhau – tôi hứa điều này sẽ thú vị hơn bạn mong đợi rất nhiều! +## Công Cụ Chuyên Nghiệp -## Công cụ hỗ trợ +Được rồi, thành thật mà nói đây là phần khiến tôi cực kỳ hào hứng không thể kiềm chế! 🚀 Chúng ta sắp nói về những công cụ tuyệt vời sẽ làm bạn cảm giác như vừa được trao chìa khóa cho một chiếc phi thuyền số. -Được rồi, đây thực sự là nơi tôi cảm thấy phấn khích đến mức không thể kiềm chế được! 🚀 Chúng ta sắp nói về những công cụ tuyệt vời sẽ khiến bạn cảm thấy như vừa được trao chìa khóa của một con tàu vũ trụ kỹ thuật số. +Bạn biết đầu bếp có những con dao cân bằng hoàn hảo như thể là phần nối dài của bàn tay họ không? Hay nhạc sĩ có cây đàn guitar mà chỉ cần chạm vào là như hát lên? Các nhà phát triển phần mềm có phiên bản công cụ kỳ diệu của riêng mình, và đây là điều sẽ làm bạn choáng ngợp – hầu hết đều hoàn toàn miễn phí! -Bạn biết cách một đầu bếp có những con dao hoàn hảo cân bằng, cảm giác như phần mở rộng của bàn tay họ? Hoặc cách một nhạc sĩ có cây đàn guitar dường như hát lên ngay khi họ chạm vào? Chà, các nhà phát triển có phiên bản riêng của những công cụ kỳ diệu này, và đây là điều sẽ khiến bạn kinh ngạc – hầu hết chúng hoàn toàn miễn phí! +Tôi gần như nhún nhảy trên ghế khi nghĩ tới việc chia sẻ với bạn bởi vì chúng đã cách mạng hóa hoàn toàn cách chúng ta xây dựng phần mềm. Chúng ta đang nói về các trợ lý viết mã dùng trí tuệ nhân tạo (tôi không đùa đâu!), môi trường đám mây nơi bạn có thể xây dựng toàn bộ ứng dụng từ bất cứ đâu có Wi-Fi, và các công cụ gỡ lỗi tinh vi như thể bạn có thể nhìn xuyên thấu các chương trình. -Tôi gần như nhảy lên ghế khi nghĩ về việc chia sẻ những điều này với bạn vì chúng đã hoàn toàn cách mạng hóa cách chúng ta xây dựng phần mềm. Chúng ta đang nói về các trợ lý mã hóa được hỗ trợ bởi AI có thể giúp viết mã của bạn (tôi không đùa đâu!), môi trường đám mây nơi bạn có thể xây dựng toàn bộ ứng dụng từ bất kỳ đâu có Wi-Fi, và các công cụ gỡ lỗi tinh vi đến mức giống như có tầm nhìn X-quang cho chương trình của bạn. - -Và đây là phần vẫn khiến tôi nổi da gà: đây không phải là "công cụ dành cho người mới bắt đầu" mà bạn sẽ vượt qua. Đây là những công cụ chuyên nghiệp chính xác mà các nhà phát triển tại Google, Netflix, và studio ứng dụng indie mà bạn yêu thích đang sử dụng ngay lúc này. Bạn sẽ cảm thấy như một chuyên gia thực thụ khi sử dụng chúng! +Và phần này khiến tôi run lên: đây không phải là "công cụ cho người mới" mà bạn sẽ sớm bỏ qua. Đây là những công cụ chuyên nghiệp y hệt như các nhà phát triển tại Google, Netflix, và studio ứng dụng độc lập mà bạn yêu thích đang dùng ngay lúc này. Bạn sẽ cảm thấy như một chuyên gia thực thụ khi sử dụng chúng! ```mermaid graph TD - A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚡ Command Line
(Automation & Tools)"] - D --> E["📚 Documentation
(Learning & Reference)"] - E --> F["🚀 Amazing Web App!"] + A["💡 Ý tưởng của bạn"] --> B["⌨️ Trình chỉnh sửa mã
(VS Code)"] + B --> C["🌐 Công cụ trình duyệt cho nhà phát triển
(Kiểm tra & Gỡ lỗi)"] + C --> D["⚡ Dòng lệnh
(Tự động hóa & Công cụ)"] + D --> E["📚 Tài liệu
(Học tập & Tham khảo)"] + E --> F["🚀 Ứng dụng web tuyệt vời!"] - B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] - C -.-> H["📱 Device Testing
(Responsive Design)"] - D -.-> I["📦 Package Managers
(npm, yarn)"] - E -.-> J["👥 Community
(Stack Overflow)"] + B -.-> G["🤖 Trợ lý AI
(GitHub Copilot)"] + C -.-> H["📱 Kiểm tra thiết bị
(Thiết kế đáp ứng)"] + D -.-> I["📦 Trình quản lý gói
(npm, yarn)"] + E -.-> J["👥 Cộng đồng
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -506,351 +503,352 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` +``` +### Trình Soạn Thảo Mã và IDE: Người Bạn Đời Kỹ Thuật Số Mới Của Bạn -### Trình chỉnh sửa mã và IDE: Người bạn kỹ thuật số mới của bạn +Hãy nói về các trình soạn thảo mã – chúng sắp trở thành nơi yêu thích mới của bạn đấy! Hãy coi chúng như thánh địa lập trình cá nhân, nơi bạn sẽ dành phần lớn thời gian tạo và hoàn thiện tác phẩm số của mình. -Hãy nói về trình chỉnh sửa mã – chúng thực sự sắp trở thành nơi yêu thích mới của bạn để ghé thăm! Hãy nghĩ về chúng như nơi trú ẩn cá nhân của bạn để viết mã, nơi bạn sẽ dành phần lớn thời gian để tạo và hoàn thiện các sáng tạo kỹ thuật số của mình. +Nhưng điều kỳ diệu của các trình soạn thảo hiện đại là: chúng không chỉ là những trình soạn thảo văn bản sang trọng. Chúng giống như một người hướng dẫn lập trình thông minh và nhiệt tình bên cạnh bạn 24/7. Chúng phát hiện lỗi đánh máy trước khi bạn nhận ra, gợi ý cải tiến khiến bạn trông như thiên tài, giúp bạn hiểu mọi dòng mã đang làm gì, và một số còn dự đoán bạn sẽ đánh gì tiếp theo và đề nghị hoàn thành ý tưởng! -Nhưng đây là điều kỳ diệu về các trình chỉnh sửa hiện đại: chúng không chỉ là các trình soạn thảo văn bản đẹp mắt. Chúng giống như có một người cố vấn mã hóa thông minh nhất, hỗ trợ nhất ngồi cạnh bạn 24/7. Chúng bắt lỗi chính tả của bạn trước khi bạn nhận ra, gợi ý cải tiến khiến bạn trông như thiên tài, giúp bạn hiểu từng phần mã làm gì, và một số thậm chí có thể dự đoán bạn sắp gõ gì và đề nghị hoàn thành suy nghĩ của bạn! +Tôi nhớ lần đầu phát hiện tính năng tự động hoàn thành – tôi thực sự cảm thấy như đang sống trong tương lai. Bạn bắt đầu nhập, và trình soạn thảo bảo: "Này, bạn đang nghĩ tới hàm này mà làm đúng việc bạn cần đấy à?" Giống như có một người đọc suy nghĩ làm bạn lập trình vậy! -Tôi nhớ lần đầu tiên tôi phát hiện ra tính năng tự động hoàn thành – tôi thực sự cảm thấy như mình đang sống trong tương lai. Bạn bắt đầu gõ một cái gì đó, và trình chỉnh sửa của bạn nói, "Này, bạn có đang nghĩ về hàm này làm chính xác những gì bạn cần không?" Nó giống như có một người đọc suy nghĩ làm bạn đồng hành mã hóa! +**Điều gì làm các trình soạn thảo này tuyệt vời đến thế?** -**Điều gì làm cho các trình chỉnh sửa này trở nên tuyệt vời?** +Các trình soạn thảo mã hiện đại cung cấp một loạt các tính năng ấn tượng nhằm tăng năng suất của bạn: -Các trình chỉnh sửa mã hiện đại cung cấp một loạt các tính năng ấn tượng được thiết kế để tăng năng suất của bạn: +| Tính Năng | Công Dụng | Lợi Ích | +|---------|--------------|--------------| +| **Đánh dấu cú pháp** | Tô màu các phần khác nhau của mã | Giúp mã dễ đọc và phát hiện lỗi | +| **Tự động hoàn thành** | Gợi ý mã khi bạn gõ | Tăng tốc độ lập trình và giảm lỗi đánh máy | +| **Công cụ gỡ lỗi** | Giúp bạn tìm và sửa lỗi | Tiết kiệm hàng giờ khắc phục sự cố | +| **Tiện ích mở rộng** | Thêm các tính năng chuyên biệt | Tùy biến trình soạn thảo theo công nghệ bạn dùng | +| **Trợ lý AI** | Gợi ý mã và giải thích | Tăng tốc học tập và làm việc | -| Tính năng | Nó làm gì | Tại sao nó hữu ích | -|-----------|-----------|--------------------| -| **Tô màu cú pháp** | Tô màu các phần khác nhau của mã | Giúp mã dễ đọc hơn và phát hiện lỗi | -| **Tự động hoàn thành** | Gợi ý mã khi bạn gõ | Tăng tốc độ viết mã và giảm lỗi chính tả | -| **Công cụ gỡ lỗi** | Giúp bạn tìm và sửa lỗi | Tiết kiệm hàng giờ thời gian khắc phục sự cố | -| **Tiện ích mở rộng** | Thêm các tính năng chuyên biệt | Tùy chỉnh trình chỉnh sửa của bạn cho bất kỳ công nghệ nào | -| **Trợ lý AI** | Gợi ý mã và giải thích | Tăng tốc học tập và năng suất | +> 🎥 **Tài nguyên Video**: Muốn xem các công cụ này hoạt động thế nào? Xem ngay [video Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) để có cái nhìn tổng quan chi tiết. -> 🎥 **Tài nguyên video**: Muốn thấy các công cụ này hoạt động? Xem [video Công cụ hỗ trợ](https://youtube.com/watch?v=69WJeXGBdxg) để có cái nhìn tổng quan toàn diện. +#### Trình Soạn Thảo Gợi Ý Cho Phát Triển Web -#### Trình chỉnh sửa được khuyến nghị cho phát triển web +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Miễn phí) +- Phổ biến nhất với các nhà phát triển web +- Hệ sinh thái tiện ích mở rộng xuất sắc +- Tích hợp terminal và Git sẵn +- **Tiện ích mở rộng cần có**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - gợi ý mã dùng AI + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - cộng tác trực tiếp + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - định dạng mã tự động + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - phát hiện lỗi chính tả trong mã -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Miễn phí) -- Phổ biến nhất trong các nhà phát triển web -- Hệ sinh thái tiện ích mở rộng xuất sắc -- Tích hợp terminal và Git -- **Tiện ích mở rộng cần có**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Gợi ý mã được hỗ trợ bởi AI - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Cộng tác thời gian thực - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Định dạng mã tự động - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Bắt lỗi chính tả trong mã +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Trả phí, miễn phí cho sinh viên) +- Công cụ gỡ lỗi và kiểm thử nâng cao +- Tự động hoàn thành mã thông minh +- Kiểm soát phiên bản tích hợp -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Trả phí, miễn phí cho sinh viên) -- Công cụ gỡ lỗi và kiểm tra nâng cao -- Hoàn thành mã thông minh -- Tích hợp kiểm soát phiên bản +**IDE Dựa Trên Đám Mây** (Giá khác nhau) +- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code đầy đủ trên trình duyệt +- [Replit](https://replit.com/) - tuyệt vời để học và chia sẻ mã +- [StackBlitz](https://stackblitz.com/) - phát triển web full-stack tức thì -**IDE dựa trên đám mây** (Các mức giá khác nhau) -- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code đầy đủ trong trình duyệt của bạn -- [Replit](https://replit.com/) - Tuyệt vời để học và chia sẻ mã -- [StackBlitz](https://stackblitz.com/) - Phát triển web full-stack tức thì +> 💡 **Mẹo Bắt Đầu**: Hãy bắt đầu với Visual Studio Code – nó miễn phí, được sử dụng rộng rãi trong ngành và có cộng đồng khổng lồ tạo ra các hướng dẫn và tiện ích mở rộng hữu ích. -> 💡 **Mẹo bắt đầu**: Bắt đầu với Visual Studio Code – nó miễn phí, được sử dụng rộng rãi trong ngành, và có một cộng đồng lớn tạo ra các hướng dẫn và tiện ích mở rộng hữu ích. +### Trình Duyệt Web: Phòng Thí Nghiệm Phát Triển Bí Mật Của Bạn -### Trình duyệt web: Phòng thí nghiệm phát triển bí mật của bạn +Okay, hãy chuẩn bị để tâm trí bạn bị thổi bay hoàn toàn! Bạn biết là bạn đã dùng trình duyệt để lướt mạng xã hội và xem video, đúng không? Thì hóa ra chúng đã giấu một phòng thí nghiệm phát triển tuyệt vời ngay trong đó suốt thời gian qua, chỉ chờ bạn khám phá! -Được rồi, chuẩn bị để bị hoàn toàn kinh ngạc! Bạn biết cách bạn đã sử dụng trình duyệt để lướt mạng xã hội và xem video? Chà, hóa ra chúng đã giấu một phòng thí nghiệm phát triển bí mật tuyệt vời này suốt thời gian qua, chỉ chờ bạn khám phá! - -Mỗi lần bạn nhấp chuột phải vào một trang web và chọn "Inspect Element," bạn đang mở ra một thế giới ẩn của các công cụ dành cho nhà phát triển mà thực sự mạnh mẽ hơn một số phần mềm đắt tiền mà tôi từng trả hàng trăm đô la để sử dụng. Nó giống như phát hiện ra rằng nhà bếp bình thường của bạn đang che giấu một phòng thí nghiệm của đầu bếp chuyên nghiệp sau một tấm panel bí mật! -Lần đầu tiên có người chỉ cho tôi cách sử dụng DevTools của trình duyệt, tôi đã dành khoảng ba tiếng chỉ để nhấp chuột khắp nơi và thốt lên "CHỜ ĐÃ, NÓ CÓ THỂ LÀM ĐƯỢC CẢ ĐIỀU ĐÓ SAO?!" Bạn có thể chỉnh sửa bất kỳ trang web nào trong thời gian thực, xem chính xác tốc độ tải của mọi thứ, kiểm tra cách trang web của bạn hiển thị trên các thiết bị khác nhau, và thậm chí debug JavaScript như một chuyên gia thực thụ. Thật sự là quá tuyệt vời! +Mỗi lần bạn nhấp chuột phải lên trang web và chọn "Inspect Element" (Kiểm tra phần tử), bạn đang mở ra một thế giới công cụ dành cho nhà phát triển thật sự mạnh mẽ, thậm chí còn hơn cả phần mềm đắt tiền mà tôi từng trả hàng trăm đô la để mua. Giống như phát hiện ra căn bếp cũ kỹ của bạn đã giấu một phòng thí nghiệm đầu bếp chuyên nghiệp phía sau một cánh cửa bí mật vậy! +Lần đầu tiên ai đó chỉ cho tôi DevTools trình duyệt, tôi đã dành khoảng ba tiếng chỉ để nhấp chuột quanh và nói "CHỜ ĐÃ, NÓ CÒN LÀM ĐƯỢC VIỆC ĐÓ SAO?!" Bạn có thể chỉnh sửa bất kỳ trang web nào trong thời gian thực, xem chính xác mọi thứ tải nhanh đến mức nào, kiểm tra xem trang web của bạn trông như thế nào trên các thiết bị khác nhau, và thậm chí gỡ lỗi JavaScript như một chuyên gia thực thụ. Thật sự rất kinh ngạc! **Đây là lý do tại sao trình duyệt là vũ khí bí mật của bạn:** -Khi bạn tạo một trang web hoặc ứng dụng web, bạn cần xem nó trông như thế nào và hoạt động ra sao trong thế giới thực. Trình duyệt không chỉ hiển thị công việc của bạn mà còn cung cấp phản hồi chi tiết về hiệu suất, khả năng truy cập và các vấn đề tiềm ẩn. +Khi bạn tạo một trang web hoặc ứng dụng web, bạn cần xem nó trông và hoạt động như thế nào trong thế giới thực. Trình duyệt không chỉ hiển thị tác phẩm của bạn mà còn cung cấp phản hồi chi tiết về hiệu suất, khả năng truy cập và các vấn đề tiềm ẩn. -#### Công cụ dành cho nhà phát triển của trình duyệt (DevTools) +#### Công Cụ Phát Triển Trình Duyệt (DevTools) -Các trình duyệt hiện đại bao gồm các bộ công cụ phát triển toàn diện: +Các trình duyệt hiện đại bao gồm bộ công cụ phát triển toàn diện: -| Loại công cụ | Chức năng | Ví dụ sử dụng | -|--------------|-----------|---------------| +| Danh Mục Công Cụ | Công Việc Của Nó | Ví Dụ Sử Dụng | +|------------------|------------------|----------------| | **Element Inspector** | Xem và chỉnh sửa HTML/CSS trong thời gian thực | Điều chỉnh kiểu dáng để thấy kết quả ngay lập tức | -| **Console** | Xem thông báo lỗi và thử nghiệm JavaScript | Debug vấn đề và thử nghiệm mã | -| **Network Monitor** | Theo dõi cách tài nguyên được tải | Tối ưu hóa hiệu suất và thời gian tải | -| **Accessibility Checker** | Kiểm tra thiết kế toàn diện | Đảm bảo trang web của bạn hoạt động cho mọi người dùng | +| **Console** | Xem lỗi và thử nghiệm JavaScript | Gỡ lỗi và thử nghiệm mã | +| **Network Monitor** | Theo dõi cách các tài nguyên được tải | Tối ưu hiệu suất và thời gian tải | +| **Accessibility Checker** | Kiểm tra thiết kế bao gồm | Đảm bảo trang web hoạt động cho tất cả người dùng | | **Device Simulator** | Xem trước trên các kích thước màn hình khác nhau | Kiểm tra thiết kế đáp ứng mà không cần nhiều thiết bị | -#### Trình duyệt được khuyến nghị cho phát triển +#### Trình Duyệt Được Khuyên Dùng Cho Phát Triển - **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools tiêu chuẩn ngành với tài liệu phong phú -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Công cụ CSS Grid và kiểm tra khả năng truy cập xuất sắc -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Dựa trên Chromium với tài nguyên dành cho nhà phát triển của Microsoft +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Công cụ CSS Grid và truy cập tuyệt vời +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Dựa trên Chromium với tài nguyên phát triển của Microsoft + +> ⚠️ **Mẹo Kiểm Tra Quan Trọng**: Luôn kiểm tra trang web trên nhiều trình duyệt! Điều gì hoạt động hoàn hảo trên Chrome có thể trông khác trên Safari hoặc Firefox. Các nhà phát triển chuyên nghiệp luôn kiểm tra trên tất cả các trình duyệt chính để đảm bảo trải nghiệm người dùng nhất quán. -> ⚠️ **Mẹo kiểm tra quan trọng**: Luôn kiểm tra trang web của bạn trên nhiều trình duyệt! Những gì hoạt động hoàn hảo trên Chrome có thể hiển thị khác trên Safari hoặc Firefox. Các nhà phát triển chuyên nghiệp kiểm tra trên tất cả các trình duyệt chính để đảm bảo trải nghiệm người dùng nhất quán. -### Công cụ dòng lệnh: Cánh cửa dẫn đến siêu năng lực của nhà phát triển +### Công Cụ Dòng Lệnh: Cánh Cửa Đến Siêu Năng Lực Nhà Phát Triển -Được rồi, hãy có một khoảnh khắc hoàn toàn trung thực về dòng lệnh, vì tôi muốn bạn nghe điều này từ một người thực sự hiểu. Lần đầu tiên tôi nhìn thấy nó – chỉ là một màn hình đen đáng sợ với văn bản nhấp nháy – tôi thực sự nghĩ, "Không, chắc chắn không! Điều này trông giống như thứ gì đó trong một bộ phim hacker thập niên 1980, và tôi chắc chắn không đủ thông minh để làm điều này!" 😅 +Được rồi, chúng ta hãy thành thật một chút về dòng lệnh, bởi tôi muốn bạn nghe điều này từ người thật sự hiểu nó. Lần đầu tôi thấy nó – chỉ là một màn hình đen đáng sợ với dòng chữ nhấp nháy – tôi thực sự nghĩ, "Không đâu, tuyệt đối không! Nó trông giống như phim hacker thập niên 1980, và tôi chắc chắn không đủ thông minh để dùng!" 😅 -Nhưng đây là điều tôi ước ai đó đã nói với tôi lúc đó, và điều tôi đang nói với bạn ngay bây giờ: dòng lệnh không đáng sợ – thực ra nó giống như đang có một cuộc trò chuyện trực tiếp với máy tính của bạn. Hãy nghĩ về nó như sự khác biệt giữa việc đặt đồ ăn qua một ứng dụng sang trọng với hình ảnh và menu (rất tiện lợi) so với việc bước vào nhà hàng yêu thích của bạn, nơi đầu bếp biết chính xác bạn thích gì và có thể làm ra một món hoàn hảo chỉ bằng cách bạn nói "hãy làm tôi ngạc nhiên với một thứ gì đó tuyệt vời." +Nhưng đây là điều tôi ước ai đó đã nói với tôi lúc ấy, và tôi đang nói với bạn ngay bây giờ: dòng lệnh không đáng sợ – nó thực sự giống như bạn đang nói chuyện trực tiếp với máy tính của mình. Hãy nghĩ nó như sự khác biệt giữa việc đặt đồ ăn qua một ứng dụng đẹp mắt với hình ảnh và menu (dễ dùng) so với bước vào nhà hàng yêu thích nơi đầu bếp biết chính xác bạn thích gì và có thể làm một món hoàn hảo chỉ bằng câu "hãy tạo điều bất ngờ cho tôi." -Dòng lệnh là nơi các nhà phát triển cảm thấy như những phù thủy thực thụ. Bạn gõ vài từ có vẻ như phép thuật (được rồi, chúng chỉ là các lệnh, nhưng chúng cảm giác như phép thuật!), nhấn enter, và BÙM – bạn đã tạo ra toàn bộ cấu trúc dự án, cài đặt các công cụ mạnh mẽ từ khắp nơi trên thế giới, hoặc triển khai ứng dụng của bạn lên internet cho hàng triệu người xem. Một khi bạn nếm thử sức mạnh đó lần đầu tiên, nó thực sự khá gây nghiện! +Dòng lệnh là nơi các nhà phát triển cảm thấy mình như những phù thủy thực thụ. Bạn gõ vài từ mang vẻ ma thuật (được rồi, thực chất chỉ là các lệnh, nhưng cảm giác như ma thuật!), nhấn enter, và BÙM – bạn đã tạo ra cấu trúc dự án, cài đặt công cụ mạnh mẽ từ khắp nơi trên thế giới, hoặc triển khai ứng dụng lên internet cho hàng triệu người xem. Khi bạn thử nếm cảm giác đó lần đầu, thực sự rất dễ gây nghiện! **Tại sao dòng lệnh sẽ trở thành công cụ yêu thích của bạn:** -Trong khi giao diện đồ họa rất tuyệt vời cho nhiều tác vụ, dòng lệnh vượt trội về tự động hóa, độ chính xác và tốc độ. Nhiều công cụ phát triển hoạt động chủ yếu thông qua giao diện dòng lệnh, và học cách sử dụng chúng hiệu quả có thể cải thiện đáng kể năng suất của bạn. +Mặc dù giao diện đồ họa rất hữu ích cho nhiều nhiệm vụ, dòng lệnh vượt trội về tự động hóa, chính xác và tốc độ. Nhiều công cụ phát triển hoạt động chủ yếu qua giao diện dòng lệnh, và học cách dùng hiệu quả chúng có thể cải thiện đáng kể năng suất của bạn. ```bash -# Step 1: Create and navigate to project directory +# Bước 1: Tạo và chuyển đến thư mục dự án mkdir my-awesome-website cd my-awesome-website ``` -**Đoạn mã này làm gì:** -- **Tạo** một thư mục mới có tên "my-awesome-website" cho dự án của bạn -- **Chuyển đến** thư mục vừa tạo để bắt đầu làm việc +**Đây là những gì đoạn mã này làm:** +- **Tạo** thư mục mới có tên "my-awesome-website" cho dự án của bạn +- **Chuyển đến** thư mục mới tạo để bắt đầu làm việc ```bash -# Step 2: Initialize project with package.json +# Bước 2: Khởi tạo dự án với package.json npm init -y -# Install modern development tools +# Cài đặt công cụ phát triển hiện đại npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` **Từng bước, đây là những gì đang diễn ra:** -- **Khởi tạo** một dự án Node.js mới với cài đặt mặc định bằng `npm init -y` -- **Cài đặt** Vite như một công cụ build hiện đại cho phát triển nhanh và build sản phẩm -- **Thêm** Prettier để định dạng mã tự động và ESLint để kiểm tra chất lượng mã -- **Sử dụng** cờ `--save-dev` để đánh dấu đây là các phụ thuộc chỉ dành cho phát triển +- **Khởi tạo** một dự án Node.js mới với thiết lập mặc định bằng `npm init -y` +- **Cài đặt** Vite như một công cụ xây dựng hiện đại cho phát triển nhanh và xây dựng sản xuất +- **Thêm** Prettier để tự động định dạng mã và ESLint để kiểm tra chất lượng mã +- **Sử dụng** cờ `--save-dev` để đánh dấu chúng chỉ là phụ thuộc cho phát triển ```bash -# Step 3: Create project structure and files +# Bước 3: Tạo cấu trúc dự án và các tệp mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Khởi động máy chủ phát triển npx vite ``` -**Trong đoạn trên, chúng ta đã:** -- **Tổ chức** dự án bằng cách tạo các thư mục riêng biệt cho mã nguồn và tài nguyên +**Trong phần trên, chúng ta đã:** +- **Tổ chức** dự án bằng cách tạo các thư mục riêng cho mã nguồn và tài nguyên - **Tạo** một tệp HTML cơ bản với cấu trúc tài liệu đúng chuẩn - **Khởi động** máy chủ phát triển Vite để tải lại trực tiếp và thay thế module nóng -#### Công cụ dòng lệnh thiết yếu cho phát triển web +#### Công Cụ Dòng Lệnh Thiết Yếu Cho Phát Triển Web -| Công cụ | Mục đích | Tại sao bạn cần nó | -|---------|----------|---------------------| -| **[Git](https://git-scm.com/)** | Quản lý phiên bản | Theo dõi thay đổi, cộng tác với người khác, sao lưu công việc của bạn | -| **[Node.js & npm](https://nodejs.org/)** | Runtime JavaScript & quản lý gói | Chạy JavaScript ngoài trình duyệt, cài đặt các công cụ phát triển hiện đại | -| **[Vite](https://vitejs.dev/)** | Công cụ build & máy chủ phát triển | Phát triển nhanh với thay thế module nóng | -| **[ESLint](https://eslint.org/)** | Chất lượng mã | Tự động tìm và sửa lỗi trong JavaScript của bạn | -| **[Prettier](https://prettier.io/)** | Định dạng mã | Giữ mã của bạn được định dạng và dễ đọc một cách nhất quán | +| Công Cụ | Mục Đích | Lý Do Bạn Cần Nó | +|---------|----------|------------------| +| **[Git](https://git-scm.com/)** | Quản lý phiên bản | Theo dõi thay đổi, hợp tác với người khác, sao lưu công việc | +| **[Node.js & npm](https://nodejs.org/)** | Môi trường chạy JavaScript & quản lý gói | Chạy JavaScript ngoài trình duyệt, cài công cụ phát triển hiện đại | +| **[Vite](https://vitejs.dev/)** | Công cụ xây dựng & máy chủ phát triển | Phát triển siêu nhanh với thay thế module nóng | +| **[ESLint](https://eslint.org/)** | Chất lượng mã | Tự động tìm và sửa lỗi trong JavaScript | +| **[Prettier](https://prettier.io/)** | Định dạng mã | Giữ mã đẹp, nhất quán và dễ đọc | -#### Tùy chọn theo hệ điều hành +#### Lựa Chọn Theo Nền Tảng **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal hiện đại, giàu tính năng -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Môi trường scripting mạnh mẽ -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Dòng lệnh truyền thống của Windows +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal hiện đại, đa tính năng +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Môi trường lập trình mạnh mẽ +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Dòng lệnh truyền thống trên Windows **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Ứng dụng terminal tích hợp sẵn -- **[iTerm2](https://iterm2.com/)** - Terminal nâng cao với các tính năng tiên tiến +- **[iTerm2](https://iterm2.com/)** - Terminal nâng cao với nhiều tính năng **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Shell tiêu chuẩn của Linux -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Trình giả lập terminal tiên tiến +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Bộ giả lập terminal nâng cao + +> 💻 = Đã cài sẵn trên hệ điều hành -> 💻 = Được cài đặt sẵn trên hệ điều hành +> 🎯 **Lộ Trình Học Tập**: Bắt đầu với các lệnh cơ bản như `cd` (đổi thư mục), `ls` hoặc `dir` (liệt kê file), và `mkdir` (tạo thư mục). Thực hành với các lệnh quy trình làm việc hiện đại như `npm install`, `git status`, và `code .` (mở thư mục hiện tại trong VS Code). Khi bạn quen hơn, bạn sẽ tự nhiên học được nhiều lệnh nâng cao và kỹ thuật tự động hóa. -> 🎯 **Lộ trình học tập**: Bắt đầu với các lệnh cơ bản như `cd` (chuyển thư mục), `ls` hoặc `dir` (liệt kê tệp), và `mkdir` (tạo thư mục). Thực hành với các lệnh trong quy trình làm việc hiện đại như `npm install`, `git status`, và `code .` (mở thư mục hiện tại trong VS Code). Khi bạn trở nên thoải mái hơn, bạn sẽ tự nhiên học thêm các lệnh nâng cao và kỹ thuật tự động hóa. -### Tài liệu: Người thầy luôn sẵn sàng của bạn +### Tài Liệu: Người Thầy Luôn Có Bên Bạn -Được rồi, để tôi chia sẻ một bí mật nhỏ sẽ khiến bạn cảm thấy tốt hơn khi là người mới bắt đầu: ngay cả những nhà phát triển có kinh nghiệm nhất cũng dành một phần lớn thời gian của họ để đọc tài liệu. Và đó không phải vì họ không biết mình đang làm gì – thực ra đó là dấu hiệu của sự khôn ngoan! +Được rồi, để tôi chia sẻ một bí mật nhỏ sẽ khiến bạn cảm thấy dễ chịu hơn rất nhiều khi là người mới: ngay cả những nhà phát triển giàu kinh nghiệm nhất cũng dành phần lớn thời gian của họ để đọc tài liệu. Và điều đó không phải vì họ không biết họ đang làm gì – mà đó là dấu hiệu của sự khôn ngoan! -Hãy nghĩ về tài liệu như việc bạn có quyền truy cập vào những người thầy kiên nhẫn và hiểu biết nhất thế giới, luôn sẵn sàng 24/7. Gặp khó khăn vào lúc 2 giờ sáng? Tài liệu sẽ ở đó với một cái ôm ảo ấm áp và chính xác câu trả lời bạn cần. Muốn tìm hiểu về một tính năng mới thú vị mà mọi người đang nói đến? Tài liệu sẽ hỗ trợ bạn với các ví dụ từng bước. Đang cố gắng hiểu tại sao một thứ hoạt động theo cách nó hoạt động? Đúng vậy – tài liệu sẵn sàng giải thích theo cách khiến bạn cuối cùng hiểu ra! +Hãy nghĩ tài liệu như việc bạn có quyền truy cập vào những giáo viên kiên nhẫn, hiểu biết nhất thế giới, luôn sẵn sàng 24/7. Bị kẹt vào một vấn đề lúc 2 giờ sáng? Tài liệu ở đó với vòng tay ảo ấm áp và câu trả lời bạn cần. Muốn học về một tính năng mới kì diệu mà mọi người đang nói tới? Tài liệu hỗ trợ bạn với ví dụ từng bước. Cố gắng hiểu tại sao một thứ lại hoạt động như thế? Bạn đoán đúng rồi – tài liệu sẵn sàng giải thích một cách khiến bạn “bừng tỉnh”! -Đây là điều đã hoàn toàn thay đổi quan điểm của tôi: thế giới phát triển web di chuyển cực kỳ nhanh, và không ai (ý tôi là hoàn toàn không ai!) ghi nhớ mọi thứ. Tôi đã thấy các nhà phát triển cấp cao với hơn 15 năm kinh nghiệm tra cứu cú pháp cơ bản, và bạn biết không? Điều đó không đáng xấu hổ – đó là thông minh! Không phải về việc có trí nhớ hoàn hảo; mà là biết nơi tìm câu trả lời đáng tin cậy nhanh chóng và hiểu cách áp dụng chúng. +Có điều đã hoàn toàn thay đổi cách nhìn của tôi: thế giới phát triển web thay đổi cực kỳ nhanh, và không ai (tôi nhấn mạnh, KHÔNG AI!) nhớ hết mọi thứ. Tôi đã thấy các nhà phát triển cao cấp với hơn 15 năm kinh nghiệm vẫn phải tra cứu cú pháp cơ bản, và bạn biết không? Điều đó không xấu hổ – đó là thông minh! Không phải về trí nhớ hoàn hảo; mà là biết nơi để tìm câu trả lời đáng tin cậy nhanh chóng và hiểu cách áp dụng chúng. -**Đây là nơi phép thuật thực sự xảy ra:** +**Đây mới là nơi phép màu thực sự xảy ra:** -Các nhà phát triển chuyên nghiệp dành một phần đáng kể thời gian của họ để đọc tài liệu – không phải vì họ không biết mình đang làm gì, mà vì lĩnh vực phát triển web tiến hóa nhanh đến mức việc cập nhật đòi hỏi học tập liên tục. Tài liệu tuyệt vời giúp bạn hiểu không chỉ *cách* sử dụng một thứ, mà còn *tại sao* và *khi nào* nên sử dụng nó. +Các nhà phát triển chuyên nghiệp dành phần lớn thời gian của họ để đọc tài liệu – không phải vì họ không biết làm, mà vì môi trường phát triển web thay đổi liên tục, cần học tập liên tục để cập nhật. Tài liệu tuyệt vời giúp bạn hiểu không chỉ *cách* dùng mà còn *tại sao* và *khi nào* dùng. -#### Tài nguyên tài liệu thiết yếu +#### Tài Nguyên Tài Liệu Thiết Yếu **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** - Tiêu chuẩn vàng cho tài liệu công nghệ web -- Hướng dẫn toàn diện về HTML, CSS và JavaScript +- Hướng dẫn toàn diện cho HTML, CSS và JavaScript - Bao gồm thông tin tương thích trình duyệt -- Có các ví dụ thực tế và demo tương tác +- Có ví dụ thực tế và demo tương tác -**[Web.dev](https://web.dev)** (bởi Google) -- Các thực hành tốt nhất về phát triển web hiện đại -- Hướng dẫn tối ưu hóa hiệu suất -- Nguyên tắc thiết kế toàn diện và bao gồm -- Các nghiên cứu điển hình từ các dự án thực tế +**[Web.dev](https://web.dev)** (của Google) +- Thực hành phát triển web hiện đại nhất +- Hướng dẫn tối ưu hiệu suất +- Nguyên tắc truy cập và thiết kế bao gồm +- Nghiên cứu trường hợp từ dự án thực tế **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Tài nguyên phát triển trình duyệt Edge -- Hướng dẫn về Progressive Web App -- Thông tin phát triển đa nền tảng +- Hướng dẫn Progressive Web App +- Góc nhìn phát triển đa nền tảng **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Chương trình học có cấu trúc -- Các khóa học video từ các chuyên gia trong ngành +- Lộ trình học tập có cấu trúc +- Khóa học video từ chuyên gia ngành - Bài tập mã hóa thực hành -> 📚 **Chiến lược học tập**: Đừng cố gắng ghi nhớ tài liệu – thay vào đó, hãy học cách điều hướng nó một cách hiệu quả. Đánh dấu các tài liệu tham khảo thường dùng và thực hành sử dụng chức năng tìm kiếm để tìm thông tin cụ thể nhanh chóng. +> 📚 **Chiến Lược Học Tập**: Đừng cố ghi nhớ tài liệu – thay vào đó, học cách điều hướng hiệu quả. Đánh dấu các tham khảo thường dùng và tập sử dụng chức năng tìm kiếm để nhanh chóng tìm thông tin cụ thể. -### 🔧 **Kiểm tra sự thành thạo công cụ: Điều gì khiến bạn hứng thú?** +### 🔧 **Kiểm Tra Thành Thạo Công Cụ: Điều Nào Gây Ấn Tượng Với Bạn?** -**Hãy dành một chút thời gian để suy nghĩ:** -- Công cụ nào khiến bạn hào hứng muốn thử đầu tiên? (Không có câu trả lời sai!) -- Dòng lệnh vẫn còn cảm giác đáng sợ, hay bạn đã tò mò về nó? -- Bạn có thể tưởng tượng sử dụng DevTools của trình duyệt để khám phá phía sau màn hình của các trang web yêu thích của mình không? +**Hãy dành chút thời gian suy nghĩ:** +- Công cụ nào bạn háo hức thử đầu tiên? (Không có đáp án sai đâu!) +- Dòng lệnh còn khiến bạn sợ hãi, hay bạn bắt đầu tò mò về nó? +- Bạn có thể tưởng tượng dùng DevTools trình duyệt để nhìn “đằng sau bức màn” của các trang web yêu thích? ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "Thời Gian Nhà Phát Triển Dành Cho Công Cụ" + "Trình Soạn Thảo Mã" : 40 + "Kiểm Tra Trình Duyệt" : 25 + "Dòng Lệnh" : 15 + "Đọc Tài Liệu" : 15 + "Gỡ Lỗi" : 5 ``` +> **Một hiểu biết thú vị**: Hầu hết các nhà phát triển dành khoảng 40% thời gian trong trình soạn thảo mã, nhưng hãy chú ý mức độ thời gian dành cho việc kiểm thử, học hỏi, và giải quyết vấn đề. Lập trình không chỉ là viết mã – mà là tạo ra trải nghiệm! -> **Thông tin thú vị**: Hầu hết các nhà phát triển dành khoảng 40% thời gian của họ trong trình soạn thảo mã, nhưng hãy chú ý đến lượng thời gian dành cho việc kiểm tra, học tập và giải quyết vấn đề. Lập trình không chỉ là viết mã – mà còn là tạo ra những trải nghiệm! +✅ **Món ăn cho suy nghĩ**: Đây là một điều thú vị để suy ngẫm – bạn nghĩ công cụ để xây dựng trang web (phát triển) có thể khác công cụ để thiết kế giao diện (thiết kế) như thế nào? Nó giống như sự khác biệt giữa kiến trúc sư thiết kế một ngôi nhà đẹp và nhà thầu xây dựng nó. Cả hai đều quan trọng nhưng cần bộ công cụ khác nhau! Cách suy nghĩ này sẽ giúp bạn thấy tổng thể cách mà các trang web được tạo ra. -✅ **Suy ngẫm**: Đây là một điều thú vị để suy nghĩ – bạn nghĩ các công cụ để xây dựng trang web (phát triển) khác với các công cụ để thiết kế giao diện của chúng (thiết kế) như thế nào? Nó giống như sự khác biệt giữa việc là một kiến trúc sư thiết kế một ngôi nhà đẹp và người thợ xây dựng thực sự ngôi nhà đó. Cả hai đều rất quan trọng, nhưng họ cần những bộ công cụ khác nhau! Kiểu suy nghĩ này sẽ thực sự giúp bạn nhìn thấy bức tranh lớn hơn về cách các trang web được tạo ra. +## Thử Thách GitHub Copilot Agent 🚀 -## Thử thách GitHub Copilot Agent 🚀 +Dùng chế độ Agent để hoàn thành thử thách sau: -Sử dụng chế độ Agent để hoàn thành thử thách sau: +**Mô tả:** Khám phá các tính năng của một trình soạn thảo mã hoặc IDE hiện đại và trình bày cách nó cải thiện quy trình làm việc của bạn như một nhà phát triển web. -**Mô tả:** Khám phá các tính năng của một trình soạn thảo mã hoặc IDE hiện đại và chứng minh cách nó có thể cải thiện quy trình làm việc của bạn như một nhà phát triển web. - -**Yêu cầu:** Chọn một trình soạn thảo mã hoặc IDE (như Visual Studio Code, WebStorm, hoặc một IDE dựa trên đám mây). Liệt kê ba tính năng hoặc tiện ích mở rộng giúp bạn viết, debug, hoặc duy trì mã hiệu quả hơn. Đối với mỗi tính năng, cung cấp một giải thích ngắn gọn về cách nó mang lại lợi ích cho quy trình làm việc của bạn. +**Yêu cầu:** Chọn một trình soạn thảo mã hoặc IDE (như Visual Studio Code, WebStorm, hoặc IDE trên đám mây). Liệt kê ba tính năng hoặc tiện ích mở rộng giúp bạn viết, gỡ lỗi, hoặc duy trì mã hiệu quả hơn. Với mỗi tính năng, cung cấp giải thích ngắn gọn về lợi ích của nó đối với quy trình làm việc của bạn. --- -## 🚀 Thử thách +## 🚀 Thử Thách -**Được rồi, thám tử, sẵn sàng cho vụ án đầu tiên của bạn chưa?** +**Được rồi, thám tử, sẵn sàng cho vụ án đầu tiên chưa?** -Bây giờ bạn đã có nền tảng tuyệt vời này, tôi có một cuộc phiêu lưu sẽ giúp bạn thấy thế giới lập trình đa dạng và hấp dẫn đến mức nào. Và nghe này – đây không phải là về việc viết mã ngay bây giờ, nên không có áp lực gì cả! Hãy nghĩ về mình như một thám tử ngôn ngữ lập trình trong vụ án thú vị đầu tiên của bạn! +Bây giờ bạn đã có nền tảng tuyệt vời này, tôi có một cuộc phiêu lưu sẽ giúp bạn thấy thế giới lập trình đa dạng và hấp dẫn đến mức nào. Và nghe này – đây không phải lúc viết mã đâu, nên đừng áp lực! Hãy xem bạn là một thám tử ngôn ngữ lập trình trong vụ án đầu tiên đầy thú vị! -**Nhiệm vụ của bạn, nếu bạn chọn chấp nhận:** -1. **Trở thành nhà thám hiểm ngôn ngữ**: Chọn ba ngôn ngữ lập trình từ ba lĩnh vực hoàn toàn khác nhau – có thể một ngôn ngữ xây dựng trang web, một ngôn ngữ tạo ứng dụng di động, và một ngôn ngữ xử lý dữ liệu cho các nhà khoa học. Tìm ví dụ về cùng một nhiệm vụ đơn giản được viết bằng mỗi ngôn ngữ. Tôi hứa bạn sẽ hoàn toàn ngạc nhiên về cách chúng có thể trông khác nhau trong khi làm cùng một việc! +**Nhiệm vụ của bạn, nếu bạn nhận nó:** +1. **Trở thành nhà thám hiểm ngôn ngữ**: Chọn ba ngôn ngữ lập trình từ các vũ trụ hoàn toàn khác nhau – có thể một ngôn ngữ xây dựng trang web, một ngôn ngữ tạo ứng dụng di động, và một ngôn ngữ phân tích dữ liệu cho nhà khoa học. Tìm ví dụ về cùng một nhiệm vụ đơn giản viết bằng từng ngôn ngữ. Tôi hứa bạn sẽ ngạc nhiên khi thấy sự khác biệt trong cách họ làm cùng một việc! -2. **Khám phá câu chuyện nguồn gốc của chúng**: Điều gì làm cho mỗi ngôn ngữ trở nên đặc biệt? Đây là một sự thật thú vị – mỗi ngôn ngữ lập trình đều được tạo ra vì ai đó nghĩ, "Bạn biết không? Phải có cách tốt hơn để giải quyết vấn đề cụ thể này." Bạn có thể tìm ra những vấn đề đó là gì không? Một số câu chuyện này thực sự rất hấp dẫn! +2. **Khám phá câu chuyện nguồn gốc**: Điều gì làm mỗi ngôn ngữ trở nên đặc biệt? Đây là điều thú vị – mỗi ngôn ngữ lập trình được tạo ra bởi ai đó nghĩ, "Bạn biết không? Phải có cách tốt hơn để giải quyết vấn đề cụ thể này." Bạn có thể tìm hiểu những vấn đề đó là gì? Một số câu chuyện rất hấp dẫn! -3. **Gặp gỡ cộng đồng của chúng**: Tìm hiểu cách mỗi cộng đồng ngôn ngữ chào đón và đam mê. Một số có hàng triệu nhà phát triển chia sẻ kiến thức và giúp đỡ lẫn nhau, những cộng đồng khác nhỏ hơn nhưng cực kỳ gắn kết và hỗ trợ. Bạn sẽ thích thấy những tính cách khác nhau mà các cộng đồng này có! +3. **Gặp gỡ cộng đồng**: Xem cộng đồng của từng ngôn ngữ ấm áp và nhiệt huyết thế nào. Có những cộng đồng triệu nhà phát triển chia sẻ kiến thức và giúp đỡ lẫn nhau, có những cộng đồng nhỏ hơn nhưng gắn kết và hỗ trợ tuyệt vời. Bạn sẽ thích xem phong cách cá tính khác biệt của từng cộng đồng! -4. **Lắng nghe cảm giác của bạn**: Ngôn ngữ nào cảm thấy dễ tiếp cận nhất với bạn ngay bây giờ? Đừng lo lắng về việc đưa ra lựa chọn "hoàn hảo" – chỉ cần lắng nghe bản năng của bạn! Thực sự không có câu trả lời sai ở đây, và bạn luôn có thể khám phá các ngôn ngữ khác sau này. +4. **Lắng nghe trực giác**: Ngôn ngữ nào bạn thấy dễ tiếp cận nhất ngay lúc này? Đừng căng thẳng phải chọn "hoàn hảo" – chỉ cần nghe theo cảm nhận của bạn! Thật ra không có đáp án sai, và bạn luôn có thể khám phá các ngôn ngữ khác sau này. -**Công việc thám tử bổ sung**: Xem liệu bạn có thể khám phá những trang web hoặc ứng dụng lớn nào được xây dựng bằng mỗi ngôn ngữ. Tôi đảm bảo bạn sẽ ngạc nhiên khi biết điều gì đang vận hành Instagram, Netflix, hoặc trò chơi di động mà bạn không thể ngừng chơi! +**Công việc thám tử bổ sung**: Tìm hiểu xem những trang web hoặc ứng dụng lớn nào được xây dựng bằng mỗi ngôn ngữ. Tôi đảm bảo bạn sẽ ngạc nhiên khi biết Instagram, Netflix hoặc trò chơi di động mà bạn không thể ngừng chơi được làm bằng ngôn ngữ nào! -> 💡 **Nhớ rằng**: Bạn không cố gắng trở thành chuyên gia trong bất kỳ ngôn ngữ nào hôm nay. Bạn chỉ đang làm quen với khu vực trước khi quyết định nơi bạn muốn đặt chân. Hãy dành thời gian, tận hưởng nó, và để sự tò mò dẫn dắt bạn! +> 💡 **Nhớ nhé**: Bạn không cần trở thành chuyên gia trong những ngôn ngữ này hôm nay. Bạn chỉ đang làm quen với khu phố trước khi quyết định chọn nơi “định cư”. Hãy dành thời gian, tận hưởng, và để sự tò mò dẫn đường! -## Hãy ăn mừng những gì bạn đã khám phá! +## Hãy Ăn Mừng Những Điều Bạn Khám Phá! -Trời ơi, hôm nay bạn đã tiếp thu rất nhiều thông tin tuyệt vời! Tôi thực sự háo hức muốn thấy bạn đã học được bao nhiêu từ hành trình tuyệt vời này. Và nhớ rằng – đây không phải là một bài kiểm tra mà bạn cần phải làm mọi thứ hoàn hảo. Đây giống như một lễ kỷ niệm về tất cả những điều thú vị bạn đã học được về thế giới hấp dẫn mà bạn sắp bước vào! +Wow, bạn đã hấp thụ rất nhiều thông tin tuyệt vời hôm nay! Tôi thực sự rất hào hứng xem bạn ghi nhớ được bao nhiêu trong hành trình tuyệt vời này. Và nhớ nhé – đây không phải bài kiểm tra phải làm hoàn hảo mọi thứ. Đây là buổi lễ ăn mừng tất cả những điều thú vị bạn học được về thế giới hấp dẫn mà bạn sắp bước vào! [Tham gia bài kiểm tra sau bài học](https://ff-quizzes.netlify.app/web/) -## Ôn tập & Tự học -**Hãy dành thời gian khám phá và tận hưởng nhé!** +## Ôn Tập & Học Tự Luận -Bạn đã học được rất nhiều hôm nay, và đó là điều đáng tự hào! Bây giờ là phần thú vị – khám phá những chủ đề khiến bạn tò mò. Nhớ rằng, đây không phải là bài tập về nhà – mà là một cuộc phiêu lưu! +**Hãy dành thời gian khám phá và vui vẻ với nó!** +Bạn đã khám phá rất nhiều điều hôm nay, và đó là điều mà bạn nên tự hào! Giờ đến phần thú vị nhất – khám phá những chủ đề đã khơi dậy sự tò mò của bạn. Hãy nhớ, đây không phải bài tập về nhà – mà là một cuộc phiêu lưu! -**Khám phá sâu hơn những gì khiến bạn hứng thú:** +**Đi sâu hơn vào những gì làm bạn phấn khích:** **Thực hành với các ngôn ngữ lập trình:** -- Truy cập vào các trang web chính thức của 2-3 ngôn ngữ mà bạn thấy thú vị. Mỗi ngôn ngữ đều có cá tính và câu chuyện riêng! -- Thử các nền tảng lập trình trực tuyến như [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), hoặc [Replit](https://replit.com/). Đừng ngại thử nghiệm – bạn không thể làm hỏng gì đâu! -- Đọc về cách ngôn ngữ yêu thích của bạn ra đời. Thật sự, một số câu chuyện nguồn gốc rất thú vị và sẽ giúp bạn hiểu tại sao các ngôn ngữ hoạt động như vậy. +- Ghé thăm trang web chính thức của 2-3 ngôn ngữ đã thu hút bạn. Mỗi ngôn ngữ đều có cá tính và câu chuyện riêng! +- Thử các sân chơi mã trực tuyến như [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), hoặc [Replit](https://replit.com/). Đừng ngại thử nghiệm – bạn không thể làm hỏng gì đâu! +- Đọc về nguồn gốc ra đời của ngôn ngữ yêu thích của bạn. Thật sự, một số câu chuyện nguồn gốc rất hấp dẫn và sẽ giúp bạn hiểu vì sao các ngôn ngữ lại hoạt động như vậy. -**Làm quen với các công cụ mới:** -- Tải xuống Visual Studio Code nếu bạn chưa làm – nó miễn phí và bạn sẽ thích nó! -- Dành vài phút duyệt qua thị trường Extensions. Nó giống như một cửa hàng ứng dụng cho trình chỉnh sửa mã của bạn! -- Mở công cụ Developer Tools của trình duyệt và chỉ cần nhấp xung quanh. Đừng lo lắng về việc hiểu hết – chỉ cần làm quen với những gì có ở đó. +**Làm quen với công cụ mới:** +- Tải Visual Studio Code nếu bạn chưa có – nó miễn phí và bạn sẽ thích thôi! +- Dành vài phút duyệt qua chợ Extensions. Nó giống như một cửa hàng ứng dụng dành cho trình soạn thảo code của bạn đó! +- Mở Developer Tools trên trình duyệt và thử bấm vào vài thứ. Đừng lo nếu chưa hiểu hết – chỉ cần làm quen với những gì có ở đó. **Tham gia cộng đồng:** -- Theo dõi một số cộng đồng lập trình trên [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), hoặc [GitHub](https://github.com/). Cộng đồng lập trình rất chào đón người mới! -- Xem một số video lập trình dành cho người mới bắt đầu trên YouTube. Có rất nhiều nhà sáng tạo tuyệt vời ngoài kia, những người nhớ cảm giác khi mới bắt đầu. -- Cân nhắc tham gia các buổi gặp mặt địa phương hoặc cộng đồng trực tuyến. Tin tôi đi, các lập trình viên rất thích giúp đỡ người mới! +- Theo dõi một vài cộng đồng nhà phát triển trên [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), hoặc [GitHub](https://github.com/). Cộng đồng lập trình rất thân thiện với người mới mà! +- Xem một vài video lập trình dành cho người mới trên YouTube. Có rất nhiều nhà sáng tạo tuyệt vời nhớ được cảm giác mới bắt đầu. +- Cân nhắc tham gia các buổi meetup địa phương hoặc cộng đồng trực tuyến. Tin tôi đi, các lập trình viên rất thích giúp đỡ người mới! -> 🎯 **Nghe này, đây là điều tôi muốn bạn nhớ**: Không ai mong đợi bạn trở thành một chuyên gia lập trình ngay lập tức! Hiện tại, bạn chỉ đang làm quen với thế giới tuyệt vời mà bạn sắp trở thành một phần của nó. Hãy dành thời gian, tận hưởng hành trình, và nhớ rằng – mọi lập trình viên mà bạn ngưỡng mộ đều từng ngồi đúng vị trí của bạn bây giờ, cảm thấy hào hứng và có thể hơi choáng ngợp. Điều đó hoàn toàn bình thường, và nó có nghĩa là bạn đang đi đúng hướng! +> 🎯 **Nghe này, đây là điều tôi muốn bạn nhớ**: Bạn không cần trở thành phù thủy lập trình chỉ sau một đêm! Hiện tại, bạn chỉ đang làm quen với thế giới tuyệt vời mà bạn sắp tham gia. Hãy bình tĩnh, tận hưởng hành trình, và nhớ rằng – mỗi lập trình viên tài giỏi mà bạn ngưỡng mộ cũng từng ngồi ngay chỗ bạn đang ngồi bây giờ, cảm thấy háo hức và có thể một chút choáng ngợp. Điều đó hoàn toàn bình thường, và chứng tỏ bạn đang đi đúng hướng! -## Bài tập +## Assignment -[Đọc tài liệu](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **Một chút gợi ý cho bài tập của bạn**: Tôi rất muốn thấy bạn khám phá một số công cụ mà chúng ta chưa đề cập đến! Bỏ qua các trình chỉnh sửa, trình duyệt, và công cụ dòng lệnh mà chúng ta đã nói – có cả một vũ trụ tuyệt vời của các công cụ phát triển đang chờ được khám phá. Hãy tìm những công cụ được duy trì tích cực và có cộng đồng sôi động, hữu ích (những công cụ này thường có hướng dẫn tốt nhất và những người hỗ trợ nhiệt tình khi bạn gặp khó khăn và cần một bàn tay thân thiện). +> 💡 **Một chút gợi ý cho bài tập của bạn**: Tôi rất muốn thấy bạn khám phá những công cụ mà chúng ta chưa đề cập đến! Bỏ qua các trình soạn thảo, trình duyệt và công cụ dòng lệnh mà chúng ta đã nói – có cả một vũ trụ công cụ phát triển tuyệt vời đang chờ bạn khám phá. Hãy tìm những công cụ được duy trì tích cực và có cộng đồng sôi động, thân thiện (chúng thường có các hướng dẫn tuyệt vời và những người hỗ trợ tốt nhất khi bạn gặp khó khăn và cần một bàn tay giúp đỡ). --- -## 🚀 Lộ trình hành trình lập trình của bạn +## 🚀 Timeline Hành Trình Lập Trình Của Bạn ### ⚡ **Những việc bạn có thể làm trong 5 phút tới** -- [ ] Đánh dấu trang 2-3 trang web ngôn ngữ lập trình mà bạn thấy thú vị -- [ ] Tải xuống Visual Studio Code nếu bạn chưa làm -- [ ] Mở DevTools của trình duyệt (F12) và nhấp xung quanh bất kỳ trang web nào +- [ ] Đánh dấu trang 2-3 website ngôn ngữ lập trình thu hút bạn +- [ ] Tải Visual Studio Code nếu bạn chưa có +- [ ] Mở DevTools trình duyệt (F12) và bấm thử trên bất kỳ trang web nào - [ ] Tham gia một cộng đồng lập trình (Dev.to, Reddit r/webdev, hoặc Stack Overflow) -### ⏰ **Những việc bạn có thể hoàn thành trong giờ tới** -- [ ] Hoàn thành bài kiểm tra sau bài học và suy ngẫm về câu trả lời của bạn -- [ ] Cài đặt VS Code với tiện ích GitHub Copilot -- [ ] Thử ví dụ "Hello World" trong 2 ngôn ngữ lập trình khác nhau trực tuyến -- [ ] Xem video "Một ngày của lập trình viên" trên YouTube -- [ ] Bắt đầu công việc thám tử ngôn ngữ lập trình của bạn (từ thử thách) +### ⏰ **Những việc bạn có thể hoàn thành trong giờ này** +- [ ] Hoàn thành quiz sau bài học và suy ngẫm về câu trả lời của bạn +- [ ] Cài đặt VS Code với tiện ích mở rộng GitHub Copilot +- [ ] Thử một ví dụ "Hello World" trên 2 ngôn ngữ lập trình khác nhau trực tuyến +- [ ] Xem video "Một ngày làm lập trình viên" trên YouTube +- [ ] Bắt đầu công việc thám tử ngôn ngữ lập trình của bạn (theo thử thách) ### 📅 **Cuộc phiêu lưu kéo dài một tuần của bạn** - [ ] Hoàn thành bài tập và khám phá 3 công cụ phát triển mới - [ ] Theo dõi 5 lập trình viên hoặc tài khoản lập trình trên mạng xã hội -- [ ] Thử xây dựng một thứ nhỏ trên CodePen hoặc Replit (thậm chí chỉ là "Hello, [Tên của bạn]!") -- [ ] Đọc một bài viết blog của lập trình viên về hành trình lập trình của họ -- [ ] Tham gia một buổi gặp mặt trực tuyến hoặc xem một buổi nói chuyện về lập trình +- [ ] Thử xây dựng một thứ nhỏ trên CodePen hoặc Replit (thậm chí chỉ là "Hello, [Tên Bạn]!") +- [ ] Đọc một bài blog của lập trình viên về hành trình học lập trình của họ +- [ ] Tham gia một buổi meetup trực tuyến hoặc xem một bài nói chuyện về lập trình - [ ] Bắt đầu học ngôn ngữ bạn chọn với các hướng dẫn trực tuyến -### 🗓️ **Sự biến đổi kéo dài một tháng của bạn** -- [ ] Xây dựng dự án nhỏ đầu tiên của bạn (thậm chí một trang web đơn giản cũng được tính!) -- [ ] Đóng góp cho một dự án mã nguồn mở (bắt đầu với việc sửa tài liệu) -- [ ] Hướng dẫn ai đó vừa bắt đầu hành trình lập trình của họ -- [ ] Tạo trang web portfolio của bạn dành cho lập trình viên +### 🗓️ **Biến đổi của bạn trong một tháng** +- [ ] Xây dựng dự án nhỏ đầu tiên (ngay cả một trang web đơn giản cũng được!) +- [ ] Đóng góp cho một dự án mã nguồn mở (bắt đầu với sửa lỗi tài liệu) +- [ ] Hướng dẫn ai đó mới bước vào hành trình lập trình +- [ ] Tạo trang web portfolio dành cho lập trình viên của bạn - [ ] Kết nối với các cộng đồng lập trình viên địa phương hoặc nhóm học tập -- [ ] Bắt đầu lên kế hoạch cho cột mốc học tập tiếp theo của bạn +- [ ] Bắt đầu lên kế hoạch cho cột mốc học tập tiếp theo -### 🎯 **Kiểm tra sự phản ánh cuối cùng** +### 🎯 **Kiểm tra suy ngẫm cuối cùng** -**Trước khi bạn tiếp tục, hãy dành một chút thời gian để ăn mừng:** -- Điều gì về lập trình khiến bạn hào hứng hôm nay? +**Trước khi tiếp tục, hãy dành chút thời gian ăn mừng:** +- Điều gì về lập trình đã làm bạn hào hứng hôm nay? - Công cụ hoặc khái niệm nào bạn muốn khám phá đầu tiên? -- Bạn cảm thấy thế nào về việc bắt đầu hành trình lập trình này? -- Một câu hỏi bạn muốn hỏi một lập trình viên ngay bây giờ là gì? +- Bạn cảm thấy thế nào khi bắt đầu hành trình lập trình này? +- Câu hỏi nào bạn muốn hỏi một lập trình viên ngay lúc này? ```mermaid journey - title Your Confidence Building Journey - section Today + title Hành Trình Xây Dựng Sự Tự Tin Của Bạn + section Hôm Nay Curious: 3: You Overwhelmed: 4: You Excited: 5: You - section This Week + section Tuần Này Exploring: 4: You Learning: 5: You Connecting: 4: You - section Next Month + section Tháng Sau Building: 5: You Confident: 5: You Helping Others: 5: You ``` - -> 🌟 **Nhớ nhé**: Mọi chuyên gia đều từng là người mới bắt đầu. Mọi lập trình viên cấp cao đều từng cảm thấy giống hệt như bạn bây giờ – hào hứng, có thể hơi choáng ngợp, và chắc chắn tò mò về những gì có thể. Bạn đang ở trong một cộng đồng tuyệt vời, và hành trình này sẽ rất tuyệt vời. Chào mừng bạn đến với thế giới lập trình tuyệt vời! 🎉 +> 🌟 **Hãy nhớ**: Mọi chuyên gia đều từng là người mới. Mọi lập trình viên cấp cao đều đã từng cảm thấy chính xác như bạn bây giờ – phấn khích, có thể hơi choáng ngợp, và chắc chắn tò mò về những điều có thể làm được. Bạn đang ở trong một cộng đồng tuyệt vời, và hành trình này sẽ rất tuyệt vời. Chào mừng bạn đến với thế giới kỳ diệu của lập trình! 🎉 --- -**Tuyên bố miễn trừ trách nhiệm**: -Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính xác nhất. Đối với thông tin quan trọng, chúng tôi khuyến nghị sử dụng dịch vụ dịch thuật chuyên nghiệp từ con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này. \ No newline at end of file + +**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, vui lòng 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 thông tin chính xác và đáng tin cậy. Đối với các thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp do con người thực hiện. Chúng tôi không chịu trách nhiệm về bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này. + \ No newline at end of file diff --git a/translations/vi/AGENTS.md b/translations/vi/AGENTS.md index a64411b87..ba85cea22 100644 --- a/translations/vi/AGENTS.md +++ b/translations/vi/AGENTS.md @@ -2,42 +2,42 @@ ## Tổng quan dự án -Đây là kho giáo trình giáo dục để dạy các kiến thức cơ bản về phát triển web cho người mới bắt đầu. Giáo trình là một khóa học toàn diện 12 tuần do Microsoft Cloud Advocates phát triển, với 24 bài học thực hành về JavaScript, CSS và HTML. +Đây là khoá học giáo dục để dạy các kiến thức cơ bản về phát triển web cho người mới bắt đầu. Khung chương trình là một khoá học toàn diện kéo dài 12 tuần được phát triển bởi Microsoft Cloud Advocates, bao gồm 24 bài học thực hành về JavaScript, CSS và HTML. ### Các thành phần chính -- **Nội dung giáo dục**: 24 bài học có cấu trúc tổ chức thành các mô-đun dựa trên dự án -- **Dự án thực tế**: Terrarium, Trò chơi đánh máy, Tiện ích mở rộng trình duyệt, Trò chơi không gian, Ứng dụng ngân hàng, Trình chỉnh sửa mã, và Trợ lý chat AI +- **Nội dung giáo dục**: 24 bài học có cấu trúc được tổ chức thành các mô-đun dự án +- **Dự án thực tế**: Terrarium, Trò chơi đánh máy, Tiện ích mở rộng trình duyệt, Trò chơi vũ trụ, Ứng dụng Ngân hàng, Trình soạn thảo mã, và Trợ lý trò chuyện AI - **Bài kiểm tra tương tác**: 48 bài kiểm tra với 3 câu hỏi mỗi bài (đánh giá trước/sau bài học) -- **Hỗ trợ đa ngôn ngữ**: Dịch tự động cho hơn 50 ngôn ngữ qua GitHub Actions +- **Hỗ trợ đa ngôn ngữ**: Dịch tự động hơn 50 ngôn ngữ thông qua GitHub Actions - **Công nghệ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (cho các dự án AI) ### Kiến trúc -- Kho giáo dục với cấu trúc theo bài học -- Mỗi thư mục bài học chứa README, ví dụ mã, và giải pháp -- Dự án độc lập trong các thư mục riêng biệt (quiz-app, các dự án bài học khác nhau) +- Khoá học giáo dục với cấu trúc dựa trên bài học +- Mỗi thư mục bài học chứa README, ví dụ mã và giải pháp +- Các dự án độc lập trong các thư mục riêng biệt (quiz-app, các dự án bài học khác nhau) - Hệ thống dịch sử dụng GitHub Actions (co-op-translator) -- Tài liệu được phục vụ qua Docsify và có sẵn dạng PDF +- Tài liệu được cung cấp qua Docsify và có sẵn dưới dạng PDF -## Lệnh thiết lập +## Lệnh cài đặt -Kho này chủ yếu dành cho việc tiêu thụ nội dung giáo dục. Để làm việc với các dự án cụ thể: +Kho chứa chủ yếu dành cho việc sử dụng nội dung giáo dục. Để làm việc với các dự án cụ thể: -### Thiết lập kho chính +### Cài đặt kho chính ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Thiết lập Quiz App (Vue 3 + Vite) +### Cài đặt Quiz App (Vue 3 + Vite) ```bash cd quiz-app npm install -npm run dev # Khởi động máy chủ phát triển -npm run build # Xây dựng cho môi trường sản xuất +npm run dev # Bắt đầu máy chủ phát triển +npm run build # Xây dựng cho sản xuất npm run lint # Chạy ESLint ``` @@ -51,15 +51,15 @@ npm run lint # Chạy ESLint npm run format # Định dạng với Prettier ``` -### Dự án Tiện ích mở rộng trình duyệt +### Dự án tiện ích mở rộng trình duyệt ```bash cd 5-browser-extension/solution npm install -# Làm theo hướng dẫn tải tiện ích mở rộng dành riêng cho trình duyệt +# Thực hiện theo hướng dẫn tải tiện ích mở rộng riêng cho trình duyệt ``` -### Dự án Trò chơi không gian +### Dự án trò chơi không gian ```bash cd 6-space-game/solution @@ -67,7 +67,7 @@ npm install # Mở index.html trong trình duyệt hoặc sử dụng Live Server ``` -### Dự án Chat (Backend Python) +### Dự án trò chuyện (Python Backend) ```bash cd 9-chat-project/solution/backend/python @@ -80,28 +80,28 @@ python api.py ### Dành cho người đóng góp nội dung -1. **Fork kho này** vào tài khoản GitHub của bạn -2. **Clone bản fork** về máy cục bộ -3. **Tạo nhánh mới** cho thay đổi của bạn -4. Thực hiện thay đổi nội dung bài học hoặc ví dụ mã -5. Kiểm thử các thay đổi mã trong thư mục dự án liên quan +1. **Fork kho lưu trữ** về tài khoản GitHub của bạn +2. **Clone bản fork** về máy tính cá nhân +3. **Tạo nhánh mới** cho các thay đổi của bạn +4. Thay đổi nội dung bài học hoặc ví dụ mã +5. Kiểm tra các thay đổi mã trong các thư mục dự án liên quan 6. Gửi pull request theo hướng dẫn đóng góp ### Dành cho người học -1. Fork hoặc clone kho về -2. Truy cập tuần tự các thư mục bài học -3. Đọc các file README cho mỗi bài học -4. Hoàn thành các bài quiz trước bài học tại https://ff-quizzes.netlify.app/web/ +1. Fork hoặc clone kho lưu trữ +2. Điều hướng tuần tự vào các thư mục bài học +3. Đọc các file README cho từng bài học +4. Hoàn thành các bài kiểm tra trước bài học tại https://ff-quizzes.netlify.app/web/ 5. Làm theo các ví dụ mã trong các thư mục bài học -6. Hoàn thành bài tập và thách thức -7. Làm bài quiz sau bài học +6. Hoàn thành bài tập và thử thách +7. Tham gia các bài kiểm tra sau bài học ### Phát triển trực tiếp -- **Tài liệu**: Chạy `docsify serve` ở thư mục gốc (cổng 3000) -- **Ứng dụng Quiz**: Chạy `npm run dev` trong thư mục quiz-app -- **Các dự án**: Sử dụng VS Code Live Server extension cho các dự án HTML +- **Tài liệu**: Chạy `docsify serve` trong thư mục gốc (cổng 3000) +- **Quiz App**: Chạy `npm run dev` trong thư mục quiz-app +- **Dự án**: Sử dụng tiện ích mở rộng Live Server của VS Code cho các dự án HTML - **Dự án API**: Chạy `npm start` trong các thư mục API tương ứng ## Hướng dẫn kiểm thử @@ -110,73 +110,73 @@ python api.py ```bash cd quiz-app -npm run lint # Kiểm tra các vấn đề về kiểu mã -npm run build # Xác minh việc xây dựng thành công +npm run lint # Kiểm tra các vấn đề về kiểu mã nguồn +npm run build # Xác nhận quá trình xây dựng thành công ``` -### Kiểm thử API Ngân hàng +### Kiểm thử API ngân hàng ```bash cd 7-bank-project/api -npm run lint # Kiểm tra các lỗi về phong cách mã nguồn -node server.js # Xác minh máy chủ khởi động mà không có lỗi nào +npm run lint # Kiểm tra các vấn đề về phong cách mã +node server.js # Xác minh máy chủ khởi động mà không có lỗi ``` -### Cách tiếp cận kiểm thử chung +### Phương pháp kiểm thử chung -- Đây là kho giáo dục không có kiểm thử tự động toàn diện +- Đây là khoá học giáo dục nên không có kiểm thử tự động toàn diện - Kiểm thử thủ công tập trung vào: - Các ví dụ mã chạy không lỗi - - Các liên kết trong tài liệu hoạt động đúng - - Dự án xây dựng thành công - - Ví dụ theo các thực hành tốt nhất + - Các liên kết trong tài liệu hoạt động chính xác + - Xây dựng dự án hoàn thành thành công + - Ví dụ tuân theo các thực hành tốt nhất ### Kiểm tra trước khi gửi - Chạy `npm run lint` trong các thư mục có package.json - Xác minh các liên kết markdown hợp lệ -- Kiểm thử các ví dụ mã trên trình duyệt hoặc Node.js -- Kiểm tra rằng các bản dịch giữ đúng cấu trúc +- Thử các ví dụ mã trong trình duyệt hoặc Node.js +- Kiểm tra rằng bản dịch giữ nguyên cấu trúc đúng ## Hướng dẫn phong cách mã ### JavaScript - Sử dụng cú pháp ES6+ hiện đại -- Tuân theo cấu hình ESLint chuẩn có trong dự án -- Dùng tên biến và hàm có ý nghĩa dễ hiểu cho giáo dục +- Tuân theo cấu hình ESLint tiêu chuẩn có trong các dự án +- Đặt tên biến và hàm có ý nghĩa để dễ hiểu cho người học - Thêm chú thích giải thích khái niệm cho người học -- Định dạng bằng Prettier nếu được cấu hình +- Định dạng theo Prettier khi được cấu hình ### HTML/CSS -- Các phần tử HTML5 có ngữ nghĩa -- Nguyên tắc thiết kế đáp ứng +- Sử dụng các phần tử HTML5 có ngữ nghĩa +- Thiết kế đáp ứng (responsive) - Quy ước đặt tên class rõ ràng - Chú thích giải thích kỹ thuật CSS cho người học ### Python -- Tuân thủ quy chuẩn PEP 8 +- Tuân theo hướng dẫn phong cách PEP 8 - Ví dụ mã rõ ràng, mang tính giáo dục -- Sử dụng type hints khi hữu ích cho việc học +- Dùng gợi ý kiểu (type hints) khi giúp ích cho việc học ### Tài liệu Markdown - Cấu trúc tiêu đề rõ ràng -- Khối mã với chỉ định ngôn ngữ -- Liên kết đến các tài nguyên bổ sung +- Các khối mã có chỉ định ngôn ngữ +- Liên kết đến tài nguyên bổ sung - Ảnh chụp màn hình và hình ảnh trong thư mục `images/` -- Văn bản alt cho ảnh để hỗ trợ truy cập +- Văn bản thay thế cho hình ảnh nhằm hỗ trợ truy cập ### Tổ chức tệp -- Các bài học đánh số theo thứ tự (1-getting-started-lessons, 2-js-basics, v.v.) +- Các bài học được đánh số theo thứ tự (1-getting-started-lessons, 2-js-basics, vv) - Mỗi dự án có thư mục `solution/` và thường có `start/` hoặc `your-work/` -- Hình ảnh lưu trong thư mục `images/` riêng của từng bài học -- Các bản dịch trong cấu trúc `translations/{language-code}/` +- Hình ảnh được lưu trong thư mục riêng theo bài `images/` +- Bản dịch nằm trong cấu trúc `translations/{language-code}/` -## Xây dựng và triển khai +## Xây dựng và Triển khai ### Triển khai Quiz App (Azure Static Web Apps) @@ -185,13 +185,13 @@ Quiz-app được cấu hình để triển khai trên Azure Static Web Apps: ```bash cd quiz-app npm run build # Tạo thư mục dist/ -# Triển khai qua quy trình làm việc GitHub Actions khi đẩy lên nhánh main +# Triển khai qua workflow GitHub Actions khi đẩy lên nhánh main ``` Cấu hình Azure Static Web Apps: -- **Vị trí ứng dụng**: `/quiz-app` +- **Vị trí app**: `/quiz-app` - **Vị trí đầu ra**: `dist` -- **Quy trình làm việc**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### Tạo PDF tài liệu @@ -203,80 +203,80 @@ npm run convert # Tạo PDF từ docs ### Tài liệu Docsify ```bash -npm install -g docsify-cli # Cài đặt Docsify toàn cục +npm install -g docsify-cli # Cài đặt Docsify trên toàn hệ thống docsify serve # Phục vụ trên localhost:3000 ``` -### Xây dựng dự án riêng biệt +### Xây dựng dự án riêng -Mỗi thư mục dự án có thể có quá trình xây dựng riêng: -- Dự án Vue: `npm run build` tạo các bundle sản xuất -- Dự án tĩnh: không có bước build, phục vụ trực tiếp các tệp +Mỗi thư mục dự án có thể có quy trình build riêng: +- Dự án Vue: `npm run build` tạo gói sản xuất +- Dự án tĩnh: Không có bước build, phục vụ file trực tiếp ## Hướng dẫn Pull Request ### Định dạng tiêu đề -Sử dụng tiêu đề rõ ràng, mô tả khu vực thay đổi: -- `[Quiz-app] Thêm bài quiz mới cho bài học X` -- `[Lesson-3] Sửa lỗi chính tả trong dự án terrarium` +Dùng tiêu đề rõ ràng, mô tả khu vực thay đổi: +- `[Quiz-app] Thêm câu đố mới cho bài X` +- `[Lesson-3] Sửa lỗi đánh máy trong dự án terrarium` - `[Translation] Thêm bản dịch tiếng Tây Ban Nha cho bài 5` -- `[Docs] Cập nhật hướng dẫn thiết lập` +- `[Docs] Cập nhật hướng dẫn cài đặt` ### Các kiểm tra bắt buộc Trước khi gửi PR: 1. **Chất lượng mã**: - - Chạy `npm run lint` trong các thư mục dự án ảnh hưởng + - Chạy `npm run lint` trong các thư mục dự án bị ảnh hưởng - Sửa tất cả lỗi và cảnh báo lint -2. **Xác thực build**: - - Chạy `npm run build` nếu có - - Đảm bảo không có lỗi build +2. **Xác minh xây dựng**: + - Chạy `npm run build` nếu áp dụng được + - Đảm bảo không có lỗi xây dựng -3. **Xác minh liên kết**: - - Kiểm tra tất cả liên kết markdown - - Xác thực tham chiếu hình ảnh +3. **Kiểm tra liên kết**: + - Thử tất cả các liên kết markdown + - Xác minh tham chiếu hình ảnh đúng -4. **Rà soát nội dung**: - - Đọc lại lỗi chính tả và ngữ pháp +4. **Xem xét nội dung**: + - Đọc kỹ để không có lỗi chính tả và ngữ pháp - Đảm bảo ví dụ mã chính xác và mang tính giáo dục - - Kiểm tra bản dịch giữ nguyên ý nghĩa gốc + - Xác minh bản dịch giữ nguyên nghĩa gốc ### Yêu cầu đóng góp -- Đồng ý Microsoft CLA (kiểm tra tự động lúc PR đầu tiên) +- Đồng ý với Microsoft CLA (kiểm tra tự động lần đầu PR) - Tuân theo [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Xem [CONTRIBUTING.md](./CONTRIBUTING.md) để biết hướng dẫn chi tiết - Tham chiếu số issue trong mô tả PR nếu có ### Quy trình đánh giá -- PR được các người duy trì và cộng đồng đánh giá -- Ưu tiên làm rõ mặt giáo dục -- Ví dụ mã nên theo các thực hành tốt hiện tại -- Bản dịch được đánh giá về độ chính xác và phù hợp văn hóa +- PR được duyệt bởi người bảo trì và cộng đồng +- Ưu tiên tính rõ ràng giáo dục +- Ví dụ mã nên theo các thực hành tốt nhất hiện tại +- Bản dịch được xem xét kỹ về độ chính xác và phù hợp văn hóa ## Hệ thống dịch ### Dịch tự động - Sử dụng GitHub Actions với workflow co-op-translator -- Dịch tự động sang hơn 50 ngôn ngữ -- Các tệp nguồn ở thư mục chính -- Tệp dịch ở thư mục `translations/{language-code}/` +- Dịch tự động hơn 50 ngôn ngữ +- Tệp gốc trong các thư mục chính +- Tệp dịch trong thư mục `translations/{language-code}/` ### Thêm cải tiến dịch thủ công -1. Tìm tệp ở `translations/{language-code}/` -2. Thực hiện cải tiến trong khi giữ cấu trúc -3. Đảm bảo ví dụ mã vẫn hoạt động -4. Kiểm thử nội dung quiz được bản địa hóa +1. Tìm tệp trong `translations/{language-code}/` +2. Cải thiện nội dung đồng thời giữ cấu trúc +3. Đảm bảo ví dụ mã còn hoạt động +4. Kiểm tra nội dung câu đố được bản địa hóa -### Metadata dịch +### Siêu dữ liệu bản dịch -Các tệp dịch có bao gồm header metadata: +Các tệp dịch bao gồm phần đầu siêu dữ liệu: ```markdown ``` -## Gỡ lỗi và xử lý sự cố +## Gỡ lỗi và Khắc phục sự cố -### Các vấn đề thường gặp +### Các vấn đề phổ biến **Ứng dụng quiz không khởi động được**: - Kiểm tra phiên bản Node.js (khuyến nghị v14+) -- Xóa `node_modules` và `package-lock.json`, chạy lại `npm install` -- Kiểm tra xung đột cổng (mặc định Vite dùng cổng 5173) +- Xoá `node_modules` và `package-lock.json`, rồi chạy lại `npm install` +- Kiểm tra xung đột cổng (mặc định: Vite dùng cổng 5173) -**Máy chủ API không khởi động được**: -- Xác nhận phiên bản Node.js đạt yêu cầu (node >=10) -- Kiểm tra cổng có đang được sử dụng không -- Đảm bảo đã cài tất cả dependencies bằng `npm install` +**Máy chủ API không khởi động**: +- Kiểm tra phiên bản Node.js >=10 +- Kiểm tra xem cổng đã được sử dụng chưa +- Đảm bảo đã cài đặt đầy đủ phụ thuộc với `npm install` **Tiện ích mở rộng trình duyệt không tải được**: -- Kiểm tra manifest.json định dạng đúng -- Kiểm tra console trình duyệt có lỗi không -- Thực hiện theo hướng dẫn cài tiện ích mở rộng riêng cho trình duyệt +- Kiểm tra file manifest.json đúng định dạng +- Kiểm tra console trình duyệt có lỗi hay không +- Làm theo hướng dẫn cài đặt tiện ích mở rộng riêng cho trình duyệt -**Vấn đề dự án chat Python**: -- Đảm bảo đã cài gói OpenAI: `pip install openai` -- Xác nhận biến môi trường GITHUB_TOKEN đã được đặt -- Kiểm tra quyền truy cập Models trên GitHub +**Vấn đề dự án trò chuyện Python**: +- Đảm bảo đã cài đặt gói OpenAI: `pip install openai` +- Kiểm tra biến môi trường GITHUB_TOKEN đã được thiết lập +- Kiểm tra quyền truy cập GitHub Models **Docsify không phục vụ tài liệu**: - Cài đặt docsify-cli toàn cục: `npm install -g docsify-cli` -- Chạy từ thư mục gốc kho -- Kiểm tra `docs/_sidebar.md` có tồn tại không +- Chạy từ thư mục gốc kho lưu trữ +- Kiểm tra file `docs/_sidebar.md` tồn tại -### Mẹo môi trường phát triển +### Mẹo về môi trường phát triển -- Dùng VS Code với extension Live Server cho các dự án HTML -- Cài đặt ESLint và Prettier để định dạng thống nhất -- Dùng DevTools trình duyệt để gỡ lỗi JavaScript -- Dự án Vue: cài extension Vue DevTools trình duyệt +- Sử dụng VS Code với tiện ích mở rộng Live Server cho dự án HTML +- Cài đặt tiện ích ESLint và Prettier để định dạng nhất quán +- Dùng công cụ DevTools trình duyệt để gỡ lỗi JavaScript +- Với dự án Vue, cài tiện ích Vue DevTools trên trình duyệt -### Xem xét hiệu năng +### Lưu ý về hiệu năng -- Số lượng file dịch lớn (hơn 50 ngôn ngữ) khiến clone toàn bộ nặng -- Dùng clone cạn nếu chỉ làm việc với nội dung: `git clone --depth 1` -- Loại trừ thư mục dịch khỏi tìm kiếm khi làm việc với nội dung tiếng Anh -- Quá trình build có thể chậm lần đầu (npm install, build Vite) +- Số lượng lớn tệp dịch (hơn 50 ngôn ngữ) làm cho bản clone đầy đủ rất nặng +- Dùng clone nông nếu chỉ làm việc nội dung: `git clone --depth 1` +- Loại trừ bản dịch khỏi tìm kiếm khi làm việc nội dung tiếng Anh +- Quy trình build có thể chậm lần chạy đầu (npm install, build Vite) -## Đảm bảo an toàn +## Các cân nhắc về bảo mật ### Biến môi trường -- Không bao giờ commit khóa API vào kho -- Sử dụng tệp `.env` (đã được thêm vào `.gitignore`) -- Tài liệu biến môi trường cần thiết trong các README dự án +- Không bao giờ commit khóa API vào kho lưu trữ +- Sử dụng file `.env` (đã có trong `.gitignore`) +- Tài liệu biến môi trường bắt buộc trong các README dự án ### Dự án Python - Sử dụng môi trường ảo: `python -m venv venv` -- Giữ dependencies cập nhật -- GitHub token nên có quyền tối thiểu cần thiết +- Giữ phụ thuộc luôn cập nhật +- Token GitHub cần quyền tối thiểu cần thiết -### Quyền truy cập Models GitHub +### Truy cập GitHub Models -- Cần có Personal Access Token (PAT) cho GitHub Models -- Token nên lưu trong biến môi trường -- Không bao giờ commit token hoặc thông tin xác thực +- Yêu cầu Personal Access Tokens (PAT) để truy cập GitHub Models +- Token nên lưu trữ dưới biến môi trường +- Không bao giờ commit token hoặc thông tin đăng nhập ## Ghi chú bổ sung ### Đối tượng mục tiêu -- Người mới hoàn toàn với phát triển web -- Học sinh và người tự học -- Giáo viên sử dụng giáo trình trong lớp học -- Nội dung thiết kế phục vụ truy cập và phát triển kỹ năng từ từ +- Người mới hoàn toàn về phát triển web +- Sinh viên và người tự học +- Giáo viên sử dụng khung chương trình trong lớp học +- Nội dung thiết kế cho khả năng tiếp cận và phát triển kỹ năng từ từ ### Triết lý giáo dục -- Phương pháp học dựa trên dự án -- Kiểm tra kiến thức thường xuyên (quiz) -- Thực hành mã hóa trực tiếp +- Học dựa trên dự án +- Kiểm tra kiến thức thường xuyên (bài kiểm tra) +- Bài tập mã hóa thực hành - Ví dụ ứng dụng thực tế -- Tập trung vào kiến thức nền tảng trước khi tới framework +- Tập trung vào nền tảng trước khi học framework -### Bảo trì kho +### Bảo trì kho lưu trữ -- Cộng đồng người học và đóng góp năng động -- Thường xuyên cập nhật dependencies và nội dung -- Vấn đề và thảo luận được người duy trì giám sát -- Cập nhật dịch tự động qua GitHub Actions +- Cộng đồng học viên và người đóng góp năng động +- Cập nhật thường xuyên phụ thuộc và nội dung +- Theo dõi issues và thảo luận bởi người quản lý +- Cập nhật bản dịch tự động qua GitHub Actions ### Tài nguyên liên quan -- [Các module Microsoft Learn](https://docs.microsoft.com/learn/) -- [Tài nguyên Student Hub](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) được khuyến nghị cho người học -- Khóa học thêm: AI Sinh tạo, Khoa học dữ liệu, ML, IoT có sẵn +- [Microsoft Learn modules](https://docs.microsoft.com/learn/) +- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) khuyến nghị cho người học +- Các khoá học bổ sung: AI sinh tạo, Khoa học dữ liệu, ML, IoT có sẵn ### Làm việc với các dự án cụ thể -Hướng dẫn chi tiết cho từng dự án có trong các file README: +Hướng dẫn chi tiết về từng dự án có trong file README: - `quiz-app/README.md` - Ứng dụng quiz Vue 3 - `7-bank-project/README.md` - Ứng dụng ngân hàng có xác thực -- `5-browser-extension/README.md` - Phát triển tiện ích mở rộng trình duyệt -- `6-space-game/README.md` - Phát triển trò chơi Canvas -- `9-chat-project/README.md` - Dự án trợ lý chat AI +- `5-browser-extension/README.md` - Phát triển tiện ích trình duyệt +- `6-space-game/README.md` - Phát triển trò chơi canvas +- `9-chat-project/README.md` - Dự án trợ lý trò chuyện AI -### Cấu trúc Monorepo +### Cấu trúc monorepo Mặc dù không phải monorepo truyền thống, kho này chứa nhiều dự án độc lập: -- Mỗi bài học tự chứa -- Dự án không chia sẻ dependencies -- Làm việc trên từng dự án riêng mà không ảnh hưởng dự án khác -- Clone toàn bộ repo để trải nghiệm đầy đủ giáo trình +- Mỗi bài học là riêng biệt +- Các dự án không chia sẻ phụ thuộc +- Làm việc trên dự án cá nhân mà không ảnh hưởng đến dự án khác +- Clone toàn bộ kho để có trải nghiệm toàn diện của khung chương trình --- -**Tuyên bố miễn trừ trách nhiệm**: -Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ nguyên bản nên được coi là nguồn thông tin chính xác và có thẩm quyền. Đối với các thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp của con người. Chúng tôi không chịu trách nhiệm đối với bất kỳ sự hiểu lầm hoặc giải thích sai nào phát sinh từ việc sử dụng bản dịch này. +**Tuyên bố từ chối trách nhiệm**: +Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ gốc nên được coi là nguồn tham khảo chính xác nhất. Đối với những thông tin quan trọng, chúng tôi khuyến nghị dịch bởi chuyên gia dịch thuật có kinh nghiệm. Chúng tôi không chịu trách nhiệm về bất kỳ sự hiểu lầm hay giải thích sai nào phát sinh từ việc sử dụng bản dịch này. \ No newline at end of file diff --git a/translations/vi/README.md b/translations/vi/README.md index ba627bed4..411ee0529 100644 --- a/translations/vi/README.md +++ b/translations/vi/README.md @@ -2,134 +2,144 @@ [![Người đóng góp GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [![Vấn đề GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) [![Yêu cầu kéo GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![Chào đón PR](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![Chào mừng PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Người theo dõi GitHub](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) -[![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) -[![Sao GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +[![Chia sẻ GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![Ngôi sao GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) -[![Discord Microsoft Foundry](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) # Phát Triển Web Cho Người Mới Bắt Đầu - Một Chương Trình Học -Học những kiến thức cơ bản về phát triển web với khóa học toàn diện 12 tuần do các Chuyên Gia Microsoft Cloud biên soạn. Mỗi trong số 24 bài học đi sâu vào JavaScript, CSS và HTML thông qua các dự án thực hành như terrarium, tiện ích mở rộng trình duyệt và trò chơi không gian. Tham gia với các bài kiểm tra, thảo luận và bài tập thực tế. Nâng cao kỹ năng và tối ưu hóa việc ghi nhớ kiến thức với phương pháp giảng dạy dựa trên dự án hiệu quả của chúng tôi. Bắt đầu hành trình lập trình của bạn ngay hôm nay! +Học những kiến thức cơ bản về phát triển web với khóa học toàn diện kéo dài 12 tuần do Microsoft Cloud Advocates tổ chức. Mỗi trong số 24 bài học sẽ đào sâu vào JavaScript, CSS và HTML qua các dự án thực hành như terrariums, tiện ích trình duyệt và trò chơi không gian. Tham gia với các bài kiểm tra, thảo luận và bài tập thực tế. Nâng cao kỹ năng của bạn và tối ưu hóa việc tiếp thu kiến thức với phương pháp giảng dạy dựa trên dự án hiệu quả của chúng tôi. Bắt đầu hành trình lập trình của bạn ngay hôm nay! -Tham gia cộng đồng Azure AI Foundry trên Discord +Tham gia cộng đồng Azure AI Foundry Discord -[![Discord Microsoft Foundry](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) Thực hiện các bước sau để bắt đầu sử dụng các tài nguyên này: -1. **Fork Kho Lưu Trữ**: Nhấn [![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Clone Kho Lưu Trữ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Tham gia Azure AI Foundry Discord và gặp gỡ các chuyên gia cùng các nhà phát triển khác**](https://discord.com/invite/ByRwuEEgH4) +1. **Tạo bản sao kho lưu trữ (Fork Repository)**: Nhấp vào [![Chia sẻ GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Sao chép kho lưu trữ (Clone Repository)**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Tham gia The Azure AI Foundry Discord và gặp gỡ các chuyên gia cùng đồng nghiệp phát triển**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 Hỗ trợ Đa Ngôn Ngữ +### 🌐 Hỗ Trợ Đa Ngôn Ngữ #### Hỗ trợ qua GitHub Action (Tự động & Luôn Cập Nhật) -[Tiếng Ả Rập](../ar/README.md) | [Tiếng Bengal](../bn/README.md) | [Tiếng Bulgaria](../bg/README.md) | [Tiếng Miến Điện (Myanmar)](../my/README.md) | [Tiếng Trung (Giản thể)](../zh-CN/README.md) | [Tiếng Trung (Phồn thể, Hồng Kông)](../zh-HK/README.md) | [Tiếng Trung (Phồn thể, Macau)](../zh-MO/README.md) | [Tiếng Trung (Phồn thể, Đài Loan)](../zh-TW/README.md) | [Tiếng Croatia](../hr/README.md) | [Tiếng Séc](../cs/README.md) | [Tiếng Đan Mạch](../da/README.md) | [Tiếng Hà Lan](../nl/README.md) | [Tiếng Estonia](../et/README.md) | [Tiếng Phần Lan](../fi/README.md) | [Tiếng Pháp](../fr/README.md) | [Tiếng Đức](../de/README.md) | [Tiếng Hy Lạp](../el/README.md) | [Tiếng Do Thái](../he/README.md) | [Tiếng Hindi](../hi/README.md) | [Tiếng Hungary](../hu/README.md) | [Tiếng Indonesia](../id/README.md) | [Tiếng Ý](../it/README.md) | [Tiếng Nhật](../ja/README.md) | [Tiếng Kannada](../kn/README.md) | [Tiếng Hàn Quốc](../ko/README.md) | [Tiếng Litva](../lt/README.md) | [Tiếng Mã Lai](../ms/README.md) | [Tiếng Malayalam](../ml/README.md) | [Tiếng Marathi](../mr/README.md) | [Tiếng Nepal](../ne/README.md) | [Tiếng Pidgin Nigeria](../pcm/README.md) | [Tiếng Na Uy](../no/README.md) | [Tiếng Ba Tư (Farsi)](../fa/README.md) | [Tiếng Ba Lan](../pl/README.md) | [Tiếng Bồ Đào Nha (Brazil)](../pt-BR/README.md) | [Tiếng Bồ Đào Nha (Bồ Đào Nha)](../pt-PT/README.md) | [Tiếng Punjabi (Gurmukhi)](../pa/README.md) | [Tiếng Romania](../ro/README.md) | [Tiếng Nga](../ru/README.md) | [Tiếng Serbia (Chữ Kirin)](../sr/README.md) | [Tiếng Slovakia](../sk/README.md) | [Tiếng Slovenia](../sl/README.md) | [Tiếng Tây Ban Nha](../es/README.md) | [Tiếng Swahili](../sw/README.md) | [Tiếng Thụy Điển](../sv/README.md) | [Tiếng Tagalog (Philippines)](../tl/README.md) | [Tiếng Tamil](../ta/README.md) | [Tiếng Telugu](../te/README.md) | [Tiếng Thái](../th/README.md) | [Tiếng Thổ Nhĩ Kỳ](../tr/README.md) | [Tiếng Ukraina](../uk/README.md) | [Tiếng Urdu](../ur/README.md) | [Tiếng Việt](./README.md) - -> **Muốn Clone cục bộ?** +[Tiếng Ả Rập](../ar/README.md) | [Tiếng Bengal](../bn/README.md) | [Tiếng Bulgaria](../bg/README.md) | [Tiếng Miến Điện](../my/README.md) | [Tiếng Trung (Giản thể)](../zh-CN/README.md) | [Tiếng Trung (Phồn thể, Hồng Kông)](../zh-HK/README.md) | [Tiếng Trung (Phồn thể, Ma Cao)](../zh-MO/README.md) | [Tiếng Trung (Phồn thể, Đài Loan)](../zh-TW/README.md) | [Tiếng Croatia](../hr/README.md) | [Tiếng Séc](../cs/README.md) | [Tiếng Đan Mạch](../da/README.md) | [Tiếng Hà Lan](../nl/README.md) | [Tiếng Estonia](../et/README.md) | [Tiếng Phần Lan](../fi/README.md) | [Tiếng Pháp](../fr/README.md) | [Tiếng Đức](../de/README.md) | [Tiếng Hy Lạp](../el/README.md) | [Tiếng Hebrew](../he/README.md) | [Tiếng Hindi](../hi/README.md) | [Tiếng Hungary](../hu/README.md) | [Tiếng Indonesia](../id/README.md) | [Tiếng Ý](../it/README.md) | [Tiếng Nhật](../ja/README.md) | [Tiếng Kannada](../kn/README.md) | [Tiếng Hàn](../ko/README.md) | [Tiếng Lithuania](../lt/README.md) | [Tiếng Mã Lai](../ms/README.md) | [Tiếng Malayalam](../ml/README.md) | [Tiếng Marathi](../mr/README.md) | [Tiếng Nepal](../ne/README.md) | [Tiếng Pidgin Nigeria](../pcm/README.md) | [Tiếng Na Uy](../no/README.md) | [Tiếng Ba Tư (Farsi)](../fa/README.md) | [Tiếng Ba Lan](../pl/README.md) | [Tiếng Bồ Đào Nha (Brazil)](../pt-BR/README.md) | [Tiếng Bồ Đào Nha (Bồ Đào Nha)](../pt-PT/README.md) | [Tiếng Punjabi (Gurmukhi)](../pa/README.md) | [Tiếng Romania](../ro/README.md) | [Tiếng Nga](../ru/README.md) | [Tiếng Serbia (Chữ Cyrillic)](../sr/README.md) | [Tiếng Slovakia](../sk/README.md) | [Tiếng Slovenia](../sl/README.md) | [Tiếng Tây Ban Nha](../es/README.md) | [Tiếng Swahili](../sw/README.md) | [Tiếng Thụy Điển](../sv/README.md) | [Tiếng Tagalog (Philippines)](../tl/README.md) | [Tiếng Tamil](../ta/README.md) | [Tiếng Telugu](../te/README.md) | [Tiếng Thái](../th/README.md) | [Tiếng Thổ Nhĩ Kỳ](../tr/README.md) | [Tiếng Ukraina](../uk/README.md) | [Tiếng Urdu](../ur/README.md) | [Tiếng Việt](./README.md) -> Kho lưu trữ này bao gồm hơn 50 bản dịch ngôn ngữ điều này làm tăng đáng kể kích thước tải xuống. Để clone mà không có bản dịch, hãy sử dụng sparse checkout: +> **Muốn Sao Chép Nội Bộ?** +> +> Kho lưu trữ này bao gồm hơn 50 bản dịch ngôn ngữ làm kích thước tải về tăng lên đáng kể. Để sao chép mà không có các bản dịch, hãy sử dụng sparse checkout: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> Điều này sẽ cung cấp cho bạn tất cả những gì bạn cần để hoàn thành khóa học với tốc độ tải xuống nhanh hơn nhiều. +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> Điều này cung cấp cho bạn mọi thứ 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. -**Nếu bạn muốn có thêm các ngôn ngữ dịch được hỗ trợ được liệt kê [ở đây](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Nếu bạn muốn có thêm các ngôn ngữ dịch được hỗ trợ, danh sách có tại [đây](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -[![Mở trong Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Mở%20trong%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Mở trong Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Bạn là sinh viên?_ -Truy cập trang [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) nơi bạn sẽ tìm thấy tài nguyên cho người mới bắt đầu, bộ dụng cụ dành cho sinh viên và thậm chí cách để nhận phiếu chứng nhận miễn phí. Đây là trang bạn nên đánh dấu và kiểm tra định kỳ vì chúng tôi thay đổi nội dung hàng tháng. +Tham khảo [**trang Trung tâm Sinh viên**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) nơi bạn sẽ tìm thấy tài nguyên dành cho người mới bắt đầu, bộ công cụ Sinh viên và thậm chí là cách lấy phiếu chứng nhận miễn phí. Đây là trang bạn nên đánh dấu và kiểm tra định kỳ vì chúng tôi thay đổi nội dung hàng tháng. ### 📣 Thông báo - Thử thách Chế độ GitHub Copilot Agent mới để hoàn thành! -Thử thách mới đã được thêm vào, tìm thử thách "GitHub Copilot Agent Challenge 🚀" trong hầu hết các chương. Đó là thử thách mới dành cho bạn sử dụng GitHub Copilot và chế độ Agent để hoàn thành. Nếu bạn chưa từng dùng chế độ Agent trước đây, nó không chỉ tạo ra văn bản mà còn có thể tạo và chỉnh sửa tệp, chạy lệnh và nhiều hơn nữa. +Thêm Thử thách mới, tìm kiếm "Thử thách GitHub Copilot Agent 🚀" trong hầu hết các chương. Đây là thử thách mới dành cho bạn hoàn thành sử dụng GitHub Copilot và chế độ Agent. Nếu bạn chưa từng dùng chế độ Agent trước đây, nó có khả năng không chỉ tạo văn bản mà còn tạo và chỉnh sửa tập tin, chạy lệnh và nhiều hơn nữa. -### 📣 Thông báo - _Dự án Mới để xây dựng sử dụng Generative AI_ +### 📣 Thông báo - _Dự án Mới xây dựng sử dụng Generative AI_ -Dự án trợ lý AI mới vừa được thêm, xem [dự án](./9-chat-project/README.md) +Dự án trợ lý AI mới vừa được thêm vào, xem tại [dự án](./9-chat-project/README.md) -### 📣 Thông báo - _Chương trình học Mới_ về Generative AI cho JavaScript vừa được phát hành +### 📣 Thông báo - _Chương Trình Mới_ về Generative AI cho JavaScript vừa được phát hành -Đừng bỏ lỡ chương trình học Generative AI mới của chúng tôi! +Đừng bỏ lỡ chương trình Generative AI mới của chúng tôi! Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) để bắt đầu! ![Nền](../../translated_images/vi/background.148a8d43afde5730.webp) -- Bài học bao gồm tất cả từ cơ bản đến RAG. -- Tương tác với các nhân vật lịch sử sử dụng GenAI và ứng dụng đồng hành của chúng tôi. -- Câu chuyện vui nhộn và hấp dẫn, bạn sẽ trải nghiệm du hành thời gian! +- Bài học bao gồm mọi thứ từ cơ bản đến RAG. +- Tương tác với các nhân vật lịch sử bằng GenAI và ứng dụng đồng hành của chúng tôi. +- Câu chuyện vui nhộn và hấp dẫn, bạn sẽ du hành thời gian! ![nhân vật](../../translated_images/vi/character.5c0dd8e067ffd693.webp) -Mỗi bài học bao gồm một bài tập để hoàn thành, kiểm tra kiến thức và một thử thách để hướng dẫn bạn học các chủ đề như: -- Lập trình lời nhắc và kỹ thuật lập trình lời nhắc +Mỗi bài học bao gồm bài tập để hoàn thành, kiểm tra kiến thức và thử thách để hướng dẫn bạn học các chủ đề như: +- Thúc đẩy và kỹ thuật thiết kế lời nhắc - Tạo ứng dụng văn bản và hình ảnh - Ứng dụng tìm kiếm Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) để bắt đầu! + ## 🌱 Bắt Đầu -> **Giáo viên**, chúng tôi có [đưa ra một số gợi ý](for-teachers.md) về cách sử dụng chương trình học này. Chúng tôi rất mong nhận được phản hồi của bạn [trong diễn đàn thảo luận](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Giáo viên**, chúng tôi đã [bao gồm một số gợi ý](for-teachers.md) về cách sử dụng chương trình học này. Chúng tôi rất mong nhận phản hồi từ bạn [trong diễn đàn thảo luận](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Người học](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, với mỗi bài học, bắt đầu với bài kiểm tra trước bài giảng và tiếp tục bằng cách đọc tài liệu giảng dạy, hoàn thành các hoạt động khác nhau và kiểm tra sự hiểu biết của bạn với bài kiểm tra sau bài giảng. +**[Người học](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, với từng bài học, hãy bắt đầu với bài kiểm tra trước bài giảng và tiếp tục đọc tài liệu giảng dạy, hoàn thành các hoạt động khác nhau và kiểm tra hiểu biết của bạn với bài kiểm tra sau bài giảng. -Để tăng cường trải nghiệm học tập, hãy kết nối với bạn bè để làm việc cùng nhau trên các dự án! Thảo luận được khuyến khích trong [diễn đàn thảo luận](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) nơi nhóm điều hành của chúng tôi sẽ sẵn sàng trả lời câu hỏi của bạn. +Để nâng cao trải nghiệm học tập, kết nối với bạn bè để cùng làm các dự án! Khuyến khích thảo luận trong [diễn đàn thảo luận](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) nơi đội ngũ điều phối viên của chúng tôi sẽ có mặt để giải đáp các thắc mắc của bạn. -Để tiếp tục học tập, chúng tôi khuyến nghị bạn khám phá [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) để có thêm tài liệu học tập. +Để mở rộng kiến thức, chúng tôi khuyên bạn khám phá [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) để có thêm tài liệu học tập. -### 📋 Thiết lập môi trường của bạn +### 📋 Thiết lập môi trường làm việc -Chương trình học này đã chuẩn bị môi trường phát triển sẵn sàng! Khi bắt đầu, bạn có thể chọn chạy chương trình học trong một [Codespace](https://github.com/features/codespaces/) (_môi trường dựa trên trình duyệt, không cần cài đặt_), hoặc chạy cục bộ trên máy tính của bạn bằng trình soạn thảo văn bản như [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Chương trình học này đã sẵn sàng môi trường phát triển! Khi bắt đầu, bạn có thể chọn chạy chương trình học trong [Codespace](https://github.com/features/codespaces/) (_môi trường dựa trên trình duyệt, không cần cài đặt_), hoặc chạy tại máy tính cá nhân bằng trình soạn thảo văn bản như [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Tạo kho lưu trữ của bạn -Để bạn dễ dàng lưu công việc, khuyến nghị bạn tạo bản sao kho lưu trữ này. Bạn có thể làm điều này bằng cách nhấn nút **Sử dụng mẫu này** ở đầu trang. Điều này sẽ tạo kho lưu trữ mới trong tài khoản GitHub của bạn với bản sao của chương trình học. +Để bạn dễ dàng lưu công việc, nên tạo bản sao riêng kho lưu trữ này. Bạn có thể làm điều này bằng cách nhấn nút **Use this template** phía trên trang. Điều này sẽ tạo một kho lưu trữ mới trong tài khoản GitHub của bạn với bản sao chương trình học. -Thực hiện các bước sau: -1. **Fork Kho Lưu Trữ**: Nhấn nút "Fork" ở góc trên bên phải của trang này. -2. **Clone Kho Lưu Trữ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +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. +2. **Sao chép kho lưu trữ (Clone Repository)**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Chạy chương trình học trong Codespace -Trong bản sao kho lưu trữ bạn vừa tạo, nhấn nút **Code** và chọn **Open with Codespaces**. Điều này sẽ tạo một Codespace mới để bạn làm việc. +Trong bản sao kho lưu trữ bạn vừa tạo, nhấp nút **Code** và chọn **Open with Codespaces**. Điều này sẽ tạo một Codespace mới để bạn làm việc. ![Codespace](../../translated_images/vi/createcodespace.0238bbf4d7a8d955.webp) -#### Chạy chương trình học cục bộ trên máy tính của bạn - -Để chạy chương trình học này trên máy tính của bạn, bạn sẽ cần một trình soạn thảo văn bản, một trình duyệt và một công cụ dòng lệnh. Bài học đầu tiên của chúng tôi, [Giới thiệu về Ngôn ngữ lập trình và Công cụ của nghề](../../1-getting-started-lessons/1-intro-to-programming-languages), sẽ hướng dẫn bạn qua các tùy chọn khác nhau cho mỗi công cụ để bạn chọn phù hợp nhất. - -Khuyến nghị của chúng tôi là sử dụng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) làm trình soạn thảo, trình soạn thảo này cũng có [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) tích hợp. Bạn có thể tải Visual Studio Code [tại đây](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +#### Chạy chương trình học trên máy tính cá nhân +Để chạy chương trình học này trên máy tính cá nhân, bạn cần trình soạn thảo văn bản, trình duyệt và công cụ dòng lệnh. Bài học đầu tiên của chúng tôi, [Giới thiệu về Ngôn ngữ Lập trình và Công cụ](../../1-getting-started-lessons/1-intro-to-programming-languages), sẽ hướng dẫn bạn qua các tùy chọn cho những công cụ này để bạn chọn lựa phù hợp nhất. -1. Clone kho lưu trữ về máy tính của bạn. Bạn có thể làm điều này bằng cách nhấp nút **Code** và sao chép URL: +Chúng tôi khuyên dùng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) làm trình soạn thảo, có tích hợp sẵn [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Bạn có thể tải Visual Studio Code [tại đây](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Sao chép kho lưu trữ của bạn về máy tính. Bạn có thể làm điều này bằng cách nhấp vào nút **Code** và sao chép URL: [CodeSpace](./images/createcodespace.png) -Sau đó, mở [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bên trong [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) và chạy lệnh sau, thay `` bằng URL bạn vừa sao chép: + + Sau đó, mở [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) trong [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) và chạy lệnh sau, thay thế `` bằng URL bạn vừa sao chép: ```bash git clone ``` -2. Mở thư mục trong Visual Studio Code. Bạn có thể làm điều này bằng cách nhấp vào **File** > **Open Folder** và chọn thư mục bạn vừa sao chép về. +2. Mở thư mục trong Visual Studio Code. Bạn có thể làm điều này bằng cách nhấp **File** > **Open Folder** và chọn thư mục bạn vừa sao chép. -> Tiện ích mở rộng Visual Studio Code được khuyên dùng: +> Các tiện ích mở rộng được khuyến nghị cho Visual Studio Code: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - để xem trước các trang HTML ngay trong Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - giúp bạn viết mã nhanh hơn +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - để xem trước các trang HTML trong Visual Studio Code +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - giúp bạn viết code nhanh hơn ## 📂 Mỗi bài học bao gồm: @@ -137,123 +147,123 @@ Sau đó, mở [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT - video bổ sung tùy chọn - bài kiểm tra khởi động trước bài học - bài học viết -- đối với các bài học dựa trên dự án, hướng dẫn từng bước cách xây dựng dự án +- đối với các bài học dự án, hướng dẫn từng bước cách xây dựng dự án - kiểm tra kiến thức - một thử thách - tài liệu đọc bổ sung - bài kiểm tra sau bài học [post-lesson quiz](https://ff-quizzes.netlify.app/web/) -> **Ghi chú về các bài kiểm tra:** Tất cả bài kiểm tra nằm trong thư mục Quiz-app, tổng cộng 48 bài với mỗi bài gồm ba câu hỏi. Chúng có thể truy cập [tại đây](https://ff-quizzes.netlify.app/web/). Ứng dụng kiểm tra có thể chạy cục bộ hoặc triển khai trên Azure; hãy làm theo hướng dẫn trong thư mục `quiz-app`. +> **Ghi chú về các bài kiểm tra**: Tất cả bài kiểm tra được chứa trong thư mục Quiz-app, tổng cộng 48 bài kiểm tra với mỗi bài gồm ba câu hỏi. Chúng có sẵn [ở đây](https://ff-quizzes.netlify.app/web/), ứng dụng quiz có thể chạy cục bộ hoặc triển khai lên Azure; làm theo hướng dẫn trong thư mục `quiz-app`. ## 🗃️ Các bài học -| | Tên Dự Án | Khái Niệm Được Dạy | Mục Tiêu Học Tập | Bài Học Liên Kết | Tác Giả | +| | Tên dự án | Khái niệm được dạy | Mục tiêu học tập | Bài học liên quan | Tác giả | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Bắt Đầu | Giới thiệu về Lập trình và Công cụ chuyên ngành | Tìm hiểu các nền tảng cơ bản đằng sau hầu hết ngôn ngữ lập trình và về phần mềm giúp các nhà phát triển chuyên nghiệp làm việc | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Bắt Đầu | Những điều cơ bản về GitHub, bao gồm làm việc nhóm | Cách sử dụng GitHub trong dự án của bạn, cách cộng tác với người khác trên mã nguồn | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Bắt Đầu | Khả năng tiếp cận (Accessibility) | Học những kiến thức cơ bản về khả năng tiếp cận trên web | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Cơ Bản | Các kiểu dữ liệu trong JavaScript | Những kiến thức cơ bản về các kiểu dữ liệu trong JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Cơ Bản | Các hàm và phương thức | Tìm hiểu về các hàm và phương thức để quản lý luồng logic ứng dụng | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | JS Cơ Bản | Tạo quyết định với JS | Học cách tạo điều kiện trong mã của bạn bằng các phương pháp ra quyết định | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Cơ Bản | Mảng và vòng lặp | Làm việc với dữ liệu sử dụng mảng và vòng lặp trong JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML trong thực hành | Xây dựng HTML để tạo một môi trường sinh thái trực tuyến, tập trung vào xây dựng bố cục | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS trong thực hành | Xây dựng CSS để tạo kiểu cho môi trường sinh thái trực tuyến, tập trung vào các kiến thức cơ bản về CSS bao gồm làm trang responsive | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closure trong JavaScript, thao tác DOM | Xây dựng JavaScript để làm cho môi trường sinh thái hoạt động như giao diện kéo/thả, tập trung vào closure và thao tác DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Xây dựng trò chơi đánh máy | Học cách sử dụng sự kiện bàn phím để điều khiển logic ứng dụng JavaScript của bạn | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Làm việc với trình duyệt | Tìm hiểu cách các trình duyệt hoạt động, lịch sử của chúng, và cách khởi tạo các phần tử đầu tiên của tiện ích trình duyệt | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Xây dựng biểu mẫu, gọi API và lưu biến trong bộ nhớ cục bộ (local storage) | Xây dựng các phần tử JavaScript của tiện ích trình duyệt để gọi API sử dụng biến lưu trong bộ nhớ cục bộ | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Các tiến trình nền trong trình duyệt, hiệu năng web | Sử dụng các tiến trình nền của trình duyệt để quản lý biểu tượng tiện ích; tìm hiểu về hiệu năng web và một số tối ưu hóa để cải thiện | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Phát triển trò chơi nâng cao với JavaScript | Tìm hiểu về kế thừa sử dụng cả lớp (Classes) và thành phần (Composition) và mẫu Pub/Sub, chuẩn bị cho việc xây dựng trò chơi | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Vẽ lên canvas | Tìm hiểu về API Canvas, được sử dụng để vẽ các phần tử lên màn hình | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Di chuyển các phần tử quanh màn hình | Khám phá cách các phần tử có thể chuyển động bằng tọa độ Đề-các và API Canvas | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Phát hiện va chạm | Làm cho các phần tử va chạm và phản ứng với nhau bằng phím bấm và cung cấp chức năng làm nguội để đảm bảo hiệu năng trò chơi | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Giữ điểm | Thực hiện các phép toán dựa trên trạng thái và hiệu năng của trò chơi | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Kết thúc và khởi động lại trò chơi | Tìm hiểu về kết thúc và khởi động lại trò chơi, bao gồm dọn dẹp tài nguyên và đặt lại giá trị biến | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | Mẫu HTML và các tuyến trong ứng dụng web | Học cách tạo khung kiến trúc cho website nhiều trang bằng cách dùng routing và mẫu HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Xây dựng biểu mẫu đăng nhập và đăng ký | Tìm hiểu cách xây dựng biểu mẫu và xử lý các quy trình xác thực | [Forms](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Các phương pháp lấy và sử dụng dữ liệu | Cách luồng dữ liệu đi vào và ra khỏi ứng dụng của bạn, cách lấy, lưu trữ và xử lý dữ liệu | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Khái niệm Quản lý trạng thái | Tìm hiểu cách ứng dụng của bạn giữ trạng thái và cách quản lý nó bằng lập trình | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Làm việc với VScode | Tìm hiểu cách sử dụng trình soạn thảo mã | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Làm việc với AI | Học cách xây dựng trợ lý AI riêng của bạn | [AI Assistant project](./9-chat-project/README.md) | Chris | +| 01 | Bắt đầu | Giới thiệu về Lập trình và Công cụ | Tìm hiểu các nguyên lý cơ bản đằng sau hầu hết các ngôn ngữ lập trình và phần mềm giúp các lập trình viên làm việc chuyên nghiệp | [Giới thiệu về Ngôn ngữ lập trình và Công cụ](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Bắt đầu | Các kiến thức cơ bản về GitHub, làm việc nhóm | Cách sử dụng GitHub trong dự án của bạn, cách cộng tác với người khác trên cùng một mã nguồn | [Giới thiệu GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Bắt đầu | Khả năng truy cập | Học các kiến thức cơ bản về khả năng truy cập web | [Các kiến thức cơ bản về truy cập](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS Cơ bản | Các kiểu dữ liệu trong JavaScript | Các kiến thức cơ bản về kiểu dữ liệu trong JavaScript | [Kiểu dữ liệu](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS Cơ bản | Hàm và Phương thức | Tìm hiểu về hàm và phương thức để quản lý luồng logic ứng dụng | [Hàm và Phương thức](./2-js-basics/2-functions-methods/README.md) | Jasmine và Christopher | +| 06 | JS Cơ bản | Lập quyết định với JS | Học cách tạo các điều kiện trong mã bằng các phương pháp quyết định | [Lập quyết định](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS Cơ bản | Mảng và vòng lặp | Làm việc với dữ liệu sử dụng mảng và vòng lặp trong JavaScript | [Mảng và vòng lặp](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML thực hành | Tạo HTML để xây dựng một terrarium trực tuyến, tập trung vào xây dựng bố cục | [Giới thiệu HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS thực hành | Viết CSS để tạo kiểu cho terrarium trực tuyến, tập trung vào các kiến thức cơ bản của CSS bao gồm làm cho trang phản hồi | [Giới thiệu CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | Đóng gói JavaScript, thao tác DOM | Viết JavaScript để làm cho terrarium có thể thao tác kéo thả, tập trung vào đóng gói và thao tác DOM | [Đóng gói JavaScript, thao tác DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Trò chơi đánh máy](./4-typing-game/solution/README.md) | Xây dựng trò chơi đánh máy | Học cách sử dụng các sự kiện bàn phím để điều khiển logic của ứng dụng JavaScript | [Lập trình hướng sự kiện](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Tiện ích mở rộng trình duyệt Xanh](./5-browser-extension/solution/README.md) | Làm việc với trình duyệt | Hiểu về hoạt động của trình duyệt, lịch sử và cách tạo cấu trúc các phần tử đầu tiên của tiện ích mở rộng trình duyệt | [Về trình duyệt](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Tiện ích mở rộng trình duyệt Xanh](./5-browser-extension/solution/README.md) | Xây dựng biểu mẫu, gọi API và lưu biến trong bộ nhớ local | Xây dựng các phần tử JavaScript của tiện ích mở rộng trình duyệt để gọi API sử dụng biến lưu trong bộ nhớ local | [API, Biểu mẫu và Bộ nhớ Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Tiện ích mở rộng trình duyệt Xanh](./5-browser-extension/solution/README.md) | Quá trình nền trong trình duyệt, hiệu suất web | Sử dụng các tiến trình nền của trình duyệt để quản lý biểu tượng tiện ích; tìm hiểu về hiệu suất web và một số tối ưu cho nó | [Tác vụ nền và hiệu suất](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Trò chơi không gian](./6-space-game/solution/README.md) | Phát triển trò chơi nâng cao với JavaScript | Tìm hiểu về Kế thừa sử dụng cả Lớp và Thành phần cũng như mẫu Pub/Sub, chuẩn bị cho việc xây dựng game | [Giới thiệu phát triển game nâng cao](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Trò chơi không gian](./6-space-game/solution/README.md) | Vẽ lên canvas | Tìm hiểu API Canvas, được dùng để vẽ các phần tử lên màn hình | [Vẽ lên Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Trò chơi không gian](./6-space-game/solution/README.md) | Di chuyển các phần tử trên màn hình | Khám phá cách các phần tử có thể chuyển động sử dụng tọa độ Đề-các và API Canvas | [Di chuyển phần tử](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Trò chơi không gian](./6-space-game/solution/README.md) | Phát hiện va chạm | Làm cho các phần tử va chạm và phản ứng với nhau bằng phím bấm và cung cấp hàm hồi chiếu để đảm bảo hiệu suất game | [Phát hiện va chạm](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Trò chơi không gian](./6-space-game/solution/README.md) | Ghi điểm | Thực hiện các phép tính toán dựa trên trạng thái và hiệu suất của trò chơi | [Ghi điểm](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Trò chơi không gian](./6-space-game/solution/README.md) | Kết thúc và khởi động lại trò chơi | Tìm hiểu cách kết thúc và khởi động lại trò chơi, bao gồm dọn dẹp tài nguyên và đặt lại giá trị biến | [Điều kiện kết thúc](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Mẫu HTML và Router trong ứng dụng web | Học cách tạo khung kiến trúc cho website nhiều trang sử dụng routing và mẫu HTML | [Mẫu HTML và Router](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Xây dựng Biểu mẫu Đăng nhập và Đăng ký | Tìm hiểu cách xây dựng biểu mẫu và xử lý các quy trình xác thực | [Biểu mẫu](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Các phương pháp lấy và sử dụng dữ liệu | Cách dữ liệu chảy vào ra ứng dụng của bạn, cách lấy dữ liệu, lưu trữ, và xử lý | [Dữ liệu](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Ứng dụng Ngân hàng](./7-bank-project/solution/README.md) | Các khái niệm quản lý trạng thái | Tìm hiểu cách ứng dụng của bạn giữ trạng thái và cách quản lý lập trình | [Quản lý trạng thái](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Mã trình soạn thảo Browser/VScode](../../8-code-editor) | Làm việc với VScode | Tìm hiểu cách sử dụng trình soạn thảo mã | [Sử dụng trình soạn thảo VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [Trợ lý AI](./9-chat-project/README.md) | Làm việc với AI | Tìm hiểu cách xây dựng trợ lý AI cho riêng bạn | [Dự án trợ lý AI](./9-chat-project/README.md) | Chris | ## 🏫 Phương pháp giảng dạy -Chương trình của chúng tôi được thiết kế dựa trên hai nguyên tắc giáo dục chính: -* học dựa trên dự án -* kiểm tra định kỳ +Chương trình học của chúng tôi được thiết kế với hai nguyên tắc sư phạm chính: +* học theo dự án +* các bài kiểm tra thường xuyên -Chương trình dạy các kiến thức cơ bản về JavaScript, HTML và CSS, cũng như các công cụ và kỹ thuật mới nhất được các nhà phát triển web hiện nay sử dụng. Học viên sẽ có cơ hội trải nghiệm thực hành thông qua việc xây dựng trò chơi đánh máy, môi trường sinh thái ảo, tiện ích mở rộng trình duyệt thân thiện môi trường, trò chơi kiểu không gian xâm lược và một ứng dụng ngân hàng dành cho doanh nghiệp. Đến cuối chuỗi bài học, học viên sẽ thu được hiểu biết vững chắc về phát triển web. +Chương trình giảng dạy dạy các kiến thức cơ bản của JavaScript, HTML và CSS, cũng như các công cụ và kỹ thuật mới nhất được các nhà phát triển web ngày nay sử dụng. Học viên sẽ có cơ hội thực hành xây dựng trò chơi đánh máy, terrarium ảo, tiện ích mở rộng trình duyệt thân thiện với môi trường, trò chơi kiểu không gian xâm lược và ứng dụng ngân hàng cho doanh nghiệp. Đến cuối chuỗi bài học, học viên sẽ có được hiểu biết vững chắc về phát triển web. -> 🎓 Bạn có thể bắt đầu với vài bài học đầu tiên trong chương trình này như một [Lộ trình học](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) trên Microsoft Learn! +> 🎓 Bạn có thể học một vài bài đầu tiên trong chương trình này như một [Lộ trình Học tập](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) trên Microsoft Learn! -Bằng cách đảm bảo nội dung phù hợp với các dự án, quá trình học được làm thú vị hơn cho học viên và việc ghi nhớ các khái niệm cũng được tăng cường. Chúng tôi cũng đã viết một số bài học khởi đầu về cơ bản JavaScript để giới thiệu các khái niệm, kèm theo video từ bộ sưu tập "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", trong đó một số tác giả đã góp phần cho chương trình này. +Bằng cách đảm bảo nội dung phù hợp với các dự án, quá trình học trở nên hấp dẫn hơn đối với học viên và tăng hiệu quả ghi nhớ các khái niệm. Chúng tôi cũng đã viết một số bài học khởi đầu về JavaScript cơ bản để giới thiệu các khái niệm, kết hợp với video từ bộ sưu tập "[Series cho người mới bắt đầu với JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", trong đó một số tác giả đã đóng góp cho chương trình học này. -Ngoài ra, một bài kiểm tra nhẹ trước lớp đặt mục tiêu học tập cho học sinh, trong khi bài kiểm tra thứ hai sau lớp đảm bảo việc ghi nhớ sâu thêm. Chương trình này được thiết kế linh hoạt và thú vị, có thể học toàn bộ hoặc từng phần. Các dự án bắt đầu nhỏ và ngày càng phức tạp hơn vào cuối chu kỳ 12 tuần. +Ngoài ra, một bài kiểm tra thấp điểm trước lớp giúp học viên tạo động lực học tập theo chủ đề, trong khi bài kiểm tra thứ hai sau lớp giúp củng cố kiến thức. Chương trình học này được thiết kế linh hoạt và thú vị, có thể học toàn bộ hoặc từng phần. Các dự án bắt đầu từ nhỏ và trở nên phức tạp hơn theo chu kỳ 12 tuần. -Mặc dù chúng tôi có chủ ý tránh giới thiệu các framework JavaScript để tập trung vào các kỹ năng cơ bản cần thiết cho nhà phát triển web trước khi áp dụng framework, bước tiếp theo tốt để hoàn thành chương trình này là học về Node.js qua bộ video khác: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Mặc dù chúng tôi đặc biệt tránh giới thiệu các framework JavaScript để tập trung vào kỹ năng cơ bản cần thiết cho lập trình viên web trước khi sử dụng framework, bước tiếp theo tốt để hoàn thành chương trình này là học về Node.js qua một bộ video khác: "[Series cho người mới bắt đầu với Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Truy cập [Bộ Quy tắc Ứng xử](CODE_OF_CONDUCT.md) và [Hướng Dẫn Góp Phần](CONTRIBUTING.md) của chúng tôi. Chúng tôi hoan nghênh phản hồi mang tính xây dựng của bạn! +> Tham khảo [Quy tắc ứng xử](CODE_OF_CONDUCT.md) và [Hướng dẫn đóng góp](CONTRIBUTING.md) của chúng tôi. Chúng tôi rất hoan nghênh các phản hồi mang tính xây dựng của bạn! ## 🧭 Truy cập ngoại tuyến -Bạn có thể chạy tài liệu này ngoại tuyến bằng cách sử dụng [Docsify](https://docsify.js.org/#/). Sao chép repo này, [cài đặt Docsify](https://docsify.js.org/#/quickstart) trên máy cục bộ của bạn, rồi trong thư mục gốc của repo này, gõ `docsify serve`. Website sẽ chạy trên cổng 3000 tại localhost của bạn: `localhost:3000`. +Bạn có thể chạy tài liệu này ngoại tuyến bằng cách sử dụng [Docsify](https://docsify.js.org/#/). Fork kho lưu trữ này, [cài đặt Docsify](https://docsify.js.org/#/quickstart) trên máy của bạn, sau đó ở thư mục gốc của kho lưu trữ này, gõ lệnh `docsify serve`. Website sẽ được phục vụ trên cổng 3000 tại localhost của bạn: `localhost:3000`. ## 📘 PDF +Một tệp PDF của tất cả các bài học có thể được tìm thấy [tại đây](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). -File PDF tất cả các bài học có thể tìm thấy [tại đây](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +## 🎒 Các Khóa Học Khác -## 🎒 Các khóa học khác -Nhóm của chúng tôi còn sản xuất các khóa học khác! Hãy xem: +Nhóm của chúng tôi cũng sản xuất các khóa học khác! Hãy xem: ### LangChain -[![LangChain4j cho Người mới bắt đầu](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) -[![LangChain.js cho Người mới bắt đầu](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) -[![LangChain cho Người mới bắt đầu](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- ### Azure / Edge / MCP / Agents -[![AZD cho Người mới bắt đầu](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Edge AI cho Người mới bắt đầu](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP cho Người mới bắt đầu](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![AI Agents cho Người mới bắt đầu](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- - -### Chuỗi AI Tạo Sinh -[![AI Tạo Sinh cho Người mới bắt đầu](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![AI Tạo Sinh (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) -[![AI Tạo Sinh (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) -[![AI Tạo Sinh (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) + +### Chuỗi AI Sinh Tạo +[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) +[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) +[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- - -### Học Tập Cơ Bản -[![ML cho Người mới bắt đầu](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![Khoa học Dữ liệu cho Người mới bắt đầu](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![AI cho Người mới bắt đầu](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) -[![An ninh mạng cho Người mới bắt đầu](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![Phát triển Web cho Người mới bắt đầu](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![IoT cho Người mới bắt đầu](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![Phát triển XR cho Người mới bắt đầu](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) + +### Học Tập Cốt Lõi +[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- - + ### Chuỗi Copilot -[![Copilot cho Lập trình Đôi AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) -[![Copilot cho C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) -[![Phiêu lưu Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) +[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## Nhận Hỗ Trợ +## 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. Tham gia cùng các học viên và nhà phát triển có kinh nghiệm trong các cuộc thảo luận về MCP. Đây là một cộng đồng hỗ trợ nơi các câu hỏi luôn được chào đón và kiến thức được chia sẻ tự do. +Nếu bạn gặp khó khăn hoặc có bất kỳ câu hỏi nào về việc xây dựng ứng dụng AI, hãy tham gia cùng những người học khác và các nhà phát triển giàu kinh nghiệm trong các cuộc thảo luận về MCP. Đây là một cộng đồng hỗ trợ nơi các câu hỏi được chào đón và kiến thức được chia sẻ tự do. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Nếu bạn có phản hồi về sản phẩm hoặc gặp lỗi khi xây dựng, hãy truy cập: +Nếu bạn có phản hồi về sản phẩm hoặc gặp lỗi trong quá trình phát triển, hãy truy cập: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) @@ -264,6 +274,6 @@ Kho lưu trữ này được cấp phép theo giấy phép MIT. Xem tệp [LICEN --- -**Tuyên bố miễn trừ trách nhiệm**: -Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn chính thức và đáng tin cậy. Đối với các thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm về bất kỳ sự hiểu nhầm hoặc giải thích sai nào phát sinh từ việc sử dụng bản dịch này. +**Tuyên bố từ chối trách nhiệm**: +Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, vui lòng lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc sự không chính xác. Tài liệu gốc bằng ngôn ngữ gốc nên được xem là nguồn tin chính thức. Đối với thông tin quan trọng, khuyến nghị sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm đối với bất kỳ sự hiểu lầm hoặc giải thích sai nào phát sinh từ việc sử dụng bản dịch này. \ No newline at end of file