كل الأنشطة

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

كما من إسم الخاصيتين فإن 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 :

انا اشتركت في واجهة المستخدم وتطوير تطبيقات باستخدام جافا سكربت وبدأت بواجهة المستخدم ودرست اساسيات html and css and js واقترح علي احد الاساتذة بما انني مشترك في دورة تطوير تطبيقات باستخدام جافا سكربت ان ادرس اساسيات لغة javascript هنالك ولكن عند تصفح لم اجد درس عن شجرة dom كيف ادرسها كاملتا لأن في دورة واجهة المستخدم موجودة في فديو فيه ربع ساعة وغير شاملة لكل شيء وشكرا

المشاريع الخاصة بجانغو نستخدم بها API بالفعل، فلا يوجد مشروع واجهة خلفية بدون API، الفكرة أننا قمنا بتطوير الواجهة الأمامية أيضًا من خلال جانغو عن طريق محرك القوالب الخاص به، ولو تجاهلت ذلك الجزء، ستجد أننا قمنا بإنشاء API أي مسارات ومتحكمات لمعالجة الطلبات الواردة. أي لو أردت تطوير واجهة خلفية لمشروع آخر من خلال جانغو، تستطيع ذلك لا مشكلة، ستقوم بتطوير المشروع كما فعلنا في الدورة ولكن بدون الجزء الخاص بالواجهة الأمامية. نفس الحال بالنسبة لمشاريع Flask. وفي حال تقصد Django REST Framework فلم يتم التطرق إليه في الدورة، لكنه يعتمد على جانغو لذا بتعلم جانغو فقد تعلمت نسبية كبيرة من ذلك الإطار. ستجد تفصيل هنا:

هل فيما بعد عند تنفيذ مشروع لعميل أو من أجل بناء معرض أعمالك ستقوم بنسخ هيكل مشروع ما؟ بالطبع لا، يجب أن تتعلم طريقة تهيئة المشروع وتهيئة بيئة العمل. لكن يجب التفرقة بين الـ Boilerplate وبين تهيئة المشروع، حيث الـ Boilerplate هو هيكل المشروع والأكواد الأساسية اللازمة لإنشاء مشروع react مثلاً، ولا حاجة لفعل ذلك بنفسك، حيث ستقوم بتنفيذ أمر بسيط يقوم بذلك بشكل تلقائي: npm create vite@latest my-react-app -- --template react ما يجب عليك استيعاب هيكل المشروع الذي تم إنشائه وليس تجاهله، بمعنى تستوعب لماذا تم إنشائه بهذا الشكل، لكي تتمكن من التعديل عليه وتطوير المشروع، وتتجنب وضع ملفات في المكان الغير صحيح. بينما مشاريع الويب من خلال HTML, CSS و webpack مثلاً، فتحتاج إلى تعلم كيفية تهيئة المشروع من الصفر، حيث لا يوجد هيكل أساسي لتلك المشاريع، وهي الأساس الذي يُبنى عليه، لذا تعلم الطريقة الصحيحة لهيكلة المشروع والأسلوب المُتعارف عليه وتستطيع التعديل عليه كيفما تريد لكن ليس بالشكل الذي يجعله صعب الفهم من قبل الآخرين.

كل عنصر HTML هو بمثابة صندوق، وخاصية display تحدد كيف سيتصرف وكيف سيؤثر على الصناديق التي حوله، وأهم القيم هي: 1- display: block حيث تحول العنصر إلى نوع block والذي يستحوذ على كامل عرض السطر المتاح له ويبدأ دائماً على سطر جديد، وله الخصائص التالية: يمكنك تحديد width و height له. تستطيع تطبيق margin و padding عليه من كل الجهات. يدفع العناصر التي تأتي بعده إلى سطر جديد. 2- display: inline تحول العنصر إلى نوع inline والذي يستحوذ فقط على المساحة التي يحتاجها بقدر المحتوى الذي بداخله، ويبقى على نفس السطر مع العناصر الأخرى. وخصائصه: لا يمكنك تحديد width أو height له حيث يتجاهلهما. margin-top و margin-bottom ليس لهما تأثير. يبقى بجانب العناصر الأخرى في نفس السطر. 3- display: inline-block تحول العنصر إلى مزيد بين النوعين السابقين، بحيث يبقى على نفس السطر مع العناصر الأخرى مثل inline، ولكن تستطيع تحديد width و height و margin و padding له بالكامل مثل block. وتستخدم ذلك في حال تريد عناصر بجانب بعضها البعض ولكن مع التحكم الكامل في أبعادها. ولكن ستعتمد على ما سبق بنسبة قليلة، فحاليًا flexbox وgrid هما الأساس، أي القيم التالية: display: flex display: grid وبالطبع تحتاج إلى دراسة الأساسيات الخاصة بهم لتستطيع استخدامهم بكفاءة. وتوجد قيمة أخيرة وهي . display: none التي تقوم بإزالة العنصر من الصفحة بالكامل وكأنه غير موجود، أي لا تخفيه بل تزيله.

