lecture(pseudo class , pseudo elements , position)

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

قلنا عناصر مزيفه كلاسات مزيفه يعني عناصر مزيفه. في حد عنده فكره ايش يعني مزيف عنصر مزيف؟ فكره السدو كلاس عباره عن كلاسات وعناصر جاهزه مخزن فيش ت ام بقدر استخدمها بدون ما استدع. كيف يعني؟ احنا عارفين من قبل لما انا يكون عندي مثلا وهذا البي احط فيه اي حاجه كنت البي هذا لما اعطيه كلاس مثلا اسميه اي حاجه براف مثلا او كنت كيف اوصل لل صح ولا لا اسم البار دت اسم الكلاس واحط الخصائص. هل كنت بقدر اعمل دوت بار بدون ما اكون واصله للعنصر ومياه هذا الكلاس ما كان حطبق صح ولا لا؟ لان لما بحكيله مثلا معناتها العنصر اللي ماخذ الكلاس اسمه كذا.

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

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

لما بحكيله كلا ايش يعني هوفر؟ لما بعمل تاشير على العنصر نفسه بيطبق الشيء اللي انا بدي احكي له اياه. مثلا عنصر البي اللي ماخذ كلاس دوت بار بدي احكي له باك جراوند ر لونها [تصفيق] ريد. اذا الهوفر ايش بتعمل؟ الهوفر اول حاجه قلنا لما باشر على العنصر بتطبق لي الخصائص. انو الخصائص اللي حطبق اللي انت كتباهم بدا الس نفسه اوشن. اذا بتتذكر ه اجي اعمل [تصفيق] ريش ها عنصر البي شوفوا متى حصير الباك جراوند لونها احمر ماضغطت عليه انا بس عملت تاشير على العنصر هي. اذا هي اول حاجه موضوع الهفر. الهوفر لما بعمل تاشير على العنصر بطبق عليه الخصائص. كيف استخدمه؟ بوصل للكتور بالاول بعدين بحط النقطتين وبعدين بحط اسم الكلاس.

ناخذ صراحه امثله كثير على الهب. ناخذ مثال في عندي ايمج مثلا صوره. طبعا هدول العناصر على اي عنصر من اللي اخذناهم بيطبقوا او الكلاسات المزيفه سواء ب صور لينكات اي حاجه من اللي اخذناهم ب. نفرض عندي [تصفيق] صوره. مين يحكي لي لو هي الصوره بدي اعملها شكل دائره ايش اعمل؟ بوردر ريديس. اول حاجه كيف اوصل لهي الايمج؟ احنا المفروض عملنا بالاول مثلا سكشن اوان يكون شغلنا صح. اجي ه اقله ايدي هيرو مثلا كيف اوصل للاج الموجوده هون الايدي اللي اسمه هيرو الامج الموجوده فيه عشان عندي لو عملت انيه ما تخذ نفس الخصائص. بجي بقله ها الهاش اسمه هي الامج المجو ق ب نخلي شكلها دائره ايش معناته وخصها تون 50 بال تمام.

مين يحكيلي ايش اعمل لو بدي لما اعمل هوفر على الصورة بصير اللون تبعها ابيض واسود؟ م يجاوب قبل احكيلي ايش اعمل بالبط؟ كيف اتخذ هذا الكلامه صار اسمه سلكتور صح ولا لا؟ باخذه كله بحط نقطتين كوفر هليت انا بحكي انه بدي لما اعمل هوفر على الصورة يعطيني اللون ابيض واسود. قلنا ايش الخاصيه اللي بستخدمها لتاثيرات الصور اللي هي فلتر جراي سكيل 100% صح ولا لا؟ نجي نعمل رفريش. الصورة الاصليه زي ما هي. شوفوا متى حيصير التاثير؟ ما ضغطت عملت هوفر ه. لما برجع بالهوفر خلص بتروح بترجع الصورة للوضع الاصلي تبعها. تمام.

ايش بدي احط خصائص لما اعمل هفر؟ بجي بكمل. ايش بدي خصائص؟ بكمل. لو قلت بدي لما اعمل هوفر تروح الصورة ويروح المكان تبعها ايش احكيله؟ لما اعمل هفر الصورة تنفي ويروح المكان تبعها صح ولا [تصفيق] لا؟ ين تاثيرها المفروض ايش اعمل بعد الامج اضيف عنصر عشان يبين معكم معاي. نجي نعمل يش. لما اضغط هي. لما اعمل الهوفر على الصورة ه هي بتروح الصورة بتنخ وعي بتطلع لفوق زي ما انت شايفين. تمام. هي فكره الهب انه لما بقشر على الصورة مش لما بضغط عليها بصير التاثير هذا. لو بدي المكان تبعها يكون محجوز ايش بقوله؟ حيصير عندي مساحه بيضا مكان الصورة. نعمل لما بعمل تاشير مكان الص وكلمه موج واضحه.

اول نقطه قص ال طيب المشروع الاول اذا بتتذكر كان فيكات اللي فوق لما بعمل عليهم بصير عليهم شي معين. كيف هذا نعمله؟ بجي بحكيله حعمل على السريع شكل بداخله يو ال ومعاه ال اي وفي داخلهم تاج الا تمام واجي احكيله هون مثلا [تصفيق] هون مش مشكله المحتوى احنا ما بنا هي شكل الن خلينا على السريع نراجع الاشياء اللي اخذناها المره اللي فاتت. لو انا بدي هول يكون على نفس السطر ايش اعمل؟ على مين؟ على الو مش اي تبعين ليوتين صح؟ بس احنا بحكي الاصح مين الابه ي عندي يو حده فعادي بج بقله ه وعنا صح برطب اجي احكيله ي بديب فن [تصفيق] ارفع النقط ايش احكي له لست يل على مين على ال صح؟ لست يل عشان ترفعلي الروابط هدول النقاط بدي ارفع الخط ايش احكيله على مين على الا ديكورشن على الا بتطبق ه. كيف اوصل للا بجي بحكيله الو اي الموجوده فورش اسمها فهذا الكلام كله اللي بكتبه بحكي عنه السلكتور. يعني لو انا بدي اطبق هوفر مثلا على الايه بكتبه هذا كله نقطتين هوفر هليت حنشوف ك بهذا الشكل. لو بدي اعمل مسافه ما بين هدول غير الجست فاي ك قصه الباد هون حتكون اسهل لكم ليش قلنا بادين مش مارجن؟ لانه قلنا الباد هوامش داخليه ه مجموعه ال اي كلهم يعتبروا في عنصر واحد صح ولا لا؟ فيعتبر هون بادين على مين؟ الباد بطبقه على ال اي باجي بوصل هون قلت لكم هون حاولوا الكود يكون مرتب يعني احط الل اي تحت ولا احطها فوق احسن فوق بعد اليو ال عنها اجي احكي له هون بادن مثلا خم بكسل. نعمل ريفرش. هي المسافات اللي صار. تمام.

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

ضيل علينا وير. في حد بيعرف يش الوير بستخدمها؟ هي صراحه كثير مهمه ومن الاشياء الجديده اللي نزلت برضه في السي اس اس. الوير بتحكي لك عباره عن سيدو كلاس بستخدمه لما يكون في عندي اكثر من عنصر بدي اطبق عليهم نفس الخاصيه. فكيف بجي بدعيها؟ هلا مازال اكثر من عنصر بجي بحط العناصر هون بالاول. لا اول حاجه مازال ه سيدو كلاس بجي بحط نقطتين وبكتب له كلمه و. والعناصر اللي بدي اطبق عليهم الخصائص هذه المكررين لاكثر من عنص بفتح اقواس وبحط فيهم هذ العناصر بعدين بفتح الاقواس هذ. يعني كمثال مثلا في عندي 2 بي خليني او لا هم عنصرين مختلفين. خليني احكي في عندي ي في ه انشان قبل. خلينا نطبقها مش مشكله. ها في عندي ومثلا اش كلمه احمد. فالتطبيق حيكون على هدول النتين على هال واحمد الموجودين ه. تمام. الوير بستخدمها لو انا في عندي خصائص بدي اطبق على الاثنين هدول يعني مثلا بدي هدول الاثنين يصير لونهم بلون معين. فبروح بستخدم الوير. كيف بستخدمها؟ بحط الك الاول بعدين بستخدم الو وباجي ه بحط الخصائص اللي بدي اطبق عليها. هو ايش كانوا بي وش. بجي بحكيله هون بي وش وبحط ه ايش الخصائص اللي بدي اياها. مثلا بدي الكلر تبعهم يكون بلو [تصفيق] فرش. شايفين النين صار لونهم لون ازرق. هذه برضه حتوف عليكم قصه انه بدل ما اعطيهم كلاسات بجي بستخدم الوير. مش دائما ححط بي واتش 3 ه. ايش ححط السلكتور يعني مثلا هذه البي البي هذه كان بامكاني ايش احكي لها دوت بار صح ولا لا؟ لو هذه مثلا الاتش 3 في عندي اتش3 ثانيه في الموقع ايش كان المفروض احكي له الهاشتاج اللي اسمه هيرو الاتش 3 الموجوده. فطبق بس انا يعني كتبتهم ه بشكل مباشر ولكن في النهايه هذا كله ايش اسمه سلكتور. تمام هذا اسمه سلكتور. وضحت وين الوير بنستخدمها؟ لما يكون في عندي اكثر من عنصر بدي اطبق عليهم نفس الخصائص بجمعهم في وير. لو عندي كمان عناصر بحط اتش ت مش عارفه ايش صارت جروب سكتور ماه نفس الحاجه بس هي هذ الور يعني عشان اذا شفتوها تكونوا عارفينها. هي نوع من السيوس استخدمها عشان اجمع اكثر من عنصر بدي اطبق عليهم نفس الخصائص. هون صراح عندي اكثر من طريقه اللي هي طريقه الروبين سلكتور اجمعهم مع بعض في طريقه ان اعطيهم كلاس واحد مشترك للكل وفي هي هذه الطريقه قلت لكم من اول ما بديانا اذا بتتذكروا في كثير اشياء حناخد مكرر بتعمل نفس الشيء بس بطرق ثانيه فبرع الشي لكم ايش تستخدمه ومين وقت ايش استخدم هي مثلا ووقت ايش استخدمها. تمام.

طيب النقطه اللي بعديها اللي بدنا ناخذها اسمها سيدو المنت. امح عشان ما تتخ سدوت عباره عن عناصر مزيفه. نفس فكره السيدو بلاس انه في عننا عناصر مخزنه في الاتش سي ام ال بقدر استخدمها بدون ما استدعي العنصر الموجود ه. بس اللي بفرق الكلاسات المزيفه عن العناصر المزيفه طريقه الاستدعاء. الكلاسات المزيفه كنت استدعي السكت بعدين قلنا ك بحط بعدين اسم الكلاس المزيف صح ولا لا؟ في العناصر المزيفه بدل ال كومون ايش بتصير ت كومون. بست دعيهم عن طريق نقطتين.

