הערות מרצה - שיעור 3: המשחק שלך באינטרנט

1

שקף שער - המשחק שלך באינטרנט

00:00-03:00

שיעור 3 הוא שיעור "סגירת מעגל". בשני השיעורים הקודמים התלמידים בנו משחקים (Snake ו-Clicker), אבל הם "תקועים" במחשב המקומי. השיעור הזה לוקח אותם מ"סתם קבצים" לאתר אמיתי באינטרנט. זו חוויה מעצימה מאוד - הם יכולים לשלוח לינק לחברים ולמשפחה.

הקונספט המרכזי הוא שהתלמידים הופכים מ"בוני משחקים" ל"מנהלי סטודיו". הם לא רק יוצרים תוכן, אלא גם מארזים ומפיצים אותו - כמו חברת משחקים אמיתית.

שתף מסך עם המשחקים מהשיעורים הקודמים פתוחים בדפדפן - שים לב שהכתובת היא file:/// "ערב טוב לכולם! בואו נודה באמת. בנינו משחקים מטורפים - סנייק, קליקר. אבל מה זה שווה אם אף אחד לא יכול לשחק בהם חוץ מכם?"

הצבע על שורת הכתובת בדפדפן שמראה file:///C:/Users/... "תראו את הכתובת פה למעלה. file:///C:/Users/... - זה אומר שהקובץ תקוע אצלכם במחשב. אי אפשר לשלוח את זה בווטסאפ. אי אפשר להשוויץ באינסטגרם."

"היום אנחנו משנים את זה. עד סוף השיעור, לכל אחד מכם יהיה לינק אמיתי שאפשר לשלוח לכל אדם בעולם, והוא יוכל לשחק במשחקים שלכם מהנייד שלו."

"ולא רק לינק למשחק בודד - אנחנו הולכים לבנות אתר פורטפוליו, כמו סטודיו משחקים אמיתי, שמציג את כל היצירות שלכם."

הפתיחה צריכה להרגיש כמו "רגע של התבגרות". עד עכשיו שיחקו, היום הם הופכים למקצוענים. הדגישו את הכתובת file:/// - זה המוטיבציה להמשך השיעור. אם אפשר, הראו את זה בטלפון ותדגימו ש"אי אפשר לפתוח" - זה יוצר צורך אמיתי.

2

מה נלמד היום - שלושה דברים חדשים

1. מבנה פרויקט (Project Structure): איך מסדרים קבצים בתיקייה מסודרת. עד עכשיו זרקנו קבצים על שולחן העבודה, היום נלמד לעבוד כמו מקצוענים.

2. אתר פורטפוליו (Portfolio): דף בית מעוצב שמציג את כל המשחקים שלנו עם לינקים, תיאורים ואנימציות.

3. העלאה לאינטרנט (Deployment): לקחת את התיקייה מהמחשב ולהעלות אותה לאינטרנט - בגרירה אחת, בחינם, בלי שרתים.

"שלושה דברים חדשים היום:"

"מבנה פרויקט - איך מסדרים קבצים כמו מקצוענים. עד עכשיו זה היה בלגן על שולחן העבודה."

"אתר פורטפוליו - דף בית מעוצב שמציג את כל המשחקים שלכם. כמו דף נחיתה של חברת משחקים."

"העלאה לאינטרנט - ולזה מחכיתם. לינק שאפשר לשלוח לאמא, לחברים, לכל העולם."

ודאו שהתלמידים הביאו איתם את הקבצים מהשיעורים הקודמים (snake.html ו-clicker.html). אם מישהו לא הביא, אפשר ליצור אותם מחדש מהפרומפטים של שיעורים 1 ו-2. הכינו גיבוי של הקבצים למקרה הצורך.

3

הבעיה - תקוע במחשב

03:00-06:00

file:/// - כתובת שמצביעה על קובץ מקומי במחשב. רק מי שיושב מול אותו מחשב יכול לראות את הדף. אי אפשר לשתף אותו.

https:// - כתובת אינטרנט אמיתית. כל אדם בעולם עם חיבור אינטרנט יכול לגשת לכתובת הזו ולראות את האתר.

ה-"s" ב-https מסמן "secure" (מאובטח). זה אומר שהתקשורת בין הדפדפן לשרת מוצפנת. Netlify מספקת https אוטומטית ובחינם - עוד סיבה טובה להשתמש בה.

פתח את משחק הסנייק בדפדפן והצבע על שורת הכתובת "תראו את הכתובת שלי כאן למעלה. file:///C:/Users/danny/snake.html"

