مهارات سوريامن الصفر حتى أول دولار
مستند المنهج آخر تحقق: 2 تشرين الأول 2026

المستند الكامل لمنهج البرمجة وتطوير الويب

ثمانية دروس في صفحة واحدة: الهدف والخطوات والتمرين والخلاصة ورابط الفيديو. اضغط «احفظ كـPDF» لتحفظه أو تطبعه كمرجع دائم.

صفحة المنهج التفاعلي
الفهرس

الدروس

  1. الدرس 1: جهّز بيئة التطوير من سوريا: محرر VS Code والمتصفح وسطر الأوامر دون إنترنت دائم
  2. الدرس 2: هيكل صفحة الويب الحقيقية بـ HTML5: العناوين والنصوص والروابط والصور الدلالية
  3. الدرس 3: تنسيق الواجهة بنظام حديث: CSS Flexbox والتجاوب مع شاشات الموبايل
  4. الدرس 4: تصميم متجاوب لجميع الأجهزة: CSS Media Queries وقواعد التجاوب الميدانية
  5. الدرس 5: إضافة التفاعل الحقيقي مع المستخدم بـ JavaScript: معالجة الأحداث والتحكم في العناصر
  6. الدرس 6: بناء صفحة هبوط تجارية والتحقق من صحة النماذج برمجياً لمنع المدخلات الخاطئة
  7. الدرس 7: نشر الموقع مجاناً للعالم: ربط GitHub ورفع المشروع على Netlify وGitHub Pages
  8. الدرس 8: أول مشروع لعميل محلي أو منصة عمل حر: التسعير، تجهيز المعرض، وتسليم كود نظيف

الدرس 1: جهّز بيئة التطوير من سوريا: محرر VS Code والمتصفح وسطر الأوامر دون إنترنت دائم

الهدف: تثبيت وإعداد Visual Studio Code، تشغيل أول ملف كود محلياً بمتصفحك بلا إنترنت، وتنظيم مجلدات مشاريعك باحتراف.