اول حاجه الفيرست لتر وها صراحه كثير بنستخدمها في الموقع. كثير بتشوفوا موقع كل الجمله حاجه والحرف الاول منها عليه خصائص كبيره. دائما بكون لونه بشكل مختلف حجم الخط في كبير صح ولا لا مرت عليكم؟ كيف انا بدي اميز هذا الحرف الاول عن باقي العناصر؟ اخذنا قبل فكره السبان صح ولا لا؟ بقدر الحرف الاول احطه في السبان واستخدم عليه. طيب انا هلا صار عندي طريقه ثانيه لانه انا ممكن اكون لسبان مستخدما على كلمات معينه مش على حرف واحد. ففي عندي طريقه العناصر المزيفه اللي اسمها فيرست لتر. فيرست لتر معناته انه في اشياء بدي اطبقها على الحرف الاول. كمثال وها عن جد كثير موجوده في المواقع. مثلا عندي جمله البي فيها جمله الل. تمام بدي حرف الال هذا يكون حجم خط كبير لون معين مثلا مختلف. باجي بقول هذا الحرف وين موجود في اي عنصر في البي. اذا السكت ه هو ي بعدين عشان ن لازم احطو ك وبستخدم الفيرست ترستر يعني طبقي الخصائص هذ على الحرف الاول الموجود في ال. مثلا بدي اعطيه ر يكون ريد وحجم خطه يكون اكبر. بجي بقله فونت سايز مثلا 30 كسلي. نعمل ي. شوف مين عنده شاف هذ في المواقع كثير بتلاقوها انه بدل ه قلت لكم كان بامكاني استخدم السبان انه انا بكون عندي موقع في بكون اكثر من كلمه عاملا لهم خص يعني قلنا فكره لسبان انه في هذه الجمله مثلا عندي كل كلمه اللور ماخذه خصائص معينه. ايش ا ماشي بوصل للبي هذه باي سكشن موجوده باي كلاس موجوده وبوصل ل. انا بحط ه المباشر لانه ما عندي الا البي واحده. لكن ه كل ه الفكره ايش بدي اكتب السلكتور سواء كان بكلاس سواء كان اي دي. اذا مجمعه اكثر من سلكتور بقدر اعمل عليه. واضحه الفيرست لر؟ بستخدمها على شان اطبق اول حرف على العنصر اللي موجود. لو انا كنت حطاه مثلا في اش بجي بحكيله ه اش العنصر بعدين. تمام وطريقه الاستدعاء انه حتكون العنصر الثاني من العناصر المزيفه اسمه فيرست لاست لا اس.

معناته السطر الاول. يعني هلقيت هذا وين حطبق على السطر الاول كله ماعادا هذه الكلمه. نجي نعملش. شايفين على السطر الاول تطبق. طبعا حسب حجم المتصفح مثلا هي هيك صار السطر الاول كل الكلمه جاي فيه. هي هيك مثلا قديش عدد الكلمات اللي جاي عندي في السطر الاول بطبقها عليه. فالفير لاين عنصر مزيف بستخدمه لما بدي اطبق شغلات بس على السطر الاول من الفقره اللي موجوده عندي. بست تدعس ببق عليه نقطتين وبحط الخصائص اللي بدي اياها. تمام.

بعد هيك في عننا الفتر برض بستخدمهم كثير. ولما ناخذ خاصيه البوشن حطبق مثال عليه. في حد عرف ايش ايش بحط فيها؟ هو محتوى صح ولا لا؟ لو انا في عندي جمله البي وبدي بعد جمله البي احط محتوى هتشوفوها مش حبين تاثيرها صراحه معكم الا لما ناخذ موضوع البوزيشن. موضوع البوزيشن عشان ناخذ عليها تطبيق. اذا بتتذكروا المشروع اللي هلقيت [تصفيق] معكم المشروع هذا اللي هلقيت معكم شايفين الخط اللي جاي تحت الكلام هذا؟ احنا بالطرق اللي عارفينها قلنا ايش بنستخدم يا اش يا بوردر بتتم صح ولا لا؟ الطريقه الثالثه اني استخدم الافتر. افتر انه في عندي خط بعد المحتوى. بس هلقيت مش حنعملها الا لما ناخذ موضوع البوزيشن لانه حصير هذا الخط احركه من التوب ومن الرايت ومن البتم وكل ه. هلقيت حطبق لكم اياه بشكل بسيط. فكره البي فور لو انا بدي احط محتوى قبل العنصر اللي انا بدي استخدمه. مثلا جمله البي بد معي في جمله اللور بدي احط كلمه هلو مثلا قبلها. فايش بجي بحكي له؟ بوصل لعنصر البي وباجي بقوله هون كلمه ب المحتوى اللي بدي احطه قبل البي بستخدم خاصيه اسمها كونتنت. تمام والكونت بفتح فيها سنل كوتيشن او دبل كوتيشن وبحط شو هو المحتوى اللي بدي اه يظهر قبل الجمله. مثلا احكيله جمله حل. نجي نعمل ريفريش. زي ما ظهرت كلمه ه. ليش ظهرت لون احمر عشان انا اعطيتها الخصائص هذ. يعني الخصائص اللي بتعطوها هين طبق على اللي قبل البي. مين هي اللي قبل البي اللي موجوده داخل الكونتنت. فهذه فكره البيف انه في محتوى بدي اضيفه قبل البي. لو بدي اضيفه بع بجي بقول لله بدل بفور افتر افتر يعني في محتوى ضيف لي اياه بعده. بحطها داخل كونتنت وايش بدي اطبق عليه خصائص بجي بحطه تحت. تمام.

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

العنصر المزيف اللي بعده اسمه ماركر. في حد بيعرف ايش اه بتقدر عادي مثلا شكل نجمه احط [تصفيق] فيه. هلقيت الكونتنت بشكل عام المحتوى اللي بدي اياه يظهر في اله بدي اياه نص بدي اياه نجمه بدي اياه مثلا ايموجي. بقدر احطه. كيف بدك تحط الايموجي تجات فيش تي ام ال بتكون مخصصه للايموجي عندنا ببحث عنها بورجيك اياها. لكن بشكل عام هذه اكثر استخدام للفور والافتر. انا عشان صراحه بدي اسبق الاحداث كثير بتلاقوا في مواقع ويب يعني زي مثلا هذ اللي وريتكم اياها الموقع الكلمه اللي موجوده فيه تحتها خط هذا بقوللك تقدر تعملها بالاخر ممكن الخط يكون جاي معيا ه على يمين النص جاي على يسار النص ح نستخدم اليفور والافتر والشن ما بديش اشرحها عشان انتم لسه مش فهمين البوزيشن. تمام.

السيدو المنت اللي بعده اسمه ماركر. في حد بده يعرف لايش الماركر؟ الماركر هذا اذا بتتذكروا لما اخذنا اليو ال والال اي كنت القوائم اللي بدي اعملها في عندي اشكال معينه اعملها. مثلا القوائم المرتبه كانت بس انه لو بدي اياها واحد اثنين ثلاثه لو بدي اياها اي بي سي لو بدي اياها احرف لاتينيه او ارقام لاتينيه صح ولا لا؟ الان اوردر كانت بس اذا بدي اياها شكل الديسك او سكوير او بدي اياها شكل الساكن مضبوط. الماركر حتستخدميه مع الليست اليو ال او الاو ال بشكل عام. لو انا بدي احط اشكال غير اللي موجودين هون مثلا كثير بتكون شكل القائمه عباره عن داش عباره عن نجمه هذه بقدر احطها. خليني اورجيكم كيف لو اجيت عملت هان يو ال مثلا وال اي احط اي حاجه هون مثلا [تصفيق] اي. في الوضع الطبيعي هذه كيف حتظهر لانه ان اوردر حتكون شكل النقاط الديس مضبوط بهذا الشكل. طيب انا بدي اعمل قائمه بديش هذا الشكل اللي يكون موجود مثلا بدي يكون شكل نجمه. حتيجي واحده تقوللي عادي بجي هون بعمل بصير كل عنصر بدي احطه احط النجمه قبلي صح ولا لا؟ اجي اعمل ريفريش هي تطبق معي وعادي بعمل ليست ستايل عشان تروح هذ الكلمه مبوط. في طريقه احسن هي اس قصه الماركر. قصه الماركر ح تفيدني لو انا القائمه عندي من 100 عنصر مثلا ولا من 50 مش منطق كل شويه احط النجمه ه قبلها مثلا او الشكل. بدي مثلا شكل اندر سكور شكل دول شكل الداش هذ. فه جيجي دور الماركر. الماركر بستخدمها مع سواء اور او اور. اول حاجه لازم نعرفها انه الماركر بطبقها على ال اي مش على الو. يعني باجي ه على اي وما دامد بدي احط النقطتين واجي احكيله ماركر والنجمه اللي بدك تحطيها ولا الداش اللي بدك تحطيه. ايش بستخدم كونتنت علىشان احطه بداخله واحط العلامات التنصيص واجي [تصفيق] احكي بهذا الشكل. تمام. هذه النجمه مين اللي انا كتبتها في الفقره وهذه النجمه هي اللي بدل النقاط يعني نجي نرفعها [تصفيق] بهذا الشكل. صارت بدل النقاط الموجوده عملت نجمه. مثلا بدي اشاره دولار سان بجي على الماركر كونتنت بحط مثلا اشاره الدولار س. فهذه قلنا وين ح تبين معي او حيبين اهميتها لو انا عندي لسته من مجموعه من العناصر وبدي احط رمز معين غير الرموز اللي اوريدي موجوده في اللست بستخدم قصه الماركر. والماركر على ال اي بطبق. لو اجيت قلت له ه يو ال مش ح [تصفيق] تزبط. هي ريفريش. ايش عمل؟ رجع للوضع الطبيعي اللي هي الان اوردر ست بهذا الشكل. فهي انتبهوا لها انه على ال اي بتطبق. تمام. في حد عنده اي سؤال في الماركر.

في عننا سيدو المنت سلكشن. وهذا كثير بنستخدمه لايش؟ من اسمه سلكشن ايش بيعمل؟ تحديد. كثير بكون بحدد فقره او بحدد اكش ولما بحدد بيعطيني تاثير معين صح ولا لا؟ فبكون هون نوع العنصر المزيف اسمه سلكشن. ججي مثلا على البي هذه اللي موجوده هون بجي بحكيله هيني انا واصله للفي بدل اخر بدي اقوله سلكشن. سلكشن التاثيرات هذه اللي بدها تصير متى لما اعمل تحديد عليها. ارفع الكونتنت لانه خلصنا. نعمل هي البي ماطبق عليها ولا شي اعطيتها خصائص انه بدي اللون تبعها ريد والفونت سايز وكل ها الامور و ت طبق لما اعمل تحديد عليها. شايفين ايار ارفع التحديد خلص بترجع البي للوضع الطبيعي. لكن لما اليوزر بيعمل تحديد عليها بيعطيني التاثير. و عن جد هذا بيعطي بيفرق كثير يعني في شكل التصميم تبعها. ف السلكشن كثير بنستخدمها زي ما قلت لكم لما بدي اعمل تحديد لعنصر معين محتوى معين مثلا بدي احدد بي او اي انواع من الهدين واعطيها تاثيرات معينه لحظه ما المستخدم يحددها. فبج بعطيه التاثيرات [تصفيق] السلكشن وبعطيه ايش الخصائص اللي بدي اياها تزهر. مين متذكر ايش بستخدم لو انا بدي لما اعمل تحديد على العنصر اقدر اغيره من البراوزر نفسه الكتابه هذه اغيرها من البراوزر نفسها مش على الفحص يعني بدي لما اعمل تحديث زي هيك يسمحلي اغير الكلمات. اخذنا ات اسمه ك متذكرين قنا كنب سمحلي اني اعدل على المحتوى الموجود على البراوزر. بحطه كيوت في عنصر البي بجان بقول لله كونتنت اتبل. قلتلكم كونتنت اتبل القيمه الافتراضيه لها فولس انه ما يقدر يحدد. لو كتبتها زي هيك او كتبت قيمه الترو النتين حيعطي نفس النتيجه انه لما اجي اعمل ريفريش. لما بحدد على العنصر زي ما انتم شايفين بقدر اغير الكتابه اللي موجوده ه [تصفيق] بقدر اغير الكتابه اللي بدي ا. تمام. كيف بدي احفظها؟ قلتلكم لما ناخذ موضوع الجي لويف الكتابه الر كتبها على البرازر يحفظها. تشتغلها في موضوع لما ناخذ. واضحه مفهوم السكشن ستخدمها. طيب بعدها فينا اسخدم تذكر كنت احط بليس هولدر ان عشان يعطي تنبيه للمستخدم ايش يدخلها. لو انا عندي هون انبوت التايب مثلا واجي احكيله بليس هولدر مثلا انتر يوزر [تصفيق] نيم بهذا الشكل. هولدر في الوضع الطبيعي لونه رما ولا لا؟ هلقيت بيجي دور لو انا اللون الرمادي هذا بدي اغيره للون ثاني. مش هو اتربيوت اسمه بليس هولدر. فبصل لمين للبوت وفي عننا سيدو المنت اسمه بليس هولدر. لو انا بدي اغير لونه بدي اغير حجم الخط مش عارفه ايش مثلا احكيله بدي الكلر يكون لونه ري. هل حيبين زي شكل الفال؟ مش حيفرق معكم. متى حيبين انه هذا بليس هولدر لما اكون عامله كر على البت واكون محدده. تمام فهذا هو بالاصل عباره عن بليس هولدر. لما يبدا المستخدم يكتب حيروح منه. فلو انا البليس هولدر بدي اغير اللون تبعه في عننا سدت اسمه بيس هولدر. بحط ايش الخصائص اللي بدي اعطيها لبل فولدر مثلا بدي الفون ساي تبعه اكبر بدي اعمل عليه دد كل الخصائص اللي اخذناها قبل هيك تقدروا تطبقوها. تمام.