"המילה file אומרת שהדף הזה 'חי' רק במחשב שלי. אם אני שולח את הכתובת הזו לחבר, הוא מקבל שגיאה. כי הקובץ לא נמצא אצלו."

"מה שאנחנו רוצים זה להחליף את ה-file:/// ב-https:// - כתובת אינטרנט אמיתית שכל אחד יכול לפתוח."

"אבל לפני שאנחנו מעלים לאינטרנט, אנחנו צריכים לעשות סדר. אי אפשר להעלות קבצים מפוזרים - צריך תיקייה מסודרת."

אם יש לכם אפשרות, נסו באמת לשלוח את הכתובת file:/// לטלפון שלכם בווטסאפ ותראו שזה לא עובד. ההדגמה הוויזואלית של "שגיאה" על הנייד היא מוטיבציה חזקה. זה הופך בעיה מופשטת לבעיה מוחשית.

4

מבנה פרויקט - Project Structure

06:00-10:00

Project Structure - organized file and folder layout מבנה פרויקט הוא הדרך שבה מסדרים את כל הקבצים של הפרויקט בתיקיות.

בפרויקט שלנו, כל הקבצים צריכים להיות באותה תיקייה:
MyGameStudio/ - התיקייה הראשית
  index.html - דף הבית (הפורטפוליו)
  snake.html - משחק הסנייק
  clicker.html - משחק הקליקר

הקובץ index.html הוא שם מיוחד. כשנעלה את התיקייה לאינטרנט, השרת יודע לפתוח אוטומטית את index.html כדף הראשי. זו מוסכמה (Convention) שקיימת מאז ראשית האינטרנט. לכן חשוב שדף הבית יקרא בדיוק index.html ולא homepage.html או main.html.

Convention - an agreed standard that everyone follows מוסכמה היא כלל שלא כתוב בחוק, אבל כולם מסכימים לעקוב אחריו. למשל: דף הבית תמיד נקרא index.html. כשעוקבים אחרי מוסכמות, הכלים עובדים אוטומטית וחיים קלים יותר.

פתח תיקייה חדשה - New Folder - וקרא לה MyGameStudio "דבר ראשון, סדר. עד עכשיו זרקתם קבצים על שולחן העבודה כמו ילדים. היום אנחנו מתנהגים כמו מקצוענים."

"אנחנו יוצרים תיקייה חדשה. שם: MyGameStudio - או כל שם שבא לכם. זו 'הבית' של הפרויקט."

גרור את snake.html ו-clicker.html לתוך התיקייה "עכשיו תגררו פנימה את הקבצים מהשיעורים הקודמים - snake.html ו-clicker.html."

"עכשיו יש לנו תיקייה עם שני קבצים. חסר לנו רק דבר אחד: דף הבית - ה-index.html."

"למה דווקא index.html? זו מוסכמה - כלל שלא כתוב בחוק, אבל כל האינטרנט עוקב אחריו. כשנעלה את התיקייה לאינטרנט, השרת ידע אוטומטית שזה דף הבית."

ודאו שכל התלמידים עושים את זה בפועל ולא רק צופים. מבנה הפרויקט הוא הבסיס לכל מה שיבוא אחר כך. אם התיקייה לא מסודרת, ה-Deployment לא יעבוד. הסבירו שהסדר הזה הוא לא "בירוקרטיה" - הוא הכרחי כדי שהלינקים בין הדפים יעבדו.

5

Relative Path - נתיב יחסי

Relative Path - file address relative to the current location נתיב יחסי הוא כתובת קובץ שמתארת את המיקום ביחס למיקום הנוכחי, לא ביחס לכל המחשב.

דוגמה: כשאנחנו ב-index.html וכותבים href="snake.html", הדפדפן מחפש את snake.html באותה תיקייה שבה נמצא index.html.

למה זה חשוב? כי כשנעלה את כל התיקייה לאינטרנט, הנתיבים היחסיים ימשיכו לעבוד בדיוק כמו שהם עבדו במחשב.

נתיב יחסי לעומת נתיב מוחלט (Absolute Path): snake.html = יחסי (מחפש באותה תיקייה). C:/Users/danny/MyGameStudio/snake.html = מוחלט (כתובת מלאה). תמיד נעדיף נתיב יחסי בפרויקט, כי הוא עובד בכל מקום.

"לפני שנבנה את דף הבית, אני רוצה שתבינו קונספט חשוב: נתיב יחסי - Relative Path."

