بلال زيادة

لتحسين زر toggle و تأكيد ظهور زر الـ Toggler بشكل صحيح وتحسين تجربة التنقل في الشاشات الصغيرة ثم تأكيد أن الـ navbar-collapse يظهر / يختفي بسلاسة. لتحسين مظهر زر الـ Toggler ليكون أكثر وضوحًا. .navbar-toggler { display: none; border: none; background: transparent; font-size: 1.5rem; color: var(--clr-primary); padding: 8px; border-radius: var(--radius-btn); transition: all 0.3s ease; } .navbar-toggler:focus { outline: none; box-shadow: var(--focus-ring); } @media (max-width: 991.98px) { .navbar-toggler { display: block; } .navbar-collapse { display: none; } .navbar-collapse.show { display: block; width: 100%; background-color: var(--clr-surface); border-radius: 8px; padding: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } } تحسين شريط البحث لضمان أن شريط البحث يتكيف مع جميع الأحجام يجب جعل شريط البحث مرنًا (flexible) في الشاشات الكبيرة والصغيرة و تحسين محاذاة زر البحث داخل الشريط ثم ضبط العرض ليكون مناسبًا في الشاشات الصغيرة. .search-container-lg, .search-container-sm { width: 100%; max-width: 500px; margin: 0 auto; } .search-form { display: flex; align-items: center; position: relative; } .search-input { width: 100%; padding: 10px 45px 10px 15px; border-radius: 8px; border: 2px solid var(--clr-border); background-color: var(--clr-muted-bg); color: var(--clr-ink); font-size: 0.95rem; transition: all 0.3s ease; } .search-input:focus { border-color: var(--clr-primary); box-shadow: var(--focus-ring); } .search-btn { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--clr-ink-muted); font-size: 1rem; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .search-btn:hover { color: var(--clr-primary); } @media (max-width: 767.98px) { .search-container-sm { margin: 10px 0; } .search-input { font-size: 0.9rem; padding: 8px 40px 8px 12px; } .search-btn { font-size: 0.9rem; width: 25px; height: 25px; } } ثم لنقوم بتحسين الأيقونات، يجب تجنب إخفاء الأيقونات في الشاشات المتوسطة والصغيرة ثم إعادة إظهار الأيقونات (مثل .user-card, .shopping-cart) في الشاشات المتوسطة. ضبط حجم الأيقونات وتباعدها لتجنب التداخل. .icons-container { display: flex; align-items: center; gap: 15px; } .icon-link { color: var(--clr-ink); font-size: 1.2rem; position: relative; transition: all 0.3s ease; } .icon-link:hover { color: var(--clr-primary); transform: translateY(-2px); } .cart-count { position: absolute; top: -10px; right: -10px; background-color: var(--clr-primary); color: var(--clr-primary-contrast); border-radius: 50%; width: 18px; height: 18px; font-size: 0.7rem; font-weight: bold; display: flex; align-items: center; justify-content: center; } @media (max-width: 991.98px) { .icons-container { justify-content: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--clr-border); } .user-card, .shopping-cart { display: inline-flex !important; /* إعادة إظهار الأيقونات */ } .icon-link { font-size: 1.1rem; margin: 0 8px; } } @media (max-width: 575.98px) { .icon-link { font-size: 1rem; margin: 0 5px; } .cart-count { width: 16px; height: 16px; font-size: 0.65rem; } }

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

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

صحيح يمكنك استخدام VS Code أي محرر ترتاح بالتعامل معه ، ليس شرطا VS Code ويمكنك استخدام NotePad++ أو أي محرر أخر.

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

في مجال الذكاء الاصطناعي (AI) وخاصة التعلم الآلي (Machine Learning) والتعلم العميق (Deep Learning)، الأولوية في اختيار مكونات الحاسوب تعتمد على نوع المهام. بشكل عام، الـGPU هو العنصر الأهم والذي يجب أن تعطيه الاهتمام الأكبر، لأنه يتعامل مع الحسابات المتوازية الضخمة المطلوبة في تدريب النماذج، مثل تلك في TensorFlow أو PyTorch. بدون GPU قوي (خاصة من NVIDIA مع دعم CUDA)، التدريب بيكون بطيء جداً أو مستحيل للنماذج الكبيرة. بعد الـGPU، يأتي الـRAM لأنه ضروري لتحميل البيانات والنماذج الكبيرة في الذاكرة، ويُنصح بأن يكون على الأقل قدر ذاكرة الـGPU + 25% إضافي. أما الـCPU، فهو مهم للمهام العامة مثل معالجة البيانات الأولية أو التشغيل غير المتوازي، لكن مش الأولوية الأولى إلا لو كنت هتعمل مهام تعتمد عليه بشكل كبير (زي بعض الخوارزميات الكلاسيكية). بالنسبة لتجميعة مثالية، هقترحلك واحدة متوازنة وموصى بها للمبتدئين أو المتوسطين في AI لعام 2025، بناءً على توصيات حديثة. تجميعة منزلية (Desktop) قوية للتدريب المحلي، الإنفيرنس، والتجارب، مع التركيز على NVIDIA GPU للتوافق الأفضل مع أدوات AI. الميزانية تقريباً بين 1500-3000 دولار (حسب الأسعار في 2025، والتي ممكن تتغير)، ويمكن تعديلها حسب ميزانيتك. لو عايز laptop، قولي وأقترح بدائل.

