Mustafa Suleiman

محاولة جيدة وأعتقد أنك تعلمت منها بعض الأمور، عامًة في الإصدار 12 تم إتاحة Custom Community Laravel Starter Kits بمعنى  Starter Kits تم تطويرها من قبل مبرمجين آخرين في مجتمع لارافل، ولم تعد الخيارات محصورة في الـ Starter Kits المقدمة من قبل لارافل فقط.
مع الوقت سيتم إتاحة الكثير من الـ Starter Kits المطورة من قبل مبرمجين آخرين، وحاليًا يوجد بالفعل مجموعة بدء تدعم RTL ها هي:
https://github.com/AryanpAzadeh/RTL-blade-starter-kit الشرح الموجود في المستودع بالفارسية قم بترجمته من خلال جوجل ترجمة لتفهم المميزات المتاحة

من الأفضل محاولة تنفيذه لتحقيق استفادة، من خلال Visual Studio اختاري Create a new project وابحثي عن Windows Forms App (.NET Framework) أو Windows Forms App في حال تستخدمين .NET Core
ثم اختاري اختر C# كلغة البرمجة، وتسمية المشروع واضغطي على Create.
ستظهر لكِ نافذة تحتوي على نموذج فارغ Form، وهو الواجهة التي سنضيف إليها الزر، ثم في نافذة Solution Explorer على الجانب الأيمن، افتحي ملف Form1.cs.
وفي وضع التصميم Design View، انقر يبزر الفأرة الأيمن على النموذج واختاري Properties وبها:
غيّري Text إلى Resume Button Example ليظهر كعنوان النافذة ثم Size إلى 300 عرض × 200 ارتفاع ليكون حجم النافذة مناسبًا ثم StartPosition إلى CenterScreen لجعل النافذة تظهر في المنتصف وفي في شريط الأدوات Toolbox على الجانب الأيسر، ابحثي عن Button واسحبيه إلى النموذج، ثم ضعي الزر في مكان مناسب وليكن وسط النموذج تقريبًا.
بعد ذلك ستكتبي الكود، انقري بزر الفأرة الأيمن على الزر في وضع التصميم واختاري View Code، أو افتحي ملف Form1.cs مباشرة، ستجدي كود يبدأ بـ public partial class Form1 : Form.
قبل أي دالة قومي بكتابة المتغيرات التالية:
تخزين العرض الأصلي تخزين الإرتفاع متغير لمتابعة حجم الزر بتصغيره وتكبيره متغير خاص بوقت الـ animation كالتالي:
private int originalWidth; private int originalHeight; private bool isExpanding = false; private Timer animationTimer; ثم في دالة في دالة Form1()، أضيفي كود بعد InitializeComponent() لإسناد متغيري الطول والعرض إلى button1.Width وbutton1.Height
بعد ذلك عليك إعداد المؤقت timer 
animationTimer = new Timer(); animationTimer.Interval = 30; ثم إضافة حدث النقر Click، في في وضع التصميم، انقري مرتين على الزر، وسيُنشئ Visual Studio دالة button1_Click، اكتبي بها:
MessageBox.Show("تم النقر على زر الاستئناف!"); ثم حدث تمرير المؤشر على الزر MouseEnter  في نافذة Properties للزر، انقري على أيقونة البرق Events وابحثي عن MouseEnter، انقري مرتين بجانبه لإنشاء دالة واكتبي بها:
isExpanding = true; animationTimer.Start(); ثم حدث مغادرة المؤشر MouseLeave بنفس الكيفية حاولي كتابة الكود الخاص به.
بعد ذلك تنفيذ الرسوم المتحركة، بربط المؤقت بحدث، في Form1() بعد إعداد animationTimer.Interval، أضيفي التالي لربط المؤقت بدالة:
animationTimer.Tick += AnimationTimer_Tick; ثم عليكِ كتابة تلك الدالة وهي AnimationTimer_Tick لتحريك الزر بناءًا على ما سبق.
في حال واجهتي صعوبة أخبريني.