"כשאנחנו כותבים בפרומפט שהלינק הוא snake.html - בלי נקודות, בלי תיקיות, סתם שם הקובץ - הדפדפן מבין: 'אה, תחפש את זה באותה תיקייה שאני נמצא בה.'"

"תחשבו על זה ככה: אם אני בדירה ואומר 'הדלת משמאל', זה נתיב יחסי. אם אני אומר 'דלת 5, קומה 3, רחוב הרצל 20, תל אביב', זה נתיב מוחלט."

"למה זה חשוב? כי כשנעלה את כל התיקייה לאינטרנט, הנתיבים היחסיים ימשיכו לעבוד. הם לא תלויים במחשב שלכם."

המושג של נתיב יחסי הוא קריטי אבל מופשט. המשל של "הדלת משמאל" עובד טוב. אם יש זמן, הדגימו מה קורה כשכותבים נתיב שגוי - הלינק נשבר ומקבלים 404. זה מחזק את ההבנה למה חשוב שכל הקבצים יהיו באותה תיקייה.

6

פורטפוליו - הבית של המשחקים

10:00-15:00

Portfolio - a showcase website displaying your work פורטפוליו הוא אתר תצוגה שמציג את העבודות שלך. כל מפתח, מעצב או יוצר מקצועי יש לו אחד.

במקרה שלנו, הפורטפוליו יכלול:
- כותרת עם שם הסטודיו
- About Me - פסקה קצרה על היוצר
- גלריית משחקים - כרטיסים עם לינקים למשחקים
- אפקטים ויזואליים - אנימציות hover

בעולם ההייטק, פורטפוליו הוא לפעמים חשוב יותר מקורות חיים. מעסיקים רוצים לראות מה בנית, לא רק מה למדת. התלמידים יוצאים מהשיעור הזה עם פורטפוליו אמיתי שאפשר לשים בביו של אינסטגרם.

"חשבו על זה כמו נטפליקס. המשחקים שלכם הם הסרטים. אבל נטפליקס בלי דף בית? לא עובד. צריך מקום שבו בוחרים במה לשחק."

"זה בדיוק מה שפורטפוליו עושה. הוא הלובי של הקולנוע. ברגע שמישהו פותח את הלינק שלכם, הוא רואה את כל המשחקים מסודרים יפה עם תיאורים ותמונות."

"ואם אתם חושבים שזה סתם תרגיל - לא. כל מפתח אמיתי צריך פורטפוליו. זה כמו קורות חיים, רק הרבה יותר טוב. במקום לכתוב 'אני יודע לתכנת', אתם מראים את מה שבניתם."

7

הפרומפט לפורטפוליו

15:00-25:00

הפרומפט מגדיר את כל המרכיבים של דף הבית: ערכת צבעים כהה, כותרת ניאון, פסקת About Me, וגלריית כרטיסיות עם לינקים למשחקים. שימו לב שאנחנו מציינים במפורש את שמות הקבצים (snake.html, clicker.html) - כך הסוכן יודע ליצור את הלינקים הנכונים.

Create a modern, responsive Portfolio website for a game developer in a single index.html file. Design Requirements: 1. Theme: Dark Mode with Neon Purple accents. 2. Header: Large title "My AI Game Studio" using a futuristic font. 3. About Section: A short paragraph describing the developer. 4. Games Grid: Create a grid layout with 2 stylized cards. - Card 1 Title: "Neon Snake", Link: "snake.html", Description: "Classic snake game - AI remake". - Card 2 Title: "Crypto Clicker", Link: "clicker.html", Description: "Tycoon economy simulation". 5. Interactions: Add CSS hover effects to the cards (scale up slightly). 6. Make it fully responsive for mobile devices.

פתח את חלונית הצ'אט ב-Antigravity / Cursor "אנחנו לא בוני אתרים, נכון? אנחנו מנהלים. אז בואו נבקש מהסוכן לבנות לנו אתר."

"אני שולח לכם את הפרומפט בצ'אט. שימו לב - אני מציין במפורש את שמות הקבצים: snake.html ו-clicker.html. ככה הסוכן יודע ליצור את הלינקים הנכונים."

הדבק את הפרומפט ולחץ Enter. חכה שהסוכן יסיים "הסוכן כותב HTML ו-CSS... תראו את הקוד שרץ."

