لوحة المتصدرين

حاولت فهم float و clear كثيرا ولم افهم

هل تعلم الfloat والclear مهم في css

السلام عليكم انا بدأت في دورة علوم الحاسوب والان في مسار تعلم البرمجه وبدأت في الچافا ولكن عندي سؤال لقد بدأنا مباشره بالچافا هل يجب تعلم ال html و css قبل البدأ بالچافا حسب بعض اراء المبرمجين ام لا؟ حيث انك دخلتم مباشره في شرح الچافا دون التطرق ل html

عندما افتح صفحه reactAPP تظهر لي مشكلة

السلام عليكم و رحمه الله لقد لاحظت ان for of loop تؤدي نفس وظيفه for each فتطرق الي ذهني ان اعرف الفارق بينهم و الاهم هي الحالات المختلفه لاستخدام كل منهما.

كيف يتم حفظ صوره بعد التعديل في لغة بايثون

style.cssindex.html هل هذا الكود جيد علما ان هذا ثالث يوم لي في تعلم الcss

شفت فيديو يقول لازم لما اتعلم برمجة مثلا الfunction في js لازم اني اضل استخدمها لمدة اسبوع كامل وشفت فيديوهات تقول لازم تهتم بالكورسات فقط في البداية(اي اول كم فيديو) وبعدها تطبق مشاريع والاشياء الي نسيتها تبحث عنها والاشياء الجديدة نفس الشئ تبحث عنها لان بهذه الطريقة سوف تحفض فقط الاشياء التي تستخدمها ايهم افضل برأيكم

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

السلام عليكم ما الفرق بين هذا الكود ReactDOM.render( <React.StrictMode> <h1>اهلا بك في حسوب</h1> </React.StrictMode>, document.getElementById('root') ); ---------------------------- const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <h1>اهلا بك في حسوب</h1> </React.StrictMode> );

انا اتعلم البرمجة اي وقت استطيع في اليوم وتركت اغلب النشاطات الاجتماعية التي اقوم بها بعض الاشخاص يقولون لي ان هذا سئ ولكن لا اعرف ماذا افعل اليوم استيقضت من النوف في منتصف الليل وانا في الفراش احاول حل مشكلة برمجية في عقلي لساعة كاملة لا استطيع ايقاف التفكير فيها والنوم ولكن اشعر اني سعيد بذلك نوعا ما (اقصد تعلم البرمجة لساعات طويلة في اليوم وليس التفكير اثناء النوم) احب ان اكون مشغولا دائما اكره ان يكون لي وقت فراغ واريد تعلم البرمجة بأسرع وقت. ماذا تنصحوني هل علي ان اقلل ام استمر

الفرق بين الأكواد هو أن الأولى تستخدم ReactDOM.render() لتقديم عنصر واحد في نهاية المطاف إلى عنصر HTML موجود في الصفحة. بينما الثانية تستخدم ReactDOM.createRoot() لإنشاء جذر جديد لتطبيق React وتقديم عناصر متعددة داخله. يعتبر استخدام ReactDOM.createRoot() أكثر كفاءة في بعض الحالات حيث يسمح بإعادة التقديم التلقائي (automatic re-rendering) والتحسينات الأخرى في React 18. والدالة ReactDOM.render() غير مدعومة في React 18. تصفح هذا النقاش.

كتبت الشفره كما في الدرس الثابق و كل شيئ صحيح لكن عند استخدام برنامج visual studio يظهر خطأ في كل مرة ارسلت صورة لتوضح لكم

