اذهب إلى المحتوى

عمر قره محمد

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    4096

  • تاريخ الانضمام

  • تاريخ آخر زيارة

  • عدد الأيام التي تصدر بها

    40

 نوع المحتوى 

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو عمر قره محمد

  1. عمر قره محمد
    المشكلة في العنصر contact-content حيث اعطيته padding من اليمين واليسار بقيمة 600 بيكسل ولذلك فلن يكون متناسب مع جميع الشاشات ولاسيما الشاشات الاصغير من 600 بيكسل. لحل المشكلة جرب تعديل الكود للشكل التالي : .contact-content { display: flex; align-items: center; height: 300px; width: 200px; flex-wrap: wrap; justify-content: center; margin: auto; }
  2. عمر قره محمد
    بعد الانتهاء من الدورة ستكون على دراية كافة في المواضيع الموجودة في قسم، ماذا ستتعلم في هذه الدورة؟ الخاصة بالدورة التي اشتركت فيها . ولكنها بالتأكيد لن تجعلك محترف فهذا يحتاج إلى سنين من العمل والتدريب، بل ستجعلك في مستوى كافي للحصول على عمل. وباستخدام المهارات و المواقع التي ستضعها في معرض اعمالك، ستكون جاهز للتقدم إلى وظيفة بالتأكيد (هذا الكلام صحيح بالنسبة للدورات الاختصاصية وليس بالنسبة لدورة علوم الحاسوب وتطوير المنتجات). قد يفيدك الاطلاع على النقاشات التالية :
  3. عمر قره محمد
    اعتقد ان سبب المشكلة هو انك تحاول إضافة after إلى العنصر من النوع img. وهذا غير صحيح في CSS. لحل المشكلة جرب الكود التالي : <div class="col"> <div class="imageContainer"> <img src="../images/a.jpg" alt=""> </div> </div> وفي css : .imageContainer { width: 260px; position: relative; text-align: center; } .imageContainer img { width: 100%; } .imageContainer::after { content: ""; display: block; width: 80px; height: 100%; background-color: var(--scolor); top: 0; right: 0; position: absolute; } حيث اضفنا حاوية جديدة تحتوي على الصورة و الـ after.
  4. عمر قره محمد
    يوجد مشكلتين : الاولى هي انك اخطأت في استيراد الملفات، ولحل المشكلة يجب اضافة : ./css/ قبل اسم الملف في الـ href الخاصة بكل من ملفات الـ font awesome. جرب تعديل الكود للشكل : <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ayman's first project</title> <!-- main css file --> <link rel="stylesheet" href="./css/style.css"> <!-- normalize the css --> <link rel="stylesheet" href="./css/normalize.css"> <!-- google fonts --> <link rel=" preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!-- icon css --> <link rel="stylesheet" href="./css/all.min.css"> </head> <body> <i class="fa-solid fa-mustache"></i> <i class="fa-duotone fa-pen-nib"></i> </body> </html> والمشكلة الثانية هي ان الايقونات التي استخدمتها هي ايقونات غير مجانية، وإذا اردت استخدام الايقونات المجانية يجب ان تحدد على علامة free في محرك البحث الخاص بـ fontawesome.
  5. عمر قره محمد
    هل يمكنك مشاركة ملفات المشروع بالكامل ؟
  6. عمر قره محمد
    جرب بناء موقع متكامل خاص بك، وما بعد ذلك فهو يعتمد على المجال الذي تريد التوجه إليه، إذا كنت تريد الاكمال في مجال تطوير الواجهات يمكنك تعلم react، بينما إذا كنت تريد الالتفات إلى تطوير الواجهات الخلفية فيمكنك البدء في node. قد يفيدك الاطلاع على المقال التالي :
  7. عمر قره محمد
    لا يوجد مدة زمنية محددة لإنهاء الكورس، والسؤال الاصح هو متى استطيع التقدم إلى الامتحان والحصول على الشهادة ؟ ويمكنك التقدم إلى الامتحان بمجرد تجاوزك 4 مسارات من مسارات الدورة ولكن بشرط أن تكون قد رفعت المشاريع التي تقوم بالتطبيق عليها خلف المدرب على حسابك على GitHub، حيث سيتم طلب هذه المشاريع عند التقدم إلى الامتحان. ويمكنك الاستمرار في التقدم للامتحان حتى تحصل على الشهادة. وحتى بعد الحصول على الشهادة، فسيظل بإمكانك الوصول إلى الدورات والمسارات الجديدة التي يتم إضافتها كل فترة.
  8. عمر قره محمد
    جرب تعديل الكود للشكل التالي : const handelColor=(colorr)=>{ setDatacolor(colorr) document.documentElement.style.setProperty('--main-color',colorr) } بحيث يتم استخدام الـ colorr بدلاً من الـ color في اعطاء اللون.
  9. عمر قره محمد
    الكود جيد جداً، واستخدام الـ grid جيد كذلك، جرب اضافة التنسيق التالي : * { box-sizing: border-box; } وتعديل التنسيقات التي تعطيها للـ div كالتالي : div { width: 100%; height: 200vh; background-color: #eee; padding: 50px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 2fr) 1.5fr; grid-template-areas: "osama osama ahmed shady" "moh-i moh-moh moh-moh shady" "moh-i ezz ezz shady" "moh-s ibra gamal eman"; gap: 5px; } لجعل ال grid على مقاس الشاشة. سيكون من الجميل ان تقوم بعمل dynamic grid بحيث يقوم بإنشاء صفوف بشكل تلقائي وذلك إن اردت التدرب بشكل اعمق على الـ grid.
  10. عمر قره محمد
    يبدو انك لم تقم بمشاركة الكود الخاص بك
  11. عمر قره محمد
    ال (DOM) Document Object Model هو تمثيل لل Document بشكل Objects حتى يسهل التعامل معه بشكل برمجي، أي انه يمثل كل ما تراه على صفحة الويب بشكل Objects تستطيع الوصول له وتعديله برمجياً. مثال عليها document.getElementById("p1").innerHTML = "New text!"; اطلع اكثر عن الـ dom من خلال هذه المقالة :
  12. عمر قره محمد
    هل يمكنك مشاركة المجلد الحاوي على المشروع بالكامل
  13. عمر قره محمد
    مرحباً محمود عدل الوظائف الخاصة بإضافة مستخدم جديد للشكل التالي : async function fetchRandomUsers() { const response = await fetch('https://randomuser.me/api') const responseData = await response.json() const newUser = { user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`, // money: formatMoney(Math.floor(Math.random() * 1000000)) الكود القديم *************** money: Math.floor(Math.random() * 1000000) // الكود الجديد **************** } setData([newUser]); } // Add User const handleAdd = async () => { const response = await fetch('https://randomuser.me/api'); const responseData = await response.json(); const newUser = { user: `${responseData.results[0].name.first} ${responseData.results[0].name.last}`, // money: formatMoney(Math.floor(Math.random() * 1000000)) الكود القديم *************** money: Math.floor(Math.random() * 1000000) // الكود الجديد **************** }; setData([...data, newUser]); }; بحيث لا تقوم بفرمتت المال في هذه المرحلة، وإنما تقوم بفرمتته عند عرضه وذلك في المكون Main.jsx : import React from "react"; function Main({ data }) { // Format number as money function formatMoney(number) { return "$" + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,"); } return ( <div className='main'> <h2> <strong>Person</strong> Wealth </h2> {data.map((user, index) => ( <div key={index}> <h4 className='person'> <strong>{user.user}</strong> {formatMoney(user.money)} </h4> </div> ))} </div> ); } export default Main;
  14. عمر قره محمد
    NaN تنتج عن اجراء عملية حسابية بين نص ورقم وهي تعني (ليس رقماً) جرب تعديل الكود للشكل : // Double Money const doubleMoney = () => { const newData = data.map(user => { return {...user, money: Number(user.money) * 2} }); setData(newData); }; وجرب طباعة الـ user.money فإذا كانت تحتوي نصوص مثل $ أو غيرها فإنك بحاجة لحذف هذه النصوص قبل ضربها بـ 2. أما في هذه فالصفحة ترجع فارغة و لايظهر أي خطأ في الكونسول اعتقد ان سبب المشكلة هنا هو نفسه، حيث يبدو أن الـ item.money ليست رقماً قابل للمقارنة بل هي عبارة عن نص، ويجب عليك ان تقوم بطباعة الـ item.money للتأكد من اهنها رقم، وفي حال لم تكن رقماً يجب ان تحاول ان تحولها إلى رقم بحذف النصوص ثم استخدام الوظيفة : Number(item.money) واعتقد ان باقي المشاكل جميعها ترجع لنفس السبب، فعليك تحويل الـ money إلى رقم قبل اجراء كل هذه العمليات الحسابية. في حال لم تنجح بتحويل الـ money إلى رقم، ربما يكون من الافضل مشاركة ملفات المشروع بالكامل.
  15. عمر قره محمد
    نعم جيد، وسيكوف افضل إذا قمت بتعديل النص بحيث يصبح اكثر قابلة للقراءة، مثل تغيير لونه و تعديل التباعد بين السطور والاحرف وتغيير الخط وكذلك جعل لون الارقام الموجودة في الزوايا اكثر تبايناً حتى يظهر. وسيكون جميلاً لو قمت بتعديل الوان المشروع وإضافة بعض الـ border-radius لكل من العناصر المستخدمة.
  16. عمر قره محمد
    جرب تعديل الكود للشكل التالي : const [data, setData] = useState([]); async function fetchRandomUsers() { const response = await fetch("https://randomuser.me/api"); const responseData = await response.json(); // data عدلت اسم المتغير حتى لا يكون بنفس اسم الحال; const newUser = { user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`, money: Math.floor(Math.random() * 1000000), }; setData([...data, newUser]); return newUser; } useEffect(() => { // اضفت حلقة تتكرر 5 مرات ليتم اضافة 5 مستخدمين (async () => { const users = []; for (let i = 0; i < 5; i++) { const newUser = await fetchRandomUsers(); users.push(newUser); } setData(users); })(); }, []);
  17. عمر قره محمد
    عدل الكود للشكل : function App() { const [data, setData] = useState([]); async function fetchRandomUsers() { const response = await fetch('https://randomuser.me/api') const responseData = await response.json() // data عدلت اسم المتغير حتى لا يكون بنفس اسم الحالة const newUser = [ ...data, // الكود المضاف { user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`, money: Math.floor(Math.random() * 1000000) } ] setData(newUser) } useEffect(() => { // اضفت حلقة تتكرر 5 مرات ليتم اضافة 5 مستخدمين for (let i = 0; i < 5; i++) { fetchRandomUsers(); } }, []); وسيتم اضافة اكثر من يوزر والافضل هو ان تحضر عدد من المستخدمين العشوائيين في طلب واحد باستخدام الـ api : https://randomuser.me/api?results=10 بدلاً من احضار مستخدم عشوائي واحد اكثر من مرة
  18. عمر قره محمد
    لست بحاجة لمعرفة HTML , CSS قبل تعلم JavaScript الخاصة بدورة علوم الحاسوب، وذلك لأن JavaScript يتم شرحها في سياق أساسيات البرمجة وليس في سياق تطوير واجهات المستخدم، فلن تتعامل مع المتصفح و الـ HTML , CSS في هذا المسار وإن كنت تريد تعلم تطوير واجهات المستخدم فربما عليك التفكير بدورة تطوير واجهات المستخدم أو دورة تطوير التطبيقات باستخدام JavaScript.
  19. عمر قره محمد
    لقد قمت بالاطلاع على الـ api الذي قمت بمشاركته وهو يحتوي على user واحد فقط جرب الذهاب للرابط ومشاهدة النتيجة : https://randomuser.me/api أما إذا اردت احضار اكثر من user فأنت بحاجة لاستخدام الرابط التالي : https://randomuser.me/api/?results=20 حيث تضيف ال query المسماة results و تعطيها عدد المستخدمين الذين تريد الحصول عليهم وفي الرابط السابق اضفت العدد 20. جرب فتح الرابط السابق وستلاحظ ان الـ results هي مصفوفة تحتوي على 20 مستخدم مختلف.
  20. عمر قره محمد
    لم يتم ارفاق الsrc
  21. عمر قره محمد
    جرب استخدام الـ for..in مثل : const user = { name: 'John Doe', email: 'john.doe@example.com', age: 25, dob: '08/02/1989', active: true }; for (const key in user) { console.log(`${key}: ${user[key]}`); } في حال لم تعمل الطريقة السابقة، قم بمشاركة البيانات بالضبط حتى استطيع مساعدتك بالشكل الامثل.
  22. عمر قره محمد
    جيد جداً
  23. عمر قره محمد
    حسناً، قم بفتح المجلد الذي تم إنشاءه عندما قمت بإنشاء التطبيق كما اشرت إليك في تعليقي الاول.
  24. عمر قره محمد
    هذه رسالة مختلف و سبب المشكلة التي ظهرت لك هو عدم وجود script بالاسم start في الملف package.json الخاص بك. ولا يبدو انه هنالك اي كود في المجلد الخاص بك اصلاً، فهوي يحتوي على ملف package.json فارغ فقط فهل انت متأكد من انك قمت بإتباع كل الخطوات التي تتحدث عنها ؟ قم بالتعليق تحت فيديو الدرس الذي تتحدث عنه حتى استطيع معرفة المشروع الذي تحاول انشاءه.
  25. عمر قره محمد
    جرب ايقاف كل الـ plugins التي تستخدمها وانظر إن كان سيتم حل المشكلة. في حال حلت المشكلة بإيقاف الـ plugins فهذا يعني ان المشكلة في احد الـ plugins التي تستخدمها
×
×
  • أضف...