דילוג לתוכן
  • חוקי הפורום
  • פופולרי
  • לא נפתר
  • משתמשים
  • חיפוש גוגל בפורום
  • צור קשר
עיצובים
  • 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

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

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

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

    נכון שה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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                                          נ.ב המדריך מאוד יפה ומפורט טוב למשתמש הפשוט..

                                          "אם לא תנסה, איך תדע?"

                                          תגובה 1 תגובה אחרונה
                                          2

                                          • התחברות

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

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