عليك باستخدام Laravel Breeze لأنه تم إطلاقها في 2021، وتستخدم مكوناتBlade و Alpine.js وVite، والتصميم الإفتراضي يعتكد على TailwindCSS ويمكن استبداله، ولاستخدام Bootstrap يتطلب الأمر تعديلات تستغرق حوالي 5 إلى 10 دقائق. وتوفر تسجيل دخول، تسجيل مستخدم، إعادة تعيين كلمة المرور، تأكيد البريد، وremember me، ومكوناتBlade قابلة لإعادة الاستخدام، وتنسيق منفصل عن الـ CSS. وبما أنها تعتمد على Vite فالتحميل أسرع، ويتم تقسيم ملفات CSS وJS، وتدعم لارافل 10 وما بعده، وما زالت تحصل على تحديثات مستمرة لكونها مكتبة حديثة. ومن حيث الصيانة فهي أكثر سهولة لأن Breeze يعتمد على الـ components والـ middleware الحديث. بينما Laravel UI تم نشرها في 2019، وتعتمد على قوالب Blade التقليدية وتستخدم Laravel Mix وهي أداة تحزيم قديمة ولم تعد تستخدم، وتعتمد على بوتستراب بشكل إفتراضي أي بخصوص إعداد المشروع فلن تستغرق وقت بسبب إعتمادها على بوتستراب. وتوفر نفس الوظائف، لكن بدون الـ email verification المدمج في Breeze وتستطيع إضافته يدويًا، والقوالب جاهزة ولكنها أحادية أي لا توجد مكونات. وبما أنها تعتمد على Laravel Mix فحجم الملفات أكبر قليلاً والأداء أقل كذلك. وبخصوص الصيانة فتحتاج تعديلات يدوية أكثر عند ترقية لارافل إلى إصدار حديث.

لن تستطيع ذلك، الأفلام والمواد الإبداعية محمية بموجب حقوق الطبع والنشر، أي يجب أن يدفع المستخدم للاستفادة منها سواء بالمشاهدة أو الاستخدام، ولن تتمكن من رفع الموقع على Netlify وGitHub بسبب انتهاك حقوق الغير، أي حتى لو تم رفعه سيتم غلقه من قبلهم، وذلك بسبب تطبيق سياسات DMCA وهو قانون أمريكي لحماية الحقوق الرقمية. كل ما يمكنك فعله هو وضع معلومات عن الأفلام وطريقة لمشاهدتها بشكل قانوني. في حال تتساءل عن مواقع الأفلام التي تنشر أفلام مسروقة، فلا يمكن مساعدتك مساعدتك في ذلك بالطبع.

اجابة

في البرمجة المشاهدة شيء والتطبيق العملي شيء آخر تمامًا، بكل صراحة لن تتعلم البرمجة بالمشاهدة فقط، عليك تقسيم الدرس أو الشرح إلى أجزاء طالما مدته طويلة، ثم التوقف والتطبيق. أو لو لديك القدرة، قم بمشاهدة الشرح وتطبيق ما جاء به بالكامل بمفردك، أو التطبيق على مشروع أو تمرين آخر لتوظيف ما تعلمته، المهم هي الممارسة العملية، ستتفاجيء بأمور كثيرة تظن أنك استوعبتها لكن بالتطبيق العملي يظهر عكس ذلك. تفقد التصاميم التالية وحاول تنفيذها من خلال flexbox https://www.frontendmentor.io/challenges?difficulty=1&type=free%2Cfree-plus

لقد درست Flex box في فديو فيه 48 دقيقة شاهدتها وفهمتها ولكن لم اكتب ورائها اي كود هل اشاهد لgrid ام انشئ مشروع بhtml and css بإستعمال Flex box وشكرا