לחץ Preview "והנה התוצאה. וואו. אתר שחור, נקי, כותרת ניאון סגולה. כשעוברים עם העכבר על המשחקים - יש אנימציה. נראה כאילו שילמתי למעצב אלפי שקלים."

לחץ על כרטיס הסנייק - הראה שהלינק עובד "ועכשיו אני לוחץ על 'Neon Snake'... והופ, אני בתוך המשחק! הלינק עובד! כי שני הקבצים באותה תיקייה."

"עכשיו שנו את הטקסט ב-About Me לשם שלכם. 'היי, אני דני ואני בונה משחקים ב-AI'. פשוט, אישי, מקצועי."

רגע ה-"וואו" כשהאתר מופיע הוא חשוב, אבל הרגע הקריטי יותר הוא כשלוחצים על הכרטיס והמשחק נפתח. זה מדגים שהלינקים עובדים - שכל מה שלמדנו על מבנה פרויקט ונתיבים יחסיים מתחבר לתוצאה אמיתית. תנו לתלמידים לנסות בעצמם לפני שממשיכים.

8

Responsive Design - עיצוב רספונסיבי

Responsive Design - adapts layout to any screen size עיצוב רספונסיבי אומר שהאתר מזהה את גודל המסך (מחשב, טאבלט, נייד) ומתאים את עצמו אוטומטית.

- במחשב: כרטיסי המשחקים מופיעים זה ליד זה (Grid)
- בנייד: הכרטיסים מופיעים אחד מתחת לשני (Stack)

הטכנולוגיה שמאפשרת זאת נקראת Media Queries ב-CSS - כללים שמופעלים רק בגודל מסך מסוים.

יותר מ-60% מהגלישה באינטרנט היום היא מנייד. אתר שלא רספונסיבי = אתר ש-60% מהמבקרים שלו מקבלים חוויה גרועה. לכן בפרומפט ביקשנו "Make it fully responsive" - הסוכן מוסיף Media Queries אוטומטית.

Media Query - CSS rule that applies only at certain screen sizes Media Query היא פקודה ב-CSS שאומרת: "אם רוחב המסך קטן מ-768 פיקסלים (כלומר, נייד), שנה את העיצוב." בפרומפט ביקשנו "responsive" והסוכן הוסיף את ה-Media Queries אוטומטית.

"שימו לב שבפרומפט כתבנו 'Make it fully responsive'. מה זה אומר?"

"Responsive Design זה עיצוב שמתאים את עצמו לכל מסך. במחשב האתר נראה בצורה אחת, בנייד - בצורה אחרת. בלי שנכתוב שני אתרים."

כווץ את חלון הדפדפן לרוחב של נייד - הראה שהעיצוב משתנה "תראו - אם אני מכווץ את החלון... הכרטיסים מתסדרים אחד מתחת לשני! האתר הבין שהמסך קטן והתאים את עצמו."

"למה זה חשוב? כי כשתשלחו את הלינק לחבר בווטסאפ, הוא יפתח את זה בנייד. אם האתר לא רספונסיבי, החבר שלכם יראה בלגן."

הדרך הכי טובה להדגים Responsive היא לכווץ את חלון הדפדפן בזמן אמת. התלמידים רואים את העמודות "נופלות" לסידור אנכי. אם יש זמן, פתחו את ה-DevTools (F12) ובחרו תצוגת נייד - זה עוד יותר ויזואלי.

9

Hosting - איפה האתר גר?

25:00-30:00

Web Hosting - a server that serves your website to visitors Hosting (אירוח) הוא שירות שמאחסן את קבצי האתר שלכם על מחשב שמחובר לאינטרנט 24/7 (שרת). כשמישהו מקליד את כתובת האתר בדפדפן, השרת מגיש לו את הקבצים.

ללא Hosting: הקבצים במחשב שלכם, רק אתם רואים.
עם Hosting: הקבצים על שרת, כל העולם רואה.

פעם, אירוח אתרים עלה כסף ודרש הגדרות מורכבות. היום יש שירותים חינמיים כמו Netlify, Vercel, GitHub Pages שמאפשרים להעלות אתרים סטטיים (HTML/CSS/JS) בחינם ובלי כרטיס אשראי. אלה נקראים "Static Hosting" כי הם מגישים קבצים כמו שהם, בלי עיבוד בצד השרת.

Server - a computer that serves content to other computers שרת הוא בסך הכל מחשב רגיל (בדרך כלל חזק יותר) שתפקידו לשרת - כלומר, להגיש מידע למי שמבקש. כשמישהו מקליד את כתובת האתר שלכם, הבקשה מגיעה לשרת, והוא שולח בחזרה את קבצי ה-HTML.

