Your work.
A website
to match.

هذا الدليل للمصمّم والمصوّر وصانع المحتوى والمستقل اللي عنده أعمال وبدّه يرتّبها بموقع. ما بنفترض عندك خبرة بالكود؛ رح تتعلّم أسماء الملفات الأساسية وتفحص النتيجة بنفسك.

• النتيجة: صفحة رئيسية، صفحة مشروع، نبذة عنك وطريقة تواصل واضحة.
• المطلوب: كمبيوتر، متصفّح، محرّر ملفات، ووصول لأداة برمجة بالذكاء الاصطناعي.
• نزّل الحزمة وفكّ الضغط. احتفظ بالأصل، واشتغل على نسخة داخل مجلّد مستقل.

قبل ما تكمل / افتح finished/index.html من الحزمة وشوف المشروع قبل ما تبدأ. هذا نموذج تعليمي، مش موقع عميل.

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

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

قبل ما تكمل / افتح الصفحة بالنقر المزدوج. إذا نقلت ملفًا، لازم تتأكد إن روابطه وصوره بعدها صحيحة. لاحقًا رح تفحص النسخة المرفوعة كمان.

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

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

قبل ما تكمل / لازم تقدر تشرح هدف الموقع بسطرين قبل ما تطلب كتابة أي كود.

ما في شهادات عملاء أو أرقام مبيعات أو جوائز ضمن المثال. المشروع الشخصي ينكتب كمشروع شخصي. الرسومات داخل assets/ مؤلّفة لهذا التدريب، وبتستبدلها بأعمالك قبل النشر.

قبل ما تكمل / ملف example-brief-ar.md داخل الحزمة هو المرجع. إذا الأداة اخترعت معلومة خارجه، صحّحها.

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

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

قبل ما تكمل / احفظ الموجز باسم brief.md، وارجع إله لما تختلف النسخة المنفّذة عن الهدف.

• اختار أعمالًا بتخدم نوع الشغل اللي بدك يجيك. ثلاثة أمثلة واضحة بداية مناسبة، والعدد مش قاعدة.
• لكل مشروع جهّز صورة رئيسية، تطبيقين أو تفاصيل، ووصفًا لدورك.
• سمّي الملفات بأسماء واضحة مثل siq-cover.webp، وخلي النسخة الأصلية بمجلّد منفصل.
• راجع إذن العرض، وامسح بيانات العملاء الخاصة والمعلومات السرية من الصور.

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

قبل ما تكمل / استخدم asset-inventory-ar.csv لتسجيل اسم كل صورة، صاحبها، إذن استخدامها والنص البديل المقترح.

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

قبل ما تكمل / كل ادعاء بالوصف لازم تقدر تشرحه أو تثبته من شغلك.

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

• اكتب «مشروع شخصي» أو «تصوّر مستقل» بجانب العنوان.
• اشرح القيود اللي اخترتها والبدائل اللي جرّبتها.
• اعرض الناتج مع تفاصيل مفيدة، بدل تكرار الموكاب نفسه.

قبل ما تكمل / الزائر لازم يقدر يميّز بين المثال الشخصي والعمل المنفّذ لعميل.

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

راجع المراجع اللي أرفقتها لبورتفوليو [التخصص]. استخرج قرارات مفيدة عن التسلسل البصري، عرض الأعمال، الخطوط والمسافات. اقترح اتجاهًا أصليًا يناسب brief.md. اشرح شو رح نتبنّى كمبدأ، وكيف رح نطبّقه بمحتوانا. لا تنسخ النصوص أو الصور أو هوية المرجع.

قبل ما تكمل / احفظ اتجاهًا واحدًا في design.md. كثرة المراجع المتناقضة بتصعّب المراجعة.

ابدأ بالقراءة والتباين. عنوان كبير ما لازم يطغى على العمل، وصورة جميلة ما لازم تحمل نصًا صغيرًا ضروريًا. الخطوط المرفقة معها تراخيصها؛ أي خط جديد لازم تراجع ترخيصه.