بالإضافة ما ذكره أحمد، يجب مراعاة بعض القواعد الأساسية لكتابة الصيغ الصحيحة في Python. فيما يلي بعض الأمثلة على كيفية كتابة بعض الصيغ الأساسية بشكل صحيح في Python: 1- تعيين قيمة للمتغير: يمكن تعيين قيمة للمتغير في Python باستخدام العلامة (=) كما في المثال التالي: x = 5 2- استخدام الشرط: يمكن كتابة الشرط في Python باستخدام الكلمة المحجوزة if ، elif ، و else كما في المثال التالي: if x > 5: print("x is greater than 5") elif x == 5: print("x is equal to 5") else: print("x is less than 5") 3- استخدام الحلقات: يمكن استخدام الحلقات في Python باستخدام الكلمات المحجوزة for و while كما في المثال التالي: for i in range(10): print(i) x = 0 while x < 10: print(x) x += 1 4- استخدام الدوال: يمكن كتابة الدوال في Python باستخدام الكلمة المحجوزة def كما في المثال التالي: def add_numbers(x, y): return x + y result = add_numbers(3, 5) print(result) هذه بعض الأمثلة الأساسية للصيغ الصحيحة في Python. يجب مراعاة بعض القواعد الأساسية مثل عدم استخدام مسافات زائدة وتجنب استخدام الحروف الكبيرة في اسماء المتغيرات والدوال.

