كل الأنشطة

هذا صحيح لان العنصر اللي واخد position: absolute يتحرك بالنسبة للأب، لازم الأب يكون عنده position: relative (أو أي قيمة غير static مثل relative, او absolute, أو fixed). و اذا كان الأب ليس position: relative أو أي قيمة غير static → العنصر الـ absolute هيتعامل مع أقرب عنصر أب لديه position غير static، و اذا لم يجد اي اب سوف يتحرك بالنسبة للـ صفحة نفسها (body/html). و لنأخذ مثال: <div class="parent"> <div class="child">أنا مطلق - absolute</div> </div> // CSS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>. .parent { width: 200px; height: 200px; background: lightblue; position: relative; /* 👈 مهم */ } .child { position: absolute; top: 20px; left: 20px; background: coral; } هنا الـ .child هيتحدد مكانه 20px من فوق و 20px من اليسار بالنسبة للأب .parent.

لتتفعل خاصية postoin absolute يجب ان يكون الأب بتاعو postoin relateve صحيح ؟

وعليكم السلام ورحمة الله وبركاته. الفرق الأساسي بين تصميم الواجهات بدون برمجة والتصميم بالبرمجة هو مثل المهندس المعماري الذي يقوم بتصميم شكل المبنى وأبعاده وكل شئ يخصه وبين المهندس الإنشائي الذي يأخذ هذا التصميم ثم يقوم بتنفيذه وبناء هذا البناء . حيث تصميم الواجهات بدون برمجة يركز على التصور والشكل وتجربة المستخدم بينما يركز التصميم بالبرمجة على تحويل هذا التصور إلى موقع حقيقي يعمل. فمصمم الواجهات (UI/UX Designer بدون كود): هو المسؤول عن كيف سيبدو التطبيق وكيف سيشعر المستخدم عند استخدامه وأفضل تصميم يناسب المستخدم ويقوم بعمل أبحاث المستخدم ويرسم تدفق الاستخدام (User Flow) ويصمم كل شاشة وكل زر بالأبعاد وكل شئ. ويقوم بإنتاج ملفات تصميم على Figma أو Adobe XD يتم تسليمها للمطورين وبالنسبة لسوق العمل فإن الطلب عليه مرتفع جدا حيث لا يمكن لأي شركة اليوم بناء منتج جيد بدون مصمم UI/UX محترف. أما مطور الواجهات الأمامية (Front-End Developer بالكود): هو الشخص الذي يأخذ تصميم ال UI/UX ويحوله إلى كود حقيقي يتفاعل معه المستخدم ويقوم بإنتاج كود برمجي لموقع أو تطبيق ويب وبالنسبة لسوق العمل فأيضا الطلب عليه مرتفع جدا فهو الوسيلة لتحويل التصميم إلى موقع حقيقي يمكن إستخدامه. وفي الشركات يعمل الاثنان معا المصمم يسلم تصميمه إلى المطور والذي يحول هذا التصميم إلى كود.

السلام عليكم لدي سؤال في الفترة الاخيرة لاحظت دورات تصميم او تعليم (تصميم واجهات المستخدم بدون برمجة) مالفرق بينها وبين التصميم ببرامج تحتاج اكواد وبرمجة ؟ "هل الاثنين متساويان في سوق العمل؟ الرجاء توضيح الفرق بينهما، وشكرًا لكم."

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

اذا اردت ان أقوم بأنشاء كائن يحتوي على قيم خاصة ولكن بشكل حرفي بدون انشاء دالة للبناء فكيف يمكنني ذالك //تعريف الكائن مع القيم الخاصة عن طريق دالة بناء function Person (name , age , gender){ //هنا قمنا باستخدام let بدل this لنبين انة قيمة خاص let id = Math.fllor(Math.random()*10) this.name = name, this.age = age, this.gender = gender //هنا قمنا ببناء دوال للقراءة او التعديل على القيمة id المعرف سابقا على انة خاص Object.defineProperty(this,"id",{ get:function(){return id}, set:function(value){id = value} }) } const person = new Person("feras",26 , "male") //تعريف الكائن مع قيم خاصة بدون دالة بناء //؟؟؟؟؟؟؟؟؟؟؟؟؟؟