قبل ما تكمل / غيّر قرارًا واحدًا، وافحص تأثيره على الصفحة كاملة قبل ما تزيد ألوانًا أو خطوطًا.

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

المثال فيه صفحتان: الرئيسية وصفحة مشروع سِيق. النبذة والتواصل موجودان ضمن الرئيسية. بتقدر تفصلهم لاحقًا إذا المحتوى احتاج، لكن لا تضيف صفحات فارغة.

• افتح رابط البدء الرسمي بالمصادر. ثبّت تطبيق سطح المكتب أو إضافة Codex الرسمية لمحرّر VS Code حسب جهازك.
• سجّل الدخول بالطريقة المدعومة لحسابك، وراجع الخطة وحدود الاستخدام. لا تشتري وصولًا بناءً على وعد بهذا الدليل.
• فكّ ضغط الحزمة، وانسخ starter إلى my-portfolio. افتح هذا المجلّد فقط كمشروع عمل.
• أرفق brief.md ومعلوماتك، واطلب قراءة الملفات وتلخيصها قبل تعديلها.

my-portfolio/
  index.html
  style.css
  brief.md

في الواجهة المكتبية الحالية قد يظهر اختيار Codex ضمن محدّد المنتج. أسماء الأزرار ممكن تتغيّر؛ المرجع الرسمي يشرح المسار الحالي. إذا اخترت الإضافة، افتح المجلّد من المحرّر أولًا ثم لوحة Codex.

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

افتح دليل البدء الرسمي لـ Claude Code واتبع التثبيت المناسب لنظامك. على Windows بتقدر تستخدم WinGet من PowerShell بالأمر التالي؛ إذا WinGet مش متاح، استخدم طريقة التثبيت البديلة بالمرجع.

winget install Anthropic.ClaudeCode

افتح نافذة طرفية جديدة بعد التثبيت. افحص النسخة، ثم انتقل لمجلّد تدريبك. استبدل المسار بالمكان الفعلي للمجلّد عندك؛ علامات الاقتباس بتحافظ على المسافات.

claude --version
cd "C:\Projects\my-portfolio"
claude

اتبع تسجيل الدخول، واقرأ طلب الثقة بالمجلّد وصلاحيات التنفيذ. على macOS أو Linux استخدم تعليمات النظام من المصدر الرسمي، وبعد التثبيت افتح مجلّد التدريب وشغّل claude.

قبل ما تكمل / اطلب تلخيص الملفات بدون تعديل. إذا الأمر غير معروف، أعد فتح الطرفية وراجع تعليمات PATH الرسمية. لا تغيّر إعدادات الأمان عشوائيًا.

اشتغل داخل مجلّد التدريب الحالي فقط. اقرأ brief.md وdesign.md قبل التنفيذ. استخدم HTML وCSS وروابط نسبية، بدون حزم أو خدمات خارجية للمثال الأول. حافظ على الملفات الأصلية، ولا تضف حقائق أو شهادات أو نتائج. قبل تعديل واسع اشرح الملفات المتأثرة. لا تنشر ولا ترفع الملفات ولا تربط حسابات بدون موافقتي الصريحة. بعد كل مرحلة اذكر ما تغيّر، طريقة الفحص، وما بقي غير متحقق.

ممكن تحفظ تعليمات Codex في AGENTS.md وتعليمات Claude Code في CLAUDE.md، أو تبدأ بها في المحادثة. النص وحده مش حاجز أمني؛ راجع طلبات الصلاحيات والتغييرات الفعلية.

قبل ما تكمل / اعمل نسخة احتياطية قبل بداية التنفيذ. لا تحط كلمات مرور أو مفاتيح خاصة ضمن ملفات الموقع.

