محمد Fahmy

تفضل هذه بعض النصائح التي قد تساعد في إيجاد وحل مشاكل CSS: ١- تحقق من صحة بنية ملف الـ CSS الخاص بك، و التأكد من عدم وجود أية أخطاء أو نقص في القواعد. ٢- تأكد من أن كل العناصر التي تريد تنسيقها تم تعيينها بالشكل الصحيح في الـ HTML الخاص بك، و تعيين الـ class أو الـ id الصحيحة لها. ٣- تأكد من أن لديك فهم جيد لترتيب العناصر في CSS، لأن هذا يعتبر جزءًا مهمًا من انشاء التصميم الصحيح. ٤- استخدم أدوات التصحيح، مثل برامج Inspect Element، و إداة التصحيح المدمجة فى محرر نصوصك لمساعدتك فى تحديد المشاكل العامة في تصميمك.

لا، لن يقتل الذكاء الاصطناعي المبرمجين الصغار، بل سيساعدهم في التعلم وتطوير مهاراتهم. فالذكاء الاصطناعي يعتمد بشكل كبير على الخبرة والمهارات التي يتم تدريبه عليها، وبالتالي يحتاج إلى المبرمجين الذين يمكنهم تدريبه وتوجيهه. كما أنه يمكن استخدام الذكاء الاصطناعي لتسريع عملية تطوير البرامج والمواقع وتحسين تصميم الواجهات الرسومية وتجربة المستخدم. لذلك، يمكن القول بأن الذكاء الاصطناعي سيساعد المبرمجين الصغار على النمو والتعلم في هذا المجال. أنصحك بقراءة هذه المقالة. وهذا النقاش. هل حقا الإستعانة بمساعد الذكاء الإصطناعي في البرمجة تجعل الأكواد غير آمنة؟ - حسوب I/O (hsoub.com)

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

طريقة التعلم تختلف من شخص لأخر لذلك لا تقلق و لا تضيع وقتك في مثل هذه الأسئلة فليس هناك أفضل طريقة, إذا كنت تستفيد من طريقتك فلا تغيرها. ولكن من وجهة نظري, من الأفضل بالتأكيد الاستمرار على نفس النمط الذي تتبعه الآن. لكن إذا كان الوقت الذي تقضيه في التطبيق يبدو كثيراً عليك ، يمكنك محاولة تحليل سبب ذلك ، وتحديد المشكلة التي تواجهها في التطبيق ، ثم العمل على معالجة تلك المشكلة. و يمكنك مشاهدة الفيديو وتطبيقه خلال نفس الجلسة ، أو القيام بذلك في جلسة تطبيق منفصلة. المهم في النهاية أن تفهم الدرس فالطريقة التي تستخدمها ليس مهمة, ولا تخاف من تضيع الوقت (فهذه مشكلة المبتدئين) فقط تعلم و قم بالتطبيق علي ما تعلمته. هذا الفيديو يوضح الموضوع بتفصيل أكثر. يمكنك تصفح هذه النقاشات لوجهات نظر أخري. هل الوقت مهم في تعلم البرمجه - حسوب I/O (hsoub.com)

صديقي يجب أن تحدد الغاية من التعلم فبعد تعلمك أساسيات تطوير الويب يجب أن تحدد إذا كنت تريد أن تصبح مطور واجهات مستخدم Front End Developer أو مطور اجهات الخلفية Back-End أو مطور الشامل Full-Stack. وهذة نبذة عن كل تخصص. الواجهات الأمامية Front-End الواجهات الخلفية Back-End المطور الشامل Full-Stack وهذه المقالة تشرح الموضوع بالتفصيل. وإذا كنت تحب مشاهدة الفيديوهات إليك هذه الفيديوهات التي تشرح الموضوع بالتفصيل.

