lecture9

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

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

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

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

الـ CSS لسه بما إنه لسه ما أخذناها، فروحوا على الـ HTML. تعال هان على مود عشان الـ HTML خلصناها. فعندكم م اثنتين HTML. فوتوا عليهم. طبعا الـ DOM events لسه ما أخذناهم. هذا في الـ JS. وهذا الـ HTML DOM. لا لسه ما أخذنا شغل JS هذا. تمام؟ فتعال نشوف الـ HTML الأولى. أنا بدي الأشياء اللي هي التاجات اللي أخذناها والـ attributes. هيه موجودين هون. تمام؟ هي التاج والـ attribute. فبرضه فوتوا عليها شوفوا ايش في شغلات موجودة فيها.

الموقع الثاني اسمه سان فاوندري. سان فاوندري جايب لكم نظام أسئلة وأجوبة لشغلات معينة. كمثال هذا في داتا ستراكشر. ديروا بالكم. في خوارزميات. مواد اللي في الجافا. هذه احنا بدنا نشوف الأشياء اللي بتهمنا اللي هي HTML، CSS. ممكن زر البحث فوق يساعدكم. أنا ممكن حكي له هي HTML. هي بحكي لي هي multiple choice questions. هان نظام أسئلة وأجوبة. نفتح عليه. نظام أسئلة وأجوبة هون بيعطيكم. هي شايفين؟ بتصيروا أنتم تحلوا تشوفوا الـ هذا. وبعدين تعرضوا الـ answer اللي أنتم بدكم إياه. اللي هي الإجابة. هذا الموقع بيعطيكم نظام أسئلة وأجوبة.

هذول الثلاث مواقع حبعث لكم إياهم اليوم إن شاء الله. حناخذ من أهم خصائص الـ CSS وهي خاصية الـ display. تمام؟ خاصية الـ display في الـ CSS. مين بيعرف شو بتعمل الـ display؟ شو فكرتها؟

ممتاز. بتخليني أتحكم في ترتيب العناصر عندي في الصفحة. فيش موقع ويب حتشتغلوا إلا حتستخدموا فيه خاصية الـ display. تمام؟ فالـ display بتخليني أتحكم في العناصر وين أحط العناصر، ترتيبها في الصفحة. مين العنصر الأول، مين العنصر الأخير وهكذا. تمام؟ هي الـ display بتحكي لي بأخذ أكثر من قيمة. قيمة اسمها block، قيمة اسمها inline، قيمة اسمها inline-block، قيمة اسمها flex، قيمة اسمها grid، قيمة اسمها none. حنشرح كل وحدة لحال.

أول حاجة قبل ما نشرح ها الفكرة. احنا أخذنا قبل هيك أنه أنا العناصر في الـ HTML عندي منها كم نوع؟ نوعين. عناصر block element وعناصر inline element. صح ولا لا؟ مين يذكرنا ايش حكينا في الـ block element؟

آه. حكينا عناصر block element بتكون حاجزة المساحة كاملة تبعت العنصر. صح؟ ولا بحكي عنها full width. بكون ماخذة كل الـ width الموجود عندك. لكن العناصر الـ inline element حكينا بتاخذ على قد الـ content المحتوى. صح ولا لا؟ حسب الـ content.

طيب مين يذكرنا بعناصر block element زي مين؟

زي الـ div. الـ p. الـ ul. ممتاز. الـ section، الـ main، الـ header، الـ footer. وهي الأشياء. صح ولا لا؟ section لازم تكونوا حافظينهم. header، main، footer. مين كمان كان عناصر block element؟

لا. inline. الـ p والـ sub متذكرينهم؟ تمام. الـ sub والـ sub.

طيب العناصر الـ inline مين العنصر المشهور في الـ inline؟ الـ span. كل أنواع الـ form. button، text area، label. كلهم يعتبروا inline element. كل أنواع الـ HTML formatting. صح؟ اللي هي الـ strike، الـ del، الـ b، الـ strong، الـ i، الـ em، الـ i. كلهم يعتبروا من عناصر الـ inline element. تمام؟ مين كمان أخذنا عناصر inline؟

الـ a. الروابط. صح ولا لا؟ الـ h1 لـ h6 يعتبروا block element. من h1 لـ h6 block element. تمام؟ ممتاز جدا.

حكينا أنه في الـ block زي ما أنتم حكيتوا أنه العناصر بتكون حاجزة المساحة كاملة. هي شغلة. فهذا الشيء حيترتب عليه أنه العناصر حيجوا عندي تحت بعض. صح ولا لا؟ في الـ inline عناصر بتاخذ على قد المحتوى. طول ما أنا في عندي مساحة فاضية حيجي العناصر عندي على نفس السطر. مضبوط؟ ممتاز. هذه هي فكرة أنه أنا لما أحكي display block ولما أحكي display inline. أنه أنا لما أحكي له display block يعني خلي لي العناصر تاخذ المساحة كاملة وخلي لي العناصر تيجي تحت بعض. لما أحكي له display inline خلي لي اياهم جنب بعض وخلي لي اياهم ياخذوا على قد المحتوى.

طيب لو أنا مثلا عندي عنصر block وبدي إياه يجي على نفس السطر. هل بقدر ولا بقدر؟ بقدر من خلال خاصية الـ display inline-block. تمام؟ عشان هيك اجت الـ inline-block وحكت لي أنه أنا مزيج ما بين العناصر الـ block element وما بين inline element. لأنه مش منطق أنا كل الـ p ما يجوا إلا معي كل واحدة بسطر لحال. طب أنا أحيانا بحتاج أنه هذا الـ p أخليهم على نفس السطر. مضبوط؟ عشان هيك نيجي بنحكي أنه العناصر حكينا عنا block و inline و inline-block.

هلقيت بيحكي لي ايش فكرة الـ block. اللي هو زي ما حكيتوا أنه أول شيء كل واحدة في new line في سطر جديد. والـ flow حاجز المساحة كاملة. هذه مش مختلفين عليها. تمام؟ عنصر الـ inline حكينا على نفس السطر. same line. وحكينا بتاخذ اللي هو على قد الـ content الـ width لها على قد الـ content. تمام؟ ممتاز.

هلت بيجي علينا الخصائص اللي أخذناهم اللي هي الـ height والـ width والـ padding والـ margin. حكي لي أنه هذول الخصائص ما بتتحكم أو ما معها صلاحية أنه تتحكم في كل هذه الخصائص. كيف يعني؟ أول حاجة الـ block element كمثال الـ div. بدي أجي هون على الـ HTML. أدوات خلاص. تمام؟ بدي أجي هون أعمل div فيها. ونحن عارفين أنه مجموعة الـ div بتيجي تحت بعض بهذا الشكل. تمام؟

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