"אוקיי, יש לנו אתר מושלם. הפורטפוליו מעוצב, הלינקים עובדים, הכל מדהים. אבל... הוא עדיין אצלי במחשב."

"כדי שאנשים אחרים יראו את האתר, אנחנו צריכים להעלות אותו לשרת - מחשב שמחובר לאינטרנט כל הזמן ומגיש את הדפים לכל מי שמבקש."

"הבשורות הטובות: לא צריך לקנות שרת. לא צריך לשלם שקל. יש שירות בשם Netlify Drop שנותן לכם hosting בחינם."

"הבשורות הטובות עוד יותר: להעלות אתר ל-Netlify לוקח פחות מדקה."

חלק מהתלמידים ישאלו "למה חינם? מה הקאץ'?". התשובה: Netlify נותנת חינם לאתרים קטנים (100GB bandwidth בחודש) ומקווה שכשתגדלו תשדרגו לתוכנית בתשלום. זה מודל עסקי לגיטימי שנקרא "Freemium". לא חייבים להעמיק, אבל אם שואלים - ענו בכנות.

10

Deployment - ההעלאה לאוויר

30:00-40:00

Deployment - the process of making your website live on the internet Deployment (הפצה / העלאה) הוא התהליך של לקחת את הקוד מהמחשב שלכם ולהעלות אותו לשרת כדי שהעולם יוכל לראות.

עם Netlify Drop התהליך פשוט בטירוף: גוררים את התיקייה לדפדפן, ומקבלים לינק. זהו.

בעולם ההייטק, Deployment הוא תהליך קריטי שכולל בדיקות, גיבויים, ולפעמים צוותים שלמים. בחברות גדולות יש CI/CD Pipelines - צינורות אוטומטיים שבודקים את הקוד ומעלים אותו. אנחנו עושים את הגרסה הפשוטה ביותר, אבל העיקרון זהה: מהמחשב לאינטרנט.

פתח דפדפן חדש ונווט ל-app.netlify.com/drop "פתחו טאב חדש. לכו ל-app.netlify.com/drop. לא צריך להירשם. לא צריך כרטיס אשראי."

"אתם רואים אזור גדול שכתוב עליו 'Drag and drop'? זה כל מה שצריך."

שוט המפתח: גרור את תיקיית MyGameStudio לתוך הדפדפן "שימו לב, זה קורה מהר. אני לוקח את כל התיקייה MyGameStudio... וגורר אותה... לתוך הדפדפן." [תנו לתלמידים לראות את הגרירה] "בום. האתר באוויר. יש לי לינק."

העתק את הלינק ופתח אותו בטאב חדש "אני פותח את הלינק... ושם הוא. הפורטפוליו שלי באינטרנט. אני לוחץ על Snake... והמשחק עובד!"

שלח את הלינק לעצמך בווטסאפ ופתח בנייד "עכשיו הרגע שכולם חיכו לו. אני שולח את הלינק הזה לעצמי בווטסאפ... פותח בנייד... הנה האתר שלי בטלפון!"

"כל אחד מכם עכשיו עושה את זה. גוררים את התיקייה ל-Netlify ומקבלים לינק."

זה רגע ה-"וואו" הגדול של השיעור. תנו לו לנחות. כשתלמידים מצליחים לפתוח את האתר שלהם בנייד, התגובות יהיו נלהבות. ודאו שכולם מצליחים - אם מישהו נתקע, סביר שהתיקייה לא מסודרת נכון (חסר index.html, או שקבצים לא באותה תיקייה). טיפ: ב-Netlify אפשר גם ללחוץ Site Settings ← Change site name כדי לקבל כתובת קריאה יותר (למשל dannygames.netlify.app).

11

URL ו-Domain - כתובות באינטרנט

Uniform Resource Locator - the address of any page on the internet URL הוא הכתובת המלאה של כל דף באינטרנט. הוא מורכב ממספר חלקים:

https:// - הפרוטוקול (מאובטח)
dannygames - שם האתר שלכם
.netlify.app - הדומיין של Netlify
/snake.html - הדף הספציפי

Domain Name - the human-readable name of a website דומיין הוא ה"שם" של האתר. במקום לזכור מספרים (כתובת IP כמו 104.21.54.176), אנחנו משתמשים בשם קריא כמו google.com או dannygames.netlify.app.