يجب استيعاب آلية عمل كل منهما أولاً، فباستخدام خاصية position مثل relative, absolute, fixed مع خصائص الإزاحة top, left, right, bottom، فأنت تقوم بتغيير مكان العنصر ضمن تخطيط الصفحة. حيث position: relative تعمل على تحريك العنصر بصريًا من مكانه الأصلي، لكن المتصفح لا يزال يحجز مساحته الأصلية في تدفق الصفحة، والعناصر الأخرى لا تتأثر ولا تملأ الفراغ الذي تركه. بينما position: absolute أو position: fixed يتم إخراج العنصر بالكامل من تدفق الصفحة، والعناصر الأخرى تتصرف وكأنه غير موجود وتملأ مكانه، ويصبح العنصر وكأنه يطفو فوق الصفحة. ونستخدم position: relative تمهيدًا لاستخدام position: absolute حيث يتم تحريك العنصر تبعًا لأقرب عنصر أب له به يمتلك خاصية position: relative. ستحتاج إلى تجربة تلك الخواص عمليًا لتفهم آلية عملهم بشكل واضح، قم بتجربة التالي، اختر اضغط على كل خاصية لترى تأثيرها، وقم بعمل سكرول في الصندوق لتفقد هل تؤثر أي منها عند التحرك صعودًا وهبوطًأ في الصفحة؟ https://developer.mozilla.org/en-US/docs/Web/CSS/position ونستخدم خاصية position من أجل تصميم هيكل الصفحة أي تحديد مكان العناصر في الصفحة، بينما خاصية transform: translate() نستخدمها من أجل تأثيرات الحركة أو أي تغيير بصري لا نريده أي يؤثر على بقية عناصر الصفحة، حيث تلك الخاصية هي جزء من مجموعة التحويلات transform، وهي تعمل في مرحلة لاحقة من عرض الصفحة، لأنّ transform: translate(x, y) تقوم بتحريك العنصر بصريًا فقط دون أن تغير مكانه أو حجمه المحجوز في تخطيط الصفحة، أي بالنسبة للمتصفح، لا يزال العنصر في مكانه الأصلي ضمن تدفق المستند، وكل ما يحدث هو أن المتصفح يقوم برسم العنصر في مكان جديد، ولذلك لا تؤثر إطلاقًا على أماكن العناصر الأخرى المحيطة. قم بتجربة تأثيرها هنا: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

السلام عليكم ورحمه الله وبركاته هل في مراجعة ل مسار الذكاء الاصطناعي ؟ مع العلم انو انا عملت مراجعة بأهم مواضيع الدورة بس بدي للإستزادة لو في

‏السلام عليكم ورحمة الله وبركاته كيف أستطيع متابعة هذه الدورة كشخص كفيف يعني ببساطة كيف أعرف الأكواد المكتوبة طبعا أنا تعلمت بايثون ولكن اشتركت بهذه الدورة حتى أقوى من مهاراتي فكيف أتابع هذه الدورة وكيف أعرف الأكواد المكتوبة أنا نشرت مقترح في مركز المساعدة لكن إلى حد الآن لم يرد علي

لم افهم بضبط متى استعملهما

كما من إسم الخاصيتين فإن position هي الموضع أى تستطيع التحكم في تموضع العنصر ضمن تدفق المستند أى يمكنك تحريك العنصر بناء على صفحة العرض بأكملها وبناء على القيمة نفسها. أما translate فهي تحريك . أى تقوم بتحريك العنصر من مكانه الحالي أى يتم التحريك بالنسبة لموضعه الأساسي وليس من الصفحة بأكلمها وهي تشبه وضع قيمة relative للخاصية position. إذا قم باستخدام position عندما تريد تغيير تخطيط الصفحة وقم باستخدام translate لتحريك العنصر من مكانه الأساسي.

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

قلت لي انه يوجد postion فقط لنقل المحتوى ولكن حتا translate تنقل محتوى

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

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

انا الان فاهم جميع الخصائص في css لكن عند انشاء مشروع بتتخلبط لأنها كثيرة ومعرفش ايش استعمل هل هذا سببه عدم رؤيتي للمشاريع واذا كانت هذه مشكلتي مالحل قلت لي انه يوجد postion فقط لنقل المحتوى ولكن حتا translate تنقل محتوى

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

متى تستخدم هذه الخاصية لأنه يوجد العديد من الخصائص التي تنقل المحتوى فمن كثرتها تلفت لي