يلا اذا هيك بنكون خلصنا موضوع السد كلاس وشفنا ايش الفرق بينهم وما كل واحد بستخدمه. الخاصيه ال بعدها اللي بدنا ناخذها خاصيه الترانس. تمام ترانسفور ايش معناتها؟ تحويل. مين بيعرف لاش بستخدم ترانسفور؟ تحويل العنصر او الشكل اللي انا بدي اياه. ها الخاصيه بتاخذ مننا اكثر من قيمه. خلينا ن ها نعمل مثلا ديب وانتم بتقدروا تطبقوها على صوره او اي حاجه بدكم اياها. تمام [تصفيق] هي اجي على السريع اعمله [تصفيق] هاي الخصائص اللي بدنا [تصفيق] اياها وهك جراوند كر. تمام شكل دفعات. فعنا خاصيه الترانسفورميشن اعمل تحويل العنصر اللي موجود من شكل الى شكل ثاني. اول خاصيه بتاخذها ترانسفورم او اول قيمه بتاخذها قيمه اسمها سكيل. ايش بتعمل السكيل؟ من اسمها تمدد للعنصر. فسك بتعمل لي تمدد للعنصر هذا الوضع الافترادي تبعها. متى بصير تصغر للعنصر لما بعطيها قيمه سالبه. تمام اجي هون على الب اقول له ترانسفور. قلنا لتحويل العنصر بحكيله سكيل. هلقيت السكيل هي اختصار لقيمتين سكيل اكس وكيل واي. ايش يعني سكيل اكس؟ يعني انا بدي اعمل تكبير او تصغير للعنصر من ناحيه الاكس اكس هو المحور الافقي. الوا القيمه الثانيه هي انا بدي اعمله تمدد من ناحيه الوا. هذا المبدا قلنا متفقين عليه انه في كثير خصائص الاختصار تبعهم. فلما بحكيله يفترض ايش اعطيه قيمتين. قيمه للاكس وقيمه للوا. لما بعطيه قيمه حده ايش معناتها ان من الاكس ومن الوا. ايش بتاخذ مني؟ مازال انا بحكي تمدد مش حقول له 200 بكسل و 300 بكسل لا بدي احكي له كم قديش يتضاعف حجمه او قديش مثلا يتمدد. لما احكي له مثلا اثنين ايش معناتها انه الهاي عندك 100 الهاي وال 100 ضاعف لي اياه مرتين صار يبقى 200. تمام نجي نعمل ريفريش. شفتوا ايش صار؟ صار تمدد او تكبير لحجم العنصر هذا لما قلت له سكيل. فالسيل بتاخذ مني رقم انه قديش بدي هذا العنصر يتمدد. لما قلت له سكيل اثنين لاحظوا التمدد صار من الاكس ومن الواي. لو قلت له مثلا اثنين وواحد ه. ايش معناتها؟ من ناحيه الاكس ضاعف لي اياه مرتين او مثلا خليه ثلاثه او خليه اثنين وواحد. ومن ناحيه الواي خليل لي اياه يتمدد مره واحده. فهي الشكل تغير عندي. تمام. ايه ما هو هلقيت حنحكي ليش؟ لانه لما تمدد صار الهاي والو اكبر من موجودين هون. فانت مثلا عشان يزبط معك او حسب برضه التصميم اللي بدك مثلا خلي هذا 50 بكسل مثلا عشان ما يطلعش ب الصفه. تمام. فهي فكره السكيل انه بتعمل لي تمدد للعنصر من ناحيه الاكس ومن ناحيه الواي وبعطيها القيم اللي بدي اياها انه قديش بدي اياه يتمد. هون في شغله مهمه او انا خليني اسال السؤال. في فرق بين الهاي والو والسك ولا الهاي والو نفسها السكال [تصفيق] يعني السكيل نفس الهاي وال ولا مش نفسه؟ مش نفسه. هلا لما بحكيله هاي ايش معناته انه الهاي تبعه ال تبعه زي هيك يتغير والهاي تبعه يتغير. لكن لما بحكيله سك اذا بتلاحظوا كل العنصر بيتكبر لحاله. يعني في الهاي وال المحتوى بتغير لا صح ولا لا؟ يعني لما باجي بكبر ه مثلا بحكيله مثلا الها 100 والو 100 اجي اعمل ريفريش. مكان المحتوى انا اعطيته 10. ماشي. المهم فكره مكان المحتوى ما بتغير لانه انا هون بحدد قاعده الهاي والو تبعون هذا العنصر. لكن اذا بتلاحظوا لما بعمل سكيل حتى المحتوى اللي موجود. لانه لما بحكي له سكيل كل العنصر بيتاثر. فكمان المحتوى اللي موجود بداخله بيتاثر. فهي النقطه كثير مهمه انه هل في فرق بين السكيل والهاي؟ اه في فرق ان الهاي والوي انا بتحكم في العنصر نفسه. لكن السكيل بتحكم في العنصر مع المحتوى اللي موجود قدام. تمام.

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

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

بتكبر العنصر والمحتوى موجود بكون لتحت. وكمان السك ز بتعمل اخفاء للعنصر، بضل العنصر حاجز المكان. تمام.

القيمة بعدها ل اسمها رو اسمها روتيت، ايش بتعمل دوران للعنصر؟ دوران العنصر كيف حيكون؟ القيم تبعته بكسل مثلا؟ لا، زوايا. نظام زوايا. نظام الزوايا في عندي أكثر من طريقة أني أقدر أحدد فيها الزوايا، لكن أكثر وحدة قياس مشهورة هي الدك. الدك اختصار لـ دجري اللي هي درجة مئوية بنحكي عنها. لما مثلا بحكي القائمة الزاوية 90 دجري زي هيك. فلما بحكي له روتيت مثلا بنسبة 45 دجري حيعطي شكل معين. مش لا مش شكل معين قصدي شكل إشي أما مش شكل معين بهذا الشكل. تمام.

لو غيرت مثلا الروتيت خليتها مثلا 75%. نعمل ريفريش حطيني شكل ثاني، لأنه الروتيت بتعمل لي دوران من كل الاتجاهات حسب القيم اللي أنت بتعطيه اياها. لو مثلا 15 حتصير تعطيني قيمة مختلفة أو شكل مختلف بهذا الشكل. شايفين الأشكال بتختلف، حتى المحتوى كمان بيختلف. فروت بتعمل دوران للعنصر. إيش القيم اللي بتستناها مني؟ بتستناش بكسل أو واحد أو اثنين زي السكيل. بتستنى مني الك. إيش هي الك؟ اختصار لـ ديري اللي هي الدرجة المئوية. تمام.

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

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

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

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

