36 KiB
פיתוח אתרים למתחילים - תוכנית לימודים
למדו את יסודות פיתוח האתרים עם הקורס המקיף שלנו בן 12 שבועות בהנחיית Microsoft Cloud Advocates. כל אחד מ-24 השיעורים מתמקד ב-JavaScript, CSS ו-HTML דרך פרויקטים מעשיים כמו טרריומים, הרחבות לדפדפן ומשחקי חלל. השתתפו בחידונים, דיונים ומשימות מעשיות. שפרו את הכישורים שלכם וייעלו את שימור הידע שלכם עם הפדגוגיה האפקטיבית שלנו המבוססת על פרויקטים. התחילו את מסע הקידוד שלכם היום!
הצטרפו לקהילת Azure AI Foundry Discord
עקבו אחר השלבים הבאים כדי להתחיל להשתמש במשאבים אלו:
- צרו מזלג למאגר: לחצו
- שכפלו את המאגר:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - הצטרפו ל-Azure AI Foundry Discord ופגשו מומחים ומפתחים נוספים
🌐 תמיכה רב-שפתית
נתמך באמצעות GitHub Action (אוטומטי ותמיד מעודכן)
ערבית | בנגלית | בולגרית | בורמזית (מיאנמר) | סינית (פשוטה) | סינית (מסורתית, הונג קונג) | סינית (מסורתית, מקאו) | סינית (מסורתית, טייוואן) | קרואטית | צ'כית | דנית | הולנדית | אסטונית | פינית | צרפתית | גרמנית | יוונית | עברית | הינדית | הונגרית | אינדונזית | איטלקית | יפנית | קוריאנית | ליטאית | מלאית | מרטהי | נפאלית | נורווגית | פרסית (פארסי) | פולנית | פורטוגזית (ברזיל) | פורטוגזית (פורטוגל) | פונג'בית (גורמוקי) | רומנית | רוסית | סרבית (קירילית) | סלובקית | סלובנית | ספרדית | סוואהילית | שוודית | טאגאלוג (פיליפינית) | טמילית | תאית | טורקית | אוקראינית | אורדו | וייטנאמית
אם תרצו להוסיף שפות נוספות, רשימת השפות הנתמכות נמצאת כאן
🧑🎓 האם אתם סטודנטים?
בקרו ב-עמוד הסטודנטים שם תמצאו משאבים למתחילים, חבילות לסטודנטים ואפילו דרכים לקבל שובר לתעודה בחינם. זהו עמוד שכדאי לשמור ולבדוק מדי פעם, שכן אנו מעדכנים את התוכן מדי חודש.
📣 הודעה - אתגרי מצב סוכן חדש של GitHub Copilot להשלמה!
אתגר חדש נוסף, חפשו את "GitHub Copilot Agent Challenge 🚀" ברוב הפרקים. זהו אתגר חדש עבורכם להשלמה באמצעות GitHub Copilot ומצב סוכן. אם לא השתמשתם במצב סוכן בעבר, הוא מסוגל לא רק לייצר טקסט אלא גם ליצור ולערוך קבצים, להריץ פקודות ועוד.
📣 הודעה - פרויקט חדש לבנייה באמצעות AI גנרטיבי
פרויקט עוזר AI חדש נוסף, בדקו אותו פרויקט
📣 הודעה - תוכנית לימודים חדשה על AI גנרטיבי ל-JavaScript שוחררה
אל תפספסו את תוכנית הלימודים החדשה שלנו על AI גנרטיבי!
בקרו ב-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 | התחלה | מבוא לתכנות וכלי העבודה | למדו את היסודות מאחורי רוב שפות התכנות ואת התוכנות שעוזרות למפתחים מקצועיים לבצע את עבודתם | מבוא לשפות תכנות וכלי העבודה | Jasmine |
| 02 | התחלה | יסודות GitHub, כולל עבודה בצוות | כיצד להשתמש ב-GitHub בפרויקט שלכם, כיצד לשתף פעולה עם אחרים על בסיס קוד | מבוא ל-GitHub | Floor |
| 03 | התחלה | נגישות | למדו את היסודות של נגישות באינטרנט | יסודות הנגישות | Christopher |
| 04 | יסודות JS | סוגי נתונים ב-JavaScript | היסודות של סוגי נתונים ב-JavaScript | סוגי נתונים | Jasmine |
| 05 | יסודות JS | פונקציות ושיטות | למדו על פונקציות ושיטות לניהול זרימת הלוגיקה של האפליקציה | פונקציות ושיטות | Jasmine and Christopher |
| 06 | יסודות JS | קבלת החלטות עם JS | למדו כיצד ליצור תנאים בקוד שלכם באמצעות שיטות קבלת החלטות | קבלת החלטות | Jasmine |
| 07 | יסודות JS | מערכים ולולאות | עבודה עם נתונים באמצעות מערכים ולולאות ב-JavaScript | מערכים ולולאות | Jasmine |
| 08 | טרריום | HTML בפועל | בניית HTML ליצירת טרריום מקוון, תוך התמקדות בבניית פריסה | מבוא ל-HTML | Jen |
| 09 | טרריום | CSS בפועל | בניית CSS לעיצוב הטרריום המקוון, תוך התמקדות ביסודות CSS כולל הפיכת הדף לרספונסיבי | מבוא ל-CSS | Jen |
| 10 | טרריום | סגירות JavaScript, מניפולציה של DOM | בניית JavaScript כדי לגרום לטרריום לפעול כממשק גרירה/שחרור, תוך התמקדות בסגירות ובמניפולציה של DOM | סגירות JavaScript, מניפולציה של DOM | Jen |
| 11 | משחק הקלדה | בניית משחק הקלדה | למדו כיצד להשתמש באירועי מקלדת כדי להניע את הלוגיקה של אפליקציית JavaScript שלכם | תכנות מונחה אירועים | Christopher |
| 12 | תוסף דפדפן ירוק | עבודה עם דפדפנים | למדו כיצד דפדפנים עובדים, ההיסטוריה שלהם, וכיצד לבנות את האלמנטים הראשונים של תוסף דפדפן | על דפדפנים | Jen |
| 13 | תוסף דפדפן ירוק | בניית טופס, קריאה ל-API ואחסון משתנים באחסון מקומי | בניית אלמנטים JavaScript של תוסף הדפדפן שלכם כדי לקרוא ל-API באמצעות משתנים המאוחסנים באחסון מקומי | APIs, טפסים ואחסון מקומי | Jen |
| 14 | תוסף דפדפן ירוק | תהליכים ברקע בדפדפן, ביצועי רשת | השתמשו בתהליכים ברקע של הדפדפן כדי לנהל את סמל התוסף; למדו על ביצועי רשת וכמה אופטימיזציות לשיפור | משימות ברקע וביצועים | Jen |
| 15 | משחק חלל | פיתוח משחק מתקדם יותר עם JavaScript | למדו על ירושה באמצעות גם מחלקות וגם קומפוזיציה ודפוס Pub/Sub, כהכנה לבניית משחק | מבוא לפיתוח משחק מתקדם | Chris |
| 16 | משחק חלל | ציור על קנבס | למדו על Canvas API, המשמש לציור אלמנטים על המסך | ציור על קנבס | Chris |
| 17 | משחק חלל | הזזת אלמנטים על המסך | גלו כיצד אלמנטים יכולים לקבל תנועה באמצעות קואורדינטות קרטזיות ו-Canvas API | הזזת אלמנטים על המסך | Chris |
| 18 | משחק חלל | זיהוי התנגשות | גרמו לאלמנטים להתנגש ולהגיב זה לזה באמצעות לחיצות מקשים וספקו פונקציית קירור כדי להבטיח ביצועי המשחק | זיהוי התנגשות | Chris |
| 19 | משחק חלל | שמירת ניקוד | בצעו חישובים מתמטיים בהתבסס על מצב המשחק וביצועיו | שמירת ניקוד | Chris |
| 20 | משחק חלל | סיום והתחלה מחדש של המשחק | למדו על סיום והתחלה מחדש של המשחק, כולל ניקוי נכסים ואיפוס ערכי משתנים | תנאי סיום | Chris |
| 21 | אפליקציית בנקאות | תבניות HTML ונתיבים באפליקציית רשת | למדו כיצד ליצור את המבנה של ארכיטקטורת אתר מרובה עמודים באמצעות נתיבים ותבניות HTML | תבניות HTML ונתיבים | Yohan |
| 22 | אפליקציית בנקאות | בניית טופס כניסה ורישום | למדו על בניית טפסים וטיפול ברוטינות אימות | טפסים | Yohan |
| 23 | אפליקציית בנקאות | שיטות של הבאת נתונים ושימוש בהם | כיצד נתונים זורמים פנימה והחוצה מהאפליקציה שלכם, כיצד להביא אותם, לאחסן אותם ולהיפטר מהם | נתונים | Yohan |
| 24 | אפליקציית בנקאות | מושגים של ניהול מצב | למדו כיצד האפליקציה שלכם שומרת מצב וכיצד לנהל אותו באופן תכנותי | ניהול מצב | Yohan |
| 25 | קוד דפדפן/VScode | עבודה עם VScode | למדו כיצד להשתמש בעורך קוד | שימוש בעורך קוד VScode | Chris |
| 26 | עוזרי AI | עבודה עם AI | למדו כיצד לבנות עוזר AI משלכם | פרויקט עוזר AI | Chris |
🏫 פדגוגיה
תוכנית הלימודים שלנו עוצבה עם שני עקרונות פדגוגיים מרכזיים:
- למידה מבוססת פרויקטים
- שאלונים תכופים
התוכנית מלמדת את יסודות JavaScript, HTML ו-CSS, כמו גם הכלים והטכניקות העדכניים ביותר בהם משתמשים מפתחי רשת כיום. התלמידים יקבלו הזדמנות לפתח ניסיון מעשי על ידי בניית משחק הקלדה, טרריום וירטואלי, תוסף דפדפן ידידותי לסביבה, משחק בסגנון פולש חלל ואפליקציית בנקאות לעסקים. בסוף הסדרה, התלמידים ירכשו הבנה מוצקה של פיתוח רשת.
🎓 ניתן לקחת את השיעורים הראשונים בתוכנית הלימודים הזו כ-מסלול למידה ב-Microsoft Learn!
על ידי הבטחת התאמת התוכן לפרויקטים, התהליך נעשה יותר מרתק עבור התלמידים ושימור המושגים יוגבר. בנוסף, כתבנו מספר שיעורי פתיחה ביסודות JavaScript כדי להציג מושגים, יחד עם סרטון מתוך אוסף "סדרת מתחילים ל-JavaScript" של מדריכי וידאו, שחלק מהכותבים שלהם תרמו לתוכנית הלימודים הזו.
בנוסף, שאלון בעל סיכון נמוך לפני השיעור מכוון את כוונת התלמיד ללמידת נושא, בעוד שאלון שני לאחר השיעור מבטיח שימור נוסף. תוכנית הלימודים הזו עוצבה להיות גמישה ומהנה וניתן לקחת אותה בשלמותה או בחלקים. הפרויקטים מתחילים קטנים והופכים מורכבים יותר בסוף מחזור של 12 שבועות.
בעוד שבכוונה נמנענו מהצגת מסגרות JavaScript כדי להתמקד במיומנויות הבסיסיות הנדרשות כמפתח רשת לפני אימוץ מסגרת, צעד טוב הבא לאחר השלמת תוכנית הלימודים הזו יהיה ללמוד על Node.js באמצעות אוסף נוסף של סרטונים: "סדרת מתחילים ל-Node.js".
בקרו ב-קוד ההתנהגות וב-הנחיות תרומה שלנו. נשמח לקבל את המשוב הבונה שלכם!
🧭 גישה לא מקוונת
ניתן להפעיל את התיעוד הזה באופן לא מקוון באמצעות Docsify. עשו Fork למאגר הזה, התקינו את Docsify במחשב המקומי שלכם, ואז בתיקיית השורש של המאגר הזה, הקלידו docsify serve. האתר יוגש על פורט 3000 ב-localhost שלכם: localhost:3000.
ניתן למצוא PDF של כל השיעורים כאן.
🎒 קורסים נוספים
הצוות שלנו מייצר קורסים נוספים! בדקו:
Azure / Edge / MCP / Agents
סדרת AI גנרטיבי
למידה בסיסית
סדרת Copilot
קבלת עזרה
אם אתם נתקעים או יש לכם שאלות על בניית אפליקציות AI, הצטרפו:
אם יש לכם משוב על מוצרים או שגיאות בזמן הבנייה, בקרו:
רישיון
מאגר זה מורשה תחת רישיון MIT. ראו את קובץ LICENSE למידע נוסף.
הצהרת אחריות:
מסמך זה תורגם באמצעות שירות תרגום AI Co-op Translator. למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. אנו לא נושאים באחריות לכל אי הבנות או פרשנויות שגויות הנובעות משימוש בתרגום זה.


