בניית האתר הראשון שלך — Building Your First Website

איך אתרים עובדים — גרסת 60 שניות

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

כל אתר מדבר שלוש שפות:

מה קורה כשמישהו גולש לאתר? התהליך פשוט:

1. המשתמש מקליד כתובת URL בדפדפן (או לוחץ על קישור)
2. הדפדפן שולח בקשה לשרת (Server) — "תשלח לי את הקבצים של האתר הזה"
3. השרת שולח חזרה קובץ HTML
4. הדפדפן קורא את ה-HTML, טוען את ה-CSS וה-JavaScript שמקושרים אליו
5. הדפדפן "מרנדר" (Render) את הכול — ומציג את הדף הסופי על המסך

קובץ index.html הוא "דף הבית" של האתר — הדף שנטען כשמישהו נכנס לכתובת הראשית. styles.css מגדיר איך הכול נראה. script.js מגדיר איך הכול מתנהג. Claude Code יוצר את שלושת הקבצים האלה (ולפעמים יותר) — אתה מתאר את התוצאה, Claude כותב את הקוד.

האמנות של הפרומפט הראשון

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

בואו נראה את ההבדל:

שימו לב להבדל — הפרומפט השני נותן ל-Claude כל מה שהוא צריך כדי לייצר תוצאה מדויקת. כאן ה-Framework:

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

"Design it similar to stripe.com but with warmer colors and Hebrew RTL layout"

Claude מכיר אתרים פופולריים ויודע לייצר סגנון דומה.

ה-Build Session הראשון — מפרומפט לדף

הגיע הרגע. יש לך פרומפט מוכן, Git מוגדר, חשבון GitHub פעיל. בואו נבנה.

שלב 1 — פתיחת Claude Code בתיקייה הנכונה

פתח את הטרמינל ונווט לתיקיית הפרויקטים שלך:

cd ~/projects
claude

Claude Code נפתח ומחכה לפרומפט שלך. הדבאב על המסך אומר "How can I help you?" — עכשיו תדביק את הפרומפט שכתבת בשלב הקודם ותלחץ Enter.

שלב 2 — מה קורה אחרי שלוחצים Enter

צפה ב-Claude עובד. זה הרגע הקסום של Vibe Coding. Claude יעשה את הדברים הבאים (בסדר הזה בדרך כלל):

1. יוצר תיקיית פרויקט — mkdir happy-paws + cd happy-paws
2. מאתחל Git — git init (כי למדנו בפרק 2 שכל פרויקט מתחיל עם Git)
3. יוצר את קבצי הליבה — index.html, styles.css, script.js
4. כותב את כל הקוד — HTML מבני, CSS מעוצב, JavaScript אינטראקטיבי
5. עושה Commit ראשון — git add . && git commit -m "Initial build: Happy Paws landing page"

התהליך לוקח בדרך כלל 30-90 שניות. בזמן שזה רץ, אתה יכול לראות בטרמינל את הכלים ש-Claude משתמש בהם — Write (יצירת קבצים), Bash (הרצת פקודות), Edit (עריכה).

מה Claude יוצר — מבנה קבצים טיפוסי

אחרי ה-Build Session הראשון, תמצא בתיקייה שלך מבנה כזה:

happy-paws/
├── index.html      ← דף הבית (HTML ראשי)
├── styles.css      ← כל העיצוב (CSS)
├── script.js       ← אינטראקציה (JavaScript)
└── .git/           ← תיקיית Git (נוצרת אוטומטית)

לפעמים Claude יחליט ליצור מבנה אחר — למשל, תיקיית assets/ לתמונות, או css/ ו-js/ נפרדים. זה בסדר — אין מבנה "נכון" אחד. מה שחשוב הוא שקובץ index.html תמיד נמצא ברמה הראשית — כי זה הקובץ שהדפדפן מחפש.

שלב 3 — "רגע ה-Wow" — פתיחה בדפדפן

Claude סיים. עכשיו תראה את התוצאה. פתח את קובץ ה-HTML בדפדפן:

• Mac: open index.html
• Windows: start index.html
• Linux: xdg-open index.html
• או פשוט: גרור את הקובץ לחלון הדפדפן

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