my-portfolio/
  index.html
  project.html
  style.css
  brief.md
  design.md
  assets/
    siq.svg
    athar.svg
    madar.svg
    fonts/

finished داخل الحزمة هو المرجع المكتمل. starter هو البداية الأبسط للتطوير. لا تنسخ finished فوق شغلك كل مرة؛ استخدمه للمقارنة وفهم ترتيب الملفات.

• الروابط داخل الصفحات مثل project.html تظل صالحة لما ترفع المجلّد كاملًا.
• استخدم أسماء ملفات لاتينية صغيرة بدون مسافات لتقليل أخطاء المسارات.
• brief.md وdesign.md ملفات عمل، مش شرط ترفعهم مع النسخة العامة.

قبل ما تكمل / قبل الرفع جهّز مجلّد publish فيه ملفات الموقع وassets والتراخيص فقط.

اقرأ brief.md وdesign.md وملفات starter. ابنِ index.html وstyle.css كبورتفوليو عربي RTL بسيط. استخدم محتواي وصوري المعتمدة فقط. رتّب البداية والأعمال والنبذة والتواصل، واربط زر الأعمال بالقسم الصحيح. اعرض المشاريع غير المكتملة بدون روابط وهمية. استخدم تخطيطًا مرنًا يبدأ من الموبايل. لا تضف مكتبات أو حركة أو نشرًا. بعد التنفيذ افتح الصفحة إذا كان المتصفّح متاحًا وافحص الروابط والعرض الصغير، أو اذكر بالضبط ما لازم أفحصه بنفسي.

ابدأ بالرئيسية. لما تتأكد إن المحتوى والروابط موجودة، انتقل لصفحة المشروع. إذا الأداة ما بتقدر تفتح المتصفّح، افتح index.html بنفسك وأرسل لقطة مع وصف المشكلة.

قبل ما تكمل / اختبر زر الأعمال وقسم التواصل قبل طلب أي تحسين تجميلي.

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

قبل ما تكمل / افتح الملف بنفسك وجرّب الروابط. الصورة بتشرح الشكل، لكن ما بتثبت إن التنقّل شغّال.

ابنِ project.html للمشروع [الاسم] من المعلومات والصور المرفقة. ضمّن نوع المشروع، دوري، السياق، القرار البصري والتطبيقات. وضّح إذا كان شخصيًا أو افتراضيًا. استخدم نفس style.css، وأضف رابط رجوع للأعمال ورابط تواصل. اربط بطاقة هذا المشروع من الرئيسية بالصفحة. لا تحوّل بقية البطاقات لروابط قبل وجود صفحاتها، ولا تخترع نتائج.

بالمثال، سِيق إله صفحة تفصيلية. أثر ومدار معروضان كنماذج على الرئيسية بدون ادعاء وجود صفحات إضافية. إذا عندك تفاصيل لكل مشروع، انسخ الهيكل واحفظ كل صفحة باسم مستقل.

قبل ما تكمل / افتح صفحة المشروع مباشرة، ثم ارجع للأعمال. لازم تظل الصور والخطوط شغّالة بالطريقين.

• اكتب خبرتك ونوع الشغل اللي بتعمله بكلمات محدّدة.
• استخدم بريدك أو رابط تواصل فعلي، وجرّبه على جهازك.
• رابط mailto بيفتح تطبيق البريد؛ ما بيضمن إرسال رسالة من الموقع.
• لا تضف نموذج تواصل شكلي بيعرض «تم الإرسال» بدون خدمة إرسال حقيقية.

hello@example.com بالمثال عنوان توضيحي. استبدله قبل النشر. لما تطلب خدمة إرسال أو نموذجًا لاحقًا، بدك إعدادًا وفحصًا منفصلين ومعالجة واضحة للنجاح والفشل.

قبل ما تكمل / اطلب من شخص يشوف الموقع: هل فهم شو بتعمل وكيف يتواصل معك؟

