דילוג לתוכן
  • חוקי הפורום
  • פופולרי
  • לא נפתר
  • משתמשים
  • חיפוש גוגל בפורום
  • צור קשר
עיצובים
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • ברירת מחדל (ללא עיצוב (ברירת מחדל))
  • ללא עיצוב (ברירת מחדל)
כיווץ
מתמחים טופ
  1. דף הבית
  2. מחשבים וטכנולוגיה
  3. עזרה הדדית - מחשבים וטכנולוגיה
  4. מדריך לבניית אתרים ב ai

מדריך לבניית אתרים ב ai

מתוזמן נעוץ נעול הועבר עזרה הדדית - מחשבים וטכנולוגיה
35 פוסטים 15 כותבים 535 צפיות 15 עוקבים
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
תגובה
  • תגובה כנושא
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • ל לנציצ

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

    עניו כמשהע מנותק
    עניו כמשהע מנותק
    עניו כמשה
    כתב נערך לאחרונה על ידי
    #3

    @לנציצ לדעתי אפשר יהיה מדריך ברמה טובה
    כולם יבואו אליו

    לפחות בהתחלה בוודאי שם ילמדו את כל היסודות

    נכון שהai יכול ללמד אותך את כל זה גם כן
    אבל כמה שיחות תצטרך לעשות איתו בשביל שהוא יסביר לך ברור כל מה שאתה צריך

    רק אם אתה שואל להדיא אולי הוא יכול להביא לך מדריך

    אבל זה גם משתנה לפי הצרכים של הבנאדם

    אז ככה שמדריך התחלתי בוודאי יכול להועיל

    ל תגובה 1 תגובה אחרונה
    4
    • עניו כמשהע עניו כמשה

      @לנציצ לדעתי אפשר יהיה מדריך ברמה טובה
      כולם יבואו אליו

      לפחות בהתחלה בוודאי שם ילמדו את כל היסודות

      נכון שהai יכול ללמד אותך את כל זה גם כן
      אבל כמה שיחות תצטרך לעשות איתו בשביל שהוא יסביר לך ברור כל מה שאתה צריך

      רק אם אתה שואל להדיא אולי הוא יכול להביא לך מדריך

      אבל זה גם משתנה לפי הצרכים של הבנאדם

      אז ככה שמדריך התחלתי בוודאי יכול להועיל

      ל מנותק
      ל מנותק
      לנציצ
      כתב נערך לאחרונה על ידי לנציצ
      #4

      @עניו-כמשה אני עשיתי מדריך 1 עד היום פה (אומנם הוא בהתחלה) אבל אני אומר לעצמי שאם ככה המצב לפני שאני עושה את השלבים הקשוחים מי יודע מה יהיה בהמשך
      ולהגיד את האמת לפי תגובת הציבור שקלתי לבטל את העניין
      אבל לבנתיים הגעתי למסקנה שאני יותר ייתן לAI לשכתב את הדברים במקום לבטל
      כלומר חבל לי להשקיע במקום שאין הענות
      יפה מאוד שכתבת
      אבל AI אסור בפורום (עד כמה שאני יודע) ובטח לא בצורה הזאת
      אני עדיין עובד לסנן את התוכן שAI שיכתב
      ואגב עם כמות הדברים שלא מובנים מאליו למשתמש המצוי שיקרא את הפוסט הוא ייצא יותר מבולבל מאשר לשאול את הAI
      וסורי אם פגעתי
      אבל יש פה דברים הדורשים תיקון

      עניו כמשהע תגובה 1 תגובה אחרונה
      1
      • ל לנציצ

        @עניו-כמשה אני עשיתי מדריך 1 עד היום פה (אומנם הוא בהתחלה) אבל אני אומר לעצמי שאם ככה המצב לפני שאני עושה את השלבים הקשוחים מי יודע מה יהיה בהמשך
        ולהגיד את האמת לפי תגובת הציבור שקלתי לבטל את העניין
        אבל לבנתיים הגעתי למסקנה שאני יותר ייתן לAI לשכתב את הדברים במקום לבטל
        כלומר חבל לי להשקיע במקום שאין הענות
        יפה מאוד שכתבת
        אבל AI אסור בפורום (עד כמה שאני יודע) ובטח לא בצורה הזאת
        אני עדיין עובד לסנן את התוכן שAI שיכתב
        ואגב עם כמות הדברים שלא מובנים מאליו למשתמש המצוי שיקרא את הפוסט הוא ייצא יותר מבולבל מאשר לשאול את הAI
        וסורי אם פגעתי
        אבל יש פה דברים הדורשים תיקון

        עניו כמשהע מנותק
        עניו כמשהע מנותק
        עניו כמשה
        כתב נערך לאחרונה על ידי עניו כמשה
        #5

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

        אם בעייתי אמחק את זה כמובן

        תגובה 1 תגובה אחרונה
        0
        • עניו כמשהע עניו כמשה

          לקחתי את הכפפה

          **הדגשה חשובה
          המדריך מיועד בעיקר ללימוד המושגים הראשונים לבאים בשערי בניית אתרים

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

          לפיתוח בפועל פנו לai הזמין אצלכם ותבקשו הדרכה יותר מתאימה לכם**

          כמובן הכל מה ai עברתי על המדריך תיקנתי בו דברים שהיו צריכים תיקון
          הוא ברמה טובה מאוד

          כמובן שאפשר לשפר אותו
          וכאן מגיע המקום שלכם

          נערך לרגל בקשת הוותיקים 🕶

          מדריך מקיף לבניית אתר בעזרת AI – מאפס ועד פרודקשן

          המטרה של המדריך הזה היא לקחת אדם שאין לו כמעט ידע טכני, ולהביא אותו למצב שבו הוא יודע:

          • להקים חשבון GitHub
          • ליצור פרויקט ראשון
          • להשתמש ב-AI כדי לכתוב את רוב הקוד
          • לבנות אתר אמיתי
          • לחבר מסד נתונים (Database)
          • להעלות את האתר לאינטרנט
          • לעבוד בצורה מסודרת כמו מפתח מקצועי

          לא נבנה SaaS מורכב. נבנה את היסודות שיאפשרו לך להקים כמעט כל רעיון שתרצה בעתיד.


          פרק 1 - להבין מה באמת בונים

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

          דוגמה:

          אתה רוצה אתר להצגת העסק שלך.

          האתר מורכב מ:

          Frontend

          מה שהמשתמש רואה.

          לדוגמה:

          • דף בית
          • תמונות
          • טפסים
          • כפתורים

          טכנולוגיות:

          • HTML
          • CSS
          • JavaScript

          או

          • React
          • Next.js

          Backend

          המוח של האתר.

          הוא מטפל ב:

          • הרשמה
          • התחברות
          • שמירת מידע
          • שליחת אימיילים

          Database

          המקום שבו נשמר המידע.

          לדוגמה:

          • משתמשים
          • הזמנות
          • פוסטים
          • תגובות

          פרק 2 - כלי העבודה המומלצים ב-2026

          למתחיל הייתי ממליץ:

          AI

          ChatGPT

          או

          Claude


          עורך קוד

          Visual Studio Code


          ניהול קוד

          GitHub


          פריסה (Hosting)

          Vercel


          מסד נתונים

          Supabase


          פרק 3 - פתיחת GitHub

          GitHub הוא המקום שבו הקוד שלך נשמר.

          תחשוב עליו כמו Google Drive לקוד.


          פתיחת חשבון

          נכנסים ל:

          GitHub

          לוחצים Sign Up.


          יצירת Repository ראשון

          Repository = תיקיית הפרויקט.

          לאחר התחברות:

          New Repository

          שם:

          my-first-website
          

          סמן:

          Add README
          

          ולחץ Create.


          פרק 4 - התקנת Git

          Git הוא הכלי שמחבר את המחשב שלך ל-GitHub.

          מורידים:

          Git Downloads


          לאחר ההתקנה פתח Terminal:

          git --version
          

          אם מופיעה גרסה:

          git version 2.xx
          

          הכל תקין.


          פרק 5 - התקנת Node.js

          רוב האתרים המודרניים משתמשים ב-Node.

          הורדה:

          Node.js


          בדיקה:

          node -v
          
          npm -v
          

          פרק 6 - התקנת VS Code

          מורידים:

          Visual Studio Code


          תוספים מומלצים:

          • ESLint
          • Prettier
          • GitHub Copilot
          • Tailwind CSS IntelliSense

          פרק 7 - למה Next.js

          ב-2026 כמעט כל פרויקט חדש מתחיל ב-Next.js.

          יתרונות:

          • SEO
          • מהיר
          • React מובנה
          • קל להעלאה ל-Vercel

          יצירת פרויקט:

          npx create-next-app@latest
          

          המערכת תשאל:

          TypeScript? Yes
          ESLint? Yes
          Tailwind? Yes
          App Router? Yes
          

          פרק 8 - מבנה הפרויקט

          לאחר ההתקנה:

          app/
          components/
          public/
          

          app

          הדפים באתר.


          components

          חלקים חוזרים.

          לדוגמה:

          • Header
          • Footer
          • Card

          public

          תמונות.


          פרק 9 - שימוש נכון ב-AI

          רוב המתחילים טועים כאן.

          לא מבקשים:

          תבנה לי אתר
          

          מבקשים:

          תבנה לי דף נחיתה לעסק צילום.
          
          צבעים:
          שחור וזהב
          
          חלקים:
          Hero
          About
          Gallery
          Contact
          
          תייצר קוד Next.js + Tailwind
          

          ה-AI עובד טוב כשנותנים הוראות ברורות.


          פרק 10 - Git בפועל

          יצירת Commit ראשון:

          git add .
          
          git commit -m "initial project"
          

          חיבור ל-GitHub:

          git remote add origin URL
          
          git push -u origin main
          

          פרק 11 - CSS ו-Tailwind

          במקום CSS רגיל משתמשים ב-Tailwind.

          דוגמה:

          <div class="bg-black text-white p-8">
          

          המשמעות:

          bg-black = רקע שחור
          text-white = טקסט לבן
          p-8 = ריווח
          

          פרק 12 - בניית דף בית

          בקשה מומלצת ל-AI:

          צור דף בית מודרני ב-Next.js
          עם Tailwind.
          
          כולל:
          Hero
          Services
          Testimonials
          Contact
          Footer
          

          הדבק את הקוד.

          שמור.


          הפעל:

          npm run dev
          

          האתר ירוץ ב:

          localhost:3000
          

          פרק 13 - מה זה Database

          Database הוא מקום לשמירת מידע.

          לדוגמה:

          טופס צור קשר.

          בלי DB:

          המידע נעלם
          

          עם DB:

          המידע נשמר
          

          פרק 14 - Supabase

          הפתרון הכי פשוט למתחילים.

          פותחים חשבון:

          Supabase


          Create Project


          לאחר יצירה:

          תקבל:

          Project URL
          API KEY
          

          פרק 15 - יצירת טבלה

          לדוגמה:

          create table contacts (
           id bigint primary key generated always as identity,
           name text,
           email text,
           message text
          );
          

          הטבלה תכיל:

          שם
          אימייל
          הודעה
          

          פרק 16 - חיבור האתר למסד הנתונים

          התקנת SDK:

          npm install @supabase/supabase-js
          

          יצירת קובץ:

          lib/supabase.ts
          

          בקשת AI:

          צור קובץ חיבור Supabase
          ב-Next.js TypeScript
          

          הוא יפיק את הקוד.


          פרק 17 - Environment Variables

          לעולם לא שומרים סיסמאות בקוד.

          יוצרים:

          .env.local
          

          דוגמה:

          NEXT_PUBLIC_SUPABASE_URL=...
          NEXT_PUBLIC_SUPABASE_ANON_KEY=...
          

          פרק 18 - טופס צור קשר

          המשתמש שולח:

          שם
          אימייל
          הודעה
          

          בעת לחיצה על Send:

          המידע נשלח ל-Supabase.


          פרק 19 - Authentication

          אם רוצים הרשמה והתחברות.

          Supabase כבר יודע:

          • Login
          • Signup
          • Password Reset

          בקשה ל-AI:

          בנה מערכת הרשמה והתחברות
          עם Supabase Auth
          ל-Next.js
          

          פרק 20 - העלאת תמונות

          אפשר:

          • Supabase Storage
          • Cloudinary

          למתחילים:

          Supabase Storage.


          פרק 21 - SEO

          SEO = הופעה בגוגל.

          חשוב מאוד.


          דוגמאות:

          כותרת:

          <title>צלם אירועים בתל אביב</title>
          

          תיאור:

          <meta name="description" content="..." />
          

          פרק 22 - אבטחה

          לעולם לא:

          ❌ לחשוף API Keys

          ❌ לשמור סיסמאות גלויות

          ❌ לתת הרשאות מלאות


          פרק 23 - העלאה לפרודקשן

          הדרך הקלה ביותר:

          Vercel


          כניסה:

          Vercel


          Login with GitHub


          בחר Repository


          Deploy


          לאחר כדקה:

          האתר באוויר.


          פרק 24 - דומיין

          קונים דומיין אצל:

          Cloudflare Registrar

          או

          Namecheap


          דוגמא:

          mybusiness.com
          

          מחברים ל-Vercel.


          פרק 25 - עדכון האתר

          בכל פעם שאתה משנה קוד:

          git add .
          
          git commit -m "update homepage"
          
          git push
          

          Vercel יעדכן אוטומטית.


          פרק 26 - זרימת עבודה מקצועית עם AI

          כך עובדים כיום:

          שלב 1

          כותבים אפיון

          אני רוצה אתר למאמן כושר.
          

          שלב 2

          מבקשים מה-AI:

          צור PRD מלא.
          

          שלב 3

          מבקשים:

          פרק את הפרויקט למשימות.
          

          שלב 4

          מבקשים:

          צור את כל מבנה התיקיות.
          

          שלב 5

          מבקשים:

          צור כל קומפוננטה בנפרד.
          

          שלב 6

          מבקשים:

          בדוק ביצועים.
          

          שלב 7

          מבקשים:

          בדוק SEO.
          

          שלב 8

          מבקשים:

          בדוק אבטחה.
          

          פרק 27 - מסלול מומלץ לפרויקט ראשון

          אל תתחיל מסטארטאפ ענק.

          תתחיל מ:

          1. אתר תיק עבודות
          2. אתר לעסק
          3. בלוג אישי
          4. אתר מתכונים
          5. אתר טיולים
          6. אתר אירועים
          7. אתר המלצות ספרים
          8. אתר המלצות מסעדות

          אלו פרויקטים שיכולים ללמד כמעט את כל היסודות.


          פרק 28 - הנוסחה הפשוטה להצלחה

          לכל אתר שתבנה:

          רעיון
          ↓
          אפיון
          ↓
          AI
          ↓
          Next.js
          ↓
          GitHub
          ↓
          Supabase
          ↓
          Vercel
          ↓
          דומיין
          ↓
          פרודקשן
          

          אם תשלוט היטב בשרשרת הזו, תוכל להקים עשרות סוגי אתרים שונים בלי להיות מתכנת ותיק. ה-AI יכתוב חלק גדול מהקוד, אבל היכולת שלך להבין איך החלקים מתחברים — GitHub, פרויקט, Frontend, Backend, Database ופריסה — היא מה שבאמת יהפוך רעיון לאתר חי באינטרנט.

          המלצה פרקטית: בנה קודם אתר פשוט של 3–5 עמודים ללא מסד נתונים. אחרי שהעלית אותו לפרודקשן, הוסף טופס, אחר כך מסד נתונים, ורק בסוף התחברות משתמשים. זו הדרך המהירה ביותר ללמוד בלי להסתבך.

          ל מנותק
          ל מנותק
          לנציצ
          כתב נערך לאחרונה על ידי
          #6

          @עניו-כמשה כתב במדריך לבניית אתרים ב ai:

          יצירת פרויקט:

          למשל תנסה להריץ את מה שכתוב פה

          עניו כמשהע תגובה 1 תגובה אחרונה
          0
          • ל לנציצ

            @עניו-כמשה כתב במדריך לבניית אתרים ב ai:

            יצירת פרויקט:

            למשל תנסה להריץ את מה שכתוב פה

            עניו כמשהע מנותק
            עניו כמשהע מנותק
            עניו כמשה
            כתב נערך לאחרונה על ידי עניו כמשה
            #7

            @לנציצ זה בעיקר בשביל להבין את הרקע והמושגים לא באמת לבנייה
            תיקנתי קצת בראשי

            אברהם גלסרא תגובה 1 תגובה אחרונה
            0
            • עניו כמשהע עניו כמשה

              @לנציצ זה בעיקר בשביל להבין את הרקע והמושגים לא באמת לבנייה
              תיקנתי קצת בראשי

              אברהם גלסרא מנותק
              אברהם גלסרא מנותק
              אברהם גלסר
              כתב נערך לאחרונה על ידי
              #8

              @עניו-כמשה מדריך שלם שנבנה עם AI, מה הקטע? כל אחד יכול לבקש כזה בעצמו...

              א תגובה 1 תגובה אחרונה
              -1
              • אברהם גלסרא אברהם גלסר

                @עניו-כמשה מדריך שלם שנבנה עם AI, מה הקטע? כל אחד יכול לבקש כזה בעצמו...

                א מנותק
                א מנותק
                אליהו הגדול
                כתב נערך לאחרונה על ידי
                #9

                @אברהם-גלסר כתב במדריך לבניית אתרים ב ai:

                מה הקטע? כל אחד יכול לבקש כזה בעצמו...

                תכלס... הוא חסך לך זמן.
                לא?🤜

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

                תגובה 1 תגובה אחרונה
                2
                • עניו כמשהע עניו כמשה

                  לקחתי את הכפפה

                  **הדגשה חשובה
                  המדריך מיועד בעיקר ללימוד המושגים הראשונים לבאים בשערי בניית אתרים

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

                  לפיתוח בפועל פנו לai הזמין אצלכם ותבקשו הדרכה יותר מתאימה לכם**

                  כמובן הכל מה ai עברתי על המדריך תיקנתי בו דברים שהיו צריכים תיקון
                  הוא ברמה טובה מאוד

                  כמובן שאפשר לשפר אותו
                  וכאן מגיע המקום שלכם

                  נערך לרגל בקשת הוותיקים 🕶

                  מדריך מקיף לבניית אתר בעזרת AI – מאפס ועד פרודקשן

                  המטרה של המדריך הזה היא לקחת אדם שאין לו כמעט ידע טכני, ולהביא אותו למצב שבו הוא יודע:

                  • להקים חשבון GitHub
                  • ליצור פרויקט ראשון
                  • להשתמש ב-AI כדי לכתוב את רוב הקוד
                  • לבנות אתר אמיתי
                  • לחבר מסד נתונים (Database)
                  • להעלות את האתר לאינטרנט
                  • לעבוד בצורה מסודרת כמו מפתח מקצועי

                  לא נבנה SaaS מורכב. נבנה את היסודות שיאפשרו לך להקים כמעט כל רעיון שתרצה בעתיד.


                  פרק 1 - להבין מה באמת בונים

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

                  דוגמה:

                  אתה רוצה אתר להצגת העסק שלך.

                  האתר מורכב מ:

                  Frontend

                  מה שהמשתמש רואה.

                  לדוגמה:

                  • דף בית
                  • תמונות
                  • טפסים
                  • כפתורים

                  טכנולוגיות:

                  • HTML
                  • CSS
                  • JavaScript

                  או

                  • React
                  • Next.js

                  Backend

                  המוח של האתר.

                  הוא מטפל ב:

                  • הרשמה
                  • התחברות
                  • שמירת מידע
                  • שליחת אימיילים

                  Database

                  המקום שבו נשמר המידע.

                  לדוגמה:

                  • משתמשים
                  • הזמנות
                  • פוסטים
                  • תגובות

                  פרק 2 - כלי העבודה המומלצים ב-2026

                  למתחיל הייתי ממליץ:

                  AI

                  ChatGPT

                  או

                  Claude


                  עורך קוד

                  Visual Studio Code


                  ניהול קוד

                  GitHub


                  פריסה (Hosting)

                  Vercel


                  מסד נתונים

                  Supabase


                  פרק 3 - פתיחת GitHub

                  GitHub הוא המקום שבו הקוד שלך נשמר.

                  תחשוב עליו כמו Google Drive לקוד.


                  פתיחת חשבון

                  נכנסים ל:

                  GitHub

                  לוחצים Sign Up.


                  יצירת Repository ראשון

                  Repository = תיקיית הפרויקט.

                  לאחר התחברות:

                  New Repository

                  שם:

                  my-first-website
                  

                  סמן:

                  Add README
                  

                  ולחץ Create.


                  פרק 4 - התקנת Git

                  Git הוא הכלי שמחבר את המחשב שלך ל-GitHub.

                  מורידים:

                  Git Downloads


                  לאחר ההתקנה פתח Terminal:

                  git --version
                  

                  אם מופיעה גרסה:

                  git version 2.xx
                  

                  הכל תקין.


                  פרק 5 - התקנת Node.js

                  רוב האתרים המודרניים משתמשים ב-Node.

                  הורדה:

                  Node.js


                  בדיקה:

                  node -v
                  
                  npm -v
                  

                  פרק 6 - התקנת VS Code

                  מורידים:

                  Visual Studio Code


                  תוספים מומלצים:

                  • ESLint
                  • Prettier
                  • GitHub Copilot
                  • Tailwind CSS IntelliSense

                  פרק 7 - למה Next.js

                  ב-2026 כמעט כל פרויקט חדש מתחיל ב-Next.js.

                  יתרונות:

                  • SEO
                  • מהיר
                  • React מובנה
                  • קל להעלאה ל-Vercel

                  יצירת פרויקט:

                  npx create-next-app@latest
                  

                  המערכת תשאל:

                  TypeScript? Yes
                  ESLint? Yes
                  Tailwind? Yes
                  App Router? Yes
                  

                  פרק 8 - מבנה הפרויקט

                  לאחר ההתקנה:

                  app/
                  components/
                  public/
                  

                  app

                  הדפים באתר.


                  components

                  חלקים חוזרים.

                  לדוגמה:

                  • Header
                  • Footer
                  • Card

                  public

                  תמונות.


                  פרק 9 - שימוש נכון ב-AI

                  רוב המתחילים טועים כאן.

                  לא מבקשים:

                  תבנה לי אתר
                  

                  מבקשים:

                  תבנה לי דף נחיתה לעסק צילום.
                  
                  צבעים:
                  שחור וזהב
                  
                  חלקים:
                  Hero
                  About
                  Gallery
                  Contact
                  
                  תייצר קוד Next.js + Tailwind
                  

                  ה-AI עובד טוב כשנותנים הוראות ברורות.


                  פרק 10 - Git בפועל

                  יצירת Commit ראשון:

                  git add .
                  
                  git commit -m "initial project"
                  

                  חיבור ל-GitHub:

                  git remote add origin URL
                  
                  git push -u origin main
                  

                  פרק 11 - CSS ו-Tailwind

                  במקום CSS רגיל משתמשים ב-Tailwind.

                  דוגמה:

                  <div class="bg-black text-white p-8">
                  

                  המשמעות:

                  bg-black = רקע שחור
                  text-white = טקסט לבן
                  p-8 = ריווח
                  

                  פרק 12 - בניית דף בית

                  בקשה מומלצת ל-AI:

                  צור דף בית מודרני ב-Next.js
                  עם Tailwind.
                  
                  כולל:
                  Hero
                  Services
                  Testimonials
                  Contact
                  Footer
                  

                  הדבק את הקוד.

                  שמור.


                  הפעל:

                  npm run dev
                  

                  האתר ירוץ ב:

                  localhost:3000
                  

                  פרק 13 - מה זה Database

                  Database הוא מקום לשמירת מידע.

                  לדוגמה:

                  טופס צור קשר.

                  בלי DB:

                  המידע נעלם
                  

                  עם DB:

                  המידע נשמר
                  

                  פרק 14 - Supabase

                  הפתרון הכי פשוט למתחילים.

                  פותחים חשבון:

                  Supabase


                  Create Project


                  לאחר יצירה:

                  תקבל:

                  Project URL
                  API KEY
                  

                  פרק 15 - יצירת טבלה

                  לדוגמה:

                  create table contacts (
                   id bigint primary key generated always as identity,
                   name text,
                   email text,
                   message text
                  );
                  

                  הטבלה תכיל:

                  שם
                  אימייל
                  הודעה
                  

                  פרק 16 - חיבור האתר למסד הנתונים

                  התקנת SDK:

                  npm install @supabase/supabase-js
                  

                  יצירת קובץ:

                  lib/supabase.ts
                  

                  בקשת AI:

                  צור קובץ חיבור Supabase
                  ב-Next.js TypeScript
                  

                  הוא יפיק את הקוד.


                  פרק 17 - Environment Variables

                  לעולם לא שומרים סיסמאות בקוד.

                  יוצרים:

                  .env.local
                  

                  דוגמה:

                  NEXT_PUBLIC_SUPABASE_URL=...
                  NEXT_PUBLIC_SUPABASE_ANON_KEY=...
                  

                  פרק 18 - טופס צור קשר

                  המשתמש שולח:

                  שם
                  אימייל
                  הודעה
                  

                  בעת לחיצה על Send:

                  המידע נשלח ל-Supabase.


                  פרק 19 - Authentication

                  אם רוצים הרשמה והתחברות.

                  Supabase כבר יודע:

                  • Login
                  • Signup
                  • Password Reset

                  בקשה ל-AI:

                  בנה מערכת הרשמה והתחברות
                  עם Supabase Auth
                  ל-Next.js
                  

                  פרק 20 - העלאת תמונות

                  אפשר:

                  • Supabase Storage
                  • Cloudinary

                  למתחילים:

                  Supabase Storage.


                  פרק 21 - SEO

                  SEO = הופעה בגוגל.

                  חשוב מאוד.


                  דוגמאות:

                  כותרת:

                  <title>צלם אירועים בתל אביב</title>
                  

                  תיאור:

                  <meta name="description" content="..." />
                  

                  פרק 22 - אבטחה

                  לעולם לא:

                  ❌ לחשוף API Keys

                  ❌ לשמור סיסמאות גלויות

                  ❌ לתת הרשאות מלאות


                  פרק 23 - העלאה לפרודקשן

                  הדרך הקלה ביותר:

                  Vercel


                  כניסה:

                  Vercel


                  Login with GitHub


                  בחר Repository


                  Deploy


                  לאחר כדקה:

                  האתר באוויר.


                  פרק 24 - דומיין

                  קונים דומיין אצל:

                  Cloudflare Registrar

                  או

                  Namecheap


                  דוגמא:

                  mybusiness.com
                  

                  מחברים ל-Vercel.


                  פרק 25 - עדכון האתר

                  בכל פעם שאתה משנה קוד:

                  git add .
                  
                  git commit -m "update homepage"
                  
                  git push
                  

                  Vercel יעדכן אוטומטית.


                  פרק 26 - זרימת עבודה מקצועית עם AI

                  כך עובדים כיום:

                  שלב 1

                  כותבים אפיון

                  אני רוצה אתר למאמן כושר.
                  

                  שלב 2

                  מבקשים מה-AI:

                  צור PRD מלא.
                  

                  שלב 3

                  מבקשים:

                  פרק את הפרויקט למשימות.
                  

                  שלב 4

                  מבקשים:

                  צור את כל מבנה התיקיות.
                  

                  שלב 5

                  מבקשים:

                  צור כל קומפוננטה בנפרד.
                  

                  שלב 6

                  מבקשים:

                  בדוק ביצועים.
                  

                  שלב 7

                  מבקשים:

                  בדוק SEO.
                  

                  שלב 8

                  מבקשים:

                  בדוק אבטחה.
                  

                  פרק 27 - מסלול מומלץ לפרויקט ראשון

                  אל תתחיל מסטארטאפ ענק.

                  תתחיל מ:

                  1. אתר תיק עבודות
                  2. אתר לעסק
                  3. בלוג אישי
                  4. אתר מתכונים
                  5. אתר טיולים
                  6. אתר אירועים
                  7. אתר המלצות ספרים
                  8. אתר המלצות מסעדות

                  אלו פרויקטים שיכולים ללמד כמעט את כל היסודות.


                  פרק 28 - הנוסחה הפשוטה להצלחה

                  לכל אתר שתבנה:

                  רעיון
                  ↓
                  אפיון
                  ↓
                  AI
                  ↓
                  Next.js
                  ↓
                  GitHub
                  ↓
                  Supabase
                  ↓
                  Vercel
                  ↓
                  דומיין
                  ↓
                  פרודקשן
                  

                  אם תשלוט היטב בשרשרת הזו, תוכל להקים עשרות סוגי אתרים שונים בלי להיות מתכנת ותיק. ה-AI יכתוב חלק גדול מהקוד, אבל היכולת שלך להבין איך החלקים מתחברים — GitHub, פרויקט, Frontend, Backend, Database ופריסה — היא מה שבאמת יהפוך רעיון לאתר חי באינטרנט.

                  המלצה פרקטית: בנה קודם אתר פשוט של 3–5 עמודים ללא מסד נתונים. אחרי שהעלית אותו לפרודקשן, הוסף טופס, אחר כך מסד נתונים, ורק בסוף התחברות משתמשים. זו הדרך המהירה ביותר ללמוד בלי להסתבך.

                  ח מנותק
                  ח מנותק
                  חיים5299173
                  כתב נערך לאחרונה על ידי
                  #10

                  קודם כל תודה רבה על המדריך!

                  @עניו-כמשה כתב במדריך לבניית אתרים ב ai:

                  GitHub הוא המקום שבו הקוד שלך נשמר.

                  תחשוב עליו כמו Google Drive לקוד.

                  למה בעצם אני צריך את גיטהב? למה לא להשאיר על המחשב? מה הערך המוסף שגיטהב נותן לי חוץ מאחסון?

                  ט תגובה 1 תגובה אחרונה
                  1
                  • עניו כמשהע עניו כמשה

                    לקחתי את הכפפה

                    **הדגשה חשובה
                    המדריך מיועד בעיקר ללימוד המושגים הראשונים לבאים בשערי בניית אתרים

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

                    לפיתוח בפועל פנו לai הזמין אצלכם ותבקשו הדרכה יותר מתאימה לכם**

                    כמובן הכל מה ai עברתי על המדריך תיקנתי בו דברים שהיו צריכים תיקון
                    הוא ברמה טובה מאוד

                    כמובן שאפשר לשפר אותו
                    וכאן מגיע המקום שלכם

                    נערך לרגל בקשת הוותיקים 🕶

                    מדריך מקיף לבניית אתר בעזרת AI – מאפס ועד פרודקשן

                    המטרה של המדריך הזה היא לקחת אדם שאין לו כמעט ידע טכני, ולהביא אותו למצב שבו הוא יודע:

                    • להקים חשבון GitHub
                    • ליצור פרויקט ראשון
                    • להשתמש ב-AI כדי לכתוב את רוב הקוד
                    • לבנות אתר אמיתי
                    • לחבר מסד נתונים (Database)
                    • להעלות את האתר לאינטרנט
                    • לעבוד בצורה מסודרת כמו מפתח מקצועי

                    לא נבנה SaaS מורכב. נבנה את היסודות שיאפשרו לך להקים כמעט כל רעיון שתרצה בעתיד.


                    פרק 1 - להבין מה באמת בונים

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

                    דוגמה:

                    אתה רוצה אתר להצגת העסק שלך.

                    האתר מורכב מ:

                    Frontend

                    מה שהמשתמש רואה.

                    לדוגמה:

                    • דף בית
                    • תמונות
                    • טפסים
                    • כפתורים

                    טכנולוגיות:

                    • HTML
                    • CSS
                    • JavaScript

                    או

                    • React
                    • Next.js

                    Backend

                    המוח של האתר.

                    הוא מטפל ב:

                    • הרשמה
                    • התחברות
                    • שמירת מידע
                    • שליחת אימיילים

                    Database

                    המקום שבו נשמר המידע.

                    לדוגמה:

                    • משתמשים
                    • הזמנות
                    • פוסטים
                    • תגובות

                    פרק 2 - כלי העבודה המומלצים ב-2026

                    למתחיל הייתי ממליץ:

                    AI

                    ChatGPT

                    או

                    Claude


                    עורך קוד

                    Visual Studio Code


                    ניהול קוד

                    GitHub


                    פריסה (Hosting)

                    Vercel


                    מסד נתונים

                    Supabase


                    פרק 3 - פתיחת GitHub

                    GitHub הוא המקום שבו הקוד שלך נשמר.

                    תחשוב עליו כמו Google Drive לקוד.


                    פתיחת חשבון

                    נכנסים ל:

                    GitHub

                    לוחצים Sign Up.


                    יצירת Repository ראשון

                    Repository = תיקיית הפרויקט.

                    לאחר התחברות:

                    New Repository

                    שם:

                    my-first-website
                    

                    סמן:

                    Add README
                    

                    ולחץ Create.


                    פרק 4 - התקנת Git

                    Git הוא הכלי שמחבר את המחשב שלך ל-GitHub.

                    מורידים:

                    Git Downloads


                    לאחר ההתקנה פתח Terminal:

                    git --version
                    

                    אם מופיעה גרסה:

                    git version 2.xx
                    

                    הכל תקין.


                    פרק 5 - התקנת Node.js

                    רוב האתרים המודרניים משתמשים ב-Node.

                    הורדה:

                    Node.js


                    בדיקה:

                    node -v
                    
                    npm -v
                    

                    פרק 6 - התקנת VS Code

                    מורידים:

                    Visual Studio Code


                    תוספים מומלצים:

                    • ESLint
                    • Prettier
                    • GitHub Copilot
                    • Tailwind CSS IntelliSense

                    פרק 7 - למה Next.js

                    ב-2026 כמעט כל פרויקט חדש מתחיל ב-Next.js.

                    יתרונות:

                    • SEO
                    • מהיר
                    • React מובנה
                    • קל להעלאה ל-Vercel

                    יצירת פרויקט:

                    npx create-next-app@latest
                    

                    המערכת תשאל:

                    TypeScript? Yes
                    ESLint? Yes
                    Tailwind? Yes
                    App Router? Yes
                    

                    פרק 8 - מבנה הפרויקט

                    לאחר ההתקנה:

                    app/
                    components/
                    public/
                    

                    app

                    הדפים באתר.


                    components

                    חלקים חוזרים.

                    לדוגמה:

                    • Header
                    • Footer
                    • Card

                    public

                    תמונות.


                    פרק 9 - שימוש נכון ב-AI

                    רוב המתחילים טועים כאן.

                    לא מבקשים:

                    תבנה לי אתר
                    

                    מבקשים:

                    תבנה לי דף נחיתה לעסק צילום.
                    
                    צבעים:
                    שחור וזהב
                    
                    חלקים:
                    Hero
                    About
                    Gallery
                    Contact
                    
                    תייצר קוד Next.js + Tailwind
                    

                    ה-AI עובד טוב כשנותנים הוראות ברורות.


                    פרק 10 - Git בפועל

                    יצירת Commit ראשון:

                    git add .
                    
                    git commit -m "initial project"
                    

                    חיבור ל-GitHub:

                    git remote add origin URL
                    
                    git push -u origin main
                    

                    פרק 11 - CSS ו-Tailwind

                    במקום CSS רגיל משתמשים ב-Tailwind.

                    דוגמה:

                    <div class="bg-black text-white p-8">
                    

                    המשמעות:

                    bg-black = רקע שחור
                    text-white = טקסט לבן
                    p-8 = ריווח
                    

                    פרק 12 - בניית דף בית

                    בקשה מומלצת ל-AI:

                    צור דף בית מודרני ב-Next.js
                    עם Tailwind.
                    
                    כולל:
                    Hero
                    Services
                    Testimonials
                    Contact
                    Footer
                    

                    הדבק את הקוד.

                    שמור.


                    הפעל:

                    npm run dev
                    

                    האתר ירוץ ב:

                    localhost:3000
                    

                    פרק 13 - מה זה Database

                    Database הוא מקום לשמירת מידע.

                    לדוגמה:

                    טופס צור קשר.

                    בלי DB:

                    המידע נעלם
                    

                    עם DB:

                    המידע נשמר
                    

                    פרק 14 - Supabase

                    הפתרון הכי פשוט למתחילים.

                    פותחים חשבון:

                    Supabase


                    Create Project


                    לאחר יצירה:

                    תקבל:

                    Project URL
                    API KEY
                    

                    פרק 15 - יצירת טבלה

                    לדוגמה:

                    create table contacts (
                     id bigint primary key generated always as identity,
                     name text,
                     email text,
                     message text
                    );
                    

                    הטבלה תכיל:

                    שם
                    אימייל
                    הודעה
                    

                    פרק 16 - חיבור האתר למסד הנתונים

                    התקנת SDK:

                    npm install @supabase/supabase-js
                    

                    יצירת קובץ:

                    lib/supabase.ts
                    

                    בקשת AI:

                    צור קובץ חיבור Supabase
                    ב-Next.js TypeScript
                    

                    הוא יפיק את הקוד.


                    פרק 17 - Environment Variables

                    לעולם לא שומרים סיסמאות בקוד.

                    יוצרים:

                    .env.local
                    

                    דוגמה:

                    NEXT_PUBLIC_SUPABASE_URL=...
                    NEXT_PUBLIC_SUPABASE_ANON_KEY=...
                    

                    פרק 18 - טופס צור קשר

                    המשתמש שולח:

                    שם
                    אימייל
                    הודעה
                    

                    בעת לחיצה על Send:

                    המידע נשלח ל-Supabase.


                    פרק 19 - Authentication

                    אם רוצים הרשמה והתחברות.

                    Supabase כבר יודע:

                    • Login
                    • Signup
                    • Password Reset

                    בקשה ל-AI:

                    בנה מערכת הרשמה והתחברות
                    עם Supabase Auth
                    ל-Next.js
                    

                    פרק 20 - העלאת תמונות

                    אפשר:

                    • Supabase Storage
                    • Cloudinary

                    למתחילים:

                    Supabase Storage.


                    פרק 21 - SEO

                    SEO = הופעה בגוגל.

                    חשוב מאוד.


                    דוגמאות:

                    כותרת:

                    <title>צלם אירועים בתל אביב</title>
                    

                    תיאור:

                    <meta name="description" content="..." />
                    

                    פרק 22 - אבטחה

                    לעולם לא:

                    ❌ לחשוף API Keys

                    ❌ לשמור סיסמאות גלויות

                    ❌ לתת הרשאות מלאות


                    פרק 23 - העלאה לפרודקשן

                    הדרך הקלה ביותר:

                    Vercel


                    כניסה:

                    Vercel


                    Login with GitHub


                    בחר Repository


                    Deploy


                    לאחר כדקה:

                    האתר באוויר.


                    פרק 24 - דומיין

                    קונים דומיין אצל:

                    Cloudflare Registrar

                    או

                    Namecheap


                    דוגמא:

                    mybusiness.com
                    

                    מחברים ל-Vercel.


                    פרק 25 - עדכון האתר

                    בכל פעם שאתה משנה קוד:

                    git add .
                    
                    git commit -m "update homepage"
                    
                    git push
                    

                    Vercel יעדכן אוטומטית.


                    פרק 26 - זרימת עבודה מקצועית עם AI

                    כך עובדים כיום:

                    שלב 1

                    כותבים אפיון

                    אני רוצה אתר למאמן כושר.
                    

                    שלב 2

                    מבקשים מה-AI:

                    צור PRD מלא.
                    

                    שלב 3

                    מבקשים:

                    פרק את הפרויקט למשימות.
                    

                    שלב 4

                    מבקשים:

                    צור את כל מבנה התיקיות.
                    

                    שלב 5

                    מבקשים:

                    צור כל קומפוננטה בנפרד.
                    

                    שלב 6

                    מבקשים:

                    בדוק ביצועים.
                    

                    שלב 7

                    מבקשים:

                    בדוק SEO.
                    

                    שלב 8

                    מבקשים:

                    בדוק אבטחה.
                    

                    פרק 27 - מסלול מומלץ לפרויקט ראשון

                    אל תתחיל מסטארטאפ ענק.

                    תתחיל מ:

                    1. אתר תיק עבודות
                    2. אתר לעסק
                    3. בלוג אישי
                    4. אתר מתכונים
                    5. אתר טיולים
                    6. אתר אירועים
                    7. אתר המלצות ספרים
                    8. אתר המלצות מסעדות

                    אלו פרויקטים שיכולים ללמד כמעט את כל היסודות.


                    פרק 28 - הנוסחה הפשוטה להצלחה

                    לכל אתר שתבנה:

                    רעיון
                    ↓
                    אפיון
                    ↓
                    AI
                    ↓
                    Next.js
                    ↓
                    GitHub
                    ↓
                    Supabase
                    ↓
                    Vercel
                    ↓
                    דומיין
                    ↓
                    פרודקשן
                    

                    אם תשלוט היטב בשרשרת הזו, תוכל להקים עשרות סוגי אתרים שונים בלי להיות מתכנת ותיק. ה-AI יכתוב חלק גדול מהקוד, אבל היכולת שלך להבין איך החלקים מתחברים — GitHub, פרויקט, Frontend, Backend, Database ופריסה — היא מה שבאמת יהפוך רעיון לאתר חי באינטרנט.

                    המלצה פרקטית: בנה קודם אתר פשוט של 3–5 עמודים ללא מסד נתונים. אחרי שהעלית אותו לפרודקשן, הוסף טופס, אחר כך מסד נתונים, ורק בסוף התחברות משתמשים. זו הדרך המהירה ביותר ללמוד בלי להסתבך.

                    ע מנותק
                    ע מנותק
                    עמי מחשבים
                    כתב נערך לאחרונה על ידי
                    #11

                    @עניו-כמשה אני חושב שהמדריך נפלא
                    עושה סדר לאנשים בראש מה התבנית אחר כך עם AI אפשר לשנות להחליף שירותים העיקר שלפחות הרעיון הבסיסי מובן בראש

                    תגובה 1 תגובה אחרונה
                    0
                    • ר מנותק
                      ר מנותק
                      ר' יענקל'ה
                      כתב נערך לאחרונה על ידי ר' יענקל'ה
                      #12

                      האמת שאני הרגשתי מאוד לא נעים לקרוא את השרשור הזה, למה לתקוף מיד? בן אדם שעבד קשה על משהו, מן הראוי קודם לשבח ואז לכתוב לו הערות והארות, ממש חבל שככה ענו לו, (וחוץ מזה אפשר לכתוב לו הערות באישי).
                      חוץ מזה יש כאן באתר שני סוגי אנשים 1. אנשים שכבר בתוך הענינים כמה שנים ומבינים הכל ולהם באמת לא מועיל כאלו פרוקטים והסברים, אבל מצד שני יש כאלו שרק עכשיו מתחילים או מדי פעם רוצים להתעסק בזה ואינם 'מבינים' ולהם זה יועיל כנראה.

                      אבל מכיון שמי שכתב את המדריך הוא "עניו כמשה" מסתמא הוא לא כועס.......

                      עניו כמשהע תגובה 1 תגובה אחרונה
                      2
                      • ר ר' יענקל'ה

                        האמת שאני הרגשתי מאוד לא נעים לקרוא את השרשור הזה, למה לתקוף מיד? בן אדם שעבד קשה על משהו, מן הראוי קודם לשבח ואז לכתוב לו הערות והארות, ממש חבל שככה ענו לו, (וחוץ מזה אפשר לכתוב לו הערות באישי).
                        חוץ מזה יש כאן באתר שני סוגי אנשים 1. אנשים שכבר בתוך הענינים כמה שנים ומבינים הכל ולהם באמת לא מועיל כאלו פרוקטים והסברים, אבל מצד שני יש כאלו שרק עכשיו מתחילים או מדי פעם רוצים להתעסק בזה ואינם 'מבינים' ולהם זה יועיל כנראה.

                        אבל מכיון שמי שכתב את המדריך הוא "עניו כמשה" מסתמא הוא לא כועס.......

                        עניו כמשהע מנותק
                        עניו כמשהע מנותק
                        עניו כמשה
                        כתב נערך לאחרונה על ידי
                        #13

                        @ר-יענקל-ה כתב במדריך לבניית אתרים ב ai:

                        מסתמא הוא לא כועס

                        אין מה לכעוס בכלל

                        רשות הדיבור ניתנה לכל אחד

                        אבל בטח לא רשות הזלזול

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

                        תגובה 1 תגובה אחרונה
                        2
                        • עניו כמשהע עניו כמשה

                          לקחתי את הכפפה

                          **הדגשה חשובה
                          המדריך מיועד בעיקר ללימוד המושגים הראשונים לבאים בשערי בניית אתרים

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

                          לפיתוח בפועל פנו לai הזמין אצלכם ותבקשו הדרכה יותר מתאימה לכם**

                          כמובן הכל מה ai עברתי על המדריך תיקנתי בו דברים שהיו צריכים תיקון
                          הוא ברמה טובה מאוד

                          כמובן שאפשר לשפר אותו
                          וכאן מגיע המקום שלכם

                          נערך לרגל בקשת הוותיקים 🕶

                          מדריך מקיף לבניית אתר בעזרת AI – מאפס ועד פרודקשן

                          המטרה של המדריך הזה היא לקחת אדם שאין לו כמעט ידע טכני, ולהביא אותו למצב שבו הוא יודע:

                          • להקים חשבון GitHub
                          • ליצור פרויקט ראשון
                          • להשתמש ב-AI כדי לכתוב את רוב הקוד
                          • לבנות אתר אמיתי
                          • לחבר מסד נתונים (Database)
                          • להעלות את האתר לאינטרנט
                          • לעבוד בצורה מסודרת כמו מפתח מקצועי

                          לא נבנה SaaS מורכב. נבנה את היסודות שיאפשרו לך להקים כמעט כל רעיון שתרצה בעתיד.


                          פרק 1 - להבין מה באמת בונים

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

                          דוגמה:

                          אתה רוצה אתר להצגת העסק שלך.

                          האתר מורכב מ:

                          Frontend

                          מה שהמשתמש רואה.

                          לדוגמה:

                          • דף בית
                          • תמונות
                          • טפסים
                          • כפתורים

                          טכנולוגיות:

                          • HTML
                          • CSS
                          • JavaScript

                          או

                          • React
                          • Next.js

                          Backend

                          המוח של האתר.

                          הוא מטפל ב:

                          • הרשמה
                          • התחברות
                          • שמירת מידע
                          • שליחת אימיילים

                          Database

                          המקום שבו נשמר המידע.

                          לדוגמה:

                          • משתמשים
                          • הזמנות
                          • פוסטים
                          • תגובות

                          פרק 2 - כלי העבודה המומלצים ב-2026

                          למתחיל הייתי ממליץ:

                          AI

                          ChatGPT

                          או

                          Claude


                          עורך קוד

                          Visual Studio Code


                          ניהול קוד

                          GitHub


                          פריסה (Hosting)

                          Vercel


                          מסד נתונים

                          Supabase


                          פרק 3 - פתיחת GitHub

                          GitHub הוא המקום שבו הקוד שלך נשמר.

                          תחשוב עליו כמו Google Drive לקוד.


                          פתיחת חשבון

                          נכנסים ל:

                          GitHub

                          לוחצים Sign Up.


                          יצירת Repository ראשון

                          Repository = תיקיית הפרויקט.

                          לאחר התחברות:

                          New Repository

                          שם:

                          my-first-website
                          

                          סמן:

                          Add README
                          

                          ולחץ Create.


                          פרק 4 - התקנת Git

                          Git הוא הכלי שמחבר את המחשב שלך ל-GitHub.

                          מורידים:

                          Git Downloads


                          לאחר ההתקנה פתח Terminal:

                          git --version
                          

                          אם מופיעה גרסה:

                          git version 2.xx
                          

                          הכל תקין.


                          פרק 5 - התקנת Node.js

                          רוב האתרים המודרניים משתמשים ב-Node.

                          הורדה:

                          Node.js


                          בדיקה:

                          node -v
                          
                          npm -v
                          

                          פרק 6 - התקנת VS Code

                          מורידים:

                          Visual Studio Code


                          תוספים מומלצים:

                          • ESLint
                          • Prettier
                          • GitHub Copilot
                          • Tailwind CSS IntelliSense

                          פרק 7 - למה Next.js

                          ב-2026 כמעט כל פרויקט חדש מתחיל ב-Next.js.

                          יתרונות:

                          • SEO
                          • מהיר
                          • React מובנה
                          • קל להעלאה ל-Vercel

                          יצירת פרויקט:

                          npx create-next-app@latest
                          

                          המערכת תשאל:

                          TypeScript? Yes
                          ESLint? Yes
                          Tailwind? Yes
                          App Router? Yes
                          

                          פרק 8 - מבנה הפרויקט

                          לאחר ההתקנה:

                          app/
                          components/
                          public/
                          

                          app

                          הדפים באתר.


                          components

                          חלקים חוזרים.

                          לדוגמה:

                          • Header
                          • Footer
                          • Card

                          public

                          תמונות.


                          פרק 9 - שימוש נכון ב-AI

                          רוב המתחילים טועים כאן.

                          לא מבקשים:

                          תבנה לי אתר
                          

                          מבקשים:

                          תבנה לי דף נחיתה לעסק צילום.
                          
                          צבעים:
                          שחור וזהב
                          
                          חלקים:
                          Hero
                          About
                          Gallery
                          Contact
                          
                          תייצר קוד Next.js + Tailwind
                          

                          ה-AI עובד טוב כשנותנים הוראות ברורות.


                          פרק 10 - Git בפועל

                          יצירת Commit ראשון:

                          git add .
                          
                          git commit -m "initial project"
                          

                          חיבור ל-GitHub:

                          git remote add origin URL
                          
                          git push -u origin main
                          

                          פרק 11 - CSS ו-Tailwind

                          במקום CSS רגיל משתמשים ב-Tailwind.

                          דוגמה:

                          <div class="bg-black text-white p-8">
                          

                          המשמעות:

                          bg-black = רקע שחור
                          text-white = טקסט לבן
                          p-8 = ריווח
                          

                          פרק 12 - בניית דף בית

                          בקשה מומלצת ל-AI:

                          צור דף בית מודרני ב-Next.js
                          עם Tailwind.
                          
                          כולל:
                          Hero
                          Services
                          Testimonials
                          Contact
                          Footer
                          

                          הדבק את הקוד.

                          שמור.


                          הפעל:

                          npm run dev
                          

                          האתר ירוץ ב:

                          localhost:3000
                          

                          פרק 13 - מה זה Database

                          Database הוא מקום לשמירת מידע.

                          לדוגמה:

                          טופס צור קשר.

                          בלי DB:

                          המידע נעלם
                          

                          עם DB:

                          המידע נשמר
                          

                          פרק 14 - Supabase

                          הפתרון הכי פשוט למתחילים.

                          פותחים חשבון:

                          Supabase


                          Create Project


                          לאחר יצירה:

                          תקבל:

                          Project URL
                          API KEY
                          

                          פרק 15 - יצירת טבלה

                          לדוגמה:

                          create table contacts (
                           id bigint primary key generated always as identity,
                           name text,
                           email text,
                           message text
                          );
                          

                          הטבלה תכיל:

                          שם
                          אימייל
                          הודעה
                          

                          פרק 16 - חיבור האתר למסד הנתונים

                          התקנת SDK:

                          npm install @supabase/supabase-js
                          

                          יצירת קובץ:

                          lib/supabase.ts
                          

                          בקשת AI:

                          צור קובץ חיבור Supabase
                          ב-Next.js TypeScript
                          

                          הוא יפיק את הקוד.


                          פרק 17 - Environment Variables

                          לעולם לא שומרים סיסמאות בקוד.

                          יוצרים:

                          .env.local
                          

                          דוגמה:

                          NEXT_PUBLIC_SUPABASE_URL=...
                          NEXT_PUBLIC_SUPABASE_ANON_KEY=...
                          

                          פרק 18 - טופס צור קשר

                          המשתמש שולח:

                          שם
                          אימייל
                          הודעה
                          

                          בעת לחיצה על Send:

                          המידע נשלח ל-Supabase.


                          פרק 19 - Authentication

                          אם רוצים הרשמה והתחברות.

                          Supabase כבר יודע:

                          • Login
                          • Signup
                          • Password Reset

                          בקשה ל-AI:

                          בנה מערכת הרשמה והתחברות
                          עם Supabase Auth
                          ל-Next.js
                          

                          פרק 20 - העלאת תמונות

                          אפשר:

                          • Supabase Storage
                          • Cloudinary

                          למתחילים:

                          Supabase Storage.


                          פרק 21 - SEO

                          SEO = הופעה בגוגל.

                          חשוב מאוד.


                          דוגמאות:

                          כותרת:

                          <title>צלם אירועים בתל אביב</title>
                          

                          תיאור:

                          <meta name="description" content="..." />
                          

                          פרק 22 - אבטחה

                          לעולם לא:

                          ❌ לחשוף API Keys

                          ❌ לשמור סיסמאות גלויות

                          ❌ לתת הרשאות מלאות


                          פרק 23 - העלאה לפרודקשן

                          הדרך הקלה ביותר:

                          Vercel


                          כניסה:

                          Vercel


                          Login with GitHub


                          בחר Repository


                          Deploy


                          לאחר כדקה:

                          האתר באוויר.


                          פרק 24 - דומיין

                          קונים דומיין אצל:

                          Cloudflare Registrar

                          או

                          Namecheap


                          דוגמא:

                          mybusiness.com
                          

                          מחברים ל-Vercel.


                          פרק 25 - עדכון האתר

                          בכל פעם שאתה משנה קוד:

                          git add .
                          
                          git commit -m "update homepage"
                          
                          git push
                          

                          Vercel יעדכן אוטומטית.


                          פרק 26 - זרימת עבודה מקצועית עם AI

                          כך עובדים כיום:

                          שלב 1

                          כותבים אפיון

                          אני רוצה אתר למאמן כושר.
                          

                          שלב 2

                          מבקשים מה-AI:

                          צור PRD מלא.
                          

                          שלב 3

                          מבקשים:

                          פרק את הפרויקט למשימות.
                          

                          שלב 4

                          מבקשים:

                          צור את כל מבנה התיקיות.
                          

                          שלב 5

                          מבקשים:

                          צור כל קומפוננטה בנפרד.
                          

                          שלב 6

                          מבקשים:

                          בדוק ביצועים.
                          

                          שלב 7

                          מבקשים:

                          בדוק SEO.
                          

                          שלב 8

                          מבקשים:

                          בדוק אבטחה.
                          

                          פרק 27 - מסלול מומלץ לפרויקט ראשון

                          אל תתחיל מסטארטאפ ענק.

                          תתחיל מ:

                          1. אתר תיק עבודות
                          2. אתר לעסק
                          3. בלוג אישי
                          4. אתר מתכונים
                          5. אתר טיולים
                          6. אתר אירועים
                          7. אתר המלצות ספרים
                          8. אתר המלצות מסעדות

                          אלו פרויקטים שיכולים ללמד כמעט את כל היסודות.


                          פרק 28 - הנוסחה הפשוטה להצלחה

                          לכל אתר שתבנה:

                          רעיון
                          ↓
                          אפיון
                          ↓
                          AI
                          ↓
                          Next.js
                          ↓
                          GitHub
                          ↓
                          Supabase
                          ↓
                          Vercel
                          ↓
                          דומיין
                          ↓
                          פרודקשן
                          

                          אם תשלוט היטב בשרשרת הזו, תוכל להקים עשרות סוגי אתרים שונים בלי להיות מתכנת ותיק. ה-AI יכתוב חלק גדול מהקוד, אבל היכולת שלך להבין איך החלקים מתחברים — GitHub, פרויקט, Frontend, Backend, Database ופריסה — היא מה שבאמת יהפוך רעיון לאתר חי באינטרנט.

                          המלצה פרקטית: בנה קודם אתר פשוט של 3–5 עמודים ללא מסד נתונים. אחרי שהעלית אותו לפרודקשן, הוסף טופס, אחר כך מסד נתונים, ורק בסוף התחברות משתמשים. זו הדרך המהירה ביותר ללמוד בלי להסתבך.

                          אברהם גלסרא מנותק
                          אברהם גלסרא מנותק
                          אברהם גלסר
                          כתב נערך לאחרונה על ידי אברהם גלסר
                          #14

                          @עניו-כמשה קודם כל מצטער מאוד שהשתמע מדברי שזלזלתי.
                          התכוונתי לומר שלא נראה לי שלזה מיועד הפורום.
                          לא נראה שניכרת השקעה כל כך ב"כתיבת המדריך" שנכתב על ידי AI.
                          גם אם עברת על מה שהAI כתב כדי לתקן קצת, זה עדיין מדריך שנכתב 90/100% על ידי AI וזה בדיוק מסוג הדברים שמספימים את הפורום.
                          תחשוב על זה; בן אדם יכול לשאול "למה בכלל צריך את הפורום עכשיו אם יש AI? כל אחד יכול פשוט לשאול אותו והוא יענה על הכל..."
                          התשובה הפשוטה בעיניי היא שניסיון שווה המון. אנשים פה באו לקרוא ולהחכים וללמוד מאנשים שיש להם ניסיון ולא מAI שכל אחד יכול פשוט לשאול אותו בעצמו.
                          דעתי בפועל לא משנה פה ואני לא צוות פיקוח ובטח לא האחראי על הסדר פה בפורום ובכל זאת זה צרם לי.
                          אשאיר את ההחלטה כמו שכתבתי ל @צוות-פיקוח המדהימים.
                          אם יש בעיה עם הפוסט שלי תמחקו אותו.

                          עניו כמשהע תגובה 1 תגובה אחרונה
                          0
                          • אברהם גלסרא אברהם גלסר

                            @עניו-כמשה קודם כל מצטער מאוד שהשתמע מדברי שזלזלתי.
                            התכוונתי לומר שלא נראה לי שלזה מיועד הפורום.
                            לא נראה שניכרת השקעה כל כך ב"כתיבת המדריך" שנכתב על ידי AI.
                            גם אם עברת על מה שהAI כתב כדי לתקן קצת, זה עדיין מדריך שנכתב 90/100% על ידי AI וזה בדיוק מסוג הדברים שמספימים את הפורום.
                            תחשוב על זה; בן אדם יכול לשאול "למה בכלל צריך את הפורום עכשיו אם יש AI? כל אחד יכול פשוט לשאול אותו והוא יענה על הכל..."
                            התשובה הפשוטה בעיניי היא שניסיון שווה המון. אנשים פה באו לקרוא ולהחכים וללמוד מאנשים שיש להם ניסיון ולא מAI שכל אחד יכול פשוט לשאול אותו בעצמו.
                            דעתי בפועל לא משנה פה ואני לא צוות פיקוח ובטח לא האחראי על הסדר פה בפורום ובכל זאת זה צרם לי.
                            אשאיר את ההחלטה כמו שכתבתי ל @צוות-פיקוח המדהימים.
                            אם יש בעיה עם הפוסט שלי תמחקו אותו.

                            עניו כמשהע מנותק
                            עניו כמשהע מנותק
                            עניו כמשה
                            כתב נערך לאחרונה על ידי
                            #15

                            @אברהם-גלסר כתב במדריך לבניית אתרים ב ai:

                            שניסיון שווה המון.

                            וזה בדיוק מה שיש פה

                            כי לא כל אחד מבין את מה שכותב הAI ויודע להחליט שזה דבר נכון במאה אחוז

                            אני לא רואה פסול במדריך מ AI שאתה אישרת אותו כי הנסיון שלך הראה לך שזה מדריך מצוין

                            אברהם גלסרא תגובה 1 תגובה אחרונה
                            1
                            • עניו כמשהע עניו כמשה

                              @אברהם-גלסר כתב במדריך לבניית אתרים ב ai:

                              שניסיון שווה המון.

                              וזה בדיוק מה שיש פה

                              כי לא כל אחד מבין את מה שכותב הAI ויודע להחליט שזה דבר נכון במאה אחוז

                              אני לא רואה פסול במדריך מ AI שאתה אישרת אותו כי הנסיון שלך הראה לך שזה מדריך מצוין

                              אברהם גלסרא מנותק
                              אברהם גלסרא מנותק
                              אברהם גלסר
                              כתב נערך לאחרונה על ידי
                              #16
                              פוסט זה נמחק!
                              עניו כמשהע תגובה 1 תגובה אחרונה
                              0
                              • אברהם גלסרא אברהם גלסר

                                פוסט זה נמחק!

                                עניו כמשהע מנותק
                                עניו כמשהע מנותק
                                עניו כמשה
                                כתב נערך לאחרונה על ידי
                                #17
                                פוסט זה נמחק!
                                ל פראיריפ 2 תגובות תגובה אחרונה
                                1
                                • עניו כמשהע עניו כמשה

                                  פוסט זה נמחק!

                                  ל מנותק
                                  ל מנותק
                                  לנציצ
                                  כתב נערך לאחרונה על ידי
                                  #18

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

                                  י תגובה 1 תגובה אחרונה
                                  1
                                  • ל לנציצ

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

                                    י מנותק
                                    י מנותק
                                    יוסף הכהן
                                    כתב נערך לאחרונה על ידי יוסף הכהן
                                    #19

                                    @לנציצ כתב במדריך לבניית אתרים ב ai:

                                    ואני מאמין שגם ל @אברהם-גלסר היו כמה וכמה הזדמנויות לקצר הליכים פה בפורום עם AI ואנחנו במקום עובדים קשה וכותבים לבד

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

                                    לגבי מה שכתוב בהוראות לשימוש בפורום זה לא לענות תשובות של הAI אבל מותר ליצור דברים ולהעלות לפורום

                                    ל תגובה 1 תגובה אחרונה
                                    0
                                    • י יוסף הכהן

                                      @לנציצ כתב במדריך לבניית אתרים ב ai:

                                      ואני מאמין שגם ל @אברהם-גלסר היו כמה וכמה הזדמנויות לקצר הליכים פה בפורום עם AI ואנחנו במקום עובדים קשה וכותבים לבד

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

                                      לגבי מה שכתוב בהוראות לשימוש בפורום זה לא לענות תשובות של הAI אבל מותר ליצור דברים ולהעלות לפורום

                                      ל מנותק
                                      ל מנותק
                                      לנציצ
                                      כתב נערך לאחרונה על ידי
                                      #20

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

                                      י תגובה 1 תגובה אחרונה
                                      1
                                      • ל לנציצ

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

                                        י מנותק
                                        י מנותק
                                        יוסף הכהן
                                        כתב נערך לאחרונה על ידי יוסף הכהן
                                        #21

                                        @לנציצ אין לי כח עכשיו לקרוא את כל החוקים מחדש
                                        אבל אני רק יודע שבפורום יש לפעמים ספאם פי אלף יותר מפוסט בAI [כמו איך להגיע לחנות מחשבים ] ואז לא ראיתי שאתה או @אברהם-גלסר פוצים את הפה
                                        אבל כשמישהו כותב מדריך בAI ועד שם את זה בספוילר פתאום אתה ו @אברהם-גלסר קופצים עליו כאילו זה הספאם הכי גדול שמצאתם פה בפורום ...

                                        ואני אגיד לך שיש אנשים [לדוגמה אני ] שלא כל כך יודעים להשתמש עם AI ומדריך כגון זה כן עוזר לנו [תתסתכל לפי כמות הלייקים שקיבל הפוסט]

                                        וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI

                                        ל ט 3 תגובות תגובה אחרונה
                                        1
                                        • י יוסף הכהן

                                          @לנציצ אין לי כח עכשיו לקרוא את כל החוקים מחדש
                                          אבל אני רק יודע שבפורום יש לפעמים ספאם פי אלף יותר מפוסט בAI [כמו איך להגיע לחנות מחשבים ] ואז לא ראיתי שאתה או @אברהם-גלסר פוצים את הפה
                                          אבל כשמישהו כותב מדריך בAI ועד שם את זה בספוילר פתאום אתה ו @אברהם-גלסר קופצים עליו כאילו זה הספאם הכי גדול שמצאתם פה בפורום ...

                                          ואני אגיד לך שיש אנשים [לדוגמה אני ] שלא כל כך יודעים להשתמש עם AI ומדריך כגון זה כן עוזר לנו [תתסתכל לפי כמות הלייקים שקיבל הפוסט]

                                          וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI

                                          ל מנותק
                                          ל מנותק
                                          לנציצ
                                          כתב נערך לאחרונה על ידי
                                          #22

                                          @יוסף-הכהן כתב במדריך לבניית אתרים ב ai:

                                          ועד שם את זה בספוילר פתאום

                                          אם לא אנחנו זה היה בראשי ולא בספויילר

                                          @יוסף-הכהן כתב במדריך לבניית אתרים ב ai:

                                          וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI

                                          הגעת לנקודה שכתובה בחוקי הפורום מותר להפיץ תוכנה שנכתבה עם AI אסור לכתוב פסוטים עם AI וזה כבר גדר שנפרץ לגמריי
                                          אבל לפתוח נושא שמתחילתו ועד סופו הוא AI לא היה עד היום
                                          לא שאני עוקב אדוק אבל לא זכור לי כזה דבר
                                          וכמו שאמרתי ואני לא בניתי עד היום אתרים (בטח לא מעבר לבסיס)
                                          יש סיכוי לא קטן שהמדריך יותר יבלבל מאשר יעזור
                                          כי על אדם אתה סומך יותר מAI כשאני אומר לך על משהו זה יעבוד אתה תאמין לי כשAI אומר אתה לא תאמין

                                          שניאור שמחש S הישבשר המלומדה 3 תגובות תגובה אחרונה
                                          0

                                          • התחברות

                                          • אין לך חשבון עדיין? הרשמה

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