ممتاز. margin. شو؟ top أو bottom. صح ولا لا؟ بحكي له margin top أو bottom bottom. خليني أحكي له margin bottom مثلا 30 بكسل بهذا الشكل. طيب لو بدي يكون في يعني مسافة ما بين المحتوى وما بين الحدود. ايش أحكي له؟

padding. صح ولا لا؟ padding بقدر أحكيله من كل الاتجاهات. ولو أنا بدي إياه بس من فوق بقول له padding-top. صح؟ هي 30 بكسل. تعال نعمل refresh.

خاصية الـ display block. العناصر اللي ماخذة أوريدي خاصية display block. اللي هي زي الـ div، زي الـ p. اللي احنا كتبناهم. بتحكي لي أنه أنتِ بتقدر تتحكمي في الـ height، في الـ width، في الـ padding، في الـ margin. عشان هيك لو أنا برضه أعطيتها height و width حتتحكمي فيهم. height مثلا 150 بكسل، width مثلا 200 بكسل. هيني قدرت أتحكم فيهم. إذا العناصر الـ block element سواء كانوا من الـ block element باي ديفولت أو أنا ضفت عليهم display block. خاصية الـ block لهم أربع مميزات. أنه بيتحكموا في الـ height، بيتحكموا في الـ width، بيتحكموا في الـ padding، بيتحكموا بالـ margin. هي زي ما أنت شفت استخدمت عليهم. تم تطبيقهم على العناصر. ما في أي مشكلة. صح ولا لا؟

هي بالنسبة لعناصر الـ block element. نيجي لعناصر inline element. زي مين؟ الـ a. أحكي له هي الـ a وأحط هون كلمة رابط. وهي الـ a. كلنا عارفين أنه الـ a حيجوا معي على نفس السطر بهذا الشكل. تمام؟

هل بدي أصل للـ height؟ الـ style. أوصل للـ a. والـ a باي ديفولت ماخذة display inline. صح ولا لا؟ بدي أعطيها height. أنا حاطيها background color عشان تبين معكم. مثلا هي 100 بكسل، width 100 بكسل. و background color مثلا هذا اللون. تعال نعمل refresh. في أي اختلاف؟ يعني الـ link صار له height و width زي ما أنا حددت؟

هي 200 عشان نشوفه. وهي الـ width 200. وهي refresh. لو أضل أعمل لبكرة refresh مش حيقبل الـ height والـ width. عشان هيك عناصر الـ inline element بتحكي لي أنا ما بتعامل مع الـ height والـ width. أصلا منطقيا. نحن قلنا بتاخذ على قد المساحة تبعتها. على قد المحتوى. صح ولا لا؟ فإذا أنا بدي أعطيها height و width بطلت بتاخذ على قد المحتوى. صح ولا لا؟ عشان هيك عناصر الـ inline element بتحكي لي أنا ما باخذ height و width.

طيب تعال نشوف الـ padding والـ margin. بدي أعطيه padding 50 بكسل. padding 50 اللي هي المسافة بين الـ border والـ content. وهي refresh. ايش لاحظته؟ أخذ الـ padding. صح ولا لا؟ طيب تعال نعطيه margin. اللي هي المسافات بين كل واحدة والثانية. margin مثلا 50 بكسل. اللي هي المسافة بين كل واحدة والثانية. أخذ. صح ولا لا؟

طيب تعالي أوقف هذه اليمين واليسار. تعالي أوقف هذه وأحكي له padding-top مثلا 50 بكسل. وهي refresh. أخذها. مضبوط؟ طيب تعالي أحكي له margin-top مثلا 100 بكسل. margin-top اللي هي اللي من فوق المسافات اللي من فوق. أخذها؟ لا. صح ولا لا؟ عشان هيك عناصر الـ inline element بتحكي لي هو فعليا أنا لما توي حكيت له padding-top هو ما أخذ فعليا الـ padding. ماخذ الـ padding. الـ inline element بتحكي لي أنه أنا الـ padding والـ margin باخذهم فقط من جهة اليسار واليمين. عشان هيك احنا تو شفناهم لما أنا جيت قلت له padding مثلا 50 بكسل. ونعمل refresh بهذا الشكل. تمام؟ هو فعليا الـ padding هذا ما أخذه من كله. بس نحن هون إذا مش منتبهين أنا مش عاملة قصة الـ box-sizing. نحن اتفقنا أنه يفترض أنه أنا قبل ما أبلش المشروع أعمل الـ selector وأحط الـ box-sizing. صح ولا لا؟ ايش القيمة تبعتها؟

inline-block. ليش؟ عشان قلنا الـ padding والـ border يتم احتسابهم من الـ height تبع العنصر. ما يروحوش ينضافوا زيادة على الـ height والـ width تبعون العنصر. تمام؟ فهي refresh. إذا اللي أنا بدي أوضحه هذا أنه العناصر الـ inline element أول حاجة ما بتاخذ الـ height والـ width. شغلة ثانية الـ padding والـ margin بتاخذهم بس من جهة اليسار واليمين. هذا الشيء نحن طبقناه على a. طبقوه على button مثلا. هي من الـ inline. طبقوها على p. على strong. على del. على strike. على أي حاجة.

طيب أنا مش منطق أنه أنا يكون عندي عنصر وما أتحكم في الـ height والـ width تبعه. أو ما أتحكم في الـ padding والـ margin من فوق ومن تحت. مضبوط؟ عشان هيك اجت خاصية الـ inline-block. هان أنا لو بدي أجي أحكي. احنا قلنا هان بتقبل الـ height والـ width والـ padding والـ margin. لو بدي أحكي على الـ inline. بدي أحكي له أنه height و width ما بتقبلهم. نحط عندهم x مثلا أو zero except. وبتقبل الـ padding والـ margin بس من جهة الـ left والـ right.

نيجي للـ inline-block. الـ inline-block بتحكي لك أنا مزيج. زيج ما بين الـ block وما بين الـ inline. كيف يعني؟ أول حاجة بتحكي لك أنا بخلي العناصر على نفس السطر. اللي هي أخذتها من مين؟ من الـ inline. صح ولا لا؟ خلت لي إياها على نفس السطر. أخذتها من الـ inline. شغلة ثانية بتحكي لك أنه أنا بقدر أتحكم في الـ height والـ width والـ padding والـ margin. يعني متى أستخدم الـ inline-block؟ لما يكون بدي عناصر على نفس السطر وبدي أتحكم فيهم في الـ height والـ width والـ padding والـ margin. تمام؟

يعني لو أنا اجيت هان على الـ div. احنا عارفين أنها block element. لكن لو اجيت قلت له display inline-block. ونيجي نعمل refresh. شفتوا ايش صار؟ خلت لي العناصر على نفس السطر. صاروا كأنهم كلهم inline element. إذا من خلال الـ inline-block لما أنا يكون بدي عناصر على نفس السطر وأتحكم في الـ height والـ padding. باجي بستخدم عليهم display inline-block. تمام؟

