Claude with Yaniv Yaakubovich
המכון הטכנולוגי של חולון
לעבוד עם Claude Code
קורס מעשי · 5 מפגשים · אונליין
מפגש 5 · האחרון · בונים אתר ומעלים לאוויר
הקלטה תישלח אחרי המפגש
מפגש 5 · האחרון · אונליין

האתר שלכם

חי באינטרנט, עוד היום

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

מפגש
5 מתוך 5
פורמט
דמו + בנייה חיה
כלים
Claude Code + Netlify
תוצאה
אתר חי עם URL
YY
יניב יעקובוביץ
Product Management & AI · verve-pm.com

מה אנחנו עושים היום

5 שלבים

1
דמו
רשימת פרויקטים נכנסת. אתר חי עם כתובת אמיתית יוצא. הכל תוך דקות, מול העיניים שלכם.
2
בונים אתר עם Claude
איך מתארים אתר במילים: המבנה של prompt טוב, ואיך משפרים בסבבים קצרים.
3
Netlify
מהקובץ במחשב לכתובת באינטרנט: גוררים תיקייה, מקבלים URL. בחינם, בלי שרתים.
4
תורכם · בנייה חיה
כל אחד בונה את האתר שלו מרשימת הפרויקטים שהכין, ומעלה אותו לאוויר. אני עובר ביניכם.
5
סיכום הקורס
מה בניתם ב-5 מפגשים, ואיך ממשיכים מכאן לבד.

איפה היינו

כל הקורס נפגש היום

לדבר עם Claude Code

טרמינל, prompts, skills וסוכנים. לתאר משימה במילים ולתת לו לעבוד. מפגשים 1-2

מוח שני + ידיים

CLAUDE.md שזוכר מי אתם, ו-MCP שמחבר אותו לכלים אמיתיים. מפגשים 3-4

היום · הדובדבן שבקצפת

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

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

1
דמו
רשימה נכנסת. אתר חי יוצא
1 · דמו
2 · בונים אתר
3 · Netlify
4 · תורכם
5 · סיכום
דמו

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

1 · ה-prompt הפותח · 2 דק

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

2 · סבב שיפור חי · 2 דק

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

3 · מעלים לאוויר · 3 דק

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

1 · דמו
2 · בונים אתר
3 · Netlify
4 · תורכם
5 · סיכום

אחרי הדמו

מה בעצם ראיתם כרגע?

1
תיארתי, לא קידדתי
נתתי ל-Claude מי אני, 3 פרויקטים, ולמי האתר מיועד. הוא כתב את כל ה-HTML, ה-CSS והמבנה לבד. הבנייה המלאה לוקחת כמה דקות, ולכן ראיתם גרסה שרצה הבוקר עם אותו prompt בדיוק.
2
שיפרתי בסבבים קצרים
הגרסה הראשונה יצאה עם פגם, וזה נורמלי. ביקשתי תיקון אחד ממוקד, וראיתם אותו קורה תוך חצי דקה. ככה עובדים: שינוי אחד בכל פעם.
3
גררתי תיקייה, קיבלתי כתובת
Netlify לקח את התיקייה והפך אותה לאתר חי עם URL. בלי שרת, בלי הגדרות, בחינם.
4
האתר באוויר, ואפשר לעדכן אותו
כל שינוי עתידי: מבקשים מ-Claude, גוררים שוב, אותה כתובת מתעדכנת. האתר גדל איתכם.

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

2
בונים אתר עם Claude
תיאור נכנס, אתר יוצא
1 · דמו
2 · בונים אתר
3 · Netlify
4 · תורכם
5 · סיכום

המתכון

3 שלבים: תיאור, בנייה, שיפור

ככה בונים אתר עם Claude, וזה אותו מתכון לכל דבר שתבנו איתו בעתיד.

שלב 1
תיאור (Brief)

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

שלב 2
בנייה

תיקייה חדשה, פותחים בה את Claude Code, מדביקים את התיאור.
מבקשים קובץ index.html אחד, זה כל האתר.

שלב 3
שיפור בסבבים

פותחים בדפדפן, מסתכלים, מבקשים שינוי אחד בכל פעם.
3-4 סבבים קצרים עדיפים על בקשה ענקית אחת.

