Mustafa Suleiman

الأسئلة الإمتحانية لا يتم الإجابة عليها ولكن يمكن إرشادك لطريقة الحل.
لحل السؤال الخاص بك، يمكن اتباع الخطوات التالية:
 إنشاء مكدس (Stack) خاص بالأقواس. تمرير النص الذي يحتوي على الأقواس إلى البرنامج. البحث عن الأقواس الافتتاحية " ( [ { " في النص وإضافتها إلى المكدس. البحث عن الأقواس الختامية " ) ] } " في النص ومقارنتها بالأقواس في أعلى المكدس.  إذا كانت الأقواس الموجودة في النص متوازنة، سيتم إخراج جملة تفيد بأن الأقواس صحيحة، في حين إذا كانت غير متوازنة، فسيتم إخراج جملة تفيد بأن الأقواس غير صحيحة. الخطوات يمكن تنفيذها باستخدام كود جافا، باستخدام أساليب تضمن أن المكدس يتم التعامل معها بشكل صحيح، مثل دالة push() و pop()، حيث تتم إضافة الأقواس إلى المكدس عند العثور عليها في النص، وإزالة الأقواس من المكدس عند العثور على أقواس ختامية. في النهاية، يمكن فحص المكدس إذا كان فارغاً ليتم تحديد ما إذا كانت الأقواس متوازنة أم لا.

من أسهل وأفضل الاستضافات التي توفر باقات مجانية هي:
https://railway.app
ويمكنك استخدام منفذ الأوامر CLI الخاص بها للتعامل مع الاستضافة.
وأيضًا هناك استضافات أخرى لكن ليس أفضل منها، وأنصحك بقراءة النقاشات التالية:
وبخصوص الدورة فقد تم شرح استضافة Heroku لكونها أفضل استضافة كانت متوفرة، لكن حاليًا لم تعد مجانية وسيتم تحديث الشرح في التحديثات القادمة لاستضافة أخرى.

باستخدام نفس الطريقة: 
على سبيل المثال، إذا كان هناك عنصر script مع src="../js/file1.js"، يمكن تغيير مساره عند الضغط على الزر كما يلي:
button.onclick = function() { const scriptElement = document.querySelector("script[src='../js/file1.js']"); scriptElement.src = "../js/file2.js"; }  الكود سيحدث تغييرًا في مسار العنصر script الذي يحتوي على المسار القديم "../js/file1.js"، وسيتم تغييره إلى المسار الجديد "../js/file2.js".
ويرجى الانتباه إلى أنه إذا كانت هناك وظيفة محددة تعمل بالفعل في الملف القديم، فلن يتم استدعاؤها بعد تغيير مسار العنصر script، لذلك قد تحتاج إلى إعادة تحميل الصفحة لتشغيل الوظيفة المحدثة.
ويمكنك أيضًا استخدام طريقة أحدث وهي باستخدام addEventListener للزر بدلاً من onclick.