السلام عليكم. في الكود التالي أود أن أسئل بعض الأسئلة: function App() { const [data, setData] = useState([]); async function fetchRandomUsers() { const response = await fetch('https://randomuser.me/api') const data = await response.json() const newUser = [ { user: `${data.results[0].name.first} ${data.results[0].name.first}`, money: Math.floor(Math.random() * 1000000) } ] setData(newUser) } useEffect(() => { fetchRandomUsers(); }, []); عند تحديث الصفحة يظهر المستخدم الأول ثم يختفي بعد حوالي الثانية، لماذا. كيف يمكنني إظهار مستخدمين إثنين أو ثلاثة منذ تحديث الصفحة. (قمت بتجربة الكود التالي: useEffect(() => { fetchRandomUsers(); fetchRandomUsers(); fetchRandomUsers(); }, []); لكن في هذه الحالة يبقى مستخدم واحد يتغير كل ثانية) السؤال الأخير حول جودة الكود، هل هذا الكود قابل للتحسين و كيف ذلك. شكرا لكم.

1- بخصوص سؤالك حول ظهور المستخدم الأول ثم اختفاءه بعد ثانية، فإن ذلك يرجع إلى أن الدالة fetchRandomUsers تعيد تعيين قيمة الـ state data لتحتوي على مستخدم واحد فقط عند كل استدعاء. وبما أن fetchRandomUsers تستدعى في الـ useEffect بعد جزء صفحة المستخدم يتم تحميله، فإن الحالة الأولى التي تتم عرضها تحتوي على مستخدم واحد، ولكن يتم تحديث الحالة كل ثانية مما يتسبب في تغيير الحالة إلى حالة خالية من المستخدمين. لحل هذه المشكلة، يمكن تعيين القيمة الجديدة للـ state باستخدام الدالة setData بدلاً من إعادة تعيينها كما يلي: setData(prevState => [...prevState, newUser]) بذلك، يتم إضافة المستخدم الجديد إلى مصفوفة المستخدمين الموجودين بالفعل في الحالة بدلاً من استبدالهم بالمستخدم الجديد. 2- لإظهار مستخدمين إثنين أو ثلاثة منذ تحديث الصفحة، يمكن تعديل الـ fetchRandomUsers لتسترد أكثر من مستخدم واحد. مثلاً، يمكن استدعاء الدالة fetch مع عدد الأشخاص الذين نريد عرضهم، ثم تحويل النتيجة إلى مصفوفة من المستخدمين وإضافتها إلى state. على سبيل المثال: async function fetchRandomUsers(numUsers) { const response = await fetch(`https://randomuser.me/api/?results=${numUsers}`); const data = await response.json(); const newUsers = data.results.map(user => ({ user: `${user.name.first} ${user.name.last}`, money: Math.floor(Math.random() * 1000000) })); setData(prevState => [...prevState, ...newUsers]); } ثم يمكن استدعاء fetchRandomUsers(2) على سبيل المثال لاسترداد مستخدمين اثنين وإضافتهم إلى state. 3- بخصوص جودة الكود، يمكن تحسين الكود: من المستحسن استخدام try / catch في دالة fetchRandomUsers للتحقق من وجود أي أخطاء في طلب API ومعالجتها بشكل صحيح. التحقق من أن response.ok يساوي true قبل الاستمرار في دالة fetchRandomUsers للتأكد من عدم حدوث أي أخطاء في الطلب. يمكن تحسين الكود المسؤول عن تحويل البيانات التي تم إرجاعها من API (data.results) إلى قائمة مستخدمين جديدة. يمكن إعادة كتابة دالة useEffect لتفعيل الطلب عندما يتم تحديث numUsers بدلاً من تشغيلها مرة واحدة عندما يتم تحميل التطبيق. استخدام setState بشكل صحيح. تحتوي setData الحالية على مصفوفة فارغة ، لذلك يجب استدعاء setData مع newUsers بدلاً من [...prevState ، ...newUsers] لتحديث المصفوفة. وضع الدالة fetchRandomUsers خارج دالة App() ، حتى يمكن استخدامها في أي مكان في الكود. يمكن تحسين اسماء المتغيرات والدوال بشكل يعكس المعنى الذي يقوم به الكود. على سبيل المثال ، يمكن تسمية setData() بـ setUsers() ، وتسمية العنصر الحالي في useState() باسم users بدلاً من data. يمكن تحسين الكود عن طريق استخدام مكتبة axios لعملية الـ fetch، حيث توفر هذه المكتبة التحكم بالأخطاء بشكل أفضل. يمكنك استخدام async/await بدلاً من .then() لتبسيط الكود. قد يكون من الأفضل تمرير عدد الأشخاص الذين تريد جلبهم من خلال الـ fetchRandomUsers() بدلاً من تحديدها داخل الدالة. يمكنك إنشاء دالة منفصلة لمعالجة بيانات المستخدمين بدلاً من وضع الكود داخل دالة fetchRandomUsers(). إليك الكود بعد تحسينه: import axios from 'axios'; import { useState, useEffect } from 'react'; function App() { const [data, setData] = useState([]); async function fetchRandomUsers(numUsers) { try { const response = await axios.get(`https://randomuser.me/api/?results=${numUsers}`); const newUsers = response.data.results.map(user => ({ user: `${user.name.first} ${user.name.last}`, money: Math.floor(Math.random() * 1000000) })); setData(prevState => [...prevState, ...newUsers]); } catch (error) { console.error(error); } } useEffect(() => { fetchRandomUsers(10); }, []); return ( <div> {data.map((user, index) => ( <div key={index}> <p>{user.user}</p> <p>{user.money}</p> </div> ))} </div> ); } export default App;

أجل, فإن npm start هو المسؤل عن تشغيل المشروع

يظهر الخطأ لوجود عدة عدة أخطاء في الكود الخاص بك وسيكون حلها كالتالي : أولا عليك بحذف <<< و ... من الكود الخاص بك قم بمسح هذا السطر تماماً enter your guess-8 قم بتصحيح اسم المتغير في الشرط الخاص ب if الثانية #قبل if user mama == my_number: #بعد if user_mama == my_number: من المفترض في النهاية أن يكون الكود كالأتي : my_number= 9 user_mama=int(input('enter your guess')) if user_mama > 0: if user_mama == my_number: print('You Win!') elif user_mama == my_number +1 or user_mama == my_number -1 : print('so close') else: print('You Lose!!!') else: print('enter a positive number.') اذا كان هذا السؤال تابع لأحد الدورات فيفضل السؤال تحت الفيديو حتي نستطيع مساعدتك. بالتوفيق

اغلب الظن أنك لم تقوم بتشغيل المشروع عبر الأمر npm start يمكنك تجربة الأمر ومن ثم ان لم يعمل معك المشروع يمكنك تصوير شاشة الterminal وإرفاقها

هل يمكنك مشاركة الكود حتي نستطيع مساعدتك

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

يختلف التطبيق على البرمجة حسب ما تعلمته كما قلت ال function في js عند دراستها مثلاً قم بتطبيق برنامج صغير هلى مفهوم ال function بحيث تعرف الأهمية من هذا المفهوم من خلال مواقع تقدم العديد مت التدريبات على لغات البرمجة على جزئيات ومفاهيم معينة فمثلاً ستجد تطبيق على ال function فقط وهذه المواقع مثل CodeChef Coderbyte Codewars CodinGame Geektastic وبعد التقدم في الدورة التدريبية بحيث يمكنك التطبيق على جزء كبير من الدورة من خلال تطبيق أكبر حيث يغطي جميع المفاهيم التي قمت بدراستها فمثلاً قمت بدراسة جزء كبير من لغة javascript يمكنك التطبيق على مشروع أكبر مثل JavaScript Calculator. : يمكنك بناء هذا التطبيق عند دراسة ال operators JavaScript Weather App.: يمكنك بناء هذا التطبيق عند دراسة ال Ajax JavaScript Form Validation.: يمكنك بناء هذا التطبيق عند دراسة ال Form Validation Build an Interactive Landing Page: يمكنك بناء هذا التطبيق عند دراسة ال dom لذلك الأفضل هو التدريج في حجم التطبيق حيث أن التطبيق على جزء صغير من الدورة مثل function يختلف عن حجم التطبيق عند دراسة جزء أكبر من الدورة كما يمكنك الإستفادة من المصادر التالية https://io.hsoub.com/programming/578-كيف-تبدء-البرمجة-كبتدء-من-الصفر-الى-تعلم-لغات-كبيرة-ك-جافا-و-غيرها https://academy.hsoub.com/programming/general/كيف-تتعلم-البرمجة-نصائح-وأدوات-لرحلتك-في-عالم-البرمجة-r206/#نصائح-لتعلم-البرمجة

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

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

لا تستهون أبدًا بالتحسن التدريجي بشكل يومي فخلال فترة ستجد نفسك تقوم بإنشاء موقع كامل، هناك بعض النقاط التي يمكن تحسينها في الكود: يجب عليك استخدام الألوان بطريقة أفضل. يمكنك استخدام الخاصية border-color لتحديد لون الحدود بدلاً من استخدام الخاصية border-top و border-right و border-bottom و border-left. يمكنك تحسين تنسيق الكود عن طريق إزالة المسافات الزائدة وإضافة تعليقات للمساعدة في قراءة الكود عود نفسك على ذلك. وهناك أمور متقدمة نسبيًا يمكنك أخذها في الحسبان بعد فترة وهي استخدام قيم ثابتة للأبعاد والمواقع بل يجب عليك استخدام القيم النسبية مثل النسبة المئوية والـ em والـ rem لضمان أن يعمل التصميم بشكل جيد على مختلف أحجام الشاشات. بشكل عام، إذا كان هذا ثالث يوم لك في تعلم CSS، فأنت على الطريق الصحيح. يجب عليك متابعة التعلم والممارسة بانتظام لتحسين مهاراتك في CSS. وإليك بعض الدروس التي ستساعدك في تحسين مهارات CSS لديك.

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

جرب تعديل الكود للشكل التالي : 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); })(); }, []);

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