الخطوات المختصرة

  1. نزّل وثبّت محرر Visual Studio Code من موقعه الرسمي (أو انسخه من صديق عبر فلاشة إن كان النت ضعيفاً).
  2. افتح VS Code وأنشئ مجلداً رئيساً على القرص D أو C باسم 'projects' ومجلداً فرعياً باسم 'web-basics'.
  3. ثبّت إضافة Live Server من قسم الإضافات (Extensions) بالضغط على أيقونة المربعات الأربعة على اليسار.
  4. أنشئ ملفاً جديداً باسم 'index.html' داخل المجلد واكتب علامة التعجب (!) ثم اضغط Tab.
  5. غيّر محتوى وسم العنوان إلى 'موقعي الأول | تدريب'، واكتب داخل <body> وسماً بسيطاً <h1>أهلاً بالعالم</h1>.</li><li>انقر بالزر الأيمن داخل المحرر واختر 'Open with Live Server' أو افتح الملف مباشرة بالمتصفح.</li><li>افتح أدوات المطور (Developer Tools) بالضغط على زر F12 في المتصفح وتفقد تبويبي Elements وConsole.</li><li>أنشئ مجلداً باسم 'assets' وداخله مجلدين: 'css' و'js' لتعتاد على تنظيم المشروعات الاحترافية منذ اليوم الأول.</li></ol> <h3>التمرين</h3> <p>أنشئ مجلد مشروعك البرمجي الأول، وثبّت المحرر، واكتب أول صفحة HTML مع تغيير العنوان ووسم H1، وافتحها في المتصفح، ثم التقط لقطة شاشة تظهر شاشة VS Code وبجانبها المتصفح مفتوحاً على صفحتك، واكتب سجلاً بسطر واحد عن وقت الإنجاز.</p> <h3>الخلاصة المركزة</h3> <ul><li>بيئة التطوير: محرر نصوص خفيف (VS Code) + متصفح حديث (Chrome/Firefox) + أدوات المطور (F12).</li><li>لا حاجة لإنترنت دائم: تطوير الواجهات يعمل محلياً 100% دون أي خوادم خارجية.</li><li>الترميز الإلزامي: UTF-8 في وسم meta لتأكيد سلامة الخط العربي.</li><li>التنظيم المجلداتي: index.html في الجذر، وملفات التنسيق والسكربت والصور داخل assets.</li><li>اختصار Emmet: كتابة علامة (!) ثم Tab لإنشاء هيكل الصفحة القياسي في لحظة.</li><li>أدوات المطور: F12 هي رفيقك اليومي لمعاينة وتصحيح الكود وتجربة التنسيقات.</li><li>النسخ الاحتياطي: حفظ الكود على فلاشة أو قرص إضافي يحميك من أعطال الكهرباء المفاجئة.</li><li>مخرج الدرس: صفحة أولى تعمل محلياً وهيكل مجلد احترافي جاهز.</li></ul> <p class="small">الفيديو: https://www.youtube.com/watch?v=dH1LPm2grBg · ILearn (14:12) · <a href="/learn/programming/course/lesson-01/">صفحة الدرس</a></p> </div> </section> <section class="section" id="l2"> <div class="container-text"> <h2>الدرس 2: هيكل صفحة الويب الحقيقية بـ HTML5: العناوين والنصوص والروابط والصور الدلالية</h2> <p><strong>الهدف:</strong> بناء صفحة تعريفية كاملة الدلالات (Semantic HTML5) متوافقة مع محركات البحث وقارئات الشاشة، مع إدراج روابط وصور سليمة.</p> <h3>الخطوات المختصرة</h3> <ol><li>افتح ملف index.html واستبدل المحتوى الداخلي لـ <body> بهيكل دلالي يبدأ بوسم <header> وفيه وسم <nav> للروابط.</li><li>أضف وسماً رئيسياً <main> وضمنه وسماً للقسم الترويجي <section class='hero'>.</li><li>اكتب عنواناً رئيساً <h1> واسم النشاط، وتحته فقرة <p> تشرح الخدمة، وزر رابط <a href='#services'>تواصل معنا</a>.</li><li>أنشئ قسماً ثانياً <section id='services'> يحوي عنوان <h2> 'خدماتنا' وقائمة غير مرتبة <ul> بداخلها <li> للخدمات.</li><li>ضع صورة داخل مجلد 'assets/images' واستدعها بوسم <img src='assets/images/sample.jpg' alt='وصف دقيق للصورة'>.</li><li>أضف قسماً لنموذج التواصل <section id='contact'> يحوي حقول <input> وزر إرسال <button>.</li><li>اختم الصفحة بوسم <footer> واكتب بداخله حقوق النشر ورابطاً يعود لأعلى الصفحة <a href='#top'>للأعلى</a>.</li><li>افتح أدوات المطور (F12) وتبويب Console وتأكد من عدم وجود أي خطأ باللون الأحمر كصورة مفقودة (404).</li></ol> <h3>التمرين</h3> <p>ابنِ صفحة ويب شخصية أو تجارية لمهنة حرة من 4 أقسام كاملة (ترويسة، بطل، خدمات، تذييل) باستخدام HTML5 الدلالي النظيف وصورة واحدة بمسار نسبي ووصف alt، وافحصها في المتصفح.</p> <h3>الخلاصة المركزة</h3> <ul><li>الهيكل الدلالي: header, nav, main, section, article, footer تبني هيكل موقع احترافي.</li><li>العناوين الهرمية: h1 واحد فقط، يليه h2 للأقسام، وh3 للتفريعات الداخلية.</li><li>الروابط الداخلية: استخدام #id للتنقل السريع داخل نفس الصفحة بسلاسة.</li><li>الصور النظيفة: خاصية alt إلزامية دائماً لوصف دقيق باللغة العربية.</li><li>المسارات النسبية: كتابة أسماء الملفات بحروف دقيقة وتجنب المسارات المطلقة من القرص المحلي.</li><li>القوائم: <ul> للقوائم العادية و<ol> للمراحل والخطوات الترتيبية.</li><li>فحص Console: التأكد المستمر من عدم وجود روابط مفقودة برمز 404.</li><li>مخرج الدرس: صفحة تعريفية كاملة العناصر والدلالات جاهزة للتنسيق بالـ CSS.</li></ul> <p class="small">الفيديو: https://www.youtube.com/watch?v=q2JqKoz82lU · Abdelrahman Gamal (15:20) · <a href="/learn/programming/course/lesson-02/">صفحة الدرس</a></p> </div> </section> <section class="section" id="l3"> <div class="container-text"> <h2>الدرس 3: تنسيق الواجهة بنظام حديث: CSS Flexbox والتجاوب مع شاشات الموبايل</h2> <p><strong>الهدف:</strong> تنسيق الصفحة بألوان وخطوط عربية متناسقة، وتوزيع العناصر بمرونة تامة باستخدام CSS Flexbox على مختلف الشاشات.</p> <h3>الخطوات المختصرة</h3> <ol><li>أنشئ ملفاً جديداً باسم 'style.css' داخل مجلد 'assets/css' واربطه بصفحة HTML عبر وسم <link rel='stylesheet' href='assets/css/style.css'> داخل <head>.</li><li>اكتب قاعدة التصفير الأساسية (CSS Reset) في أول سطرين: * { margin: 0; padding: 0; box-sizing: border-box; }.</li><li>اضبط خط الصفحة والاتجاه في وسم body: body { direction: rtl; font-family: system-ui, sans-serif; line-height: 1.6; }.</li><li>نسّق شريط التنقل في الترويسة باستخدام Flexbox: .nav-container { display: flex; justify-content: space-between; align-items: center; }.</li><li>حوّل قسم الخدمات إلى شبكة بطاقات مرنة: .services-grid { display: flex; flex-wrap: wrap; gap: 20px; }.</li><li>نسّق بطاقة الخدمة الواحدة: .service-card { flex: 1 1 280px; padding: 20px; background: #fff; border-radius: 8px; border: 1px solid #ddd; }.</li><li>نسّق الأزرار بلون واضح وجذاب ومؤثر عند مرور الفأرة: .btn:hover { opacity: 0.9; transform: translateY(-2px); }.</li><li>غيّر حجم نافذة المتصفح يدوياً يمنة ويسرة أو اضغط Ctrl + Shift + M لتفعيل وضع الموبايل في أدوات المطور.</li></ol> <h3>التمرين</h3> <p>اربط ملف CSS، وطبّق قاعدة التصفير والاتجاه RTL، ونسّق شبكة بطاقات من 3 خدمات باستخدام display: flex وgap وflex-wrap، وتأكد من تجاوبها عند تصغير شاشة المتصفح دون شريط تمرير أفقي.</p> <h3>الخلاصة المركزة</h3> <ul><li>CSS Reset: تصفير الهوامش وضبط box-sizing خطوة أولى إلزامية لكل مشروع.</li><li>دعم العربية: direction: rtl وline-height مناسب يصنعان الفرق في راحة القراءة.</li><li>مرونة Flexbox: تحكم كامل في التوزيع والمحاذاة والفواصل عبر gap.</li><li>تجاوب البطاقات: flex: 1 1 280px تمنح البطاقة مرونة التمدد مع الحفاظ على مقاس منطقي.</li><li>فحص الموبايل: اختصار Ctrl + Shift + M في المتصفح لمعاينة مختلف أبعاد الهواتف فوراً.</li><li>منع التمرير الأفقي: أي شريط تمرير أفقي في الموبايل يعتبر عيباً برمجياً يحتاج مراجعة العروض.</li><li>حركات الأزرار: transition بسيطة مع transform تمنح الواجهة طابعاً حياً واحترافياً.</li><li>مخرج الدرس: واجهة منسقة وشبكة بطاقات متجاوبة وجذابة بصرياً.</li></ul> <p class="small">الفيديو: https://www.youtube.com/watch?v=qkznUmHEph0 · كورسات في البرمجة - Korsat X Parmaga (15:45) · <a href="/learn/programming/course/lesson-03/">صفحة الدرس</a></p> </div> </section> <section class="section" id="l4"> <div class="container-text"> <h2>الدرس 4: تصميم متجاوب لجميع الأجهزة: CSS Media Queries وقواعد التجاوب الميدانية</h2> <p><strong>الهدف:</strong> كتابة قواعد استعلام الوسائط (Media Queries) لجعل موقعك يبدو ممتازاً على الهاتف الصغير، التابلت، والحاسوب المكتبي دون أخطاء.</p> <h3>الخطوات المختصرة</h3> <ol><li>تأكد أولاً من وجود وسم الـ viewport داخل <head>: <meta name='viewport' content='width=device-width, initial-scale=1.0'>.</li><li>افتح ملف style.css وانتقل لأسفله لكتابة أول استعلام وسائط لشاشات الهواتف: @media (max-width: 768px) { ... }.</li><li>حوّل شريط الترويسة في الموبايل من أفقي إلى عمودي: .nav-container { flex-direction: column; gap: 15px; }.</li><li>اضبط أحجام العناوين الكبيرة في الموبايل لتناسب المساحة: h1 { font-size: 1.8rem; } بدلاً من الأحجام الضخمة.</li><li>اجعل شبكة البطاقات عموداً واحداً صريحاً على الشاشات شديدة الصغر: @media (max-width: 480px) { .service-card { width: 100%; } }.</li><li>اضبط هوامش الحاويات العامة في الموبايل: .container { padding: 0 15px; } لمنع التصاق النصوص بحواف الشاشة.</li><li>افتح نافذة أدوات المطور (F12) واختر أجهزة متعددة من القائمة العلوية (iPhone, Galaxy, iPad).</li><li>افحص سرعة استجابة العناصر وتأكد من أن جميع الأزرار والروابط تملك مساحة لمس (Tap Target) لا تقل عن 40 بكسل.</li></ol> <h3>التمرين</h3> <p>أضف استعلامات وسائط @media لشاشات 768px و480px تعيد ترتيب الترويسة وتعدل حجم الخطوط وتضبط هوامش الصفحة، واختبرها على 3 قياسات شاشات مختلفة في المتصفح.</p> <h3>الخلاصة المركزة</h3> <ul><li>وسم Viewport: الركيزة التقنية الأولى للتجاوب، بدونه لا تعمل استعلامات الوسائط.</li><li>نقاط الانكسار: 768px للتابلت والهاتف، و480px للهواتف الصغيرة العمودية.</li><li>إعادة الترتيب: استخدام flex-direction: column لتحويل العناصر العرضية لعمودية.</li><li>تناسب الخطوط: تصغير أحجام العناوين على الهواتف لمنع تشوه النصوص.</li><li>مساحات اللمس: توفير فواصل كافية بين الأزرار والروابط لراحة أصابع المستخدمين.</li><li>محاكي المتصفح: فحص الموقع على أبعاد أجهزة متعددة داخل Developer Tools.</li><li>غياب الـ Overflow: التأكد دائماً أن عرض الصفحة لا يتجاوز 100vw.</li><li>مخرج الدرس: موقع متجاوب 100% يظهر بشكل احترافي على الحاسوب والهاتف والتابلت.</li></ul> <p class="small">الفيديو: https://www.youtube.com/watch?v=jxl7Fdd8xdU · أكاديمية عوضه | Awdah Academy (18:30) · <a href="/learn/programming/course/lesson-04/">صفحة الدرس</a></p> </div> </section> <section class="section" id="l5"> <div class="container-text"> <h2>الدرس 5: إضافة التفاعل الحقيقي مع المستخدم بـ JavaScript: معالجة الأحداث والتحكم في العناصر</h2> <p><strong>الهدف:</strong> ربط ملف JavaScript، الاستماع لنقرات المستخدم وأحداثه، وتغيير محتوى وتنسيق عناصر الصفحة برمجياً (DOM Manipulation).</p> <h3>الخطوات المختصرة</h3> <ol><li>أنشئ ملفاً جديداً باسم 'main.js' داخل مجلد 'assets/js' واربطه بنهاية صفحة HTML قبل إغلاق </body>: <script src='assets/js/main.js'></script>.</li><li>اكتب أول سطر في main.js للتأكد من الربط: console.log('السكربت يعمل بنجاح'); وافتح تبويب Console في F12.</li><li>أضف زراً في الترويسة للوضع الليلي: <button id='themeToggle' class='btn'>🌙 الوضع الداكن</button>.</li><li>في ملف main.js، التقط الزر عبر: const themeBtn = document.querySelector('#themeToggle');.</li><li>أضف مستمعاً لنقر المستخدم: themeBtn.addEventListener('click', function() { document.body.classList.toggle('dark-theme'); });.</li><li>في ملف style.css، عرّف تنسيق الوضع الداكن: body.dark-theme { background: #1a1a1a; color: #f0f0f0; }.</li><li>حدّث نص الزر برمجياً ليعكس الحالة الجديدة: if (document.body.classList.contains('dark-theme')) { themeBtn.textContent = '☀️ الوضع الفاتح'; } else { themeBtn.textContent = '🌙 الوضع الداكن'; }.</li><li>احفظ التفضيل في ذاكرة المتصفح (localStorage) ليبقى الوضع مفضلاً عند تحديث الصفحة: localStorage.setItem('theme', 'dark');.</li></ol> <h3>التمرين</h3> <p>اربط ملف main.js، وأنشئ زراً للوضع الداكن (Dark Mode) يلتقطه السكربت عبر querySelector ويضيف فئة CSS إلى body مع تغيير نص الزر وحفظ الاختيار في localStorage.</p> <h3>الخلاصة المركزة</h3> <ul><li>مكان السكربت: قبل إغلاق </body> مباشرة لمنع تعطل قراءة العناصر.</li><li>التقاط العناصر: document.querySelector('#id') هي الطريقة القياسية المعتمدة.</li><li>الاستماع للأحداث: addEventListener('click', ...) لربط أفعال الزائر بالوظائف البرمجية.</li><li>تبديل الفئات: استخدام classList.toggle لإسناد التحكم البصري لملف الـ CSS.</li><li>الانتقالات الناعمة: دعم التبديل بـ CSS transition يعطي انطباعاً فاخراً.</li><li>ذاكرة localStorage: حفظ اختيارات الزائر لتعزيز تجربة المستخدم الشخصية.</li><li>فحص Console: تتبع المتغيرات ورسائل console.log لتأكيد صحة الخطوات.</li><li>مخرج الدرس: صفحة تفاعلية تتجاوب مع نقرات المستخدم وتدعم الوضع الليلي برمجياً.</li></ul> <p class="small">الفيديو: https://www.youtube.com/watch?v=nw_fLj24y6k · Courses 4 Arab || اتعلم فى ساعة (22:10) · <a href="/learn/programming/course/lesson-05/">صفحة الدرس</a></p> </div> </section> <section class="section" id="l6"> <div class="container-text"> <h2>الدرس 6: بناء صفحة هبوط تجارية والتحقق من صحة النماذج برمجياً لمنع المدخلات الخاطئة</h2> <p><strong>الهدف:</strong> بناء نموذج تواصل كامل، والتقاط بياناته بـ JavaScript، والتحقق من صحة البريد ورقم الهاتف، وعرض رسائل خطأ ونجاح أنيقة.</p> <h3>الخطوات المختصرة</h3> <ol><li>أضف وسماً للنموذج <form id='leadForm'> في قسم التواصل يحتوي على حقول الاسم، البريد، الهاتف، ونوع الخدمة المطلوبة.</li><li>أضف وسماً لرسائل التنبيه تحت كل حقل: <span class='error-msg' id='nameError'></span>.</li><li>في ملف main.js، التقط النموذج واستمع لحدث الإرسال: const form = document.querySelector('#leadForm'); form.addEventListener('submit', validateForm);.</li><li>في دالة الفحص validateForm، أوقف السلوك التلقائي أولاً: e.preventDefault(); لمنع الصفحة من إعادة التحميل.</li><li>افحص حقل الاسم وتأكد أن طوله لا يقل عن 3 أحرف بعد إزالة الفراغات: if (nameInput.value.trim().length < 3) { ... }.</li><li>تحقق من صيغة البريد الإلكتروني عبر فحص احتواء النص على رمز @ ونقطة (.) أو عبر تعبير نمطي (Regex).</li><li>إذا اجتازت كل الحقول الفحص بنجاح، اعرض صندوق رسالة نجاح أنيقة وأفرغ الحقول عبر form.reset().</li><li>اختبر النموذج بنفسك: جرّب الضغط على إرسال وهو فارغ، ثم جرب كتابة بريد ناقص، ثم املأ البيانات صحيحة وتأكد من النتيجة.</li></ol> <h3>التمرين</h3> <p>ابنِ نموذج تواصل من 3 حقول مع وسم رسائل خطأ، وبرمج فحص الإدخال بـ JavaScript مع منع e.preventDefault()، وتلوين الحقل الخاطئ بالأحمر، وعرض رسالة نجاح خضراء عند اكتمال البيانات.</p> <h3>الخلاصة المركزة</h3> <ul><li>أهمية النماذج: النماذج هي بوابة تحويل الزائر إلى عميل يدفع في المواقع التجارية.</li><li>إيقاف التحديث: e.preventDefault() خطوة أساسية لمعالجة النموذج عبر الجافاسكريبت.</li><li>الفحص المزدوج: فحص الاسم والبريد والهاتف للتأكد من جدية الطلب واكتماله.</li><li>التغذية الراجعة الفورية: إظهار الخطأ بجانب الحقل المعني مباشرة دون تشتيت الزائر.</li><li>تنظيف الحقول: form.reset() بعد الإرسال الناجح لتنظيم الواجهة.</li><li>رسائل الطمأنينة: صياغة رسالة نجاح واضحة تذكر للمستخدم متى وكيف سيتم الرد عليه.</li><li>الاختبار الصارم: تجربة كافة حالات الفشل والنجاح قبل نشر الصفحة.</li><li>مخرج الدرس: صفحة هبوط متكاملة بنموذج تواصل ذكي ومحصن ضد البيانات الخاطئة.</li></ul> <p class="small">الفيديو: https://www.youtube.com/watch?v=ghYB2Rawujw · Mohammed Code | محمد كود (19:40) · <a href="/learn/programming/course/lesson-06/">صفحة الدرس</a></p> </div> </section> <section class="section" id="l7"> <div class="container-text"> <h2>الدرس 7: نشر الموقع مجاناً للعالم: ربط GitHub ورفع المشروع على Netlify وGitHub Pages</h2> <p><strong>الهدف:</strong> إنشاء مستودع كود على GitHub، رفع ملفات موقعك، ونشره حياً على نطاق إنترنت عالمي مجاني وسريع برابط HTTPS خلال دقائق.</p> <h3>الخطوات المختصرة</h3> <ol><li>أنشئ حساباً مجانياً على موقع GitHub ببريدك الإلكتروني، وتأكد من تفعيل المصادقة الثنائية.</li><li>أنشئ مستودعاً جديداً (New Repository) وسمّه باسم مشروعك بالإنكليزية، مثلاً 'my-first-landing-page'، واجعله Public.</li><li>في صفحة المستودع، اختر خيار 'uploading an existing file' واسحب ملفات موقعك (index.html ومجلد assets) وأفلتها.</li><li>اكتب رسالة وصفية في خانة التعديل 'Initial commit - first release' واضغط الزر الأخضر 'Commit changes'.</li><li>انتقل إلى تبويب 'Settings' بأعلى المستودع، ثم اختر من القائمة الجانبية قسم 'Pages'.</li><li>تحت خانة 'Branch'، اختر فرع 'main' (أو master) والمجلد '/ (root)' ثم اضغط الزر الأزرق 'Save'.</li><li>انسخ الرابط النهائي الذي يظهر بالأعلى (مثل: username.github.io/my-first-landing-page) وافتحه في تبويب جديد.</li><li>إذا تعثر الرفع على غيتهاب، يمكنك استخدام منصة Netlify: اسحب مجلد الموقع كاملاً وأفلته في قسم 'Drop your site folder' بموقع app.netlify.com.</li></ol> <h3>التمرين</h3> <p>ارفع مشروع صفحة الهبوط التي بنيتها إلى مستودع عام على GitHub، وفعّل خدمة GitHub Pages (أو ارفعه على Netlify)، وافتح الرابط الحي من هاتفك، والتقط لقطة للموقع وهو يعمل برابط إنترنت حقيقي.</p> <h3>الخلاصة المركزة</h3> <ul><li>قيمة الرابط الحي: الرابط المنشور هو الإثبات الحقيقي لمهارتك أمام أي عميل أو منصة توظيف.</li><li>مستودع GitHub: حفظ الكود سحابياً يحميك من أي أعطال أو حوادث تصيب حاسوبك الشخصي.</li><li>مسار الجذر: التأكد دائماً أن index.html يقف في أعلى مستوى بالمستودع.</li><li>شهادة SSL: الحصول على بروتوكول https:// مجاناً يعطي ثقة تامة للزائر ويحميه.</li><li>البديل السريع Netlify: سحب وإفلات المجلد يعطيك موقعاً في لحظات كحل إسعافي ممتاز.</li><li>فحص الجوال: تجربة الرابط من باقة الهاتف المحمول للتأكد من استقلالية الوصول.</li><li>المشاركة المهنية: هذا الرابط هو أول حجر أساس تضعه في معرض أعمالك وسيرتك الذاتية.</li><li>مخرج الدرس: موقع حي يعمل على الويب برابط عالمي دائم ومجاني.</li></ul> <p class="small">الفيديو: https://www.youtube.com/watch?v=a7bnwRQF2cw · DegeTag | Mohamed Adel (16:40) · <a href="/learn/programming/course/lesson-07/">صفحة الدرس</a></p> </div> </section> <section class="section" id="l8"> <div class="container-text"> <h2>الدرس 8: أول مشروع لعميل محلي أو منصة عمل حر: التسعير، تجهيز المعرض، وتسليم كود نظيف</h2> <p><strong>الهدف:</strong> حزم معرض أعمالك (Portfolio)، تسعير مشروع موقع تعريفي بإنصاف، صياغة عرض عمل مقنع، وتسليم الكود للعميل باحتراف.</p> <h3>الخطوات المختصرة</h3> <ol><li>اجمع مشاريعك الثلاثة التي بنتها في مجلد خاص، وتأكد أن روابطها الحية على GitHub Pages تعمل بسلاسة.</li><li>أنشئ صفحة معرض أعمال (Portfolio) بسيطة تضم بطاقة لكل مشروع: صورة للموقع، عنوانه، المهارات المستخدمة، وزر 'معاينة حية'.</li><li>احسب تسعيرك العادل لأول مشروع بموقع تعريفي: (ساعات العمل المقدرة × قيمة الساعة الصافية) ÷ (1 - نسبة عمولة المنصة).</li><li>افتح منصة مستقل أو خمسات وتفقد قسم طلبات تطوير المواقع، واختر طلباً واحداً يبحث عن تعديل واجهة أو صفحة هبوط.</li><li>اكتب عرضك بطريقة 'الحل أولاً': اذكر مشكلة العميل، كيف ستحلها، ما التقنيات المستخدمة، وضع رابط مشروع مشابه من معرض أعمالك.</li><li>في السوق المحلي: حدد 3 محال أو خدمات قريبة من منطقتك تملك صفحة فيسبوك نشطة ولكن بلا موقع ويب رسمي.</li><li>جهّز حزمة التسليم: ملف ZIP منظم يحوي الأكواد النظيفة، ومعه ملف 'README.txt' يشرح كيفية فتح وتعديل الموقع.</li><li>بعد إتمام المشروع، اطلب تقييم العميل اللطيف واستأذنه في إضافة موقعه لمعرض أعمالك، وافتح <a href='/guides/get-paid-in-syria/'>دليل القبض من سوريا</a> لترتيب أرباحك.</li></ol> <h3>التمرين</h3> <p>جهّز صفحة معرض أعمالك واضعاً فيها روابط مشاريعك الحية السابقة، واكتب مسودة عرض لعميل محلي أو مشروع على منصة عمل حر تحل فيه مشكلة واجهته مع حساب السعر المقترح.</p> <h3>الخلاصة المركزة</h3> <ul><li>المهنة حل مشكلات: البرمجة وسيلة لمساعدة أصحاب الأعمال في كسب زبائن وتسهيل مهامهم.</li><li>قوة المعرض الحي: 3 مشاريع صغيرة متقنة ومنشورة بروابط حقيقية تبيع خدماتك أفضل من مئات الشهادات النظرية.</li><li>التسعير المنصف: احسب وقتك الحقيقي واضف هوامش المنصات وتحويل العملات بوعي.</li><li>العرض المخصص: اقرأ تفاصيل طلب العميل، واكتب له رداً شخصياً يعالج مخاوفه ويطرح حلاً ملموساً.</li><li>التسليم المتقن: كود منظم، مسارات سليمة، وملف إرشادات يعكس احترامك للعميل.</li><li>بناء السمعة: أول عميل هو بوابتك لأول توصية وتقييم يفتح لك مشاريع أكبر.</li><li>الاستمرار والتطوير: بعد الواجهات، تقدم خطوة نحو تحسين الأداء ومكتبات JavaScript الحديثة.</li><li>مخرج الدرس: معرض أعمال متكامل ومسودة عرض حقيقية جاهزة للانطلاق في السوق.</li></ul> <p class="small">الفيديو: https://www.youtube.com/watch?v=pJuAbjIVOWE · Yehia Tech يحيى تك (18:45) · <a href="/learn/programming/course/lesson-08/">صفحة الدرس</a></p> </div> </section> <section class="section"> <div class="container-text"> <p class="small">أحكام المنصات في هذا المستند مرجعها صفحات الحالة بتاريخ 2 تشرين الأول 2026. ← كل صفحات القسم: <a href="/learn/programming/">مسار البرمجة وتطوير الويب</a> · <a href="/learn/programming/course/">صفحة المنهج</a></p> </div> </section> </main> <footer class="site-footer"> <div class="container"> <div class="footer-grid"> <div> <div class="brand"> <img src="/assets/logo.svg" alt="" width="36" height="36"> <span><b>مهارات سوريا</b></span> </div> <p class="sub">بوابة تعليمية سورية مجانية لمساعدتك على إتقان البرمجة والعمل الحر وتحقيق أول دخل بأمان.</p> </div> <div> <h4>أقسام البوابة</h4> <ul class="footer-links"> <li><a href="/#tracks">المسارات التعليمية</a></li> <li><a href="/tools/">الأدوات الذاتية</a></li> <li><a href="/guides/get-paid-in-syria/">دليل القبض من سوريا</a></li> <li><a href="/store/">الأدلة بالدعوات</a></li> </ul> </div> <div> <h4>قنوات الدعم</h4> <ul class="footer-links"> <li><a href="https://t.me/maharaatsyria" target="_blank" rel="noopener">قناة تلغرام المجانية</a></li> <li><a href="https://t.me/MaharatSyriaBot" target="_blank" rel="noopener">بوت الدعم والتسليم</a></li> <li><a href="/faq/">الأسئلة الشائعة</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2026 مهارات سوريا. جميع الحقوق محفوظة لشباب وشابات سوريا.</p> </div> </div> </footer> <script src="/assets/maharat.js?v=20261002"></script> </body> </html>