طب بدي عناصر كل واحدة في سطر لحال. بقول له display block. كل واحدة لحال. يعني لو أنا جيت على الـ a. احنا عارفين أنه الـ a أصلا باي ديفولت هي inline. لكن لو قلت له display block. تعالوا نعمل refresh. شفتوا ايش صار؟ صارت كل واحدة في سطر لحال. حال الـ a صارت ها كل واحدة في سطر لحال. إذا الـ block خلت لي إياهم كل واحدة في سطر لحال. الـ inline خلت لي إياهم على نفس السطر. والـ inline-block كمان بخلي لي إياهم على نفس السطر. واضحة هذه النقطة؟

طيب مين أحسن أستخدم الـ inline ولا أستخدم الـ inline-block ولاش؟

ما هو حسب. حسب أنا ايش بدي. عشان هيك بكي لي متى أستخدم الـ block؟ بحكي لي في العناصر الكبيرة اللي أنت باي ديفولت بدك إياهم يكونوا تحت بعض. زي مثلا أنا عندي مجموعة من مجموعة من الـ section. فبهي الحالة بستخدم عليهم display block. طيب الـ inline وقتيش أستخدمها؟ وقتيش أنا بحتاج أنه أخلي العناصر على نفس السطر وبدي أتحكم في الـ height والـ width تبعهم. في النصوص مثلا. في الروابط. صح ولا لا؟ أنا لما بحط نص معين بحتاج أنه يكون مساحة هذا النص أكبر من الكلام اللي موجود فيه. فبالتالي أنا بخليه display inline. نفس الحاجة الرابط. الرابط أنا بحط الكلمة وما بدي بكون بدي height و width له. ما بدي يكون له مساحة أكبر. فبهي الحالة بستخدم الـ inline. طيب الـ inline-block؟ بدي إياهم على نفس السطر وبدي مساحة فاضية لهم. يعني بدي أتحكم في الـ height والـ width والـ padding والـ margin. تمام؟ فبهي الحالة بستخدم الـ inline.

مين عنده سؤال لحتى الآن؟

تمام. ممتاز. ممتاز. بضل علينا الـ flex والـ grid. حنشرح الـ flex في لقاء وحنشرح الـ grid في اللقاء. تمام؟ للمرة الجاية.

نيجي لـ display none. قلنا في عندي خاصية اسمها display none. ايش برايكم حتعملوا؟

ممتاز. حتخفيها. وإيش كمان؟ قبل ما أعمل refresh. حدا بيعرف display شو بتعمل؟

أنا بدي أطبقها على الـ div. مش على الـ a. عشان الـ a آخر محتوى عندي. هي على. بحكي لي display none بتخفي المحتوى أو العنصر. وبتخفي المكان اللي كانت حاجزاه. كيف يعني؟ هي refresh. شفتوا ايش صار؟ الـ div راحوا. وإيش كانت في عندي عناصر تحت اجت بدالها. حجزت المكان تبع العنصر. لما أنا أعطيه في display none بتخفي العنصر وبتخفي المكان تبعه. تمام؟ مين عنده سؤال لحتى الآن؟

ممتاز. هي بالنسبة للـ display block، inline، inline-block، display none. نيجي هال نطبقها على المشروع الثاني اللي نحن كان معكم. ننا المرة اللي فاتت اشتغلنا في الصفحة الأولى في صح؟ أعتقد في فيها مشاكل. يعني هلقيت بتقدر الـ header بدل display flex بقدر أحكيله inline-block. صح ولا لا؟ طيب المسافات اللي ما بين الـ li. ايش حتكون في ها الحالة؟ padding. صح ولا لا؟ padding. المسافات هذه padding. نفس الشيء هذا بقدر أحكيله display. أروح لهدول كل واحدة عملناهم في div. فبقدر أقول له inline-block عشان أجيبهم على نفس السطر. نشتغل في الصفحة الثانية اللي هي صفحة الـ about. ايش المسافات؟

قصدهم بين؟ قصدك بين؟ هذه اللي في الـ header قصدها؟ هذه لما ناخذ الـ flex حنتحكم فيهم. لأنه justify-content بتتحكم لي فيهم أفقي. و align-items بتتحكم لي فيهم عمودي. بس أنا بحكي على المسافة اللي ه اللي بين الـ Home والـ About والـ About والـ Contact. هذه padding. مسافات داخلية. تمام؟

نيجي هل نشتغل في هي الصفحة. هي صفحة الـ about. نحن أخذنا فيها الـ header أوريدي كان جاهز عنا. صح؟ حاجي هون. الصفحة معانا. وهينا رابطينها في ملف الـ CSS. تمام؟ هي الـ HTML. وهي الـ about. تمام؟ هي نفس الصفحة. نهايتها. الاشياء بقى. تمام؟ ممتاز.

طيب احنا الـ header ما بدنا إياه. شغلناه. اشتغلناه في الصفحة هذيك. طبعا هي ملف الـ style. يفترض أحذف الأشياء اللي فيه. اتفقنا. universal. ايش بده يكون فيها كمان؟ padding صفر ومارجن صفر. تمام؟ حاجي هذا الـ header خلصنا منه. نيجي هل على الجزئية اللي بعدها. ايش حمل؟ أول حاجة مين حأحط فيها؟ سكشنين و footer. صح ولا لا؟ حاجي هون HTML. بدي أسكر الـ header. بدي أعمل main. بداخلها اثنين section. والفوتير خلاص احنا اشتغلناه في هذيك الصفحة. نيجي هل على الـ section الأول. ايش اسميه؟ hero. صح ولا لا؟ section hero. بينفع اسميه section hero. وهناك أنا مسمياه section hero؟ لا. ايش اسميه؟ hero-about. مثلا. صح ولا لا؟ لأنه أنا ما بينفع يكون عندي اثنين section بنفس الـ ID. فبسميه hero-about.

طيب نيجي نتطلع على الـ section كمحتوى HTML. أول حاجة ايش حأعمل؟ ممتاز. div. اليسار فيها المحتوى. و div اليمين حيكون فيها صورة. ممتاز. حاجي هون أحكي له في عندي اثنين div. وهذا أعطيه كلاس اسميه مثلا الـ div. بينفع اسميه الـ div. وأنا في عندي في الـ index واحد اسمه الـ div؟ لا. ايش اسميه؟ ممتاز. لأنه أنا مش بقول له hash hero-dot-div. صح ولا لا؟ وهات أحكي له كلاس right-div. الـ left-div. ايش حيكون فيه المحتوى هذا اللي يفترض نفس خصائص الصفحة الأولى. عشان ما أكرر عندي عناصر. أنتم المفروض أصلا ايش تعملوا؟ قبل ما تشتغلوا أي مشروع. بتجيبوا ورقة وقلم. تمام؟ بتعملوا تحليل للموقع اللي أنتم بتشتغلوا فيه. مين عندي عناصر زي بعض؟ يعني أنا باجي بطلع هذه الجملة. About us. موجودة نفسها في الـ Home. أظني مرتين تكررت معي في Enjoy your stay وفي The history of our hotel. صح ولا لا؟ فليش أنا أكتب الكود وأكرر خصائصه كذا مرة؟ لا. خلص أنا من الأول بتفق أنه هذه والله عبارة عن h2. والانجاي فيها span. بدل ما أكتب الكود ثلاث مرات. بكتبه مرة واحدة. تمام؟ فمهم جدا أنه أنا أعمل تحليل بال أول للموقع. أشوف مين عندي عناصر زي بعض. ماخذة خصائص. بكتبها عندي عشان أوفر على حالي الكود.