عدل الكود للشكل : 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 بدلاً من احضار مستخدم عشوائي واحد اكثر من مرة

الخاصية float تُستخدم لوضع العنصر في مكان مُعين إما أقصى اليمين أو أقصى اليسار , سيمكنك فهم الأمر بشكلٍ أفضل عند قراءة المثال التالي <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <p><img src="test.jpg" style="width:170px;height:170px;margin-left:15px;"> يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p> </body> </html> في هذا المثال إن قمت بتطبيقه لديك ستلاحظ ظهور الصورة وتحتها النص, ماذا لو أردنا ظهور الصورة على اليمين والنص بجانبها؟ أجل مثلما فكرت سنقوم بعمل float للصورة ناحية اليمين فبالتالي سيظهر النص على يسارها بدلًا من ظهوره اسفلها <!DOCTYPE html> <html> <head> <style> img { float: right; } </style> </head> <body> <p><img src="test.jpg" style="width:170px;height:170px;margin-left:15px;"> يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p> </body> </html> فائدة الclear هي إلغاء تأثير الfloat من بعض عنصر معين, ماذا نعني هنا؟ كما تلاحظ عندما قمت بكتابة float: right للصورة , فإن أي عنصر سيأتي بعد الصورة سيكون على يسارها, ماذا إن أردنا بعد ذلك وضع عناصر ولكن لا نريد ظهور تلك العناصر على يسار الصورة وإنما هي عناصر مختلفة نريدها ان تنزل تحت بشكلٍ عادي؟ هنا نستخدم الخاصية clear , لتوضيح الأمر فلننظر إلى المثال التالي <!DOCTYPE html> <html> <head> </head> <body> <p><img src="pineapple.jpg" style="width:170px;height:170px;margin-left:15px;float:right;"> يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p> <img src="pineapple.jpg" style="width:170px;height:170px;margin-left:15px;float:right;"> <p> يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p> </body> </html> هنا أردنا وضع صورة أخرى على اليمين وبجانبها نص مثلما عملنا في الصورة التي فوقها, ولكن المشكلة سنجد ان الصورة ستظهر بجانب الصورة الاولى بدلًا من الظهور تحتها وعلى يسارها النص, وذلك بسبب تأثير الfloat الخاص بالصورة الأولى, ولحل تلك المشكلة يجب إزالة تأثير الfloat الخاص بالصورة الأولى وذلك عبر الخاصية clear فنكتب clear:right ليصبح الشفرة البرمجية بالشكل التالي <!DOCTYPE html> <html> <head> </head> <body> <p><img src="pineapple.jpg" style="width:170px;height:170px;margin-left:15px;float:right;"> يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p> <img src="pineapple.jpg" style="width:170px;height:170px;margin-left:15px;float:right;clear:right"> <p> يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p> </body> </html>