Netlify נותנת לכם subdomain בחינם: yourname.netlify.app. אפשר לשנות את "yourname" בהגדרות האתר.

דומיין מותאם אישית (כמו dannygames.com) עולה כ-10-15 דולר בשנה. זה לא הכרחי לקורס, אבל מי שרוצה "להתגדל" - זו האופציה. אפשר לקנות דומיין ב-Namecheap, Google Domains ועוד, ולחבר אותו ל-Netlify.

"בואו נבין את הלינק שקיבלנו:"

"https:// - זה אומר שהחיבור מאובטח. Netlify נותנת את זה בחינם."

"random-name-12345.netlify.app - זה הכתובת. השם הזה נראה לכם מוזר? אפשר לשנות אותו!"

הראה איך משנים את שם האתר ב-Netlify: Site Settings ← Change site name "נכנסים ל-Site Settings, לוחצים על 'Change site name', ומקלידים את השם שרוצים. למשל: danny-game-studio."

"עכשיו הכתובת שלכם היא: danny-game-studio.netlify.app. זה כתובת אמיתית, מקצועית, שאפשר לשים בביו של אינסטגרם."

תנו לכל תלמיד לשנות את שם האתר שלו. זה יוצר תחושת בעלות - "זה האתר שלי, עם השם שלי". אם שם תפוס, תציעו וריאציות (danny-games, danny-studio-il וכו'). אזהרה: שמות צריכים להיות באנגלית, אותיות קטנות, ללא רווחים.

12

סיכום, עדכונים ושיעורי בית

40:00-45:00

אחרי שהאתר באוויר, אפשר לעדכן אותו: לשנות צבעים, להוסיף משחקים, לתקן טעויות.
התהליך: 1) מפתחים מקומית ← 2) בודקים ב-Preview ← 3) גוררים שוב ל-Netlify.
זה אותו מעגל איטרציה שלמדנו בשיעור 1, רק שעכשיו נוסף שלב: הפצה (Deployment).

Project Structure - מבנה תיקיות מסודר לפרויקט
index.html - שם מוסכם לדף הבית (Convention)
Relative Path - נתיב יחסי (snake.html במקום כתובת מלאה)
Portfolio - אתר תצוגה שמציג את העבודות שלך
Responsive Design - עיצוב שמתאים לכל גודל מסך
Media Query - כלל CSS שמופעל בגודל מסך מסוים
Hosting - אירוח האתר על שרת שמחובר לאינטרנט
Server - מחשב שמגיש תוכן למחשבים אחרים
Deployment - תהליך העלאת האתר מהמחשב לאינטרנט
URL - כתובת אינטרנט מלאה
Domain - השם הקריא של האתר

"חברים, תסתכלו מה עשינו ב-45 דקות:"

"ארגנו את הפרויקט בתיקייה מסודרת."
"בנינו אתר פורטפוליו מעוצב שמציג את כל המשחקים."
"העלינו הכל לאינטרנט בגרירה אחת."
"ויש לנו לינק אמיתי שאפשר לשלוח לכל אחד."

"סגרנו את המעגל: פיתוח ← בדיקה ← הפצה. אתם לא סתם משחקים בקוד, אתם מנהלים מוצר."

"ואם תרצו לעדכן? לשנות צבע? להוסיף משחק חדש? פשוט: תשנו ב-IDE, ותגררו שוב ל-Netlify. זהו. האתר מתעדכן תוך שניות."

"שיעורי בית:"
"1. התאימו את ה-About Me לעצמכם - שם, תיאור, אישיות."
"2. שנו את הצבעים או הכותרת - בקשו מהסוכן."
"3. מתקדמים: הוסיפו כרטיס שלישי למשחק חדש שתבנו לבד."
"4. והכי חשוב: שלחו את הלינק לשלושה אנשים ובקשו מהם לשחק."

"הלינק שלכם הוא הדרכון למקצוע. שימו אותו בביו, שלחו בווטסאפ, תהיו גאים."

"תודה רבה, נתראה בשיעור הבא!"

לפני הסיום: בקשו מכל תלמיד לשלוח את הלינק שלו בצ'אט הכללי. זה יוצר חגיגה של "כולם באוויר" ומאפשר לראות את המגוון. אם יש תלמידים שנתקעו, עזרו להם להתחיל - גם אם יסיימו אחרי השיעור. הטיזר לשיעור הבא: "בשיעור הבא נשדרג את הגרפיקה של המשחקים - נחליף ריבועים בדמויות מקצועיות."