התגובה הראשונה שלך תהיה כנראה: "!וואו, זה מדהים". התגובה השנייה תהיה: "אבל רציתי שהכפתור יהיה יותר גדול". וזה בדיוק כמו שצריך להיות — כי עכשיו מתחיל שלב ה-Iteration.

Iteration — לולאת השיפור

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

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

ה-Iteration Checklist — 8 שלבים בסדר הנכון

המיומנות המרכזית: להיות ספציפי

"Make it better" לא נותן ל-Claude שום דבר לעבוד איתו. זה כמו להגיד לשף "תבשל אוכל יותר טוב" — הוא לא יודע אם הבעיה בטעם, בתיבול, בטמפרטורה, או בהגשה. ככל שאתה יותר ספציפי, התוצאה תהיה יותר מדויקת.

ועוד טיפ חזק: screenshots הם נשק סודי. תצלם את מה שאתה רואה, תתאר מה אתה רוצה לשנות, ותדביק את התיאור ב-Claude Code. זה הרבה יותר אפקטיבי מניסיון לתאר בעיות במילים בלבד.

5 טעויות נפוצות ב-Iteration — ואיך להימנע

Responsive Design — שהאתר יעבוד על כל מסך

יותר מ-63% מתעבורת האינטרנט העולמית מגיעה מהנייד — וב-2026 המגמה רק מתחזקת. אם האתר שלך לא עובד טוב על טלפון — הוא לא עובד. נקודה.

Responsive Design (עיצוב רספונסיבי) זה כשה-Layout של האתר מתאים את עצמו לגודל המסך. בדסקטופ, 3 כרטיסים אחד ליד השני. בטאבלט, 2 כרטיסים בשורה. בנייד, כרטיס אחד בכל שורה. אותו תוכן, הצגה שונה.

המילים הקסומות:

"Make this site fully responsive and mobile-friendly"

זה כל מה שצריך לומר ל-Claude. הוא יודע בדיוק מה זה אומר ברמה הטכנית — Media Queries, Flexbox, Grid, גדלי גופן דינמיים, ועוד.

Responsive Breakpoints — 3 גדלים שחשוב לבדוק

איך לבדוק Responsive — Chrome DevTools

כל מה שצריך כבר נמצא בדפדפן שלך. אין צורך בכלים נוספים:

1. פתח את האתר שלך ב-Chrome
2. לחץ F12 (או לחיצה ימנית → Inspect)
3. לחץ על אייקון הנייד בפינה השמאלית-עליונה של DevTools (סמל של טלפון + טאבלט)
4. בחר מכשיר מהרשימה: iPhone 14, iPad, Galaxy S24 — או הכנס רוחב ידני
5. רענן את הדף וראה איך האתר נראה בכל גודל

בעיות נפוצות במובייל — ואיך לתקן

• טקסט קטן מדי: "Increase body font size on mobile to 16px minimum"
• כפתורים צמודים מדי: "Add more spacing between buttons on mobile, minimum touch target 44px"
• תמונות חורגות מהמסך: "Make all images responsive — max-width: 100%"
• גלילה אופקית: "Fix horizontal overflow on mobile — nothing should extend beyond the viewport"
• תפריט לא מותאם: "Convert the desktop navigation to a hamburger menu on mobile"

מגע (Touch) לעומת עכבר — ההבדל שאנשים שוכחים

במובייל אין Hover — אין מצב שבו מרחפים עם העכבר מעל כפתור. אם הניווט באתר שלך מבוסס על Hover (תפריט נפתח שנפתח כשמעבירים את העכבר), הוא לא יעבוד במובייל. גם גודל המגע חשוב — Apple ו-Google ממליצים על גודל מינימלי של 44x44 פיקסלים לאלמנטים שניתן ללחוץ עליהם. כפתור קטן מזה מתסכל משתמשי מובייל.

הנה פרומפט שפותר את רוב בעיות המגע:

"Ensure all clickable elements have a minimum touch target of 44x44px. Replace any hover-dependent interactions with click/tap alternatives for mobile."

אינטראקציה עם JavaScript

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

JavaScript (JS) הוא מה שגורם לדברים לזוז ולהגיב באתר. ושוב — אתה לא צריך ללמוד JavaScript. אתה צריך לדעת מה לבקש.

אינטראקציות שכדאי להוסיף לכל אתר

טופס יצירת קשר שבאמת שולח

