Mustafa Suleiman

تأكد من كتابة المسار بشكل صحيح: import {Butnave} from "src/Buttons/Butnave.js"

الطريقة صحيحة وتستطيع استيراده بنفس الاسم أو بأي اسم آخر طالما أنك قمت بتصديره عن طريق export default. وسأشرح لك بالتفصيل: لتصدير مكون (component) في React، باستطاعتك استخدام تعبير export قبل تعريف المكون، وهناك عدة طرق لتصدير المكونات في React، وفيما يلي سأقدم لك ثلاث طرق شائعة. 1- تصدير المكون باستخدام export المباشر: حيث تستخدم تعبير export قبل تعريف المكون بشكل مباشر. export function MyComponent() { // اكتب رمز JSX ومنطق المكون هنا } عند استخدام هذا النمط، قم باستيراد المكون في ملف آخر باستخدام import كالتالي ويجب أن تقوم بكتابة نفس الاسم وبداخل قوس معقوف {}: import { MyComponent } from 'MyComponent'; 2- تصدير المكون باستخدام export في نهاية الملف: قم تعريف المكون كما هو، ثم استخدام تعبير export في نهاية الملف لتصدير المكون. function MyComponent() { // اكتب رمز JSX ومنطق المكون هنا } export default MyComponent; وعليك باستيراد المكون في ملف آخر باستخدام import كالتالي: import MyComponent from 'test/MyComponent'; وبالطريقة السابقة تستطيع كتابة أي اسم تريده عند الاستيراد حيث أنك قمت بتصدير المكون عن طريق export default، وحتى عند استخدام الأقواس تستطيع تغيير الاسم أيضًا: import { أي اسم هنا } from 'MyComponent'; لكن الطرق الأخرى يجب كتابة نفس الاسم وداخل أقواس. 3- تصدير المكون باستخدام export عند الحاجة: تستطيع تعريف المكون كما هو، ثم استخدام تعبير export بشكل منفصل لتصدير المكون عند الحاجة. function MyComponent() { // اكتب رمز JSX ومنطق المكون هنا } // يمكن تصدير المكون عند الحاجة باستخدام الكلمة المفتاحية export export { MyComponent }; ثم استيراد المكون في ملف آخر باستخدام import كالتالي: import { MyComponent } from 'MyComponent'; وفي كل الحالات يجب كتابة المسار الصحيح للملف الذي يحتوي على المكون الذي تريد تصديره.

عليك إذن التحدث للدعم للفني الخاص بالاستضافة لمعرفة سبب المشكلة.

قم بتسجيل الدخول إلى لوحة cPanel وستجد قسم خاص بالـ Email، وبه خيار باسم Email Deliverability. وستجد اسم الدومين الخاص بك ويجب أن يكون بجانبه حالة Valid كالتالي: وإذا كانت غير ذلك سيظهر لك حالة Problems Exist ووجود مشكلة في DKIM AND SPF أو مشكلة أخرى. وما أنت بحاجة إلى فعله هو الضغط على manage ثم ستجد زر أسفل إعدادات DKIM باسم Install the suggested Record قم بالضغط عليه. وأيضًا ستجد زر بأسفل إعدادات SPF باسم Install the suggested Record قم بالضغط عليه. وفي حال كنت تستخدم Cloudflare فعليك بوضع إعدادات الـ DKIM وهما name و Value وضعهم في حقل من نوع TXT في إعدادات الـ DNS في Cloudflare، حيث ستضغط على Add record ثم تختار حقل من نوع TXT وذلك من القائمة المنسدلة Type وستضع name في حقل name و value في حقل content ثم اضغط save وكرر نفس الأمر بالنسبة لإعدادت SPF. والآن توجه إلى صفحة Email Deliverability مرة أخرى والتي ستجد بها الدومين الخاص بموقعك، ثم بالأعلى ستجد خيار باسم list Domains اضغط عليه وفي حالة استمرار المشكلة التحقق من سجلات MX: تأكد من أن سجلات MX (Mail Exchanger) الخاصة بنطاق البريد الإلكتروني الخاص بك مكونة بشكل صحيح وتشير إلى الخادم الصحيح، وستحتاج إلى التحقق من هذا مع مزود خدمة الاستضافة الخاص بك.

لتفادي كتابة اسم الفرع بشكل خاطيء، نفذ الأمر التالي: git branch -M main وسيتم إعادة تسمية الفرع الحالي إلى main. والآن عليك بإضافة الملفات والتغييرات لتجهيزها للرفع عن طريق الأمر التالي: git add . بعد ذلك نقوم بعمل commit من خلال الأمر التالي: git commit -m "upload files" والآن أضف رابط المستودع الخاص بك عن طريق الأمر التالي: git remote add origin https://github.com/ اسم المستخدم/repoName.git وانتبه إلى أنه يجب استبدال الرابط برابط المستودع الخاص بك على GitHub. والآن لنقم بعمل دفع أو رفع للملفات والتغييرات عن طريق الأمر التالي: git push -u origin main وأنصحك بمشاهدة الفيديو التالي:

أولاً عليك تثبيت برنامج OpenSSH على نظام Manjaro الأساسي إذا لم يتم تثبيته بالفعل، حيث يُعتبر OpenSSH البرنامج الذي يتيح لك إنشاء اتصال SSH بين الأجهزة، كالتالي: افتح نافذة ترمينال في نظام Manjaro الأساسي. قم بتحديث مستودعات الحزم بتشغيل الأمر التالي: sudo pacman -Sy 3. بعد ذلك، استخدم الأمر التالي لتثبيت حزمة OpenSSH: sudo pacman -S openssh 4. سيطلب منك كلمة المرور الخاصة بك للمتابعة مع عملية التثبيت، فقم بإدخال كلمة المرور وانتظر حتى يتم تثبيت الحزمة. والآن عليك بالتأكد من أن حاويتك تعمل وقيد التشغيل على Docker، من خلال الأمر docker ps لعرض الحاويات التي تعمل حاليًا. وبعد الحصول على اسم أو رقم الحاوية التي تحتوي على Debian 11 باستخدام الأمر docker ps، قم بتنفيذ الأمر التالي للحصول على عنوان IP للحاوية: docker inspect اسم الحاوية | grep "IPAddress" وستظهر لك نتيجة تحتوي على عنوان IP للحاوية، فقم بتسجيل هذا العنوان للاستخدام في الخطوة التالية. وفي نظام Manjaro الأساسي، عليك بفتح نافذة Terminal جديدة واستخدم الأمر التالي للاتصال بحاوية Docker عبر SSH: ssh user@عنوان IP للحاوية حيث "user" هو اسم المستخدم الذي ترغب في استخدامه للاتصال بالحاوية، و"<عنوان IP للحاوية>" هو العنوان الذي حصلت عليه في الخطوة السابقة. ,إذا كنت تستخدم المستخدم الجذر في الحاوية، tعليك استخدام الأمر sudo مع الأمر SSH للوصول إلى صلاحيات الجذر: ssh root@عنوان IP للحاوية

يوجد مشكلة في حساب الهوامش (margins) أثناء إنشاء العناصر الفرعية (الأبناء) في الـ CSS. الـ width بنسبة 100٪ لا يأخذ في الاعتبار الهوامش الخاصة بالعنصر الأب. حيث تم تعيين عرض العنصر الأول باستخدام الـ 100٪، ولكن مع خصم 30 بكسل (15 بكسل من الهامش الأيسر و 15 بكسل من الهامش الأيمن الخاص بالعنصر الأب "first"). ولكن، كما ذكرت سابقًا، الهامش الخاص بالأب لا يحسب مع الـ 100٪، مما يعني أن الكود السابق يقوم بحذف 45 بكسل من العرض الكلي. لحل المشكلة، يجب طرح الـ 15 بكسل الخاصة بالعنصر الفرعي نفسه من العرض كالتالي: .first div { width: calc(100% - 15px); text-align: center; } وعند تعديل العناصر الأخرى وحذف الـ 15 بكسل الإضافية من كل عنصر، قد تلاحظ وجود 1 بكسل غير مرئي يظهر من العدم، فسبب سبب هذه المشكلة هو أن المتصفح يعامل العناصر كأنها نصوص (inline)، وليس كعناصر مستقلة (inline-block) لذلك قم بلصق العناصر بجانب بعضها كالتالي: <div class="parent"> <div class="first c"> <div>full width</div> </div> <div class="second c"> <div>1/3</div><div>1/3</div><div>1/3</div> </div> </div> وإليك كود CSS بعد تصحيحه: body { margin: 0px; padding: 0px; } .parent { width: 800px; height: 500px; background-color: rgb(236, 232, 232); position: absolute; top: 50%; margin-top: calc(500px / -2); left: 50%; margin-left: calc(800px / -2); } .parent .c { display: block; margin: 15px 0; margin-right: 15px; } .c div { height: calc((100% - (15px * 4)) / 4); text-align: center; display: inline-block; background-color: #adacac; margin-left: 15px; /* margin-right: ; */ } .first div { width: calc(100% - (15px)); text-align: center; } .second div { width: calc((100% - (15px * 3)) / 3); } .third div { width: calc((100% - (15px * 2)) / 2); } .fourth div { width: calc((100% - (15px * 4)) / 4); }

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

دالة findIndex في جافاسكريبت تُستخدم للبحث عن عنصر محدد ضمن مصفوفة (Array) وإرجاع الفهرس (index) الأول الذي يطابق الشرط المحدد، وإذا لم يتم العثور على عنصر يطابق الشرط، فإن الدالة تعيد قيمة -1 أي false. والكود item => item > 70 هو دالة سهمية (arrow function) يتم استخدامها كشرط في findIndex، وذلك الشرط يحدد أن الدالة تبحث عن عنصر في المصفوفة numbers الذي يكون قيمته أكبر من 70. فأنت استخدمت findIndex للعثور على أول عنصر في المصفوفة numbers الذي يكون قيمته أكبر من 70، وإذا تم العثور على عنصر مطابق، فإن الدالة findIndex ستعيد الفهرس (index) لهذا العنصر، وسيتم تخزينه في المتغير index. إذا لم يتم العثور على عنصر يطابق الشرط، فسيتم تعيين قيمة -1 للمتغير index. أي أن item تمثل كل عنصر في المصفوفة في كل حلقة تكرار. وهناك معاملات أخرى غير item في دالة callback في findIndex ، وللتوضيح انظر الكود التالي: const numbers = [10, 20, 30, 40, 50]; const index = numbers.findIndex((element, index, array) => { console.log(`Element: ${element}`); console.log(`Index: ${index}`); console.log(`Array: ${array}`); console.log('-------------------'); return element > 30; }); console.log(`Index of first element greater than 30: ${index}`); element: يمثل العنصر الحالي الذي يتم معالجته في المصفوفة أثناء تنفيذ findIndex(). index: يمثل الفهرس (index) للعنصر الحالي في المصفوفة أثناء تنفيذ findIndex(). array: يمثل المصفوفة التي تم استدعاء findIndex() عليها. شرح findIndex()‎ من موسوعة حسوب

حاول تبسيط الأمور ولا تعقدها على نفسك، قم باستخدام برامج لتسجيل الشاشة مثل OBS وهو مجاني لكن لا يحتوي على خاصية عمل مونتاج، بينما يوجد Camtasia studio وهو غير مجاني وهو جيد لتسجيل الشاشة وواحد من أفضل برامج تسجيل وعمل الشروحات وعمل مونتاج في نفس البرنامج. وهناك أيضًا Free cam لتسجيل الشاشة بشكل بسيط وسهل، ويحتوي على خاصية عمل مونتاج لكن بشكل بسيط وليس مثل Camtasia studio. أيضًا يوجد Ezvid وهو برنامج مجاني لتسجيل الشاشة وعمل الشروحات وعمل مونتاج بسيط مثل Free cam. وتستطيع كتابة سكريبت لما ستقوم بشرحه، أو جرب التسجيل مباشرًة لكن اكتب نقاط لما يتم شرحه في الفيديو وتحدث واشرح كل نقطة. وبخصوص شرح الجافا، فبالطبع هي مطلوبة ويتم دفع مبالغ كبيرة لمبرمجي جافا فهى لغة عملاقة، وأيضًا مؤخرًا تم الإعلان عن الإصدار 21 من جافا ويحمل تحسينات كبيرة إندهش من الكثير وهي في الطريق الصحيح لتسهيل استخدام وتعلم اللغة وتقليل كتابة الكود قليلاً. ونصيحتي إليك، قدم ما لديك طالما أنك تحاول إفادة الناس، وبشكل بسيط بدون تعقيد حتى تتمكن من الاستمرار في البداية.

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

كليهما أدوات تطوير تساعد في تنظيم وتحسين عملية تطوير تطبيقات الويب، لكن يختلفان في العديد من الجوانب ويستخدمان لأغراض مختلفة وتستطيع استخدام كلاهما في نفس المشروع. وإليك الفرق بينهما. 1- الغرض الأساسي: Gulp.js: أداة لإدارة مهام التطوير والتشغيل الأوتوماتيكي للمشروع، وتستخدم Gulp.js لتنفيذ مهام متكررة مثل تجميع الملفات وتحويلها وضغطها وتحسينها. Vite: أداة لتطوير سريعة ومباشرة تستخدم لتجربة وتطوير تطبيقات الويب بشكل فعال، وتركز Vite على توفير بيئة تطوير سريعة التحميل (dev server) مع إعادة تحميل فوري (hot reloading) لتجربة تغييرات الكود على الفور. 2- نظام البناء: Gulp.js: تعتمد على تحديد المهام (task-based) وتشغيلها بتسلسل معين، وتستخدم تدفق المهام (task stream) لتنفيذ سلسلة خطوات للتحويل والتجميع والضغط والتحسين. Vite: تعتمد على نظام البناء السريع (esbuild) والذي يوفر تجميع سريع للملفات باستخدام ES Modules، وتستخدم Vite نموذج مستند الويب (WebAssembly) لبناء الوحدات بشكل فعال. 3- الأداء: Gulp.js: تعد أداة قوية ومتعددة الاستخدامات وتعتمد على مهام تشغيل البرنامج النصي. ومع ذلك، فإنه قد يعاني من بطء في عملية التجميع والتحويل عند التعامل مع مشاريع كبيرة. Vite: أسرع بكثير في عملية البناء وتحميل المكونات على الخادم التطويري، حيث يعتمد على تجميع سريع وتجاوب فوري لتغييرات الكود. 4- تكامل المكتبات: Gulp.js: يمكن استخدام Gulp.js مع مجموعة واسعة من المكتبات والإضافات المختلفة التي تعزز إمكانيات تطوير الويب. Vite: متكاملة بشكل أفضل مع بعض المكتبات والأطر العمل الحديثة مثل Vue.js وReact وPreact والتي تستفيد من قدراته في تطوير الواجهة الأمامية. أي ببساطة، إذا كنت ترغب في أتمتة مهام مثل تصغير الحجم للكود (minification)، التجميع (compilation)، اختبار الوحدات (unit testing)، فحص الأخطاء البرمجية (linting)، ومهام مماثلة، فاستخدم Gulp.js. بينما Vite ومثيلاتها، توفر بيئة تطوير سريعة التحميل (dev server)، وهذا يعني أنه يتم تجهيز وتحميل المكونات فورًا عند التطوير، مما يسمح لك برؤية التغييرات الخاصة بك على الفور دون الحاجة إلى إعادة تحميل الصفحة، مما يوفر وقتًا قيمًا في عملية التطوير. أيضًا دعم قوي للموديولز (Modules) الحديثة مثل ES Modules، وتستطيع الاستفادة من هذا الدعم لتجميع وتحويل ملفات JavaScript بسرعة كبيرة، مما يؤدي إلى تحميل أسرع لتطبيقك. وVite وغيرها من بيئات التطوير مصممة خصيصًا للتكامل مع الأطر العمل الحديثة مثل Vue.js وReact و Preact وغيرها، وتتيح لك Vite الاستفادة من قدرات تلك الأطر العمل بشكل أفضل، مثل تجميع المكونات وتحويلها وتحميلها بشكل فعال. وبشكل خاص تعتبر Vite أحد أدوات التطوير السريعة والمباشرة التي توفر تجربة تطوير سلسة وأداءًا عاليًا، حيث تعتمد Vite على تقنيات مثل تجميع سريع باستخدام ES Modules والتحميل اللحظي للمكونات لتحقيق أداء ممتاز في تطبيقات الويب. والصحيح هو مقارنة Vite مع webpack مثلاً أو Laravel Mix وقد تم شرح ذلك هنا بشكل وافي:

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

سأوضح لك طريقة عمل الدوال CEIL و REPLACE في MySQL مع أمثلة لتفهم الأمر: 1- دالة CEIL تعمل دالة CEIL على تقريب العدد العشري إلى الأعلى (أكبر عدد صحيح) المقابل له. طريقة كتابة الدالة: CEIL(x) حيث x هو العدد الذي ترغب في تقريبه للأعلى. مثال: لنفترض أن لدينا جدول يحتوي على عمود يحتوي على الأرقام العشرية التالية: +-------+ | Value | +-------+ | 2.4 | | 3.1 | | 5.7 | +-------+ وإذا أردنا تطبيق دالة CEIL على هذا الجدول، ستكون النتيجة كالتالي: +-------+--------+ | Value | Result | +-------+--------+ | 2.4 | 3 | | 3.1 | 4 | | 5.7 | 6 | +-------+--------+ لذلك، الدالة تقوم بتقريب الأعداد العشرية للأعلى لأقرب عدد صحيح. 2- دالة REPLACE تقوم دالة REPLACE بالبحث عن واستبدال جميع حالات ظهور نص محدد داخل سلسلة النصوص. طريقة كتابة الدالة: REPLACE(str, find_string, replace_with) حيث: str: السلسلة التي ترغب في البحث واستبدال النص فيها. find_string: النص الذي ترغب في البحث عنه. replace_with: النص الذي ترغب في استبدال find_string به. مثال: لنفترض أن لدينا جدول يحتوي على عمود يحتوي على السلاسل التالية: +-------------------+ | Name | +-------------------+ | John Doe | | Jane Doe | | John Smith | +-------------------+ إذا أردنا استخدام دالة REPLACE لاستبدال "John" بـ "Adam"، ستكون النتيجة كالتالي: +-------------------+ | Name | +-------------------+ | Adam Doe | | Jane Doe | | Adam Smith | +-------------------+ لذلك، الدالة تقوم بالبحث عن النص المحدد واستبداله بالنص الجديد في جميع حالات الظهور.

أولاً حاول إعادة تعيين كلمة المرور من الرابط التالي: https://www.linkedin.com/uas/request-password-reset وإذا لم يفلح الأمر، ععليك بعمل إبلاغ هنا من خلال رابط محدد وبه استمارة للإبلاغ عن Compromised Account أي حساب LinkedIn تم تهكيره. https://www.linkedin.com/help/linkedin/ask/TS-RHA وستقوم بكتابة الاسم الأول First name من الحساب ثم الاسم الثاني Last name ثم كتابة الإيميل الخاص بالحساب، ثم رابط حسابك على لينكيدإن وتستطيع البحث عن حسابك في خانة البحث لتتمكن من إيجاد الرابط. وفي خانة التفاصيل، قم بكتابة الأمر بالتفصيل، وتستطيع الكتابة بالعربية ثم ترجمة النص على جوجل ترجمة مثلاً. والآن عليك بالإنتظار لحين الرد عليك.

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

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

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

عند بناء صفحات الويب باستخدام HTML، يُستخدم عنصر <div> كثيرًا لتحديد وتجميع مجموعات من العناصر المرئية في الصفحة وتنظيمها في بنية منظمة، وتعتبر <div> هي واحدة من عناصر التنسيق الأساسية في HTML ولا تحمل أي معنى خاص بذاته. وتُستخدم عناصر <div> بشكل رئيسي لتقسيم الصفحة إلى أجزاء منطقية، مما يتيح تنظيم المحتوى وتطبيق تنسيقات CSS وتعيين الأنماط والخصائص عليها، وباسطتاعتك استخدام <div> لإنشاء عناصر مثل أطر الصفحة (Layouts)، ومربعات النص، وأزرار، ومجموعات الصور، والقوائم، والأقسام، والفواصل، وغيرها الكثير. حيث يسمح لك عنصر <div> بتحقيق تنظيم وتصميم أفضل للصفحة وسهولة تعديل التنسيقات والأنماط والخصائص الخاصة بالعناصر الموجودة داخله، وأيضًا استخدام CSS وJavaScript لتحقيق تفاعلات وتأثيرات مختلفة على العناصر داخل <div>. ولكن لا تستخدمه بكثرة وحاول استخدام عناصر الـ Semantic HTML بقدر استطاعتك مثل <section> أو <article> أو <header> أو <footer> والتي توفر لك هيكلية ومعنى أكثر وضوحًا للمحتوى. وإليك مثال لاستخدام div وأيضًا استخدام CSS للتنسيق: <!DOCTYPE html> <html> <head> <title>مثال باستخدام عنصر div</title> <style> .container { background-color: lightblue; padding: 20px; } .header { background-color: yellow; padding: 10px; } .content { background-color: white; padding: 10px; } .footer { background-color: lightgray; padding: 10px; } </style> </head> <body> <div class="container"> <div class="header"> <h1>عنوان الصفحة</h1> </div> <div class="content"> <p>محتوى الصفحة يتم وضعه هنا.</p> </div> <div class="footer"> <p>حقوق النشر &copy; 2023</p> </div> </div> </body> </html> فبتعريف عنصر <div> بواسطة الصنف "container" واستخدامه كعنصر يحتوي على عناصر <div> أخرى وتمميزها بكلاسات "header"، "content"، و "footer" من أجل تنسيقها بواسطة CSS. تمكنت من تسيق أجزاء مختلفة من الصفحة وتخصيص كل عنصر <div>، مما يسمح بتقسيم الصفحة إلى أجزاء منفصلة وتنظيمها بشكل مناسب. وأنصحك بقراءة التالي:

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

أنت قمت برفع ملف HTML فقط، ويجب رفع مجلد المشروع لديك بالكامل لتفقد المشكلة، اضغط المجلد من الخارج ثم ارفعه هنا. وبخصوص الـ Padding والـ Margin حاول استخدام خاصية box-sizing بقيمة border-box لجميع العناصر كالتالي: * { box-sizing: border-box; } وبخصوص توسيط النص في المنتصف بشكل عمودي وأفقي أيضًا في CSS، فهناك عدة طرق ومنها: 1- توسيط النص باستخدام Flexbox .container { display: flex; justify-content: center; /* يُوسِّط العناصر عموديًا */ align-items: center; /* يُوسِّط العناصر أفقيًا */ height: 100vh; /* يُحدد ارتفاع العنصر الأب بناءً على ارتفاع الشاشة */ } .text { text-align: center; /* يُوسِّط النص أفقيًا */ } 2- توسيط النص باستخدام Grid .container { display: grid; place-items: center; /* يُوسِّط العناصر عموديًا وأفقيًا */ height: 100vh; /* يُحدد ارتفاع العنصر الأب بناءً على ارتفاع الشاشة */ } .text { text-align: center; /* يُوسِّط النص أفقيًا */ } 3- استخدام خاصية line-height .container { display: flex; justify-content: center; align-items: center; height: 300px; /* ارتفاع العنصر الأب */ border: 1px solid black; /* توضيح الحدود للعرض */ } .text { line-height: 300px; /* ارتفاع العنصر الأب */ text-align: center; } والطريقة الثالثة بحاجة إلى بعض الشرح حيث استخدمت display: flex لعنصر الأب، وذلك لتطبيق تخطيط Flexbox. ثم استخدمت justify-content: center و align-items: center لوسط العنصر عموديًا وأفقيًا داخل العنصر الأب. ثم تحديد line-height: 300px لتعيين ارتفاع الخط بقيمة مساوية لارتفاع العنصر الأب، مما يوسط النص داخله عموديًا. وأخيرًا، تم استخدام text-align: center لوسط النص أفقيًا داخل العنصر الأب.

بخصوص أكواد sass جرب تعديل الكود بالشكل التالي: .card-news-details { display: flex; justify-content: center; align-items: center; padding: 0 !important; position: relative; left: -50%; /* الوضعية الابتدائية: يتم نقلها إلى اليسار */ opacity: 1; transition: left 1s, opacity 1s; &.show { left: 0; /* الوضعية النهائية: يتم نقلها إلى الوسط */ opacity: 1; } .card-news-card { width: 80%; position: relative; .img-active_profile { width: 100%; /* العرض الابتدائي: 100٪ */ height: 600px; border-top-left-radius: $radius; border-bottom-left-radius: $radius; max-height: 600px; object-fit: cover; box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.408); opacity: 1; transition: width 1s, opacity 1s; &.show_img { width: 40%; /* العرض النهائي: 40٪ */ opacity: 1; } } .title_slide-full { position: absolute; top: 15px; left: 45%; font-size: 45px; opacity: 0; /* مخفية في البداية */ transition: all 2s; &.show_title { opacity: 1; /* إظهار العنوان */ } } } } والكود يعمل على جعل الصورة الكبيرة المرغوبة تنتقل من -50٪ left إلى left: 0٪، وعندما تكون الصورة في الوضعية left: 0٪، ستصبح عرض الصورة 100٪ والعنوان مخفيًا، ثم عندما تتقلص الصورة إلى عرض 40٪، سيظهر العنوان.

ليست بديهية حيث يمكن إنشاء مشاريع ويب بلغات أخرى، بل عليك ذكر كل اللغات التي استخدمتها في المشروع، وبخصوص المكتبات مثل Bootstrap وAxios فاذكرهم لا مشكلة في ذلك، وتستطيع ذكر كافة المكتبات التي استخدمتها، لكن من الأفضل ذكر الهام منها والأساسي بالنسبة للمشروع. وبالنسبة للـ API فهل من سبب يدفعك لذكر ذلك؟ تستطيع كتابة وصف للمشروع في README وسيتم فهم أن المشروع يعتمد على API في تنفيذ أمر معين، وذكر أنك تستخدم Axios يدل بالتبعية على أن المشروع يستخدم API، وإذا كنت تقصد أنه يتم الإعتماد على API خارجي لتوفير المعلومات فاذكر ذلك. ببساطة ملف README.md يوضح وصف للمشروع بشكل مختصر وواضح، بحيث يفهم القارئ وظيفة المشروع الخاص بك، ثم يعرض المميزات Features ثم صورة توضيحية لو أمكن Screenshots، ثم الجزء الخاص بشرح إعداد المشروع، ثم الجزء الخاص بشرح طريقة استخدام المشروع إن دعت الحاجة إلى ذلك، ثم الجزء الخاصة بالتقنيات المستخدمة Tech Used. وهناك العديد من المواقع التي توفر عليك كتابة ملف readme وقد تم توضيحها هنا:

تم شرح الأمر في النقاشات والدروس التالية:

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