محمد_عاطف

للحصول على الشهادة الخاصة بإنتهاء الدورة يجب أولا عليك إنهاء على الأقل أربع مسارات من الدورة والتاكد من التطبيق مع المدرب ورفع تلك المشاريع على github . وبعد إتمام الأربع مسارات يجب عليك محادثة مركز المساعدة والتقدم لطلب الإختبار . سيتم إختبارك من من خلال التالي : سنحدد لك موعد لاجراء محادثة صوتية لمدة 30 دقيقة يطرح المدرب فيها أسئلة متعلقة بالدورة ويناقش معك ما نفذته خلالها سيحدد لك المدرب مشروعًا مرتبطًا بما تعلمته أثناء الدورة لتنفيذه خلال فترة محددة تتراوح بين أسبوع الى أسبوعين سيراجع المدرب المشروع الذي أنجزته، وإن سارت جميع الخطوات السابقة بشكل صحيح، ستتخرج وتحصل على الشهادة أو يرشدك المدرّب لأماكن القصور ويطلب منك تداركها ثم التواصل معنا من جديد وإليك الرابط التالي لجميع التفاصيل حول الشاهدة والإختبار : https://support.academy.hsoub.com/exams

هل تقصد JavaScript كلغة واجهات خلفية ك Node.js و express ؟ إذا كان كذلك فإن اللغتين JavaScript و PHP يمكن لكلاهما إنشاء واجهات خلفية للمواقع وكلاهما مطلوبان لسوق العمل وتتوافر فرص العمل بهما ولكن PHP لها فرص أكثر في سوق العمل الحر . لهذا إذا إحترفت JavaSript في إنشاء الخوادم والواجهات الخلفية فغالبا أنت لن تحتاج إلى لغة php إلا إذا أردت أن تدخل وظائف العمل الحر . ولكن حاليا يبنغي عليك التركيز على لغة واحدة منعا للتشتت وبعد إتقانك للغة JavaScript والحصول وظيفة يمكنك إذا أردت أن تتعلم PHP ولكن لن يكون لها حاجة .

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

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

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

هل تقصد هكذا ؟ أم تريدهم أعمدة ولكن الأيقونات بجوار بعضهم البعض ؟ إذا كان ما تريده كما في الصورة السابقة فأولا لاحظ أنك قمت بوضع جميع العناصر بداخل ال section about مباشرة وهذا ليس صحيحا حيث يجب وضع كل صورة مع النص الخاص بها في عنصر div بشكل منفصل . ليصبح section about بعد التعديل هكذا : <section class="about"> <div> <i class="fa-solid fa-briefcase fa-5x"></i> <h3>Project</h3> <p>Our projects are amazing. If you are interested, check out the following link <a href="https://verdant-sunburst-444f9e.netlify.app/" target="_blank">View now <i class="fa-solid fa-arrow-right"></i></a></p> </div> <div> <i class="fa-solid fa-child-reaching fa-5x"></i> <h3>Make the person happy</h3> <p>We will be happy if we can make you happy.</p> </div> <div> <i class="fa-solid fa-screwdriver-wrench fa-5x"></i> <h3>Edit project</h3> <p>After creating your first website and you want to modify it, contact us and one of our team members will modify it for free.</p> </div> <div> <i class="fa-solid fa-hand-holding-dollar fa-5x"></i> <h3>Guarantee your investment</h3> <p>Money back guarantee if you don't like the project within 24 hours and we will be happy to hear from you. </p> </div> </section> الآن سيتوجب علينا إجراء تعديلات في التنسيقات . هنا في هذا الجزء يجب جعل إتجاه ال flex ك row صف وليس عمود ولهذا يرجى حذف هذا التنسيق وحذف جزء flex-wrap أيضا وإضافة padding هكذا : .about{ display: flex; justify-content: center; align-items: center; margin-top:50px; gap: 1rem; padding: 0 20px; } وإضافة عرض لعنصر ال div ليصبح هكذا : .about div { width: 25%; } ويمكنك تغير نسبة العرض بناء على عدد العناصر لديك ويمكنك إضافة التنسيقات التي تريدها لهم الآن كما تريد.