طيب خلينا ناخذ هذا التطبيق زي ما قلت لكم سهل كثير صراحة بس بدنا نطبق هذه الفكرة اللي أخذناها المرة اللي فاتت. خلينا نشتغل هذا التصميم من أول [تصفيق] لجديد. مين يحكي لي أول حاجة لما يشوف هذا التصميم إيش حيعمل؟ أول شي بالمناسبة هذا عبارة عن لاندين بيج. إيش يعني لاندين بيج؟ صفحة هبوط. صفحة الهبوط اللي بتكون من صفحة واحدة. من صفحة واحدة مش من قسم واحد. يعني أحيانا لو شفتوا هذا التصميم ما زال الموقع صفحة واحدة يبقى اسمه لاندين بيج. حتى لو بتكون من أكثر من قسم. عشان لما يجيكم شغل حدا يقول لك لاندين بيج تكون عارفين إيش يعني لاند [تصفيق]. يعني صفحة بهذا الشكل. الموقع كله صفحة واحدة. برضه اسمه لاند طالما الموقع عنده صفحة واحدة بكون اسمه لاند. لكن لو كانت اللينكات موجودة فوق مثلا الموجودين صفحات أنون اسمه موقع إلكتروني. فهذه الصورة زي ما إحنا شايفين لـ أم مـ يقول لي إيش [تصفيق] أعمل أول حاجة قصة الهي بعدين بداخل صنا حافظينها صح؟ الـ بداخلها ي الـ بداخلها الـ هون مثلـات بن المحتوى بمني الفكرة كونكت. طيب بعد النا إيش حعمل؟ حعمل سكشن لهذا الكلام. الهـ خلينا هـ حت أو ممكن على فكرة كلها نخليها في قسم واحد برضه صح. بس أنا عشان بدي أرتب الكلام. هلقيت الصورة اللي موجودة هون وين المفروض تكون؟ ممكن تكون موجودة بالهيدر وسكشن. أنا بحكي بس السكشن حتكون أنسب له لأنه الهيدر خلص جزئية لحال. فهذه حأعملها في السكشن كـ جزئية إتش تي ام ال إيش حتكون؟ ديف وبداخلها إمج. يعني مش بداخلها لا كل واحد عنصر لحال. حاجي أحكي له ديف. أنا إيش قلـ النتين صح؟ يعني لو أجيت طبقت حسب البوزيشن اللي أنا بدي أحدد فيه. بس أنا خلص إحنا متفقين أنه جزئية الفـ بس فيها. عشان هيك بدي أحطهم في قسم [تصفيق] السكشن. وفي عندي إمج. أحط أي صورة من الموجودين. هي مثلا هي هذه الصورة. خلينا نعمل محتويات الاتش ام ال بعدين نشوف شغل السي اس اس. بعدين إيش حنعمل؟ إتش 1 [تصفيق] مثلا. طيب إيش رايكم الديف هذه والإمج أحطهم في ديف رئيسية عشان يكون أرتب. وأجي أعمل ديف ثانية هون أحط فيها المحتوى اللي هو مثلا كاتش 1 كان مكتوب [تصفيق] فيه مش مشكلة الكلام [تصفيق]. طيب بعدين إيش حنعمل؟ جملة لورم. وآخر حاجة مين؟ الزد هذا صح؟ الزد بتون المفروض الزر إيش يكون النوع تبعه؟ بقول لك أوردر ناو. إيش المفروض يكون؟ سبمت. يبقى هون بقول له أورد ناو والتايب هون سبـ. نعملـ. نيجي نشتغل حده واحده. أول حاجة الهيدر كيف؟ مين يقول لي إيش الشغل اللي حيكون؟ كيف أخليهم على نفس السطر؟ كيف أرفع القوائم؟ مين يحكي معاي؟ ماشي الفليكس على مين؟ هي محتويات الهيدر على اليو ال لأنه مجموعة الـ اي هي اللي بدي أطبق عليها. ما عندي إلا هي اليو ال فعادي باجي بحكي له هـ يو ال بدي أعمل له ديسبلاي فليكس. بس عشان أخليهم نفس بعض. طيب بعدين بدي أرفع النقط. إيش أحكيله؟ لست برض على الوـ. بدي أعمل مسافات ما بينهم. قصد لمين؟ لـ اي. الباد هـ لـ [تصفيق] ايد مثلا خمسة أو عشرة كسل مناسبة. وبدكم تحددوا اللون. ها الأمور مشـ. هي الصورة أول حاجة بدي أتحكم وين عملنا عشان يظهر معيش المفروض أطح. عنـ عنا أكثر من أنا بـ اشتغل عليه هذا كيف أوصله؟ أعطي هذا كلاـ أسـهل مثلا كلاـ أسـ. خليني أحكـ وـانية عملناها مـ اسمها هـليت عشان أعمل أشياء على الديف ها إيش بقول له؟ دوت توب. الديف الموجودة فيه لأنه ما فيش إلا [تصفيق] هي أعطيها [تصفيق] هاي باك جراوند رـ قبل لو بدكم تغيروا اللون لحتى الآن في حد حاسس اللي بحكيه صعب أو مش فاهمه؟ هي اللي عملناه على حـ. تيجي الصورة. لو بدي أتحكم في الصورة ممكن أصغر حجمها. إيش أحكيله؟ كيف أوصل أول شي للصورة ها؟ دبـ الأمج الموجودة [تصفيق] [تصفيق] أو خليها أكبر شوية خليها 150. هيك كويس. نيجي هلقيت للـ فكرة اللي موجودة هـ صور بلاحظ في عندي عنصرين وعنصر فيهم جاي ورا عنصر ثاني. فاللي حضر الحدر لا مش الفور على النصوص كنا نستخدمها عشان أحط الكونتنت موجود النص أحطه بالكـ. لـ حضر لقاء يوم الخميس حتلاقوا شرحت فيه زد اندكس. زد اندكس بستخدمها قلت في حالتين. حالة زي هيك في عنصر جاي ورا عنصر ثاني زي مين؟ هـ جايه ورا الصورة صح ولا لا؟ والحالة الثانية لما يكون في عندي أكثر من عنصر جايين بنظام طبقات. فزد اندكس بتقول لي بتشوفي مين العنصر اللي جاي ولا العنصر اللي هو مين؟ البـ. وباجي بعطيه قيمة زد اندكس سالب واحد. يعني حاجي هـ على الـ أقول له زد اندكس سالب واحد. الزد اندكس عشان تشتغل معاي لازم أكون مستخدمة خاصية البوزيشن. أبـ. اللقاء الجاي حنشرح موضوع البوزيشن حتفهم ليش بوشن. البوشن بعطيها على العنصر هذا. هي فكرة البوزيشن بشكل عام أني أنا بدي أحرك عنصر بالنسبة لعنصر ثاني. تمام؟ فكرة البوشن كيلو بوزيشن أبسوليوت بتحرك العنصر بالنسبة لعنصر ثاني اللي هو مين؟ الصورة بدها تتحرك بالنسبة للديف صح ولا لا؟ عشان هيك بعطي الصورة في هـا الحالة بوزيشن أبسوت. بعد نعم. الأبسليوت. الأبسليوت عشان بس ليش أنا حكيت له بوزيشن أبسليوت عشان يحرك الصورة بالنسبة للدـ. هـ اتجاه الموجب والسالب حسب القيمة اللي بعطيها حسب لـ نشرح حتشوف بصير أحرك هذ الصورة باربع اتجاهات توب ورايت وبتـ. مين استخدم الاتجاهات؟ باخذ الاتجاهات الأقرب مثلاً. مثلاً هـ باجي بحكيله ها من جهة الرايت وها من جهة التوب وها من جهة البوتوم وها من جهة الفت. صح ولا لا؟ مين أنسب طريقة ومين أقرب شي؟ لو أجيت قلتله من جهة الرايت بدي أحسب كل هذ القيمة مثلا 700 كسل ولا 800 كسل؟ لا بسهل على حالي باجي إيش بحكي له؟ حديك لي اياها من جهة الليت. صح ولا لا؟ بحسب مثلا 50 بكسل. نفس الشي من التوب ومن البوتوم. أحسب كل البوتوم اللي هون ولا أحسب التوب اللي موجودة هون؟ فبصير أحرك بهذا الكلام. حتفهمو إن شاء الله هذا الشي. الموضوع المرة الجاي. أجـي أحكيله مثلا من التوب خليه 50 ومن الرايت مثلا 20 أو 30. نشوف كيف الشكل. لا هيك اتير. أه أنا إيش قلتله؟ قلنا ليفت صح؟ الرايت شفتوا كيف بدأ يحسب؟ لا بناخذ الأقرب. لو بدي أخليها رايت بدي أحسب كل ها المسافة. 900 بكسل 800 ز فلفت هـ أقرب لـ بهذا الشكل. بدي اياها تكون أكثر مثلا بزود اللفت شوية خليها 50 مثلا. التوب بدي أنزلها يعني بصير أتحرك في هذه الأبعاد مثلاً. طبعاً الاتجاهات المفروض تكون جيكم جاهزة في الملف. لا أنا ممكن أكبر حجم الـ حجم الديف برضه عشان [تصفيق] يبين. تمام. هذه الفكرة تبعته أنه كيف يكون في عندي عنصر وفي فوق عنصر ثاني. العنصر اللي ورا بعطيه زد اندكس سالب واحد. والعنصر اللي فوق بعطيه بوزيشن أبسليوت وبصير أحرك هذا. يعني بدي أنزله لتحت مثلا ممكن أحكيله من التوب كمان شوية مثلا 70 مثلا زي هيك بصير ينزل لتحت حسب شكل التصميم اللي بدكم إياه. طبعاً هون بتكمل عليه أنه إيش المفروض الفـ. هذا كله مع الكلام. الفـ هذا إيش يكون؟ ديسبلاي فليكس عشان يجوا على نفس السطر. على مين حطبق الديسبلاي فليكس؟ أظن السكشن الأب تبعهم اللي هو إحنا شغالين على هذا اللي هو التوب مع الكشن الأب تبعـ. بقله ديسبلاي فلـ. وبطبق باقي الخصائص اللي هو البوتوم. يعني الأفكار هذه سهلة بس أنا كان بدي نطبق ها الفكرة. في حد عنده أي سؤال؟