أنا هون حأحكي له هي h2. في الـ left-div. حأحكي له في عندي h2 موجود في هذا الكلام. وكان في وه والـ about بنحطها في span. وهي p فيها لورم. وفي عندي في الـ right-div. مين؟ الـ image. نحط أي صورة.

طيب تعال نعمل هي. تمام؟ ممتاز. طبعا هذه الصورة اللي هو الشكل الافتراضي تبعها. أول شيء حأعمله. بدي أصل للصورة. صورة كيف أوصل للصورة؟ هي الكود تبعها. كيف أوصل لها؟ hash-hero-about-right-div. صح ولا لا؟ dot-right-div. الـ image اللي موجودة بداخله. بدي أعطيها height مثلا 100. كيف أخليها دائرية زي ما بالشكل؟ شكل؟ وخاصية border-radius. شو قيمتها؟ 50%. تمام؟ refresh. بهذا الشكل. ممتاز.

طبعا باي ديفولت. لأنه أنا عندي div و div جايين معي تحت بعض. كيف أخليهم على نفس السطر؟

display inline-block. بجيبهم على نفس السطر. تمام؟ هذا خلصنا منها. بحكي لي لو أنت عندك في المرة فاتت حدا سأل على موضوع الـ float. الـ float استخدامه في الموقع تبعي ما بينفع أستخدمه بالمرة. يعني هي بتسبب لي أصلا مشاكل في الموقع. وعشان هيك أصلا اجت خاصية الـ display. كانوا زمان كل تعاملهم يستخدموا فيه الـ float. ولكن اجت خاصية الـ display عشان تحل لي هذه المشكلة. ولكن بحكي لي بتقدر تستخدمي الـ float بس في هذه الحالة. اللي هو الشكل هذا اللي قدامكم. لما يكون في عندي على نفس السطر محتوى وصورة. أعمل float للصورة نفسها. اللي هي بتاخذ قيمة left أو قيمة right. أنا بس بدي أحكيها من باب إذا سمعتوا في خاصية الـ float. ولا أنتم مش حتستخدموها أصلا. فلو أنا جيت قلت له float right. تمام؟ وهي refresh. زي ما أنتم شايفين. زبلي إياهم ه الاثنتين على نفس السطر. طبعا لما أنتم تتحكموا فيهم وتعملوا الـ margin اللي ما بين المحتوى. حتلاحظوا أنهم بيجوا معكم على نفس السطر. ولكن احنا نعم؟

نستخدم الـ position فيها. بس لسه ما أخذناهاش. لما ناخذ الـ position حنحكي أنه احنا أصلا من اسمها position. هي اللي من خلالها أنا حتحكم في وين أحط الشكل اللي أنا بدي إياه. وين ما بدي بصير أستخدمه مع خاصية الـ position. بس أنا بحكي مبدئيا بما أني بدي عناصر على نفس السطر. نحن أخذنا الطريقة تبعتهم. يا display inline. يا inline-block. تمام؟ وشفنا متى أستخدم ها ومتى أستخدم ها.

هل لو أنا جيت قلت له inline-block. جبتهم على نفس السطر. وبدي أعمل مسافات ما بين الـ left-div والـ right-div. ايش حستخدم؟ margin. صح ولا لا؟ عشان أعمل مسافات بينهم. لأنه الـ left-div عنصر والـ right-div عنصر. فحعمل بينهم margin-left و margin-right. مضبوط؟ فبيحكي لي هذه الحالة الوحيدة اللي بتقدر تستخدم معها الـ float. صورة ونص على نفس السطر. لو كان فيطلع background color للـ section. قصدك؟ لا. مالهاش دخل. هلا أنا جبت هي الـ hash-hero-about. وحكيت له background color مثلا هذا اللون. وهي refresh. ايش؟ ايش دخل الـ background ش على الصورة؟ يعني الصورة أخذت background؟ مش؟ قصدك الـ background ما اجت على السطر؟ ما هي هذه مشكلة الـ float. أنها تتعامل مع كل الخصائص. الـ float. عشان هيك أنا قلت لكم أصلا مش حتستخدموها. كل تعاملنا حيكون مع الـ display. حتى الـ inline والـ inline-block صراحة مش حنستخدمهم كثير. حنستخدم الـ flex. لما ناخذ الـ flex. كل تعاملهم حيكون في الـ flex. بس أنا قلت متى بستخدم الـ inline والـ inline-block. الـ inline في الروابط وفي النصوص. لنفس الـ section. يعني على نفس الـ section عندي نصوص وعندي روابط. بدي إياهم على نفس السطر. بستخدم له inline. الـ inline-block؟ بدي إياهم على نفس السطر. بدي أتحكم في الـ height والـ width تبعهم. تمام؟ هذا بالنسبة للـ section هذا.

نيجي للـ section اللي بعدي. في شوية شغل. ركزوا فيه. أول حاجة بدي أعطيه ID خاصة فيه. مضبوط؟ بدي أعطيه ID خاصة فيه. مثلا بدي أسميه sales. وحاجة هون بداخل الـ section. كمحتوى HTML. ايش بدي أعمل؟ h3. مصرات. أحط فيها هذا الكلام. ممتاز.

طيب هي h3. بدي أحط فيها هذا الكلام. غيره؟ ممتاز. أول حاجة حأعمل div. أحط بداخلها الصورة. وأحط بداخلها المحتوى. مضبوط؟ حاجي هون أعمل div. أحط بداخلها image. على الـ images. مثلا هذه الصورة. وححط محتوى. جملة p. وهي الـ lorem. وهي الـ div. تمام؟ ريفريش. بهذا الشكل.

طبعا هذه الصورة. لأنه حجمها كبير. فكيف أصل لهذا الـ image؟ ها الـ image. كيف أوصل لها؟ hash-sales. لأنه أنا عندي الاثنتين image اللي موجودين فيها لهم نفس الخصائص. فباخذهم مرة واحدة. hash-sales. الـ image. أعطيها مثلا height 50 بكسل. بدي حجمها صغير. width مثلا 50 بكسل. وإيش كمان؟ border-radius 50%. refresh. بهذا الشكل. تمام؟