وعليكم السلام ورحمة الله وبركاته. هل تريد أن تصبح مطور Full stack ؟ أى أن تقوم بإنشاء الواجهات الأمامية والخلفية معا ؟ إذا كان كذلك فيفضل البدأ بتعلم HTML و CSS قبل البدأ في المسارات العملية أى قبل المسار الثالث في الدورة وذلك حتى تستطيع تعديل الواجهات الأمامية أثناء التطبيق العملي وحتى لا يحدث لك تشتت من المعلومات التي سيقوم بها المدرب في HTML و CSS و JavaScript . وبما أنك مشترك في دورة هنا على الأكاديمية فإذا أنت هنا لديك الوصول المجاني إلى أول مسار من جميع الدورات الأخرى على الأكاديمية . لهذا يمكنك مشاهدة أول مسار من "دورة تطوير واجهات المستخدم" حيث يتم شرح "أساسيات تطوير الويب" وهو : أساسيات HTML أساسيات CSS أساسيات JavaScript أساسيات jQuery وإن دروات ال Crash Courses من الممكن أن تكون جيدة ولكن فيها يتم تلخيص الأمور كثيرا ولا يتم التعمق وأيضا من الممكن أن يتم تجاهل بعض المعلومات والمواضيع ولن تستطيع التطبيق الجيد عليها.

إن تعلم JQuery ليس ضروريا إذا كنت تستخدم React . حيث React ستغنيك عن ذلك حيث توفر لك الكثير من الخصائص والممزيات أكثر مما توفره JQuery وأيضا تقوم هي بالتلاعب العناصر وإضافتها وحذفها والتعديل عليها دون الحاجة لفعل ذلك يدويا من خلال JQuery. ولكن إذا كنت ستعمل على مشاريع قديمة أو تقوم بتطوير مواقع دون إستخدام React فإن JQuery ستفيدك جدا بدلا من إستخدام Plain JavaScript وإنشاء كل شئ بنفسك. لهذا الأمر يعتمد على ما تريد تحقيقه وما الذي ستعمل عليه.

هل تقصد كتب قمت أنت بتأليفها ؟ وهل تريد نشرها في طبعات مكتوبة أم على الإنترنت ؟

لاحظ الخطأ في إسم الملف. حيث إسم الملف يجب أن يكون بإمتداد html حيث الأخير هو حرف l وليس i . يرجى تغير إسم الملف إلى : index.html

يمكنك رؤية نبذة عن المشاريع التالية والتي يمكنك تطبيقها : وإذا أردت مشاريع لتستخدم فيها إطار React فيمكنك النظر إلى المشاريع التالية : وإذا أردت النظر أو البحث عن مواقع لتستلهم منها التصاميم يمكنك قراءة التالي :

إن ال Dedication (الإهداء) هو تعبير شخصي جدا وتقوم فيه بتوجه الإهداء إلى شخص أو أشخاص عزيزين مثل الأهل أو الزوج-الزوجة أو الأصدقاء أو أى شخص أخر في حياتك الخاصة . وهو يكون عاطفي و بسيط وليس طويلا . أما ال Acknowledgements (الشكر والتقدير) فهو تقديم الشكر للأشخاص أو المؤسسات التي ساهمت في نجاح المشروع وهو يجب أن يكون رسمي ومرتب ومنظم ويمكنك أن تجعله طويل إلى حد ما. والمقصود بال System Architecture أنه هو الهيكل العام للنظام الذي يوضح كيف تتفاعل المكونات المختلفة مع بعضها البعض مثل الواجهة و الخادم و قاعدة البيانات والخوارزميات المستخدمة وهيكل المشروع وهكذا وستقوم فيه بشرح عام للنظام مثل: ما هو الغرض من النظام؟ هل هو تطبيق ويب؟ موبايل؟ نظام مكتبي؟ ما هي مكوناته الأساسية؟ يمكنك استخدام مخطط Architecture Diagram حيث يمكنك رسم مخطط يوضح العلاقة بين: Client . Server (الخادم) Database (قاعدة البيانات) APIs External Services .

هل ليس لديك مشروع ؟ أم لديك مشروع وتبحث عن أفكار للتطبيق عليها ؟ وما هي اللغات التي تريد العمل والتطبيق عليها؟