خاصية البوزيشن بستخدمها عشان أعمل تحريك للعنصر. هلا في الوضع الطبيعي لما إحنا بنشا أي عنصر مثلاً أنشأت بوتون في الصفحة باسم سيف. خلينا أحكي في الوضع الطبيعي لما أنشئ أي عنصر كيف بيجي؟ كلنا عارفين أنه بيجي من اليسار يمين ومن أعلى إلى أسفل. صح ولا لا؟ أه أنا شكلي عاملة اتجاه الصفحة آر تي إل. مكان المرة اللي فاتت راح أخليه إل تي آر عشان يكون شغلنا إنجلش واللان تكون أي إن. تمام. هلقيت في الوضع الطبيعي زي ما أنتم شايفين هي البوتون ظهر معي بهذا الشكل. أي عنصر أنا بنشاه بالصفحة بياخذ القيمة الديفولت اللي هو بون من اليسار لليمين إذا أنا كنت شغالة إنجلش ومن أعلى إلى أسفل إذا كنت شغال على الموقع بالعربي زي ما شفتوا بيجي معي العنصر من اليمين لليسار. هلقيت بيجي دور أنه أنا هذا العنصر بدي أحركه من مكانه. بديش إياه يكون في هذا المكان. الخصائص الـ فاتت اللي أخذناه أخذنا من خصائص أني أحرك العنصر زي خاصية الفلوت. وقلنا الفلوت بقدر أستخدمها. لها بس استخدام واحد متى؟ لما يكون عندي السكشن نفسه اسم الصوت تمام. صح يا جماعة؟ تمام. خلينا نكمل. فـ حكينا أنه هليت بيجي دور لما أنا بدي أحرك العناصر. عشان أحرك العناصر أخذنا خاصية الفلوت. الفلوت قبل قلنا استخدامها الوحيد أنه لما يكون عندي مثلا سكشن أو ديف وهذا الفـ في ومحتوى على نفس السطر. لكن واحدة جاية يمين وواحدة جاية يسار. فهون بكون أسهل شي أني أستخدم فلوت لمين؟ للصورة مش للمحتوى. بحرك الصورة بخاصية الفلوت بعطيها قيمة ليفت أو رايت حسب وين هذه الصورة مكانها. كمان موضوع الباد والمارجن. الباد والمارجن هم مش بيعملوا تحريك للعنصر. لكن لما بعطيهم المسافات سواء كانت هذه المسافات داخلية أو مسافات خارجية فهي بتعمل تحريك للعنصر. لأنه تحريك العنصر معناته أنه أنا أغير اتجاه هذا العنصر من مكان لثاني. لكن أكثر العناصر اللي هستخدمها عشان أحرك العناصر هي خاصية البوزيشن. البوزيشن هون بتحكم في العنصر وين ما بدي بقدر أغير هذا العنصر. بس عشان أستخدم خاصية البوزيشن لزمني أعرف أكثر من شغلة. أول حاجة لازم أعرف مين العنصر اللي بدي أحركه. بدي بوتون؟ بدي ديف أحرك؟ بدي بي مثلا؟ لازم أحدد مين العنصر اللي بدي أحركه. ليش؟ لأنه على هذا العنصر أنا حطبق خاصية البوزيشن. البوزيشن بستخدمها عشان أحرك العناصر. بعد ما أعرف مين العنصر اللي بدي أحركه. بدي أعرف إيش الجهه اللي أنا بدي أحددها. طبعاً عنا أربع اتجاهات اللي هي توب وليفت ورايت وبتم. فلازم أحدد الاتجاه اللي أنا بدي أحركه فيه. يعني مثلا هي الزر موجود معي هون. لو أنا قلت بدي أحركه هيك بالنص. بدي إياه يجي مكانه هون. إيش الاتجاه هون اللي حاستـخدمه؟ ليفت. صح ولا لا؟ صح. أجـي أحكي ليفت. لأنه أنا بدي أحركه بهذا الاتجاه. بدي إياه يكون هون. طب لو قلت هذا العنصر بدي أحركه هون تحت. مين يقول لي إيش الاتجاه اللي حستـخدمه؟ هي أنا قاعدة بأشر بالماوس. بدي أحركه تحت هان هـ. يعني أصلاً قاعدة بحكيهم. فلازم نحدد الاتجاه. لازم أحكي له بوتم وليفت عشان أقدر أحطه بهذا المكان. فهذه الشغلة الثانية اللي لازم أعرفها أنه اتجاه العنصر اللي أنا بدي أحركه. بحرك العنصر بالـ أربع اتجاهات اللي أخذناها اللي هي ليفت ورايت وبتم وـ. الشغلة الثالثة اللي بدي أعرفها اللي هو مقدار تحريك للعنصر. يعني لما أنا توي حكيت بدي أحرك العنصر هون. بدي أحسب هذه المسافة من العنصر وين هو مكانه بالوضع الطبيعي. وين أنا بدي أحركه. ممكن تكون 200 بكسل. ممكن تكون ثلاثة بـ عفوا 200 بكسل أو 300 بكسل. لو أنا قلت بدي أحركه هون على نفس الـ المحور الواي أكسس بس يكون لتحت. حاجي أختار أول شي الاتجاه أنه يكون بوتم. بعدين أحسب المسافة كلها من فوق لتحت. ممكن تكون 500 بكسل 600 بكسل وهكذا. إذا بعد ما حددت الاتجاه بدي أحدد مقدار التحريك. الشغلة الرابعة وهي المهمة أنه أنا أعرف هذا العنصر بالنسبة لمين أنا بدي أحركه. خاصية البوزيشن لما بتحرك لي أي عنصر بالنسبة لمين؟ لازم أعرف شغلتين. أما بتكون بالنسبة للشاشة كلها. إيش يعني للشاشة كلها؟ يعني الفيو بورت هذه كلها. مش إحنا قلنا المسافة البيضاء هذه كلها اسمها فيو بورت؟ صح ولا لا؟ فلما أنا بدي أحرك الصر لازم أشوف هل هذا العنصر أنا بدي أحركه بالنسبة للفيو بورت كلها ولا لا؟ ولا بالنسبة لعنصر معين؟ كيف يعني بالنسبة لعنصر معين؟ لما يكون هذا العنصر موجود داخل سكشن أو موجود داخل ديف. فهو بيكون الأبو تبعه المسؤول عنه. يا السكشن يا الديف هذا. فـ أنا لازم لما أجـي أحركه أعرف بالنسبة لمين بده يتحرك. يعني بالنسبة للشاشة كلها ولا بالنسـ. هلت يعني مع التطبيقات أنتم حتوضح لكم الفكرة. بس هدول الأربع أشياء اللي لازم أعرفها قبل ما أستخدم خاصية البوزيشن. أنه مين العنصر اللي بدي أحركه. وإيش الجهه الاتجاهات لازم أحدده الأربعة. أشوف أنا أي جهة بدي أحرك هذا العنصر. وقديش مقدار تحريك العنصر. طبعاً بتكون بالبكسل. بدي أحسب المسافة بالبكسل اللي بدي أحرك فيها العنصر. والشغلة الأخيرة وهي المهمة أنه بالنسبة لمين؟ هل بالنسبة لعنصر ثاني ولا بالنسبة للشاشة كلها أنا بدي أحرك العنصر. تمام لحتى الآن؟ هلقيت خصية البوزيشن بتاخذ معي أكـ من قيمة. بتاخذ معي قيمة استكـ. وبتاخذ رييف. وبتاخذ أبوت. وبتاخذ فيكسد. وبتاخذ يكي. في حد قبل هيك استخدم هدول الخصائص يقول لي على السريع بس إيش الفرق بينهم؟ أو لو عقد خاصية واحدة مش مشكلة. ولازم البوزيشن تفهموها 100%. لأنه كثير ح تستخدموها. نبدأ بأول حاجة. لما أعطي البوزيشن قيمة شو معك؟ قيمة ثابتة ولا لا؟ لما أحكي قيمة ثابتة معناته هل هذا العنصر حيتـ حرك ولا لا؟ يا جماعة أنتم يعني أربع أشخاص. فعادي افتحوا المايك واحكوا أحسن ما يكون في تفاعل بكون أحسن اللقاء. فحكي أنه أول خاصية هي حتكون أنه أستخدم خاصية الاستكـ. أو أعطي قيمة للـ بوزيشن استكـ. استكـ معناتها العنصر ثابت. إيش يعني العنصر ثابت؟ يعني أنا هيني مثلا بدي أطبق هذا الكلام على البوتـ. تمام. حاجة ما عندي إلا البوتون هو الوحيد. فبس أسـ اسـ عادي بوصله بشكل مباشر. حاجي أحكي له هون بوتون. وحكينا عشان أحرك العنصر بدي أستخدم خاصية البوزيشن. أول قيمة بدي أعطيه إياها هي ستاتيك. هلقيت ستاتيك هي أصلاً القيمة الديفولت للعنصر. إيش يعني القيمة الديفولت؟ أنه أنا في الوضع الطبيعي لما بنش العنصر بكون ثابت. بقدر أحركه. فلما أعطيه قيمة ستاتيك العنصر ثابت. مش حيتـ حرك لو إيش ما صار. حتى لو أنا أجيت حكيت له هون توب بدي مثلا من التوب أحركه 200 بكسل. وبدي من اللفت مثلا من جهة الفت أحركه خليني أحكي 500 بكسل. بس أنا معطياها قيمة ستاتيك. هلقيت حاجي أعمل ريفريش. تحديث للصفحة. مش حيتغير معي العنصر. هيني قاعدة بعمل ريفريش زي ما أنتم شايفين عنصر السيف ظل أو عنصر البوتون ظله موجود مكانه ما تحرك معاي. ليش؟ لأنه ماخذ قيمة استاتيك. فستك معناتها العنصر ثابت. حسب أنا وين بنش العنصر. خلص بضل ثابت معاي. هو الأ بوتون. لكن لو أجيت أنا هذا البوتون أجيت حطيته مثلا داخل دف. تمام. حطيت البوتون داخل ديف. وجت هذا الفـ عملت عليها شوية خصائص. خليني أحكي الهاي 200 كسل والـ 200 كسل. ومثلاً باك جراوند. هل البت صار مكانه وين في الـ؟ برضه حيضل قيمته ثابتة. لأنه أنا يعني حتى لو أنا أنشأته بمكان ثاني. طالما أنا واصلة للبوت ومعطيها قيمة ستاتيك. فهذا العنصر مش حيتغير معي بالمرة. وهي تعتبر قيمة ديفولت أنه يكون العنصر ستاتيك. ما أقدر أحركه. حتى لو أنا أجيت أعطيته هدول القيم. حددت له الاتجاهات توب ليفت رايت بوتم. تمام. بس هون في شغلة مهمة بدي أنوه لها. أنه إحنا عننا أربع اتجاهات توب وليفت ورايت وبتم. تمام. هلقيت العنصر لما أنا بدي أجـي أحركه. أحـياناً حتسال حالك كيف؟ إيش الاتجاه اللي أحركه؟ أحركه عن طريق التوب ولا عن طريق البوتوم؟ كيف بنحرك بالاتجاهات هذه؟ بروح بختار أقرب اتجاه له. كيف يعني أقرب اتجاه له؟ يعني أنا عنصر البوتون هذا. تمام. لو بدي أجـي أحركه خليني أحكي هون. شايفين وين الماوس مقشر؟ بدي أحركه هون. مين منطقة أكثر؟ أجـي أحكي له مسافة التوب أحسب المسافة هذه ممكن تكون 200 بكسل ولا أجـي أحسبها من هـ من هان البتبـ. نـا بنحسبه وين نهاية الفيو بورت. هي حنحسبها فيه. ولا أجـي أحكي له بوتوم كل هذه المسافة ممكن تكون 1000 بكسل ولا 1500 بكسل؟ فبروح بختار الاتجاه حسب أقرب اتجاه أنا بدي أحرك فيه العنصر. واضحة هذه النقطة؟ نفس الحاجة لو أنا هذا العنصر بدي أحركه هون. أجيت قلت لكم بدي مكانه هون بهذا الشكل. هي الماوس هون ماشر معاي. المنطقي أكثر أني أحركه باتجاه الرات. أجـي أحسب المسافة الصغيرة هذه الرات ممكن تكون 600 بكسل. أحسن ما أروح أحسب المسافة هذه كلها الكبيرة من جهة اللفت. فهي النقطة كثير مهمة وأنتبهوا لها. أنه لما بدكم تحركوا العنصر اختاروا أقرب اتجاه لـه. وبدوا حركوا فيه. بعدين اختاروا مقدار اللي أنتم بدكم تحركوا فيه هذا العنصر. لحتى الآن تمام؟ كل الأمور ولا في حد عنده سؤال؟ أنتم معاي؟ أنا شك أنكم موجودين أصلاً. طيب تمام. إذا خلصنا اللي هي مين؟ الستاتيك. وستاتيك يعني العنصر. وهي كثير هتستخدموها في الجي إس أنه مثلا بدي لما أعمل أو ممكن لقدام لما ناخذ السيدو كلاس لما أعمل هوفر على العنصر تاشير للعنصر بدي العنصر يكون ثابت. يعني دائماً في كثير سالوني هذا السؤال أنه لما تكون القيمة ديفولت. الديفولت فو هي الوضع الطبيعي للقيمة. هل أنا مش حستخدمها؟ لا. أحياناً في بعض الحالات أنا بدي أستخدم فيها هذه القيمة. يعني ممكن بكره في الجي إس يكون العنصر متحرك معاي. لكن بدي أثبت هذا العنصر عند حركة معينة. مثلا لما أضغط عليه. لما أعمل هوفر عليه. أثبته. فبتكون التثبيت عن طريق أني أحكي له بوزيشن. أعطيه القيمة ستاتيك. القيمة الثانية اللي بدنا ناخذها هي قيمة ريلاتيف. أجـي أحكي له بوزيشن ريلاتيف. ريلاتيف إيش بتعمل؟ بتحرك لي العنصر بالنسبة لوضعه الطبيعي. إيش يعني بالنسبة لوضعه الطبيعي؟ يعني بالنسبة لمكانه الأصلي. وين هذا العنصر موجود؟ هل هو موجود داخل سكشن؟ موجود داخل ديف؟ موجود داخل عنصر ثاني؟ بتروح بتحركه بالنسبة لمكان وجوده هو نفسه. وين هذا العنصر موجود؟ بتروح بتحركي إياه. يعني هلقيت هيني أنا حطيت بوزيشن ريفـ. وأعطيته توب 200 كسل ولفت 500 بكسل. قبل ما نعمل ريش تحدير. مين يتوقع لي وين العنصر حيجي مكانه؟ أنا معطيا قيمة رييف. وقلنا الريف بتروح بتحركي العنصر بالنسبة لوين هو موجود. وهو هش ام ال موجود البوتون داخل البـ. فكيف ح يتحرك معنا العنصر؟ مين حابب يشارك؟ أنتم بينفع تفتحوا المايك وشرحها قبل ما نعملش عشان أشوف وصلت عندكم النقطة ولا لا. هيـ هيت باشمهندسة ما هو بتحرك على حسب الصفحة بتتحرك على الأبـو بالنسبة لهـ الصفحة صحيح. هلقيت الريلاتيف لا مش للـ أبـ. بتتحرك بالنسبة للعنصر وين هو موجود. بتتحرك فيه. يعني مثلا هو هلقيت مش إحنا عندنا محتوى بالمرة في الصفحة. لكن بكره لقدام بتكون عندك الصفحة فيها خمسة سكشن. تمام؟ والسكشن الرابع هو اللي اللي فـ الديف وموجودة فيه هذا البوتون. هل حيتـ حرك بالنسبة للصفحة ولا بالنسبة للسكش الرابع الموجود فيه هو الديف؟ البوتون ملقيت موجود داخل الفـ. إذا يتحرك بالنسبة للديف. عشان أنا ما بديش تخربط بين هذه النقطة. لأنه عندنا حناذ موضوع الفيكسد. الفيكسد هي اللي بتتحرك بالنسبة للفيو بورت الشاشة كلها. لكن الريفـ بالنسبة للعنصر هو وين موجود. يعني المثال اللي عماله حكيته مش حيروح يحركوا بالنسبة لكل الشاشة. لا حيحه وين هو في السكشن الرابع مثلاً موجود بداخله الـ موجود بداخله البوتـ. حيـ حركه بالنسبة له. واضحة؟ واضح. فلقيت إحنا هـ لما أعطيت أنا البوتون قيمة ريفـ. وقلت له توب 200 كسل ولفت 500 بكسل. بروح هو العنصر وين موجود في الفـ. فمن هو موجود داخل الفـ. بيحسب المسافة التوب 200 بكسل واللفت 500 بكسل. شوفوا وين حيتكـ. شايفين وين تحرك؟ إيش لاحظته؟ لاحظت أنه العنصـ صر طلع من المكان الأصلي تبعه. صح ولا لا؟ طلع من المكان الأصلي. ليش؟ لأنه الريلاتيف بتحرك لي إياه بالنسبة وين هو موجود. بتبدأ تحركه. يعني نغير القيم مثلاً أقول له توب 20 بكسل ولفت 50 بكسل. هون إيش حيكون؟ توي كان البتم معي هون في الوضع الطبيعي صح ولا لا؟ ححسب وين هو موجود. يحسب مسافة الأعلى من جهة التوب الـ 20. ومن جهة اللف 500 الـ 50. فـ حيرجع في مكانه الأصلي. يعني في مكان الديف. بس هي النقطة كثير مهمة أنكم تفهموها. أنه الريلاتيف حيتـ حرك بالنسبة وين هو العنصر هذا موجود. مكانه الأصلي. وأحيانا هذا العنصر لأنه هو بيتحرك بالنسبة لمكانه الأصلي. لما أعطيه قيمة كبيرة زي 200 بكسل 300 بكسل. فـ أحيانا ممكن يطلع عن القيمة تبعته. نن هلقيت بناخذ بس أمثلة بسيطة عشان توضح كل قيمة. عندنا حناخد تطبيق عملي وتوضح لكم فوضـ حة الريلاتيف. إذا الريلاتيف يتحرك بالنسبة للمكان الأصلي تبعه. وين وين مكانه الأصلي؟ وين هذا العنصر موجود. يعني لو أجيت أنا هون الديف والبتون حطيتهم داخل سكشن. تمام؟ وهذا السكشن أعطيته هاي عشان بس ياخذ مسافة كبيرة. هذا السكشن خليني أعطيه الهاي الطول تبعه يكون مثلا 100 فيـ إتش. هلقيت صار البوتون موجود داخل. موجود داخل سكشن. أه السكشن صح مش في محتوى. خليني أعطيه باك جراوند إمج يو آر إل. هي مثلا هذه الصورة. بهذا الشكل. تمام. هلقيت لما أنا أجيت حكيت له قلت له أنه البوتوم هذا قيمته ريلاتيف. والتوب تبعته 20 بكسل واللفت 50 بكسل. كيف تحرك؟ مش بالنسبة لكل الشاشة. لا وين هو موجود. هو هون في الكود موجود داخل الفـ. الأعلـى منه هو الـ. فبروح بدور على البـ. وبياخذ مسافة الـ كسل والـ 50 كسل اللي أنا حركته فيها. ممكن هـ نحكيله بس لا أنا لو بدي أحكيله رايت. خلينا نحكي رايت. مش حتفرق كثير فيـ. حتكون برضه قريبة منه مثلاً أحكيله رايت 30 كسل. إيش يعني 30 بكسل؟ حيجي يحسبها من هان. من جهة اليمين. فالزر هذا حيجي معي على جهة اليمين بشكل أكثر. لا ثواني. أنا مش هي الفكرة. بدي أرفع البوزيشن عشان نشوف مكانه الأصلي. بعدين نبدأ نحركه. تمام؟ هي البوتون. هي المكان الأصلي تبعه. لما قلت له ريلاتيف. حكينا هيتحرك بالنسبة وين هو موجود داخل الفـ. أحكيله رايت. المفروض عشان أجيبه هون أزود المسافة أكثر. مش 30 بكسل مثلا 100 بكسل. خليها جهة الرأس. ولعلمكم ها الاتجاهات ممكن تعطوها قيمة سالبة. مش مشكلة. القيمة المهم هي أنه أنت الفكرة أنكم تفهموها كيف العنصر بيتحرك. القيم ممكن تعطوها هون قيمة سالبة حسب اتجاه الصفحة اللي أنتم بدكم إياه. يعني مثلا لو بدكم تخفوا العنصر. إذا تو لاحظتوا بدي أخفي العنصر. بشوف أنا وين بحركه. مثلاً من هان لهان. هي جهة اليمين تبعتي. لو بدي أطلعه برا الصفحة زي هيك. بعطيه من جهة اليمين بس قيمة سالبة عشان يجي معي بالاخفاء. بس هو في طرق ثانية في الإخفاء. بس هذه برضه أحد الطرق أنه أنا من قيم البوزيشن أعطيه قيمة سالبة عشان يخفي العنصر. بس أخذنا المرة اللي فاتت قيمة الأوسي صفر. هي حتقفلي العنصر. وسبلا برضه حتفي العنصر. واليوم حناخد طرق ثانية. تمام لحتى الآن؟ القيمة الثالثة اللي بتاخذها البوزيشن. أخذنا ستاتيك. وأخذنا ريلاتيف. في عندي قيمة فيكسد. من اسمها فيكسد إيش معناتها؟ ثابتة. صح ولا لا؟ بس الكسد بدناش نخرب بينها وبين الاستاتيك. الاستاتيك إيش ما يصير معاي. هي القيمة ديفولت قلنا حيكون العنصر معي ثابت. مش حترك. حتى لو أنا أعطيته الاتجاه. لكن فيكسد وقت إيش بنستخدمها؟ أكيد مر عليكم متصفحات بهذا الشكل. أنه تكونوا بتعملوا سكرول وشايفين شكل الناف إيش ماله؟ هي بنزل لتحت. لكن شكل الناف ثابت. صح ولا لا؟ فهون بيجي وهليت هذا ح نطبقه المثال هون. بتيجي قيمة الفيكسد. أنه أنا أثبت العنصر. بس مش أثبته زي ستاتيك أنه ما أخليه يتحرك. لا بثبته طول ما أنا بعمل سكرول معي في الصفحة. هذه هي قيمة الفيكسد. هلقيت الكسد لما أنا بحكي له البوزيشن تبعها فيكسد. برضه باجي هون بحرك التوب والرات زي ما بديك. بس في شغلة مهمة لازم نعرفها في الفيكسد. أنه الفيكسد لما أعطيها عنصر معين. بتروح بتاخذ المساحة تبعت هذا العنصر على قد المحتوى تبعه. كيف يعني؟ يعني لو هذا الناف بار اللي معاي بتكون بس من الهوم والابا. بس هي المساحة تبعته هوم وابا. واجيت قلت له بوزيشن فيكسد. براي النا حيكون معي بهذا الشكل. ولاش كيف حيكون؟ هي واضحة الفكرة؟ إيش السؤال اللي أنا بقوله؟ لأنه لما بعطيها لعنصر معين بتروح بخذ المساحة على قد المحتوى. فهذا النا لو أنا المحتوى تبعي في بس هـ الهـ. صح؟ المساحة تبعت حتكون بس له. باقي النا مش حكون الكد أنا معطيه مش ح ياخذها هذ كلها. طب إيش الحال؟ من الخصائص 100%. ممتاز. في ها الحالة بعطيه د 100%. ليش؟ بس هذا الطريقة حتستخدميه. وهلق ح نطبقه. لما يكون عندي البوزيشن فيكسد. فبروح بعطي د 100%. عشان أصير أي خاصية أنا معطيا على الناف بار هذا تطبق معه. فهي البوتون مثلا أنا معطيا فيكسد. أه وكمان شغلة مهمة أنه الفيكسد بتحرك ليش العنصر بالنسبة لمكانه الأصلي؟ بالنسبة لمين؟ بالنسبة للفيو بورت كلها. يعني هي الفيو بورت. يعني ممكن أنا أرفع الباك جراوند عشان تكون الصورة معكم واضحة أكثر. هي البوتون أنا معطيا فيكسد. الفيكسد ح تحرك لي إياه بالنسبة للفيو بورد. شايفين وين أجا مكانه؟ ليش أجا مكانه هـ؟ لـ أني أنا حكيا له توب 20 ورايت 10. فبروح بيحسب هي التبـ. شايفين الماوس كيف بتحرك؟ هي التبـ. هي مسافة الـ 20. ومن جهة اليمين هذه الصغيرة هي الـ 10 بكسل. لأنه قيمة الكس بتحركه بالنسبة للفيو. لو أنا بدي إياه هـ. حرك بالماوس هون. بغير الرايت سعتها بكبر الرايت شوي مثلا خليه 200 بكسل. الرا فـ بيجي معاي لجهة اليمين بهذا الشكل. تمام؟ فـ قيمة البوزيشن لازم الكس لازم أعرف فيها شغلتين. أنه أول حاجة بتحرك العنصر بالنسبة للشاشة كلها. للفيو بورد كلها. يعني ها كمان إذا بتلاحظوا طلع من المكان الأصلي تبعه. هو تو كان هـ الفـ. ليش طلع من المكان الأصلي تبعه؟ لأنه هو بيتحرك بالنسبة للفيو بورد. راح حسب وين الفيو بورد مسافة التب الـ بكسل. وأجا أخذه. ومسافة الرـ. لو أنا بدي إياه يرجع لهان. إيش أعطيه قيم؟ حبطل إيش حتبطل الرايت. صح ولا لا؟ إيش حتصير؟ ليفت. لو أنا بدي إياه يرجع للمكان الأصلي تبعه. يعني أحركه ويضل العنصر في مكانه في الـ مثلاً. أحكي له من جهة الليت 20 كسل. إيش يعني من جهة الفت 20 بـ. حتيجي تحسب الفيو بورت من هـ مسافة الـ 20 بكسل وتعطيه إياها بهذا الشكل. إيش معنات هذا الشكل؟ أنه هذه مش كمان المسافة بين الزير وبين اللون الأصفر. لا الـ 20 بكسل عبارة عن هذه المسافة كلها من الفيو بورت والعنصر نفسه. ومن هون نفس الحاجة التبـ. واضحة؟ فكرة الفيكسد أنه هي بتحركه بالنسبة للعنصر كله أو للشاشة كلها. وأحيانا العنصر حيطلع. فـ أنا لازم أعرف الاتجاه اللي أنا بدي أحرك العنصر فيه. لو بدي إياه بنفس الاتجاه. فقلنا بنختار أنه تكون القيم الأقرب لـه. الاتجاهات الأقرب يا توب يا لتيارات يا بتتو. بختار مين أقرب الاتجاهات له. وبعطيه إياها. وأنه أعرف أنه البكس بتتحرك بالنسبة للفيو بورد. وأنه الو تبعها بيكون على قد المحتوى. هذا العنصر على قد المحتوى. فلو أنا بدي هذه العناصر تطبق على كل الخصائص هذه تطبق على كل العنصر وهو ماخذ قيمة البوزيشن أنها تكون فيكسد. فهون بع الـ 100%. عشان أضمن أنه ياخذ كل مساحة هذا العنصر. تمام؟ نيجي للقيمة الرابعة اللي بتاخذها معاي البوزيشن. وهي ستيكي. في حد عنده خلفية شو الستيكي بتعمل؟ مين يشارك؟ شو الستيكـ بتعمل؟ طـ ثواني. أنا هلقيت حـ أحكيها بس بدي آخذ الحضور. طيب هلقيت البوزيشن لما بعطيها قيمة قيمة ستيكي. أول حاجة ستيكي برضه بستخدمها عشان أثبت عنصر معين. بس التثبيت مش زي الفيكسد بالنسبة للشاشة كلها. لا الستيكي بالنسبة للعنصر نفسه. أنا بثبته. وين هذا الشي بتشوفوه؟ لما يكون عندكم الموقع مثلا في مقالات أو في كتب. إذا بتلاحظوا هلقيت ح نطبقه. بتكونوا بتمشوا أو يعني هيك بتعملوا سكرول على العنصر نفسه. بتقرا المقال أو بتقرا الكتاب. وبيكون فوق ثابت مثلاً عنوان الكتاب. اسم المؤلف. أو عنوان المقالة. صح ولا لا؟ فبها الحالة بنستخدم البوزيشن قيمة ستيكي. ليش ما استخدمت الفيكسد؟ لأنه زي ما أنتم شفتوا هون. أنه طول ما أنا بعمل سكرول الناف بار ثابت معي على طول الصفحة. صح ولا لا؟ على العرض تبع كل هذه الصفحة. لكن الستيكـ بكون ثابت معي بس للعنصر هذا. فهون بكون استخدامي للستيكـ. أنه أنا بدي أثبت عنصر معين. هذا العنصر بالنسبة لعنصر ثاني هو موجود فيه. بثبت لي إياه. وبيكون على كل مساحة الصفحة. لا بس على هذا العنصر. لو بدنا ناخذها كمثال. حاجي هون الفـ. أعطيها بيـ. أو خلينا بالـ أول أعطيها إتش 1. تمام؟ في خليني أحكي. وفي عندي هـ بيـ. اللي في اللورـ. جملة اللورـ. وهو طبعاً ماخذ الهاي والـ زي ما أنتم شايفين بهذا الشكل. هلقيت إيش اللي أنا بدي أعمله؟ أنه بدي طول ما أنا بعمل سكرول على الديف هذا. الموقع يكون ثابت معي. بس عشان تضبط هذا الحركة. بدي أزود اللم كمان أكثر عشان يجيني السكرول. ثواني. أخذ هذه الـ وبي بيست. فاهمين ليش بعمل أنا السكرول؟ هو أصلاً متى بيظهر؟ لما يكون المحتوى اللي أنا حطاه زيادة عن مساحة العنصر. أنا هون معط ها معينين الـ 200 والـ 200. تمام؟ لكن أجيت هون زودت المحتوى تبعه. فبهرت السكرول. تمام؟ إحنا هلقيت حناخد خاصية الأوفر فلو. الزيادة. خليني بس أعطيها سكرول. وعدكم ح تفهموها. تمام؟ أنا هذا اللي بدي إياه. ما تفهم هـ إيش عملت. إن أوفر فلو. اللي بدي تفهموه هـ خصية بدنا نعملها للعنصر. هـ لاحظ أنا لـ مش معطيه خاصية. صح ولا لا؟ لما بعمل سكرول. شايفين الـ إيش صار فيه؟ طلع لفوق. صح ولا لا؟ ليش؟ لأنه خلص المكان اللي أنا حجز له إياه. أنا جايه هون عامله كاتش تي ام ال. عملنا ديف فيها إتش 1. خلص المساحة تبعته. بيظهر البيـ. خلص بيظهر البوتون. صح ولا لا؟ هلقيت اللي أنا بدي أعمله. أنه بدي طول ما أنا عامله سكرول. التايتل الموجود هون يكون ثابت معاي. فبروح مين هو التاتل؟ إيش ماخذ؟ الاتش 1. فعلى الاتش 1 حطبق خاصية الستيكـ. يعني هون حاجي أعطيها هون الـ إتش 1. أعطيها بوزيشن ستيكي. هلقيت حكينا أول حاجة لازم أعرف مين العنصر. هينا عرفنا العنصر اللي بدي أنا أحركه. اللي هو الاتش 1. وعرفت إيش الفصيلة بدي أستخدم له إياها ستيكي. عشان أنا بدي أثبت العنصر بناء على الموقع تبعه. مش بكل الصفحة. بضل مين؟ الاتجاهات تبعت الصفحة. إيش برايكم هون الاتجاهات اللي أعطيه إياها؟ توب وليفت ورايت وبتم. إيش الاتجاهات اللي أنا بدي أعطيه إياه؟ هي تخيلوا الشكل معي. مين حابب يشارك؟ إيش القيم المفروض تكون؟ طالما أنا بدي أثبته. طول ما أنا بعمل هيك سكرول. فكروا شوي يا جماعة. معاي. أعطيه توب مثلا 200 بكسل ولا 100 بكسل ولا إيش أعطيه القيمة؟ حد حابب يشارك؟ صح التبـ. لازم يكون هـ قيمة صفر. ليش قيمة صفر؟ لأنه أنا بدي يتـ. هو مكانه الأي. بدي أه من جهة الأعلى ينزل معي. و باي حاجة. لأن طول ما أنا عامله سكرول لـ تبـ 500 كسل مـ أو 200 بكسل. حيجي معي هـ. صح ولا لا؟ لكن أنا بدي أه يضل سابت فوق. فلازم أحكي توب صفر. عشان ما يتحرك العنصر معي بالمرة من جهة الأعلى. بقول له توب صفر. واضحة هذه النقطة؟ شوفوا هـ إيش حيصير؟ هي ريفريش. وهي بعمل سكرول. شايفين التايتل إيش صار فيه؟ زي الحالة الأولى ولا؟