بضل علي الـ div نفسه. ايش أعطيه؟ بدي إياه يكون شكل المستطيل هذا. width. صح ولا لا؟ حاجي أصل للـ sales-div. اللي فيها. وأعطيها height مثلا طول مثلا 50 أو 80 بكسل. والـ width مثلا 300. وبدي أعطيها background color. ثواني. قصة الـ margin. مثلا هذا اللون. أنا بس بدي أجهز بال أول. تمام؟ اللي هو هيه. خليني أكبر الـ width. بدل ما أحكي له 300 بكسل. 500 بكسل. إيش بامكاني أعطيه؟ اطلعوا لي عاش. لا 100%. حياخذ كله. أنا ممكن أحكي له مثلا 70%. فبيروح بياخذ 70% من مساحة الـ div. من العرض تبعه. صح؟ فهي مثلا 70%. بدل ما أضلني أجرب في البكسلات. فاهمين علي؟ شايفين زي هيك. تمام؟

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

أصل لكل عنصر وأعطيه margin-left و margin-right. عشان أحصل المحتوى بالنص. زي هيك. ياخذوا المسافات هذه. صح ولا لا؟ في عنا طريقة بقدر أعمل فيها هذا الكلام. خذوا بريك 10. عشان نحكيها.

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

padding. ليش؟ لأنه أنا هذا المحتوى. وهي هذا الحدود تبعته. مش margin. padding. فبفترض أحكي له padding-left. padding-right مثلا 50. الشاشة. يعني نفس العنصر؟

نفس العنصر. ها. تمام؟ بس أنا عشان أوضح حطيت الإطار هذا. بس هو مش عنصر ثاني. فزي ما قلنا أنه المفروض أحكي له padding-left. padding-right. عشان آخذ ها المسافة. ففعليا اللي حيصير أنه أنا حأروح على الـ p. أروح على الـ image. أروح على الـ button. وأحكي له padding كذا. padding-right كذا. عشان ياخذ المساحة. فمش منطق أنه أنا هذا الكود أكرره معي في كل العنصر عندي في الصفحة. عشان هيك اجى كلاس اسمه container. هذا الكلاس بيحكي لي أنا بمثابة حاوية للعناصر اللي موجودة عندي في الصفحة. بمعنى أنه أنا بعمل حصر للمحتوى أو للعناصر اللي عندي في الصفحة بداخل هذا الـ container. وأنت يا container بدي أعطيك شوية خصائص. إيش اللي حيصير؟ اللي حيصير أنه أنا حاجي هنا على الـ browser. وكل سكشن أنا بشتغل. بدي أحط في الأول بداخله container. يعني حاجي هون على الـ about. هي الـ section الأول اللي أنا اشتغلته. تمام؟ هي الـ section هذا. حاجي هون قبل ما المحتوى تبعه يكون. بدي أعمل div. وأعطيها كلاس اسمه container. ونهاية الـ div هذه وين حتكون؟ قبل نهاية الـ section. صح؟ زي هيك. فاللي صار. هي كل محتوى الـ section صار محطوط بداخل الـ container. شايفين؟ كل المحتوى. هي الـ left-div والـ right-div. والـ container. هلقيت باجي هان على الـ container. هو كلاس. فبدي أحكي له dot-container. وأنت يا container. بدي أعطيك شوية خصائص. أول حاجة في عندي قيمة اسمها margin-auto. بتعمل توسيط للعناصر. كيف يعني؟ يعني لو أنا اجيت عملت أنا هون في الـ about. تمام؟ لو أنا هي اللي هان بس عشان أوضح لكم قصة الـ margin-auto. هي برا الـ main. أو بداخل خليها برا الـ header. بس بدي أعمل شيء بسيط. أنه أنا بدي أعمل p. وأعطيها لورم ستة. وبدي أميز الـ p بكلاس مثلا اسميه bar. تمام؟ الطبيعي أنه هلقيت الـ p هذه. الجملة حتيجي معي من اليسار لليمين. تمام؟ هيها جملة الـ lorem هذه. لو بدي أصل لها لها تحديدا. وبدي أحكي له dot-bar. وأحكيلها margin-auto. اللي حيصير أنها حتصير توسيط معي في نص الصفحة. لا المفروض هذا يجي بالنص. طيب ثواني شوية. هي أنا في الـ about file. طيب جربوها عندكم على السريع. لأنه الكود ما في مشكلة. اعملوا div أو p. واعطوها margin-auto. margin-auto أحد القيم اللي بتعمل توسيط للعناصر. ولكن بتشتغل مع الـ block element. عشان هيك أنا قلت div أو p. جربوها عندكم. لأنه الكود ما في مشكلة. عشان بعدين أكمل الجزئية.

فحكينا أول خاصية من خصائص الـ CSS بتعمل لي توسيط للعناصر. margin-auto. هلقيت أنا هون لما عملت لها margin-auto لحال ما ضبطت. بس تعالي أعطيها width 80%. تمام؟ تعال نعمل refresh. شفتوا ايش صار؟ اشتغلت معي. أنه هي فعلا صار لها التوصيط هذا. هل أنا مش هذا اللي بدي إياه؟ أنا بحكي أنه أنا بدي أحصر المحتوى كله كامل. بدي أحصره في الـ في الصفحة اللي أنا بحكي فيها. وبده يكون عندي مسافات من اليمين ومسافات من اليسار زي بعض. فبحكي لي أنه أنت يا container. قلت له margin-auto. بس عشان أعمل له توسيط. بمجرد ما حكيت له margin-auto. عملت له توسيط. عشان تشوفوا الـ container بالضبط معي. بدي أعطيه background color. عشان تشوفوا وين الـ container. background color بهذا الشكل. هيه اللي لونه أحمر. احنا حطينا محتوى الـ section بداخل الـ container. فهيه هو هذه الجزئية. لو أنا أضفت كلاس container على الـ section اللي بعده. تمام؟ هي الـ section. أنا في الـ about. قلت هذا الـ p أنا ما بدي إياه. تمام؟ هي الـ section. هي حطيت في container. تعالوا على الـ section هذا. اللي الـ ID له sales. وبدي أجي أحكي له dot-container. تمام؟ وأمسك نهاية الـ div. أحطها قبل نهاية الـ section. عشان يبين الـ container معي بالضبط. فحاجي هان. تمام؟