هذا السؤال يتطلب إجابة شاملة لكني سأحاول إعطائك بعض المعلومات الهامة الخاصة بـ Flutter و React Native أولاً، سنتحدث عن Flutter. هذه المنصة أنشأتها شركة جوجل وهي مفتوحة المصدر وتحتوي على مجموعة قوية من المكتبات والمراحل التي تسمح بتطوير تطبيقات معقدة بسهولة. يستخدم Flutter لغة برمجة دارت Dart، وهي لغة قوية وسهلة الفهم. Flutter: - تم تطويره من قبل شركة جوجل ويعتبر نسخة جديدة تمامًا من البرمجة النصية. - يستخدم لغة الدارت Dart وهي لغة برمجة تم تصميمها خصيصًا لتطوير التطبيقات على Flutter. - يتميز بإمكانيات التصميم والرسومات المتقدمة. - الأداة الجديدة جدًا وليست في حالة الاستقرار الكاملة. - يحظى بشعبية كبيرة ودعم من قبل مجتمع تطوير البرمجيات. ومن الناحية الأخرى، React Native التي أنشأتها فايسبوك هي منصة أيضاً مفتوحة المصدر وسهلة الإستخدام، ولديها مجتمع قوي يقدم الدعم المستمر ويتحديث بشكل منتظم. تستخدم React Native لغة برمجة جافاسكريبت JavaScript وتعد جافاسكريبت لغة برمجة شائعة ولا تتطلب الكثير من الوقت والموارد لتعلمها. React Native: - يقدمه فريق فيسبوك. - يستخدم JavaScript جنبًا إلى جنب مع ReactJS. - يتميز بإمكانيات الإعادة استخدام المكونات والعرض السريع. - يحظى بشعبية كبيرة ودعم من قبل مجتمع تطوير البرمجيات. إجابتي الشخصية: إطار العمل Flutter أو React Native فكلاهما جيد ولكن إذا كنت تريد العمل في شركات أو حتي العمل في منصات العمل الحر مثل مستقل أنصحك بتعلم Flutter فهو حالياً الأكثر طلباً في السوق لذلك أنصحك أن تترك إطار العمل React Native وتبدأ من الأن في تعلم إطار العمل Flutter. وهذه بعض المصادر التي سوف تفيدك في رحلتك لتعلم إطار العمل Flutter. ما هو افضل مصدر لتعلم flutter ؟ - حسوب I/O (hsoub.com) أفضل مصادر تعلم flutter بالعربي - حسوب I/O (hsoub.com)

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

إذا كنت تعرف أساسيات لغة البايثون، فجانجو سيكون خيارًا جيدًا لتعلّم تطوير المواقع. فبعد تعلم أساسيات البايثون، يمكنك التحول إلى تعلّم إطار العمل جانجو (Django Framework) وتعلّم العناصر الأساسية، مثل نماذج البيانات (Data Models) ، والفصل بين المستويات (Views) وطلبات الويب (Web Requests) ، وعناصر الواجهة الأمامية (Frontend Components) مثل HTML وCSS وجافا سكربت. ولكن يجب أن تحدد مسارك حتي لاتتردد في تعلم أي تقنية فعند تحديد المسار الذي تريد العمل فيه وقتها سوف تعرف التقنية التي يجب تعلمها. مثلا إذا أردت أن تصبح مطور واجهات خلفية يفضل أن تتعلم إطار العمل Django إذا كنت قد حددت مسبقاً أنك تريد تطوير الواجهات الخلفية باستخدام لغة بايثون. وإذا أردت أن تستخدم لغة JavaScript يمكنك تعلم إطار العمل ExpressJS. ولكن إذا أردت أن تصبح مطور واجهات أمامية هذه الصورة توضح الطريق بالتفصيل. يفضل أن تشاهد هذه الفيديوهات فهي تشرح الموضوع بالتفصيل. وسوف تجد في هذا الدليل كل التفصيل عن عن التقتنيات التي التي يجب تعلمها لتطوير واجهات المستخدم و لتطوير الواجهات الخلفية باستخدام بايثون ولغات أخري.