• العنوان العام ما بيعرّف التخصص بوضوح.
• المسافات وأحجام العناصر ما بتوجّه العين للأعمال.
• وصف المشروع مختصر لدرجة ما بيشرح الدور.

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

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

قبل ما تكمل / اكتب ثلاث ملاحظات محدّدة عن نسختك. اشتغل على الأهم للقراءة أولًا.

هاي لقطة الصفحة الحالية على عرض [العرض]، ومعها brief.md وdesign.md. راجع وضوح التخصص، حجم صور الأعمال، عرض القراءة، المسافات والتباين. اقترح أهم ثلاث مشاكل مع سبب كل واحدة، ثم أصلح [المشكلة المختارة] فقط. حافظ على المحتوى المعتمد والروابط. أعد التقاط نفس العرض إذا أمكن، وقارن التغيير. لا تقل إن الفحص نجح إذا ما نفّذته.

قبل ما تكمل / صوّر قبل وبعد بنفس العرض. إذا التعديل أصلح الموبايل وخرب سطح المكتب، ارجع واضبط القاعدة المحدّدة.

البطاقات بتصير بعمود واحد، والعنوان بياخذ حجمًا مناسبًا للعرض. جرّب 320 و390 و768 بكسل، وجرّب جهازًا فعليًا إذا متاح. المحاكاة ما بتثبت كل سلوك على الهواتف.

قبل ما تكمل / ما في سحب أفقي غير مقصود، ولا نص مقطوع، والروابط قابلة للمس باليد.

<html lang="ar" dir="rtl">
<bdi dir="ltr">[email protected]</bdi>

استخدم خصائص CSS مثل padding-inline وtext-align: start لما تكون مرتبطة باتجاه القراءة. لا تقلب الصور أو الشعارات تلقائيًا. راجع الأرقام وأسماء الملفات وعلامات الترقيم ضمن النص.

افحص الموقع بالعربي RTL على عروض 320 و390 و768 و1440 بكسل. راجع اتجاه القراءة، البريد والأسماء اللاتينية، التفاف العناوين، الصور والروابط. أصلح سبب أي تجاوز أفقي بدل إخفائه باستخدام overflow-x:hidden على الصفحة. اذكر العروض اللي اختبرتها فعليًا وما بقي بحاجة لفحص يدوي.

قبل ما تكمل / إذا أضفت لغة ثانية، اكتب محتواها ووجّه زر اللغة لصفحة مقابلة موجودة.

• استخدم Tab للتنقّل. لازم تعرف وين التركيز وتقدر تفتح الروابط بـ Enter.
• خلي عنوان الصفحة الرئيسي واحدًا، وبعده مستويات عناوين منطقية.
• اكتب نصًا بديلًا للصور اللي بتضيف معنى؛ الصورة الزخرفية إلها alt فارغ.
• جرّب تكبير المتصفّح إلى 200% وراجع القراءة والتنقّل.
• افحص التباين بأداة قياس، وخفّف الحركة لمن يفضّل تقليلها.

النص البديل بيوصف معلومة الصورة ضمن السياق؛ مش مكان لتكرار كلمات بحث. الاختبارات الآلية بتكشف بعض المشاكل، والمراجعة اليدوية إلها دور كمان.

قبل ما تكمل / المثال فيه رابط تخطّي للمحتوى وتركيز ظاهر. جرّبهم فعليًا، ولا تعتبر وجود الخصائص وحده شهادة وصول.

• احتفظ بالأصل، وصدّر نسخة ويب بالحجم والجودة المناسبين. قارن الوضوح بعد الضغط.
• أضف width وheight للصورة عشان المتصفّح يحجز مساحتها.
• أجّل تحميل الصور البعيدة عن البداية باستخدام loading="lazy".
• لا تؤجّل الصورة الأساسية إذا كانت أول شيء مهم ظاهر.
• قلّل الخطوط والمكتبات والحركة اللي ما بتخدم المحتوى.