تقصد تحميل قاعدة بيانات الخاصة بالمتجر من الاستضافة إلى حاسوبك أي قاعدة بيانات موجودة بالفعل؟ أم تريد إنشاء قاعدة بيانات محلية من الصفر لأنّ الأمر مختلف؟

لنحاول التأكد من أن Nginx يستخدم location /static/ بشكل صحيح لجميع الطلبات التي تبدأ بـ /static/، وأن الـ location يتمتع بالأولوية على أي كتلة أخرى ربما تتعارض معه.
أولاً بتعديل ملف الإعدادات لاستخدام ^~ مع location /static/ لإعطائه الأولوية:
server { root /opt/Fikra-Project; location ^~ /static/ { alias /opt/Fikra-Project/staticfiles/; } location /media/ { alias /opt/Fikra-Project/media/; } # إعدادات Gunicorn location / { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } حيث ^~ يخبر Nginx أنه إن تم العثور على تطابق مع /static/، فلا يتم التحقق من أي كتل location أخرى، واستخدام ذلك الـ location مباشرًة، ويجب أن يكون location ^~ /static/ يأتي قبل location / في ملف الإعدادات.
ثم تنفيذ أمر:
python manage.py collectstatic --noinput بعد التعديل، تفقد صحة الإعدادات وأعد تحميل Nginx:
sudo nginx -t sudo systemctl reload nginx  

القاعدة ليست مرتين أو أكثر، بل ما تحتاجه هو 4 إلى 5 أضعاف وقت الدورة، وذلك ما بين مشاهدة للدرس واستيعابه بشكل مبدأي أو كلي ثم التطبيق العملي بمفردك والمراجعة على النقاط التي يقل بها استيعابك، ثم محاولة التطبيق بشكل جانبي على تمرين مختلف أو مشروع بسيط.
أيضًا البحث والقراءة للاستزادة فلا تكتفي بما يتم تقديمه في أي دورة مهما كانت، ولا حاجة لإعادة الدرس طالما أنك قادر على التطبيق على ما جاء به بمفردك وليس الكتابة مع الشرح ومتفهم لما تقوم به وليس مجرد حفظ للخطوات، عند الوصول لذلك تنتقل للدرس التالي.
إذا أردت نصيحتي، فلا تستمتع لمن يخبرك بالدراسة 30 دقيقة ثم استراحة 10 أو 5 دقائق وهي تقنية Pomodoro، فهو يضرك بدون قصد.
فالعقل يستغرق حوالي 23 دقيقة للدخول في مرحلة التركيز، والتوقف بعد 25 دقيقة يحرمك من التركيز العميق وحالات التدفق flow states.
وسأوضح لك كيفية خداع عقلك لتعلم شيء جديد بسرعة وبفعالية أكبر:
حدد فترة زمنية مركزة، أي ابدأ بأن تخبر نفسك أنك ستخصص الـ 45 دقيقة القادمة فقط لتعلّم الموضوع أو المهارة الجديدة، وذلك لا يضعك تحت ضغط ويخبر عقلك أن الأمر مجرد 45 دقيقة، ويساعدك في دخول وضعية تعلّم ذات تركيز عالٍ.
خلال تلك الفترة المُركّزة لمدة 45 دقيقة، يُفرَز اثنان من المواد الكيميائية المهمة في عقلك:
الأدرينالين وهو الهرمون الذي يزيد من اليقظة ويجعلك أكثر انتباهًا واستعدادًا لاستيعاب المعلومات الجديدة. الأسيتيل كولين، ويلعب دورًا حاسمًا في عملية التعلم وتشكيل الذاكرة، وعند إفرازه، يقوم بتعزيز تعديل الاتصالات العصبية المرتبطة بالمهمة المحددة، مما يعني تسليط الضوء على المناطق التي يرغب الدماغ في تغييرها لاستيعاب المعلومات الجديدة. وبمجرد انتهاء الفترة المُركّزة للتعلم، فقد حان الوقت لوقف كل شيء وإعطاء عقلك فترة راحة، وذلك الوضع مهم لسببين رئيسيين:
 تثبيت المعلومات المكتسبة: فأثناء الراحة، يعمل عقلك على تنظيم وتثبيت المعلومات التي اكتسبتها حديثًا في مسارات عصبية دائمة، وتلك العملية تُعزز من ترسيخ التعلم.  زيادة الدافعية: حيث معرفة أنك ستسترخي وتأخذ استراحة بعد الجلسة المركزة يعتبر مكافأة، مما يزيد من دافعيتك للانخراط في المهمة التعليمية من البداية. والآن نتأتي لزيادة فترة التركيز مع مرور الوقت، وذلك مع التمرس في تلك التقنية، يمكنك تدريجياً زيادة فترة التعلم المركز إلي حتى 2 ساعة (أو أي فترة مناسبة)، فالجلسات الأطول تؤدي إلى تعلم أعمق ودخول حالات من التدفق الإبداعي flow states وعندها لن تشعر بنفسك بل ينصب تركيزك بالكامل على ما تفعله.
وعندما كنت أتعلم البرمجة، كنت أقضي 10 ساعات يوميًا وربما أكثر، بين مشاهدة الدروس والتوقف للاستيعاب ثم المراجعة والتطبيق بمفردي لتثبيت ما تعلمته وأحيانًا البحث عن الأمور التي لا أفهمها سواء بمشاهدة شرح على اليوتيوب أو قراءة مقال على جوجل.
أو رؤية مثال، أو البحث عن تمرين للتطبيق ومحاولة التغيير في الكود لفهم طبيعة عمله وكيف يعمل ولماذا استخدمنا ذلك ولم نستخدم ذلك وهكذا.

لا يوجد مشكلة عند الضغط على زر تسجيل الدخول أو زر إنشاء الحساب، قمت بكتابة إيميل وباسورد وتم تسجيل الدخول والتحويل للصفحة الرئيسية.
عامًة قم بتغيير الكود للتالي:
registerBtn?.addEventListener('click', () => { container.classList.add("active"); }); loginBtn?.addEventListener('click', () => { container.classList.remove("active"); }); لاحظ ? وهو Optional chaining operator فائدته التحقق من وجود قيمة أي يعمل على التحقق من وجود قيمة registerBtn و loginBtn قبل محاولة الوصول إلى خاصية addEventListener.
وفي حال registerBtn أو loginBtn تساوي null أو undefined، فإن الكود لن يُنفذ addEventListener وسيتم تجنب حدوث خطأ.

أولاً، تفقد هل الخادم (VPS) يعمل على المنفذ 8000. يمكنك فعل ذلك عن طريق تشغيل الأمر التالي في منفذ الأوامر، حيث يجب أن يكون المنفذ الذي تستخدمه Nginx لـ WebSocket هو نفس المنفذ الذي يستخدمه Django:
sudo netstat -tlnp | grep 8000 ثانياً، لنتأكد من أن تكوين Nginx  صحيح، عن طريق تشغيل الأمر التالي:
sudo nginx -t ثم لنتأكد من أنّ الخادم يعمل على بروتوكول HTTP/1.1،  عن طريق إضافة السطر التالي إلى تكوين Nginx:
proxy_http_version 1.1; نفس الأمر لنتأكد من أنه يعمل مع بروتوكول WebSocket، بإضافة التالي:
proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; ثم التأكد من أنّه يعمل مع بروتوكول SSL/TLS، بإضافة التالي:
ssl_certificate /etc/letsencrypt/live/domain_name/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/domain_name/privkey.pem; أيضًا قم بتجربة إضافة / إلى نهاية العنوان إن حدث مشكلة قم بإزالتها فذلك يعتمد على إعدادات websocket  في الخادم لديك:
location /ws/ { proxy_pass http://127.0.0.1:8000/; وفي ملف الإعدادات في django   في مصفوفة ALLOWED_HOSTS يجب أن تحتوي على يحتوي على اسم المجال، وإليك مثال عليك تعديله:
ALLOWED_HOSTS = ['test.com', 'www.news.com', 'blog.news.com', '111.222.333.444'] أيضًأ في حال تستخدم SSL/TLS، فقم بتعيين SECURE_PROXY_SSL_HEADER في ملف settings.py.
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')  

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

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

أثناء تثبيت Postgres هل قمت بكتابة باسورد؟ عليك كتابته وليس الباسورد الخاص بـ pgAdmin فذلك هو ال Master password للوصول لسيرفرات قاعدة البيانات وليس باسورد قاعدة البيانات نفسها، في حال قمت بكتابة نفس الباسورد فلا مشكلة.
المستخدم الإفتراضي لقاعدة البيانات هو postgres عليك كتابة  كلمة المرور التي قمت بتحديدها.
إن لم تتذكرها، قم بكتابة التالي في psql لتعيين كلمة مرور:
ALTER USER postgres WITH PASSWORD 'admin' تستطيع تعديل admin إلى كلمة تريدها.
بعد ذلك قم بإعادة تشغيل Postgres من خلال تنفيذ التالي في CMD أو أي منفذ أوامر وليس من خلال PSQL:
net stop postgresql net start postgresql  

لم تقم بإنشاء عمود من أجل الإختيارات (نعم أو لا) والنوع المناسب له هو Boolean أي قيمة منطقية True أو False، وليكن باسم has_agreed.
أيضًا لم تقم بإنشاء عمود للمرفقات وتعيين نوعه كـ String لتخزين مسار الملف.
وبقية الأعمدة نوعها مناسب، وهيكل الجدول سيكون كالتالي:
Column Name Data Type Description id int Auto-incrementing primary key firstname varchar(255) First name lastname varchar(255) Last name email varchar(255) Email address phone varchar(20) Phone number category varchar(255) Category (dropdown list) has_agreed boolean Has agreed to terms (yes/no options) attachment varchar(255) File attachment created_at timestamp updated_at timestamp وذلك هو الكود:
use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateArticalesTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('articales', function (Blueprint $table) { $table->id(); $table->string('firstname', 255); $table->string('lastname', 255); $table->string('email', 255); $table->string('phone', 20); $table->string('category', 255); $table->boolean('has_agreed')->default(false); $table->string('attachment', 255)->nullable(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('articales'); } }  

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

بخصوص أفضل الممارسات، فتلك ليست الطريقة المناسبة، الإعتماد على حجم الشاشة لتعيين الخط أمر يسبب مشاكل غير متوقعة بطبيعة الحال حيث لا تستطيع التحكم في ذلك بشكل كامل، فلا يوجد حد أدنى أو حد أعلى لمدى حجم الخط والأمر يظهر بشكل جلي في الشاشات الصغيرة و الشاشات الكبيرة، أيضًا لو قمت بعمل تقريب للصفحة فلن يزداد حجم الخط في حال كان مساوي لـ 80vw مثلاً وستزداد النصوص التي أقل من ذلك.
بالتالي الطريقة الحديثة هي استخدام دالة clamp والصيغة الخاصة بها كالتالي:
font-size: clamp(MIN, VALUE, MAX); MIN: الحد الأدنى لحجم الخط. VALUE: القيمة المفضلة لحجم الخط والتي ستتغير حسب حجم الشاشة، أي القيمة التي نريدها للخط. MAX: الحد الأقصى لحجم الخط. وهناك أداة توفر لك القيم للنصوص المختلفة في موقعك، أي تقوم بتوليد القيم لك بناءًا على مساحة العرض وحجم الخط الذي تريده، وهي:
utopia.fyi https://modern-fluid-typography.vercel.app/ وهناك حل آخر أُفضله، وهو إنشاء TYPOGRAPHY SYSTEM، بحيث يكون هناك نظام للخطوط متبع في كامل التصميم.
أولاً عليك تحديد حجم الخط الأساسي للموقع ليصبح 10px، ونفعل ذلك بوضع القيمة التالية:
html { font-size: 62.5%; } 62.5% من حجم الخط الأساسي أو الإفتراضي وهو 16px تصبح القيمة 10px.
وذلك لتسهيل استخدام rem فحاليًا 1.8rem تعني 18px وبالتالي الاستخدام أصبح أسهل من أجل التجاوبية.
بعد ذلك عليك تحديد مقاسات الخطوط في الـ  TYPOGRAPHY SYSTEM وأحجامها font weight وأيضًا الـ line height  وفي النهاية ستجد أنّ لديك نظام يشبه التالي:
*** 01 TYPOGRAPHY SYSTEM - Font sizes (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 - font weight default: 400 medium: 500 semi-bold:600 bold: 700 - line height default: 1.5 medium: default paragraph: 1.5 الآن قم بإنشاء متغيرات مخصصة تستطيع استخدامها في كامل التصميم كالتالي:
:root { --font-family: 'Noto Kufi Arabic', sans-serif; --font-color--white: #ebedf8; --font-color: #322143; --font-size: 1.8rem; --font-size-small: 1.4rem; --font-size-medium: 1.6rem; --font-weight--medium: 500; --font-weight--semi: 600; --line-height: 1.5; }  

تقوم بتضمين ملف register.php مرتين، وذلك  يسبب حدوث تعارضات أو الكتابة فوق المتغيرات،  احذف السطر include 'register.php'; من داخل كتلة if (isset($_POST['save_btn']))، حيث تحتاج فقط إلى تضمينه مرة واحدة في بداية البرنامج.
<?php include 'register.php'; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>User Registration</title> </head> <body> <div> <h1>User Registration Form</h1> <form action="register.php" method="POST"> <input type="text" name="Firstname" placeholder="Firstname"> <br> <br> <input type="text" name="Lastname" placeholder="Lastname"> <br> <br> <input type="number" name="Age" placeholder="Age"> <br> <br> <input type="submit" name="save_btn" value="Save Data"> </form> </div> <?php if (isset($_POST['save_btn'])) { $fname = mysqli_real_escape_string($connect, $_POST['Firstname']); $lname = mysqli_real_escape_string($connect, $_POST['Lastname']); $age = mysqli_real_escape_string($connect, $_POST['Age']); $query = "INSERT INTO students (Firstname, Lastname, Age) VALUES ('$fname', '$lname', '$age')"; $result = mysqli_query($connect, $query); if ($result) { echo "تم إدراج السجل بنجاح!"; } else { echo "خطأ: " . mysqli_error($connect); } } ?> </body> </html>  

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

الفارق الأساسي هو كيفية التعامل مع حالة التحميل loading state.
tفي الكود الأول، تقوم بالتحقق من حالة التحميل loading ولكنك لم تقم بإرجاع الـLoader كجزء من الـJSX، أي الكود داخل الشرط if (loading) لا يعتبر جزءًا من النتيجة المرجعة من الدالة Books.
بينما في الكود الثاني، تقوم باستخدام تعبير ثلاثي للتحقق من حالة التحميل loading، وإن كانت الحالة loading، يتم إرجاع الـLoader كجزء من الـJSX، وإذا لم تكن الحالة loading يتم عرض الكتب.
لذا الكود الثاني يعيد الـLoader كجزء من النتيجة المرجعة من الدالة Books، بينما الكود الأول لا يعيد أي شيء في حالة التحميل، مما يعني أن العنصر Oval لن يتم عرضه.
إذن في الكود الأول عليك تعديل الجزء الخاص بحالة التحميل ليعيد الـLoader كجزء من النتيجة المرجعة من الدالة Books:
if (loading) { return ( <Oval height={120} width={120} color="rgb(247, 96, 14)" wrapperStyle={{ height: "70vh", display: "flex", alignItems: "center", justifyContent: "center", }} wrapperClass="" visible={true} ariaLabel="oval-loading" secondaryColor="#E2E2E2" strokeWidth={3} strokeWidthSecondary={3} /> ); } من أجل عرض الـLoader عندما تكون الحالة loading هي true.

من خلال CSS سيكون كالتالي:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .box { position: relative; display: flex; justify-content: center; align-items: center; background-color: #1b1bb7; border-radius: calc(20% - 40px); padding: 40px 20px; width: 300px; height: 300px; text-align: center; } .box-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); mix-blend-mode: overlay; width: 91%; height: 91%; background-color: rgb(0 0 0 / 79%); border-radius: 9%; filter: blur(37px); } h1, p { font-size: 30px; font-weight: bold; font-family: system-ui; color: white; } </style> </head> <body> <div class="box"> <div class="content"> <h1>5+</h1> <p>Countries</p> </div> <div class="box-overlay"> </div> </body> </html> والنتيجة هي:

حيث ستعتمد على خاصيتي  mix-blend-mode و filter لتنفيذ الفكرة.

تلك المشكلة شائعة ويجب عليك فهمها فهي خاصة بأمر هام وهو CORS.
وتحدث مشكلة الـ CORS (Cross-Origin Resource Sharing) عندما يحاول تطبيق ويب الوصول إلى موارد من نطاق مختلف (أو بروتوكول أو منفذ مختلف) بدون التصريح المناسب.
أي الإتصال من http://localhost:3000 في الواجهة الأمامية على http://127.0.0.1:4000 مثلاً في الواجهة الخلفية، لاحظ هنا منفذين مختلفين، بالتالي يرسل المتصفح طلبًا مسبقًا إلى الخادم للتحقق مما إذا كان مسموحًا للعميل بالوصول إلى المورد (السيرفر).
ويتضمن الطلب رأسًا خاصًا يسمى Origin، والذي يحتوي على عنوان URL لموقع الويب العميل.
ثم يستجيب الخادم برأس Access-Control-Allow-Origin، والذي يحدد مواقع الويب التي يُسمح لها بالوصول إلى المورد.
أي CORS هو مصطلح وببساطة، هو آلية أمان في متصفحات الويب تتحكم في كيفية تفاعل مواقع الويب المختلفة مع بعضها البعض.
ما الفائدة منها؟
ببساطة تمنع CORS المواقع الضارة من سرقة البيانات من المواقع الأخرى وتجعل من الصعب على المتسللين اختراق المواقع الإلكترونية، وتُتيح للتطبيقات الويب التفاعل مع بعضها البعض، حتى لو كانت تستضيفها مواقع ويب مختلفة.
لذا في الخادم علينا إضافة الرؤوس (headers) المطلوبة في ملفات PHP للسماح بالوصول من نطاق محدد:
<?php header("Access-Control-Allow-Origin: http://localhost:3000"); header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS"); header("Access-Control-Allow-Headers: Content-Type, Authorization"); ?> عليك وضع الكود السابق في بداية كل ملف تريد الوصول إليه وتعديل منفذ الواجهة الأمامية 3000 بما لديك أنت.
أو إنشاء ملف منفصل وكتابة به ما سبق وليكن باسم cors.php ثم استيراده 
<?php include 'path/to/config.php'; // تابع بقية الكود ?> أو تضمينه في أي ملف موجد في جميع الملفات الديك مثل config.php أو init.php.
لكن الطريقة الأفضل وضع التالي في ملف  .htaccess:
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "http://localhost:3000" Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" Header set Access-Control-Allow-Headers "Content-Type, Authorization" </IfModule>  

الطريقة الأولى من خلال تصميم تلك الصور والأيقونات على برنامج مثل الفوتوشوب واستخدامها في التصميم من خلال CSS.
أما الأفضل هو الإعتماد على SVG وبالطبع الأمر ليس بالسهل للرسم من خلاله، لكن هناك أدوات توفر لك الرسم والتحميل مباشرًة مثل التالي:
https://editor.method.ac/ https://vectorpaint.yaks.co.nz/ أو يمكنك استخدام برنامج مثل adobe illustrator لرسم الشكل الذي تريده وتصديره كـ SVG:
 

لا يوجد أمر كذلك، فجميع مجالات البرمجة مطلوبة، بالطبع هناك أفضلية لمجال عن آخر حسب طبيعة سوق العمل في الوقت الحالي والتي تتغير كل 5 سنوات مثلاً لكون المجال البرمجي يتطور بشكل مستمر وهناك أمور تغير من مساره.
لذا عليك تعلم أساسيات البرمجة أولاً ثم تفقد المجال البرمجي الذي يوجد عليه طلب والخبرة المطلوبة للعمل به، والمهارات البرمجية اللازمة، ثم تضع خطة وتسعى جاهدًا للوصول لذلك الهدف في مدة زمنية معينة ولن تقل عن سنة أقل من ذلك لن يصح.
ومواقع التوظيف الألمانية هي:
https://www.stepstone.de https://www.monster.de https://www.xing.com https://de.linkedin.com وستجد تفصيل أكثر هنا:
 

عليك حذف أي ملفات تم رفعها إلى المستودع على GitHub، أو حذف المستودع وإعادة إنشائه أيهما أسهل بالنسبة لك.
ثم تعديل ملف .gitignore لديك بما يلي:
### Laravel ### /vendor/ node_modules/ npm-debug.log yarn-error.log # Laravel 4 specific bootstrap/compiled.php app/storage/ # Laravel 5 & Lumen specific public/storage public/hot # Laravel 5 & Lumen specific with changed public path public_html/storage public_html/hot storage/*.key .env Homestead.yaml Homestead.json /.vagrant .phpunit.result.cache ثم تنفيذ الأمر التالي لحذف المستودع المحلي لـ Git في مجلد مشروعك:
rm -rf .git ثم إعادة إنشاء المستودع من خلال الأمر:
git init ثم رفع المشروع من خلال:
git add . // ثم git commit -m "first commit" // ثم git branch -M main // ثم git remote add origin https://github.com/ اسم المستخدم/repoName.git // ثم git push -u origin main  

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

الأمر مماثل لاستضافة الموقع على حاسوبك، لكن تلك استضافة على الإنترنت متاحة للوصول من قبل الجميع وبها مواصفات مناسبة لحجم زوار الموقع المتوقع.
ما يقصده هو إضافة أكواد Meta Pixel الخاصة بفيسبوك وأكواد التتبع الخاصة بتيك توك مثلاً وغيرهم مثل Google analytics.
وذلك لا علاقة له بالاستضافة، أيضًا بالنسبة للـ SEO، فذلك يتوقف على جودة كود الموقع وتوافقه مع معايير الـ technical SEO.
 

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

لاحظ أنك لم تم برفع النسخة التي تم تحزيمها من المشروع هنا في المستودع:
https://github.com/Ahmed-ALfadaly/travel.github.io بل قمت برفع الكود المصدري، يجب تحزيم المشروع من خلال npm run build، ثم رفع مجلد build أو dist أو public أيًا كان اسمه في مستودع منفصل أو في فرع branch منفصل في نفس المستودع بجانب الكود االمصدري الذي يوجد في فرع main.
والأسهل رفع مشاريعك على netlify حيث تستطيع رفع مجلد المشروع الذي تم تحزيمه مباشرًة إلى الاستضافة وسيتم توفير رابط لك، أو تستطيع رفع المشروع من خلال إختيار مستودع github.