فاللي عملناه أنه حطيت في الـ section الاثنين. حطيت المحتوى تبعهم في container. فتعال نعمل refresh. زي ما أنتم شايفين. هي اللي صار أنه أنا حصرت المحتوى بداخل هذا الـ container. هلقيت اجيت على الـ container. بس حكيت له margin-auto. وأعطيته الـ background color. بس عشان أنتم تشوفوها. هلقيت أنا هي تو حكيت أنه أنا مساحة الـ container كلها. عندي مساحة. مش الـ container كل الـ body أو كل viewport 100%. صح ولا لا؟ طيب أنا باجي بطلع هون على التصميم. بلاقي أنه الكلام بادي معي من هنا. وبادي معي من هان. يعني في جزئية فاضية من اليمين. وجزئية فاضية من اليسار. فهذه الجزئية أنا لحالي بدي أحسبها. كيف يعني؟ باجي بحكي والله لنفرض أنه مثلا هذه المسافة 10%. من المساحة. وهذه 10%. فصارت مساحة الـ container كلها قدش؟ ثمانية. لو هذه ماخذة 5%. وهذه 5%. فمساحة الـ container 90. وهكذا. فلو أنا اجيت قلت للـ container. بدي الـ width لك بدل ما هو كله 100%. خليه مثلا 80%. فحتلاحظوا أنه فعلا الـ container بدأ معي من نص الصفحة. مش من بدايتها. بهذا الشكل. تمام؟ هذا الشيء الأحمر هو بداية الـ container.

فيفترض هليه بترجعوا على الصفحة الأولى في الـ موقع. وترجعوا يعني ثلاث الثلاث ثلاث صفحات تبعون المشروع. تحطوا المحتوى تبع الـ section بداخل container. وتعملوا له margin-auto و 80%. خلص background color بطلنا بدنا إياها. margin-auto و 80%. على شان تحصروا المحتوى عندكم. ما يبلش معي بالضبط من اليسار. ياخذ المساحة الفاضية من اليمين. وياخذ المساحة الفاضية من اليسار. تمام؟ هي النقطة. فضروري هي القصة أنكم تحصروا كل سكشن.

كل سكشن. بالضبط. آه. يعني أنتم بال أول بتشتغلوا سكشن. وبتعطوه الـ ID. قبل ما تقسموا الـ div والـ elements. بتحطوها بداخل container. تمام؟

نرجع للي كنا نشتغل فيه. اللي هي صفحة الـ about. تمام؟ اللي هو هذا المربع اللي عملناه هون. حكينا أنه هذا المربع عبارة عن div. موجود بداخلها صورة. وموجود بداخلها محتوى. هلقيت كيف أخلي الصورة والمحتوى على نفس السطر؟ يا بستخدم float left للصورة. left مش right زي طول. يا بعملها display inline-block. عشان أجيبهم على نفس السطر. طيب ليش قلت inline-block؟ ما قلت inline؟

هذا مش كثير مهمة الها. لكن إذا بتلاحظوا في margin ما بين النص وما بين الصورة. صح ولا لا؟ margin-right. فلو أنا قلت له display inline. حيزبط معي. لأنه الـ margin والـ padding بياخذها من اليسار واليمين. لكن في عندي padding من فوق. إذا بتلاحظوا اللي بين النص وبين الـ border. في شوية padding. تقريبا 15. تقريبا. فعشان أقدر أتحكم فيها. الأفضل أني أعطيها display inline-block. مش inline. تمام؟

بضل عليكم تشتغلوا في ها. طبعا الـ section هذا. إيش حطيتوه بال أول background image؟ صح ولا لا؟ زي ما أنتم شايفين. حدا عنده صعوبة بالنسبة لهذا الـ section؟ حتعملوا background image. حتعملوا الثنتين div هذول اللي اشتغلناهم. بنفس الشيء. أنتم اعملوها واحدة. وضبطوا تنسيقها. بس بعدين اعملوا copy بس لها. واعملوا الثانية. الفوت نفس اللي عملناه في الصفحة هذه. تمام؟

نيجي هل على صفحة الـ contact. صفحة الـ contact. طبعا header router. مش حأعمل. تعال نشوف الـ section. حاجي هان السريع. لأنه في معلومة مهمة بدنا نحكيها. أنا بقدر آخذ من الـ index. وأضيفها هون في الـ contact. وهي صفحة. تمام؟ نيجي هل في الـ section اللي موجود بداخلها. هو كان عبارة عن section واحد. تمام؟ هي بس section واحد. لا سكشنين. خليكم معي. حنيجي هون على الـ main. أحط بداخلها اثنين section. ركزوا معي في هي الصفحة. لأنه في كذا شغلة بدنا نحكي فيها.

هلقيت الـ section الأول. إيش بدي أسميه؟ ID hero-contact. طيب كمحتوى صفحة. إيش بدي أحط فيه؟ هي الـ section.

ممتاز. بال أول حأعمل form. قبل الـ form. حأعمل هذه h2. نفس هذيك. بعدين أعمل p. وأحط فيها هذا الكلام. تمام؟ خلص متفقين عليها. نيجي هل لجزئية الـ form. إيش حأعمل فيها؟

على طول ليبل. أول شيء المفروض أحط div. بداخلها ليبل اسمه name. والـ input. صح ولا لا؟ ليش قلت div؟ لأنه هي عناصر inline element. حيجوا معي على نفس السطر. وأنا هدول كلهم. كل واحد في سطر لحاله. طبعا حتحطوا بال أول الـ container. تمام؟ حتحطوا أول الـ container. فحاجي هون. حأحكي له dot-container. يلا. هلا بداخلها form. والـ form هذا موجود بداخلها div. تمام؟ الـ div هذه فيها label. فيها label اسمه name. وفيها input. الـ type تبعه name. صح ولا لا؟ الـ type تبعه text. طيب كان فيها شي بليس هولدر؟ لا. ما في. تمام؟

طيب بعد ما عملت هذا الكلام. يفترض إيش أعمل؟ في الـ label والـ input؟

أربطهم بين بعض. الفورم معها؟ اسم. مثلا اسميه user-name. ونفسه أعطيه لمين؟ للـ ID الـ input. فحاجي هذا أحكيله ID يساوي هذه القيمة. غيره. إيش المفروض نعمل؟

اللي هي الـ name. هذا حتهمنا في في البرمجة. حكينا صح ولا لا؟ حاجي هون على الـ input. أعطيه name قيمة معينة. بدي أسيبيها user-name. لأنه نفس الاسم. بسميها name-1. مثلا. تمام؟ فتعال نعمل refresh. هذا بهذا الشكل. ليش اجا معي هون؟ عشان أنا حطاه بداخل container. صح ولا لا؟

طيب هلقيت يفترض الـ div الثانية. أعمل div ثانية. موجود بداخلها label. وموجود بداخلها input. إيش كان موجود بداخلها؟ email. يبقى إيش أكتب؟ هذا الـ type شو حيكون؟ email. وبداخل الـ label. أحط؟

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

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

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

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

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