يوجد في الإجابات السابقة الكثير من النصائح ولكن لدي وجهة نظر أخري. هناك مقولة تقول "إذا لم تستطع شرح فكرتك لطفل عمره ست سنوات، فهذا يعني أنك أنت لا تفهمها". ويمكنك تطبيق هذه المقولة علي البرمجة مثلا قم بعمل قناة علي اليوتيوب وأشرح فيها HTML و CSS أو قم بعمل مشاريع (قناة متخصصة في عمل مشاريع HTML و CSS و JavaScript (مستقبلاً)). يوجد قناة بنفس الفكرة اسمها "Online Tutorials", يمكنك أخذ بعض الافكار منها أو حتي قم بالتطبيق علي المشاريع الموجودة في هذه القناة (لتطوير مهاراتك في HTML و CSS). أما بالنسبة للمدة المطلوبة للتطبيق، فإن هذا يعتمد على درجة الجهد التي تبذلها وعدد الساعات التي تخصصها للعمل على المشاريع. من المهم أن تأخذ الوقت اللازم للتعلم والتطبيق، وأن تعمل على تحديد الأهداف الواقعية لنفسك وتنفيذها خطوة بخطوة لتحقيق نجاحك المستقبلي في عالم البرمجة. ويمكنك أخذ بعص الأفكار من هذه المقالة. وهذا النقاش يتكلم في نفس الموضوع.

سبب المشكلة هي أن الكود لا يستطيع الوصول إلى قاعدة البيانات JSON server ولحل هذه المشكلة قم بعمل import لقاعدة البيانات في تطبيق React وقم بالتعديل على الكود لكي يستخدم البيانات من الimport بدل من عمل طلبات requests لسيرفر json server حل آخر هو عمل api حقيقي وتقوم برفعه على إستضافة وتستعمله بدلا من json server في كل الطريقتين يجب أن يصل كود React إلى البيانات التي يقوم بعرضها وإلا سيظهر خطأ بعدم إمكانيته للوصول للبيانات.

لا نقوم بحل الاسئلة الامتحانية، قوم بحل السؤال بنفسك وفي حال حصل معك خطأ ما فيمكنك مشاركة الخطأ الحاصل و الكود.

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

لن تحتاج إلى مواصفات عالية لتعلم برمجة المواقع, للأنك سوف تستخدم لغات مثل HTML و CSS و JavaScript, كل ما سوف تحتاجة متصفح وأنصحك باستخدام microsoft edge وبالنسبة لمحررر الأكواد أنصحك ب VScode. ولكن يفضل أن تكون بذاكرة وصول عشوائي (RAM) بحد أدنى 4 جيجا بايت. وهذه الفيديوهات تشرح الموضوع بالتفصيل ويفضل ان تتصفح هذه النقاشات. https://io.hsoub.com/programming/36291-الحاسوب-المناسب-للبرمجة-الذي-سأشتريه

تتضمن القواعد الأساسية التالية التي يجب عليك اتباعها في العمل الحر: 1- تحديد المدة الزمنية لإنجاز العمل: يجب عليك تحديد المدة الزمنية المناسبة لإنجاز العمل قبل بدء العمل. يجب أن يتضمن ذلك الوقت اللازم لإعداد وتصميم الموقع، وكذلك الوقت الإضافي المحتمل للمراجعة والتعديلات (إذا لزم الأمر). 2- اتفاق على التفاصيل الكاملة للمشروع: يجب عليك تحديد التفاصيل الكاملة للمشروع، بما في ذلك المحتوى المطلوب، تصميم الصفحات، والوظائف التي يجب توافرها على الموقع. 3- الاتفاق على سعر العمل: يجب عليك تحديد سعر العمل المناسب قبل بدء العمل والتأكد من وجود اتفاق واضح بينك وبين العميل حول السعر المتفق عليه. 4- استلام الدفعة المقدمة: يجب عليك طلب دفعة مقدمة قبل بدء العمل. يمكن أن تشكل هذه الدفعة نسبة من الإجمالي أو مبلغًا ثابتًا. 5- عمل تقارير شفافة: يجب عليك إنشاء تقارير شفافة بشأن تقدم العمل، ومتابعة التحديثات والتعديلات التي يطلبها العميل برسوم إضافية (إذا ﻻزم ذلك). 6- الاتفاق على نظام الدفع: يجب أن يتم الاتفاق مع العميل على نظام الدفع وكيفية استلام المدفوعات من العميل، ومدة إرجاع المدفوعات (إذا لزم الأمر). يتم تسليم المشاريع في مجال العمل الحر بالنسبة للمبرمج من خلال اتفاق مسبق بين المبرمج والعميل حول طريقة التسليم والمواعيد المحددة لذلك. قد يتم استخدام منصات إلكترونية مثل مستقل لتسهيل عملية التسليم والتواصل بين المبرمج والعميل. ويمكن أن يشمل عملية التسليم تسليم الشفرة المصدرية (source code) وأية وثائق أخرى ذات صلة، والتأكد من قبول العميل للمشروع وتوقيعه على الاستلام. ومن المهم على المبرمج العمل على تقديم المشروع بأعلى جودة ممكنة والإلتزام بالمواعيد المحددة لتحقيق رضى العميل وجعله يرغب في التعامل معه مجدداً في المستقبل. وهذه بعض الكتب المهمة جداً إذا أردت أن تجعل العمل الحر مصدر دخلك الأساسي ولكي تعرف أكثر عن كيفية التتعامل مع العميل و كيف تحفظ حقك بالكامل.