في البداية أرجو منك، طرح كافة الأسئلة الخاصة بك المتعلقة بموضوع واحد في سؤال واحد هنا، فقد تم طرح أكثر من سؤال عن المصفوفات ويمكن جمعهم في سؤال واحد هنا.
وتنويه آخر بخصوص الأسئلة الخاصة بك هي أسئلة إمتحانية ولا يتم تقديم كود كحل لها بل يتم شرح الخطوات التي تمكنك من تنفيذ ما تريدينه، وإذا واجهتي مشكلة في الحل يمكنك توفير الكود وسيتم مساعدتك في الحل.
وهناك 5 أسئلة في الملف الخاص بك في المرفقات عن المصفوفات باستخدام لغة C# وهم كالآتي:
اكتب برنامجا يطلب من المستخدم ادخال مصفوفتين من األعداد الصحيحة و يخزن في مصفوفة جديدة جميع عناصر المصفوفة األولى متبوعة بجميع عناصر المصفوفة الثانية. اكتب برنامجا يخزن المصفوفة التالية {3,3,2,2,1,1,1,3,2,1 {و يطلب من المستخدم ادخال رقم للبحث عنه ثم يطبع رقم اخر عنصر داخل المصفوفة يتواجد فيه الرقم الذي ادخله المستخدم و اذا لم يكن الرقم موجودا يطبع للمستخدم 0. اكتب برنامجا يطلب من المستخدم ادخال مصفوفة من األعداد الصحيحة و يطبع ثاني أكبر عنصر في المصفوفة. اكتب برنامجا يطلب من المستخدم ادخال مصفوفة من األعداد الصحيحة و يطبع العناصر األكبر من متوسط جميع العناصر في المصفوفة. اكتب برنامجا يطلب من المستخدم ادخال مصفوفة ثنائية األبعاد من األعداد الصحيحة ويعيد رقم الصف الذي يحتوي على أكبر مجموع خطوات حل السؤال الأول
تعريف ثلاث مصفوفات، مصفوفتي الأعداد الأولى والثانية، ومصفوفة جديدة: طلب إدخال المصفوفة الأولى من المستخدم باستخدام دالة الإدخال Console.ReadLine(). تحويل الإدخال المدخل من النص إلى مصفوفة أعداد صحيحة باستخدام دالة التحويل Int32.Parse(). طلب إدخال المصفوفة الثانية من المستخدم باستخدام دالة الإدخال Console.ReadLine(). تحويل الإدخال المدخل من النص إلى مصفوفة أعداد صحيحة باستخدام دالة التحويل Int32.Parse(). تعيين قيم المصفوفة الأولى في المصفوفة الجديدة. تعيين قيم المصفوفة الثانية في المصفوفة الجديدة، بداية من المؤشر الذي يلي آخر عنصر في المصفوفة الأولى. عرض المصفوفة الجديدة للمستخدم باستخدام دالة الإخراج Console.WriteLine(). خطوات حل السؤال الثاني
بتعريف مصفوفة من نوع الصحيح وتعبئتها بالقيم التالية: {3,3,2,2,1,1,1,3,2,1}. الطلب من المستخدم إدخال رقم للبحث عنه باستخدام دالة لقراءة الإدخال من المستخدم.  البحث في المصفوفة عن الرقم المدخل باستخدام حلقة for.  في حال وجود الرقم المدخل، احتفظ بالموقع الذي تم العثور فيه على الرقم.  بعد الانتهاء من البحث، قومي بطباعة العنصر الذي يلي العنصر الذي تم العثور فيه على الرقم إذا كان الرقم موجودًا، وإذا لم يكن الرقم موجودًا قومي بطباعة 0. خطوات حل السؤال الثالث
استخدام دالة Console.ReadLine() لطلب المصفوفة من المستخدم عبر واجهة الأمر الخاصة بالبرنامج. استخدام دالة Split() لتحويل السلسلة النصية إلى مصفوفة من الأعداد الصحيحة. إنشاء متغيرات مناسبة للحفاظ على العناصر الأكبر والثاني الأكبر في المصفوفة. استخدام حلقة تكرارية للمرور على جميع العناصر في المصفوفة ومقارنتها بالعناصر الأكبر والثاني الأكبر. إذا كانت العنصر أكبر من الأكبر ، فتحديث القيمة الخاصة بالأكبر والثاني الأكبر على التوالي. إرجاع القيمة الثانية الأكبر من المصفوفة باستخدام دالة Console.WriteLine(). خطوات حل السؤال الرابع
استخدام الدالة Console.ReadLine() لطلب إدخال المصفوفة من المستخدم. استخدام الدالة Split() لتقسيم النص المدخل إلى مصفوفة من السلاسل. استخدام حلقة for لحساب مجموع جميع العناصر في المصفوفة. حساب متوسط العناصر في المصفوفة عن طريق قسمة مجموع العناصر على عددها. استخدام حلقة for مرة أخرى للبحث عن العناصر التي تزيد عن المتوسط، وإضافة هذه العناصر إلى مصفوفة جديدة. استخدام دالة Array.Sort() لفرز المصفوفة الجديدة. استخدام شرط if للتحقق من وجود عناصر أكبر من المتوسط، وإذا كانت الشرط صحيحة، فإنه يتم طباعة هذه العناصر. خطوات حل السؤال الخامس
استقبال المصفوفة الثنائية الأبعاد من المستخدم عن طريق استخدام دالة الإدخال Console.ReadLine() وتخزينها في متغير مناسب.  إنشاء متغير لتخزين القيمة القصوى لمجموع العناصر في الصفوف وتعيينه بالقيمة الأولى في المصفوفة.  إنشاء متغير لتخزين رقم الصف الذي يحتوي على المجموع الأكبر وتعيينه برقم الصف الأول.  البدء في البحث عن الصف الذي يحتوي على المجموع الأكبر. يتم ذلك بتكرار الخطوة الخامسة والسادسة حتى نصل إلى نهاية المصفوفة. إنشاء متغير مؤقت لتخزين مجموع العناصر في الصف الحالي. الحصول على مجموع العناصر في الصف الحالي بواسطة تكرار العناصر في الصف وإضافتها إلى المتغير المؤقت.  التحقق إذا كان مجموع العناصر في الصف الحالي أكبر من المجموع الحالي. إذا كان الأمر كذلك ، فتعديل المجموع الأكبر ورقم الصف.  بعد الانتهاء من البحث في جميع الصفوف ، يتم طباعة رقم الصف الذي يحتوي على المجموع الأكبر. يمكن ذلك باستخدام دالة الإخراج Console.WriteLine(). وإليك شروحات لتسهيل الأمر عليكي، أتمنى منك دراستها.
واجب فصل المصفوفات.pdf

المشكلة تحدث بسبب عدم وجود مسار النطاق الافتراضي للتطبيق في الملف الذي تعمل عليه، ويمكن حل هذه المشكلة بإضافة الأمر use في بداية الملف، لتحديد مسار المجال الذي تعمل عليه النماذج:
use App\Models\User; وفي هذه الحالة، يجب استخدام Models بدلاً من Model بسبب تغيير في الاسم في إصدارات Laravel الحديثة. وبعد ذلك، يمكنك استخدام الأمر التالي لاستدعاء النموذج User وجلب سجل واحد من قاعدة البيانات:
$user = User::find(1); ويجب التأكد من أن الملف الذي تعمل عليه موجود في المجال المناسب لتطبيق Laravel وأنه يتم تشغيله من داخل مجلد التطبيق. كما يجب التأكد من أنه تم تشغيل الأمر من داخل مجلد التطبيق Laravel باستخدام منفذ الأوامر CMD.

بخصوص سؤالك، فمن المستحيل إنشاء خوارزمية واحدة تصف جميع الأكواد في مشروع الويب. ومن الأفضل فهم الخوارزميات كأدوات تستخدم لحل مشكلات محددة، بدلاً من كونها وصفًا شاملًا للكود.
في الواقع، يمكن استخدام الخوارزميات في مشاريع الويب في العديد من الأمور، مثل تصميم نظام تصنيف، أو توجيه المستخدمين إلى المحتوى الذي يناسبهم بناءً على تفضيلاتهم، أو تحسين سرعة الاستجابة للمستخدمين، وغيرها الكثير.
وبالتالي، يمكن للمبرمج البحث عن الخوارزميات المناسبة لحل مشكلات محددة في مشروع الويب، وتطبيقها على الأكواد الخاصة بالمشروع. ويمكن أيضاً تصميم خوارزميات مخصصة لحل مشاكل فريدة في المشروع، على سبيل المثال، العثور على الكلمات المميزة في مدونة أو تصميم نظام توصية فريد لمتجر إلكتروني.
وأنصحك بإنشاء flow chart أفضل لأنه يمثل رسماً توضيحياً لخطوات الخوارزمية ويسهل فهمها وتنفيذها. وبالتالي، يمكن استخدام ال flow chart كدليل لكتابة الكود اللازم لتنفيذ الخوارزمية.
كما أنه يساعد على تفادي بعض الأخطاء الشائعة في كتابة الخوارزميات مثل الدوال التكرارية (loops) اللامنتهية والتكرارات الزائدة (redundant iterations) وغيرها.
على الرغم من ذلك، فإنه من المهم أن يتعلم المبرمج الكتابة المباشرة للخوارزميات بمجرد تحسين مهاراته في البرمجة، حتى يمكنه تحسين كفاءة وسرعة كتابة الأكواد والتحكم بها بشكل أكبر.
وعند إنشاء خوارزمية لمشروع كامل، يتم البدء بتحليل المشروع وتقسيمه إلى أجزاء صغيرة قابلة للإدارة. على سبيل المثال، يمكن تقسيم المشروع إلى الجزء الخاص بال Front-End والجزء الخاص بال Back-End.
بعد ذلك، يمكن تحليل كل جزء وتحديد الخوارزميات المناسبة لكل جزء. يمكن أيضًا تحديد العمليات والوظائف الرئيسية لكل جزء وتصميم الخوارزميات المناسبة لتحقيق هذه العمليات والوظائف.
ويمكن أن تشمل الخوارزميات المستخدمة في مشروع ويب عدة مجالات مثل:
التواصل مع قاعدة البيانات: يمكن تصميم خوارزميات لتحليل البيانات وتخزينها واسترجاعها من قاعدة البيانات. التحقق من الصحة والأمان: يمكن تصميم خوارزميات للتحقق من صحة البيانات المدخلة والمرسلة بين ال Front-End وال Back-End وتطبيق الأمان المناسب لحماية المعلومات. العمليات الحسابية والرياضية: يمكن تصميم خوارزميات للقيام بالعمليات الحسابية والرياضية المختلفة التي يحتاج إليها المشروع. التعامل مع الرسائل والإشعارات: يمكن تصميم خوارزميات لإدارة الرسائل والإشعارات وإرسالها واستقبالها بين ال Front-End وال Back-End. تحسين أداء الموقع: يمكن تصميم خوارزميات لتحسين أداء الموقع وتقليل وقت الاستجابة وزيادة سرعة تحميل الصفحات.

في البداية، أود أن أشيد بعزمك  على تعلم البرمجة وتحسين مهاراتك في اللغة الإنجليزية. ولكن، يجب أن تكون حذرًا في اتخاذ قرار ترك الوظيفة  ويجب وتحديد بعض الأشياء قبل اتخاذ القرار النهائي.
في المقام الأول، يجب عليك تقييم الوضع المالي الخاص بك وتحديد ما إذا كان بإمكانك البقاء دون دخل لفترة طويلة من الوقت. من الممكن أن يستغرق الأمر بعض الوقت قبل العثور على وظيفة جديدة ومن المهم أن تكون قادرًا على تلبية احتياجاتك المالية خلال هذه الفترة.
فإذا كنت لا تلتزم بأية مصاريف شهرية او تعول أسرتك، فبإمكانك توفير مبلغ يكفي احتياجاتك لمدة سنة ثم اترك الوظيفة وتفرغ للتعلم.
أما إذا كان لديك التزامات وبحاجة إلى المال، فلا تقم أبدًا بترك الوظيفة بل ابحث عن وظيفة أخرى توفر لك المال وبوقت أقل حتى تتمكن من الدراسة إذا كان ذلك ممكنًا.
وإن لم يكن ممكنَا فالحل هو تنظيم الوقت وتكريس حياتك للعمل والدراسة لمدة سنة بشكل يومي حتى لو ساعتين يوميًا، فأثر الإلتزام اليومي عظيم جدًا وستندهش من حجم التغير الذي سيحدث لك خلال عام أو عام ونصف حسب وقتك.
دائمًا وأبدًا قم بالتخطيط بشكل واقعي وعقلاني، حتى لا ترتطم بجدار الواقع، فالجميع يترك صالة الجيم بسبب توقعات غير صحيحة، وهو أنهم سيصبحوا أبطال كمال أجسام خلال شهر أو شهرين!
يجب عليك البحث والإلتزام بمسار تعليمي واضح ولا تقم بتغييره.
في الحقيقية ستحتاج إلى 6 أشهر بمعدل 8 إلى 10 ساعات يوميًا للدراسة إذا كنت تريد أنت تصبح مبرمج قوي، أو إلى سنة إذا لم يكن لديك الوقت الكافي بمعدل 4 ساعات يوميًا.
والإلتزام الإلتزام هو الحل، يمكنك تذكير نفسك ماذا سيحدث أو كيف ستبدوا حياتك لو لم تقم بالإلتزام بتعلم البرمجة.
وبإمكانك دراسة اللغة الإنجليزية في العمل مثلاً يمكنك تحميل الفيديوهات ومشاهدتها على الهاتف في أوقات فراغك في العمل أو أثناء الذهاب والعودة في المواصلات، ويكفي أن تصبح قادر على القراءة والاستماع لتتمكن من البحث والقراءة عن البرمجة على الإنترنت، والتحدث بشكل بسيط أثناء مقابلة العمل.
بعد تعلم البرمجة يجب أن تعلم أن فترة الحصول على وظيفة دوام كامل تتراوح ما بين 6 أشهر وحتى سنة فيجب معرفة ذلك حتى لا تصاب بالإحباط، وأيضًا هناك مواقع العمل الحر التي من خلالها يمكنك العمل أثناء البحث عن وظيفة بدوام كامل، ولكن أن يجب قراءة كيف يتم تقديم العروض للعملاء على تلك المواقع حتى تكون محترف.
 

بالطبع، يمكن استخدام selected attribute مع EJS بنفس الطريقة التي تستخدم بها value attribute. وأيضًا استخدام EJS لإدخال قيمة الخيارات ومن ثم استخدام selected attribute لتحديد الخيار الافتراضي.
هناك طريقتان لفعل ذلك ، يمكنك استخدام ثنائيات القيمة / النص كما يلي:
<select name="mySelect"> <option value="1" <% if (value === "1") { %>selected<% } %>>Option 1</option> <option value="2" <% if (value === "2") { %>selected<% } %>>Option 2</option> <option value="3" <% if (value === "3") { %>selected<% } %>>Option 3</option> </select> أو يمكنك استخدام دالة مساعدة مخصصة لتنفيذ هذا الأمر بشكل أكثر كفاءة:
<select name="mySelect"> <% options.forEach(function(option) { %> <option value="<%= option.value %>" <%= option.selected ? 'selected' : '' %>><%= option.text %></option> <% }); %> </select> في  المثال السابق، يتم استخدام دالة forEach لتكرار قائمة الخيارات وتعيين selected attribute إذا كانت الخيارات محددة. ثم تمرير القيمة والنص وحالة التحديد كمعلمات لكل option. ويمكنك تعديل هذا المثال لتناسب احتياجاتك الخاصة.

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

المشكلة في الرابط المستخدم لعرض الصورة في الكود. عند رفع الصورة إلى مستودع GitHub الخاص بك، يجب استخدام الرابط الصحيح لعرض الصورة.
فرابط الصورة في الموقع كالتالي:
<img class="logo" src="/images/logo.png" alt="Logo"> باستطاعتك استخدام الرابط النسبي لعرض الصورة، كالتالي:
<img class="logo" src="images/logo.png" alt="Logo"> حيث يكون مجلد "images" هو المجلد الذي يحتوي على الصورة والموجود في مستودع GitHub الخاص بك.
يمكنك أيضًا استخدام رابط مباشر لصورة عند رفعها على GitHub، مثل:
<img class="logo" src="https://raw.githubusercontent.com/ayman-alrawy/second-site/main/images/logo.png" alt="Logo"> عند استخدام هذا الرابط، يجب التأكد من تحديد الفرع الصحيح في المستودع وتغيير اسم المستخدم واسم المستودع حسب ما ينطبق على المشروع الخاص بك.
والأفضل رفع المشروع الخاص بك على netlify أو vercel بينما الكود قم برفعه على GitHub.
 

في البداية هناك تفاوتات كبيرة في المميزات والعيوب والاستخدامات المناسبة.
Node.js
Node.js هو إطار عمل مبني على محرك JavaScript V8، ويستخدم لبناء تطبيقات الويب الحديثة التي تعتمد على الوقت الحقيقي والإرسال المستمر للبيانات، وغالبًا ما يستخدم في تطبيقات الشبكات والدردشة والألعاب الحية وتطبيقات الميديا.
وبالتالي تتميز Node.js بالسرعة والقدرة على التعامل مع حمولات عالية والتحكم في الإدخال/الإخراج. كما يوفر أيضًا مجموعة كبيرة من المكتبات والأدوات لتطوير التطبيقات بسهولة.
Laravel
Laravel هو إطار عمل PHP شائع ويستخدم لبناء تطبيقات الويب المتكاملة. ويتميز Laravel بسهولة الاستخدام والمرونة والتحكم الكبير في قواعد البيانات. كما يوفر أيضًا مجموعة كبيرة من المكتبات والأدوات لتطوير التطبيقات بسهولة، وتدعم Laravel البرمجة الكائنية ونظام توجيه متقدم ويتكامل بسلاسة مع مكتبات الجافاسكريبت.
ولذلك عندما يتعلق الأمر بالأداء، فإن Node.js يتفوق على Laravel، حيث تعمل Node.js بشكل متزامن ويمكنها التعامل مع عدد كبير من الطلبات بسرعة عالية، بينما يعمل Laravel بشكل متزامن وقد يتأخر في التعامل مع حمولة عالية من الطلبات. ومع ذلك، فإن Laravel يتميز بتوفير العديد من الأدوات والمكتبات التي تسهل عملية التطوير، ويعتبر من أفضل إطارات العمل لبناء تطبيقات الويب المتكاملة.
لكن الأمر ليس بتلك البساطة، فهناك الكثير من العوامل التي لم يتم ذكرها وستؤثر على إختيارك.
فبالنسبة لمشروع كبير يحتوي على معاملات حساسة وكبيرة، فإنه يمكن استخدام كلا الإطارين، ولكن يجب اختيار الإطار الذي يتناسب مع احتياجات المشروع بشكل أفضل. على سبيل المثال، إذا كانت سرعة الاستجابة والقدرة على التعامل مع الطلبات الكبيرة هي الأولوية، فقد يكون Node.js الخيار الأفضل. ومع ذلك، إذا كانت المتطلبات تتطلب القدرة على العمل مع قواعد بيانات كبيرة ومعقدة وإمكانية الوصول إلى المعلومات بسهولة، فقد يكون Laravel الخيار الأفضل.
ومع ذلك، يجب ملاحظة أن الأداء ليس العامل الوحيد الذي يجب النظر إليه، بل يجب أيضًا النظر إلى المرونة والملاءمة للاحتياجات المحددة للمشروع كما أشرت.

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

في البداية أنصحك بإنشاء المواقع بالطريقة الطبيعية وباللغة الإنجليزية، إلا في حال كنت تتابع إحدى الدورات مثل دورات حسوب.
وذلك لسبب معين، وهو تجنب بعض المشاكل الخاصة بتحويل الإتجاه من LTR إلى RTL، فأنت بحاجة إلى تعلم كيف يتم ذلك وهو أمر أجده مشتت لك في بداية تعلمك إلا إذا كنت تتابع مع دورة معينة ومدرب جيد، لذلك بعد إنشاء موقعك الأول بنجاح، يمكنك تحويله إلى اللغة العربية أو بناء موقع آخر وتطبيق ما تريده.
وأنصحك بشدة بقراءة الدليل التالي:
RTL Styling 101 دليل مكثف لكيفية كتابة CSS للمواقع من اليمين إلى اليسار.
أو يمكنك استخدام Bootstrap 
وبخصوص التصميمات والاستلهام أنصحك بقراءة الإجابات على السؤال التالي:
 

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

الأفضل هو حساب تكلفة المشروع بشكل Fixed وليس تبعًا لعدد ساعات العمل، فربما مشروع يتطلب نصف ساعة فقط لإنجازه، ولكن الخبرة المطلوبة لإنجازه كبيرة أو أنت لديك خبرة وقمت بإنجازه بشكل سريع جدًا.
وإذا تطلب الأمر إلى العمل بالساعة فيمكنك حساب تكلفة المشروع بشكل Fixed ثم تقسيمه على سعر عدد الساعات وليكن تكلفة المشروع 100 دولار وسعر الساعة 10 إذن المشروع يتطلب 10 ساعات.
بالنسبة لحساب تكلفة المشروع، فالأمر عائد لنوع العميل والبلد الخاصة به فسعر العملة في بلده يشكل عامل كبير، وأيضًا هناك عوامل أخرى مثل سنوات الخبرة لديك وهل العروض كثيرة على المشروع وهل جودة العمل الخاص بك أعلى من العروض المقدمة او أعلى من الغالبية على الأقل.
أضف إلى ذلك حجم المشروع أو التعديل المطلوب.
وأيضًا ما هي القيمة أو الفائدة التي ستعود على العميل من وراء تنفيذك للمشروع، كل تلك عوامل تحدد تكلفة المشروع.
فمثلاً تكلفة مشروع عبارة عن موقع من صفحة هبوط واحدة، قد يتراوح ما بين 50 إلى 300 دولار تبعًا لجودة العمل المطلوب وجودة العمل الخاص بك أيضًا.
لذلك عند العمل على مواقع العمل الحر يمكنك رؤية متوسط السعر والعمل به تجنبًا لفرض مبلغ كبير يضيع منك الفرص، بالإضافة إلى ضرورة البحث عن  كيفية تسعير خدماتك فستجد الكثير من المقالات العربية والأجنبية.

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

في البداية يجب الإهتمام بكيفية التقديم على العروض وكيفية جذب إهتمام العملاء، من خلال قراءة تفاصيل المشروع وتبيان أنك مناسب للعمل عن طريقة توضيح ذلك في العرض المقدم.
سواء عن طريق خبرات سابقة في معرض أعمالك أو سنوات خبرة لديك يمكن إثباتها من خلال شرح الكيفية التي يمكن تنفيذ المشروع بها وإيضاح الخطوات التي سيتم إتباعها لتنفيذ العمل، بمعنى أدق يجب أن يرى العميل أن لديك الخبرة الكافية.
وذلك لا يعني ضرورة الإلمام بجيمع جوانب المشروع، فيكفي أن تمتلك 70% من المعرفة اللازمة والباقي يمكنك تعلمه والبحث عنه لتنفيذ المشروع، طالما لديك المهارة والأساسيات.
أيضًا هناك جانب هام وهو الإحترافية، حيث تجد أغلب المستقلين يتعاملون كما لو أنهم يتحدثون عبر الواتساب عند التقديم على المشاريع، بل يجب تبيان أنك شخص ذو خبرة ومصداقية فهما العامل الأول الذي يبحث عنه العملاء.
لذلك إبحث جيدًا عن كيفية كتابة عرض تظهر فيه مهاراتك وبشكل مختصر أيضًا، بجانب ضرورة التعامل بشكل إحترافي كما لو أنك شركة، يعني الإلتزام أولاً ثم المهارة، فالغالبية لديهم المهارة لكن جانب الإلتزام وطريقة التعامل مع العملاء متدنية جدًا.
أمر آخر وهو لا تظهر بشكل كما لو أنك تترجى العميل لقبول عرضك، بل تعامل بشكل طبيعي فالنتيجة عكسية وسيتم رفض عرضك إذا قمت بذلك.
تلك كانت بعض النصائح وهناك المزيد، يمكنك البحث والقراءة عن المهارات اللازمة لتصبح مستقل محترف.
بالنسبة لطريقة تسليم مللفات المشروع
قبل استلام المشروع يتم الإتفاق على التفاصيل مع العميل، فصدقًا ستتجنب الكثير من المشاكل إذا قمت بالإتفاق على كافة التفاصيل قبل بدأ المشروع.
يمكنك تحضير الأسئلة وإرسالها للعميل للإجابة عليها في ملف أو قم بالاستفسار عن كل سؤال بشكل منفصل، ومن ضمنها بالطبع كيف سيتم تسليم المشروع هل سيتم رفعه على استضافة مجانية؟ أم يتطلب نشر المشروع على استضافة مدفوعة وشراء دومين، وهل سيتم تصميم المشروع من قبلك أم هناك تصميمات جاهزة، وهل هناك محتوى أم سيتم إنشائه؟ ومدة تسليم المشروع فربما يريد العميل تنفيذه بسرعة وبالتأكيد ذلك يعني زيادة في تكلفة المشروع، فأي خدمة زيادة عن الكود لها تكلفتها، لكن رفع المشروع على استضافة وتسليمه يعمل بشكل سليم هو واجب عليك، طبعًا لن تدفع أنت إشتراك الاستضافة .
وطريقة التسليم بسيطة، قم بالتخطيط والتنفيذ للمشروع ثم رفعه على الاستضافة المطلوبة وربطه بقاعدة البيانات وربط الدومين أيضًا ثم تفعيل شهادة SSL.
بعد ذلك يتم تسليم ملفات المشروع للعميل منظمة وبها تعليقات على الكود لكي يسهل تطويره فيما بعد، مع كتابة إرشادات عن كيفية تشغيل المشروع إن لزم الأمر.
وتكاليف كل ذلك على العميل، فكل ما عليك هو التخطيط وكتابة الكود، فقد تجد عملاء قاموا بشراء استضافة ودومين قبل البدء في المشروع أساسًا.
وفي بعض الأحيان قد يتم إنشاء مستودع خاص على GitHub لتطوير المشروع عليه، وخاصًة إذا كان هناك فريق عمل.
إذا كان لديك أسئلة أو استفسارات أخرى لا تتردد في السؤال.
وأنصحك بقراءة المقالات التالية.
دليلك الشامل إلى العمل الحر عبر الإنترنت
تعرف على فن التعامل مع العملاء في مجالات العمل الحر المختلفة
القسم الخاص بمقالات العمل الحر على منصة مستقل:
https://blog.mostaql.com/tag/نصائح-للمستقلين/

سأوضح لك Flexbox بشكل بسيط وسهل مع توضيح ذلك بالأكواد.
أولاً شرح Flexbox بشكل مختصر
في البداية Flexbox هي تقنية CSS تستخدم لتنسيق وترتيب العناصر داخل الصفحة. تم تصميم Flexbox لتسهيل تنسيق العناصر داخل العناصر الأساسية مثل العناصر المتداخلة، والأزواج، والأعمدة، والأرقام.
يمكن استخدام Flexbox لتنسيق العناصر على محور واحد أو عدة محاور في نفس الوقت. يتم تحديد ترتيب وموقع العناصر في Flexbox باستخدام خصائص CSS مثل display وflex-direction وjustify-content وalign-items وغيرها.
فيما يلي مثال بسيط على استخدام Flexbox لترتيب العناصر على محور واحد:
<div class="flex-container"> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> </div> <style> .flex-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .box1, .box2, .box3 { background-color: lightblue; padding: 10px; margin: 10px; flex: 1; } </style> في المثال السابق، تم استخدام Flexbox لترتيب العناصر على محور واحد (المحور الأفقي) باستخدام الخصائص display: flex و flex-direction: row. تم توزيع العناصر على المحور الأفقي باستخدام justify-content: space-between لترك فراغ بين الصناديق 1 و 2 و 3. تم تحديد موضع العناصر على المحور الرأسي باستخدام align-items: center.
لاحظ أن العناصر الثلاثة (box1 و box2 و box3) لديها خاصية flex: 1 التي تحدد نسبة الفضاء المتاح لكل صندوق داخل العنصر المرن. هذا يساعد على توزيع العناصر على المحور الأفقي بشكل متساوٍ.
أدوات لاستخدام وفهم flexbox بشكل سهل وبسيط
عليك باستخدام الموقع التالي إذا كنت تريد فهم خصائص flexbox حيث يعرض خصائص flexbox على هيئة صور متحركة لتبيان ماذا تفعل كل خاصية، فضع ذلك الموقع أمامك وأنت تستخدم flexbox وستجد نفسك قد فهمته بسهولة.
https://flexbox.malven.co/ وأيضًا هناك بعض ألعاب المتصفح التي غرضها تعليمك كيفية استخدام فليكس بوكس من خلال لعبة مسلية، وإليك بعضها:
https://flexboxfroggy.com/ https://codingfantasy.com/games/flexboxadventure شرح Flexbox بشكل مفصل
طريقة استخدام Flexbox تشمل العديد من الخصائص التي يمكن استخدامها لتنسيق العناصر وترتيبها في المساحة المتاحة. فيما يلي شرحًا لجميع الخصائص الخاصة ب Flexbox بالإضافة إلى أمثلة على استخدام كل منها.
1- display
خاصية display تحدد نوع عرض Flexbox. يمكن تعيينها إلى القيمة flex لعرض Flexbox. ويمكن تعيينها إلى inline-flex لعرض Flexbox على نفس سطر النص.
.flex-container { display: flex; } 2- flex-direction
خاصية flex-direction تحدد توجه العناصر داخل Flexbox. يمكن تعيينها إلى row لتوجيه العناصر أفقيًا، وإلى column لتوجيهها عموديًا. ويمكن استخدام row-reverse أو column-reverse لتوجيه العناصر بالاتجاه المعاكس.
.flex-container { display: flex; flex-direction: row; } 3- flex-wrap
خاصية flex-wrap تحدد ما إذا كانت العناصر في Flexbox يجب أن تنتقل إلى السطر التالي إذا كانت المساحة غير كافية. يمكن تعيينها إلى nowrap لعدم السماح بالتعبئة الزائدة، وإلى wrap للسماح بالتعبئة الزائدة وانتقال العناصر إلى السطر التالي.
.flex-container { display: flex; flex-wrap: wrap; } 4- justify-content
خاصية justify-content تحدد توزيع العناصر على محور Flexbox. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور، وإلى flex-end لتوزيعها على نهاية المحور، وإلى center لتوزيعها على وسط المحور، وإلى space-between لتوزيعها بتساوٍ على المحور، وإلى space-around لتوزيعها بالتساوي مع توفير مساحة إضافية حول كل عنصر.
.flex-container { display: flex; justify-content: center; } 5- align-items
خاصية align-items تحدد توزيع العناصر على محور عمودي متعامد على محور Flexbox. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور العمودي، وإلى flex-end لتوزيعها على نهاية المحور العمودي، وإلى center لتوزيعها على وسط المحور العمودي، وإلى baseline لتوزيعها على خط الأساس للنص، وإلى stretch لتوسيع العناصر لتملأ المساحة العمودية بأكملها.
.flex-container { display: flex; align-items: center; } 6- align-content
خاصية align-content تحدد توزيع العناصر الإضافية في الفراغ الإضافي على محور عمودي متعامد على محور Flexbox عند استخدام التعبئة الزائدة. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور العمودي، وإلى flex-end لتوزيعها على نهاية المحور العمودي، وإلى center لتوزيعها على وسط المحور العمودي، وإلى space-between لتوزيعها بتساوٍ على المحور، وإلى space-around لتوزيعها بالتساوي مع توفير مساحة إضافية حول كل عنصر، وإلى stretch لتوسيع العناصر لتملأ المساحة العمودية بأكملها.
.flex-container { display: flex; flex-wrap: wrap; align-content: center; } 7- flex-grow
خاصية flex-grow تحدد قدرة العنصر على التوسع في المساحة المتاحة. يمكن تعيينها إلى أي عدد صحيح (عادةً ما تستخدم قيم 0 و 1) ، حيث يتم توزيع المساحة المتاحة بالتساوي على جميع العناصر الذين يحملون هذه الخاصية بنسبة تناسبية مع قيمتها.
.flex-item { flex-grow: 1; } 8- flex-shrink
flex-shrink تحدد قدرة العنصر على الانكماش في حالة اضطراره لتقليص حجمه بسبب الفراغ المتاح لمجموعة Flexbox. يمكن تعيينها إلى أي عدد صحيح (عادةً ما تستخدم قيم 0 و 1) ، حيث يتم توزيع المساحة المتاحة بالتساوي على جميع العناصر الذين يحملون هذه الخاصية بنسبة تناسبية مع قيمتها. على سبيل المثال، عندما تقلل المساحة المتاحة، فإن العناصر التي تحمل القيم الأعلى ستتقلص بشكل أسرع من العناصر التي تحمل القيم الأقل.
.flex-item { flex-shrink: 1; } 9- flex-basis
خاصية flex-basis تحدد الحجم الأولي للعنصر قبل توزيع المساحة الإضافية المتاحة بين العناصر الموجودة في Flexbox. يمكن تعيينها إلى القيمة التي تعبر عن العرض أو الارتفاع، مثل 200px أو 50%. يمكن استخدام auto لتحديد حجم العنصر بناءً على حجم محتواه الفعلي.
.flex-item { flex-basis: 100px; } 10- flex
flex هي اختصار لثلاث خصائص flex-grow وflex-shrink وflex-basis بالترتيب. يمكن استخدامها بدلاً من تعيين الخصائص بشكل منفصل. يتم تحديد القيم المستخدمة في الاختصار كقيمة واحدة أو اثنين أو ثلاثة. على سبيل المثال، القيمة flex: 1 تحدد الخصائص flex-grow: 1 و flex-shrink: 1 و flex-basis: 0 للعنصر.
.flex-item { flex: 1 0 auto; } وبذلك إنتهينا من أهم الخصائص المستخدمة في Flexbox، والتي يمكن استخدامها لتنظيم وتحكم في توزيع العناصر وتحديد موقعها في الصفحة.
مصادر
 

من الجيد أنك تستخدم المتغيرات vriables في CSS من خلال :root ، لكنك استخدمتها فقط من أجل الخط، عود نفسك على استخدامها فيمكنك كمثال إنشاء متغير للون الرئيسي وكمثال:
:root { font-family: Arial, Helvetica, sans-serif; --bg-clr: #eee } .parent { background-color: var(--bg-clr) } حيث يستخدم :root لتعريف الخصائص العامة المتعلقة بالمستند، والتي يمكن الوصول إليها من جميع العناصر في المستند. عند تعريف خصائص في :root، يمكن الاستفادة منها في جميع أنحاء المستند، مما يوفر الوقت والجهد في الكتابة والصيانة.
بالإضافة أيضًا إلى ما ذكره أسامة، يمكن تحسين تباعد العناصر في عنصر الـ parent بحيث تبدو العناصر أكثر اتساقًا وتتناسب بشكل أفضل.
علاوة على ذلك ، يمكنك تحسين مظهر خطوط الأوسط في العناصر النصية ، مثل الـ or ، لجعلها أكثر وضوحًا.
بالنسبة للألوان أنصحك باستخدام https://www.happyhues.co/ فستتعلم منها الكثير بالنسبة لاستخدام ألوان متناسقة ومريحة للعين، وستجد بالموقع لوحات ألوان جاهزة مع شرح كيف يتم استخدام كل لون داخل موقعك.

من الرائع أن تكون متحمسًا لتعلم البرمجة وقضاء الكثير من الوقت فيها. ومع ذلك ، فإن الحفاظ على توازن صحي بين العمل والنشاط الاجتماعي والراحة الشخصية أمر مهم للغاية. لا ينصح بتضييع النشاطات الاجتماعية والراحة الشخصية كليًا ، بل يجب العمل على تحقيق توازن بينها وبين تعلم البرمجة.
ينبغي أن تقضي بعض الوقت للاسترخاء والراحة والنوم الكافي لتجنب الإجهاد الزائد والتعب. وبالإضافة إلى ذلك ، فمن المهم أن تنتبه إلى صحتك العقلية والجسدية ، بما في ذلك الاهتمام بنظام غذائي صحي وممارسة التمارين الرياضية.
بشكل عام ، من المستحسن أن تحاول تحقيق التوازن بين تعلم البرمجة والنشاطات الاجتماعية والراحة الشخصية. يمكنك تخصيص بعض الوقت لتعلم البرمجة والتطور فيها وفي نفس الوقت مخصص بعض الوقت للقيام بأنشطتك الاجتماعية والاسترخاء والترفيه عن نفسك.
ولكن سأحدثك بواقعية وصراحة، الأمر يتوقف على ظروفك الشخصية والمرحلة العمرية التي أنت فيها، فالبعض يفعل ما تفعله عندما يريد تغيير حياته للأفضل أو لديه شغف كبير بالبرمجة وأنا مريت بتلك المرحلة لا مشكلة في ذلك، لكن عليك أن تعلم ما الذي ستضحي به.
فهل الأمر يستحق التضحية؟ الإجابة تختلف إختلافًا شديدًا بين الجميع، فالبعض يقضي 10 ساعات يوميًا أو أكثر لتعلم البرمجة وأنا أفضل ذلك الأمر يستحق فعلاً التضحية من أجله فترة 6 شهور أو حتى سنة، فالمقابل هو تغيير حياتك للأفضل وإعطاء قيمة لحياتك بإمتلاك مهارات قيمة وأن تصبح ذا قيمة في سوق العمل، ولكن لا تنسى أن الآخرة هي الأهم فيجب الإهتمام بصلاتك وحق أهلك عليك.
دع أصحابك يتحدثون كيفما شاؤوا فلكل شخص حياته وأهدافه، حاوط نفسك بأشخاص لهم نفس الهدف من خلال جروبات على الإنترنت وذاكر معهم، ويمكنك الرجوع لأصحابك بعد سنة لا مشكلة.
وأنصحك بقراءة النقاش على السؤال التالي.
 

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

لحل هذه المشكلة، يجب التأكد من أن نوع البيانات المستلمة من الخادم يتوافق مع التنسيق المتوقع للبيانات، وأيضًا يجب التحقق من الشكل الذي تأخذه البيانات قبل استخدامها في التطبيق.
وعلى الرغم من أنه يبدو أن الخادم يرجع بيانات في شكل كائن (object)، إلا أنه يحتوي على مفتاح "data" الذي يتضمن مصفوفة من البيانات التي يمكن استخدامها. لذلك، يمكن استخدام الدالة map() بعد الوصول إلى مصفوفة البيانات في كائن الاستجابة.
لتطبيق الدالة map() على مصفوفة البيانات، يمكن تعديل الكود كما يلي:
const [data, setData] = useState([]); // Fetch users const fetchRandomUsers = () => { fetch('https://randomuser.me/api') .then(response => response.json()) .then(data => setData(data.results)); // اتصال بين مصفوفة النتائج في البيانات و state } useEffect(() => { fetchRandomUsers(); }, []); // تطبيق الدالة map() على مصفوفة البيانات return ( <div> {data.map(user => ( <div key={user.login.uuid}> <img src={user.picture.medium} alt={user.name.first} /> <p>{user.name.first} {user.name.last}</p> </div> ))} </div> ); في هذا المثال، تم تعديل setData() لاستخدام مفتاح النتائج (results) الموجود في البيانات التي تم استردادها من الخادم. وبعد ذلك، يتم تطبيق الدالة map() على مصفوفة البيانات لإنشاء قائمة المستخدمين. يجب تذكير بوضع الخاصية الفريدة (key) لكل عنصر في المصفوفة، والتي تساعد في تحديث العناصر بشكل صحيح في React.

عليكم السلام،
 يتم استخدام null و undefined بطرق مختلفة ولأسباب مختلفة في JavaScript.
حيث يتم استخدام undefined عادة عندما تريد الإشارة إلى متغير لم يتم تعيين قيمة له. على سبيل المثال، إذا كنت تعرف متغيرًا بدون قيمة محددة، فيمكنك تعيين قيمة undefined له.
من ناحية أخرى، يتم استخدام null عادة لإشارة إلى أن المتغير لا يحتوي على أي قيمة في الوقت الحالي. على سبيل المثال، يمكن أن تعيين قيمة null إلى متغير بعدما تم استخدامه في وقت ما.
يمكن استخدام undefined و null معًا لإشارة إلى أن المتغير لم يتم تعيين أي قيمة له، ولا يحتوي على أي قيمة في الوقت الحالي.
وسأشرح لك بشكل أكثر تفصيلاً.
تستخدم قيمة undefined عادة في الحالات التالية:
عند تعريف متغير جديد ولم يتم تعيين أي قيمة له بعد، فإن قيمته تكون undefined بشكل افتراضي. عندما يتم إرجاع قيمة undefined من دالة أو طريقة في حالة عدم وجود قيمة للإرجاع. عندما تتم مقارنة متغير مع undefined للتحقق مما إذا كان يحتوي على قيمة أو لا. استخدام قيمة null
غالباً ما تستخدم لإعطاء قيمة فارغة لمتغير معين عندما يكون من المهم تفريقه عن القيمة undefined. على سبيل المثال، عندما يتم تحميل بيانات من خادم ولا يوجد بيانات متاحة للعرض، يمكن استخدام null بدلاً من undefined لتفريق الحالة الفارغة عن حالة عدم تعيين القيمة.
لاحظ أن القيمتين لهما استخدامات مختلفة، وغالبًا ما تختلف تبعًا للحالة التي تواجهها. لذلك، يجب عليك اختيار القيمة المناسبة بناءً على الحالة التي تواجهها.
ولاحظ أيضًا أن كلا القيمتين تعطي قيمة false عندما تستخدم في ظروف معينة مثل قياس قيمة متغير boolean، لكن الاستخدام الرئيسي لهما مختلف ولا ينبغي الخلط بينهما.
 بعض الأمثلة التوضيحية التي تظهر كيفية استخدام null و undefined في JavaScript:
مثال على undefined:
let x; // تعريف المتغير دون تعيين قيمة if (x === undefined) { console.log("x is undefined"); // سيتم طباعة هذه الرسالة لأن x ليس له قيمة } مثال على null:
let y = null; // تعريف المتغير وتعيينه قيمة null if (y === null) { console.log("y is null"); // سيتم طباعة هذه الرسالة لأن y تم تعيينها بقيمة null } مثال يستخدم كلا القيمتين:
let z; // تعريف المتغير دون تعيين قيمة z = null; // تعيين قيمة null للمتغير if (z === null || z === undefined) { console.log("z is null or undefined"); // سيتم طباعة هذه الرسالة لأن z ليس له قيمة أو تم تعيينها بقيمة null } لاحظ أن القيمتين تحددان بشكل مختلف في JavaScript ويمكن استخدام كلا القيمتين بطرق مختلفة لتحقيق مختلف الأغراض.
https://wiki.hsoub.com/JavaScript/undefined
https://wiki.hsoub.com/JavaScript/null

يمكن توسيط عنصر div باستخدام العديد من الطرق المختلفة في CSS. ومن بين هذه الطرق:
1- استخدام margin: auto
يمكن توسيط العنصر div بوضع margin: auto له. يجب على العنصر div أن يكون له عرض محدد ويجب أن يكون محيطه الخارجي مفعلًا.
مثال:
HTML:
<div class="container"> <p>Hello, World!</p> </div> CSS:
.container { width: 50%; margin: auto; } 2- استخدام flexbox
يمكن استخدام Flexbox لتوسيط عنصر div. يجب على العنصر الرئيسي (parent element) أن يكون له display: flex ويجب أن يستخدم justify-content: center و align-items: center.
مثال:
HTML:
<div class="container"> <p>Hello, World!</p> </div> CSS:
.container { display: flex; justify-content: center; align-items: center; height: 100vh; } 3- استخدام grid
يمكن استخدام CSS grid لتوسيط عنصر div. يجب على العنصر الرئيسي (parent element) أن يكون له display: grid ويجب على العنصر الفرعي (child element) أن يكون له grid-column و grid-row محدد.
مثال:
HTML:
<div class="container"> <p>Hello, World!</p> </div> CSS:
.container { display: grid; place-items: center; height: 100vh; } .container p { grid-column: 1 / -1; grid-row: 1 / -1; text-align: center; } يجب تحديد height للعنصر الرئيسي في حال استخدام Flexbox أو Grid، حتى يتم توسيط العنصر الفرعي بشكل صحيح. يمكن استخدام قيمة نسبية مثل vh لضمان أن الارتفاع يمتد عبر جميع شاشات العرض بشكل صحيح.
 

المشكلة أن الكود الخاص بك يعتمد على الحالة العامة isSelected في المكون الأساسي App.js للتحقق مما إذا كان المقعد المختار يجب أن يتغير إلى الحالة المحددة أم لا. وعند النقر على أي مقعد، تم تغيير الحالة العامة isSelected في App.js، مما يؤدي إلى تحديث كافة المقاعد في الصف بناءً على الحالة العامة الجديدة، وليس المقعد الذي تم النقر عليه فقط.
لتجنب هذه المشكلة، تم تعديل الكود بالأسفل لإنشاء حالة جديدة في كل مكون فرعي Row.js للتحقق من ما إذا كان المقعد المختار يجب أن يتغير إلى الحالة المحددة أم لا، وبالتالي يمكن تحديث حالة مقعد واحد دون تحديث كافة المقاعد في الصف.
يمكنك إضافة خاصية isSelected إلى عنصر النقر في مكانه لتحديد حالته، ثم استخدامها في تعيين الكلاس المناسب لهذا العنصر فقط. يمكن تحقيق ذلك من خلال تغيير الدالة handleClick في App.js على النحو التالي:
const handleClick = (index) => { setSelectedIndex(index) } ثم في Row.js، يمكن تحديث الكلاس المستخدم بناءً على قيمة isSelected المستقبلة من الأب:
function Row({id,isSelected,handleClick,selectedIndex}) { return ( <div className='row'> { [...Array(8)].map((_,index)=>( <div className={ (id===1 && index===3) || (id===1 && index===4) || (id===2 && index===6) || (id===2 && index===7) || (id===4 && index===3) || (id===4 && index===4) || (id===5 && index===4) || (id===5 && index===5) || (id===5 && index===6) ? 'seat occupied' : selectedIndex === index ? 'seat selected' : 'seat' } key={index} onClick={() => handleClick(index)} > <div></div> </div> )) } </div> ) }