بيختلف التايتل. هي ثابتة معي، ملاحظين؟ والله حاسسكم نايمين، مش زي تو. فش ستيكي كان التايتل خلص المكان تبعه، فخلص صار يطلع لفوق ويظهر العناصر الثانية. لكن هلقيت طول ما أنا بعمل سكرول، التايتل بتكون ثابتة معي تمام.

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

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

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

هلقيت هذه الأبسليوت قلنا بتروح بتدور مين أقرب عنصر ماخذ لها. فبناءً ما زال أنا بدي أحركه بالنسبة لعنصر البيرنت، يبقى لازم البيرنت هو اللي يكون ماخذ هذه الخاصية. فبروح بعطيه قيمة بوزيشن ريلاتيف. ليش ريلاتيف؟ هو بينفع أعطيه أي قيمة من البوزيشن اللي إحنا حكيناه، بس الريلاتيف لأنه هي بتحرك العنصر بالنسبة لمكانه الأصلي. وين هو موجود بتحركه، فهي بتكون أفضل حال إني أستخدمها مع البوزيشن لما تكون قيمته أبسليوت. لما أنا بدي أحرك العنصر بالنسبة لعنصر ثاني. مثال عليها اللي قلت لكم التصميم هذا تبع المرة اللي فاتت اللي قلنا ضايل علينا جزئية البوزيشن فيه. هلا أنا عمالي على السريع عملت سكشن كاتش تي ام ال، عملت سكشن وحطيت بداخله ديف. تمام؟ واجت ه على السي اس اس، واضح عندكم إنه السكشن ماخذ خاصية الك جراوند إيج. وموجود بداخله ديف. فعملت هذا الكلام، أظن ما فيش فيه مشكلة. هذا ورحت السكشن أعطيته طول 100% في اتش. قلنا إيش يعني إنه أعطيه هاي 100% في اتش؟ إنه هذه الباك جراوند تاخذ كل مساحة الفيو بورت، صح ولا لا؟ بصير المحتوى اللي أضيفه بعد هيجي هان تحت بعد ال 100% في اتش. هلقيت عندي هذه الديف زي ما أنتم شايفين، وبدي أحركها. هي هون كانت مبينة معي في الصورة إنه الديف جاية معي هون. صح ولا لا؟ فكيف بدنا نحركها؟ أول حاجة باجي بحكي هذه الديف أنا بدي أحركها. طبعا احنا في الوضع الطبيعي ه أنا زي ما منشئها جاية من جهة الليفت ومن جهة التوب. فعرفت إنه أنا لازم أحرك هذا العنصر. عشان أحركه، أول حاجة بحكي بالنسبة لمين أنا بدي أحركه؟ بالنسبة للسكشن، صح؟ هو موجود داخل السكشن. فانا لازم هذا العنصر أحركه بالنسبة ل سكشن. فما زال أنا هذا العنصر بدي أحركه بالنسبة لعنصر ثاني، يبقى لازم أعرف إنه الفصيلة اللي بدي أستخدمها هي الأبسليوت. برايكم لمين أعطيها؟ تو حكينا لمين الأبسليوت بعطيها يا جماعة؟ صح، للعنصر الابن. بعطيها مين؟ هان العنصر الابن اللي هو العنصر اللي بدي أحركه، اللي هو مين؟ الديف، صح ولا لا؟ فجي على الديف بقول له بوزيشن أبسليوت. ليش بوزيشن أبسليوت؟ لأنه هذه الديف أنا بدي أحركها بالنسبة لعنصر ثاني اللي هو السكشن الموجودة فيه. بعد ما أحكي له أبسليوت بحدد الاتجاه اللي بدي إياه. هي زي ما أنتم شايفين، مين أقرب اتجاه أنا أخذه؟ إيش الاتجاهات الصح المفروض اللي أحرك فيها العنصر؟ أحركه من جهة الرايت؟ أحسب هذه المسافة؟ ولا أحركه من جهة الليفت؟ أقرب الاتجاه له حتكون الليفت، صح ولا لا؟ ولو بدي أحركه من فوق، باجي بعطيه قيمة توب اللي هي هذه المسافة. فجي على عنصر الديف اللي اخترت له أبسليوت، بعطيه من جهة الليفت مثلا 200 بكسل. من جهة الرايت كانت مسافة صغيرة مثلا 50 بكسل. هلقيت لسه مش حيصير شي معي. لازم هيك لسه مش صح. ما أخذ قيمة الرايت اللي فوق. ليش؟ لأنه لازم هذا العنصر أروح أشوف مين الأبو تبعه اللي هو السكشن وأعطيه قيمة البوزيشن ريلاتيف. فجي هون بحكي له بوزيشن ريلاتيف. وهيي زي ما أنتم شايفين، الأبسليوت على مين تطبقت؟ على الديف اللي هو العنصر اللي أنا بدي أحركه، اللي هو تشايلد أصلا. والريلاتيف على العنصر الأبو تبعها اللي هو السكشن. فهون بتكون بوزيشن ريلاتيف. بصير أتحكم بال وين أنا بدي أحرك العنصر. بصير أتحكم فيه، مثلا بدي أنزله كمان شوية، خليها التوب نزودها شوية. اه، أنا بحكي معطيها رايت هان هان توب 50 بكسل. إذا لاحظتوا ما تحرك من فوق. نزل معي توب لفوق. وبتصير بدي إياه مثلا هان. حتكون هان الرايت أقرب من الليفت. فه مثلا بجي بحكيله مثلا نقلل المسافة بس عشان كل الأمور تكون عندكم واضحة 100%. بعنصر ه بيتغير مكانه. شايفين كيف قدرت أتحكم بالعنصر وين ما بدي؟ بدي ينزل لتحت ه ممكن أحدد البوت بدل ما أقله 50 بكسل. فبوزيشن كثير حتساعدكم عشان أي عنصر بدكم إياه وين ما بدكم تنقلوا المكان تبعه، تغيروا المكان تبعه، تكونوا فاهمين الخمس قيم اللي بتاخذها. أول حاجة ستاتيك، يعني العنصر ثابت. إيش معطيته قيم من الاتجاهات التوب واللفت والرايت مش حيتغير معي لأنه المهم أعرف إنه هي بتحركي بالنسبة للشاشة كلها. ها الشغلة. اثنين، بياخذ المساحة على قد المحتوى تبعه. فلما يكون العنصر هذا أنا بدي إياه ياخذ المساحة كلها، بعطيه الوث تبعته 100%. ريلاتيف، بستخدمها لما أنا أكون بدي أحرك العنصر بالنسبة لمكانه الأصلي. هو موجود داخل سكشن، موجود داخل ديف، موجود داخل مثلا ديف ديف وديف يعني هيك ديف أو بي أي عنصر موجود. وين هو موجود بالضبط؟ بالنسبة لمكانه الأصلي بيتحرك. بالنسبة للريلاتيف. ستيكي، حكينا لما بكون بدي أثبت عنصر، لكن مش على الصفحة كلها، بس على العنصر اللي الكبير الموجود فيه. زي ما أنتم شفنا كانت الاتش 1 موجودة داخل الديف. فانا الاتش 1 بدي أثبتها بناء على الديف، العنصر الأكبر لها، مش بناء للشاشة كلها. وآخر حاجة الأبسليوت، هتستخدمها لما بدكم تحركوا عنصر بالنسبة لعنصر ثاني. فالعنصر اللي بدي أحركه بعطيه قيمة البوزيشن أبسليوت، وببدا أحدد الاتجاه اللي بدي إياها. والعنصر الأبو أو العنصر اللي بده يتحرك بالنسبة له، بعطيه قيمة بوزيشن ريلاتيف. وهذا لعلمكم من أسئلة المقابلات إنه إنه إيش الحالة اللي أستخدمها لما يكون عندي عنصر بحرك بالنسبة لعنصر ثاني؟ حتحكوا أبسليوت. وه الأمور حيقول لك إيش معنى ريلاتيف؟ ليش حنختار خاصية الريلاتيف مش خصائص الثانية؟ لأنه الريلاتيف حتكون أقل الأضرار، وهي اللي حاضن إنه يتحرك العنصر زي ما أنا بدي في الاتجاهات هذه اللي أعطيتها إياه. ليش؟ لأنه الريلاتيف حي حركي إياه بالنسبة لمكانه الأصلي. لحتى الآن تمام؟ اللي مش فاهم أي نقطة يحكي لي، لأنه صراحة البوزيشن من الشغلات الكثير مهمة. عادي بعيد لكم إياها. اه، إيش رأيكم أكمل؟ طب ماشي، خلينا نكمل. حكينا اه تفضلي. مش سامعة. طبق كمان مثال عليهم معنا هلقيت زغنون. طيب ماشي، احنا هيت ح نطبق مثال تبع تثبيت الناف. اخذناهم كلهم. أنت بدك تشوفي أول حاجة، إذا أنت عرفتي مين العنصر اللي بدك تحركيه. اثنين، اخترت إيش القيمة تبعت البوزيشن حسب إذا أنت بدك تحركيه بالنسبة لمين؟ بالنسبة لمكانه الأصلي؟ بالنسبة للشاشة؟ بتقدري تتحكمي فيه. بعد هيك تحركي الاتجاهات تبعته. تمام؟ هلا حناخد مثال اللي هو لو أنا بدي أثبت الناف على كل الصفحة. زي ما احنا شايفينها، طول ما أنا بعمل سكرول، الناف ثابت. مع حكينا في ها الحالة إيش بعطيه؟ بعطيه بوزيشن فيكسد. ليش فيكسد؟ لأنه بثبت لي المحتوى أو العنصر هذا بالنسبة للشاشة كلها، للفيو بورت كلها. فع السريع حن طبقه. مين يشارك معاي كش تي ام ال بال أول؟ إيش المفروض نعمل؟ ححي كل شي ومين يشارك؟ يلا سهل يا جماعة. بحط هدار بال أول. ممتاز. كش تي ام ال حكينا أول ب يكون عندي هيدر بداخل الهيدر إيش حيكون؟ ممتاز. عناصر الناف هذه عبارة عن شو؟ هدول عبارة عن شو؟ ممتاز. بداخل ال إيش أحط؟ ال إي. تمام؟ طيب الل إي هدول الهوم والأوت لما بضغط عليهم بدوني على السكشن تبعهم. بضغط عليهم بوديني على السكشن. يبقى عبارة عن شو حتكون؟ عن لينكات. يبقى لازم هذه ال إي أحطها داخل أي. الاتش تبعها بون عبارة عن الاي دي تبع السكشن. احنا مش حنكمل كل التصميم. لو أنا يعني بدي أشتغل صح، المفروض أجي أحكي له هذا السكشن أعطيه مثلا الاي دي تبعه ات، وأجي أستدعي ه داخل الاتش كيف؟ عن طريق إشارة الهاشتاغ، لأن هو أيدي وبعطيه ال. تمام؟ إي ه بكتب كلمة الهوم لات اللي أنا بخ على السريع له الأشياء. خلص عقد هدول وهيكون عندي كلمة ه وهون كلمة ات ومثلا كونتاكت. وإذا في سيرفس، برودكت، كل ها الأمور. هلقيت لو أنا بدي أشتغل، احنا ها التصميم بشتغل عليه. بدي أشتغل أول حاجة يا روان، صح؟ أول شي بدي أشتغل بدي أحطهم على نفس إيش ح تستخدمي الخصائص اللي أخذناهم؟ نحطهم وين؟ على نفس السطر. اه، بدي أخليهم على نفس السطر. إيش أعمل؟ فليكس ديسبلاي فليكس. ممتاز. في عندك خيار ثاني ممكن نستخدمه؟ مش عارفه. لا هي لو قلت له لاين أو إن لاين بلوك. إيش رايك؟ اه، اه، الأن لاين والأن لاين بلوك بيعملوا لي على نفس السطر. بس الأحسن ه اختار إن لاين بلوك عشان لو بدي أعمل بادينج و مارجين تقبل، صح ولا لا؟ لأنه قلنا الأن لاين بتعمل لي البادينج وال مارجين بس من جهة الليفت والرايت. فممكن هون أجي أطبق إن لاين بلوك. لحتى الآن تمام. خليني أستخدم الديسبلاي لو بدي أستخدم الفليكس على مين أطبقها؟ مين الأبو هون اللي بنطبق عليه الديسبلاي فليكس؟ ناف؟ ممكن الناف، وممكن مين كمان؟ اليو إل. ال إي كلهم تابعين لليو. الديسبلاي فليكس قلت لكم اللي مش فاهمها، ناخذها لقاء لحال. بس إنه أنتم تعرفوا إنه هلقيت إنه الفليكس بتعمل إنه العناصر على نفس السطر وبتم تطبيقها على الأبو. فه ممكن نطبقها على الناف وممكن على اليو إل. خلينا نطبقها على الناف. أحكيله ديسبلاي فليكس. طبعا الفليكس مش حتعملي إلا تخلي لي العناصر على نفس السطر. على اليو إل أنا بدي أطبقها. هي الأ حتكون هي الأضبط. اليو إل بهذا الشكل. هلقيت بتصيري بدك تتحكمي في المسافة هذه. إيش تعطيه؟ بادينج ولا مارجن؟ لأنه لسه ما اخذنا جفاي كونتنت إنه نحك سبيس بتوين. لو فليكس أعطيه بادينج ولا مارجن؟ مارجن. ليش مارجن؟ اطلعي لي ه. احنا قلنا المارجن هوامش خارجية بتكون بين عنصر وعنصر ثاني. لكن أنت عندك كل ال إي هدول يعتبروا عنصر واحد تابعين لليو إل، صح ولا لا؟ فحتكون الهوامش ه داد. حتكون. فهون بحكيله بادينج. وبحدد قديش المسافة. مثلا 40 بكسل. [موسيقى] اه نزل الديف. ما ممكن أعطيه اه. احنا عشان مستخدمين لو مستخدمين بهذا الشكل. طبعا هو مش تصميمنا احترافي لأنه لسه ما اخذنا كل الخصائص فيه. ولو بدي أعطي أكثر، أفصل أكثر، حطيه باك جراوند. وأعطي ال لهد. مش هذا موضوع. موضوع بدي أستخدم البوزيشن. تمام؟ حاجي أول حاجة أعمل محتوى كبير عشان طول ما أنا أنزله بالصفحة تقدر تشوف إنه هذا ثابت. حاجي ه على السكشن على السريع أعطيه لورم. والسكشن هذا أوصله ال إي، وأعطيه هاي 100% في اتش عشان أضمن إنه يصير عندي سكرول. الهاي 100% في اتش بهذا الشكل. ه ثابت معي. هلا أنا اللي إذا بتشوفوا هين لما عملت سكرول، الناف إيش صار فيه؟ راح لفوق. ليش؟ لأنه خلص المكان تبعه. هو أنا كنت حجزه هان. اجيت عملت كمان مرة نزلت لتحت. الناف راح. هلا أنا بدي أثبت هذا الناف. عشان أثبت هذا الناف حكينا بنستخدم خص. اه تفضل. في حد بده يحكي شي؟ لا. جبت إنه بنحط له بوزيشن. عشان ممتازه. هلق بوزيشن. لما قلت له بوزيشن فيكسد. لو أنا هذا الناف كنت متيا باك جراوند كر. إيش حيصير فيه؟ مثلا بهذا اللون. إيش برايك حيصير؟ حياخذ بس المساحة تبعت الناف. يعني على قد اللينكات هذه الموجودة فيه. يعني أنا عشان عامله هلا هان جستي فاي كونتنت مش حتوضح كثير الصورة. أو هييه حتى هييه كمان أخذها. شفتوا إيش صار في في الناف؟ بس على قد المحتوى. شو المحتوى تبعه؟ اللي هي اللينكات الموجودة فيه، الهوم والأوت والكونتاكت. طب أنا بدي هذا الناف على على كل المساحة تبعت الصفحة. فلازم لما تستخدموا البوزيشن فيكسد تستخدموا معها خاصية الوث إنها تكون 100% عشان أضمن إنه الباك جراوند كر تطبق معاي على كل النا. شايفين الفرق بينهم؟ ها صار معاي هذا زي ما هو موجود. وهي إذا بتلاحظوا هين لما عملت سكرول. هذا ثابت. بس بدي أعمل كمان سكشن بنفس المحتوى عشان يزيد السكرول ويبين أكثر. اجي هذا أعمل له تكرار. شايفين السكرول اللي تحت؟ والناف إيش ماله؟ ثابت ولا راح زي ما هو ثابت؟ ممتاز. كمان عشان إذا بتلاحظوا المسافة الموجودة هون. في مسافة صح ولا لا؟ يبقى إيش الحل تبعها؟ صح إنه أعطي. حط الباض كله. أعطيت توب صفر. صح ولا لا؟ عشان ما تكون عندي مسافة. وكمان من جهة الليفت نفس الحاجة. شايفين المسافة الصغيرة هذه؟ برضه عشان يكون التصميم تبعي أكثر أحسن، أكثر ودقة أكثر. فجي بقول له هون من جهة الليفت صفر. نعمل ريفتش. شفتوا إيش صار؟ المسافة اللي كانت هان والهان. المسافة البيضاء الصغيرة. مش تتذكروا المرة اللي فاتت إيش قلت لكم؟ إنه في بعض العناصر بتاخذ بادينج أو مارجن معين. هي باي ديفولت تبعتها، صح ولا لا؟ ف هي المسافة البيضاء اللي تو كانت موجودة الد المارجن تاعت العنصر نفسه. عشان أضمن إنه أنا طول ما أنا عامله سكرول، هيني قاعدة بعمل سكرول. ولو في كمان محتوى صفحة، بضل الناف معي ثابت. فانتبهوا إنه أحط التوب صفر ولفت صفر. ليش؟ لأنه ممكن لقدام الموقع عندي في شغلات كثير ممكن تواجهكم إنه يجي سكرول أفقي معكم هون تحت. ولما تشوفوا سكرول أفقي معناته في عندكم مشكلة بالموقع. وهذا الشيء مش صح. فانتبهوا لهي النقطة إنه لما استخدم لما يكون عندي مسافة، مسافة صغيرة بتكون هذه مسافة الباد والمارجن تبعت العنصر. فحسب العنصر هذا بعطيه بس قيمة صفر عشان ما ياخذ الباد والمارجن تبعتها. لحتى الآن تمام؟ واضحة فكرة البوزيشن بشكل عام؟ يعني صراحة تمام. حاولت قد ما أقدر يعني أوضح لكم كل حاجة فيه. فأنتم بتصير التصميم اللي أنتم بدكم تشتغلو فيه. عندكم عنصر معين بده يتحرك. بس اعرفوا إنه إيش القيم اللي بتاخذها البوزيشن وتعرفوا ه.