بالتأكيد إن لغات HTML و CSS مهمتان جدا لتطوير التطبيقات باستخدام JS حيث هما الأساس المكون لصفحات الويب الرئيسية فعندما تقوم بتطوير تطبيق ويب باستخدام JS فإنك ستحتاج بالتأكيد إلى HTML و CSS لتصميم وعرض واجهة المستخدم. ولكن هناك بعض الشركات إذا كنت تعمل على React مثلا أو مكتبات الواجهة الأمامية مثل Vue و Angular تطلب فقط التركيز على تلك المكتبات ويوجد أشخاص أخرين هم المسؤولون عن تطوير HTML و CSS . أما إذا كنت تقصد plain javascript ومكتباتها مثل jquery وغيرها فهنا بالطبع يجب أن تتعلم HTML و CSS . فلا يوجد مطور واجهات مستخدم يعمل فقط على جافاسكريبت دون HTML و CSS . وإليك الإجابات التالية لمزيد من التفاصيل :

لماذا لم تقم بإتباع الحلول التي وضحتها لك هذا هو سبب المشكلة الرئيسي . أولا لم تقم بتعديل الدالة وإضافة إسم النموذج gpt-image-1 حيث يبدوا أن حسابك ليس مدفوعا لهذا ليس لك صلاحية الوصول إلى النموذج الإفتراضي dall-e-2 . وأيضا بعد تعديلها سيظهر خطأ أنه ليس لديك رصيد : هذا هو ملف main.js يجب إستخدامه لحل المشكلة الأساسية . بعد ذلك ستجد مشكلة الرصيد يجب شحن رصيدك وإستخدام api_key مختلف. لن يعمل الكود بدون هذه الحلول. main.js

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

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

