לשגר: מהמסך שלכם אל העולם

beginner~12 דק׳0/4 שלבים

לשגר: מהמסך שלכם אל העולם

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

החדשות הטובות? להשיג URL זה החלק הקל היום. שירותים חינמיים עושים את זה בשניות:

Netlify Drop — פותחים את האתר, גוררים את קובץ ה-HTML שלכם על הדף, מקבלים URL חי. זה כל התהליך.
Vercel — מחברים תיקייה או repo מ-GitHub, לוחצים deploy, סיימתם. (האקדמיה הזאת בעצמה רצה עליו.)

ואם נתקעתם? אתם vibe coders — תשאלו את ה-AI. "תעביר אותי שלב-שלב איך לעשות deploy לקובץ HTML הזה ב-Netlify" עובד מצוין. פעם deployment היה החלק המפחיד של תכנות. היום זו שיחה.

אבל רגע לפני שגוררים את הקובץ לאנשהו — יש הבדל בין דף שעובד לדף שמוכן להשקה. לאתרים אמיתיים יש את הליטושים המקצועיים: title אמיתי בטאב של הדפדפן, description שמנועי חיפוש ותצוגות-קישור יודעים להציג, תגיות social כדי שהלינק שלכם ייראה טוב כשמשתפים אותו בוואטסאפ או ב-X, ו-footer שאומר "בן אדם אמיתי בנה את זה — הנה, תשתפו". בשיעור האחרון הזה תיקחו את ה-Idea Board ממודול 4 ותתנו לו בדיוק את הליטושים האלה.

מה הלאה במסלול שלכם

זה השיעור האחרון של Vibe Coding Fundamentals — אבל זה צעד ראשון במסלול Zero to Hero. מכאן תפגשו את Claude Code בדפדפן (AI שבונה פרויקטים שלמים משיחה), אחר כך תתקינו את הכלי האמיתי על המחשב שלכם, ובסוף תבנו AI agent משלכם. עכשיו אתם יודעים איך הרשת נבנית. הגיע הזמן לבנות ממנה עוד הרבה.

בואו נשגר.

הוראות

תנו לדף שלכם <title> אמיתי — תחליפו את "Untitled" בשם שראוי לטאב של הדפדפן. זה הדבר הראשון שמנועי חיפוש וסימניות מציגים.

רמז: מצאו את `<title>Untitled</title>` בתוך ה-<head> ושנו אותו למשהו כמו `<title>Idea Board — Never Lose a Spark</title>`. לפחות כמה תווים — שיהיה שלכם.

הוסיפו תגית <meta name="description"> בתוך ה-<head> — משפט אחד שמסביר למנועי חיפוש (ולבני אדם סקרנים) מה האפליקציה שלכם עושה.

הוסיפו תגיות Open Graph — <meta property="og:title"> ו-<meta property="og:description">. הן קובעות איך הלינק שלכם ייראה כשמשתפים אותו בוואטסאפ, ב-X או בלינקדאין.

הוסיפו <footer> בתחתית הכרטיס עם קרדיט "Built with vibes" ו-<a id="share-link"> — כל מוצר ששוגר חותם על העבודה שלו.

הקוד שלכם

html

44 שורות

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Untitled</title>
  <script src="https://cdn.tailwindcss.com"></script>
  
  
  
</head>
<body class="bg-gradient-to-br from-violet-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">
  <div class="max-w-md w-full">

<h1 class="text-3xl font-bold text-center mb-2">💡 Idea Board</h1>
    <p class="text-indigo-300 text-sm text-center mb-6">Catch your ideas before they fly away</p>

</div>

addBtn.addEventListener('click', function () {
      const text = input.value.trim();
      if (!text) return;
      const li = document.createElement('li');
      li.className = 'bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm';
      li.textContent = text;
      list.appendChild(li);
      input.value = '';
    });
  </script>
</body>
</html>

לשגר: מהמסך שלכם אל העולם

לשגר: מהמסך שלכם אל העולם

מה הלאה במסלול שלכם

הוראות

הקוד שלכם

תצוגה חיה