טופס Contact שלא באמת שולח הודעות הוא חסר ערך. השירות Formspree (formspree.io) מאפשר לקבל הודעות מטופס ישירות למייל — בחינם (עד 50 הודעות בחודש), בלי צורך בשרת או בקוד Backend. תגיד ל-Claude:

"Add a contact form that sends emails using Formspree. Ask for name, email, phone (optional), and message."

Claude ייצור את הטופס עם validation, יחבר אותו ל-Formspree, ויוסיף הודעת הצלחה/שגיאה. כל מה שתצטרך לעשות הוא להירשם ב-Formspree ולהחליף את ה-Form ID.

נגישות בסיסית — Accessibility

נגישות (Accessibility / a11y) היא לא רק חוק — היא גם עסק טוב. אתר נגיש עובד טוב יותר עבור כולם, כולל אנשים שמשתמשים בקורא מסך, אנשים עם לקויות ראייה, ואנשים שמנווטים עם מקלדת בלבד. Claude Code יודע לבנות אתרים נגישים מהפרומפט הראשון — צריך רק לבקש:

"Make this site accessible — add proper alt text to all images, ensure good color contrast, add ARIA labels where needed, and make all interactive elements keyboard-navigable."

הדברים הכי חשובים:

• Alt text לתמונות — טקסט תיאורי שקורא מסך מקריא. Claude מוסיף את זה אוטומטית ברוב המקרים
• ניגודיות צבעים — טקסט בהיר על רקע בהיר = בלתי קריא לאנשים רבים. בקש: "Ensure WCAG AA color contrast ratio"
• ניווט מקלדת — כל כפתור, קישור, וטופס צריך להיות נגיש עם Tab ו-Enter
• Semantic HTML — שימוש ב-<button> לכפתורים (ולא <div> עם click handler) — זה גם נגישות וגם SEO

תמונות, אייקונים ואלמנטים ויזואליים

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

איפה להשיג תמונות — בחינם ובאיכות גבוהה

איפה להשיג אייקונים

Claude מכיר את כל ספריות האייקונים הפופולריות ויודע להשתמש בהן:

• Heroicons (heroicons.com) — של Tailwind Labs, מינימליסטיים ונקיים. Claude מייצר אותם כ-SVG inline
• Lucide (lucide.dev) — המשך של Feather Icons, קלים ומודרניים
• Font Awesome (fontawesome.com) — הספרייה הכי גדולה, אלפי אייקונים. גרסה חינמית מספיקה

פרומפט לדוגמה:

"Add Heroicons to the services cards — a walking icon for daily walks, a group icon for group walks, and a graduation cap for training. Use the outlined style."

SVG לעומת תמונות רגילות

SVG (Scalable Vector Graphics) הם אייקונים שנבנויים מנוסחאות מתמטיות, לא מפיקסלים. מה שזה אומר בפועל: הם נראים חדים בכל גודל, נטענים מהר, ואפשר לשנות את הצבע שלהם עם CSS. Claude מייצר SVG ישירות בתוך ה-HTML — בלי קבצים נפרדים, בלי בקשות לשרת, בלי איטיות.

Favicon — האייקון הקטן בכרטיסיית הדפדפן

ה-Favicon הוא האייקון הקטן שמופיע ליד שם האתר בטאב של הדפדפן. זה פרט קטן שעושה את האתר נראה מקצועי:

"Add a favicon — use a paw print emoji as the favicon"

Claude יוצר SVG favicon מובנה או משתמש באמוג'י — פתרון מהיר ואלגנטי.

Tailwind CSS — החבר הכי טוב של Vibe Coder

Tailwind CSS הוא "Utility-First CSS Framework" — מילים גדולות שאומרות דבר פשוט: במקום לכתוב קובץ CSS נפרד, מוסיפים Classes ישירות ל-HTML. במקום לכתוב בקובץ CSS שכותרת צריכה להיות כחולה, גדולה ומודגשת — כותבים ב-HTML:

class="text-blue-500 text-2xl font-bold"

למה זה מושלם ל-Vibe Coding?

• Claude מייצר Tailwind בצורה טבעית — הוא מכיר כל Class ויודע לשלב אותם בדיוק
• קל להבין שינויים — "Change the button color to green" = Claude מחליף bg-blue-500 ב-bg-green-500. אפילו מי שלא יודע CSS יכול לקרוא את זה
• Responsive מובנה — md:grid-cols-3 אומר "3 עמודות בטאבלט ומעלה". פשוט ואלגנטי
• Dark Mode מובנה — dark:bg-gray-900 אומר "רקע כהה במצב חשוך"