لصور فوتوغرافية كبيرة، اطلب نسخًا متجاوبة مع srcset وsizes. رسومات المثال SVG خفيفة نسبيًا ومؤلّفة محليًا. افحص الصفحة عبر شبكة أبطأ، وبعد الرفع جرّب أداة أداء وسجّل التاريخ والظروف.

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

افحص ملفات الموقع المتاحة. إذا عندك متصفّح، جرّب: الرئيسية، زر الأعمال، صفحة المشروع، الرجوع، والبريد. افحص 320 و390 و768 و1440 بكسل، أخطاء المتصفّح، الصور المفقودة، ترتيب العناوين والتركيز بالكيبورد. اكتب جدولًا: الاختبار، النتيجة، الدليل، والإصلاح المطلوب. ميّز بين فحص آلي وفحص يدوي، وما تعتبر صفحة أو إرسال رسالة ناجحين بدون التحقق الفعلي.

ما تعتمد على «خلصت» كدليل. افتح الموقع بنفسك، ودوّن مسار المشكلة وعرض الشاشة والخطوات اللي بتكرّرها. ملف launch-checklist-ar.md فيه قائمة قابلة للتعبئة.

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

• اعمل مجلّد publish وانسخ إليه index.html وproject.html وstyle.css وassets والتراخيص المستخدمة. لا ترفع موجزك الخاص أو كلمات مرور.
• افتح Cloudflare وسجّل الدخول. من Workers & Pages اختار إنشاء تطبيق ومسار رفع الملفات المباشر. راجع أسماء الخيارات الحالية بالمصدر الرسمي.
• ارفع محتويات مجلّد publish أو أرشيفه بحيث يكون index.html بجذر الموقع.
• راجع الملفات ثم اختار النشر. افتح عنوان pages.dev الناتج، وافحص الصفحتين والصور.

هذا المثال بدون build command. لو انتقلت لإطار عمل، الملف المرفوع هو ناتج البناء الصحيح، مش مجلّد المشروع كاملًا. إذا الأداة رح تنشر نيابة عنك، اطلب مراجعة النسخة أولًا ووافق على النشر بوضوح.

قبل ما تكمل / إنشاء حساب ورفع موقع خطوات خارجية بتعملها بإرادتك. دليلنا ما بيربط أي حساب تلقائيًا.

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

• بعد التأكد من الموقع، افتح مشروع Pages ثم Custom domains وأضف الدومين المطلوب.
• اتبع تعليمات DNS اللي بتظهر لحالتك من المصدر الرسمي؛ ربط الدومين الرئيسي ممكن يختلف عن النطاق الفرعي.
• راجع السجلات الموجودة قبل تغييرها، خصوصًا سجلات البريد. لا تحذفها لمجرّد ربط الموقع.
• انتظر حالة الربط وشهادة HTTPS، ثم افحص العنوان النهائي.

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

• افتح رابط الموقع من نافذة خاصة ومن هاتف.
• افتح project.html مباشرة؛ لا تفحصه من رابط الرئيسية فقط.
• راجع الصور والخطوط والروابط وحالة الأحرف بأسماء الملفات.
• جرّب البريد بعد استبدال العنوان التجريبي بعنوانك.
• راجع عنوان الصفحة ووصفها وصورة المعاينة إن وجدت.

إذا بدك ظهورًا بالبحث، تأكد إن إعدادات الفهرسة مناسبة للنسخة العامة، وجهّز عنوانًا ووصفًا صادقين لكل صفحة. وجود sitemap أو بيانات منظّمة ما بيضمن ترتيبًا أو اقتباسًا.

للبداية، انسخ مجلّد الموقع باسم فيه التاريخ ووصف النسخة. لما تتعلّم Git بتقدر تراجع الفروقات وتعمل commits محلية. الحفظ المحلي ما يعني رفعًا لحساب خارجي.

