|
3 weeks ago | |
---|---|---|
.. | ||
1-getting-started-lessons | 3 weeks ago | |
2-js-basics | 3 weeks ago | |
3-terrarium | 3 weeks ago | |
4-typing-game | 3 weeks ago | |
5-browser-extension | 3 weeks ago | |
6-space-game | 3 weeks ago | |
7-bank-project | 3 weeks ago | |
8-code-editor/1-using-a-code-editor | 3 weeks ago | |
docs | 3 weeks ago | |
lesson-template | 3 weeks ago | |
quiz-app | 3 weeks ago | |
CODE_OF_CONDUCT.md | 3 weeks ago | |
CONTRIBUTING.md | 3 weeks ago | |
README.md | 3 weeks ago | |
SECURITY.md | 3 weeks ago | |
SUPPORT.md | 3 weeks ago | |
_404.md | 3 weeks ago | |
for-teachers.md | 3 weeks ago |
README.md
פיתוח אתרים למתחילים - תוכנית לימודים
למדו את יסודות פיתוח האתרים עם קורס מקיף בן 12 שבועות מבית Microsoft Cloud Advocates. כל אחד מ-24 השיעורים מתמקד ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרריומים, תוספי דפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ומשימות מעשיות. שפרו את המיומנויות שלכם והעמיקו את הידע שלכם עם שיטת הלימוד מבוססת הפרויקטים שלנו. התחילו את מסע הקידוד שלכם עוד היום!
🧑🎓 אתם סטודנטים?
בקרו ב-עמוד הסטודנטים שם תמצאו משאבים למתחילים, חבילות לסטודנטים ואפילו דרכים לקבל שובר לתעודה בחינם. זהו עמוד שכדאי לשמור ולבדוק מדי פעם, שכן אנו מעדכנים את התוכן מדי חודש.
📣 הודעה - תוכנית לימודים חדשה על בינה מלאכותית גנרטיבית ל-JavaScript
אל תפספסו את תוכנית הלימודים החדשה שלנו על בינה מלאכותית גנרטיבית!
בקרו ב-https://aka.ms/genai-js-course כדי להתחיל!

- שיעורים המכסים הכל מהבסיס ועד RAG.
- אינטראקציה עם דמויות היסטוריות באמצעות GenAI ואפליקציית הליווי שלנו.
- נרטיב מהנה ומרתק - תסעו בזמן!

כל שיעור כולל משימה לביצוע, בדיקת ידע ואתגר שיעזרו לכם ללמוד נושאים כמו:
- הנחיה והנדסת הנחיות
- יצירת אפליקציות טקסט ותמונה
- אפליקציות חיפוש
בקרו ב-https://aka.ms/genai-js-course כדי להתחיל!
🌱 התחלה
מורים, כללנו כמה הצעות כיצד להשתמש בתוכנית הלימודים הזו. נשמח לשמוע את דעתכם בפורום הדיונים שלנו!
לומדים, לכל שיעור התחילו בחידון מקדים, המשיכו בקריאת חומרי השיעור, השלימו את הפעילויות השונות ובדקו את הבנתכם עם החידון המסכם.
כדי לשפר את חוויית הלמידה שלכם, התחברו עם חברים כדי לעבוד יחד על הפרויקטים! דיונים מעודדים ב-פורום הדיונים שלנו שם צוות המנחים שלנו יהיה זמין לענות על שאלותיכם.
כדי להעמיק את הלימודים שלכם, אנו ממליצים בחום לחקור את Microsoft Learn למקורות לימוד נוספים.
📋 הגדרת סביבת העבודה שלכם
לתוכנית הלימודים הזו יש סביבת פיתוח מוכנה לשימוש! כשאתם מתחילים, תוכלו לבחור להריץ את התוכנית ב-Codespace (סביבה מבוססת דפדפן, ללא צורך בהתקנות), או מקומית על המחשב שלכם באמצעות עורך טקסט כמו Visual Studio Code.
יצירת מאגר משלכם
כדי לשמור בקלות על העבודה שלכם, מומלץ ליצור עותק משלכם של מאגר זה. תוכלו לעשות זאת על ידי לחיצה על כפתור Use this template בראש העמוד. פעולה זו תיצור מאגר חדש בחשבון ה-GitHub שלכם עם עותק של תוכנית הלימודים.
בצעו את השלבים הבאים:
- פיצול המאגר: לחצו על כפתור "Fork" בפינה הימנית העליונה של עמוד זה.
- שכפול המאגר:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
הרצת התוכנית ב-Codespace
בעותק שלכם של מאגר זה שיצרתם, לחצו על כפתור Code ובחרו Open with Codespaces. פעולה זו תיצור Codespace חדש שבו תוכלו לעבוד.

