Mustafa Suleiman

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

لا عليك، تستطيع إرسال رابط المشروع إلى مركز المساعدة وسيتم مراجعة المشروع، لكن أرجو ذكر أنك كنت تتحدث مع إياد الاسماعيل. بعد ذلك أرجو الإنتظار لحين مراجعة مشروعك وسيتم العودة والرد عليك بالنتيجة وأية نصائح وإرشادات.

ذلك مجرد إختصار alias لاسم المكتبة عند استيرادها بمعنى إعادة تسمية لتسهيل استخدامها خلال الكود الخاص بنا. تخيل الأمر كأنه لقب، مثلاً اسمك علي من الممكن تلقيبك بأسماء أخرى. لكن تجنب أسماء غير مفهومة عند إعادة التسمية مثلاً np لمكتبة numpy فذلك مفهوم أما ma مثلاً فذلك غير مفهوم.

استخدم التالي لإضافة الأيقونة: <link rel="shortcut icon" type="image/x-icon" href="icon.ico?"> بخصوص وسائل التواصل فكل ما تحتاجه هو إضافة التالي فقط: <meta property="og:title" content="Haitham Sharlie's Portfolio"> <meta property="og:description" content="Explore Haitham Sharlie's web development projects and UI/UX skills."> <meta property="og:image" content="https://raw.githubusercontent.com/haitham-sharlie/my-portfolio/refs/heads/main/icon.ico"> لاحظ أضفت رابط الصورة المباشر.

جربت تغيير html و css ولم يحدث الخطأ وأعدت تشغيل المشروع، حاول إغلاق المحرر والمتصفح ثم التجربة من جديد.

متى يحدث الخطأ، قمت بحذف مجلد dist ثم إعادة تشغيل المشروع وتجربته والضغط على الروابط ولم يحدث الخطأ. بعد حذف مجلد dist وتشغيل المشروع، قم بإعادة تحديث الصفحة أيضًا بالضغط على CTRL + F5 لحذف الملفات المؤقتة.

قم بحذف المكتبة التالية: npm un create-react-app -g

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

في حال قمت بتثبيت react بشكل global أي عالمي لتصبح متاحة لكافة المشاريع على جهازك فعليك حذفها من خلال: npm un react-g بعد ذلك قمت بإنشاء مشروع react بشكل محلي أي كل مشروع بشكل منفصل بالحزم الخاصة به. لتفقد الأمر أيضًا قم بعرض نتيجة الأمر التالي لرؤية الحزمة المثبتة بشكل global لديك npm list -g --depth=0

ستحتاج إلى استخدام Django Channels ويوجد مكتبة daphne لتسهيل إضافة ذلك للمشروع لديك. وهي ببساطة خادم ASGI (Asynchronous Server Gateway Interface) تم تطويره بواسطة فريق Django، و ASGI تلك واجهة برمجة تطبيقات API جديدة لـ Python نستخدمها لإنشاء تطبيقات ويب غير متزامنة Async. وتدعم WebSocket أيضًا لتوفير ميزات الاتصال في الوقت الفعلي Real-time. ابحث على اليوتيوب عن chat app using Django وستجد تفصيل عملي لكيفية تنفيذ الأمر.

المشكلة في العنصر الذي يحمل الكلاس center-div text-center يستحوذ على مساحة أكبر من باقي العناصر ويظهر خارج الـ container. وذلك بسبب وضع margin جهة اليمين له، عليك حذفه ومعالجة الأمر عند مساحة الشاشة التي تظهر بها المشكلة وهي 1200px. من الأفضل تجنب وضع margin للعناصر لتنفيذ التصميم، واستخدام gap الخاصة بـ Flexbox والـ Padding لتنسيق التصميم.

كل ما عليك في البداية هو تنفيذ المشروع على المنصة نفسها لتسهيل الأمر على نفسك، أولاً عليك إختيار مسابقة قائمة بالفعل وستجد ذلك هنا: https://www.kaggle.com/competitions ابدء بمسابقات تحت تصنيف Getting Started فهي للمبتدئين، ولا يوجد بها جوائز مالية. قم بقراءة وصف المسابقة بالكامل ثم اضغط على join competition أعلى اليمين بعد ذلك سيظهر لك زر باسم new Notebook لإنشاء Notebook على منصة Kaggle وبه كود جاهز لاستيراد الملفات الخاصة بالمشروع. بعد الإنتهاء ستجد بالجانب الملفات الناتجة من المشروع الذي تعمل عليه في مجلد kaggle/working قم بتحميلها مثلاً ملفات csv الناتجة من عملية تحليل البيانات، بعد التحميل قم بحفظ ما قمت به بالضغط على save version أعلى اليمين لحفظ العمل الخاص بك. ثم توجه لصفحة المسابقة على kaggle واضغط على submit أعلى اليمين ثم قم برفع الملف الذي قمت بتحميله وسيظهر لك النتيجة.