الكود الخاص بك جيبد ولكن ليس منظم بشكل جيد, غير أنك لا تحتاج إلى استخدام الخاصية grid-template-areas. أنظر إلي هذا الكود وقارن بينه وبين الكود الخاص بك وسوف تتعلم الكثير. HTML <!DOCTYPE html> <html lang="en" style="font-family: Arial, Helvetica, sans-serif"> <head> <meta charset="UTF-8" /> <title>CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="layout"> <div class="grid"> <div class="item-a"> <p class="name">Osama Mohamed</p> <p class="job">Full-Stack Developer</p> <p class="about"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit arcu sed erat cursus, eu rutrum nisl rhoncus. Morbi semper purus in justo tempus volutpat. Pellentesque dui eros, vulputate eget dui eget, imperdiet mollis justo. Cras dignissim libero sed velit efficitur porta. </p> <p> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim eros sed dolor elementum malesuada. Nulla malesuada tempus libero rutrum accumsan. Fusce consectetur enim vitae ex fermentum, ut maximus sem congue. Donec laoreet semper mi id accumsan. Nulla accumsan faucibus lorem, et ultrices risus pharetra eu. Nullam sit amet lorem ac libero commodo dapibus eu vel velit. </p> <span>&#8243;</span> </div> <div class="item-b"> <p class="name">Ahemd Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Duis ullamcorper rutrum posuere. Mauris a dolor sed tortor consequat laoreet. Sed condimentum, erat porta sagittis blandit. </p> <p> Suspendisse consequat a justo quis vulputate. Quisque pharetra neque tempus augue consectetur pharetra. Curabitur lobortis aliquet turpis eget blandit. Fusce vel vulputate libero. </p> <span>&#8243;</span> </div> <div class="item-c"> <p class="name">Shady Nabil</p> <p class="job">Full-Stack Developer</p> <p class="about"> Vivamus consequat ultrices ante finibus dignissim. Fusce tincidunt suscipit tortor ac suscipit. Suspendisse vehicula accumsan libero, ac lobortis risus vehicula a. Nam eget orci nunc. Aliquam facilisis, urna vitae molestie dapibus, ante nisl efficitur quam, et efficitur sem elit vitae sem. Cras egestas malesuada metus sit amet sollicitudin. </p> <p> Sed ut viverra augue, vel tincidunt metus. Phasellus ac suscipit odio. Aliquam vehicula augue sed euismod vehicula. Curabitur luctus neque a enim commodo, ut posuere orci viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque id elementum mi. Fusce metus lectus, iaculis et est quis, condimentum ornare urna. </p> <span>&#8243;</span> </div> <div class="item-d"> <p class="name">Mohamed Ibrahim</p> <p class="job">.Net Developer</p> <p class="about"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit arcu sed erat cursus, eu rutrum nisl rhoncus. Morbi semper purus in justo tempus volutpat. </p> <p> Pellentesque dui eros, vulputate eget dui eget, imperdiet mollis justo. Cras dignissim libero sed velit efficitur porta sit amet a urna. Sed ex sapien, finibus sed erat a, sodales tristique mauris. Phasellus vel finibus ligula. Nunc at magna non sem finibus accumsan eget eu dui. Nam ac enim quis elit dignissim dictum. In et laoreet diam, at dignissim mi. Ut iaculis nisi libero, tempor tincidunt libero rhoncus ac. </p> <span>&#8243;</span> </div> <div class="item-e"> <p class="name">Mahmoud Mohamed</p> <p class="job">Full-Stack Developer</p> <p class="about"> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim eros sed dolor elementum malesuada. Nulla malesuada tempus libero rutrum accumsan. Fusce consectetur enim vitae ex fermentum, ut maximus sem congue. </p> <p> Donec laoreet semper mi id accumsan. Nulla accumsan faucibus lorem, et ultrices risus pharetra eu. Nullam sit amet lorem ac libero commodo dapibus eu vel velit. Cras in arcu orci. Ut vitae dolor non dolor volutpat eleifend. Maecenas lacinia, velit eu iaculis iaculis, sem nisi mollis ex, a imperdiet lorem dolor nec augue. </p> <span>&#8243;</span> </div> <div class="item-f"> <p class="name">Ezz Eldin</p> <p class="job">Front-End Developer</p> <p class="about"> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim eros sed dolor elementum malesuada. Nulla malesuada tempus libero rutrum accumsan. Fusce consectetur enim vitae ex fermentum, ut maximus sem congue. </p> <p> Donec laoreet semper mi id accumsan. Nulla accumsan faucibus lorem, et ultrices risus pharetra eu. Nullam sit amet lorem ac libero commodo dapibus eu vel velit. Cras in arcu orci. Ut vitae dolor non dolor volutpat eleifend. Maecenas lacinia, velit eu iaculis iaculis, sem nisi mollis ex, a imperdiet lorem dolor nec augue. </p> <span>&#8243;</span> </div> <div class="item-g"> <p class="name">Mohamed Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Ut porttitor tincidunt erat, id facilisis purus hendrerit eget. Duis id dolor sit amet enim dapibus ornare. </p> <p> Nulla ut magna a nibh congue pulvinar. Morbi id augue arcu. Integer eu bibendum tortor. </p> <span>&#8243;</span> </div> <div class="item-h"> <p class="name">Ibrahim Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Vivamus consequat ultrices ante finibus dignissim. Fusce tincidunt suscipit tortor ac suscipit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit arcu. </p> <span>&#8243;</span> </div> <div class="item-i"> <p class="name">Gamal Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim. </p> <p> Donec vulputate tellus id lacus hendrerit semper. Phasellus dignissim eros sed dolor elementum malesuada. </p> <span>&#8243;</span> </div> <div class="item-J"> <p class="name">Eman Sayed</p> <p class="job">IOS Developer</p> <p class="about"> Vivamus consequat ultrices ante finibus dignissim. Fusce tincidunt suscipit tortor ac suscipit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit arcu. </p> <span>&#8243;</span> </div> </div> </div> </body> </html> CSS * { box-sizing: border-box; padding: 0; margin: 0; } .layout { background-color: #eeeeee; padding: 40px; font-family: Arial, Helvetica, sans-serif; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, auto); gap: 10px; } .grid div { background-color: #ffffff; padding: 30px 20px; border-bottom: 3px solid #f54e1f; position: relative; } .grid div span { font-size: 60px; position: absolute; bottom: -25px; right: 10px; color: gray; } div p { line-height: 1.5; } .name { font-weight: bold; margin-bottom: 2px; font-size: 20px; } .job { color: gray; font-weight: bold; margin-bottom: 15px; } .about { font-weight: bold; margin-bottom: 15px; font-size: 18px; } .item-c, .item-e, .item-h { background-color: black !important; color: #ffffff !important; } .item-a { grid-column: 1 / span 2; grid-row: 1 / 2; } .item-e { grid-column: 2 / span 2; grid-row: 2 / 3; } .item-f { grid-column: 2 / span 2; grid-row: 3 / 4; } .item-d { grid-column: 1 / 2; grid-row: 2 / span 2; } .item-c { grid-column: 4 / 5; grid-row: 1 / span 3; }