– تُستخدم خاصية الـ float لتحديد موقع العنصر (سواء على الجانب الأيسر أو الأيمن من المحتوى). مثال توضيحي لذلك: <style> .container { border: 1px solid #000; height: 92px; padding: 15px; } .container .left { float: left; background-color: #e10000; color: #fff; padding: 15px; border-radius: 5px; } .container .right { float: right; background-color: #2722c8; color: #fff; padding: 15px; border-radius: 5px; } </style> <div class="container"> <div class="left">Float Left</div> <div class="right">Float Right</div> </div> قيم خاصة float: يمكن أن تحتوي خاصية الـ float على إحدى القيم التالية: none: (الإفتراضى): العنصر لا يطفو على أيًا من الجانبين (سيتم عرضه فقط في مكان حدوثه في النص). right: يطفو العنصر إلى يمين الحاوية left: يطفو العنصر إلى يسار الحاوية inherit: يرث العنصر قيمة تعويم أصله (أبيه). خاصة clear: – تحدد خاصية الـ clear العناصر التي يمكن أن تطفو بجانب العنصر الذي تم مسحه وعلى أي جانب. الطريقة الأكثر شيوعًا لاستخدام خاصية الـ clear هي بعد استخدام خاصية الـ float على عنصر. إذا تم تحريك عنصر إلى اليسار ، فيجب عليك تطبيق خاصية الـ clear إلى left. إذا تم تحريك عنصر إلى اليمين، فيجب عليك تطبيق خاصية الـ clear إلى right. مثال للتوضيح: <style> .container { border: 2px solid #00F; padding: 5px; } .container .paragraph { float: right; border: 2px solid #F00; margin: 0; width: 50%; } .container .clear_right { clear: right; background-color: #acacac; margin: 0; } </style> <div class="container"> <p class="paragraph">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Sed porttitor lectus nibh.</p> <p class="clear_right">Paragraph with clear right!</p> </div> الخرج: قيم الخاصة clear: none: (افتراضي): يمسح العناصر العائمة على كلا الجانبين right: يتم وضع العنصر أسفل العناصر العائمة اليمنى left: يتم وضع العنصر أسفل العناصر العائمة اليسرى both: يتم وضع العنصر أسفل كل من العناصر العائمة اليمنى واليسرى ملاحظة صغيرة: إذا كان العنصر أطول من العنصر الذي يحتويه ، وكان float، فإنه يتجاوز خارج الحاوية. لكن يمكنك حل هذه المشكلة عن طريق إستخدام خاصية overflow = auto المزيد من التفصيل في حسوب: الخاصة float, الخاصة clear بالتوفيق إن شاء الله

أجل , تعلم الcss بخصائصها على وجه العموم مهم, فحتى مع وجود أطر العمل والمكاتب مثل bootstrap لازلت ستحتاج إلى عمل العديد من التنسيقات بنفسك لذا من المهم أن تفهم تنسيقات وخصائص الcss جيدًا وعلى وجه الخصوص فإن الخاصية float من الخاصيات المُهمة في الcss نظرًا إلى أن وظيفتها بسيطة وهي أن تقوم بجلب المحتوى في إتجاه معين, فهذا شئ شائع جدًا وقد تحتاجه في أوقات كثيرة لذا من الأفضل فهمه جيدًا , والخاصية clear تُستخدم بشكلٍ شائع جدًا مع الخاصية float لذا تعلمها أيضًا مهم كذلك, وإن كان هنالك شئ معين في تلك الخواص تواجه صعوبة فيه يُمكنك وضع سؤال جديد تسأل فيه عن الجزئية التي تواجهك صعوبة فيها

أهلا بك يا أيمن من المهم فهم جميع الخصائص في css، لاسيما عند استخدام مكاتب css لتطوير الواجهات الأمامية. فإذا كنت تكتب الكود بنفسك، قد تستطيع تنسيق ملفاتك بأشكال مختلفة مستغنياً عن float و clear، أما إن جاءك كود لتقوم بالتعديل عليه أو استخدمت مكتبة من المكاتب، فهنا أنت مضطر أن تتعامل مع كود جاهز، فلا شكّ أنّه يجب عليك أن تكون ملمّاً بكل تفاصيل css. بالتوفيق إن شاء الله

يجب معرفة أن JavaScript هي لغة برمجة عالية المستوى والتي تستخدم على نطاق واسع في تطوير تطبيقات الويب والتي تعتبر من أهم لغات البرمجة في العالم. وتتميز JavaScript بأنها لغة برمجة متعددة الاستخدامات حيث يمكن استخدامها لتطوير تطبيقات الويب والمواقع الإلكترونية، ويمكن استخدامها أيضًا لتطوير تطبيقات سطح المكتب وتطبيقات الهواتف الذكية والأجهزة اللوحية. وتتميز JavaScript بسهولة استخدامها وتعلمها وبتوفيرها للمطورين مكتبات وأدوات عديدة تساعدهم على تطوير تطبيقات الويب بسهولة وبأداء عالي وتجربة مستخدم ممتازة. وتستخدم JavaScript للتفاعل مع صفحات الويب وإضافة الإثارة والديناميكية لتجربة المستخدم، وللتحقق من صحة الإدخالات وتحقيق المزيد من التفاعلات مع المستخدم. وتستخدم JavaScript أيضًا للتحكم في الأحداث والتفاعلات في صفحات الويب ولإجراء الحسابات الرياضية والعمليات المعقدة الأخرى والتعامل مع البيانات. وتوفر JavaScript أيضًا مكتبات مثل jQuery وReactJS وAngularJS وغيرها التي تساعد على تسهيل عملية تطوير تطبيقات الويب بشكل كبير. ولذلك فهي ليست لغة بالمتصفح فقط كما كانت من قبل، بل أصبح بالإمكان فعل أي شيء بها. أيضًا، يمكن استخدام لغة الجافاسكريبت JavaScript في تطوير تطبيقات الهواتف الذكية وأجهزة الكمبيوتر اللوحية وتطبيقات سطح المكتب. ويمكن استخدامها في تطوير تطبيقات الهواتف الذكية باستخدام إطارات عمل كما React Native وIonic Framework. ويمكن استخدامها في تطوير تطبيقات سطح المكتب باستخدام إطارات عمل مثل Electron وNW.js. وعلى الرغم من أن JavaScript تستخدم بشكل رئيسي في تطوير تطبيقات الويب، فإن إمكانياتها تمتد إلى مجالات أخرى مثل تطوير تطبيقات سطح المكتب وتطبيقات الهواتف الذكية. ويتم شرح الأساسيات بها لكونها مستمرة معك في أغلب الدورات الأخرى وستحقق استفادة فعلاً من تعلمها في أساسيات علوم الحاسب.

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

لست بحاجة لمعرفة HTML , CSS قبل تعلم JavaScript الخاصة بدورة علوم الحاسوب، وذلك لأن JavaScript يتم شرحها في سياق أساسيات البرمجة وليس في سياق تطوير واجهات المستخدم، فلن تتعامل مع المتصفح و الـ HTML , CSS في هذا المسار وإن كنت تريد تعلم تطوير واجهات المستخدم فربما عليك التفكير بدورة تطوير واجهات المستخدم أو دورة تطوير التطبيقات باستخدام JavaScript.

إن javascript لا تعتمد في عملها على ال html, css و بالتالي يمكنك استعمالها و تعلمها بدون معرفة ما سبق. يمكنك تنفيذ أكواد ال javascript في ال console الخاص بالمتصفح أو بعض المحررات مثل vscode يوفر إضافات لتنفيذ أكواد ال javascript. و في هذه الدورة كما ذكر المدرب محمد لا يتم تعليم تصميم المواقع في هذا المسار، و بالتالي لا داعي لتعلم ال html, css. كما أنه يمكنك لاحقاً تعلم html, css و استعمال ال javascript للتعديل فيهما.

ما يتم شرحه في مسار تعلم البرمجة الموجود في دورة علوم الحاسوب لا يحتاج منك ان تكون على علم ب html و css حيث لن يتم التعامل مع المتصفح خلال المسار وبالتالي لن نحتاج الى المعرفة ب html و css , نحتاج الى معرفة css و html عندما نتعامل مع المتصفح, يوجد مسار كامل عن التعامل مع المتصفح, اسم المسار إلى عالم الويب, يمكنك الان الاستمرار بمسار أساسيات البرمجة دون القلق من معرفة html او css

لقد قمت بالاطلاع على الـ api الذي قمت بمشاركته وهو يحتوي على user واحد فقط جرب الذهاب للرابط ومشاهدة النتيجة : https://randomuser.me/api أما إذا اردت احضار اكثر من user فأنت بحاجة لاستخدام الرابط التالي : https://randomuser.me/api/?results=20 حيث تضيف ال query المسماة results و تعطيها عدد المستخدمين الذين تريد الحصول عليهم وفي الرابط السابق اضفت العدد 20. جرب فتح الرابط السابق وستلاحظ ان الـ results هي مصفوفة تحتوي على 20 مستخدم مختلف.

عفوا src.zip

أنت تستخدم في مشروعك الإصدار الخامس من مكتبة بوتستراب بينما في المثال الذي أرفقته يستخدمون الإصدار الرابع، هناك بعض الإختلافات في النافذة المنبثقة، في الإصدار الرابع يستخدمون data-toggle بينما في الإصدار الخامس يستخدمون data-bs-toggle نفس الشيء بخصوص data-target لذلك حتى تعمل النافذة المنبثقة بشكل صحيح عليك إستبدال التالي في الروابط التشعبية a التي تحيط الصور: data-toggle="modal" بـ: data-bs-toggle="modal" و: data-target="#image-gallery" بـ: data-bs-target="#image-gallery" نفس الشيء بخصوص زر إخفاء النافذة المنبثقة: data-bs-dismiss="modal" و أيضاً عليك تغيير الصنف float-left إلى float-start حتى تتموضع أيقونات الأسهم بشكل صحيح.

الأفضل هو الإعتماد المكتبات الجاهزة والتي تم إختبارها، وبها العديد من الخيارات، إذا كنت تبحث عن معرض lightbox فبإمكانك الإعتماد على المكتبات التالية: https://www.lightgalleryjs.com/ https://lokeshdhakar.com/projects/lightbox2/ https://blueimp.github.io/Gallery/ أو يمكنك الإعتماد على مكتبة أكثر تقدمًا ويتم استخدامها بكثرة، وهي Swiper: https://swiperjs.com/swiper-api

كما أخبرك مصطفى في التعليق السابق فإنه يمكنك استخدام ال map مع data.results بدون مشكلة حيث ال data.results هو مصفوفة كما في التوثيق الرسمي لل API من خلال هذا الرابط والبرنامج يعمل كما في الصورة التالية

بالإضافة للمهارات الأساسية التي تم شرحها في التعليقات السابقة. يجب عليك تعلم الأدوات والتقنيات التالية أدوات التشفير: برنامج يستخدم التشفير لمنع الوصول غير المصرح به إلى المعلومات الرقمية. يستخدم التشفير لحماية المعلومات الرقمية الموجودة على أجهزة الكمبيوتر بالإضافة إلى المعلومات الرقمية التي يتم إرسالها إلى أجهزة الكمبيوتر الأخرى عبر الإنترنت. أدوات فحص ثغرات الويب برنامج مكافحة الفيروسات من الجيل التالي: يرتقي ببرامج مكافحة الفيروسات التقليدية إلى مستوى جديد ومتقدم من الحماية الأمنية لنقاط النهاية. فهو يتجاوز توقيعات البرامج الضارة المعروفة والمستندة إلى الملفات والاستدلال لأنه نهج مرتكز على النظام وقائم على السحابة. جدار الحماية من الجيل التالي: جدار حماية عميق لفحص الحزمة يتجاوز فحص المنفذ / البروتوكول والحظر لإضافة فحص على مستوى التطبيق ، ومنع التطفل ، وجلب المعلومات الاستخبارية من خارج جدار الحماية. منع فقدان البيانات (DLP) عبارة عن مجموعة من الأدوات والعمليات المستخدمة لضمان عدم فقدان البيانات الحساسة أو إساءة استخدامها أو الوصول إليها من قبل المستخدمين غير المصرح لهم. يصنف برنامج DLP البيانات المنظمة والسرية والحاسمة للأعمال ويحدد انتهاكات السياسات التي تحددها المؤسسات أو ضمن حزمة سياسة محددة مسبقًا ، مدفوعة عادةً بالامتثال التنظيمي مثل HIPAA أو PCI-DSS أو GDPR.

في البداية يجب معرفة أن الهكر الأخلاقي هو في الأساس مبرمج بارع، أي يجب إتقان البرمجة والتدرج فيها. وسأعطيك مخلص سريع للخريطة: قم بتعلم اللغات البرمجية المهمة للأمن السيبراني مثل Python. تعلم أساسيات الشبكات مثل TCP / IP و DNS و DHCP و HTTP و HTTPS و SSL / TLS. دراسة المفاهيم الأساسية للأمن السيبراني، ومنها أنواع الهجمات والأدوات المستخدمة فيها وكيفية تحليل الثغرات وإصلاحها. تحديد مجالات الأمن السيبراني التي تهمك وتخصص فيها، مثل الهجمات الاجتماعية والاختراق والحماية من الفيروسات والبرمجيات الخبيثة وتطوير البرمجيات الآمنة. يمكن أن تساعد الحصول على شهادات معتمدة في تحقيق الهدف المنشود، فهي تعطيك المعرفة والخبرة اللازمة للعمل في مجال الأمن السيبراني. : تساعد الدورات التدريبية في تحديث معرفتك وتطوير مهاراتك في مجال الأمن السيبراني. يمكن للمشاركة في المسابقات والمجتمعات الخاصة بالأمن السيبراني أن تمنحك الفرصة لتحسين مهاراتك وتبادل الخبرات مع الآخرين في المجال. ومن الممكن أن أتحدث وأسرد لك 1000 سطر، لكن ذلك حديث على غير علم وخبرة وتجربة، لهذا: الأفضل الاستماع لأهل الخبرة وأنصحك بقراءة الدليل الشامل التالي للخبير الأمني محمد عبد الباسط النوبي، بعنوان ١٠١ - دليلك فى البرمجة ومجال امن وحماية واختبار اختراق تطبيقات الويب وستجد به كل ما تحتاج معرفته. وأنصحك أيضًا بقراءة النقاش الخاص به على منصة حسوب I\O وهو نقاش ثري أجاب فيه على الكثير من الأسئلة، ويحتاج منك إلى تركيز واستيعاب كبير.