0:06 السلام عليكم بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد النهاردة جماعة ان شاء الله أول تطبيق عملي على ال HTML و CSS هنعمل مع بعض تصميم بسيط جدا بإذن الله هنت تعلم فيه شوية أسرار جميلة هتتعلم إزاي توظف الحاجات اللي انت شفتها في الكورس نظري وهتتعلم إزاي تستخدمها في الحياة العملية بإذن الله أول حاجة لازم تتعلمها قبل أن تدخل التطبيق ده أن أنت تشوف الـ HTML والـ CSS اللي تعملوا في سنة 2021 في القناة لازم تتعلمهم عشان لو ما تعلمتهم مش في حاجات كتير من اللي هتتقال أنت مش تفهمها الكورس ده تطبيق عليهم فلازم تتعلمهم طيب في فيديوهين مهمين جدا ان انت تشوفهم قبل ما تدخل في مرحلة التطبيق ده الفيديوهين دول فيديوهات عامة هتشوفهم عشان هيفيدوك في حاجات كتير جدا في
0:52 بلاي لست في القناة سمع نقاشات برمجية هتتفرج على فيديو اسمه ازاي الفرونت اند بيبدأ في مرحلة التصميم انت دلوقتي هتشتغل فرونت اند وتعلمت ال HTML وال CSS وفي مستقبلا ان شاء الله تتعلم جيباسكريبت وادوات تانية كتير دلوقتي لما بتيجي تبدأ في مرحلة التصميم وبتشتغل في شركة كبيرة بيعملك الـ Sketch اللي فيه التصميم اللي انت أصلا بتنفزه كـ Code الـ Sketch ده بيكون فيه كل المعلومات اللي انت بحتاجها الكلام اللي في التصميم كله الـ الوان بأنواعها نوع الخط أحجام العناصر كل حاجة يعني مفيش حاجة نهائيا هتعملها من دماغك مفيش حاجة هتجود فيها ولا هتألفها ولا هتعمل فيها أي حاجة كل حاجة متحدد لها المعلومات بتاعدي عظيم في المرحلة دي ما عندناش مشكلة خالص طب
1:40 انا لسه ببدأ في قول حياتي ومش عايز ادخل في الدول شديد الوقت انا لسه بقول بسم الله ويا هادي وعايز اطبق بسرعة انا حسس بيك وعارف وما فيش مشكلة خالص لو جبت صورة وحاولت تنفذها فيش مشكلة خاص لو شفت موقع زي الفي مش هتلاقي طبعا المقاسات قد بعض بالزبط يعني تصميم بتاعك مش هيكون بكسل بيرفكت لانه انت بتجرب وبتحط عناصر احجام من دماغك والكلام ده كله طيب ممكن اجيب صورة تصميم زي كده وحاول انفزها مفيش مشكلة ممكن لو انا عندي فوتو شوب افتح البي اس دي بتاعت التصميم زي كده وابدأ اشوف منها برضو احجام العناصر اشوف منها اللون زي كده اللون اللي هم مشتخدمه اشوف منها نوع الخط شايفين يا شباب هنا تقدر تجيب نوع الخط اسمه وكمان الويت بتاعه هل هو ولا ولا ولا
2:28 ولا الكلام ده فكل حاجة ان شاء الله متاحة لكن انا قلتلك طبعا في المستقبل عشان اطمنك اللي انت تشتغل منه هيكون فيه كل حاجة تتخيلة حتى البيس دي اللي تشتغل منه برضو هيكون فيه الكلام ده طب انت دلوقتي عشان ما تطلق بطش وعشان حياتي سهلة معاك وده اللي انا عايزه تقدر تستخدم الصورة هنا وتجرب تعمل منها العناصر الكلام تكتبه من دماغك عادي لو عايز تقسيمة العناصر هتكون معروفة وثبتة بازن لان فيهاش مشكلة والالوان حتى من الصورة تقدر تفتح الصورة على جوجل كروم وتعمل من اي حتة هنا عشان تاخد اللون اللي انت عايزه طيب جميل الكلام ده وزي الفول ومعندناش فيه مشكلة خالص نبدأ بقى المشروع بتاعنا نبني البنية بتاعته من الاول خالص هاجي في الـ Visual Studio Code هو قول Open Folder هروح على المكان اللي انا
3:14 بحط فيه الشغل بتاعي اي مكان يعجبك ومعندناش مشكلة خالص وهقول له ان انا عايز اعمل فولدر جديد اسميه Template 1 ده هيكون المشروع بتاعنا كله هنضيف فيه كل اللي احنا محتاجينه هنضيف فيه فولدر للـ CSS هنضيف فيه فولدر للـ SIRR هنضيف اهم ملف عندنا وهو ملف الاندكس .html هعمل الحرف التعجب بشكل ده والكاركتر بتاع التعجب هدوس tab الصفحة بتاعتي بتكود كلها بالشكل ده وهكتب هنا template 1 وممكن تكتب اسم template جنبه اسمه Leon بإذن الله هضيف لك الpsd والصورة وكل حاجة في الوصف بتاع البلايلست حتى تصل لها بسهولة طيب دلوقتي الحمد لله عملت المشروع بتاعي عايز اضيف الحاجات الاساسية خالص الحاجات اللي
4:03 هي يعني هبدأ حياتي بيها خالص اول ملف عندي هيكون ملف الخاص بالتصميم الملف المستر بتاع التصميم ممكن نسميه leon.css من ضمن الحاجات اللي انت عايز تتضرب عليها ان انت تكتب تعليق كده عشان تتضرب عليه فممكن تروح اعمل حاجة زي كده main template css file الملف الاساسي بتاع التمبلت بتاعنا عايزين ننشئ الملف بتاعنا ده folder css هنسميه leon.css وهنبدأ نكتب فيه اللي احنا محتاجينه دلوقتي عندنا حاجة من الحاجات الظريفة اسمها normalize تعالى نشوف مع بعض كده النورمالايز ده لو كتبت في جوجل normalize css هيجيب لك ملف اسمه normalize لان شايفه قدامك ده تقدر تعمله download وتقدر تفتحها وتاخد الكلام اللي فيه كله مفيش مشكلة الملف ده من اسمه كده normalize بيعملك render للعناصر كلها بالشكل الطبيعي في المتصفحات فما تلاقيش بقى اختلافات
4:52 كتير كده وتلاقي حاجات من لغباطها وبيزبط لك الدنيا بيعملك reset للمرجن بتاع البادي بالشكل ده شوية حاجات كده الظريفة وهتفيدك بعض الفريمورك اللي انت هتتعامل معه في حياتك في المستقبل ان شاء الله هتلاقيهم بيستعملوا الملف ده طيب تعالوا مع بعض كده نعمل link تاني ونسميه normalize.css بعد كده هننشئ الملف بتاعنا بنفس الاسم اهو normalize.css ونحط فيه المحتوى اللي احنا نزخناه ده ونسيف كده خلاص ما تنساش التعليق عشان تتعود على فكرة ان انت تكتب تعليق في بداية حياتك زي كده render all elements normally يعني هتقدر تعمل render العناصر كلها في المتصفحات بشكل طبيعي بدون اي مشكلة بازن الله طيب نيجي لملف ال-CSS الرئيسي محتاجين كده شوية Global Rules نحطها فيه زي مثلا ال-Border Books
5:40 Sizing Border Books اللي احنا بنعملها العناصر كلها عشان ال-Binding وال-Border مايأسروش على ال-Wits زي ما اتعلمنا في الدرس بتاع ال-Books Sizing وال-Books Model في ال-CSS محتاجين نحط الخط بتاعنا احنا اتفقنا كلوقتي ان الخط بتاعنا اسمه WorkSands وجبناه من هنا ولو انا شغالي ان شاء الله في المستقبل على Sketch بيديني اسم الخط عظيم هندخل دراتي على جوجل فونت وهنكتب وورك سينز هاي دي الخط بتاعنا الحمد لله موجود هتبدأ تختار الاوزان بتاعته يعني مثلا هنختار الاكسترا لايت ده هنختار مثلا اللايت اللي بعده هنختار البولد اللي هو 400 هنختار الميديوم وهنختار السيمي بولد ممكن وهنختار البولد وهنختار الاكسترا
6:26 بولد لانه في بعض الحاجات في التصميم محتاجة الاكسترا بولد ده خلصت خلاص هاخد اللينك بتاع الستايل الشكل ده في الاتش تيميل هضيفه هنا سيكده كن نقفل دي دلوقتي وطبعا مش محتاجة اقول لك الكومنت تاني عشان اوصيك هاعد كل شوية اوصيك جوجل خلصنا كده وكله تمام هبدأ بقى اضيف نوع الخط ده للبودي عشان التصميم بتاعي كله ياخد الخط ده ونضيف معاش وقية جلوبل رودز كده عشان نكسب وقت في الفيديو هبدأ اقول له ان انا عايز الجلوبل رودز هكون حاجات الجلوبل ماشي على العناصر كلها نوع الخط اللي في الصفحة كله خاصية البوكس سايزنج على جميع العناصر وكمان ان شاء الله هنستعمل مع بعض وهنطبق مع بعض على المتغيرات اللي احنا تعلمناها الموجودة في السي اس
7:15 اس هيكون فيها اللون الاساسي بتاع الموقع اللون الفارعي هيكون فيها شوية حاجات جميلة احجام خط معين عايزين نمشي عليها هنا عندنا اللون بيتكرر في كل حتة فهنحطه في متغير في المستقبل بازن الله كده يا شباب بدأنا المشروع بتاعنا عملنا كالتصميم بصنا عليه بصة عشان تشوف ان شاء الله هيكون عامل ازاي التصميم بتاعنا هيكون طبعاً وهنستخدم ونستخدم ونستخدم ونستخدم ونستخدم كل حاجة عشان تطبق على اللي انت تعلمته لازم يا جماعة تزبطوا الدنيا قبل ما تخشوا في الدروس اللي جاية وتكون بالمصدرة ما عندكش غلطة لحد اللحظة دي عشان نكمل صح بإذن الله النهاردة جماعة هنتعلم يعني ايه فونت ايكون وهنتعلم الكنتينرز والايه بنستخدمهم
8:04 وايه الحكمة منهم والكلام ده كله زمان كان عندنا السوار الموجودة في التصميم كنا بناخد الصورة نعمل لها اكسبورت نضيفها في التصميم وصلى الله وبارك وموضوع خلص لو حبيت ان انت تغير لون الصورة دي كنت بترجع لبرنامج الجرافيك اللي انت شغال به وتغير لونها وترجعها تاني في التصميم لو حبيت تكبر حجم الصورة دي كنت هتبدأ تواجه مشكلة اولا كل ما تكبر حجم الصورة البكسلز بتتشد والتفاصيل بتاع الصورة بتبوز بيسموها بالعامية بتبكسل عشان تحل المشكلة دي كنت بتعمل ري ديزاين للصورة بتصممها تاني من جديدة على قد الحجم الكبير اللي انت محتاجه في وجود الفونت ايكونز ما عندناش المشاكل دي الفونت ايكونز بتسمح لك ان انت تتعامل مع الفونت كأنها بالضبط تيكست تيكست تغير لونه وتغير حجمه وكمان تخلي الايكونز يعني تتمدد إلى مالة نهائية لو روحنا على واحدة
8:52 من الايكونز الموجودة هي حتى في الموقع نفسه من باب التجربة هنا مثلا وقلنا له هنا فونت سايز خمسمائة بيكسل والكالر هيكون جرين هتلاقي التحكم كامل بالشكل ده ومعندكش اي مشكلة خالص في الحجم واللون والكلام ده كله والحمد لله عظيم في مكتبات كتير جدا موجودة في العالم فونت أوسن فونت اللو في موقع اسمه اي كومون بيديك ان انت تختار من مكتبات الفونت اللي في العالم كلها هندخل على داونلود اللي مخبينا بخباسة تحت دي وننزل تحت شوية هتلاقي النسخة الويب الفري اللي هي دي هينزلك المقاف اللي انت شايفه ده هتعمله اكستراكت بالشكل ده ونشوف انحتاج ايه منه باذن الله محتاجين فولدر الويب فونتس او الحاجة اللي هو ده هتاخد الفولدر ده من غير ما تغير اسمه ولا تعمل فيه اي افتكاسات
9:39 وتضيفه جنب فولدر السي اس اس بتاعك جنب فولدر السي اس اس بتاعك عشان الايكونز تشتغل بعد كما محتاجين ملف السي اس اس اللي هينادي الويب فونتس دي عندنا ملف اسمه call وملف اسمه call.min ادي ال call ال call هنا يا شباب لو عملنا كده هتلاقيه هنا نكتب لك ان انت لو ما تيجي تحطه جوه الفولدر بتاع السي اس اس كتب لك هنا . . . عشان يوريك ان هو هيطلع برا فولدر . . . . ويدخل على الويب فونت وبعدين يجيب الفونتس الموجودة لو انت في الوقت حطيته برا . . . مش هيلاقي الويب فونتس دي شايفين ال . . . والتي تعلمناها وفي كرسي لحد ما زهينا طيب عظيم مين بقى الـ دوت مين ده اللي هو الملف المضغوط اللي فات ده الملف اللي
10:27 انت شغال فيه في مرحلة عمل تكتب كود وتخلص وتكتب وتزبط فالملف قدامك مكروء وتقدر تعدل عليه بعد ما بتخلص خالص بتضغط الملف بالشكل ده عشان تودين مرحلة اللي هو خلاص العميل بقى يبدأ يشوف الموقع دلوقتي فطبعا بتعمله زي كده عشان يكون موفر لك في المساحة وطبعا هنتعلم في المستقبل ازاي نعمل الكلام ده كله هتلاقي دلوقتي هنا 58 كيلو المينيفايد و 72 طبعاً اللي هو العادي هناخد المينيفايد version بالشكل ده ونضيفه في فولدر ال-css وهنيجي هنا كده بعد ال-normalize ونقوله link css slash all.min ومتنساش طبعاً ال-comment بتاعنا الزريف بالشكل ده وعشان تتست اي اي اي
11:13 اي اي اي اي اي اي اي اي اي اي اي اي اي اي اي اي اي اي اي اي اي ا وكله تمام مش محتاجة اقولك طبعا انه هو مديه classes بتغير الحجم لو انت حابب يعني الشكل ده من غير ما تكتب الفونسيز بتاعتك دي عنده هو classes جاهزة بتعمل شغل حلو قوي في الائكون طيب الحمدلله عظيم وجميل وفهمنا الفكرة وخلاص مش محتاجين الكلام ده وندخل بقى في مرحلة الكنتينر يعني ايه كنتينر الكنتينر اللي هو الحاوية اللي بتاخد العناصر بتاعتك
11:59 تعزلها عن المحتوى وتعمل فيها اي حاجة خلينا نعمل هنا عنصر اللي احنا كنا عميين نعملهم كتير اسمو بيرانت بيرانت ده بيعمل إيه؟ هنشوف دلوقتي هذه البييرانت هنقوله background color مثلا 3 أيه بس كده ده المحتوى بتاعنا مش هنعمل أكتر من كده زي ما انت شايف هنا هتلاقي الكلام بتاعك بيبدأ من أول الشاشة ده أولا في عالم الويب وفي عالم أي حاجة في الدنيا فيها محتوى حد بتفرج عليه مش منطقي دايما لازم فيه هوامش قبل الحاجة وبعدها عشان تكون مكروقة للعين وعشانش تلاقي يكون ظريف لو أنت واحد الناس بتكتب ورق على الورد وتطبعه هتلاقي الكلام ما بيبدأش من أول الورقة لو أنت عندك عقدة أو أي شهادة أو أي ورقة في الدنيا تلاقي دايما فيه هوامش قبلها بتخلي الكلام بيبدأ
12:46 من بعد الهوامش دي مش من أول الشاشة زي كده ايه فكرته لو انت عندك مثلا شاشة كبيرة زي كده وانا مش عايز المحتوي يكون فل سكرين فبحطه في كونتينر في نص الشاشة عشان يبقى مكروق وباقي يمين والشمال بقى بيبقى فيهم الالوان او الصورة او اي حاجة مثلا في الصفحة خلينا اوريك مثال ده تصميم موقع الزيرو ايه اللي يحصل لو احنا المساحة اللي اللي ورا دي هنري نعمل كده ده شكل الموقع ايه اللي يحصل لو احنا خلينا الموقع ده اتمدد الى مال النهاية كده ما للشاشة خليني نعطيك خليني نعطيك الفكرة عشان يعني تتخيل الوضع واللي ممكن نستعمل أسن كونتينر ده الكنتينر بتاعنا نشيل منه الويتس ده كله كده ونبص بصة على الشكل هيكون ازاي ايه
13:32 رأيك انت في الشكل ده شايفين انا هسيبك انت تتخيل موقع بالشكل ده كل حاجة بدأ من اول الشاشة وفي نفس الوقت التصميم شكله بشع كده كل حاجة بدأ من أول الشاشة تحس ان انت تروح على يمين خالص عشان تشوف اللوجو وعش الشمال خالص عشان تشوف اللينكات وده طبعا الزوم الأصلي برضو مازال الشكل وحش جدا الفول سكرين مش مش أي حد بستعمل الفول سكرين بالشكل ده معظم التصاميم البوكست بتبقى في نص الشاشة بالشكل ده وفي مساحات على يمين والشمال فيها بقى اللي انت عايزوا كله لو جينا دلوقتي حطينا باكجراوند صورة للبيرانت ده ايه اللي هيحصل لو انا خليت الكلام ده في النص
14:32 الـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ هو ده اللي أنا محتاجه عشان لو فيه صورة أو background color أو أي حاجة تملى الشاشة مش عايزة تملى الحتة دي بس طيب عظيم تعالوا نشوفوا بعض دلوقتي بقى إزاي نحل المشكلة دي المشكلة دي تتحل عن طريق وجود container هعمل container بالwidth والmargin ده واسيب الparent زي ما هو وهنا جوه الparent هبدأ أحط ال container بتاعي بالشكل ده وحط فيه التستكس كده عملنا المطلوب والحمد لله عندك الـ Full Screen background color أو صورة أو أي حاجة موجودة والكلام بيبدأ من نص الشاشة بالزبط هنحط للـ Container background for testing بس ده ما بيحصلش يعني بس
15:18 أنا عشان أوريك بس الفكرة ليس إلا background color لون زي مثلاً التلاتة أي لون بشع شوية بس مش مشكلة كده حققنا المطلوب والحمد لله انه الـ background موجود full screen والكونتينر ماسك المحتوى في النص بالظبط ليه بقى برضو ممكن نستخدم الكونتينر يكون ليه مساحة سابتة عشان الموقع بتاعك كله هتلاقيه ماشي على الخط ده بصوا كده معي في التصميم بتاعنا هتلاقيه هنا بالشكل ده هتلاقيه العناصر بتاعتك الكارد ده لو ترعت فوق هتلاقيه ماشي مع الكلام ده ماشي مع الـ content دي كلها ننزل تحت شوية هنا هتلاقي برضو لو في محتوى هنا هتلاقيه ماشي معا بالزبط كله هتلاقيهم كده ممكن نشوف ده في الموقع اللي احنا كنا نسفتحينه دلوقتي اهو هنا اللينكات شايفين يا شباب كل الجريد شايفين كلهم على نفس المستوى ازاي عشان كده تقدر
16:07 تثبت بالكونتينر ان الموقع بتاعك كله يكون على نفس المستوى وما تلاقيش حاجة طالعة بره وحاجة دخلة جوا الا لو انت بتعمل حركات ابداعية وفيه سيكشن كده عايزه يكون فول سكريين عادي فيش مشكلة طيب دلوقتي عملنا الكونتينر الر على اليمين والشمال هتقول ليه هقولك علشان لو انت روحت لنسخة الموبايل مثلا خلينا نروح كده على الموبايل هتلاقي انه الكلام برضو بدأ للأسف بالشكل ده من أول الشاشة فلازم هنا يبقى فيه padding يمين وشمال عشان الكلام ما يبدأش من أول الشاشة زي ما احنا اتفقنا فهاجي عند الكنتينر وهقول له padding left 15 بيكسل وب padding right 15 بيكسل بالشكل ده طيب ده كلام عظيم جدا والحمد الله ايه تاني
16:55 ناقص ان انا خلي المارجن اوتو عشان الكنتينر يمسك العناصر في النص عشان ده اكون محترف انا مش محتاج الاوتو دي غير في اليمين والشمال متكتبش بقى في القيم كلها مارجن رايت وليفت اوتو بس كده مش عايزين الاوتو اللي انت عاملها دي اللي هي على كله دي والباكجراوند هنخليها فور تيستنج هنشيلها تاني والويتس هنتحكم فيها كمان في جميع الشاشات لو جينا دلوقتي سبنا الكنتينر بتاعنا 600 بيكسل بالشكل ده ريسايز لحد هنا تمام تيجي تروح عند الشاشة دي بص حصل سكرول لان انت مثبت الويتس بتاعه ده احنا مش عايزينه احنا عايزين في كل شاشة الكنتينر ده يكون لي عرض معين نضمن فيه انه يعمل المحتوى بتاعي في النص ويسيب لي هوامش على يمين والشمال فاكرين يا شباب الاكواد بتاعة الميديا كويريز اللي تعلمناها في دروس الريسبونسف في كورس
17:43 CSS هو ده اللي احنا نعمله دلوقتي زي ما انتم شايفين هنا عندنا شاشات اللي سمول اللي هي بتبدأ من 768 وانت طالع عندنا الشاشات الـ Medium اللي تعلمناها والحمد لله اللي بتبدأ من 992 وانت طالع وعندنا الشاشات الـ Large اللي هي بتبدأ من 1200 وانت طالع بالمناسبة دي نفس الاكواب بتاعة الـ framework اللي اسمه Bootstrap الاسدار الثالث نفس بالزبط الـ containers اللي بيستعملوها بنفس الـ pixels بنفس كل حاجة عشان تساعدك في الـ responsive وانت اصلا تعلمت فكرة الـ responsive وتعلمت ان العناصر بتاعتك ازاي تتحكم فيها في كل شاشة المفروض يعني في كورس الـ CSIS انت فهمت الكلام ده هنا ايه اللي بيحصل في الموبايل اللي هي الـ media
18:29 اللي تحت الـ 768 الكنتينر بتاعي خلاص هيكون فول سكرين مالوش ويتس زي ما انت شايف كده والباكجراوند دي هشيلها كمان بس هنساويبها بس عشان اوريك الشكل مش اكتر تعال نشوف الشكل على الموبايل الاو ادي الموبايل نعمل كده كام زوم هتلاقي الشكل بتاعنا هنا مثلا هتلاقي الشكل بتاعنا فول سكرين الكنتينر فياش مشكلة خالص اهي وعندك ما فيه شويتس كاتبه فهياخد طبعا الفول سكرين عشان هو بلوك وفيه بادينج ليفت ورايت عشان الكلام ما يبدأش من اول الشاشة زي ما انت شايت بالاخضر اهو كده ده مانت لو ما فيهش البيدنج هيحصل كده الكلام برضه هيبدأ من اول الشاشة يبقى ما عملناش حاجة يبقى انا محتاج البيدنج ده والحمد لله نيجي بقى في الشاشات اللي بعدها ونجرب كده كام تجربة دي الشاشة الكبيرة خالص بص عندك
19:16 مسافات على يمين والشمال ازاي تروح على الشاشة اللي بعدها ب برضو المسافات لسه موجودة يبقى جدا الكنتينر في كل ميديا ما حافظ لي على العناصر الجواه بيخليهاش تطلع برا الميديا يعني ما بيخليش فيه سكرول لو انت جيت عملت غلطة يعني جيت في الشاشات دي وخليت دي مثلا الف تسعمائة وسبعين في الشاشات الميديم بص ايه اللي هيحصل هنا لو رحنا على الشاشات الميديم بالشكل ده بصوا سكرول عشان انت زودت المساحة طلعت برا الميديا هو ده اللي احنا مش عايزينه فهنا هنا 970 دي ضامن ان هي جوه الاريا بتاعة الميديا دي في الحتة دي فكده الحمد لله ما عنديش اي مشكلة خالص فكده طبعا يا شباب عملنا الحمد لله الكنتينرز الاساسية اللي هتساعدنا في
20:03 التصميم كله كل العناصر اللي هنضيفه في الكنتينر هنضمن ان شاء الله ان هي محطوطة في المكان المناسب في كل شاشة النهاردة جميع ان شاء الله هنبدأ ما بعد نعمل الهيدر اللي فوق ده طبعا هو مش حاطة لينكات معينة هنا عشان نشوفها فاحنا هنضيف لينكات من عندنا اللي هي اصلا اقسام الموقع تحت وهنعمل حركة كده ان انت تدوس على اللينك تنزلك للقسم الخاص به ونبدأ اول حاجة بالبنية بتاعة الموقع بالنسبة للوجو ده هو حاطته لنا جنب ملفات التصميم وبرضو ان شاء الله هسيبه لكم هتلاقي هنا في الهيلب اسات وهتلاقي فيها اللوجو هنا اهو خلينا ناخده معنا بالمرو نحطه جوه في الودر بتاع السور وقادي اللوجو كله تمام ندخل على البنية بتاعتنا عشان نبدأ
20:53 نعمل الهيدر بتاعنا بنعمل بس تعليقات في اول حياتنا بس عشان نتعلم ليس الا والدنيا تبقى سهلة معنا قادي الهيدر جوه الهيدر هيكون عندي الكنتينر اللي هيلم العناصر في النص ليه هيلم العناصر في النص زي ما اتفقنا عشان نقدر اعمل الهيدر كاملة باي لون يعجبني والهيدر الكنتنت بتاعته تكون في النص وهو ده المطلوب وتكون على نفس مستوى باقي العناصر كلها هنا في واحد يقول لي هو ليه ده مش على نفس المستوى بتاعتها لانه ممكن ده يبقى فلسكرين زي ما اتفقت معك لكن اي عنصر هتتعامل معي وتضيف جوه كونتينر هتلاقيه كله ماشي على نفس مستوى اللوجو بالزبط طيب نبدأ دلوقتي جوه الهيدر نضيف الكنتينر بتاعنا بشكل ده بعد كده محتاجين حاجتين اللوجو على الشمال
21:41 هذه اللوجو ومحتاجين بعد كده ممكن نضيفه كلاس لوجو كمان عشان نقدر نوصل له بسهولة بس جايز تحط سور في المستقبل بعد اللوجو على الطول محتاجين الفولدر بتاع اللينكس. الفولدر بتاع اللينكس هيكون في ايكون وهيكون في يو ال اللي هي فيها اللينكس بتاعتنا كلها. لسه متعلمناش جيبا سكريبت متعلمناش الاحداث اللي تخلينا ندوس على الزرار يفتح لنا حاجة والكلام ده كله. فهنعملها بالهوفر. هعمل هوفر على الايكون. هيفتح لي اللينكس كلها او اللي فيها اللينكس كلها. طيب بالنسبة للايكون بتاعتنا دي ازروفها دي واحدة من الايكون الموجودة في موقع فونت او تقدر تبحث عن بارز او برجر ايكون او الحاجات دي كلها هتلاقيها. طب ايه رأيك? نتعلم نحنا نصمم ايكون
22:28 بنفسنا بسي اساسي. يعني نتعلم كده شوية حاجات ممكن تتعامل ازاي? وتبقى شكلها جميل. مسلا مسلا بديك مثال يعني. طيب تعال نشوف ازاي. الشكل بتاعنا ده عبارة عن تلات عناصر. يعني ممكن نعمل بشكل ده. ونديها مسلا مسلا كلاس اسمه ايكون. او برجر ايكون زي ما تحب. ونحط جواها تلاتة سبان. يعني من باب التجربة ان انا عايزك بس تتعود توظف كل اللي اتعلمته لو حطينا هنا ايكون فونت قسم واحدة بس بسرعة لا انا عايزك تطبق على اللي انت تعلمته كتير فلولقيت فرصة هستغلها باذن الله وادي وقل وجوها اللينكات بتاعتنا احنا تقريبا عندنا اربع او خمس اقسام مش متأكد احنا مع بعض شغالين اهو اول لينك عندنا هتكون الجزء الخاص بالسيرفيسيس دي اول حاجة خليها نشوفها في
23:14 الصورة ادي اول حاجة عندنا قسم السيرفيسيس مضبوط خلينا نكسب وقت كده خليه اللينك تودي على القسم فبديله ID بنفس الاسم ده وهنكتب هنا Services خلينا نوقف الفيديو ونعمل اللينكات بسرعة عشان نكسب وقت وقادي اللينكات بتاعتنا والحمد لله أربع لينكات وكله تمام وزي الفل ونبدأ بقى عشان نزبط CSS بتاعنا ده الشكل بتاعنا كله تمام خلاص بقى مرحلة ان احنا نحط background للكونتينر بقاش ريالازمة الفكرة والحمد الله. وكله بقى تمام. محتاجين نبدأ نزبط الدنيا بقى واحدة واحدة. ادي الجزء الخاص بالسي اس اس. طبعا كل الكلام اللي انت حطوا ده المفروض تبع ال هنسيب هنا بالشكل ده.
24:04 والميديا كلها. كل ده المفروض تبع ال وهنبدأ دلوقتي نعمل الهيدر بالشكل ده. اول حاجة هندي للهيدر بادنج 20 بكسل. في هامش كده جواه. الهيدر اول حاجة هتقابلنا فيه الكنتينر والصورة واللينكس اللي جنبها. خلينا نبدأ بالكنتينر. هادي الهيدر والكنتينر نفسه. اللي جوا الهيدر. او ان انت تعمل معين وتبعد عن الكنتينر. انا بحاول اختصر لك المعلومات او بحاول اختصر لك ان انت تعمل بنية كبيرة. اللي انا عايز عامله هنا انه اللوج واللينكس بالفلكس اخلي في مسافة بينهم بس يعني عندك هنا اللوجو وهنا في الايكون اللي انت
24:53 شايفها دي فعايز بالفلكس اسيب مسافات بينهم بس كده فمحتاج الكنتينر اللي شايلهم يكون display flex عظيم عادي display flex للكنتينر وبعدين justify content space between عشان احط بينهم مسافة زي ما اتفقنا يا شباب عظيم ايه تاني عايز اقوله online items center عشان يكونوا متوسطين كلهم على نفس المستوى الشكل ده حلو قوي الحمد لله هو ده المطلوب مش عايز اكتر من كده دلوقتي طيب بعت الكونتينر على طول محتاجين دلوقتي نزبط اللوجو حجم اللوجو كبير جدا فهقول له header.logo الويتس بتاعه مثلا خمسين او ستين بكسل نجرب مع بعض نشوف يعني مش وحش يعني زريف ستين مش محتاجين نكبره قوي مفيش مشكلة خالص وعند links بتاعتنا .header.links
25:45 العناصر اللي جوه اللينكس بتاعتنا المفروض ان انا عندي ايكون هعمل هوفر عليها فهيجيلي قايمة اللينكات كلها فمحتاج العنصر اللي هو اللينكس اللي شاية العناصر كلها يكون عشان خاطر العناصر اللي جوه هعملها بالبوزيشن ابسلوت كلها طيب جميل نيجي دلوقتي جوه اللينكس بتاعتنا محتاجين نرسم الايكون الجزء يا شباب اللي هو ده ده محتاجين نرسمها طيب هاجه اقوله هنا .header .links.icon دي الايكون الرئيسية اللي سبان اللي شايلة تلات عناصر جواها هتديها ايه يا ترى هقوله مثلاً ويتس تلاتين بكسل بعد كده هقوله ان انا محتاج ان هي تكون فليكس display flex وهقوله flex wrap
26:31 عشان العناصر لما تملى الشاشة تنزل تحت عشان انا عايز تلاتة بار تحت بعض فهقوله فليكس راب راب حلوة اوي مكان بقى العناصر هتكون فين اي حاجة ممكن نخلي العناصر في الاول في الاخر ما فيش مشكلة هنشوف مع بعض دلوقتي طيب اللي سبان اللي جوه الايكون انا عندي دلوقتي الايكون اللي هي الكونتينر اللي شايله تلاتة عناصر دول التلاتة دول عايز اللي سبان بقى اللي جوه الايكون دي نفسها هنعمل فيها ايه هدي اللي سبان بتاعتنا هقوله انه ليها background color اسود او لون زي تلات اتنينات او تلات تلاتات ده اللون اللي هيكون بتاع البار كل بار منهم وهقول له مارجن بيتهم خمسة بيكسل عشان ميتزقوش في بعض عشان يبقوا تحت بعض عزيم لحد دلوقتي خليه نشوف ما فيش اي حاجة تظهر لحد دلوقتي بنروح بس على الاسبان كده
27:20 عشان تبقى معنا هدي الاسبان بتاعتنا اهيه وقادي العناصر اللي جوه طيب واحدة واحدة كده معي عشان نشوف احنا محتاجين نعمل ايه دلوقتي في كل واحدة منهم هل انت عايز التلاتة يكونوا قد بعض انا بصيت بصة كده في الصورة هنا بصوا كده يا شباب لقيت ان اخر واحدة اكبر منهم هنا لكن في البيس دي كلهم قد بعض ايه رأيكم جرب نعمل حركة ان اخر واحدة تبقى اكبر منهم دي ولو لقناها بايخها نلغيها ما فيش مشكلة عندي دلوقتي تلاتة سبان انا الاسبان الاولى والتانية والتالتة حاجة اقول له هنا سبان اول واحدة اول سبان يوصل لها ازاي دي اول سبان عندي يا شباب بعد كده الاسبان التانية هتكون انتي اتشايد تو بعدين اخر اسبان عندي اللي هي الاستشايد بالشكل
28:10 كده احنا وصلنا للتلاتة طيب اول اسبان عندي هديها هايد تلاتة بيكسل والتانية هديها هايد تلاتة بيكسل والاخيرة هديها هايد خمسة بيكسل نجرب بس لو لقينا الاخيرة شكلها وحش نلغي الموضوع لحد دلوقتي كله تمام عاملين كل حاجة فاضل بس الواتس بتاعهم كلهم دي هتكون 100% هتملأ الشاشة اخر واحدة هتكون برضو 100% واللي في النص ممكن نخليها 50% مسلا او 60% هنشوف دلوقتي خليها 60 الشكل اهو كلهم فول سكرين 100% واللي في النص اصغر منهم شوية خلينا نعمل زوم كده عشان بس ايه نوصل لها ادي الايكون بتاعتنا اهي وبعدين نسيف
28:57 ونشوف. هنا زي ما انا شايفين عظيم جدا. اللي تحت يعني اكبر منهم مش عارف حاسس شكلها بايخ شوية. ممكن نعملها زي ما هم عاملينها افضل. فهنخليهم كلهم الهايت بتاعهم تلاتة بيكسل. كده الفكرة اللي احنا كنا عايزين نعملها مش مش قوي بصراحة. بالشكل ده. عظيم. دلوقتي العناصر بتاعتنا كلها اتزبطت هيب. بس الايكون شايفين راحة فينا يا شباب في الاول. وهنا في الشكل ده الايكون راحة على اليمين. فهنا محتاجين نعمل ايه? محتاجين نقول له. في الـSpan بتاعتنا الأساسية هقوله justify content flex end كده عشان العناصر بتاعتك كلها تروح في الآخر فتيجي الايكون كده وممكن ممكن نخلي height 2 ممكن يبقى أزرف شوية اوه 2 أزرف شوية عظيم
29:44 فأنا هيجي هنا في الـSpan وهقوله height 2 pixel وهنا هقوله انه هنا justify content flex end وكده بعملنا الايكون بتاعتنا والله هم لك الحمد من غير اي مشكلة خالص عزيم في حركة ممكن نعملها كده ظريفة ايه هي الحركة دي ان انا لما جامل هوفر مثلا على سبيل المثال على الايكون دي خلي اللي في النص دي توصل لمية في المية ايه رأيكم طيب عزيم محتاجين عشان التأثير يحصل بنعومة نحن نيجي عند تاني سبان اللي هي الويتس بتاعه ستين ونقول له ترانزيشن بالشكل ده. طيب الكلام ده بقى هيحصل ازاي? او انت هتعمل على
30:30 ايه بالزبط عشان يحصل ده? في كزا حاجة ممكن نعمل عليها تعمل لنا القصة دي. فخلينا نشوف مسلا مسلا. لو عملنا على الكله اللي هو ده. نعمل عليه فنخلي تاني سبان دي تبقى مية في المية. طيب جميل جدا. هاجي هنا واقول له ان انا عايز اوصل بس بالترتيب دي بتاعتي اهيه. أقول له هنا لما أعمل hover على ال links بتاعتي عندي ال icon ال span التانية اللي جواهي span nth child 2 هيحصل لها ايه ال واتس بتاعها هيبقى 100% بس كده أقول له تفضل نروح نجرب عظيم هو ده اللي أنا عايزه بالزبط والحمد لله وكله تمام
31:23 النهر ده جمع ان شاء الله نكمل مع بعض الجزء الخاص بالهيدر محتاجين ان احنا نعمل شوية تعديلات في الهيدر وفي الاخر نخفيه عشان لما نعمل hover على الايكون يبدأ يظهر ونبعد يختفي تاني زي ما اتفقنا طبعا خلينا نكتب السلكتور الخاص بالUl بتاعتنا جوه الهيدر في links وجوه ال links في ال UL بتاعتنا كمان محتاجين نعمل في ال UL دي زي ساهم كده اللي احنا تعلمناه في ال CSS اللي بتعامل بال before والafter وهنا نقول له content فيش بالشكل ده. ونبدأ نشوف التنسيقات بتاعتنا اللي احنا محتاجينها. اول حاجة انت محتاجة فيها ان انت تلغي محتاج تلغي على سبيل المسال زيرو. هنعمل كده حل. محتاجين نلغي كمان. محتاجين نديها بس
32:09 نميزها. اه زي مثلا او او مثلا بشكل ده. محتاجين ان احنا نعمل لها عشان نوزعها بقى في الوضع المطلق. طبعا هتلاحظه طلعت برة الشاشة وفيه حصل. فهنقول له ومتطلعش برا الشاشة بالشكل ده عشان تبدأ من اول العنصر اللينكس بتاعنا اللي فوق ده طيب محتاجين نقول له مينمم واتس 180 او 200 بيكسل مثلا كده عظيم محتاجين ان احنا نقول له طوب 100% طوب 100% هيخليها تبدأ من اول 100% من العنصر بالشكل ده لو حابب تزود مساحة عشان السهل فيه سهل ما هنعمله هنا فمحتاجين له مساحة من فوق فنقدر نستخدم خاصية الكلك في أي مكان اني اقول له 100% زائد مثلا 20 بيكسل فزودت
32:58 مساحة كده ممكن نخليها 15 بيكسل عشان ما تبعتش قول تمام محتاجين بعد كده ان انا ادي له خلينا نقول display none عشان نخفيه خلصنا الشكل وزبطناه ولاقينا تمام هنعمل له display none بعد ما انت يعني تعمل هوفر هيظهر طبعا لو انت عندك شوية تثبيتات محتاج تعملها خبي الديسبيلي نان دي دلوقتي عشان بس نشوف الشكل كله بعد ما يخلص هنعمل فيه ايه وبعد كده نبقى انيخفيها في الاخر خالص طيب عايز تعمل ايه بالبيفور والافتر هنعمل السهم يا شباب اللي احنا اتفقنا عليه قبل كده تعال نشوف السهم ده هنعمله ازاي قدي البيفور اهي البيفور بتاعتنا هنقول له ان احنا محتاجين بوردر ويتس 10 بيكسل محتاجين البوردر
33:47 محتاجين البردر الالوان يا شباب اللي احنا اتفقنا عليها عشان خاطر ابدأ اعمل السهم اللي احنا تعلمناه قبل كده وادل بسلوط بالشكل ده وهقوله خمسة بيكسل وهقوله طب سالب عشرين بيكسل جات منين بقى القيام دي كلها بس عشان نبقى فاهمين اول حال خلينا نعمل السهم السهم عندنا زي ما انت شايف اربع الوان احنا محتاجين الازرق اللي هو المفروض تالت واحد فكله ما يكونوا transparent والتالت هيكون نفس لون ال background فاختصالا للوقت سريعا اهو بشكل ده ادي السهم بتاعنا ندي كم زون كده عشان تشوفوا ادي السهم بتاعنا اهو عزيم الريد خمسة بيكسل دي جي بتاع منين خلينا اقول لك العنصر اللينكس ده الويتس بتاعه قديه 30 عزيم جدا 30 بالنسبة بقى للجزء الخاص بالبردر الويتس بتاعه كم؟ 20 زي ما نشايفه
34:37 ففيه خمسة بيكسل يمين وخمسة شمال فكده بقى في النص بالزبط والسالب 20 علشان هو 20 عملت سالب 20 عشان يطلع فوق لو جيت انت غيرتها هتلاقي السهن بدأ يرجع كده او ينزل تحت وإحنا طبعا مش عايزين كده فعشرين هتخليه على قده بالمسطرة طيب عظيم جدا نيجي بقى ناخد الكلام ده نضيفه هنا في ال before بشكل ده بعد كده محتاجين دلوقتي اللينكات اللي جوا اللينك انت عامل كزا لينك دلوقتي فهاجي جوا اليو ال ممكن تختصر ال ايه ما تكتبهاش عشان ما فيش غير الينك يعني هو الينك بتاعنا هو الينك بتاعنا هخليه display block الينكات بتاعتنا هديله padding 15 بالشكل ده وممكن نبص عليه بصة وهو بيحصل له الحاجات العجيبة دي
35:26 خلينا نعمل هنا zoom out كده سننا تمام ادي الينك بتاعنا بقى block padding 15 pixel محتاجين نديله text decoration عشان نشيل اللي هو الخط اللي تاعته محتاجين نديله مثلا مثلا color تلت تلاتات او تلت اتنينات زي اللون اللي احنا اخترناه قبل كده محتاجين عشان نعمل عليه hover فيتحرك كده فمحتاجين نديله transition نفس المود ده اللي احنا عملناها للعناصر التاني بالشكل ده ده بالنسبة للايه حلوة دلوقتي انت عايز الايدة تعمل عليه hover فيتحرك من على الشمال يبقى فيها مش على الشمال كده فهاجي عند الايدة وهقوله دلوقتي عند
36:15 الhover هتعملي padding lift بس لانه فيه padding من كل الجهات في padding من كل الجهات 15 بيكسل فهقوله padding lift 25 هيتحرك بس من على الشمال بشكل ده بشكل ناعم طبعا مش محتاج اقولك زي ما انت شايف كده طيب لو عايزين نعمل border من تحت بس في كله ما عدا مثلاً اخر واحد طيب خلينا اقول له مثلاً لو عايزين نعمل بوردر للـ A نفسه ممكن نقول له هنا الـ A not طبعاً الـ A مش هو العناصر بتاعيتنا كلها مش مترتبة تحت بعض A ده فيه Li وبعدين جواها A فهقول له Li not last child يعني مش اخر واحدة نوت لاست تشايليان مش اخر الا يعني
37:02 الا الاي الاولى والتانية والتالتة الايه اللي جواه هم هنعمل ليها بوردر هولو بوردر بتم واحد بكسل سوليد لون مثلا زي التلاتة دي وتلاتة اي هنشوف مع بعض دلاتي زي كده عظيم فكده هو جاب الايه كلها مع عادة الاخيرة وجاب الايه اللي جواه هحطي لها بوردر من تحت والحمد لله جميل جدا وكله زي الفل ما عندناش مشكلة خالص وفضلنا بس حاجة واحدة دلوقتي انه لما اعمل على الـ links الـ UL تظهر فهنيجي الوقت عند الـ UL بتاعتنا ونرجع على الـ display num دي كده بقت مخفية خلاص نعمل بس زوم بعيد كده هجي اعمل hover هنا هتلاقي ما عملناش طبعا كود الـ hover هدي الـ UL عايز اقول له الـ links بتاعتنا خليها بعد الـ
37:48 UL على طول الـ links بتاعتنا هعمل عليها hover ال UL اللي جوه هتبقى Display Block يعني هتظهر شكل ده عظيم جدا الحمد لله نبعد بعيد زي كده عملنا اللينكات بتاعتنا طبعا يا شباب في نقطة مهمة بس أنا حابب أقولها لك في العادي خالص لما تتعلم إن شاء الله Javascript هتلاقي إنه المنو دي بتعمل بالكليك يعني أنا هاجي هنا هدوس كليك فدي هتطلع هدوس كليك بره هتختفي مش هتبقى طبعا بالطريقة دي خالص هنا هتلاقي شوية خنقة وانت بتبعت كده بتختفي لازم تكون موجود في المينيو نفسها علشان خاطر ما يحصلش مشكلة انها تختفي كده بس احنا هنا بنتعلم كونسيبت بس عشان نبقى فاهمين الفكرة لكن مفيش مشكلة بعد كده في التعديلات باذن الله هتواجه يعني حاجات كتير وهتصلحها في السكة ان شاء الله
38:43 هنعمل مع بعض يا جماعة ان شاء الله القسم الخاص باللندنج القسم اللندنج حاطين فيه صورة زينا انت شايفين صغيرة احنا طبعا مش اهم حاجة عندنا نعمل للتصميم ده احنا عايزين نتعلم شوية مفاهيم ونطبق على اللي احنا اتعلمناه نظري هنعمل نفس القسم ده بس هيكون فول سكرين يعني عايزين الصورة تملى الشاشة بالطول وطبعا بالعرض طيب البنية بتاعت قسم اللندنج بسيطة جدا مفهاش اي مشكلة خالص ده. تقول لي ان هو الباقي فيه مشكلة. هقول لك لأ حتى الباقي فيه مشكلة بس هي يعني جملة كده ترويشية بس مش اكتب. قدي جوه هنعمل زي مسلا هيكون فيه بتاعنا والبراجراف اللي تحته. هيكون مكتوب فيه والبراجراف اللي تحته هيكون مكتوب فيه الكلام اللي هو في التصميم ده عشان نكسب وقت بس اهو بالشكل ده. دي البنية بتاعتنا
39:32 مفيقاش اي افتكاسات خلص ندخل على الـ CSS عشان نبدأ نشوف التنسيقات بتاعتنا عشان تتعلم صح عايزك اي حاجة هقول هعملها ووقف الفيديو جارة بتعملها بنفسك تشوف عملتها بنفس الطريقة ولا اقل ولا احسن المهم ان انت تتعلم الـ Lending ده محتاجين نعمله background صورة زي اللي هو عملها في التصميم بحثت في جوجل عن Mountain Black & White فهيجيبلك صور كتير جدا بشكل ده هقوله دلوقتي background image URL هقول له . . slash ونطلع برا خطوة نخش على الصور وقادي صورة ال landing وهقول له background size cover وتعلمنا الفرق بين ال cover و contain في الدروس ال background في كورسة css طيب لحد دلوقتي كله تمام وزي الفل ما عندناش مشكلة خالص محتاجين دلوقتي ان الجزء بتاع ال landing ده يملى شاشة بالطول لو
40:20 جيت دلوقتي قلت له height مش هييملة الشاشة بالطول هيتبقى كده مساحة وهتزيد مساحة المساحة دي جاملين اللي هو مساحة الهيدر وفي حاجة تانية عاملة مشكلة لو عرفتها هتبقى فنان لو معرفتها هاتش كمل طبعا الفيديو عشان تعرف الهيدر بتاعنا الهيد بتاع عود الوقتي اربعة وستين بيكسل فلو انا عايز ييملة الشاشة لازم اشيل منه مساحة الهيدر دي فهقول له كالك 100% من viewport height ناقص 64 بيكسل لحد اللقاء العملية بقت تمام بس ما زال فيه scroll scroll ده جاي منين جاي من المرجن اللي فتراضي بتاع ال H1 هنا يا شباب بلوقتي هنشوف مع بعض قادي ال H1 بتاعنا عامل مرجن من فوق وهو ده طبعا السبب لو قلت له مرجن 0 راحة المشكلة والحمد لله طيب عظيم جدا ندخل بعد ال landing على
41:07 ال intro text الشكل ده بعد كده ال intro text ده هيكون جواه H1 و paragraph وعشان بس ايه المساحة تبقى متزبطة معنا من الاول كده قبل حتى ما نوصله ونعمله بس مارجن زيرو عشان نبقى ايه في البيس بالشكل ده حلو قوي لو حبيت اوسط الانترو تيكس ده في نص الشاشة كلها بطريقة البوزيشن اللي احنا تعلمناها طولين وعرضين هنعمل ايه هنقوله بوزيشن ابسلوت بالشكل ده لفت خمسين في المية وتوب خمسين في المية وبعد كده ترانسفور ترانسليت وهنا سالب خمسين وسالب خمسين كده هيتوسط في نص الشاشة بالزبط لو حبيت بقى حضرتك توسطه في نص الاب بتاعه مش في نص الشاشة كلها في نص الاب بتاعه فهاجي عند الاندينج دي ودي لها
41:54 بزيشن ريلاتف فهو دلوقتي يكون متوسط بناء على جزء الاندينج والله عايز توسطه في الشاشة كلها يبقى متحطش في الاندينج بزيشن ريلاتف خالص فقدي عندنا الانترو تيكست وهنا عندنا البوزيشن الريلاتف وكله تمام وزي الفل دلوقتي هنعمل بس كم تجربة الاول انا محتاج اعمل ايه في ال H1 بتاعنا محتاج ال H1 ده اخليه باللون اللي انت شايفه العظيم ده اللون ده يا شباب واحد من الالوان اللي هنستخدمها كتير جدا زي ما انت شايف هنا في الايكون وهنا وفي اللوجو موجود في كل حتة مدام بقى موجود في كل حتة يبقى نطلع فوق خالص ونعمله as a variable فهكتب هنا دلوقتي main color ده اللون المين كالر
42:39 بتاعنا ممكن نسميه مين كالر وممكن نسميه مين مش عارف ايه كالر زي ما تحب عادي وقادي اللون بتاعنا واول استخدامنا ليه هيكون في ال H1 ادي ال H1 بتاعنا ممكن ندي له فونت ويت بولد ممكن ندي له فونت سايز خمسة واربعين او خمسين بيكسل نكبر بس حجم ال H1 شوية وبعدين نقول له كالر فور وقادي المين كالر بتاعنا تمام وعظيم جدا نيجي بقى للبراجراف اللي تحته على طول هقوله فون سايز مثلا 19 بيكسل هقوله مثلا line height 1.8 عشان حج line height انت ايه اللي جابك هنا 1.8 بالشكل ده هاد العناصر بتاعتنا محتاجين دلوقتي في الانترو تيكست ان احنا نخلي الكلام في النص تيكست
43:29 line center بالشكل ده كله تمام وإيه دي الانترو تاكست بتاعنا تاكست اللين سنتر بحب دايما نخلي خواصة الـ CSS Reel فيها بريفكس في الآخر ما تنساش تضيف البريفكس زي ما تعلمنا في الـ CSS مش محتاجة أقولك طبعا طيب لحد دلوقتي ما عندناش مشكلة خاصة هنبص بص كده على الموبايل هتلاقي هنا في الموبايل خلينا نعمل Fit to Window هتلاقي هنا في الموبايل زي ما أنا شايف كده المساحة مضغوطة في بعضها فالانترو تاكست ده محتاجين نقوله إنه الويتس بتاعه 320 بيكسل مثلا وانه ماكس ويتس مية في المية عشان ما يطلعشوا برا اي كنتينر خلص ممكن تلاقي ويتس مختلف عن ده فالماكس ويتس بيحجموا انه ما يطلعش برا الشاشة خلص طيب لو عملنا كده فيش اي مشكلة هنا تمام احنا عاملين ليه الويتس دي
44:18 عشان ما نخليش البراجراف يتمدد هتقول لي ليه هقولك عشان هو هنا مش مخليه يتمدد عايز تخليه يتمدد يبقى ما تعملش دي مش عايزه يتمدد بالشكل ده يبقى نعمل دي عملنا الحمد لله المطلوب ونيجي عند الانترو تيكست ونعمل كده ونعمل تيست اخير شاشة كبيرة اللي بعدها اللي بعدها لحد الموبايل كله تمام وزي العسل ما عندناش اي مشكلة خالص والحمد لله. حلو قوي. في حاجة هنا هي عملت عشان نزبطها. ادي الهيدر. هتلاقي عندك ال دي محتاجة تزبط بتاعها عشان تيجي فوق العناصر. ادي ال بتاعتنا. هتلاقيها بقت فوق ايهم خلاص من غير اي مشكلة. عزيم جدا. فنضيف على طول الزد اندكس وبعد كده نودعكه على طول هدي الزد اندكس ون ويبقى كده زي الفور
45:12 نهرده جميعا ان شاء الله هنعمل مع بعض كسم الفيتشرز اللي هو ده فيه تلات مميزات هتلاحظ ان هو مش عامله باكجراوند وابيض وهنا ابيض ودهرين في بعض فالافضل انه احنا نعمل له background فانا هعمل له background زي ما اتفقى احنا هنحاول نعدل على التصميم عشان يكون شكله اجمل طيب الكسم بتاعنا فكرته بسيطة جدا جدا جدا وهنا هنبدأ نتعرف على قوة الgrade باذن الله start feature end features وهنا هقول له features بالشكل ده جوه الفيتشورز بتاعتنا هنعمل ال container اللي بيمسك العناصر بتاعتنا زي ما اتفقنا وهنعمل التلتة عناصر الفيت بتاعنا التلتة عناصر بتاعنا كل واحد فيما يكون في ايكون وهيدنج وباراجراف الايكون تقدر تختار الايكون اللي انت عايزة مافيش مشكلة
45:58 انا اخترت هنا واحد اسمها ماجيك عشان بس واريك الفكرة من موقع فونت اوسم تبحث عن الايكون المناسبة لك او الايكون الموجودة في التصميم وعندنا الاتش سري وعندنا البراجراف تقدر تكتب كلمة لوريم وتاب هيروح عاملك التكست الكبير ده بالشكل ده نرجع دلوقتي نشوف احنا هنعمل ايه في ال H3 بتاعنا هنكتب هنا tell us your idea مثلا وهنا لوريم بالشكل ده وطبعا اختصارا للوقت هنعمل الاثنين فيت التانيين بسرعة عشان طبعا ما نضيعش وقت الفيديو بالشكل ده هدي اول فيت ودي الاثنين البعض دي ايكون ودي ايكون ودي ايكون مختلفة خالص نشوف مع بعض الشكل ادي الشكل بتاعنا هو الحمد لله كله تمام ونبدأ تنصيقات ال CSS بتاعتنا ادي الفيتشورز عند
46:46 بعدين ادي الكلس بتعليه اول حاجة شبقه محتاجين نعملها ان ده انا عايز اعمل هوامش من فوق ومن تحت في كل الاقسام هعمل الbedding top والbedding bottom 60 وبالمناسبة لما نيجي نكررهم هنعملهم as variables عشان خاطر يو حبينا نتحكم في الاقسام كلها نتحكم فيها من مكان واحد ال background color هعمل لون زي ال F6 اللي انا استعملته قبل كده شو ما جيبش بس لون مختلف عشان يكون كده والسيرفز تكون لونه أبيض فيبقى فيه كده تناغم بينهم والعملية متسحش على بعض طيب جوه الفيتورز هيكون عندي الكنتينر الكنتينر بقى هنبدأ نستخدم منه الباوروف جريد بقى نشوف بقى العظمة بتاعت الـGrid Display Grid الـGrid Template Columns هنبدأ نوزع الأعمال ده بتاعتنا ازاي؟ هعمل repeat هادي repeat وهقول له Auto Fill
47:37 الـ Auto Fill هيكون عبارة عن إيه؟ هنستخدم فيه المين ماكس اللي احنا تعلمناها في كورس CSS مش عايزة عيد يا شباب شرح الكلام ده عشان خاطر بس فيه ناس بتمل من أننا بععد عيد معلومة وأنا أتعب لكده هقول بس سريعاً وتوفيل يعني هيملى الأعمدة على حسب المساحة المتاحة قدامه دلوقتي والبداية هتكون 300 وبعدين النهاية هتكون 1 فراكشن يعني لازم يبدأ من 300 ولو في مساحة أكتر هياخد 1 فراكشن كامل يعني لو عندي دلوقتي ألف فكل ألف هيتوزعوا على الثلاثة لو عندي 900 هيتوزعوا برضو على الثلاثة عشان الميلمم 300 لكن لو عندي 800 واحد فيهم هينزل تحت واتنين هياخدوا نص المساحة كل واحد فيهم عظيم عايز جابز بينهم او حاجة او عايز جابز بينهم هقوله جرد جاب 20 بكسل مسا او تكتب جاب
48:25 بس بشكل جام زي ما انتم شايفين بدون تدخل ميديا كويريز هتلاقي كل حاجة متزبطة بالمسطرة هنا ثلاثة هنا اثنين هنا واحد وقادي الشكل على الموبايل زي الفل طيب عظيم جدا والحمد لله كله تمام ونبدأ نكمل مع بعض التنسيقات بتاعتنا جوه الفيترز هيكون عندي الفيت ديف نفسه الاساسي ممكن نديره بعدينج نخلي الكلام في النص بعد كده الايكون اللي جوه اللي هي الاي كلها محتاجين نعمل فيها ايه محتاجين نغير اللون بتاعها هدي الكلور نستخدم المين كالر اللي عندنا الشكل ده عظيم جدا محتاجين دلوقتي ان احنا نزبط اله 3 ومحتاجين نزبط البراغراف بالشكل ده هدي اله 3
49:18 هنبدأ في اله 3 نقول له حاجة مهمة جدا هنا اله 3 بتاعنا هنا يا شباب لو روحت عليه كده ليه كتب لك ايه WorkSense Extra Bold Extra Bold ده على الفونت بتاع جوجل اللي هو الويت بتاعه 800 فلو عملت بولد بس يعني فونت ويت بولد كده الشكل ده هتلاقي انه الشكل ده مش هو المطلوب لكن لو احنا عملنا الفونت ويت 800 تلاقي ده الاكسترا بولد هوريك الفرق بينهم عشان ممكن ما تكونش يشايف الفرق بينهم ده البولد وده الاكسترا بولد تمام يا شباب تمام يبقى الفونت ويت بتاعتنا هتكون 800 بعد كده المرجن ممكن نخليها 30 بيكسل من فوق ومن تحت ومن العليمين والشمال 0 بالشكل ده وممكن
50:06 نزودها لو حببين ما فيش مشكلة بالنسبة للباراجراف هقول له line height 6 لان البراجراف بتاعنا الكلام لازق في بعضه جدا ممكن تبقى واحد وتمانية زي العناصر التانية اللي انت بتعملها الى حاول طبعا توحد الكلام ده تخليهش حاجة مخترفة عن التانية الكلار هيكون 3 سبعات نخليه فيه اللي تضوح شوية وبعد كده محتاجين الفون سايز نزوده شوية 18 بيكسل او 17 17 حالة بالشكل ده ناخد الكلام ده هنا في البراجراف ويبقى احنا كده زي الفل ونبدأ نعمل التست بتاعنا هذه الـ products بتاعتنا و الـ features بتاعتنا كله تمام نشوف الشكل على الموبايل زي الفل بالمسطرة فيوش اي غلطة والحمد لله
50:57 نهاردة يا جماعة ان شاء الله هنعمل مع بعض قسم السيرفيسيس وقسم السيرفيسيس قسم عظيم وفيش وقت حاجات زريفة جدا نتعجبنا باذن الله واحدة واحدة كده عشان نشوف القصة هتمشي ازاي هنا هتلاقي ان موجود في كذا حتة موجود في البرتفوليو وموجود في الابوت وموجود في الكنتاكت يعني دي حاجة من الحاجات اللي لازم تعملها يعني حاجة هتكون موجودة معاك هتستخدمها في كل مكان فيفضل ان ده يكون ليه نفس التنسيقات وفي حتة الواحدة عشان تتحكم فيه بسهولة طيب ممكن ممكن نحن نسميه على سبيل المثال يعني ممكن الهدنج دي يكون الحاجة اللي هي نستعملها في كل مكان فمش محتاج يكون تبع قسم السيرفزيس خالص دي حاجة ممكن تكون او من الهدنج ايه رأيكم نسميها مثلاً
51:44 كومبوننت مثلاً فممكن نقوله هنا start component ليه العناصر اللي انا بشتغل بيها كتير بالشكل ده start component و end component وهنكتب هنا .special heading ادي الهدنج بتاعنا طيب الهدنج ده خليه نشوف اللون بتاعه قديل كدر بيك قديل اللون بتاعه اهو عظيم خليه معنا دلوقتي على جنب نستخدمه هنعمل ايه في الهدنج ده الهدنج ده اول حاجة محتاجين ليه كالر وفون سايز عالي وشوات حاجات ظريفة كده خليه نضيفه في القسم المخصص ليه ونديله الكلاس الظريف ده وبعد كده نجربه كده بقى انزف لاي كده ونشوفه هو قدامنا هقوله ستارد سيرفيسيس الشكل ده واند
52:29 وادي القسم بتاعه كله هيكون جواهي طبعا هيكون جواهي لشان يمسك العناصر بتاعتنا كلها فهقوله .container بشكل ده بعد كده قبل ما نحط العناصر بتاعتنا كلها محتاجين نحط الهيدنج والبراجراف اللي هم انت شفتوهم في التصميم دول اهو وادي البراجراف اهو. اتش تو ده شباقين هنديله الكلاص بيساوي سبشيال هيدن. ده الاتش تو بتاعنا. هيكون جواه بقى الكلام اللي هو كلمة سيرفيسيس مثلا والبراجراف هيكون جواه دونت بي بازي. اللي هو الكلام المكتوب في التصميم بالشكل ده. اللي هو دونت بي بازي بي برو دكتف. طيب نبدأ دلوقتي نزبط الهيدن بتاعنا ده. عشان نشوف التنسيقات بتاعته. هادي الهيدن بتاعنا. ما كتبناش فيه اسم الكسم. نكتب فيه سيرفيسيس هنا.
53:20 هسهل بقى فانعمل copy paste مش مشكلة اول حاجة عندنا الكلور الاساسي اللي احنا جبناه اللي هو شباك بي او اي بي اي سي اي دي ده اللون بتاعنا اللي احنا جبناه بعد كده هنديله فونت سايز ميت بيكسل مثلا كان طبعا نقلل شوية لو حابين الشكل ده بعد كده محتاجين نديله تكست الانين سنتر عشان يتوسط بعد كده محتاجين الفونت ويت تمنمية ده نفس الموجود برضو في الفوتو شوب هتلاقيه الخط بتاعه محتاجين نقلل شوية لتر سبيسنج عشان الكلام يلزق في بعضه سنة تلاتة اربعة كده بالشكل ده ممكن ما فيش مشكلة محتاجين نقول له مارجن زيرو عشان مش عايزين مرجن ولا من فوق ولا من تحت ولا اي حاجة ده بالنسبة للسبيشيال هيدنج بتاعنا بالسبيشيال هيدنج
54:08 ده في برا جراف بعده على طول خلينا بس نضيف الاسبيشيال هيدنج وفي برا جراف بعده على طول محتاجين نعمله شوية تنسيقات ونخليه مرجن بالسالب عشان يطلع فوق ازاي نوصل للبرا جراف اللي بعد الاسبيشيال هيدنج ده على طول عن طريق النيكست سيلكتر هقوله سبيشيال هيدنج كده ده البراجراف اللي بعده على طول عشان ما يأثرش على اي براجراف في الدنيا خالص هادي براجراف بتاعنا هنا هنقوله محتاجين من فوق مراجن بالسالب فهقوله سالب 30 مثلا من فوق وبعدها من على يمين 0 ومن تحت مثلا 0 او ممكن من تحت نتحكم لو حابين نزور المساحة مفيش مشكلة فون سايز 20 بيكسل ممكن نقوله تاكست ألاين سنتر عشان يكون في وسطه بالشكل ده ممكن نزود حاجات كتير على حسب الفكرة بتاعتنا ممكن نزبط الكلار شوية نقول له
54:54 مثلا color 3 سبعات زي كده مثلا او نقول له 7 9 7 9 7 9 يعني نقرب شوية الالوان ده بالنسبة للباراجراف اللي بعده على طول الهيدنج ده هيبقى معنا في كل حتة يا شباب مفيش فيه اي مشكلة خالص وحمد الله هنستعمله دايما مجرد ما تحط الكلس خلص الموضوع طيب نجرب الكلام ده على الهيكون ازروفه هتلاقوا هنا تمام لحد الموبايل لا في الموبايل مساحة كابلت وبقى في اي مشكلة فهنتحكم بقى في الشكل في الموبايل هادي الميديا تاعة الشاشات اللي تحت ال768 ماكس ويتس 767 بيكسل هنعمل ايه في الماكس ويتس ده هنخلي الهيدنج يقل شوية الهيدنج بتاعنا
55:42 ده الفوند سايز بتاعه يكون مثلاً 60 أو 50 بيكسل ونخلي البراجراف اللي بعده على طول هنا أعتقد نحن يعني هنحتاج نقلل المرجن شوية بالزبط هو ده اللي أنا تخيلته بالزبط إنه المرجن من فوق يقل شوية عن 30 ممكن 20 15 عشان ما يبقاش لازق فيه بالشكل ده في الموبايل بس لكن في الشاشات التانية تمام وزي الفل زي كده عظيم جدا. كده تمام الحمد لله. الهدن بتاعنا خلص. فقدر بقى ان احنا ندخل على القسم بتاع السيرفيس ونبدأ نشتغل فيه ببساطة شديدة جدا. اه دي السيرفيس الشكل ده.
56:28 السيرفيس غلط. تعارفين بقى الكسل. اه دي السيرفيس مش غلط ولا حاجة. اوكي. ده كسم السيرفزز هنعمل له بايدنج من فوق ومن تحت زي ما عملنا هنا بالزبط بالشكل ده عشان نعمل له باك جراوند زي دي عشان يبقى فيه واحد فيهم ابيض وواحد لون تاني ده اللي انا كنت عايزة اقولهلكو ده لون وده ابيض فالعملية بقى شكلها ازرف شوية طيب نكمل البنية بتاعتنا بتاعة الجزء الخاص بالخدمات عملنا دلوقتي ببساطة شديدة جدا الجزء العادي بتاعنا اللي هو الهيدنج وده جزء بسيط جدا تحت الهيدنج هيكون عندنا اعمدة وفيه كام عمود عايزين الاعمدة دي نجمعهم في ديف عشان نقدر نتحكم فيه نديله بقى جريد
57:15 او فليكس او زي ما تحب ممكن اقوله سيرفز مثلا او سيرفزز كونتنت الديف بتاعنا ده هيكون جواه ثلاثة اعمدة العمود الاول هيكون فيه الاثنين دول وده الاثنين دول والثالث الصورة دي طيب هنسمي العمود بتاعنا على سبيل المسايا ممكن نسميه مثلا كل ادي او العمود الكل ده هيكون جوا حاجتين الجزء الخاص بالسيرفز دي اللي هي دي واللي تحتها السيرفز دي فيها شوية حاجات كتير وهنعملها بلفليكس وهنزبطها فانت محتاج تمشي خطو خطو فالعملية ما توسع مننا شوية هنا خليني نبدأ نكتب كومنت عشان يعرفنا بس احنا فيهن هنا هقوله ستارد سيرفز مسلا اللي هي مسلا سيرفز واحدة بس وهنا انت جوه الكل عشان بس تعرف البداية
58:03 فين والنهاية فين والدنيا ايه ما تخربش منك هنسميها مثلا سيرف او سيرفس لو حابب الدف بتاع السيرف ده هيكون جوه ايه هيكون جوه ايه هيكون جوه ايه هيكون جوه ايه هيكون جوه ايه هيكون جوه ايه هيكون جوه اليمين دف اللي هو التكست اللي فيه اتش اسري و بارا جراف وممكن ما تحطهمش في دف لو حابب يعني عندنا السيرف هو الجزء ده كله ايه و ايه والبارا جراف اللي تحته عزيم نيجي للايكون هجيب اي اي اي اي كده اسمها بال دي ايكون عندنا كده خلينا نكسب وقت بسرعة ونضفها هادي ايكون وعندنا الدف بتاع التكست هيكون جواه H3 وهيكون جواه بارا جراف بس ال H3 اول حاجة عندنا مكتوب فيها ويب ديزاين هادي الويب ديزاين والبارا جراف مكتوب فيه شوية كلام تقدر تحط الوريم لو حابب ما فيش مشكلة خاصة هادي الجزء الخاص بالجرافيك ديزاين يبقى
58:51 السيرف ده كله هو البوكس اللي انت شايفو ده لو حبينا نحط البوكس اللي بعده هناخد منه نسخة كده اهو السيرف التاني ونغير الايكون اللي هي نسميها مثلا سكتش ايكون بتاعت ال uiux اهي هدي الايكون بتاعتنا وهنضيف هنا الكلمة بدل الموجودة دي بدل ال graphic design هنكتب uiux والبراكراف ده هنبدله بواحد تاني بالشكل ده كده يا جماعة عملنا اول عمود عندنا بالزبط خلنا نشوفه هنا ادي اول عمود عندنا التاني هيكون فيه اتنين زي دول بالزبط فطبعا انا مش عايز اضيع لك الوقت فهعمل لك الكل التاني على طول خلينا اوريهولك كده الكل التاني اللي بعده بداية الكل نفسها فينا عشان تشوف هنقفل ده ونقفل ده الكل اهو بدايته هنا ونهايته هنا في الحتة
59:37 دي كده فهاجي هنا واروح نضيف الكل اللي بعده على طول الكل اللي بعده على طول زي ما ان شايفين برضو فيه serve هنا في ايكون حاطت لك كم ايكون كدة بس للتجربة طيب هنشيل دي خلصنا التجربة بتاعتنا عندك الكل التاني في برضو سيرف وان وسيرف تو اهو هيطلع لك برضو الشكل ده بقوا اربعة اهو تحت ببعض اخر كل ما تطلق بط في البنية وتحس ان هي كبيرة اقفل العناصر ادي السيرف و ادي السيرف اهو فبقى عندي الكل دي الكل و دي الكل قفلتهم هم بعد الكل دي عندي كل تالت بالشكل ده اهو هتحط ايه في الكل التالي ده هحط فيه ديف اسمه image واحط جواه صورة بس كده الصورة هنحطها دي دلوقتي موجودة عندي ممكن نضيفها على طول عندنا هنا في السور عندنا صورة بتاعت اللندنج دي
1:00:26 ممكن نضيفها او نضيف اي صورة مفيش مشكلة خلص هنحط صورة هنا عشان نعمل الشكل اللي انتوا شايفينه ده ونعمل الجزء ده بال before والafter ونستخدم ال grade في توزيع العناصر عشان يخليهم تحت بعض كلهم زي ما عملنا في الاقسام التانية النهاردة جميعا ان شاء الله هنكمل مع بعض الجزء الخاص بالسيرفيسس وهنضيف الصورة بتاعتنا هنا في العمود التالت ونبدأ نوسعهم بالجريد ونغير ما يلزم تغيره باذن الله. الصورة بتاعتنا جبنا صورة من جوجل بالشكل ده عبارة عن مونتن برضو تقدر تعمل فيها اللي انت عايزه تقدر تكتب بلاك اند وايت لو مش حابب الصورة تكون ملونة بالشكل ده. ادي الصورة بتاعتنا هتكون اسمها سيرفيسس.جي بي جي بالشكل ده والاعمدة بتاعتنا هتكون كلها
1:01:14 تحت بعض كده وفاضل ان احنا ن بالمتعشان اعمل التقسيمة بتاعتها محتاج ان انا احول السيرفيس كونتنت ده لجريد عشان يبدأ يوزع العناصر الجواه بالشكل السليم ادي السيرفيس بعدين السيرفيس كونتنت هيكون ديسبلي جريد الشكل ده هنعمل فيه نفس اللي عملناه في العناصر التانية نفس الكصه هيكون نفس اللي انت عملته هنا بالزبط هنستعمله اصلا في كل حتة الجاب ممكن تكون عشرين ممكن تزودها لو حابب ممكن نخليها تلاتين هنا بدل عشرين عشان الدنيا تبقى أوسع شوية بالشكل ده بص قبل ما اعمل اي تنسيقات زبط لدنيا اصلا لوحده كله تمام والحمد الله طيب محتاجين نديله مرجن من فوق كده كبير شوية مرجن توب ميت بيكسل مسعش هيبعدهم
1:02:00 عن بعض لانهم لازقين في بعض جدا هنا هتلاقيهم برضو كده في مسافة اهو تمام جدا بعدها على طول نبدأ لكل واحد من السيرف اللي هو السيرف ده خلينا نشوف في المكانه جوه الكل دي نفسها في السيرف ده السيرف ده اللي هو سيرف اس بوكس اللي جوه ايكون وتاكس تعليمين والكلام ده كله محتاجين نعمل ايه في السيرف ده خلينا نشوف مع بعض دلوقتي تنسيقات اللي جوه السيرف هنشوفها انزف لاي كده مش هنعملها هنا في السي اس اس هادي الجزء الخاص بالسيرف بتاعنا اهو هقول له ديس بلاي فليكس بالشكل ده الحمد لله قبل ما اعمل اي حاجة اصلا وهقول له 30 او 40 بيكسل عشان نفصل بينهم بس من تحت بس
1:02:48 كده مش هعمل اي حاجة طيب لحد هنا هطبعا لازم نمشي جزء جزء عشان نشوف الدنيا تمشي معنا ازاي لحد هنا انت معندكش مشكلة لو روحنا هنا معندكش مشكلة في الموبايل بقى هنا احنا عايزين نعمل تغيير في السيرف ده عشان احنا نمشي كسم كسمه زي ما اتفقنا طيب هندخل على الماديا بتاع الموبايل ونشوف انت محتاج تعمل ايه في السيرف ده هقول له Add Media Max Width 767 بيكسل محتاج تعمل ايه انت هنا محتاج اخلي الطريقة بتاع عرض الفلكس تكون عمودي مش تكون بشكل ده يعني ال Direction يكون Column بدل Row هاجي هنا وقول له Flex Direction Column
1:03:34 الشكل ده. وتيكست أللاين سنتر بالمرة عشان يوسطهم لي. عظيم جدا جدا جدا. يبقى احنا على الموبايل هيبقى العناصر تحت بعض كده. وهنا هيكونوا جنب بعض وهو ده المطلوب إثباته بإذن الله. طيب حلو قوي الكلام ده وزي الفل ومفوش مشكلة. نيجي بقى للآيكون. نحتاجين بقى نزبط الآيكون بتاعتنا. اللي هي جوا السيرف دي. هادي الآيكون بتاعتنا. حسيت ان مستوى النستنج يعني وسع منك تقدر تلغي حاجة منه زي كده مفيش مشكلة. كده كده ما عندناش غير سيرف ديف واحد بس. ده انا بقولك لو حبيت يعني. عشان بس انا مش عايز حاجة تضايقك في يوم الايام يعني. طيب هنقول له هنا الكلور بتاعه. فار مين كالر. وهنقول له الويتس بتاعنا او بلاش الويتس. ممكن نستعمل فليكس بيسس.
1:04:22 ستين بيكسل ليست عملت مش استعملت عشان خاطر لما تروح على الموبايل يتعامل مع الجزء ده كطول وعرض هو ده اللي انا عايزه هو ده المطلوب اثباته يبقى طول وعرض ستين فيقدر يعمل لك الشكل العظيم ده طيب لحد دلوقتي طبعا لسه ما كملناش الجزء اللي بعده عشان تبدأ تشوف المساحة تتوزع ازاي محتاجين التكست بقى اللي بعده عندي انا هنا اي اللي هي الايكون اللي عال شمال وعندي التكست اللي هو فيه الهيدنج والباراجراف هتعمل في ايه؟ هقوله فليكس وان بس عشان ياخد باقي المساحة ويبدأ يسيب لي الستين بيكسل بتوع اللي انا عملهم دول عظيم لحد الوقت يه تمام وزي الفل ومعندناش مشكلة بعد التكست على طول محتاج الاتش سري والباراجراف اللي جوه نعمل فيهم شوية شوية هتلاحظ ان الاتش سري كده فيه زي مارجن محتاجين نلغيه خلينا نسايف
1:05:11 ونشوف قدي الاتش سري بتاعنا اهو محتاجين في الاتش سري ان احنا نلغي المارجن اللي فوق مرجن 0 من فوق عشان يوازي الايكون لانه كان نازل من اليمين 0 ومن تحت 20 او لو عايز تزود ما فيش مشكلة خالص ده بالنسبة للمرجن اللي في ال H3 خلينا نضيف المرجن على طول ونرجع نشوف هنعمل ايه في البراجراف هادي البراجراف بتاعنا البراجراف ممكن ان انت تغير اللون ل 3 ثلاثات زي ما عملناه او 3 اربعات زي ما تحب لو حابب اللون ما يبقاش واضح قوي او 3 ثبعات لو عايزوا يقوزي التانيين يعني ما فيش مشكلة خالص كده كان الالوان زي ما ادفعنا بتكون معاك والفونت ويت هنخليه تلتمية وده زي الموجود في الفوتوشوب بالمناسبة عشان لو حابب تطلع بالشكل بالمسطرة واللين هايت واحد وتمانية او واحد
1:06:00 وستة على حسب اللي انت شايفه واللي برضو بتكون معاك المعلومات دي كلها ايه دي البراجراف بتاعنا زبطنا الالوان وكله تمام وبعدك هنخش على الصورة الصورة بتاعتنا اهي محتاجين نعمل فيها كده حركة اللي انت شايف في التصميم دي بالبيفور والافتر كده بيعملوا زي عمود جنبها مفيش مشكلة خالص يعني مفيش حاجة تخوفنا عادي يعني جوه السيرف عندنا الديف الاصلي اللي احنا مسامينه امج ده الديف ده انا كل اللي انا هعمله فيه ان انا هقول له تيكست الان سنتر عشان اوسط الحاجات اللي جواه وبيوزيشن ريليتف عشان خاطر العناصر اللي عملها بالبيفور والافتر هعملها طبعا بالبوزيشن ابسلوت فلازم يكون البيفور وقادي الكونتنت فاضية شايفين نستنج ووسع مننا ازاي فممكن تقلل شوية
1:06:46 زي ما اتفقنا طيب اول حاجة انت محتاج تعمل بوكس كده بلون معين وتخليه يجي على اليمين بتاع الصورة والكلام ده كله ومحتاجين كمان الصورة نغير الويتس بتاعها شوية خلينا نغير الويتس بتاع الصورة الاول نقللها شوية الصورة اللي جوا الدف دي هخلي الويتس بتاعها مثلا متين بيكسل او متين واربعين او متين وستين هنجرب متين وستين دي الصورة بتاعتنا ومحتاجين ان احنا نبدأ نشوفها الـ before والـ after هنعمل في ايه؟ هذه الـ image بتاعتنا خلينا نضيف الـ content.image before تمام طبعا عظيم مش هيقبل اي حاجة لانه الـ image دي بره الـ serve اصلا فدي حاجة عظيمة جدا هذه الـ image بتاعتنا الصورة
1:07:34 صغرت و ايه دي البيفور بتاع الامج هنشوفها نابل فيه ايه البيفور اول حاجة احنا محتاجين نوزعه بالبوزيشن ابسلوت محتاجين الريت يكون زيرو لان الصورة عندنا البوكس اللي وراه على اليمين خالص اهو واللون ده بالمرة هنحتاجه دلوقتي اللون اللي هجيبه لنا ده ده بالمناسبة اللون ده موجود في كل حتة في التصميم فهنعتبره السكنداري كالر وهنطلع فوق خالص كده وبعد المين كالر هنقوله سكنداري كالر ده يا شباب السيكنداري كالر اللي هنستعمله وهنزل تحت خالص عشان خاطر نكمل ونشوف هنعمل ايه في البي فور والافتر اول حاجة خلينا نديله باكجراوند كالر وقادي الفار السيكنداري كالر بتاعنا ونبدأ نكمل هنا في المتصفح بقى الشغل اللي احنا عايزين نعمله اول
1:08:21 حاجة انا محتاج اخليه الواتس بتاعه مثلا 80 بيكسل ممكن نزودها شوية 80 دي حلو الواتس دي برضو 80 بيكسل نحتاج الهويت بتاعي يكون 100% وهنتعلم كده شوية حاجات نشوف ازاي نزود المساحة وممكن نديه له طوب برضو zero بشكل ده position absolute عظيم حلو قوي الكلام ده دلوقتي اول حاجة همحتاجين الـ right بتاعيكون 0 عشان يجع اليمين خالص كده تمام الـ height بتاعيه 100% على قد البوكس في حتة زيادة كده الصورة بتعملها محتاجين انه يزيد هنا ازياد بكتير فمحتاجين 100% دي نزود عليها نزود عليها مثلا 40 بيكسل ولا حاجة نزود عليها 100 بيكسل زي متحب ما فيش مشكلة فهنستخدم هنا خاصية الـ calc الـ height بتاعنا هنا 100% لأ هقول
1:09:08 له calc مية في المية زائد الميت بيكسل اللي انت عايز تزودها. عظيم. كده بقى عندك ميت بيكسل بس الطوب زيرو محتاجين بقى الطوب يطلع عشان يبقى فيه جزء فوق وجزء تحت فهنقوله الطوب سالب خمسين اللي هو خمسين فوق وخمسين تحت. اللي هي الميت بيكسل اللي انا مزودها زيادة دي. فهقوله طوب سالب خمسين بيكسل. بالشكل ده. تقدر طبعا تزود زي ما انت عايزه تناقص مفيش مشكلة. الواتس انا شايفه قليل شوية فممكن نزوده. خليه م زد اندكس سالب واحد عشان يرجع ورا بالشكل ده وكده الحمد لله عملنا المطلوب بالمسطرة خلينا نضيف الكلام ده هنا دلوقتي بالشكل ده ونقوله تمام وتفضل وكله تمام وزي الفل طيب دلوقتي محتاجين حاجة زريفة جدا ان الشاشات اللي هنا دي محتاجين نلغي منها الصورة دي شكلها
1:09:57 وحش هنا في الشاشة الوحدة كده فمحتاجين نتعلم ازاي نخفيها في ميديا معينة مثلا خلينا عشان نتارجت الصورة دي نديها كلاس معين ادي الصورة هسميها image مثلا نديها مثلا اي حاجة مشكلة بس كده نقدر نمسك منه العنصر في مادية معينة وهاجي هنا بقوله المادية اللي انت عايز تغير فيها الكلام ده اللي هي فين اللي هي بتاعها 1199 لو قبل ما ندخل في مرحلة الشاشات الكبيرة فهقوله 1199 بيكسل وحرف ال L ده مش عارفها بمين بس ما فيش مشكلة مش هنزعل حد مننا. وقادي الكلاص بتاعنا هنقول له ايه يا شباب. ديس بيلي نن. عشان الصورة بتاعتنا تختفي في الميديا دي. فهنا الصورة اختفت. اهي موجودة.
1:10:43 اختفت الميديا اللي بعدها. شايفين ال جريد وعظمته. بسهولة من غير تدخل منك. الكلامز عمالها تتقسم على حسب الميديا. وقادي شكل الموبايل كله تمام وبالمسطرة وزي الفل ما عندناش اي مشكلة خالص. الزهردة جميعا نشاء الله نعمل قسم البرتفوليو اللي هو بيكون فيه معرض الأعمال بتاعتك وهوريك قد ايه الحاجات الـ components اللي انت بتعملها قديها تفيدك في الحاجات اللي بعدها بسهولة وقديت تنسيقات تحتاج جدا ان انت تعملها بطريقة ديناميكية عشان تستعملها في كذا مكان وتحتاجش ان انت تعيد كل شوية الشغل بتاعك دلوقتي قسم البرتفوليو فيه 3 كاردز دول
1:11:29 وفيه زرار والله مش مشكلة نعمل الزرار بس احنا عايزين نوصل للفكرة وفيه الهيدنج وفيه نفس البرتجروند اللي احنا عملناها المفروض هنا فشايفين كمية التشعب واللي تلاقيها في الاقسام خليه نشوف هنعمل دلوقتي start portfolio بالشكل ده وend portfolio حواليك ان القسم بتاعنا ده شبه القسم اللي قبله بالزبط يعني شبه قسم السيرفز ده بالزبط خليه ناخد قسم السيرفز ده كابي زي ما هو كده ونضيفه هنا وهنغير بس class اللي هو services ده لclass اسمه portfolio بالشكل ده small ادي portfolio هنا content بس بدل بقى ال calls دي كلها هنحط 3 cards بالسور بتاعتهم خليني اوريك البنية النهائية ادي البنية النهائية هنا كلمة services هنغيرها
1:12:16 لكلمة portfolio بالشكل ده وهنا ال paragraph اللي تحته هنغيره كلمة if you do it right it will last forever بالشكل ده بس ده الكسم بتعلق البرتفليو فيه الكونتينر فيه الاسبيشيال هيدنج والباراجراف اللي بعده وفيه الكونتينت اللي انت هتحط فيها الكاردز بتاعتك تعال نبص على شكله قبل ما اعمل اي تنسيقات شايفين نفس القصة بالزبط وكل اللي انت عملته قبل كده موجود ومتاح معاك ان انت تستخدمه تاني والحمد لله نبدأ دلوقتي في التنسيقات بتاعتنا خلينا نقوله هنا ادي ستارد بورتفليو واند وهو قريك ان التنسيقات كمان هتلاقيها واحدة. اول حاجة البيدنج توب وبوتوم والبكجراوند كالر اللي انت كنت عاملهم هنا. اللي هما دول. دي. وهنا كمان كنت عاملها بالبكجراوند. اهم
1:13:02 نفسهم بالزبط الموجودين في الفيتشور. البيدنج توب وبوتوم. نكتب بس الكلاس الاول. بالشكل. هذه الكسمة طيب في حد فيكو لاحظ حاجة دلوقتي احنا عميين نكرر الـ padding top و bottom ده 60 بيكسل وثابت طب ليه ما نعملوش هذا variable ليه ما يكونش عندنا section padding ده variable عشان لو حبينا نتحكم في جميع الاقسام ما نروحش نعمل لكل واحد فيهم padding ويهو الكلام ده هكتب هنا مين او خلينا بلاش مين هو ما فيش secondary هو بس حاجة واحدة هكتب section padding section padding بيسوي كم 60 بيكسل بس ثابت خلاص هاجي بقى هنا الاقسام كلها اللي هي ليها بدل مكتب ستين. هقول له فار
1:13:49 وهكتب هنا بالشكل ده. بقى طبعا في ال top وفي ال bottom. وبقى طبعا مش محتاجة اقول لك موجود هنا. في وموجود كمان هنا. ايه تانية يا شباب عميين نستعمله كل شوية? اللون بتاع السكشن اللي هو ده موجود هنا وموجود تحته. طب ما تيجي نعمله هو كمان ونقول له هنا خليه ننسخه. ونقوله هنا ان احنا محتاجين كمان ال section background. هادي section background بيساوي اللون الزريف بتاعنا ده. ونبدأ اي قسم محتاج اللون ده نعمله في variable عشان لو رجع ناله حبينا نعدله يتعدل في جميع الاقسام طبعا. هنا مفيش في ال landing. هنا مفيش في الفيتر اللا فيه اهو. هادي وموجود كمان فين services مش موجود فيها ده اللون الابيض
1:14:35 اللي عادي. وموجود هنا طبعا ده. كده الحمد لله استعملنا المتغيرات بتاعتنا بشكل فعال وكله بقى تمام وبقاش عندنا اي مشكلة بازن الله. نيجي عند البرتفوليو وهنضيف كمان الجزء الجوار اللي هو اسمه بورتفوليو كونتنت ده. الشكل ده. وهنديره نفس خواص الجريد اللي احنا كل شوية عمالين نعملها بالزبط. نفس اللي عملناها من شوية لو تفتكروا. ديس بلي جريد والاوتو فيل مينيمام ماكس تلتمية بيكسل وان فراكشن. والجاب تلاتين والمارجن توب او ممكن نقلله شوية نخليه 80 زي القسم اللي فات بالزبط عشان يكون هنا في مسافة بين
1:15:21 زي ما عملنا هنا مسافة بين الـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ موجود في ايه يا شبابة بتاعها نشوف الكارد موجود فيه صورة وموجود فيه هيدنج وموجود فيه براجراف حاجة صورة وهيدنج وبراجراف ادي السور جبتلك ثلاث سور من جوجل اهم باسم بورتفوليو وان وطو وثري وكلام فاضي اي سور محتاجة اضفها وزي الفل ومش هتواجه اي مشاكل بازن الله تعالوا مع بعض نبني البنية بتاعتنا جوه الكارد عندنا الصورة اول حاجة هنقول له بورتفوليو وان ادي الصورة بتاعتنا بعد الصورة على طول محتاجين ده بنقول له مثلا وجوه وبعده براجراف هنكتب فيه مثلا الكلام اللي
1:16:07 هو كاتبه وبروجيكت هير وبعمال يعيده نفس الكلام. ادي براجراف برضو فيه تقريبا نفس الجملة جيبها من الفوتوشوب احيه. وطبعا مش محتاجة اقولك ان انت هتغير الكارد ده بس هتغير فيه الصورة اللي ليس الا. واحد اتنين تلاتة هنا هتقول له بورتفوليو 2 وهنا هتقول له بورتفوليو 3 كده بقى عندك التلات سوا المختلفين لكن الكلام واحد طبعا وهو عامل كده اصلا هنا في التصميم خلاني نتأكد تمام هو عامل كده فعلا حظيم لحد هنا كله تمام وهندخل على ال CSS عشان ننسك الشغل بتاعنا جوه ال بورتفوليو كونتنت دي محتاجين احنا نكتب الكارد هرجع تاني واقول لك لو حسيت ان النستنج كبر منك كده مفيش ادنى مشكلة ومعندكش
1:16:54 اي مشاكل عملت الحركة دي الكارد بتاعنا هنديله background color white لانه اصلا فيه background بلون فعايزين الكارد يكون متميز زي ما ان شايف كده باللون الابيض طيب عزي بعد الكارد عندنا الصورة اللي بعد الكارد على طول او الصورة الجوه الكارد هتعمل ايه في الصورة هقول له ان الماكسويتس بتاعها 100% عشو ما تطلعش برا المحتوى زي ما هي طلعت دلوقتي كده كده مش هتطلع برا الكارد زي ما انتم شايفين مش محتاج اقولك ان انت تجيب صور قد بعضها وسور كبيرة قد بعضها لما جيبت صور قد بعضها هتلاقي كل واحدة طالعه في حتة وهتضطرر تنصكم بcss وده مش صح الصح ان انت تجيب صور سليمة تناسب المحتوى طيب بعد كده خلصنا الصورة عندنا الانفو ديف هنعمل ايه في الانفو ديف هنديله بس با دينك 20
1:17:40 بيكسل علشان الكلام زي ما تشايفين ما يبقاش لازق في الـ Content بالشكل ده كده بقى فيه Badding وهمش عامل شكل كويس كده فضلنا حاكتين بس وليس إلا الـ H3 اللي جوه الـ Info والـ Paragraph اللي جوه الـ Info الـ H3 هنعمل فيه طرح هنعمل فيه بس Margin 0 وشكرا هنشيل منه الـ Badding عشان هنشيل منه عفواً الـ Margin عشان نتحكم انه الـ Badding هو ليغير الـ Hamish الـ Badding المعمول في الـ Content دي كله مش عايزين الهيدنج يجري شايفين ده البيدنج ده اللي اتحكم فيه بالعناصر تبدأ منين البراجراف يبدأ منين والهيدنج يبدأ منين وهكذا طبعا لسه فيه مارجن بينهم عشان المارجن كولابس اللي احنا تعلمناه في الكورس طيب بالنسبة للبراجراف نفس اللون اللي عاملين
1:18:27 نعمله كل شوية المفروض اسيبك تعمله دلوقتي لان احنا عاملين نكرره واللاين هايت اللي عاملين نعمله كل شوية هو انت ليه مستقصدني من بكتب لاين هايت واحد وستة او واحد وثمانية والمرجن من تحت بس نلغيه لانه في مرجن اصلا من تحت كده بقى عندنا الشكل المطلوب والحمد لله اهو لو ما عملناش المرجن من تحت هتلاقي في مسافة هنا اكبر من المسافة اللي هنا ودي حاجة شكلها بايخ طيب بالنسبة للرسبونسف يا عام ده جريت خلاص زبطنا الدنيا ادي عنصرين نعمل كده عنصر واحد نتجرب على الموبايل ادي الموبايل كله تمام وزي الفل تقدر في الموبايل تخليه تكست اللاين سنتر لو حابب مفيش مشكلة ومش حابب كده زي الفل
1:19:14 النهاردة جميع ان شاء الله هنعمل كسم الابوت كسم بسيط جدا وسهل وهنجرب نعمله بالفلكس عشان مش عايز الناس تحس انه كل حاجة ومتعملش حاجة بالفلكس ابدا او حرام مسلا او حاجة. كسم البرتفوليو والكسم اللي قبله جميع الاقسام تقريبا نفس الفكرة بالزبط بتاعة الابوت بس بتختلف في العناصر اللي جوا. هادي البرتفوليو هاخد منه نسخة وهواريك دلوقتي التعديلات اللي هنعمل عليها عشان هواريك ان كل اللي بنستخدمه بإذن الله هيساعدك بعدين. ادي الابوت هنا وهنا ابوت كونتنت ونبدأ نحزف الكونتنت اللي جواه الكاردز دي كلها مش عايزينها بالشكل ده. وده الشكل بتاعنا اهو. ادي الابوت هنغير بس الكلام المكتوب جوا. هنا هتكتب طبعا ابوت وهنا هتكتب جملة الموجودة في التصميم اللي هي اسمها less is more work بالشكل ده.
1:19:59 بس. القسم بتاعنا دلوقتي في حاجتين. حين نشوف دلوقتي ادي الابوت سيكشن اهو. القسم بتاعنا دلوقتي في حاجتين. في صورة على الشمال وفي اشكال حواليها كده. وفي على اليمين اتنين براجراف وبينهم اتش ار. بس خلص الموضوع. تعالوا مع بعض نقول له. ادي الديف بتاع الصورة. وادي الامج سورس بتاعتنا. جبنا صورة كده من جوجل تقدر تجيب اي صورة تعجبك. ادي الصورة اهي. الشكل بتاعها اهو. وبعدين على طول بعد الامج عندنا تكست. التاكست هيكون فيه بارا جراف تكتب فيه كلمة لوريم ودوستاب بيعملك الشكل اللي انت شايفو ده كله بعدين اتش ار بعدين بي تاني لوريم تاب خلاص خلص الموضوع زي ما نشايف كده دي البنية بتاعتنا قبل ما نعمل فيها اي تنسيقات نهائيا ندخل دلوقتي على تنسيقات css start
1:20:50 about و end about دلوقتي نستعمل نفس البادنج واللي انت عملته البادنج طوب والبادنج بطن بالشكل ده وهناخد معلومة جديدة دلوقتي ممكن ان انت تحتاجها لو فيه قسم بالاقسام زي القسم ده تحديدا فيه رسمة زي كده طلع برا وهتوصل لاخر القسم ويبقى شكل وحش وحابب ان انت تزود البادنج بطن في القسم ده او اي بادنج بس من غير ما تأثر على الوحيب اللي احنا نستخدمه في كل حتة ده بسيطة جدا هنعمل كالك ونحط البادنج الديناميك ده ونضيف عليه 60 بيكسل وخل ندخل على طول على ال about content ال about content هنعمل فيها ايه نعمل نفس اللي عملناها قبل كده بقى grid وكده لا اول
1:21:35 حاجة اقول له margin top عشان نوصل بين ال content وبين ال heading وبالمناسبة ده ممكن تعمله variable اللي هو ال badding اللي موجود
…