إن خاصية display في CSS هي واحدة من أهم الخصائص التي تتحكم في كيفية عرض العناصر في صفحة الويب لديك وفهمها جيدا سيساعدك كثيرا في تنسيق وتصميم صفحاتك. ففي كل عنصر HTML له قيمة display افتراضية block أو inline وخاصية display تسمح لك بتغيير هذا السلوك الافتراضي. وإليك القيم لتلك الخاصية : display: block; حيث العناصر التي تأخذ هذه الخاصية تسمى عناصر كتلية و خصائصها: تبدأ دائما على سطر جديد. وهي تشغل كامل عرض الحاوية المتاحة لها دونالنظر إلى محتواها حتى لو كان النص قصيرا. يمكن تحديد width و height و margin و padding لها من جميع الاتجاهات. ونستخدمها للعناصر الرئيسية في هيكل الصفحة التي نريد أن تأخذ مساحة كاملة وتكون منفصلة عن غيرها. فلو وضعت عنصرين <div> تحت بعضهم كل منهم سيكون في سطر منفصل. display: inline; والعناصر التي تأخذ هذه الخاصية تسمى عناصر مضمنة وخصائصها: لا تبدأ على سطر جديد بل تظهر بجانب العناصر الأخرى في نفس السطر. تشغل فقط العرض والمساحة الخاصة بالمحتوى. لا يمكن تحديد width و height لها. ونستخدمها لتنسيق جزء من النص داخل عنصر آخر دون أن يأخذ سطر منفصل. display: inline-block; وهذه القيمة تجمع بين مميزات الخاصية block و inline وخصائصها: مثل inline: لا تبدأ على سطر جديد وتصطف بجانب العناصر الأخرى. مثل block: يمكنك تحديد width و height و margin و padding لها من جميع الاتجاهات. ونستخدمها عندما نريد عدة عناصر بجانب بعضها في سطر واحد ولكن نحتاجها في نفس الوقت للتحكم في أبعادها ومساحاتها الفارغة. display: none; هذه القيمة تقوم بإخفاء العنصر تمامًا من الصفحة وخصائصها: العنصر يختفي وكأنه لم يكن موجودا في الأساس. المساحة التي كان يشغلها العنصر تحذف، وتتحرك العناصر الأخرى لتملأ هذا الفراغ. display: flex; عندما نضع display: flex على عنصر حاوية (parent) فإن العناصر التي بداخله (children) تصبح مرنة (flex items) وهذا يمنحك تحكم كامل و قوي في محاذاتها وترتيبها وتوزيع المسافات بينها. display: grid; عندما نضع display: grid على عنصر حاوية يمكنك تقسيم هذه الحاوية إلى شبكة من الصفوف والأعمدة ثم وضع العناصر بداخل خلايا هذه الشبكة بدقة.

الأفضل بالطبع أن تتمكن منها قبل الإنتقال للمشاريع العملية حيث لن يتم شرح الأساسيات فيها بل يتم التطبيق مباشرة على ما تم تعلمه. إن ال position هي خاصية مهمة جدا حيث لا غنى عنها أبدا في أى مشروع فهي المسؤولة عن تموضع العناصر في الصفحة . والأمر بسيط وليس معقد إذا فهمته بشكل جيد ستجد أن الأمور بسيطة جدا. لهذا الأفضل إعادة الدرس لحين فهمها بشكل كامل وأنصحك بالتطبيق مع نفسك والتلاعب بالقيم لفهم الأمر بشكل أفضل. وإليك شرح أكثر حول الأمر : https://wiki.hsoub.com/CSS/position https://wiki.hsoub.com/CSS/transform

انا لم اتمكن جيدا من position بصفة عامة ولا اعرف متى استخدمها وايضا transform لأنني لا اعرف متى استخدم هذا او هذا ويوجد العديد من الاشياء وهذا كله وانا انتهيت من اساسيات تطوير الويب فقلت هل يجب ان اقوي نفسي هذه الاشياء ام انتقل للقسم الذي بعده واقويها مع الاستاذ من خلال المشاريع

الف شكراا جدا لحضرتك جزاك الله كل خير

الف شكراا جدا لحضرتك جزاك الله كل خير

https://t.me/+PeWaMSzJGpk1ZGI0 هذا رابط مجتمع على تلجرام تقدري تدخلي عليه https://t.me/+PeWaMSzJGpk1ZGI0 https://t.me/+PeWaMSzJGpk1ZGI0 https://t.me/+PeWaMSzJGpk1ZGI0 اتمنى الناس تدخل وتضيف اي شخص مشترك في هذه الدورات ونتشجع سويا نكمل المحتوى ونتعلم واذا شخص فقد الشغف نساعد بعض

ال DOM في جافاسكريبت فقط وظيفتها الأساسية هي الحصول على العناصر والتلاعب بها فالأمر بسيط وليس بالأمر المعقد. وإليك الدروس والمقالات التالية لمزيد من التفاصيل والشروحات حول ال DOM :