الـinnerText والـinnerHtml هما خاصيتان في JavaScript تستخدم لتحديث عناصر HTML. الفرق بينهما هو أن innerText يمكنه تعيين النص الموجود داخل العنصر، بينما يُستخدم الـinnerHtml لتحديث كافة عناصر HTML الموجودة داخل العنصر. innerText <p id="example">Welcome!</p> let example = document.getElementById("example"); example.innerText = "Hello World!"; النتيجة ستكون: <p id="example">Hello World!</p> innerHtml <div id="example"></div> let example = document.getElementById("example"); example.innerHTML = "<h3>Hello World!</h3>"; النتيجة ستكون: <div id="example"> <h3>Hello World!</h3> </div> ملاحظة: يجب توخي الحذر عند استخدام الـinnerHtml لأنه يمكن استخدامه لإدخال رمز ضار (مثل الهجوم XSS). لذا يجب التأكد من مصدر ومحتوى النص الذي تقوم بإدخاله.

DOM هو اختصار لـ Document Object Model وهو عبارة عن مجموعة من الأدوات والتقنيات التي تسمح للمطورين بالتفاعل مع صفحات الويب وتغيير محتواها وخصائصها باستخدام جافا سكربت. يمثل DOM هيكلية الصفحة كشجرة تحتوي على عناصر HTML وCSS وJavaScript، حيث يمكن للمطور استخدام DOM للوصول إلى هذه العناصر والتلاعب بها بشكل ديناميكي ويمكنك تصفح هذه المقالة لتفصيل أكثر.

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