למה קובץ אחד? אתר של קובץ index.html יחיד קל לפתוח, קל לתקן, וקל להעלות ל-Netlify. כשהאתר יגדל, Claude כבר יפצל אותו לבד.

1 · דמו
2 · בונים אתר
3 · Netlify
4 · תורכם
5 · סיכום

ה-prompt הפותח

4 שורות שבונות אתר

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

אתם כותבים ל-Claude Code (בתיקייה חדשה וריקה)

בנה לי אתר פורטפוליו אישי בקובץ index.html יחיד, בעברית, RTL.
עליי: [שם, מה אתם לומדים, משפט אחד עליכם]
הפרויקטים: [3 פרויקטים, לכל אחד שם ומשפט: מה הוא עושה ובמה הוא בנוי]
מטרה וסגנון: [למי האתר מיועד, למשל מעסיקים] · [נקי ומודרני / צבעוני / כהה], צבע מוביל אחד.

מה עוד אפשר לתת לו

תמונה שלכם או של הפרויקטים (שימו בתיקייה ותגידו לו), קישורים ל-GitHub או LinkedIn, קורות חיים. כל חומר משפר את התוצאה.

מה לא חייבים

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

1 · דמו
2 · בונים אתר
3 · Netlify
4 · תורכם
5 · סיכום

סבבי שיפור

רואים בדפדפן, מבקשים תיקון, חוזרים

1
פותחים את index.html בדפדפן
דאבל-קליק על הקובץ, או מבקשים מ-Claude: "פתח את האתר בדפדפן".
2
מסתכלים, ובוחרים דבר אחד לשפר
שינוי אחד בכל בקשה. קל ל-Claude לדייק, וקל לכם לראות מה השתנה.
3
מרעננים את הדפדפן, וחוזרים
F5 ורואים את השינוי. 3-4 סבבים כאלה, והאתר נראה מקצועי.
בקשות שיפור לדוגמה, קצרות וממוקדות

"הפוך את כרטיסי הפרויקטים לשלושה טורים במקום רשימה."

"הוסף למעלה תפריט עם קישורים לחלקים של הדף."

"תוסיף בסוף חלק יצירת קשר עם המייל וה-LinkedIn שלי."

"תבדוק שהאתר נראה טוב גם במובייל, ותקן אם צריך."

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

3
Netlify
מהמחשב שלכם לאינטרנט
1 · דמו
2 · בונים אתר
3 · Netlify
4 · תורכם
5 · סיכום

הכלי

מה זה Netlify

שירות אחסון לאתרים. אתם נותנים לו תיקייה עם index.html, והוא נותן לכם כתובת חיה באינטרנט. זהו.

בחינם

החבילה החינמית מספיקה בשפע לאתר אישי. בלי כרטיס אשראי.

בלי שרתים

אין מה להתקין ואין מה לתחזק. גוררים תיקייה לדפדפן, וזה באוויר.

כתובת אמיתית

מקבלים כתובת כמו yourname.netlify.app ששולחים לכל אחד, כולל מעסיקים.

למה דווקא Netlify? כי זו הדרך הקצרה ביותר מאתר על המחשב לאתר באוויר. יש גם חלופות (GitHub Pages, Vercel), והעיקרון זהה. מי שלמד אחת, למד את כולן.

1 · דמו
2 · בונים אתר
3 · Netlify
4 · תורכם
5 · סיכום

איך מעלים

גוררים תיקייה, מקבלים כתובת

1
נרשמים בחינם ל-Netlify
בכתובת netlify.com, עם חשבון Google או מייל. פעם אחת בלבד.
2
גוררים את תיקיית האתר לאזור ההעלאה
בעמוד app.netlify.com/drop גוררים את כל התיקייה (זו עם ה-index.html) אל הדפדפן.
3
מקבלים כתובת, והאתר באוויר
תוך שניות יש לכם URL חי. פותחים אותו בטלפון כדי להרגיש שזה אמיתי.
בונוס: כתובת עם השם שלכם

הכתובת הראשונית אקראית (משהו כמו stellar-otter-12345.netlify.app). משנים אותה בהגדרות:

Site configuration ← Site details ← Change site name

ובוחרים למשל yaniv-portfolio.netlify.app. זו הכתובת ששמים בקורות חיים.