איך להתקין Tailwind — שתי דרכים

Tailwind v4 (שיצא ב-2025) שינה את מודל ההתקנה. ה-Play CDN הוא הדרך המהירה ביותר להתחיל — שורת Script אחת ב-HTML:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

זה מריץ את Tailwind בדפדפן בזמן אמת — מושלם ללמידה וניסויים. בשלב הזה של הלימוד, Play CDN מספיק בהחלט. כשתרגיש בטוח יותר, או כשנעבור ל-Next.js בפרק 4, תעבור ל-Vite build שמייצר CSS אופטימלי לפרודקשן.

shadcn/ui — קומפוננטים מוכנים מראש

shadcn/ui הוא ספריית קומפוננטים שבנויה על גבי Tailwind. במקום לבנות כפתור מאפס, אתה מקבל כפתור מעוצב מראש — עם Hover Effects, Focus States, ו-Accessibility — שאתה יכול להתאים אישית. כפתורים, כרטיסים, מודאלים, טבלאות, תפריטי נפתח — הכול מוכן.

נשתמש ב-shadcn/ui בצורה מאסיבית בפרק 4 כשנבנה אפליקציות, אבל כבר עכשיו אפשר לבקש מ-Claude:

"Use shadcn/ui style buttons and cards — clean, modern, with proper shadows and hover states"

פריסה — להעלות את האתר לאוויר

האתר שלך עובד על המחשב שלך. יופי. אבל אף אחד חוץ ממך לא יכול לראות אותו. הגיע הזמן לפרוס אותו — Deployment — כדי שכל אחד בעולם יוכל לגלוש אליו.

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

4 אפשרויות פריסה — השוואה

Cloudflare Pages — המלצה למתחילים

Cloudflare Pages הוא הבחירה שלנו למתחילים מ-3 סיבות: (1) חינמי לחלוטין, בלי הגבלות רציניות; (2) CDN גלובלי — האתר שלך נטען מהר מכל מקום בעולם; (3) תמיכה מצוינת בדומיינים מותאמים אישית (נדבר על זה בסקשן הבא).

הדרך הפשוטה ביותר לפרוס:

1. ודא שהקוד שלך ב-GitHub (עשינו את זה בפרק 2)
2. היכנס ל-pages.cloudflare.com — הירשם (חינם) או התחבר
3. לחץ "Create a project" → "Connect to Git" → בחר את ה-Repository שלך
4. לחץ "Deploy" — תוך 30 שניות האתר חי!
5. תקבל URL כמו: my-project-abc.pages.dev

או בדרך המהירה יותר — ישירות מ-Claude Code:

"Deploy this site to Cloudflare Pages using wrangler"

Claude יריץ npx wrangler pages deploy . — ויחזיר לך URL חי.

Automatic Deploys — כל Push = עדכון אוטומטי

ברגע שחיברת את ה-GitHub Repository לפלטפורמת ה-Hosting, כל git push עתידי מפעיל Deploy אוטומטי. שינית צבע של כפתור? git push — והשינוי חי באתר תוך 30-60 שניות. זה נקרא Continuous Deployment (פריסה רציפה), וזו אחת הסיבות שלמדנו Git בפרק 2.

ה-Flow המלא נראה ככה:

1. אתה מבקש שינוי מ-Claude Code
2. Claude עורך את הקבצים
3. אתה אומר ל-Claude: "Save and push"
4. Claude עושה git add, git commit, git push
5. Cloudflare Pages (או Vercel/Netlify) מזהה את ה-Push ומפעיל Build
6. תוך 30-60 שניות — האתר החי מעודכן

דומיין — כתובת אמיתית לאתר שלך

האתר שלך חי עם URL כמו my-site-abc123.pages.dev. זה עובד, אבל זה לא מקצועי. אף אחד לא ישים את זה על כרטיס ביקור. הגיע הזמן לדומיין אמיתי.

איפה לקנות דומיין

איזו סיומת לבחור