لم تقم بوضع إسم النموذج كما أخبرتك . وأيضا تأكد من وضع API_KEY في الكود لديك مع وجود رصيد . هذا هو الكود : const api = ""; const inp = document.getElementById('input') const images = document.querySelector('.images') const getImage = async () => { // make a request to openoia api const methods ={ method: "POST", headers:{ "Content-Type":"application/json", "Authorization":`Bearer ${api}` }, body:JSON.stringify( { "prompt":inp.value, "model":"gpt-image-1", "n":3, "size":"1024x1024" } ) } const res = await fetch("https://api.openai.com/v1/images/generations" , methods) // parse the response as json const data = await res.json() console.log(data); const listImages = data.data; images.innerHTML = ''; listImages.map(photo => { const container = document.createElement('div') images.append(container) const img = document.createElement('img') container.append(img) img.photo.url }) } إذا لم يعمل يرجى فتح ال console وإرسال صورة للخطأ الذي يظهر لك .

يرجى عدم مشاركة ال API_KEY هكذا حتى لا يقوم بإستخدامه أى شخص أخر . يرجى تغير ال api_key لديك . أولا المشكلة أن النموذج يطلب إسم للنموذج الذي تريد إستخدامه وهذا لم يتم توفيره . وأيضا حجم الصورة غير مناسب حيث النموذج لا يستطيع توليد صورة 256x256 . يجب أن يكون methods كالتالي : const methods ={ method: "POST", headers:{ "Content-Type":"application/json", "Authorization":`Bearer ${api}` }, body:JSON.stringify( { "prompt":inp.value, "model":"gpt-image-1", "n":3, "size":"1024x1024" } ) } الآن ستجد أنه تم إرسال الطلب بنجاح ولكن تظهر رسالة خطأ أن الرصيد قد نفذ أو وصلت للحد الأقصى للإستخدام . لهذا تأكد من أن لديك رصيد في حسابك .

هل لديك او قمت بتصميم نماذج ذكاء اصطناعي لتوليد الصور ؟ اذا لم يكن لديك سيتوجب عليك شراء رصيد مثلا على موقع openai لتستطيع استخدامه فى توليد صور بالذكاء الإصطناعي. مثلا إليك هذه الدالة : async function generateImage() { const text = document.getElementById('textInput').value; const container = document.getElementById('image-container'); container.innerHTML = "جاري توليد الصورة..."; try { const response = await fetch("https://api.openai.com/v1/images/generations", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": "Bearer API_KEY" // استبدلها بمفتاحك }, body: JSON.stringify({ prompt: text, n: 1, size: "512x512" }) }); const data = await response.json(); const imageUrl = data.data[0].url; container.innerHTML = `<img src="${imageUrl}" alt="image">`; } catch (error) { console.error("خطأ في التوليد:", error); container.innerHTML = "حدث خطأ أثناء توليد الصورة."; } } في الدالة السابقة يجب عليك أولا إستبدال API_KEY بال api_key في حسابك على openai .حيث بعد شحن الرصيد سيتوجب عليك إنشاء api_key ووضعه في الكود هنا. بعد ذلك يمكنك إستخدام تلك الدالة لتوليد الصور .

المشكلة لديك في الخاصية backdrop-filter في عنصر body حيث يبدوا أنها لا تعمل كما هو متوقع على عنصر body مباشرة في بعض المتصفحات وهذا خصوصا عندما لا يكون هناك عنصر شفاف بين الخلفية والمحتوى. وأيضا الخطأ الأكبر عند استخدامها على body لأنها قد تكسر طبقات الترتيب (stacking context) للعناصر وتجعل العناصر المثبتة مثل .container تفقد موضعها أو تتصرف بشكل غير متوقع. لذلك يجب فصل عنصر جديد ووضع به تلك الخاصية . وإليك كود HTML التالي : <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> <link rel="stylesheet" href="index.css"> <title>Document</title> </head> <body dir="rtl"> <div class="background-overlay"></div> <header class="container"> <h1>عالم</h1> <nav> <a class="active" href="">الرئيسية</a> <a href="">المعلومات</a> <a href="">العمل</a> <a href="">تواصل</a> </nav> </header> <section class="hero"> <div class="tex"> <p>أنشئ صورك بستخدام تقنيات الذكاء الأصطناعي</p> <button>أبدأ الأن</button> <button>ابحث اكثر</button> </div> </section> </body> </html> وهذا هو كود CSS : *{ padding: 0; margin: 0; box-sizing: border-box; font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } body{ background: url(ص.jpg) no-repeat; background-size: cover; background-position: center; width: 100%; height: 100vh; } .background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(255,255,255,0.15); backdrop-filter: blur(4px) brightness(110%); } .container{ width: 100%; height: 10%; background-color: #490183; display: flex; justify-content: space-between; align-items: center; padding: 20px; z-index: 2; position: fixed; } .container h1{ color: white; font-weight: bolder; padding-right: 5rem; } .container nav a{ color: white; text-decoration: none; padding: 10px; transition: all 0.3s ease; } .container nav a:hover{ background: #ffffff5e; } .hero{ display: flex; justify-content: center; align-items: center; padding: 20rem 10rem; font-size: 30px; color: white; font-weight: 700; position: absolute; } button{ padding: 1rem 2rem; border: none; background-color: #490183; color: white; border-radius: 10px; margin-top: 10px;; cursor: pointer; font-weight: 600; transition: all 0.3s ease; } button:hover{ background-color: white; color: #490183; } .main{ width: 100%; height: 100vh; } .main h1{ text-align: center; font-size: 40px; margin-top: 100px; } i{ text-align: center; }

يرجى أيضا إرفاق كود HTML وليس CSS فقط ويفضل ضغط المجلد كاملا وإرفاقه.

هل يمكنك إرفاق الكود الخاص بك لمساعدتك بشكل أفضل. لاحظ أنك وضعت الخاصية position fixed في الكلاس الذي يسمى container في سطر 27 . وهذا الكلاس يحتوي على جميع العناصر الأخرى وليس nav فقط ولهذا غالبا هذا سبب المشكلة. يرجى وضعها في nav وإذا ظلت المشكلة يرجى إرفاق الكود.

يمكنك تكبير الشاشة من خلال الضغط على زر CTRL مع زر + في لوحة المفاتيح. ولتصغير الشاشة الضغط على زر CTRL مع زر - في لوحة المفاتيح. أما لإعادة التعين فيمكنك الضغط على زر CTRL مع رقم 0 . أو ستجد في مكان عنوان الصفحة علامة مثل العدسة يرجى الضغط عليها وإختيار reset .

هل هي صورة في عنصر img أم هو عنصر div به خاصية background-image ؟ عموما يمكنك إستخدام خاصية ال opacity لجعل العناصر شفافة في css . إذا كان عنصر image يمكنك إستخدام التالي : img { opacity: 0.5; } ويمكنك تغير القيمة إلى الشفافية التي تريدها ولكن القيمة هي بين 0 و 1 . أو يمكنك إنشاء عنصر backdrop أو overlay وجعله هو الشفاف وليس الصورة إذا كنت تستخدم عنصر div مع خاصية background-image.