تلك مدينة افتراضية تم إنشاؤها بواسطة Google AI باستخدام تقنية الذكاء الاصطناعي، وذلك كبيئة اختبار للأنظمة المستقلة، مثل السيارات ذاتية القيادة، والروبوتات، وغيرها من التقنيات المتقدمة. أي مصممة لتكون واقعية قدر الإمكان، مع تضمينها لمعالم المدينة، مثل الطرق، والمباني، والمشاة، والمركبات، وتحتوي على كميات هائلة من البيانات، بما في ذلك بيانات الموقع، والطقس، وحركة المرور، مما يسمح بتدريب نماذج الذكاء الاصطناعي بشكل فعال. وتستطيع التحكم في جميع جوانبها، بما في ذلك الوقت من اليوم، والطقس، وحركة المرور، مما يسمح لهم باختبار سيناريوهات مختلفة. وهي مفتوحة المصدر مفتوح أي الجميع يستطيع استخدامها. https://github.com/vanderschaarlab/synthcity

تسجيل الدخول من خلال جوجل ذلك أمر مختلف تمامًا، ما قصدته هو تسجيل الحساب من خلال الـ Form بكتابة الاسم والإيميل ثم تسجيل الدخول. حيث ستحتاج إلى إنشاء حساب في https://console.cloud.google.com/ وإنشاء مشروع والحصول على API بالضغط على APIs & Services ثم Credentials. ثم استخدام مكتبة laravel/socialite لتسهيل الأمر عليك: composer require laravel/socialite وهناك المزيد من الخطوات بإعداد متغيرات البيئة، ستجد تفصيل هنا: https://laravel.com/docs/11.x/socialite

من الأفضلك لك إنشاء مشروع React من خلال Vite وليس create-react-app عليك تنفيذ الأمر التالي: npm create vite@latest react-basics -- --template react ستظهر لك رسالة اكتب y ثم اضغط على Enter. بعد الإنتهاء توجه للمجلد react-basics الذي تم إنشائه من خلال: cd react-basics ثم تثبيت الحزم: npm i ثم تشغيل المشروع: npm run dev

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

الدورة مقسمة لعدة مسارات وكل مسار بداخله أقسام وكل قسم بداخله دروس. بالنسبة لدورة تطوير واجهات المستخدم، فمثلاً "أساسيات تطوير الويب" هو مسار وبداخله يوجد أقسام مثل أساسيات HTML وأساسيات CSS وهكذا وكل قسم بداخله دروس خاصة به.

عليك إنشاء عميل client جديد لـ Passport، وذلك نوع خاص من عملاء Passport نستخدمه لتطبيقات الويب أو الأجهزة المحمولة التي تحتاج إلى الوصول إلى موارد API محمية بواسطة Passport. من خلال الأمر: php artisan passport:client --personal وذلك يحدد العميل الشخصي على أنه شخصي، أي أنه مُصمم للاستخدام من قبل تطبيق واحد فقط. سيخبرك بكتابة اسم التطبيق قم بكتابة أي اسم تريده، ثم قم بتشغيل الخادم، وتجربة تسجيل مستخدم بإيميل مختلف.

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