• .com — המלך. אם יש .com פנוי, תיקח אותו. הכי מוכר ואמין
• .co.il — לעסקים ישראליים. אמין, מזוהה עם ישראל, דורש רישום ברשם דומיינים ישראלי
• .me — לאתרים אישיים ופורטפוליו
• .dev — לפרויקטים טכניים (HTTPS חובה — מובנה)

Domain Setup Flow — 4 שלבים

1. קנה את הדומיין — היכנס ל-Cloudflare Registrar (או Namecheap/Porkbun) וקנה
2. הוסף לפלטפורמת ה-Hosting — היכנס ל-Cloudflare Pages (או Vercel) → Custom Domains → הוסף את הדומיין
3. עדכן DNS Records — הפלטפורמה תגיד לך בדיוק אילו רשומות DNS להוסיף. אם קנית ב-Cloudflare ופרסת ב-Cloudflare — זה אוטומטי
4. חכה 5-30 דקות — DNS צריך זמן "להתפשט" ברחבי האינטרנט

DNS — מה זה בשני משפטים

DNS (Domain Name System) הוא כמו ספר טלפונים של האינטרנט. כשמישהו מקליד happy-paws.co.il בדפדפן, ה-DNS מתרגם את זה לכתובת IP של השרת שמארח את האתר — כך הדפדפן יודע לאן לפנות. Claude יכול להסביר כל רשומת DNS (A, CNAME, TXT) — אבל בדרך כלל הפלטפורמה נותנת הנחיות מדויקות ואתה רק מעתיק.

SSL/HTTPS — המנעול הקטן

כל הפלטפורמות שהזכרנו נותנות SSL חינמי אוטומטית. האתר שלך יופיע עם מנעול ירוק ו-HTTPS. זה לא אופציונלי — Google מעדיף אתרים עם HTTPS, ודפדפנים מציגים אזהרה על אתרים ללא SSL.

SEO בסיסי — שגוגל ימצא אותך

SEO (Search Engine Optimization — אופטימיזציה למנועי חיפוש) זה מה שגורם ל-Google להבין את האתר שלך ולהציג אותו בתוצאות חיפוש. זה לא קסם ולא דורש מומחה — יש בסיס שכל אתר חייב, ו-Claude Code מגדיר אותו בפרומפט אחד.

מה Claude מגדיר כשאתה מבקש SEO

"Add SEO meta tags for a dog walking service in Tel Aviv"

Claude יוסיף:

• Title Tag — הכותרת שמופיעה בתוצאות Google: <title>כפות שמחות — שירותי טיול כלבים בתל אביב</title>
• Meta Description — התיאור שמופיע מתחת לכותרת ב-Google: <meta name="description" content="שירות טיולי כלבים מקצועי בתל אביב. טיולים יומיים, קבוצתיים, ואילוף גורים. 7 ימים בשבוע.">
• Open Graph Tags — מה שמופיע כשמשתפים את הקישור ב-WhatsApp, Facebook, LinkedIn: תמונה, כותרת, ותיאור
• Semantic HTML — שימוש בתגיות נכונות: <header>, <nav>, <main>, <section>, <footer> במקום <div> לכל דבר. Google מבין את המבנה הסמנטי
• Sitemap.xml — קובץ שמפרט את כל הדפים באתר, כדי ש-Google ידע בדיוק מה לסרוק
• Lang ו-Dir — lang="he" ו-dir="rtl" — שני Attributes קריטיים שאומרים ל-Google שהאתר בעברית ומימין לשמאל

מהירות האתר — גורם דירוג

Google מדרג אתרים מהירים גבוה יותר. מה לבקש מ-Claude:

• "Optimize images — compress and use lazy loading"
• "Minify CSS and JavaScript"
• "Add preconnect for external fonts"

Mobile-First Indexing

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

Google Search Console — הצעד הבא ב-SEO

אחרי שהאתר שלך חי עם SEO Tags, הצעד הבא הוא לרשום אותו ב-Google Search Console (search.google.com/search-console). זה כלי חינמי מ-Google שנותן לך:

• אישור שהאתר נסרק — Google מאשר שהוא "רואה" את האתר שלך
• מילות חיפוש — באילו מילים אנשים מצאו אותך (אחרי כמה שבועות)
• שגיאות — בעיות טכניות שמונעות דירוג טוב
• שליחת Sitemap — מזרז את תהליך הסריקה

