Vibe 2Le

Q: ليه المحاضرة دي مهمة؟

للمزيد من التفاصيل يرجى قراءة محتوى الصفحة أو الدورة.

Q: الموقع الإلكتروني بيشتغل إزاي؟

للمزيد من التفاصيل يرجى قراءة محتوى الصفحة أو الدورة.

lecture_01 · مفاهيم الويب | Vibe Coding

●lecture_01.html✕

concepts/

vibe-coding · main

bash — motrjim-academy — 80×24

student@motrjim:~/vibe-coding $

✓ تحميل المحاضرة: مفاهيم الويب الأساسية

✓ الجمهور: مترجمون — من الصفر

✓ المدة ~٦٠ دقيقة · ٢٨ مفهوم · ٢٠ اختبار

--level beginner --concepts 28 --tests 20 --lang ar

/**

ليه المحاضرة دي مهمة؟

تخيّل إنك طلبت من جرسون «عايز أكلة حلوة» — مش هتاخد اللي في دماغك. لكن «فراخ مشوية، نص مشوي، صوص ليمون على الجنب» = هتاخد اللي عايزه بالظبط. التعامل مع الـ AI نفس الفكرة.

كل ما تفهم المفاهيم دي، كل ما توصف للـ AI اللي عايزه بدقّة، وتفهم ردّه، وتمسك غلطه قبل ما يطلع للطلاب. دي «لغة المجال» اللي بتخلّيك تتكلّم مع أي أداة AI بثقة.

الهدف مش تحفظ مصطلحات — الهدف تبني خريطة ذهنية لأي موقع: كل قطعة بتعمل إيه، ومكانها فين.

import { concepts } from './web_concepts'

ملفات المحاضرة

٢٨ مفهوم في ٣ مجلدات — كل واحد ملف. دوس عشان تفتحه.

EXPLORER · WEB_CONCEPTS28 files

▾ 📁 web_concepts/

›01_request_response.mdالموقع بيشتغل إزاي ›02_frontend.mdالفرونت إند ›03_backend.mdالباك إند ›04_database.mdقاعدة البيانات ›05_hosting.mdالاستضافة ›06_domain.mdالدومين ›07_server.mdالسيرفر ›08_ui.mdواجهة المستخدم ›09_ux.mdتجربة المستخدم ›10_api.mdالـ API ›11_https.mdHTTP / HTTPS ›12_html_css_js.mdلغات الفرونت ›13_framework.mdFramework ›14_responsive.mdResponsive ›15_deployment.mdالنشر ›16_git.mdGit

▾ 📁 page_anatomy/ — تشريح الصفحة

›17_header_navbar.mdالترويسة والتنقل ›18_hero_cta.mdالافتتاحية والـ CTA ›19_sections_cards.mdالأقسام والكروت ›20_forms.mdالنماذج والتحقق ›21_modals.mdالنوافذ الطافية ›22_footer.mdالتذييل

▾ 📁 design_language/ — لغة التصميم

›23_layout_grid.mdالتخطيط والشبكة ›24_typography.mdالخطوط ›25_colors_system.mdالألوان والهوية ›26_whitespace.mdالمسافات ›27_assets_speed.mdالصور والسرعة ›28_a11y_rtl.mdالإتاحة والـ RTL

// رحلة «كليكة» واحدة عبر الـ pipeline

request_lifecycle.sh

$ trace request | user ─▶ browser ─▶ net ─▶ server ─▶ db

🧑‍💻المستخدمuser

🌐المتصفحbrowser

📡الإنترنتhttp

🖥️السيرفرserver

🗄️قاعدة البياناتdatabase

> output[user]:

🧑‍💻 المستخدم (user)

إنت. بتفتح المتصفح وتدوس «دخول» في منصة متُرجِم. الدوسة دي بداية الرحلة كلها، وكل القطع اللي جاية شغلتها تخدم الطلب ده وترجّعلك النتيجة.

دوس على أي محطة في الـ pipeline ↑

// ── أ · الصورة الكبيرة

‹/›01_request_response.mdالصورة الكبيرة01

123456

// Client & Server · Request & Response

الموقع الإلكتروني بيشتغل إزاي؟

أي موقع هو «حوار» بين طرفين: جهازك (اللي بيطلب) وكمبيوتر بعيد اسمه السيرفر (اللي بيرد). إنت بتبعت طلب (Request)، والسيرفر بيبعتلك رد (Response) — وده بيتكرر مع كل دوسة.

analogy 🍽️

إنت زبون في مطعم. بتطلب من الجرسون (Request)، والمطبخ بيجهّز ويبعتلك الأكل (Response). إنت مش بتدخل المطبخ — بتطلب وتستنى النتيجة.

example 🧩

تفتح s.motrjim.com وتدوس كورس. جهازك يبعت «هاتلي صفحة الكورس ده»، والسيرفر يجهّزها ويرجّعهالك فتظهر قدامك.

vibe ⚡

لما تقول للـ AI «اعمل صفحة تجيب بيانات الطالب وتعرضها»، إنت بتوصف دورة الطلب/الرد دي. فهمها بيخلّيك تعرف بتطلب من مين ومين المفروض يرد.

▶ demo · request_response● live

💻المتصفح

GET /course →← 200 OK 📄

🖥️السيرفر

// ── ب · الواجهة والكواليس

‹/›02_frontend.mdالواجهة والكواليس02

123456

// Frontend

الفرونت إند — اللي المستخدم بيشوفه

كل حاجة بتشوفها وتتفاعل معاها بعينك وإيدك: الألوان، الأزرار، النصوص، الصور، الفورمات. ده الجزء «قدّام» وبيشتغل جوه متصفحك إنت.

analogy 🍽️

صالة المطعم: الديكور، الكراسي، المنيو، شكل الطبق. ده اللي الزبون بيتعامل معاه ويحكم عليه أول حاجة.

example 🧩

صفحة دخول متُرجِم باور: خانة الإيميل، خانة الباسورد، زرار «دخول»، شعار الأكاديمية. كل ده فرونت إند.

vibe ⚡

معظم اللي هتطلبه من الـ AI في البداية فرونت إند: «اعمل زرار ذهبي»، «خلّي الفورم في النص»، «غيّر الخط لـ Cairo».

▶ demo · frontend_interaction● live

اشترك الآن 🖱️ تم الاشتراك ✨

‹/›03_backend.mdالواجهة والكواليس03

123456

// Backend

الباك إند — اللي بيحصل في الكواليس

العقل المدبّر اللي مبيظهرش للمستخدم: بيستقبل الطلبات، يتأكد من كلمة السر، يحسب، يحفظ ويجيب البيانات، ويقرّر مين مسموح له يعمل إيه. شغّال على السيرفر مش على جهازك.

analogy 🍽️

المطبخ والطباخين. الزبون مبيشوفهمش، لكن من غيرهم مفيش أكل. كل الشغل الحقيقي بيحصل هناك في السرّ.

example 🧩

لما تدوس «دخول»، الباك إند بيتأكد إن الباسورد صح، وإن الاشتراك ساري، وبعدين يسمحلك تدخل — من غير ما تشوف.

vibe ⚡

«اتأكد إن الطالب دافع قبل ما يدخل» أو «احفظ إجابة الامتحان» = باك إند. لغات شائعة: PHP · Laravel · Node.js.

▶ demo · backend_processing● live

📨 طلب دخول

⚙️الباك إندauth ✓

✅ مسموح — أهلاً!

‹/›04_database.mdالواجهة والكواليس04

123456

// Database

قاعدة البيانات — مخزن المعلومات

المكان المنظّم اللي بتتخزّن فيه معلومات الموقع بشكل دائم: أسماء الطلاب، إيميلاتهم، اشتراكاتهم، درجاتهم. منظّمة في جداول زي الإكسيل (صفوف وأعمدة).

analogy 🗄️

مخزن المطعم والثلاجة. المكوّنات متخزّنة ومرتّبة، والطباخ (الباك إند) بيروح يجيب منها اللي محتاجه ساعة الطلب.

example 🧩

جدول students فيه عمود للاسم وعمود للإيميل وعمود لتاريخ انتهاء الاشتراك. الطالب لما يسجّل بيتضاف له صف.

vibe ⚡

«احفظ كل طالب باسمه وإيميله» أو «هاتلي الطلاب اللي اشتراكهم بيخلص الشهر ده». أشهرها MySQL.

▶ demo · database_ops● live

students · name | email | plan

أحمد | ahmed@mail.com | Power

سارة | sara@mail.com | Power

عمر | omar@mail.com | Free

+ INSERT INTO students ...? SELECT * WHERE name = 'sara'

// diff: frontend vs backend

visible_to_user

أيوه — ده كل اللي قدّام عين المستخدم.

runs_on

متصفح المستخدم نفسه (جهازه).

written_in

HTML · CSS · JavaScript

example_task

زرار يتلوّن لما تحطّ عليه الماوس.

visible_to_user

لأ — شغّال في السرّ على السيرفر.

runs_on

السيرفر (الكمبيوتر البعيد).

written_in

PHP · Laravel · Node · Python

example_task

يتأكد إن الباسورد صح ويسجّل الدخول.

// ── ج · البيت والعنوان

‹/›05_hosting.mdالبيت والعنوان05

123456

// Hosting

الاستضافة — أرض الموقع

عشان موقعك يفضل شغّال ٢٤ ساعة لأي حد في العالم، ملفاته لازم تتحطّ على كمبيوتر دايماً مفتوح ومتوصّل بالنت. استئجار المكان ده اسمه «استضافة».

analogy 🏠

إيجار المحل اللي هتفتح فيه المطعم. مش هتفتح في الهوا — لازم مكان ثابت الناس تيجيله. الاستضافة هي «الأرض».

example 🧩

منصة متُرجِم متستضافة على سيرفر (cPanel)، وبتدفع اشتراك عشان تفضل الملفات موجودة وشغّالة على طول.

vibe ⚡

بعد ما الـ AI يبنيلك الموقع، «أنشره فين؟» جوابه الاستضافة. شائعة: Hostinger · Netlify · Vercel.

‹/›06_domain.mdالبيت والعنوان06

123456

// Domain Name · DNS

الدومين — عنوان الموقع

الاسم اللي بتكتبه في المتصفح عشان توصل للموقع. وراء الكواليس كل موقع ليه رقم (IP) معقّد زي 192.168.1.1، والدومين هو الاسم السهل اللي بيترجم للرقم ده عشان متحفظش أرقام.

analogy 📮

عنوان المطعم على الخريطة. الاستضافة هي الأرض، والدومين هو «اسم الشارع ورقم العمارة» اللي الناس بتلاقيك بيه.

example 🧩

motrjim.com هو الدومين. لو الناس متعرفهوش، مش هيوصلوا للموقع مهما كان حلو. بيتأجّر سنوياً.

vibe ⚡

الـ AI بيبني الموقع، بس الدومين بتشتريه إنت وتربطه بالاستضافة. من Namecheap · GoDaddy.

‹/›07_server.mdالبيت والعنوان07

123456

// Server

السيرفر — الكمبيوتر اللي بيخدمك

كمبيوتر قوي شغّال على طول، شغلته الوحيدة إنه يستقبل طلبات الزوار ويردّ عليها. هو المكان اللي الاستضافة بتأجّره، واللي الباك إند وقاعدة البيانات بيعيشوا جواه.

analogy 👨‍🍳

مبنى المطعم بطباخيه. الاستضافة هي الإيجار، والسيرفر هو المبنى الفعلي والطاقم اللي بيشتغل جواه طول اليوم.

example 🧩

لما ١٠٠ طالب يفتحوا متُرجِم في نفس اللحظة، السيرفر بيستقبل الـ١٠٠ طلب ويرد على كلٌّ. لو ضعيف، الموقع يبطّأ.

vibe ⚡

«الموقع وقع» أو «السيرفر طافح» = الكمبيوتر ده اتحمّل أكتر من طاقته. فهمه بيخلّيك تعرف إمتى تحتاج استضافة أقوى.

// ── د · التجربة والمظهر

‹/›08_ui.mdالتجربة والمظهر08

123456

// User Interface (UI)

الـ UI — شكل الواجهة

المظهر البصري اللي المستخدم بيتفاعل معاه: الألوان، الخطوط، أماكن الأزرار، الأيقونات، المسافات. باختصار: «الموقع شكله إيه».

analogy 🎨

ديكور المطعم وتصميم المنيو وشكل تقديم الطبق. حاجة بصرية بحتة بتأثّر في انطباعك الأول.

example 🧩

اختيار الكحلي والذهبي والكريمي في متُرجِم، وخط Cairo، وزرار «اشترك» واضح وكبير — ده كله UI.

vibe ⚡

«خلّي الأزرار ذهبية والخلفية كريمي» = توجيه UI. كل ما توصف هوية بصرية واضحة، كل ما طلع تصميم متّسق.

‹/›09_ux.mdالتجربة والمظهر09

123456

// User Experience (UX)

الـ UX — إحساس الاستخدام

مش «الموقع شكله إيه» — لكن «استخدامه إحساسه إيه». سهل؟ لقيت اللي عايزه بسرعة؟ اتلغبطت؟ الـ UX هو الرحلة كاملة من أول ما تدخل لحد ما تخلّص اللي جاي عشانه.

analogy 🚶

تجربة الأكل كلها: استقبلوك بسرعة؟ الأكل جه في وقته؟ ممكن المنيو شيك (UI حلو) بس الخدمة بطيئة (UX سيّئ).

example 🧩

طالب عايز يشترك: زرار واضح + دفع خطوتين + تأكيد فوري = UX كويّس. لفّ ٥ صفحات ومحتار = UX وحش رغم الشكل الحلو.

vibe ⚡

«قلّل خطوات التسجيل لخطوتين» أو «ورّي رسالة نجاح بعد الدفع» = تحسين UX. ده اللي بيخلّي الناس تكمّل.

// ── هـ · التواصل بين الأنظمة

‹/›10_api.mdالتواصل بين الأنظمة10

1234567

// Application Programming Interface (API)

الـ API — الجرسون بين الأنظمة

طريقة منظّمة تخلّي برنامجين مختلفين يتكلّموا ويتبادلوا بيانات من غير ما يعرفوا تفاصيل بعض. بتطلب حاجة بشكل محدّد، وهو بيرجّعلك النتيجة — من غير ما تدخل الكواليس.

analogy 🤵

الجرسون. مبتكلّمش الطباخ مباشرة — بتقول للجرسون «عايز كذا» بصيغة المنيو، وهو بيوصّل ويرجّعلك. المنيو = قواعد الـ API.

example 🧩

تدمج Claude API في أداة المترجم: موقعك يبعت النص للـ API، والـ API يرجّع الترجمة. نظامين بيتكلّموا بقواعد متّفق عليها.

vibe ⚡

«وصّل الموقع بـ API الدفع» أو «استخدم API الذكاء الاصطناعي يصحّح الترجمة» — بيربط موقعك بخدمات جاهزة بدل ما تبنيها.

// شكل مبسّط لطلب API
POST /api/translate
{ "text": "مرحباً", "to": "en" }
// الرد → { "result": "Hello" }

▶ demo · api_waiter● live

🌐موقعك

{"text":"مرحباً"}{"result":"Hello"}

🤵API

{"text":"مرحباً"}{"result":"Hello"}

🧠Claude

‹/›11_https.mdالتواصل بين الأنظمة11

123456

// HyperText Transfer Protocol (Secure)

HTTP / HTTPS — لغة وأمان النقل

القواعد اللي بيها المتصفح والسيرفر بيتكلّموا. الـ S الزيادة في HTTPS معناها إن الكلام متشفّر — لو حد اعترضه في النص مش هيفهم حاجة. ده اللي بيحمي الباسوردات وبيانات الدفع.

analogy ✉️

HTTP زي كارت بوستال أي حد يقراه في الطريق. HTTPS زي جواب في ظرف مقفول مختوم — بس المرسِل والمستقبِل يفتحوه.

example 🧩

القفل 🔒 جنب اسم الموقع معناه إنك على HTTPS. لو مش موجود، متحطّش بيانات دفع أبداً.

vibe ⚡

معظم الاستضافات الحديثة بتفعّل HTTPS تلقائياً (شهادة SSL). اتأكد إنه شغّال قبل ما تستقبل دفع أو تسجيل.

▶ demo · http_vs_https● live

HTTP

pass123👁️شافها! 😈

HTTPS

🔒 x9#!∆f8👁️مشفّرة ❌

// ── و · لبنات البناء والأدوات

‹/›12_html_css_js.mdلبنات البناء12

1234567

// HTML · CSS · JavaScript

التلاتة الأساسيين للفرونت إند

أي صفحة بتشوفها مبنية من تلات لغات بيكمّلوا بعض: واحدة للهيكل، واحدة للشكل، وواحدة للحركة.

HTML 🧱

الهيكل والمحتوى. العناوين، الفقرات، الصور، الأزرار. زي «الطوب» اللي بيبني البيت.

CSS 🎨

الشكل والتنسيق. الألوان، الخطوط، المسافات، الأحجام. زي «الدهان والديكور».

JS ⚙️

الحركة والتفاعل. تدوس زرار فيحصل حاجة، قائمة تفتح، عدّاد يتغيّر. زي «الكهربا والأجهزة».

vibe ⚡

مش لازم تتقنهم — بس تعرفهم. «عدّل الـ CSS» أو «ضيف JavaScript» = بتوجّه الـ AI للملف الصح.

▶ demo · html_css_js_layers● live

1·HTML هيكل2·CSS ألوان3·JS تفاعل

‹/›13_framework.mdلبنات البناء13

123456

// Framework & Library

الـ Framework / Library — أدوات تسرّع البناء

بدل ما تبني كل حاجة من الصفر، فيه «عُدد جاهزة» مكتوبة بشطارة عشان توفّر وقت. الـ Library صندوق أدوات بتاخد منه اللي تحتاجه، والـ Framework هيكل كامل بيرتّبلك شغلك كله.

analogy 🍳

بدل ما تطحن الدقيق وتعصر الطماطم، بتشتري عجينة جاهزة وصوص معلّب. نفس الأكل في وقت أقل وبجودة مضمونة.

example 🧩

Laravel فريمورك للباك إند، وReact لايبراري للواجهات، وWordPress نظام جاهز لمواقع بسرعة.

vibe ⚡

«ابنيها بـ React» أو «استخدم Laravel» = بتختار العُدّة. الاختيار بيأثّر في سرعة الشغل وشكل الكود.

‹/›14_responsive.mdلبنات البناء14

123456

// Responsive Design

الـ Responsive — يظبط على كل شاشة

تصميم بيتأقلم تلقائياً مع حجم الشاشة: موبايل، تابلت، لابتوب. نفس الموقع بيترتّب بشكل مختلف عشان يبقى مريح في القراءة والاستخدام على أي جهاز.

analogy 💧

المية بتاخد شكل أي إناء تتحطّ فيه. التصميم الـ responsive بياخد شكل أي شاشة من غير ما يتكسّر.

example 🧩

على اللابتوب الكورسات ٣ في الصف، وعلى الموبايل واحد تحت التاني عشان تتقري. معظم طلاب متُرجِم بيدخلوا موبايل.

vibe ⚡

«خلّيها responsive» أو «اتأكد إنها تظبط على الموبايل» = أمر أساسي في كل صفحة، مش رفاهية.

▶ demo · responsive_reflow● live

📱 موبايل — عمود واحد💻 لابتوب — ٣ أعمدة جنب بعض

// ── ز · من الكود للنشر

‹/›15_deployment.mdمن الكود للنشر15

123456

// Deployment

الـ Deployment — تنزيل الموقع للناس

عملية ناخد بيها الموقع من جهازك (اللي لسه بتجرّب عليه) ونحطّه على السيرفر/الاستضافة عشان يبقى متاح لأي حد في الدنيا. يعني «نزّلناه للنور».

analogy 🎬

فرق بين البروفة والعرض. لحد دلوقتي بتجرّب في «الكواليس»، والـ deployment هو لما ترفع الستار وتفتح الأبواب للجمهور.

example 🧩

صفحة الاشتراك خلّصتها وجرّبتها عندك. الـ deployment إنك ترفعها على power.motrjim.com عشان الطلاب يفتحوها.

vibe ⚡

منصات زي Netlify · Vercel بتعمل deployment بضغطة. الـ AI بيبني، وإنت بتعمل deploy عشان يطلع للنور.

▶ demo · deploy_to_server● live

💻جهازك

📦

☁️السيرفر● LIVE

‹/›16_git.mdمن الكود للنشر16

123456

// Version Control · Git

الـ Git — حفظ تاريخ شغلك

نظام بيحفظ «نسخة» من شغلك في كل مرحلة، فتقدر ترجع لأي نقطة قبل كده لو حصل غلط. زي زرار Undo عملاق ودائم لكل المشروع.

analogy ⏪

زي ما بتحفظ نسخ من ملف الترجمة (نهائي، نهائي٢، نهائي-معدّل) — بس بشكل منظّم احترافي، وتعرف بالظبط إيه اللي اتغيّر.

example 🧩

عدّلت في فورم الاشتراك وبوّظ. بدل ما تفتكر إيه اللي غيّرته، ترجع للنسخة اللي قبلها في ثانية.

vibe ⚡

GitHub هو المكان اللي بتحفظ فيه شغلك أونلاين. مفيد جداً وإنت بتجرّب تعديلات كتير مع الـ AI من غير خوف.

▶ demo · git_time_machine● live

123🐞 ⤺ git revert — رجعنا للنسخة 3 سليمة ✓

// ── ح · تشريح الصفحة — العناصر اللي بتبني منها أي موقع

page_anatomy.fig

🏷️ اللوجو

الإتاحة معناها إن الموقع يتستخدم من الجميع: تباين ألوان كافي لضعاف النظر، نصوص بديلة للصور (alt)، وأزرار كبيرة تتداس بسهولة. وللعربي بُعد إضافي حاسم: اتجاه RTL — الصفحة كلها لازم تترتب من اليمين للشمال.

analogy ♿

منحدر الكراسي المتحركة في المطعم + منيو بالعربي للزبون العربي — دي مش رفاهية، دي أساسيات الضيافة المحترمة.

example 🧩

الصفحة اللي قدامك دي dir="rtl": القوائم بتبدأ من اليمين والنصوص محاذية يمين — لو الـ RTL اتنسي، الصفحة بتطلع «مقلوبة» ومتعبة للقارئ العربي.

vibe ⚡

أهم أمر هتكرره في كل مشروع عربي: «الصفحة RTL بالكامل واللغة عربي» — الـ AI افتراضياً بيفكر LTR ولازم تفكّره كل مرة. وضيف: «التباين عالي والأزرار كبيرة للموبايل».

// test suite — اختبر فهمك

describe("المحاضرة ٠١ · مفاهيم الويب", () => {

0 / 20 passed

▸it 01إيه الفرق الجوهري بين الفرونت إند والباك إند؟›

→ expected:

الفرونت إند هو كل اللي المستخدم بيشوفه في متصفحه (أزرار، ألوان، نصوص). الباك إند هو الشغل اللي بيحصل في الكواليس على السيرفر (التأكد من الباسورد، حفظ وجلب البيانات). في المطعم: الفرونت = الصالة، الباك = المطبخ.

▸it 02اشرح بكلامك دورة الـ Request / Response.›

→ expected:

جهازك بيبعت طلب (Request) للسيرفر زي «هاتلي صفحة الكورس»، والسيرفر بيجهّز ويبعت رد (Response) فتظهرلك. بيتكرر مع كل دوسة — زي ما بتطلب من الجرسون وبيرجّعلك الأكل.

▸it 03إيه الفرق بين الاستضافة (Hosting) والدومين (Domain)؟›

→ expected:

الاستضافة هي «الأرض» — المكان اللي بتتحط فيه ملفات الموقع على كمبيوتر شغّال على طول. الدومين هو «العنوان» — الاسم السهل (motrjim.com) اللي الناس بتكتبه عشان توصلك. لازم الاتنين مع بعض.

▸it 04الموقع بقى بطيء جداً لما ٢٠٠ طالب دخلوه في نفس اللحظة. المشكلة فين؟›

→ expected:

في السيرفر — الكمبيوتر اللي بيخدم الطلبات اتحمّل أكتر من طاقته. الحل غالباً استضافة/سيرفر أقوى يستحمل عدد أكبر في نفس الوقت.

▸it 05إيه الفرق بين UI و UX؟ ومثال على UI حلو بس UX وحش.›

→ expected:

الـ UI هو شكل الواجهة (ألوان، خطوط، أزرار). الـ UX هو إحساس الاستخدام كله. مثال: موقع شكله شيك جداً (UI حلو) بس عشان تشترك بيلفّك ٥ صفحات وتتلغبط (UX وحش).

▸it 06إيه وظيفة الـ API؟ وإيه أحسن تشبيه ليه؟›

→ expected:

بيخلّي برنامجين مختلفين يتكلّموا ويتبادلوا بيانات بقواعد متّفق عليها، من غير ما يعرفوا كواليس بعض. تشبيهه: الجرسون — بتطلب منه بصيغة المنيو وهو بيوصّل ويرجّعلك النتيجة.

▸it 07ليه HTTPS أهم من HTTP؟›

→ expected:

الـ S معناها إن الكلام بين متصفحك والسيرفر متشفّر، فلو حد اعترضه في الطريق مش هيفهمه. ده بيحمي الباسوردات وبيانات الدفع. HTTP كارت بوستال مكشوف، وHTTPS جواب في ظرف مقفول.

▸it 08اذكر التلات لغات الأساسية للفرونت إند ووظيفة كل واحدة.›

→ expected:

HTML للهيكل والمحتوى (الطوب)، CSS للشكل والتنسيق (الدهان)، JavaScript للحركة والتفاعل (الكهربا والأجهزة).

▸it 09إيه الفرق بين Framework و Library؟›

→ expected:

الاتنين عُدد جاهزة بتوفّر وقت. الـ Library صندوق أدوات بتاخد منه اللي تحتاجه. الـ Framework هيكل كامل بيرتّبلك المشروع ويفرض طريقة شغل. مثال: React لايبراري، Laravel فريمورك.

▸it 10يعني إيه Responsive Design وليه مهم لطلاب متُرجِم؟›

→ expected:

تصميم بيتأقلم مع حجم أي شاشة (موبايل/تابلت/لابتوب) فيبقى مريح. مهم لأن معظم الطلاب بيدخلوا من الموبايل، فلو متظبطش عليه هيسيبوه.

▸it 11يعني إيه Deployment؟›

→ expected:

تاخد الموقع من جهازك (اللي بتجرّب عليه) وترفعه على السيرفر/الاستضافة عشان يبقى متاح لأي حد. يعني «نزّلته للنور» — زي ما ترفع الستار للجمهور بعد البروفة.

▸it 12إيه فايدة Git لما تشتغل مع الـ AI؟›

→ expected:

بيحفظ نسخة من شغلك في كل مرحلة، فلو الـ AI عمل تعديل بوّظ حاجة، ترجع للنسخة اللي قبلها في ثانية. بيخلّيك تجرّب تعديلات كتير من غير خوف.

▸it 13قاعدة البيانات بتخزّن إيه؟ وشكلها إزاي؟›

→ expected:

بتخزّن معلومات الموقع بشكل دائم (أسماء الطلاب، إيميلاتهم، اشتراكاتهم، درجاتهم). شكلها زي جداول الإكسيل: صفوف وأعمدة منظّمة.

▸it 14«اعمل زرار يتلوّن لما أحط عليه الماوس» — فرونت ولا باك؟›

→ expected:

فرونت إند — لأنه حاجة بصرية بتحصل في متصفح المستخدم نفسه (CSS/JavaScript).

▸it 15«اتأكد إن الطالب دافع قبل ما يدخل الكورس» — فرونت ولا باك؟›

→ expected:

باك إند — تحقّق وقرار بيحصل على السيرفر في الكواليس. (لو اتعمل في الفرونت بس، أي حد يقدر يتحايل عليه.)

▸it 16في المطعم، وصّل: الجرسون / المطبخ / الصالة / المخزن.›

→ expected:

الجرسون = API، المطبخ = الباك إند، الصالة = الفرونت إند، المخزن = قاعدة البيانات.

▸it 17ما الـ AI بيكتب الكود — أمّال إنت ليه محتاج تفهم ده؟›

→ expected:

عشان توصف اللي عايزه بدقّة (زي ما بتطلب أكلة بالتفصيل بدل «حاجة حلوة»)، وتفهم رد الـ AI، وتمسك غلطه قبل ما يطلع للطلاب. أهم مهارة في الـ vibe coding.

▸it 18لما تكتب motrjim.com، إيه اللي بيحوّله لرقم السيرفر (الـ IP)؟›

→ expected:

نظام الدومين / الـ DNS — بيترجم الاسم السهل لرقم الـ IP المعقّد بتاع السيرفر، عشان متحفظش أرقام.

▸it 19شُفت القفل 🔒 جنب اسم الموقع. ده معناه إيه؟›

→ expected:

إن الموقع شغّال على HTTPS — الاتصال متشفّر وآمن. لو القفل مش موجود، ماينفعش تحط بيانات دفع أو باسورد.

▸it 20رتّب رحلة الكليكة: (السيرفر، المتصفح، المستخدم، قاعدة البيانات، الإنترنت).›

→ expected:

المستخدم ← المتصفح ← الإنترنت (HTTP Request) ← السيرفر (+الباك إند) ← قاعدة البيانات، وبعدين الرحلة بترجع بالعكس لحد ما النتيجة تظهر على شاشة المستخدم.

});

// خلاصة المحاضرة — كل قطعة ومكانها في «المطعم»

summary.json

1234567891011121314151617181920212223242526

{

"hosting": "إيجار المكان",

"domain": "عنوان المطعم",

"server": "المبنى والطاقم",

"frontend": "صالة الزباين",

"backend": "المطبخ",

"database": "المخزن والثلاجة",

"api": "الجرسون",

"ui": "الديكور والمنيو",

"ux": "تجربة الزيارة كلها",

"https": "أمان وخصوصية الطلب",

"html_css_js": "طوب وديكور وكهربا الصالة",

"deployment": "رفع الستار للجمهور",

"header": "لافتة المطعم وبابه",

"hero_cta": "الفترينة وطبق اليوم",

"cards": "خانات أطباق المنيو",

"forms": "ورقة الأوردر",

"modal": "الجرسون اللي بيقاطعك بعرض",

"footer": "آخر صفحة في المنيو",

"layout_grid": "ترتيب الترابيزات",

"typography": "خط المنيو وأحجامه",

"colors": "هوية المطعم البصرية",

"whitespace": "المسافة بين الترابيزات",

"assets": "صور الأطباق — خفيفة وسريعة",

"a11y_rtl": "منحدر الكراسي ومنيو بالعربي"

}

/* @return الخلاصة */

إنت مش هتكتب الكود — بس بقيت تعرف اسم كل قطعة، بتعمل إيه، ومكانها فين. ده اللي هيخلّيك توصف للـ AI اللي عايزه بدقّة، وتفهم لما يرد، وتمسك الغلط قبل ما يطلع للطلاب. دي أول وأهم مهارة في الـ Vibe Coding.