يمكن استخدام هذه التقنيات بشكل منفصل أو مجتمعة في التصميم، حسب الحاجة والغرض من التصميم. - Grid: تستخدم لتقسيم الصفحة إلى شبكة من الأعمدة والصفوف، وتسهل تنظيم المحتوى بشكل دقيق وسريع. يعتبر Grid أحدث تقنية في CSS لإنشاء تخطيطات مرنة وديناميكية. - Flexbox: تستخدم لتحديد اتجاه عرض العناصر داخل عنصر واحد أو على مستوى المستند بأكمله، مثل صف أو عمود. يساعد Flexbox في إنشاء تخطيطات مرنة وسهلة التعديل. - Float: تستخدم لتحديد موضع العناصر داخل عنصر واحد، حيث يتم تطبيق خاصية float على العنصر المطلوب نقله إلى جانب آخر. يستخدم Float بشكل أساسي في إضافة صور أو نص بجانب بعضها البعض. لا يوجد تقنية أفضل من الأخرى، فالاختيار يعتمد على طبيعة التصميم والغرض منه.

نعم، لغتي HTML و CSS مهمتان جدًا لتطوير التطبيقات باستخدام JS. فهما يشكلان الأساس الذي يقوم عليه تصميم وتطوير صفحات الويب والتطبيقات. إذا كنت ترغب في تطوير تطبيقات ويب متقدمة باستخدام JS ، فإنه من المهم أن تعرف HTML و CSS بشكل جيد وأن تحترفهما. ولكن إذا كان هدفك هو فقط إنشاء بعض الصفحات البسيطة ، فإن الاساسيات قد تكفي. أما بالنسبة للاستخدام المستمر لأحد أطر العمل مثل React أو Angular أو Vue.js ، فإن دراية جيدة بـ HTML و CSS ستساعدك على فهم كيفية عرض المحتوى في التطبيقات ، ولكن لا يجب أن يؤثر ذلك على اختيار الإطار المستخدم. لا لن يتم تعليمك الوسوم والخاصيات في دورة تطور التطبيقات باستخدام JS وهذا ما سوف تتعلمه في هذه الدورة. أساسيات لغة JavaScript أساسيات React.js أساسيات Node.js تطوير تطبيق جوال باستخدام React Native تطبيق دردشة يشبه WhatsApp تطوير تطبيق سطح مكتب باستخدام Electron.js إنشاء تطبيق أسئلة وأجوبة باستخدام Next.js تطوير تطبيق جوال للتواصل الاجتماعي باستخدام Ionic تطبيق حجز مناسبات باستخدام GraphQL ويمكنك التعمق في HTML و CSS من خلال دورة تطوير واجهات المستخدم.

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