לא חובה לעשות את זה עכשיו, אבל ברגע שהאתר חי — זה שווה 10 דקות של הרשמה.

Lighthouse — מדד הביצועים של Chrome

Lighthouse הוא כלי מובנה ב-Chrome DevTools שנותן ציונים מ-0 עד 100 ב-4 קטגוריות:

איך להריץ Lighthouse: פתח DevTools (F12) → לשונית Lighthouse → לחץ "Analyze page load". תוך כמה שניות תקבל ציונים עם רשימת שיפורים מומלצים. תעתיק את הבעיות ותדביק ל-Claude Code: "Fix these Lighthouse issues: [הבעיות]".

מאתר של דף אחד לאתר מרובה דפים

האתר הראשון שלך הוא דף אחד — Landing Page. רוב האתרים האמיתיים צריכים יותר: דף בית, דף אודות, דף שירותים, דף יצירת קשר. בואו נרחיב.

שתי גישות לאתרים מרובי דפים

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

ככה נראה מבנה הקבצים של אתר עם 3 דפים:

happy-paws/
├── index.html       ← דף הבית
├── about.html       ← דף אודות
├── services.html    ← דף שירותים
├── styles.css       ← עיצוב אחד לכל הדפים
├── script.js        ← JavaScript אחד לכל הדפים
└── images/          ← תיקיית תמונות משותפת
    ├── hero.jpg
    └── logo.svg

שים לב: קובץ CSS אחד וקובץ JS אחד משרתים את כל הדפים — זה מבטיח עקביות עיצובית. כל דף HTML טוען את אותם קבצי CSS ו-JS, אבל מכיל תוכן שונה.

הפרומפט ליצירת דפים נוספים

"Add an About page (about.html) and a Services page (services.html) with the same header and footer as the homepage. The navigation should highlight the active page. Make everything responsive."

Claude ייצור:

• about.html — עם אותו Header ו-Footer כמו index.html
• services.html — עם אותו Header ו-Footer
• Navigation bar עם קישורים בין כל הדפים
• Active State — הדף הנוכחי מודגש ב-Navigation

Multi-Page Checklist — 5 דברים שחייבים לעבוד

1. ניווט עקבי — אותו Navigation Bar בכל דף
2. Header ו-Footer זהים — אותו עיצוב, אותם קישורים
3. Active Page Highlighting — המשתמש יודע באיזה דף הוא נמצא
4. Navigation רספונסיבי — Hamburger Menu בנייד עובד בכל הדפים
5. קישורים עובדים — כל קישור מוביל לדף הנכון (בדקו!)

מילון מונחים

Frameworks להחלטות

Framework 1: הפרומפט המושלם (The Perfect First Prompt)

Framework 2: Iteration Checklist — הסדר הנכון לשיפור

Framework 3: בחירת פלטפורמת פריסה

שגרת עבודה

תרגילים מעשיים

בדוק את עצמך

סיכום הפרק

צ'קליסט — סיכום פרק 3

• מבין/ה מה HTML, CSS ו-JavaScript עושים — בלי צורך לדעת לכתוב אותם
• יודע/ת לכתוב פרומפט ראשון לפי Framework של 5 רכיבים
• בנית אתר שלם עם Claude Code מפרומפט ראשון
• ביצעת לפחות 5 סבבי Iteration לפי ה-Checklist (Layout → Polish)
• בדקת Responsive Design ב-3 גדלי מסך ותיקנת בעיות
• הוספת אינטראקציה: Smooth Scrolling, Hamburger Menu, Form Validation
• הוספת תמונות מ-Unsplash/Pexels, אייקונים, ו-Favicon
• מכיר/ה את Tailwind CSS ויודע/ת לבקש מ-Claude להשתמש בו
• פרסת את האתר לפלטפורמה (Cloudflare Pages / Vercel / Netlify) ויש לך URL חי
• מבין/ה מה DNS, SSL, ו-Domain — ויודע/ת איך לחבר דומיין
• הוספת תגיות SEO בסיסיות — Title, Description, Open Graph, Semantic HTML
• הרחבת את האתר ל-3+ דפים עם Navigation עקבי
• עושה Commit כל 15-20 דקות ו-Push ב-GitHub
• מבין/ה שפרומפט מפורט = פחות סבבי תיקונים = עבודה יעילה יותר