• اشتغل على نسخة محلية، وافحصها قبل استبدال العامة.
• دوّن التغيير والسبب وطريقة الفحص في change-log-ar.csv.
• غيّر جزءًا محددًا، وراجع الصفحات اللي بتستخدم نفس CSS.
• إذا التعديل كسر التنقّل، ارجع للنسخة السليمة بدل تراكم إصلاحات عشوائية.

قبل ما تكمل / احتفظ بنسخة من الملفات نفسها؛ محادثة الأداة لحالها مش نسخة احتياطية للموقع.

بدي أضيف مشروع [الاسم] للبورتفوليو الحالي. هاي الصور والمعلومات ودوري وحالة المشروع. اقرأ الهيكل الحالي، وأنشئ صفحة متّسقة معه واربطها من الأعمال. حافظ على الصفحات الموجودة وأسماء الروابط، ولا تغيّر النظام البصري كله. راجع الصورة البديلة والعنوان والوصف، وافحص البطاقة والصفحة والرجوع على الموبايل وسطح المكتب قبل اقتراح النشر.

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

قبل ما تكمل / ابحث في ملفاتك عن example.com ولينا وسِيق. بدّل بيانات التدريب اللي ما عادت مناسبة.

بتقدر تعيد استخدام الموجز، الاتجاه البصري، البناء المرحلي والفحص. اللي بيتغيّر هو المحتوى ورحلة الزائر. متجر أو حجز فعلي أو تسجيل دخول بيحتاج نطاقًا تقنيًا وفحصًا إضافيين؛ ما بيصير بمجرد تغيير عنوان الصفحة.

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

قبل ما تكمل / ابدأ بموقع معلوماتي، وأضف الوظائف لما تكون حاجتها وطريقة تشغيلها واضحتين.

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

قبل ما تكمل / طبّق مراجعة مشابهة على نسختك، ودوّن التعديل وسبب اختياره والنتيجة اللي شاهدتها.

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

استخدم الملف launch-checklist-ar.md بالحزمة، واكتب تاريخ الفحص وملاحظاتك. القائمة بتساعدك تنظّم المراجعة؛ مش شهادة جودة تلقائية.

افتح portfolio-brief-ar.md وعبّي هدف الموقع، الجمهور ومعلومات مشروع واحد. انسخ برومبت «موجز الموقع» وأرفق إجاباتك لأداتك. راجع الموجز الناتج قبل طلب التنفيذ.

• مكتبة البرومبتات: prompts-ar.md وملفات TXT منفصلة.
• ملفات التطبيق: starter وfinished مع صور مؤلّفة وتراخيص الخطوط.
• أوراق العمل: الموجز، جرد الصور، قائمة الإطلاق وسجل التغيير.

قبل ما تكمل / خطوتك الآن: عبّي موجزك لمشروع واحد. ما بتحتاج تنشر حتى تخلص التمرين.

1. OpenAI / Getting started ↗
2. OpenAI / Codex in your editor ↗
3. Anthropic / Claude Code quickstart ↗
4. Anthropic / Working practices ↗
5. Cloudflare / Direct Upload ↗
6. Cloudflare / Custom domains ↗
7. MDN / Accessibility ↗
8. MDN / Responsive images ↗

تعليمات الإعداد والرفع مستندة للمراجع الرسمية. بعض الواجهات والأسعار وحدود الاستخدام بتتغيّر؛ افتح المرجع المناسب قبل التثبيت أو الشراء. إعداد الأمثلة وشرح التصميم من أحمد رصاص.

المثال وشخصياته ومشاريعه مؤلّفة للتعليم. اللقطات من ملفات الحزمة نفسها. لم يُجرَ اختبار مستقل لنفس المهمة داخل Claude Code وCodex، ولا تُنسب النتيجة لأداة محدّدة.

أدلة Rasas المجانية ↗