הרצת התוכנית מקומית על המחשב שלכם
כדי להריץ את התוכנית מקומית על המחשב שלכם, תצטרכו עורך טקסט, דפדפן וכלי שורת פקודה. השיעור הראשון שלנו, מבוא לשפות תכנות וכלי עבודה, ידריך אתכם באפשרויות השונות לכלים אלו כדי שתוכלו לבחור את מה שמתאים לכם ביותר.
ההמלצה שלנו היא להשתמש ב-Visual Studio Code כעורך שלכם, הכולל גם טרמינל מובנה. תוכלו להוריד את Visual Studio Code כאן.
-
שכפלו את המאגר שלכם למחשב. תוכלו לעשות זאת על ידי לחיצה על כפתור Code והעתקת ה-URL:
לאחר מכן, פתחו טרמינל בתוך Visual Studio Code והריצו את הפקודה הבאה, תוך החלפת
<your-repository-url>
ב-URL שהעתקתם:git clone <your-repository-url>
-
פתחו את התיקייה ב-Visual Studio Code. תוכלו לעשות זאת על ידי לחיצה על File > Open Folder ובחירת התיקייה ששכפלתם.
תוספים מומלצים ל-Visual Studio Code:
- Live Server - לצפייה מקדימה של דפי HTML בתוך Visual Studio Code
- Copilot - לעזור לכם לכתוב קוד מהר יותר
📂 כל שיעור כולל:
- איור סקיצה אופציונלי
- סרטון משלים אופציונלי
- חידון חימום לפני השיעור
- שיעור כתוב
- עבור שיעורים מבוססי פרויקטים, מדריכים שלב-אחר-שלב לבניית הפרויקט
- בדיקות ידע
- אתגר
- קריאה משלימה
- משימה
- חידון מסכם
הערה לגבי חידונים: כל החידונים נמצאים בתיקיית Quiz-app, 48 חידונים בסך הכל, כל אחד עם שלוש שאלות. הם מקושרים מתוך השיעורים וניתן להריץ את אפליקציית החידונים מקומית או לפרוס אותה ב-Azure; עקבו אחר ההוראות בתיקיית
quiz-app
. החידונים מתורגמים בהדרגה.
🗃️ שיעורים
שם הפרויקט | נושאים נלמדים | מטרות למידה | קישור לשיעור | מחבר | |
---|---|---|---|---|---|
01 | התחלה | מבוא לתכנות וכלי עבודה | למדו את היסודות שמאחורי רוב שפות התכנות ואת התוכנות שעוזרות למפתחים מקצועיים לבצע את עבודתם | מבוא לשפות תכנות וכלי עבודה | ג'סמין |
02 | התחלה | יסודות GitHub, כולל עבודה בצוות | כיצד להשתמש ב-GitHub בפרויקט שלכם, וכיצד לשתף פעולה עם אחרים על בסיס קוד | מבוא ל-GitHub | פלור |
03 | התחלה | נגישות | למדו את היסודות של נגישות אתרים | יסודות נגישות | כריסטופר |
04 | יסודות JS | סוגי נתונים ב-JavaScript | היסודות של סוגי נתונים ב-JavaScript | סוגי נתונים | ג'סמין |
05 | יסודות JS | פונקציות ושיטות | למדו על פונקציות ושיטות לניהול זרימת הלוגיקה של האפליקציה שלכם | פונקציות ושיטות | ג'סמין וכריסטופר |
06 | יסודות JS | קבלת החלטות עם JS | למדו כיצד ליצור תנאים בקוד שלכם באמצעות שיטות קבלת החלטות | קבלת החלטות | ג'סמין |
07 | יסודות JS | מערכים ולולאות | עבודה עם נתונים באמצעות מערכים ולולאות ב-JavaScript | מערכים ולולאות | ג'סמין |
08 | טרריום | HTML בפועל | בנו את ה-HTML ליצירת טרריום מקוון, תוך התמקדות בבניית פריסה | מבוא ל-HTML | ג'ן |
09 | טרריום | CSS בפועל | בנו את ה-CSS לעיצוב הטרריום המקוון, תוך התמקדות ביסודות ה-CSS כולל הפיכת הדף לרספונסיבי | מבוא ל-CSS | ג'ן |
10 | טרריום | סגירות ב-JavaScript, מניפולציה של DOM | בנו את ה-JavaScript כדי לגרום לטרריום לפעול כממשק גרירה ושחרור, תוך התמקדות בסגירות ובמניפולציה של DOM | סגירות ב-JavaScript, מניפולציה של DOM | ג'ן |
11 | משחק הקלדה | בניית משחק הקלדה | למדו כיצד להשתמש באירועי מקלדת כדי להניע את הלוגיקה של אפליקציית ה-JavaScript שלכם | תכנות מונחה אירועים | כריסטופר |
12 | Green Browser Extension | עבודה עם דפדפנים | למדו כיצד דפדפנים פועלים, ההיסטוריה שלהם, וכיצד לבנות את האלמנטים הראשונים של תוסף לדפדפן | אודות דפדפנים | Jen |
13 | Green Browser Extension | בניית טופס, קריאה ל-API ואחסון משתנים באחסון מקומי | בנו את האלמנטים של JavaScript בתוסף הדפדפן שלכם כדי לקרוא ל-API באמצעות משתנים המאוחסנים באחסון מקומי | APIs, טפסים ואחסון מקומי | Jen |
14 | Green Browser Extension | תהליכים ברקע בדפדפן, ביצועי רשת | השתמשו בתהליכי הרקע של הדפדפן כדי לנהל את האייקון של התוסף; למדו על ביצועי רשת וכמה אופטימיזציות לשיפור | משימות רקע וביצועים | Jen |
15 | Space Game | פיתוח משחק מתקדם יותר עם JavaScript | למדו על ירושה באמצעות מחלקות וקומפוזיציה ועל תבנית Pub/Sub, כהכנה לבניית משחק | מבוא לפיתוח משחק מתקדם | Chris |
16 | Space Game | ציור על קנבס | למדו על Canvas API, המשמש לציור אלמנטים על המסך | ציור על קנבס | Chris |
17 | Space Game | הזזת אלמנטים על המסך | גלו כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-Canvas API | הזזת אלמנטים | Chris |
18 | Space Game | זיהוי התנגשויות | גרמו לאלמנטים להתנגש ולהגיב זה לזה באמצעות לחיצות מקשים, והוסיפו פונקציית קירור לשמירה על ביצועי המשחק | זיהוי התנגשויות | Chris |
19 | Space Game | שמירת ניקוד | בצעו חישובים מתמטיים בהתבסס על מצב המשחק והביצועים | שמירת ניקוד | Chris |
20 | Space Game | סיום והתחלה מחדש של המשחק | למדו על סיום והתחלה מחדש של המשחק, כולל ניקוי משאבים ואיפוס ערכי משתנים | תנאי סיום | Chris |
21 | Banking App | תבניות HTML ונתיבים באפליקציית רשת | למדו כיצד ליצור את המבנה של ארכיטקטורת אתר מרובה עמודים באמצעות נתיבים ותבניות HTML | תבניות HTML ונתיבים | Yohan |
22 | Banking App | בניית טופס התחברות ורישום | למדו על בניית טפסים וטיפול ברוטינות אימות | טפסים | Yohan |
23 | Banking App | שיטות לשליפת נתונים ושימוש בהם | כיצד נתונים זורמים פנימה והחוצה מהאפליקציה שלכם, כיצד לשלוף אותם, לאחסן אותם ולהיפטר מהם | נתונים | Yohan |
24 | Banking App | מושגים של ניהול מצב | למדו כיצד האפליקציה שלכם שומרת מצב וכיצד לנהל אותו בצורה תכנותית | ניהול מצב | Yohan |
🏫 פדגוגיה
תוכנית הלימודים שלנו עוצבה עם שני עקרונות פדגוגיים מרכזיים:
- למידה מבוססת פרויקטים
- חידונים תכופים
התוכנית מלמדת את יסודות JavaScript, HTML ו-CSS, כמו גם את הכלים והטכניקות העדכניים ביותר בהם משתמשים מפתחי רשת כיום. התלמידים יקבלו הזדמנות לצבור ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון פולש מהחלל, ואפליקציית בנקאות לעסקים. בסוף הסדרה, התלמידים ירכשו הבנה מוצקה של פיתוח רשת.
🎓 ניתן לקחת את השיעורים הראשונים בתוכנית זו כ-מסלול למידה ב-Microsoft Learn!
על ידי התאמת התוכן לפרויקטים, התהליך הופך למרתק יותר עבור התלמידים ושימור המושגים משתפר. בנוסף, כתבנו מספר שיעורי פתיחה ביסודות JavaScript להיכרות עם מושגים, יחד עם סרטון מתוך "סדרת מתחילים: JavaScript", אוסף של מדריכי וידאו, שחלק מהכותבים שלהם תרמו לתוכנית זו.
בנוסף, חידון קליל לפני השיעור מכוון את כוונת התלמיד ללמידת הנושא, בעוד חידון שני לאחר השיעור מבטיח שימור נוסף. תוכנית הלימודים עוצבה להיות גמישה ומהנה וניתן לקחת אותה בשלמותה או בחלקים. הפרויקטים מתחילים קטנים והופכים למורכבים יותר בסוף מחזור של 12 שבועות.
בעוד שבכוונה נמנענו מהכנסת מסגרות JavaScript כדי להתמקד בכישורים הבסיסיים הנדרשים כמפתח רשת לפני אימוץ מסגרת, הצעד הבא המומלץ לאחר השלמת תוכנית זו יהיה ללמוד על Node.js באמצעות אוסף נוסף של סרטונים: "סדרת מתחילים: Node.js".
בקרו ב-קוד ההתנהגות וב-הנחיות התרומה שלנו. נשמח לקבל את המשוב הבונה שלכם!
🧭 גישה לא מקוונת
ניתן להפעיל את התיעוד הזה במצב לא מקוון באמצעות Docsify. עשו Fork למאגר זה, התקינו את Docsify במחשב המקומי שלכם, ואז בתיקיית השורש של מאגר זה, הקלידו docsify serve
. האתר יפעל על פורט 3000 ב-localhost שלכם: localhost:3000
.
ניתן למצוא PDF של כל השיעורים כאן.
🎒 קורסים נוספים
הצוות שלנו מייצר קורסים נוספים! בדקו:
- בינה מלאכותית גנרטיבית למתחילים
- בינה מלאכותית גנרטיבית למתחילים .NET
- בינה מלאכותית גנרטיבית עם JavaScript
- בינה מלאכותית גנרטיבית עם Java
- בינה מלאכותית למתחילים
- מדע נתונים למתחילים
- למידת מכונה למתחילים
- סייבר למתחילים
- פיתוח רשת למתחילים
- IoT למתחילים
- פיתוח XR למתחילים
- שליטה ב-GitHub Copilot לשימוש סוכני
- שליטה ב-GitHub Copilot למפתחים ב-C#/.NET
- בחרו את הרפתקת ה-Copilot שלכם
רישיון
מאגר זה מורשה תחת רישיון MIT. ראו את קובץ LICENSE למידע נוסף.
כתב ויתור:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית Co-op Translator. למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי אדם. איננו נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.