أعتقد أن ما تريده هو وضع السهم في منتصف قسم الـ Hero أي أسفل العنوان الرئيسي، بالتالي عليك وضعه ضمن ذلك الجزء وليس خارجه أي كالتالي: <article> <h1 class="title">We bring the</h1> <br /> <div class="stylespan">BARBERSHOP TO YOU!</div> <i class="fa-solid fa-arrow-down"></i> </article> ثم تعديل التنسيق ليصبح: .fa-solid { display: flex !important; justify-content: center; font-size: 50px; color: #ffffff; } لاحظ display: flex !important; لأن font-awesome تقوم بتطبيق تنسيق inline-block للعنصر ونحن نريد تغيير نوعه ليصبح flex وذلك بكتابة !important لتجاوز التنسيق الحالي. بالطبع من الأفضل كتابة التنسيق التالي للعنصر الأب بدلاً من تنسيق كل عنصر بشكل منفرد: article { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; } أي قم بحذف تنسيق fa-solid وقم بتطبيق التنسيق السابق.

بالطبع وذلك الهدف من الدورة بالأساس، لكن يجب تحديد وجهتك من البداية وعدم دراسة كل شيء في نفس الوقت، بمعنى من خلال بايثون تستطيع أن تصبح مطور واجهة خلفية أو أن تصبح محلل بيانات أو مطور ذكاء اصطناعي وتعلم الآلة. إجمالاً المجالات كالتالي: مطور Full-stack لبناء مواقع الويب والمتاجر الإلكترونية أي قادر على تطوير الواجهة الأمامية والخلفية أيضًا من خلال Django و Flask. مطور واجهة خلفية Back-End فقط. مجال تعلم الآلة ولكن هنا أنت بحاجة إلى تعلم المزيد وعدم الإكتفاء بالدورة والأمر بحاجة إلى وقت أكثر من أي مجال آخر. محلل بيانات (Data Analyst )، حيث ستتمكن من استخدام مهارات البرمجة الخاصة بك للتحليل واستخراج البيانات من مصادر متنوعة، ومعالجة البيانات، وإجراء التحليلات الإحصائية والتعلم الآلي باستخدام مكتبات Python مثل pandas و NumPy و scikit-learn. مطور odoo بالتالي عليك البحث عن الوظائف في سوق العمل لديك وتحديد المطلوب بالنسبة لمستوى Junior أو خبرة سنة أو سنتين، وستجد تفصيل هنا:

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

من حيث الاستخدام فكلاهما واحد أي كلاهما دوال، الفرق يكمن في أنّ الميثود هي دالة كلاس أو كائن وليس في النطاق العام. بمعنى Functions دوال مستقلة، تُعرّف خارج أي كلاس أو كائن، وتستطيع استدعاءها مباشرةً من أي مكان في البرنامج لأنه يتم تعريفها في النطاق العام (Global Scope)، وتستقبل قيم إدخال parameters وتعيد قيمة إخراج return value. بينما الـ Methods هي دوال مرتبطة بكلاس أو كائن، وعليك تعريفها داخل الكلاس، وتُستدعى فقط من خلال إنشاء كائن من ذلك الكلاس وتقوم بتنفيذ عمليات معينة عليه. أي هي دالة خاصة تعرف على كائن معين من صنف معين، وتؤدي مهمة محددة على بيانات الكائن، وتؤثر عليه، وتستخدم للوصول إلى بيانات الكائن وتعديلها. لاحظ التالي مثلاً في بايثون، لدينا دالة مستقلة باسم greet وميثود داخل كلاس Person باسم greet. def greet(name): print(f"مرحباً {name}!") class Person: def __init__(self, name): self.name = name def greet(self): print(f"مرحباً {self.name}!") # استدعاء الدالة greet("محمد") person = Person("محمد") # استدعاء الميثود على الكائن person.greet()

ذلك إختصار لجملة Statistical Analysis System، والتي تعني نظام التحليل الإحصائي، وتم تطوير SAS لأول مرة في أوائل السبعينيات في جامعة ولاية كارولينا الشمالية، وإطلاقه كمنتج تجاري في عام 1976. والغرض منه تحليل البيانات بشكل أساسي، ويتميز بالتالي: القدرة على التعامل مع كميات كبيرة من البيانات مجموعة واسعة من الإجراءات الإحصائية والتحليلية إنشاء تقارير وتحليلات مخصصة الدعم للغات البرمجة الأخرى مثل SQL وPython وR العمل على منصات متعددة، بما في ذلك ويندوز ولينكس وUNIX التكامل مع برامج أخرى مثل Excel و SPSS. وستجد أنه مستخدم في مجالات مختلفة منها البحوث العلمية، الإحصاء والتحليلات، العلوم الصحية، العلوم الاجتماعية، الأعمال والتجارة والحكومة.

بالطبع تستطيع تخصيص اسم الدومين وذلك يسمى custom domain عليك شراء دومين أولاً من أحد مقدمي الخدمة مثل Namecheap. ثم التوجه للوحة التحكم لديك وربط الدومين بالمشروع الذي تريده.