זה כל התהליך. בלי git, בלי טרמינל, בלי הגדרות DNS. תיקייה נכנסת, כתובת יוצאת. את הצד המתקדם (חיבור ל-GitHub) משאירים ליום שתרצו אותו.

1 · דמו
2 · בונים אתר
3 · Netlify
4 · תורכם
5 · סיכום

עדכון האתר

שינוי אצל Claude, גרירה, ואותה כתובת מתעדכנת

מבקשים שינוי מ-Claude
←
בודקים בדפדפן
←
גוררים שוב ל-Netlify
←
אותה כתובת, גרסה חדשה
איפה גוררים שוב

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

למה זה חשוב

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

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

4
תורכם
בונים ומעלים לאוויר
ידיים על המקלדת · החלק הכי גדול של היום
1 · דמו
2 · בונים אתר
3 · Netlify
4 · תורכם
5 · סיכום

תרגיל · 40 דקות

בונים את האתר שלכם, ומעלים אותו לאוויר

1
תיקייה חדשה, Claude Code, וה-prompt הפותח
פתחו תיקייה בשם my-site, הריצו בה את Claude, ומלאו את תבנית 4 השורות עם הפרויקטים שהכנתם.
2
2-3 סבבי שיפור
פתחו בדפדפן, ובקשו שינוי אחד בכל פעם. אל תשכחו את בדיקת המובייל.
3
מעלים ל-Netlify
גררו את התיקייה ב-app.netlify.com/drop, וקבלו כתובת. יש זמן? שנו את שם האתר לשם שלכם.
4
שתפו את הכתובת בצ'אט
שורה אחת: הלינק + מה הכי אהבתם באתר שלכם. נפתח כמה מהם ביחד על המסך.

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

1 · דמו
2 · בונים אתר
3 · Netlify
4 · תורכם
5 · סיכום
★ הפאנץ'

האתר חי. בואו נוכיח את זה

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

1 · הכיתה מציעה

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

2 · דקה אחת, והשינוי באוויר

בקשה אחת ל-Claude, גרירה אחת ל-Netlify, רענון אחד בדפדפן. אותה כתובת, אתר חדש. כולם רואים את זה קורה.

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

5
סיכום הקורס
5 מפגשים, מערכת אחת
1 · דמו
2 · בונים אתר
3 · Netlify
4 · תורכם
5 · סיכום

המסע

מה בניתם ב-5 מפגשים

מפגש 1
התקנה ושפה

Claude Code על המחשב. לתאר משימות במילים.

מפגש 2
Skills וסוכנים

ללמד אותו טריקים ולתת לו תפקידים.

מפגש 3
מוח שני

CLAUDE.md וזיכרון. הוא יודע מי אתם.

מפגש 4
MCP · ידיים

מחובר ל-Excel, ל-Excalidraw, ולעולם.

מפגש 5
שיפינג

אתר חי באינטרנט, עם כתובת משלכם.

שימו לב למסלול: קודם למדתם לדבר איתו, אחר כך הוא למד לזכור אתכם, אחר כך קיבל ידיים, והיום שלחתם מוצר לעולם. זה בדיוק התהליך של לעבוד עם AI, בכל תחום שתגיעו אליו.

1 · דמו
2 · בונים אתר
3 · Netlify
4 · תורכם
5 · סיכום

מה הלאה

איך לא לאבד את זה

הרגל 1
משימה אמיתית אחת בשבוע

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

הרגל 2
תחזקו את המוח השני

כל פעם שאתם מתקנים את Claude פעמיים על אותו דבר, זה שייך ל-CLAUDE.md. ככה הוא משתפר איתכם.

הרגל 3
עדכנו את האתר

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

להעמיק: התיעוד הרשמי docs.claude.com · דף הלימוד של כל מפגש נשאר אצלכם · ואני זמין ב-LinkedIn וב-yaniv@verve-pm.com לשאלות גם אחרי הקורס.

תודה

זה היה הקורס

והאתר שלכם באוויר

5 מפגשים, ומערכת שלמה: Claude שמדבר, זוכר, פועל, ועכשיו גם שולח מוצרים לעולם. תמשיכו לבנות.

YY
יניב יעקובוביץ
yaniv@verve-pm.com · verve-pm.com