الجلوس لفترات طويلة أمام الشاشة أثناء البرمجة فعلاً ممكن يأثر على الصحة، خاصة العينين والظهر. العناية بالعينين ظارة حماية من الضوء الأزرق لو بتقعد كتير قدام الشاشة، جرب تستخدم نظارة بفلتر الضوء الأزرق (Blue Light Blocking Glasses). دي بتقلل إجهاد العين وبتساعد على نوم أفضل لو بتشتغل بالليل. قاعدة 20-20-20 كل 20 دقيقة، ابعد عينيك عن الشاشة وانظر لشيء بعيد (حوالي 20 قدم) لمدة 20 ثانية. دي طريقة بسيطة تقلل إجهاد العين. إعدادات الشاشة قلل سطوع الشاشة واضبط الـ Contrast بحيث يكون مريح لعينيك. ممكن كمان تستخدم وضع "Dark Mode" في المحررات أو المتصفحات. تمارين العين لو حسيت بجفاف أو تعب في العين، جرب ترمش بسرعة لمدة 10 ثواني أو اغمض عينيك لثواني كل شوية. العناية بالظهر والوضعية استثمر في كرسي مريح (Ergonomic Chair) يدعم انحناء الظهر الطبيعي. لو الكرسي مش مريح، جرب تضيف وسادة دعم لأسفل الظهر. حاول تبقى قاعد بشكل مستقيم، رجليك مسطحة على الأرض، والشاشة تكون في مستوى العين أو أقل بقليل. لو الشاشة منخفضة أو مرتفعة زيادة، ممكن تستخدم حامل للاب توب. كل ساعة أو ساعة ونص، قوم امشي شوية أو اعمل تمارين تمدد بسيطة (زي تمديد الذراعين أو لف الكتاف). ممكن تستخدم تطبيقات أو منبه يفكرك تقوم كل فترة. تمارين زي "Cat-Cow Stretch" أو "Child’s Pose" من اليوجا بتساعد على تخفيف ضغط الظهر. ممارسة الرياضة حاول تخصص وقت يومي (ولو 15-20 دقيقة) لتمارين تقوي عضلات الظهر والرقبة، زي المشي السريع، تمارين القوة البسيطة (Bodyweight Exercises)، أو اليوجا. جرب تمارين مكتبية زي رفع الرجلين وانت قاعد أو تمارين الكتف. - السباحة كمان خيار ممتاز لأنها بتخفف الضغط على العمود الفقري. عادات صحية عامة حافظ على ترطيب جسمك عشان تقلل الإجهاد العام وتحافظ على تركيزك. لو بتشتغل بالليل، حاول تنظم نومك لأن قلة النوم بتزود إجهاد العين والجسم. أكل غني بفيتامين A (زي الجزر والخضروات الورقية) بيساعد على صحة العين.

سأحاول توجيهك بناءً على خبرتي وما هو متاح في السوق حاليًا لتطوير مهاراتك في الفرونت إند كمطور ASP.NET Core يعمل كفريلانسر. سأقسم الإجابة إلى نقاط لتكون واضحة ومباشرة، مع الأخذ بعين الاعتبار احتياجات السوق وأهدافك. Blazor إذا كنت مطورًا في ASP.NET Core، فإن Blazor خيار طبيعي لأنه يتيح لك استخدام C# في الفرونت إند، مما يقلل من الحاجة لتعلم لغات جديدة مثل JavaScript بشكل عميق. Blazor Server مناسب للتطبيقات التي تحتاج إلى تفاعل مباشر مع الخادم (Server)، وBlazor WebAssembly يوفر تجربة تشبه التطبيقات أحادية الصفحة (SPA). التكامل السلس مع بيئة .NET يجعل عملية التطوير أسرع إذا كنت مرتاحًا مع النظام البيئي. العيوب كما ذكرت، Blazor يعاني من ضعف فيSEO، خاصة في Blazor WebAssembly، لأن المحتوى يتم تحميله ديناميكيًا عبر JavaScript، مما قد يؤثر على أداء الموقع في محركات البحث. Blazor WebAssembly قد يكون بطيئًا في التحميل الأولي مقارنة بـ Vue.js أو React بسبب حجم الملفات. مجتمع Blazor أصغر من React أو Vue.js، مما يعني موارد تعليمية ومكتبات أقل. Vue.js سهل التعلم مقارنة بـ React، خاصة إذا كنت جديدًا على JavaScript frameworks. مرن ويمكن دمجه تدريجيًا في مشاريع موجودة، مما يجعله مناسبًا للفريلانسر الذي يعمل على مشاريع متنوعة. أداء ممتاز ومكتبة خفيفة الوزن. دعم قوي لـ **SEO** عند استخدامه مع Nuxt.js (إطار عمل لـ Vue يدعم Server-Side Rendering). مجتمع نشط وشعبية متزايدة، خاصة في آسيا وأوروبا. العيوب يتطلب تعلم JavaScript/TypeScript بشكل جيد، وهو ما قد يستغرق وقتًا إذا لم تكن مرتاحًا معه. أقل شيوعًا من React في بعض الأسواق (مثل الولايات المتحدة)، لكن شعبيته تنمو بسرعة. React الأكثر شيوعًا في سوق العمل العالمي، مما يعني فرص أكثر كفريلانسر. مجتمع ضخم، مكتبات وموارد وفيرة، ودعم قوي من شركات مثل Meta. دعم ممتاز لـ **SEO** عند استخدامه مع **Next.js** (إطار عمل لـ React يدعم Server-Side Rendering وStatic Site Generation). مرن للغاية ومناسب لتطبيقات الـ SPA والتطبيقات الكبيرة. العيوب منحنى التعلم أكثر حدة من Vue.js، خاصة بسبب مفاهيم مثل JSX وإدارة الحالة (State Management) باستخدام مكتبات مثل Redux. قد يكون معقدًا للمبتدئين في JavaScript مقارنة بـ Vue.js. إذا كنت مضغوطًا بالوقت ابدأ مع Blazor، لكن ركز على تعلم كيفية تحسين SEO باستخدام تقنيات مثل Server-Side Rendering أو Static Site Generation (عبر أدوات مثل Blazor Static Site Generator). هذا سيسمح لك باستخدام مهاراتك الحالية مع تحسين نتائج محركات البحث. إذا كنت مستعدًا لاستثمار وقت في تعلم تقنية جديدة: أنصحك بـ Vue.js مع Nuxt.js. إنه أسهل من React، ويوفر أداءً ممتازًا ودعمًا قويًا لـ SEO. يمكنك تعلمه في غضون أسابيع إذا كنت ملتزمًا، وسيوسع نطاق مشاريعك كفريلانسر.