يوجد الكثير من المصادر لتعلم Flexbox وقد ذكر مصطفي أغلبها ولكن إذا كنت تفضل الفيديوهات يوجد بعض القنوات العربية والأنجليزية علي اليوتيوب التي تشرح Flexbox بطريقة جيدة, ويوجد علي موقع حسوب i/o هذا النقاش الذي بعنوان "هل تريد تعلم Css Flexbox حتى الإحتراف ؟ إليك هذه المصادر" يوجد به الكثير من المصادر العربية والتي هي عبارة عن فيديوهات تشرح كل خواص Flexbox بالتفصيل. ونصيحتي لك أن تتعلم أيضا Grid System فهو يستخدم أيضا لترتيب عناصر HTML في الصفحة وهذه بعض المصادر إذا أردت تعلمه. CSS Flexbox او CSS GRID?

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

لقد تم شرح طريقة عمل الخاصية float و clear في الإجابات السابقة, لكن أنصحك بأن لا تستخدم هذه الخواص في ترتيب العناصر في صفحة, بل يفضل أن تستخدم الخاصية Flexbox لتحديد مواضع العناصر في صفحة الويب فهي أسهل وأفضل و من السهل التحكم في موضع العناصر بها. تعريف خاصيةFlexbo خاصية Flexbox هي واحدة من الخصائص الأساسية في CSS التي تستخدم لترتيب العناصر في صفحة الويب بطريقة مرنة وسهلة. تسمح هذه الخاصية للمطورين بتحديد كيفية توزيع وتنظيم عناصر HTML داخل عنصر والتحكم في موقعها وحجمها. للاستفادة من خاصية Flexbox ، يجب أولًا تعريف عنصر يحتوي على العناصر التي نود ترتيبها. يمكن استخدام خاصية "display: flex" لإضافة Flexbox إلى هذا العنصر. بعد ذلك ، يمكن استخدام Flexbox لتحديد كيفية توزيع العناصر داخل هذا العنصر. مثال علي Flexbox: HTML: <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> CSS: .container { display: flex; } .item { flex: 1; } في هذه الحالة، ستظهر العناصر (Item) في نفس الصف وستوزع بشكل متساوٍ على طول المسافة المحجوزة للأب (Container). ويمكنك التعمق أكثر في تعلم خاصية Flexbox من خلال هذه المقالات والنقاشات. https://wiki.hsoub.com/تصنيف:CSS_Flexbox https://io.hsoub.com/programming/119549-التحكم-في-العناصر-باستخدام-الصندوق-المرن-flexbox-الجـــــزء-الأول https://io.hsoub.com/programming/32672-هل-تريد-تعلم-css-flexbox-حتى-الإحتراف-إليك-هذه-المصادر

أعتقد أن هذه المشكلة تحدث عندما يكون لديك برنامج قارئ الشاشة مفعل في نظام التشغيل الخاص بك. يقوم PowerShell بتعطيل PSReadLine لتحسين التوافق مع برامج قراءة الشاشة. إذا كان هذا هو السبب وكنت ترغب في استخدام PSReadLine، يمكنك تعطيل قارئ الشاشة أو استخدام PowerShell ISE بدلاً من PowerShell console. ويمكنك استخدام PowerShell ISE من خلال الضغط زر الويندوز + R, سوف تفتح لك نافذة RUN قم بكتابة الأمر التالي ثم أضغط Enter. PowerShell ISE وسوف يتم فتح نافذة PowerShell ISE.