نيجي للسكشن اللي بعده وركز كويس معكم. هذا السكشن بدي اسميه الاي بي تبعه بما انه في ايقونات فبدي اسميه ايكونز. حاجي هون على السكشن اول شيء حاعمله اني احطه بداخل الكونتينر. اول شيء بدي اعطيه اي دي بدي اسميها ايكونز. سميتها >> وبعدين بدي احطها بداخل كونتايلر دوت كونتينر. تمام بداخل الكونتينر ايش اول شيء حاعمله كصفحه اتش تي ام ال عناصر اتش تي ام الثلاثه ديب ممتاز. حاجهز ديف واحده بعدين نعملهم كوبي بيست. هي ديف في ثلاثه. طيب كل ديب ايش موجود فيها ايقونه وكلمه وكلمه صح ولا لا؟ بس هذه حرف غامق فخلينا نحطها هذه بداخل اتش 3 مثلا. الايقونه هلقيت حنحكي فيها. هي اتش 3 فيها هذه الكلمه بعدين اللي تحتيها نحطها بداخل مثلا اتش 6 او اتش 5. تمام نيجي هلقيت لموضوع الايقونات. هلقيت لما اعمل ريفريش هان حتنضاف معي بهذا الشكل. تمام بدات معي من هون هي كله نفس البدايه لاني حطاهم بداخل الكونتينر. ركز معي هلت كيف اظهر الايقونات. بحكي لي عشان تظهر الايقونات في عننا موقع اسمه فونت اوسم موجود بداخله مجموعه من الايقونات. تمام هذا الموقع عشان تستخدميه في ملفين لازم تضيفيهم في مجلد المشروع تبعنا. الملفين هذول انا حط لكم اياهم. هذا الملف حبعته اليوم ملف مضغوط. تمام اللي هو حامسكهم هيك واضيفهم في مجلد المشروع اللي انا شغاله فيه. انا هيني هان في الاوتيل. تمام بهذا الشكل ححكي لي خلي مجلد الويب فونت زي ما هو وامسكي ملف الاول دوت منت وحطيه بداخل مجلد السي اس اس. يعني هي السي اس اس في ملف الستايل وصار في ملف اسمه اول دوت نت. عشان تقدري تستخدميه لازم تروحي تعملي استدعاء لملف السي اس اس. كيف بنستدعي اي ملف سي اس اس لينك ريل ستايل شيت وين بداخل الهيد صح ولا لا؟ حاجي هنا. طيب هي الهيد برايكم احطه قبل الستايل ولا بعده وليش؟ >> قبله ممتاز. طيب ليش؟ يعني هون حاجي احكي له لينك الستايل شيت الاتش رفع انه في السي اس اس هي الاول دوت من. تمام؟ عشان نستخدم ملف الايقونات لازم بالاول المجلد اللي اسمه ويب فون اضيفه في مجلد المشروع تبعي كمجلد. هيه لما تفتحوا فيه مجموعه من الملفات. الشغله الثانيه انه في في السي اس اس بده يكون عندي ملف اسمه اول دوت من واجي استدعي الاول دوت من بنفس طريقه الستايل. طيب ليش حطيته قبل الستايل مش بعدها؟ >> ممتاز جدا. لانه نحن عارفين انه الكود بيبدا معي من فوق لتحت صح ولا لا؟ فلو انا كنت حاطه ملف الستايل بالاول بعدين ملف الايقونات اللي حيصير انه حيصير عندي تاخر في الخصائص تبعت السي اس اس ومش حتظهر معايا. عشان هيك القاعده عامه اخر ملف الهيد بده يكون عندي هو الستايل. لقدام حنستخدم كثير ملفات لها علاقه في السي اس اس كلها تكون قبل الستايل نخلي الستايل اخر شيء ليش؟ عشان ياخذهم كلهم بالترتيب واخر شيء ياخذ خصائص السي اس اس فانا اضمن انها بتظهر معي بالشكل الصحيح. تمام بعد ما عملت هذا الكلام هلقت بروح على الموقع اللي اسمه فونت اورسم بروح على الايكونز في عندي هون ايقونات فري وفي عندي ايقونات مجانيه. ببحث على الايقونه اللي بدي اياها مثلا عندي شكل الهوم ببحث عنه حيجيب لي كل الايقونات اللي هم عباره عن هوم. تمام هيها جايب لي اياهم اول شوفوا ضغط على كلمه اول. انا هون ايش بحكي له بدي الفري بدي بس الايقونات المجانيه. تمام فهي جاب لي اياهم هذا تحت هذول بقدر اخذهم. بضغط على ايقونه بدي اياها وباخذها كتاج اسمه اي تاج الايقونات اسمه. فبمسك هذا التاج بضغط عليه هي سار له كوبي. هلقيت باجي بضيفه عندي هون الديف هذه بهذا الشكل. تعال نعمل ريفريش هو تاك اسمه اي حتظهر هل الايقونه زي ما انتم شايفين لا بس انا مش ظاهره الشكل الصحيح زي الموقع والكود مكتوب زي ما هو صح. هل يا بتاخذوها كتاج اي وهذا تاج الاي بتقدروا تتحكموا فيه هو تاج سي اس اس يعني بتقدروا انتم ه في الستايل توصلوا له تاج اي زي هيك وتستخدموا عليه مثلا بدي اكبر حجم الايقونه ايش احكي فونت سايز صح ولا لا؟ لتكبير حجم الايقونه فونت سايز بدي اتحكم في اللون تبعها بحكي له كر بدي اعطيها باك جراوند كر بحكي له باك جراوند كر بدي اتحكم في حجم الطول والعرض لها بعطيها هاي بس اتحكم فيها كايقونه بهذا الشكل. الشغله الثانيه بيحكي لي انه انت بتقدري تنزليها كتنزيل كصوره يعني بقدر اتحكم هيك اعمل لها تنزيل وبدل ما استدعتها اي ايش استدعيها تاج ايج. تمام هذا الشغله الثانيه غير هذا الموقع الفونت اوسم في عننا موقع ثاني اسمه فوسفور ايكونز. من افضل برضه المواقع للصور الفونت اوسم والفوسفورز نفس الحاجه. لو انا رحت على هذا الموقع قلت له ت ستارتد تمام لا انا بدوس تنزل هذول هي الايقونات الموجودين عننا. هذا لنفرض مثلا بدي هذه الايقونه هي بضغط عليها تمام وبنزلها كتنزيل بتقدروا من هون تنزلوها تنزيل وتاخذوها في مجلد المشروع تبعكم. هيص في كامج احنا حنحطها بما انه نزلناها تنز لا انا هون في الاوتيل هي الامجز هذا الفوسفور ولو انا اجيت هون بالكونتاكت تحت الاي هاج هيجز هي هذه الصوره. تمام دوت اس اف جي. هلقت حتظهر معي ه في الفوسفور ايكونز هيها نفس الحاجه بقدر اصللها هيها كستايل احكي له انه الامج هذه اعطيها مثلا الهاي بدي اصغر شوي حجمها هاي مثلا 100 بكسل ويث مثلا 50. اعملها ريفريش هلقيت حجمها حيصغر بهذا الشكل. طيب متى استخدمها كصوره ومتى استخدمها كتاج اي؟ يعني انا الايقونات بقدر استخدمهم كصور وبقدر استخدمهم كتاجات. لو انا مثلا بدي اغير اللون تبع الايقونه بدل ما هو اسود بدي اخليه لون ثاني ماقدر اتحكم فيه بالصوره صح ولا لا؟ فساعتها بستخدمه كاي. لكن اذا انا بس على قد الهاي والويث حجم الصورة بستخدمه ساعتها كايقونه. تمام لكن اذاح تحكم في اللون تبعها بدي اعمل باك جراوند كر عليها فهون بستخدمها كتاج اي. تمام لحتى الان. فبدكم تضيفوا الايقونات بدكم تضيفوا الايقونات في كل ديف. تمام هلت يفترض اجي هون على الكونتاكت والثلاثه ديف هدول هي المحتوى تبعهم زي هيك اعمله كوبي بيست وين في كل دف. تمام هي كنترول سي كنترول في. نحن عارفين انه مجموعه الدبات هذه حتيجي معي تحت بعض لانها بلوك المنت بهذا الشكل. كيف اخليهم على نفس السطر؟ بدي اصل للسكشن اول حاجه اللي انا كنت مسمياه ايش سميناه >> ايكونز. تمام فححكي له هان هاش ايكونز ركزوا معي هاش ايكونز وبدي اخليهم على نفس السطر يا بحكيله ديسبلاي فليكس يا بحكيله ان لاين بلوك. هي ريفريش اه انا عشان مستخدمه الكونتينر صح حتى هي شايفين رجعوا على بعض. استخدم الكونتينر ومعطياه مارجن اوتو واحنا قلنا انلاين بلوك تزبط معهاد مارجن الا من اليسار واليمين فبما انه في كونتينر فالافضل اني استخدمله فليكس عشان قصه الباد والماجن. تمام هاش ايكونس ثواني اه مين يحكي لي ايش المشكله هون؟ هي الكونتاكت على السريع >> ليش هون قلت له ديسبلاي فليكس وما ظهر العناصر عندي على نفس السطر وهي السكشن نحن قلنا المره اللي فاتت الفليكس على العنصر المباشر لهم وهي مجموعه الدفات مين العنصر المباشر لهم دوت كونتينر صح ولا لا؟ افترض هون احكي له دوت كونتينر لانه هم الاب المباشر لمجموعه الدفات. فنعمل ريفريش شفتوا ايش صار؟ اجوا على نفس السطر. هلت الدفات هذول مقسمين على ثلاثه يعني كل واحد الو فيها 3.33 33 فبدي استخدم لها كلت 100% على ثلاثه فايش حاعمل؟ اعمل على الكونتينر ولا على الديف اللي فيه؟ انا مين بعطي دوت للدب صح ولا لا؟ فقت بحكي له انه الدف اللي موجوده بداخلهم الوث لها كلك 100% على ثلاثه عشان اضمن انه العناصر تتاخذ بنفس المساحه لهم كلهم 100% على ثلاثه. تمام 100% على ثلاث فنعمل ريفريش شفتوا ايش صار توزعت المساحه بالضبط لهم كلهم. بضل عليكم بتعطوها باك جراوند كر بهذا اللون واخر شيء الفوتر. مين عنده اي سؤال بالنسبه للشكل العام للمشروع؟ شايفين في صعوبه يعني بيهمني اليوم قصه البوتون قصه الانبوت هذه مهمه جدا قصه استخدامنا للايقونات. بس ظل ابعث لكم اللي هو ملف الويب فونت وملف الاول دوت من تضيفوهم عندكم في السي اس اس. خاصيه الديسبلاي. تمام >> ايش >> لوين على ايش بدك تعمل بالضبط؟ >> اذا ديف واحده وبدك تعملها مارجن اوتو اوكي بس انت عندك ثلاثه ديب فلازم تعمل قصه الكونتينر عشان تاخذ المساحه اللي من اليمين ومن اليسار وتعمل قصه ال تعمل الابعاد تبعت الكونتينر وتقسم ال الدفات في الويب تبع اللي كلت 100% على ثلاثه. ظل اخر حاجه نحكي فيها لقاء اليوم بما لانه اخذنا ديسبلاي نان بتعمل اخفاء للعناصر واظهار لهم. انا لما يكون عندي العنصر مخفي هذا الشيء حنشوفه في الجي اس واحكي له ديسبلاي بلوك العنصر عندي حيظهر. واذا كان اوريدي ظاهر قلت له ديسبلاي لون عندي حيخفي. فبحكيل لي في عندي خاصيه في السي اس اسها فيزبتي من خلالها انا كمان بقدر اتحكم في اظهار واخفاء العناصر. كيف يعني لو انا جيت هان على الكونتاكت وعلى السريع عملت هون بتون البوتون باي ديفولت لو انا كتبت فيه كلمه ويلكم باي ديفولت حيكون فيزبل. تمام باي ديفولت حيجي يظهر معي هون يظهر. لو انا جيت وصلت للبوتون هذا كسي اس اس هو باي ديفولت لما احكي له فيزبيلتي ماخذ خاصيه الفيزبل ظاهر. لو انا قلت له فيزبيلتي هيد ايش حيصير؟ حيعمل اخفاء للعنصر. تمام هي اخفاء العنصر. بدي اجي بعد البوت بعد البوت اضيف عنصر بي واسميها لور واجي اعمل ريفريش هام. تمام بس هي مش مبينه كويس صراحه اللي بدي تشوفوه انه شك خليها بدل بوتون لانه البوتون ماخذ على قد المحتوى خليها بدل البوتون اتش خ مثلا. تمام >> وبما انها بلوك المنت بدي اجي هون على الاتش خمسه لانها بلوك المنت. تمام وبدي اجي اعطيها عشان تشوفوها كويس اعطيها هاي 100 و 100 وباك جراوند كر هذا اللون. تمام وهي قبل الزبيبتي ها تعال نعمل ريفريش بهذا الشكل. تمام ه هذه الاتش 5 هي هذه هلت لو انا جيت قلت لها فيزبيلتي هيدل اعملي لي اخفاء للعناصر تعال نعمل ريفريش شفتوا ايش صار؟ البي ظلت مكانها ما جت فوق. فهذا الفرق ما بين فيزبيلتي هيدن وديسبلاينر. الاثنتين بيعملوا اخفاء للعناصر ولكن الفرق ما بينهم انه ديسبلينر بتخفي العنصر بتخفي المكان تبعه. فيزبيلتي هيدن بتخفي العنصر بضل المكان تبعه محجوز. جوز عندي هذا لحتى الان في حدا عنده سؤال بالنسبه للقاء اليوم؟ تمام ماشي يعطيكم العافيه.