لإرسال رسالة SMS باستخدام Python، يمكنك استخدام خدمات SMS مثل Twilio أو Vonage أو غيرها من الخدمات التي توفر واجهة برمجة تطبيقات (API) لإرسال الرسائل. معظم هذه الخدمات تقدم حسابات تجريبية مجانية، لكن قد تحتاج إلى تسجيل حساب وإضافة رقم بطاقة ائتمانية للتحقق (حتى في الحسابات المجانية). في هذا المثال، سأوضح كيفية استخدام **Twilio** لإرسال رسالة SMS باستخدام Python. إنشاء حساب تجريبي في Twilio قم بزيارة موقع [Twilio](https://www.twilio.com/) وقم بإنشاء حساب. بعد التسجيل، ستحصل على: Account SID (معرف الحساب). Auth Token (رمز التوثيق). رقم هاتف افتراضي مجاني (يبدأ عادةً بكود بلد مثل +1). الحساب التجريبي يسمح لك بإرسال رسائل إلى أرقام تم التحقق منها فقط. تثبيت مكتبة Twilio قم بتثبيت مكتبة Twilio باستخدام pip pip install twilio كتابة الكود لإرسال SMS استخدم الكود التالي لإرسال رسالة SMS. استبدل القيم التالية: your_account_sid بمعرف الحساب (Account SID). your_auth_token برمز التوثيق (Auth Token). from_number برقم الهاتف الافتراضي الذي حصلت عليه من Twilio. to_number برقم الهاتف الذي تريد إرسال الرسالة إليه (يجب أن يكون رقمًا تم التحقق منه في الحساب التجريبي). from twilio.rest import Client # بيانات الحساب من Twilio account_sid = 'your_account_sid' auth_token = 'your_auth_token' client = Client(account_sid, auth_token) # إرسال الرسالة message = client.messages.create( body='مرحبًا! هذه رسالة تجريبية من Python.', from_='+1234567890', # رقم Twilio الافتراضي to='+9876543210' # رقم الهاتف المستلم ) print(f"تم إرسال الرسالة بنجاح! SID: {message.sid}") تأكد من أن لديك اتصال بالإنترنت ثم شغّل الكود باستخدام: python your_script.py إذا نجح، ستصل الرسالة إلى الرقم المحدد، وسيتم طباعة معرف الرسالة (SID).

جافا سكريبت قوتها في تطوير الواجهات (مثل تطبيقات الويب، المواقع، أو حتى تطبيقات Node.js). لكن في الميكاترونيكس، استخدامها قليل جدًا لأنها مو مصممة للتعامل مع الأجهزة المنخفضة المستوى (low-level hardware) أو الأنظمة المدمجة. C++ هي اللغة اللي هتكون أقرب لاحتياجات الميكاترونيكس، لأنها قوية في البرمجة منخفضة المستوى، زي التحكم في الميكروكنترولرز (مثل Arduino أو Raspberry Pi)، تصميم الأنظمة الروبوتية، وبرمجة الأجهزة. تقريبًا كل مشاريع الميكاترونيكس بتعتمد على C++ أو C. هل لازم تتخلى عن جافا سكريبت؟ لا، غير ضروري إذا كنت بتحب جافا سكريبت، ممكن تستمر تتعلّمها كمهارة إضافية أو هواية. ممكن تستخدمها في مشاريع جانبية، زي تطوير واجهات لتطبيقات الميكاترونيكس (مثل واجهة ويب للتحكم بروبوت).

الكود الذي قدمته هو عبارة عن عنصر واجهة مستخدم في HTML يُستخدم لإنشاء حقل إدخال نصي (text input) في صفحة الويب. <input type="text" id="username" name="username"><br> العنصر <input> هذا العنصر هو جزء من لغة HTML ويُستخدم لإنشاء حقول إدخال تفاعلية تتيح للمستخدم إدخال البيانات. يمكن أن يكون له أنواع متعددة (مثل `text`, `password`, `email`, `number`, إلخ)، وفي هذه الحالة، النوع هو `text`. السمة `type="text" تحدد نوع حقل الإدخال. عندما يكون `type="text"`، يعني أن الحقل يقبل نصوصًا عادية (مثل الأسماء، العناوين، إلخ). هذا النوع هو الأكثر شيوعًا لحقول الإدخال العامة. السمة `id="username" تُعطي معرفًا فريدًا (identifier) للعنصر. هذا المعرف يُستخدم في JavaScript أو CSS لتحديد هذا الحقل المحدد. على سبيل المثال، يمكن استخدام `id` للوصول إلى الحقل عبر JavaScript لمعالجة البيانات (مثل قراءة القيمة التي أدخلها المستخدم) أو لتطبيق تنسيقات معينة عبر CSS. السمة `name="username" تُحدد اسم الحقل الذي سيُرسل مع البيانات عند إرسال النموذج (form) إلى الخادم. تُستخدم هذه السمة عند معالجة النموذج في الخادم (مثل PHP، Python، أو أي لغة خلفية) لتحديد البيانات المرتبطة بهذا الحقل. على سبيل المثال، إذا أدخل المستخدم "Ali" في الحقل، فسيتم إرسال البيانات كـ `username=Ali` إلى الخادم. العنصر <br> هذا العنصر يُضيف فاصل سطر (line break) بعد حقل الإدخال، مما يعني أن أي عنصر يأتي بعده سيظهر في السطر التالي. يُستخدم لتحسين تنظيم واجهة المستخدم. حقل الإدخال النصي (`<input type="text">`) هو أحد العناصر الأساسية في تصميم صفحات الويب، وله العديد من الفوائد والاستخدامات، منها: جمع بيانات المستخدم يُستخدم هذا الحقل للسماح للمستخدم بإدخال بيانات مثل الاسم، اسم المستخدم، العنوان، أو أي نص آخر. مثال: في نموذج تسجيل الدخول أو التسجيل، يُستخدم لحقل "اسم المستخدم" أو "البريد الإلكتروني". إرسال البيانات إلى الخادم عندما يكون الحقل جزءًا من نموذج (`<form>`), يتم إرسال القيمة التي يدخلها المستخدم إلى الخادم باستخدام السمة `name`. مثال: في نموذج التسجيل، يمكن إرسال اسم المستخدم إلى قاعدة البيانات لتخزينه. التفاعل مع JavaScript باستخدام `id`, يمكن لمطوري الواجهة الأمامية (frontend) الوصول إلى الحقل ومعالجة البيانات. على سبيل المثال: التحقق من أن الحقل ليس فارغًا قبل إرسال النموذج. عرض رسالة خطأ إذا كان الإدخال غير صالح (مثل إدخال اسم مستخدم قصير جدًا). تحسين تجربة المستخدم يمكن تنسيق الحقل باستخدام CSS ليبدو جذابًا (مثل إضافة حدود، ألوان، أو حجم خط معين). يمكن إضافة سمات إضافية مثل `placeholder` لتوجيه المستخدم (مثل `placeholder="أدخل اسم المستخدم"`). تعدد الاستخدامات يمكن استخدامه في العديد من السيناريوهات، مثل: إدخال اسم المستخدم في نموذج تسجيل الدخول. إدخال عنوان البريد الإلكتروني. إدخال تعليقات أو ملاحظات في نموذج تعليقات. لتوضيح كيف يُستخدم هذا الحقل في سياق حقيقي، إليك نموذج تسجيل دخول بسيط يحتوي على حقل اسم المستخدم: <form action="/login" method="POST"> <label for="username">اسم المستخدم:</label><br> <input type="text" id="username" name="username" placeholder="أدخل اسم المستخدم" required><br> <label for="password">كلمة المرور:</label><br> <input type="password" id="password" name="password" placeholder="أدخل كلمة المرور" required><br> <button type="submit">تسجيل الدخول</button> </form> النموذج (`<form>`) يحتوي على حقلين: اسم المستخدم وكلمة المرور. السمة `placeholder` تُظهر نصًا توضيحيًا داخل الحقل. السمة `required` تجعل الحقل إلزاميًا (لا يمكن إرسال النموذج إذا كان الحقل فارغًا). عند الضغط على زر "تسجيل الدخول"، يتم إرسال البيانات إلى عنوان `/login` باستخدام طريقة `POST`. إضافة تنسيقات باستخدام CSS #username { width: 200px; padding: 10px; border: 2px solid #ccc; border-radius: 5px; } إضافة التحقق باستخدام JavaScript document.getElementById("username").addEventListener("input", function() { if (this.value.length < 3) { this.style.borderColor = "red"; } else { this.style.borderColor = "green"; } }); إضافة سمات إضافية maxlength="20": لتحديد الحد الأقصى لعدد الأحرف. autocomplete="username": لتفعيل الإكمال التلقائي لاسم المستخدم. pattern="[A-Za-z0-9]+": للسماح فقط بالأحرف والأرقام. حقل الإدخال النصي `<input type="text" id="username" name="username">` هو عنصر أساسي في صفحات الويب يُستخدم لجمع البيانات من المستخدمين. فائدته تكمن في مرونته وإمكانية استخدامه في العديد من السيناريوهات، سواء لتسجيل الدخول، التسجيل، أو جمع المعلومات.

في HTML، يُستخدم المعرف id لتحديد عنصر معين في صفحة الـ HTML بشكل فريد. إليك شرحًا موجزًا لما يفعله: المعرف id هو معرف فريد (unique identifier) يُخصص لعنصر واحد فقط في الصفحة. لا يمكن أن يتكرر نفس المعرف على عناصر أخرى في نفس الصفحة. <div id="header">هذا رأس الصفحة</div> يُستخدم id لتحديد عنصر معين لتطبيق تنسيقات CSS عليه. #header { background-color: blue; color: white; } يُمكن استخدام id للوصول إلى عنصر معين وتعديله باستخدام JavaScript. document.getElementById("header").innerHTML = "تم تغيير النص!"; يُستخدم id لإنشاء روابط تنقل المستخدم إلى جزء معين في الصفحة. <a href="#section1">انتقل إلى القسم الأول</a> <div id="section1">هذا القسم الأول</div> يجب أن يكون اسم المعرف id فريدًا في الصفحة. يُفضل استخدام class إذا كنت تريد تطبيق نفس التنسيق على عدة عناصر. الأسماء يجب أن تكون وصفية وتتبع قواعد التسمية (مثل عدم البدء برقم).

بعد الانتهاء من تعلم HTML، يمكنك اتباعها لتطوير مهاراتك والتأكد من إتقانك للمسار. HTML هو الأساس في تطوير الويب، لكنه جزء من منظومة أكبر. إليك الخطوات التالية وكيفية التأكد من إتقانك: تعلم CSS - CSS (Cascading Style Sheets) هي الخطوة الطبيعية التالية لأنها تتيح لك تصميم صفحات الـ HTML وجعلها جذابة بصريًا. تنسيق العناصر (الألوان، الخطوط، الحدود). التصميم المتجاوب (Responsive Design) باستخدام Flexbox وGrid. إنشاء تأثيرات بصرية مثل التحويم (hover) والانتقالات (transitions). مصادر: W3Schools، FreeCodeCamp، أو دورات مثل تلك الموجودة على Coursera أو Udemy. تعلم JavaScript - بعد إتقان التصميم باستخدام CSS، انتقل إلى JavaScript لإضافة التفاعلية لصفحاتك (مثل النماذج التفاعلية، الرسوم المتحركة، أو التواصل مع السيرفر). أساسيات البرمجة (المتغيرات، الدوال، الحلقات). التعامل مع DOM (Document Object Model) لتعديل صفحات HTML ديناميكيًا. تعلم مكتبات مثل React أو Vue لاحقًا إذا أردت. فهم أدوات تطوير الويب تعلم استخدام Git وGitHub لإدارة الإصدارات والتعاون. استخدم أدوات مثل VS Code وتعرف على ملحقاته. جرب أدوات فحص المتصفح (DevTools) لتصحيح الأخطاء. بناء مشاريع عملية صفحة شخصية (Portfolio). موقع للتجارة الإلكترونية بسيط. مدونة تفاعلية. هذه المشاريع ستساعدك على تطبيق ما تعلمته وإثبات مهاراتك.

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

LeetCode منصة ممتازة تحتوي على آلاف المشكلات في مجالات مثل الهياكل البيانية (Data Structures)، الخوارزميات، وقواعد البيانات. يمكنك حل المشكلات بـ JavaScript و يحتوي على مستويات (سهل، متوسط، صعب) مع شروحات ومناقشات للحلول. مناسب لتحسين مهارات البرمجة التنافسية وتحضير المقابلات التقنية. HackerRank يقدم تمارين متنوعة في الخوارزميات، الهياكل البيانية، والرياضيات، مع دعم JavaScript. يبدأ من تمارين بسيطة (مثل معالجة النصوص) إلى مشكلات معقدة (مثل البرمجة الديناميكية). واجهة سهلة ويحتوي على تحديات يومية ومسابقات. Codewars منصة ممتعة تحتوي على تحديات (Kata) بمستويات صعوبة مختلفة (من 8kyu إلى 1kyu). تدعم JavaScript بشكل كبير. مثالي للمبتدئين لأنه يبدأ بمشكلات بسيطة ويتدرج إلى تحديات معقدة. يسمح برؤية حلول الآخرين بعد إكمال التحدي، مما يساعد على تعلم أساليب جديدة. FreeCodeCamp يقدم دروسًا تفاعلية وتحديات برمجية تركز على JavaScript، بما في ذلك مشاريع عملية. يبدأ من أساسيات JavaScript (مثل الدوال والمصفوفات) إلى مشاريع مثل بناء تطبيقات. مجاني بالكامل ومناسب للمبتدئين مع شرح نظري وعملي. Exercism منصة تقدم تمارين JavaScript مع ميزة التوجيه (Mentorship) من مبرمجين آخرين. تبدأ بتمارين بسيطة وتتدرج إلى مشكلات أكثر تعقيدًا. تركز على تحسين جودة الكود وتقديم تعليقات من المجتمع. Edabit يحتوي على تحديات قصيرة وبسيطة في JavaScript، مع تركيز على تعلم المفاهيم الأساسية. مناسب جدًا للمبتدئين، مع تحديات تصبح أصعب تدريجيًا. تصميم ممتع وسهل الاستخدام، مع مكافآت افتراضية تحفز على الاستمرار. Coderbyte يقدم تحديات برمجية ومشكلات متعلقة بالمقابلات التقنية، مع دعم JavaScript. يحتوي على مستويات مختلفة، من تمارين أساسية إلى تحديات متقدمة.

أجد أنك لم تقم بحفظ الملف هل يمكنك حفظ الملف و وضع اسم له و من ثم تشغيله و اخباري بالنتيجة ؟

اختيار نوع الاستضافة (سحابية، VPS، أو مشتركة) يعتمد على عدة عوامل مثل حجم المشروع، الميزانية، متطلبات الأداء، وقابلية التوسع. سأوضح متى يُفضل استخدام كل نوع، ثم أركز على الأفضل لتطبيقات Django للتجارة الإلكترونية. الاستضافة المشتركة (Shared Hosting) للمواقع الصغيرة أو الشخصية (مثل المدونات أو المواقع التعريفية). إذا كانت ميزانيتك محدودة. إذا كنت لا تحتاج إلى تخصيص كبير أو تحكم كامل بالخادم. إذا كنت مبتدئًا ولا تريد التعامل مع إدارة الخادم. الاستضافة السحابية (Cloud Hosting) إذا كنت بحاجة إلى قابلية توسع مرنة (مثل مواقع التجارة الإلكترونية التي تشهد زيادة موسمية في الزوار). للمشاريع التي تتطلب أداءً عاليًا واستقرارًا. إذا كنت تريد توازنًا بين الأداء والتكلفة. الاستضافة الافتراضية الخاصة (VPS) للمواقع المتوسطة إلى الكبيرة التي تحتاج إلى تحكم أكبر. إذا كنت تحتاج إلى تثبيت برامج مخصصة (مثل إعدادات خاصة لـ Django). إذا كنت تريد موارد مخصصة دون تكلفة خادم كامل.

لترسيخ مهاراتك في المسارين الأولين (الذين يغطيان عادةً أساسيات بايثون، الهياكل البيانية، البرمجة الكائنية، معالجة الملفات، وغالبًا بعض المفاهيم المتقدمة مثل التعامل مع JSON أو الحسابات الرياضية)، إليك فكرة مشروع متكامل يجمع هذه المهارات ويمهد الطريق لتعلم Django: نظام إدارة مكتبة إلكترونية (Library Management System) نظام يتيح للمستخدمين (مثل أمين المكتبة أو القراء) إدارة الكتب، تتبع الإعارة، والبحث عن الكتب بناءً على معايير مختلفة. يمكنك تطبيق هذا المشروع باستخدام بايثون فقط (بدون Django في البداية) مع التركيز على المفاهيم التي تعلمتها، ثم تحسينه لاحقًا باستخدام قواعد البيانات أو Django. نصائح لتطوير نفسك في الخطوة القادمة راجع مفاهيم البرمجة الكائنية (OOP) بعمق، خاصة الوراثة (Inheritance) والتغليف (Encapsulation)، لأنها تستخدم بكثرة في Django. تأكد من فهمك لمعالجة الاستثناءات (Exception Handling) لأنها مهمة عند التعامل مع قواعد البيانات والمدخلات.

استخدام البرمجة الكائنية (OOP) في مشاريع تعلم الآلة (Machine Learning) وعلم البيانات (Data Science) يعتمد على طبيعة المشروع والغرض منه. بشكل عام، الOOP مش دائماً بيكون الخيار الأساسي في المجالات دي زي ما هو شائع في مجالات زي تطوير البرمجيات أو تطبيقات الويب، لأن تعلم الآلة وعلم البيانات بيعتمدوا أكتر على المكتبات الجاهزة زي NumPy، Pandas، Scikit-learn، TensorFlow، وPyTorch، واللي غالباً بتكون موجهة نحو البرمجة الوظيفية (Functional Programming) أو البرمجة الإجرائية (Procedural Programming). لكن ده ما يمنع إن الOOP ممكن يكون مفيد جدًا في حالات معينة.

لتحقيق أقصى استفادة من دورة علوم الحاسوب ودراستها بشكل صحيح، خاصة مع نيتك الجادة هذه المرة، إليك خطة منظمة ونصائح عملية تساعدك على الالتزام والنجاح: وضع أهداف واضحة حدد هدفك الرئيسي: هل تريد إتقان مهارات البرمجة؟ الحصول على شهادة؟ أم بناء مشروع عملي؟ تحديد الهدف يساعدك على التركيز. قسم الأهداف إلى مراحل صغيرة: على سبيل المثال، إذا كانت الدورة تغطي البرمجة بلغة Python، ضع هدفًا أسبوعيًا مثل "إنهاء دروس المتغيرات والدوال" أو "كتابة برنامج بسيط". تابع تقدمك: استخدم تطبيقات مثل Notion أو Trello لتتبع ما أنجزته وما يتبقى. تنظيم وقتك حتى لو كان 30-60 دقيقة يوميًا، الاستمرارية أهم من المدة. اختر وقتًا تكون فيه نشيطًا ذهنيًا. ادرس لمدة 25 دقيقة ثم خذ استراحة 5 دقائق. هذا يساعد على تجنب الإرهاق. قسم الدورة إلى وحدات أسبوعية، وخصص وقتًا للمراجعة والتطبيق العملي. الدراسة بطريقة فعّالة ركز على فهم المفاهيم الأساسية (مثل المتغيرات، الحلقات، الدوال) قبل الانتقال إلى التطبيق. لا تكتفِ بمشاهدة الفيديوهات أو قراءة النصوص. قم بحل التمارين، اكتب الكود بنفسك، وجرب تعديل الأمثلة. اكتب المفاهيم بأسلوبك الخاص، مع أمثلة بسيطة، لتعزيز الفهم. خصص يومًا في الأسبوع لمراجعة ما تعلمته، لأن التكرار يثبت المعلومات. التطبيق العملي بعد كل وحدة، حاول تطبيق ما تعلمته في مشروع بسيط (مثل آلة حاسبة، أو برنامج لإدارة قائمة مهام). جرب حل مسائل على منصات مثل LeetCode، HackerRank، أو Codewars لتطوير مهارات حل المشكلات. إذا كنت في مستوى متقدم، ساهم في مشاريع مفتوحة المصدر على GitHub لتتعلم من الآخرين.

الفرق بين OOP (البرمجة كائنية التوجه - Object-Oriented Programming) وSoftware Design (تصميم البرمجيات) يمكن توضيحه كالتالي: OOP (البرمجة كائنية التوجه) هي أسلوب أو نمط برمجي (Programming Paradigm) يعتمد على مفهوم "الكائنات" (Objects) التي تجمع البيانات (Data) والسلوكيات (Behavior) معًا. تركز على كيفية كتابة الكود باستخدام الكائنات والكلاسات (Classes)، مع الاعتماد على مفاهيم مثل: التغليف (Encapsulation): إخفاء التفاصيل الداخلية للكائن. الوراثة (Inheritance): إعادة استخدام الكود من خلال الكلاسات. التعددية (Polymorphism): التعامل مع الكائنات المختلفة بطريقة موحدة. التجريد (Abstraction): إخفاء التفاصيل المعقدة وعرض الوظائف الأساسية فقط. جزء من مرحلة التطوير (Implementation) في عملية بناء البرمجيات. بمعنى آخر، هي طريقة تنفيذ الكود. Software Design (تصميم البرمجيات) هي العملية التي تسبق كتابة الكود، حيث يتم تخطيط وتصميم الهيكلية العامة للنظام البرمجي. تشمل تحديد المكونات، العلاقات بينها، وكيفية تفاعلها. تركز على الصورة الكبيرة للنظام، مثل: تصميم الهيكلية (Architecture): مثل Microservices أو Monolith. أنماط التصميم (Design Patterns): مثل Singleton أو Factory. تقسيم النظام إلى وحدات (Modules) وتحديد واجهاتها (Interfaces). التأكد من قابلية التوسع (Scalability) والصيانة (Maintainability).

كلا الطريقتين صالحتين لتعلم Vue.js، ولكنهما تخدمان سيناريوهات مختلفة وتعتمدان على أهدافك ومستوى تعقيد المشروع. دعني أوضح الفروقات والاستخدام الأنسب لكل طريقة: إنشاء مشروع باستخدام npm create vue@latest هذه الطريقة تستخدم أداة Vite (أو أدوات أخرى مثل Vue CLI) لإنشاء مشروع Vue كامل مع بيئة تطوير حديثة. تقوم بإعداد هيكلية مشروع تحتوي على ملفات JavaScript/TypeScript، مكونات Vue، وإعدادات لبناء التطبيق (build) وتشغيله محليًا. تحصل على أدوات مثل Vite لتسريع التطوير، دعم Hot Module Replacement (HMR)، وإعدادات جاهزة للـ build. المشروع يأتي مع مكونات جاهزة، ملفات إعدادات، ودعم لـ Single File Components (SFCs) التي تجمع HTML/CSS/JS في ملف واحد بامتداد .vue. إذا كنت تخطط لتطوير تطبيقات معقدة أو تريد تعلم كيفية عمل Vue في بيئة إنتاج حقيقية. دعم الأدوات الحديثة: مثل TypeScript، Vue Router، Pinia (لإدارة الحالة)، واختبارات الوحدة. استخدام Vue عبر <script> في HTML تضمين مكتبة Vue مباشرة في صفحة HTML باستخدام رابط CDN (مثل unpkg). هذه الطريقة تتيح لك استخدام Vue داخل ملف HTML واحد دون الحاجة إلى إعداد بيئة تطوير. لا حاجة لتثبيت Node.js أو أي أدوات، فقط أضف السكربت في HTML واكتب الكود. تتيح لك تجربة Vue بسرعة دون تعقيدات إعداد المشروع. مناسبة لتجربة مفاهيم أساسية مثل الـ data binding، التوجيهات (directives)، أو المكونات البسيطة.

الكود الثاني الذي قدمته يحاول استخدام splice على نص (string)، لكن splice هي دالة خاصة بالمصفوفات (arrays) في JavaScript وليست بالنصوص. النصوص في JavaScript غير قابلة للتعديل (immutable)، لذا لا يمكن استخدام دوال مثل splice عليها مباشرة. ومع ذلك، يمكن تحقيق الهدف بطرق أخرى لتكرار الحروف في النص. الحلول البديلة: تحويل النص إلى مصفوفة ثم استخدام splice يمكنك تحويل النص إلى مصفوفة من الحروف باستخدام split('')، ثم استخدام splice لإدراج الحروف، وأخيرًا إعادة تحويل المصفوفة إلى نص باستخدام join(''). لكن هذا قد يكون معقدًا قليلاً لهذا الهدف، لأنك ستحتاج إلى تعديل المؤشر أثناء الإدراج. بدلاً من ذلك، إليك طريقة أبسط باستخدام مصفوفة: let txt = 'hello'; let txtArray = txt.split(''); // تحويل النص إلى مصفوفة let result = []; for (let i = 0; i < txtArray.length; i++) { result.push(txtArray[i], txtArray[i]); // إضافة كل حرف مرتين } let txtAfter = result.join(''); // تحويل المصفوفة إلى نص console.log(txtAfter); // الناتج: hheelllloo استخدام map أو reduce يمكن استخدام دوال JavaScript الوظيفية مثل map لتبسيط العملية: let txt = 'hello'; let txtAfter = txt.split('').map(char => char + char).join(''); console.log(txtAfter); // الناتج: hheelllloo txt.split(''): يحول النص إلى مصفوفة من الحروف. map(char => char + char): يكرر كل حرف بإضافته مرة أخرى. join(''): يحول المصفوفة إلى نص مرة أخرى. استخدام repeat JavaScript توفر دالة repeat التي تتيح تكرار سلسلة معينة. يمكن استخدامها مع map أو مباشرة: let txt = 'hello'; let txtAfter = txt.split('').map(char => char.repeat(2)).join(''); console.log(txtAfter); // الناتج: hheelllloo

كلمة this في جافا سكريبت (JavaScript) تشير إلى الكائن الحالي الذي يتم تنفيذ الدالة أو الكود داخله. تعتمد قيمتها على السياق الذي تُستخدم فيه، وهي تُستخدم بشكل رئيسي للوصول إلى الخصائص والأساليب داخل الكائنات. دعنا نشرحها بالتفصيل: ما هو this؟ this هي كلمة مفتاحية ديناميكية ترتبط بالسياق التنفيذي (Execution Context). قيمتها تتغير بناءً على كيفية استدعاء الدالة أو الكود. متى وكيف نستخدم this؟ داخل الكائنات (Objects): تُستخدم this للإشارة إلى الخصائص أو الأساليب داخل الكائن نفسه. const person = { name: "Ali", sayName: function() { return this.name; } }; console.log(person.sayName()); // يعيد "Ali" هنا، this يشير إلى كائن person. في الدوال: إذا تم استدعاء دالة كجزء من كائن، فإن this يشير إلى ذلك الكائن. إذا تم استدعاء الدالة بشكل مستقل، فإن this يشير عادةً إلى الكائن العام (global object في المتصفح هو window، أو undefined في الوضع الصارم strict mode). function show() { console.log(this); } show(); // في المتصفح، يشير إلى window (إلا إذا كان في strict mode)

في الكود ، يبدو أن المنطق المستخدم يعتمد على دالة toggle المتوفرة في مكتبة Laravel (ربما عبر حزمة مثل laravel-likeable) التي تُدار من خلال auth()->user()->likes()->toggle($post). هذه الدالة تقوم تلقائيًا بإضافة أو إزالة بيانات الإعجاب بناءً على ما إذا كان الإعجاب موجودًا مسبقًا أم لا، مما يعني أن هناك منطقًا جاهزًا في الخلفية يتعامل مع عملية الحفظ أو الحذف. أما بالنسبة لعدم وجود دالة store صريحة، فقد يكون السبب أن المطور اختار استخدام أسلوب toggle بدلاً من كتابة دالة store مخصصة، لأن toggle توفر طريقة موجزة لإدارة العلاقات الكثيرة-الكثير (many-to-many) بين المستخدمين والمنشورات في جدول likes. إذا كنت ترغب في إضافة منطق إضافي (مثل التحقق من شروط معينة قبل الحفظ)، يمكنك تعريف دالة store منفصلة واستخدام attach أو sync لإدارة البيانات يدويًا.