‫ن‬

‫المرسلي سيدنا محمد ﷺ‬ ‫بسم هللا الرحمن الرحيم والصالة و السالم عل ر‬

‫أشف‬ ‫ي‬
‫ن‬
‫أجمعي‬ ‫وعل اهله وصحبه‬
‫ي‬
‫ن‬
CSS ‫ملخ ـ ـص لكل ما تم دراسته يف‬
‫ فقط قم بالنقر ع يل اسم الدرس للوصول اليه‬.. ‫هذه العناوين قابلة للنقر‬

Table of Contents

Introduction to the CSS Course Lesson #01

Your First Project and Syntax Lesson #02

Element Styling Lesson #03

Name Conventions And Rules Lesson #04

Background - Color_ Image_ Repeat Lesson #05

Background - Attachment_ Position_ Size Lesson #06

Padding Lesson #07

Margin Lesson #08

Border Lesson #09

Outline Lesson #10

Display Block, Inline, Inline-Block Lesson #11

Element Visibility And Use Cases Lesson #12

Grouping Multiple Selectors Lesson #13
Nesting Lesson #14
Dimensions - Width And Height (‫ )األبعاد‬Lesson #15
Overflow - Overflow-X And Overflow-Y Lesson #16
Text - Color And Shadow Lesson #17
Text - Alignment Lesson #18
Text - Decoration And Transform Lesson #19
Text – Spacing Lesson #20
Text - Overflow And Use Cases Lesson #21

Inheritance ‫ التوريث‬Lesson #22

Typography - Font Family Lesson #23

Typography - Font Size And CSS Units Lesson #24
Typography - Font Style And Variant And Weight Lesson #25

‫ر‬
Mouse Cursor ‫مؤش الماوس‬ Lesson #26
Float And Clear Lesson #27
Mastering The CSS Calculation Lesson #28

Opacity Lesson #29

Position Lesson #30

Z-Index Lesson #31

Lists Styling Lesson #32

Tables Styling Lesson #33

Pseudo Classes Lesson #34

Pseudo Elements - First Letter_ First Line_ Selection Lesson #35
Pseudo Elements - Before_ After_ Content Lesson#36
Pseudo Elements - Content And Trainings Lesson#37
Vendor Prefixes Lesson #38
Border Radius Lesson #39
Box Shadow And Examples Lesson #40
The Box Model And Box Sizing Lesson #41

Transition Lesson #42

Important Declaration And Use Cases Lesson #43
The Margin Collapse Lesson #44
CSS Variables And Trainings Lesson #45

Flex Box (Parent - Direction_ Wrap_ Flow) Lesson #46

Flex Box Parent - Justify Content Lesson #47
Flex Box Parent - Align Items Lesson #48
Flex Box Parent - Align Content Lesson #49
Flex Box Child - Grow_ Shrink_ Order Lesson #50
Flex Box Child - Flex Basis_ Flex Shorthand Lesson #51
Flex Box Child - Align Self_ Games_ Task lesson #52

Filters Lesson #54

Gradients Lesson #55
Pointer Events and Caret Color Lesson #56

Grid - Parent - Template Columns Lesson #57

Grid - Parent - Template Rows And Gap Lesson #58
Grid - Parent - Justify Content And Align Content Lesson #59
Grid - Parent - Complete Layout With Template Areas Lesson #60
Grid - Child - Grid Column And Grid Row Lesson #61
Grid - Child - Grid Area And Trainings Lesson #62
Grid - Min_ Max And Auto Fill Lesson #63
2D Transform – Scale Lesson #65
2D Transform – Rotate Lesson #66
2D Transform – Translate Lesson #67
2D Transform – Skew Lesson #68
2D Transform – Matrix Lesson #69
Transform – Origin (‫ )المنشأ‬- Lesson #70
3D Transform – Rotate Lesson #71
3D Transform - Translate_ Perspective_ Perspective Origin Lesson #72
3D Transform - Backface Visibility And Flip Product Lesson #73

Animation - Keyframes_ Name_ Duration Lesson #74

Animation - Iteration Count_ Timing Function_ Spinner Loading Lesson #75
Animation - Direction_ Fill Mode_ Play State_ Delay Lesson #76
Up And Down Loading Animation Training Lesson #77

CSS Selectors Reference Part 1 Lesson #78

CSS Selectors Reference Part 2 Lesson #79
CSS Selectors Reference Part 3 Lesson #80
CSS Selectors Reference Part 4 Lesson #81
CSS Selectors Reference Part 5 Lesson #82

Media Queries And Responsive Designs Intro Lesson #83

Media Queries And Responsive Designs Standards Lesson #84
Media Queries And Responsive Designs Practice Lesson #85

Create Your Framework Lesson #86

CSS Global Values Lesson #87
The End And How To Master HTML And CSS Lesson #88

♥️ ‫الخاتمة وشويه فضفضة‬

 ‫‪Introduction to the CSS Course Lesson #01‬‬
‫)‪At First Welcome! and Never Forget That (Always Search‬‬
‫عل ( ?‪ )Ctrl+‬او كتابة تعليقك‬ ‫ً‬
‫عل الكود ولفعل ذلك قم بالضغط ي‬
‫تنس كتابة التعليقات دائما ي‬
‫ي‬ ‫ال‬
‫داخل هذه العالمة ‪/*Your Comment*/‬‬
‫‪ Cascading Style Sheet.‬ترمز يال‪CSS --------> stands for‬‬
‫الرئيس هو إضافة التنسيقات والتصميمات لصفحة الويب‪ .‬حيث توفر الـ ‪ CSS‬خصائص اللون و الخطوط‪،‬‬
‫ي‬ ‫هدفها‬
‫ن‬
‫وتحسي المرونة‪،‬‬ ‫ومميات كتي‪ .‬تتيح ن‬
‫ميات ‪ CSS‬إمكانية الوصول إل المحتوى بشكل أفضل‪،‬‬ ‫ن‬ ‫والخلفية‪ ،‬والحدود‬
‫والتحكم‪ ،‬باإلضافة إل مواصفات خصائص العرض‪.‬‬

‫)‪There are many levels of CSS such as (CSS1 – CSS2 – CSS3‬‬

‫‪Difference between CSS and CSS3 just press to read‬‬

‫!?‪Why I Need to Learn CSS‬‬ ‫ليه اتعلم ‪ CSS‬؟!‬

‫‪• Web Design‬‬
‫‪• UI Developer‬‬
‫‪• Front - End Developer‬‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
Your First Project and Syntax Lesson #02
Using link - href Element <-------> HTML ‫ داخل ملف الـ‬CSS ‫الستدعاء‬
‫ملف الـ‬

‫ئ‬ ‫ن‬
F12 ‫ او‬inspect ‫خاط او ملف باسم مختلف يمكنك استخدام ال‬ ‫يف حالة استدعاء ملف‬
‫ن‬
‫هتالف انه يف خطأ موجود‬
‫ي‬ ‫وبعدها‬

Element Styling Lesson #03

Syntax Example
Selector { p{
Property: value; color: red;
PropertyTwo: value; font-size: 40px;
} }

{} --------> curly braces

‫ن‬
‫الل بتفصل التنسيقات عن بعضها و بتسمحلك‬
‫ه ي‬ ‫متنساش الفصلة المنقوطة يف اخر كل خاصية ألنها ي‬
Selector ‫تضيف خصائص جديدة لنفس الـ‬
Selector { semicolon sing
property: value;
property Two: value;
}
To style a class using "." before the name – ‫ أستخدم نقطة قبل االسم‬Class ‫لتنسيق‬
To style an id using # before the name – ‫ قبل االسم‬# ‫ أستخدم‬ID ‫لتنسيق‬
To style an element using the name of element – ‫لتنسيق عنرص استخدم اسمه فقط‬
 There are many types of styling - ‫يوجد الكثي من أنواع التنسيقات‬

1- External style by using link – href

‫ن‬
‫ يف ملف خارج الصفحة‬CSS ‫اكواد‬
<! -- External Style -->
<link rel="stylesheet" href="Css/master.css">

2- Internal style by using style tag inside HTML File

‫ن‬
HTML ‫ يف تاج داخل ملف صفحة ال‬CSS ‫اكواد‬
<style>
.three{
font-size: 40px;
color: green
}
</style>

3- inline style
‫ن‬
‫ يف سطر الكود نفسه‬CSS ‫اكواد تنسيق‬
<p style="color: purple;">This is paragraph</p>

‫ن‬
♥️‫تحفيية‬ ‫️♥عبارات‬

By: Amr Elsayed

 Name Conventions And Rules Lesson #04
Rules:
1- You can’t start your identifier with a number (123..)
2- you can start it by using “Underscore_” or “hyphen –”
but the best practices is using “hyphen –”
3- you can use a number in The end of the identifier name or in the middle
Name convention:

‫ن‬
CSS ‫ يف الـ‬identifier ‫أفضل طريقة لكتابة الـ‬
The best way to write the identifier in Css like that:
user-test {
property: value;
} ‫قم بالضغط‬

‫ يتبع المعايي السليمة‬CSS Code ‫طريقة كتابة‬

♥️ ‫اذكر هللا‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫ن‬
‫العالمي‬ ‫ينبغ لجالل وجهك ولعظيم سلطانك يا رب‬‫كثيا مبارًكا فيه كما ن‬ ً
ً ‫حمدا‬
ً ‫طيبا‬ ‫اللهم لك الحمد‬
‫ي‬
‫عل نبينا محمد ﷺ‬ ّ
‫اللهم صل وسلم وزد وبارك ي‬

Never Forget That (Always Search)

By: Amr Elsayed
 Background - Color_ Image_ Repeat Lesson #05
1- Background - Color
1- Normal background ------> Color name

2- RGB Function
RGB --------> Red, Green, Blue, Decimal

A = Alpha Channel ---------> Transparency – ‫الشفافية‬

 ‫اقص درجه لكل لون من الـ ‪ 3‬الوان بتكون‬
‫ي‬ ‫خاصية الـ ‪ RGB‬بتقبل انك تغي كثافة كل لون حيث ان‬
‫ن‬
‫كثافته من ‪ 0‬لحد ‪ ... 255‬يف حالة وضع كل ارقام خاصية ‪ RGB‬بأصفار يتم تلوين‬
‫ن‬
‫وف حالة وضع جميع األرقام ب ‪ 255‬يتم تلوينها باللون األبيض‬
‫الـ ‪ background – color‬باللون األسود ي‬

‫‪3- Hex Code‬‬

‫‪Start from 0 and End to FF‬‬
‫ن‬
‫حروف ‪FF‬‬
‫ي‬ ‫وينته عند‬
‫ي‬ ‫يبدأ من الصفر‬
‫‪For Example,‬‬
‫اذا اردت اللون االحمر – ‪If we need to use Red Color‬‬

‫ن‬
‫األخرص – ‪If we need to use Green Color‬‬ ‫اذا اردت اللون‬

‫اذا اردت اللون االزرق – ‪If we need to use Blue Color‬‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
2- Background – image
Background image --------> Setting an image as a background in your web page
‫ن‬ ‫ن‬
‫تعي صورة كخلفية يف صفحة الويب‬

url -------> It is used to select the location of the image - ‫يستخدم الختيار مكان الصورة‬

3- Background -Repeat
Background-repeat -------> uses to repeat the image that you select
‫الت تم اختيارها‬
‫تستخدم لتكرار الصورة ي‬
It has default value = repeat ‫تدع‬
‫ي‬ ‫لديها قيمة افياضه‬

By: Amr Elsayed

 If we need to no repeat the image like the previous screenshot
‫إذا كنا بحاجة إل عدم تكرار الصورة مثل لقطة الشاشة السابقة‬

If we need to repeat the image horizontally – ‫ال تكرار الصورة افقيا‬

‫اذا احتاجنا ي‬

If we need to repeat the image vertically – ‫ال تكرار الصورة عموديا‬

‫اذا احتاجنا ي‬

By: Amr Elsayed

 ‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫َ ا ُ َ َّ ا‬ ‫ً‬ ‫ّ‬ ‫ًْ‬ ‫ً‬ ‫ً‬ ‫َُ َ‬ ‫َّ َّ نّ‬
‫ورزقا طيبا‪ ،‬وعمًل متقبًل‪.‬‬ ‫إن أسألك ِعلما نافعا‪ِ ،‬‬ ‫اللهم ي‬
‫َ َ َ‬ ‫ْ‬ ‫ْ َ َ ُ ْ َ َ ُ‬ ‫َّ ُ َّ َ نّ َ َ‬
‫اللهم أ ِع يت عل ِذك ِرك‪ ،‬وشك ِرك‪ ،‬وحس ِن ِعباد ِتك‪.‬‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬ ‫اللهم ّ‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬

‫‪Background - Attachment_ Position_ Size Lesson #06‬‬
‫‪1- Background – Attachment‬‬
‫ن‬ ‫ن‬
‫الل يف الخلفية تتحرك معاك او تفضل ثابته يف مكانها‬
‫الغرض من الخاصية دي تحديد ناذا كنت حابب الصورة ي‬
‫مهما نزلت تحت او طلعت فوق يف الصفحة‬

‫وه القيمة االفياضية للخاصية ‪ ..‬و دي معناها ان الباك جراوند بتفضل ثابته مكانها‬
‫القيمة ‪ Scroll‬ي‬
‫طول ما انت بتعمل ‪scroll‬‬

‫ن‬
‫يعت الباك جراوند بتتحرك معاك طول ما انت بتعمل ‪scroll‬‬
‫القيمة ‪ Fixed‬ي‬

‫‪2- Background – Position‬‬

‫ن‬ ‫ن‬
‫الغرض من الخاصية دي تحريك الخلفية يف أي مكان يف الصفحة‬
‫الل ع الشمال مكون من‬
‫نعتي ان الصورة او شاشتك عبارة عن ‪ 3‬اعمده و ‪ 3‬صفوف باعتبار ان العمود ي‬
‫خلينا ر‬
‫ن ُ‬ ‫ن‬ ‫ن ُ‬
‫الل يف النص مكون من (فوق ‪ -‬يف النص ‪ -‬تحت) وكذلك العمود‬ ‫ي‬ ‫العمود‬ ‫وكذلك‬ ‫)‬‫تحت‬ ‫‪-‬‬ ‫ص‬‫الن‬ ‫(فوق ‪ -‬يف‬
‫ن‬ ‫ن ُ‬ ‫ن‬
‫معت كدا ان عندي ‪ 9‬اتجاهات وهيتم توضيحهم ف الـ ‪ Screen‬التالية‪:‬‬
‫اليمي مكون من (فوق ‪ -‬يف النص ‪ -‬تحت) ي‬
 ‫ن‬
‫ممكن نستخدم وحدات القياس زي ال ‪ pixel‬و النسبة المئوية يف تحريك الصورة‬

‫ن‬
‫الل مكتوبه يف األول دي معناها انك‬
‫الل فوق الـ ‪ screen‬الـ ‪ 100px‬ي‬
‫خل بالك بالنسبة للكود ي‬
‫ي‬
‫عل الشمال اما الـ ‪ 150px‬فمعناها انك بتحرك من فوق‬
‫كدا بتحرك من ي‬
‫اع انك بتحرك بنسبه من فوق‬
‫ممكن كمان تحرك بالنسبة المئوية وبالـ ‪ cm‬و بكذا طريقة بس تر ي‬
‫ونسبه من الجوانب‬

‫‪By: Amr Elsayed‬‬

‫‪3- Background – Size‬‬
‫‪used to Specify the size of a background-image‬‬ ‫تستخدم لتحديد حجم صورة الخلفية ‪--‬‬
‫تدع ‪It has default value = Auto‬‬
‫ي‬ ‫لديها قيمة افياضيه‬

‫ن‬
‫اف‬
‫تغط المحتوي الخاص بيك بالكامل بشكل احي ي‬
‫ي‬ ‫ممكن تستخدم الخاصية دي ف إنك‬

‫بتمل‬
‫ي‬ ‫ممكن تستخدم الخاصية دي عشان تعمل ‪ resize‬للـ ‪ background‬وتكون ممتدة معاك او ‪stretch‬‬
‫المحتوي بالكامل وبتفضل باينه مش بيتقطع منها حاجة‬

‫ن‬
‫هنا برضو ممكن تتحكم يف حجم الصورة بالـ ‪ px‬او النسبة المئوية وهكذا‬

‫اذكر هللا ️♥‬

‫ن‬
‫الظالمي‬ ‫ال إله اال انت سبحانك إ ن ين كنت من‬
‫‪By: Amr Elsayed‬‬
 ‫‪Padding Lesson #07‬‬
‫ُ‬ ‫ن‬ ‫ُ‬ ‫ن‬
‫عل كل الخواص الخاصة‬ ‫يف الـ ‪ CSS‬يوجد خواص مخترصة‪ ،‬فيما معناه ان يف خاصيه مخترصة بتحتوي ي‬
‫يعت لو كتبت كود للـ ‪ background‬فقط بدون ما احدد جنبه لما اروح للـ ‪Inspect‬‬‫ن‬
‫بيها كلها ‪ ..‬ي‬
‫هتالف كل الخواص الخاصة بالخاصية دي متجمعة سوا‬ ‫ي‬ ‫واروح للخاصية واضغط ع السهل المشار إليه‬

‫ه ‪ 15px‬بتكون موحدة لجميع الجهات فوق وتحت‬ ‫نف الحالة دي ن‬

‫الل ي‬
‫معت الكالم انه القيمة ي‬
‫ي‬ ‫ي‬
‫ن‬
‫يمي وشمال‬
‫‪/*Top Right bottom left */‬‬
‫‪padding: 10px 20px 30px‬‬ ‫;‪50px‬‬

‫ال األعل ‪ Top -‬و‬ ‫نف حالة ال ‪ padding‬ر‬

‫بمس مع عقارب الساعة بحيث ان الساعة ‪ 12‬تشي ي‬
‫ي‬ ‫ي‬
‫ن‬
‫ال األسفل – ‪ Bottom‬والساعة ‪ 9‬تشي ي‬
‫ال‬ ‫ال اليمي – ‪ Right‬والساعة ‪ 6‬تشي ي‬
‫الساعة ‪ 3‬تشي ي‬
‫اليسار – ‪Left‬‬
‫‪By: Amr Elsayed‬‬
 ‫;‪padding-top: 10px‬‬
‫;‪padding-left: 50px‬‬

‫ن‬
‫كدا انا محدد ال ‪ padding‬يتنفذ يف أي اتجاه تحديدا‬
‫ال ‪ padding‬ال يقبل قيمة ‪ Negative‬او سالبة‬

‫‪Margin Lesson #08‬‬

‫ال ‪ margin‬بيقبل قيمة سالبة‬
‫بتخليت اقدر اتحكم ن يف التصميم بشكل رائع‪.‬‬
‫ي‬
‫ن‬ ‫الل‬ ‫ن‬
‫مت النسبة المئوية ي‬
‫ال ‪ margin‬بيقبل ي‬
‫{ ‪.div-one‬‬
‫;‪padding: 10px‬‬
‫;‪width: 70%‬‬
‫;‪margin-left: auto‬‬
‫;‪margin-right: auto‬‬
‫}‬

‫ن‬
‫يف حالة لو اديت الـ ‪ div‬العنرص بتاعك ‪ Width‬محدد وليكن مثال ‪ 70%‬من محتوي الصفحة بتاعتك‬
‫ن‬
‫تخل الـ ‪margin‬‬
‫ي‬ ‫الل عليك انك‬
‫الل فوق دي كل ي‬ ‫توسطنه كدا وتخليه يف النص زي الصورة ي‬ ‫وحبيت‬
‫ن‬
‫وف كل األحوال لو أصال محطتش القيمة ‪ auto‬انت بتشوف الـ ‪ Width‬بتاعك قيمته‬ ‫قيمته ‪ auto‬ي‬
‫ن‬
‫بمعت لو‬ ‫قد أي وبتبدأ تدي الـ ‪ margin‬بتاعك من الشمال نصف القيمة الباقية من قيمة الـ ‪width‬‬
‫ي‬
‫الـ ‪ Width‬مثال ‪ 70%‬اذا الـ ‪ margin-left‬المفروض تاخد ‪ %15‬عشان الـ ‪ margin-right‬تاخد ‪%15‬‬
‫ن‬
‫يمي ‪ %15 +‬شمال( = ‪%100‬‬ ‫بحيث يكون) ‪%15 ) + (%70‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Border Lesson #09‬‬
‫ن‬
‫مهمي جدا المفروض تفهمهم قبل كتابة الكود‬ ‫الـ ‪ border‬ليه ‪ 3‬حاجات‬
‫‪ -3‬نوع الـ ‪border‬‬ ‫‪ -2‬لون الـ ‪border‬‬ ‫‪ -1‬حجم الـ ‪border‬‬
‫‪ -1‬حجم الـ ـ ‪ -- border‬الـ ـ ـ ـ ‪ property‬بتاعته ‪border-width‬‬
‫‪ -2‬ل ـ ـ ـ ــون الـ ـ ـ ‪ -- border‬ال ـ ـ ـ ـ ‪ property‬بــتاعتـ ــه ‪border-color‬‬
‫‪ -3‬ن ـ ـ ـ ـ ـ ــوع الـ ـ ـ ‪ -- border‬ال ـ ـ ـ ‪ property‬ب ــتاعتـ ــه ‪border-style‬‬
‫{ ‪.div-one‬‬
‫;‪padding: 10px‬‬
‫;‪width: 70%‬‬
‫;‪margin: auto‬‬
‫;‪border-width: 10px‬‬
‫;‪border-color: red‬‬
‫;‪border-style:solid‬‬
‫}‬

‫خل بالك ان كل قيمة سواء كانت الحجم او اللون او النوع بيكون ليها اربــع قيم منسدلة من القيمة االم‬
‫ي‬
‫ن‬
‫تقدر تتحكم فيها زي ما هو موضح يف الصورة كدا‬

‫‪By: Amr Elsayed‬‬

Never Forget That (Always Search)
By: Amr Elsayed
 ‫ن‬ ‫ن‬
‫يف كود مخترص للـ ‪ border‬تقدر تكتب فيه الحجم والنوع واللون يف سطر واحد‬
‫;‪border: 10px solid red‬‬

‫نف حركة معينة لو اتعملت الكود يبوظ منك وه انك تضيف قيم ن‬
‫تي زي ‪ 20px‬جنب الـ ‪10px‬‬ ‫ي‬ ‫ي‬
‫;‪border: 10px 20px solid red‬‬

‫)‪Never Forget That (Always Search‬‬

‫‪Outline Lesson#10‬‬
‫ن‬
‫الل ملهاش أهمية اوي ودا نظرا ألنه مش داخل يف تكوين العنرص‬
‫هو ممكن يتصنف من الخصائص ي‬
‫ن‬
‫األصل وال هو بقوة الـ ‪ border‬مثال ولذلك مش هطول يف الكتابة وهيكون الـ ‪ Syntax‬بتاعه بس‬
‫ي‬
‫الل موجود‬‫باختصار ي‬
‫;‪outline: 10px solid blue‬‬

‫حيث ان اللون األزرق‬

‫الل بيشي للـ ‪Outline‬‬
‫هو ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫ر‬ ‫ر‬
‫ال اله اال هللا وحده ال شيك له ‪ ..‬له الملك وله الحمد وهو عل كل ي‬
‫شء قدير‬
‫الح القيوم واتوب اليه‬
‫استغفروا هللا العظيم الذي ال إله اال هو ي‬
‫عل نبينا محمد ﷺ‬ ‫ّ‬
‫اللهم صل وسلم وزد وبارك ي‬
‫العل العظيم‬‫ي‬ ‫ال حول وال قوة اال باهلل‬
‫ن‬ ‫ال إله اال انت سبحانك ن‬
‫الظالمي‬ ‫ان كنت من‬ ‫ي‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫‪Display Block, Inline, Inline-Block Lesson#11‬‬
‫ه المسؤولة عن تغيي طريقة عرض العنرص لو عندك عنرص ‪ inline‬ممكن تخليه‬‫خاصية الـ ‪ display‬ي‬
‫‪ Block‬والعكس او ‪Inline-Block‬‬

‫‪Block‬‬
‫‪ -‬بياخد الـ ‪ full-width‬لو لم يتم تحديد ‪width‬‬
‫تيح جنبه‬ ‫ن‬
‫هتيح تحته عشان يمنعها ر ي‬
‫ر ي‬ ‫الل‬
‫‪ -‬بيعمل خط فاصل بينه وبي العنارص ي‬
‫ن‬
‫بمعت انه بينفذ أي أمر ليهم‬ ‫‪ -‬بيحيم الـ ‪ - padding‬و الـ ‪ - margin‬و الـ ‪ - Width‬و الـ ‪height‬‬
‫ي‬
‫‪Inline‬‬
‫ال يحيم الـ ‪ Width‬و الـ ‪Height‬‬ ‫‪-‬‬
‫يعت أي عنرص هيح جنب ن‬
‫ن‬ ‫ن‬
‫التان‬
‫ي‬ ‫ر ي‬ ‫الل تحته ‪ ..‬ي‬
‫ال يضيف خط فاصل بينه وبي العنرص ي‬ ‫‪-‬‬
‫ن‬
‫اليمي و الشمال فقط[‬ ‫بيحيم الـ ‪ padding‬و الـ ‪] margin‬من‬ ‫‪-‬‬
‫بيسمح بوجود أي عنرص قبله وبعده‬ ‫‪-‬‬

‫‪Inline-Block‬‬
‫ن‬
‫بمعت انه بينفذ أي أمر ليهم‬ ‫‪ -‬بيحيم الـ ‪ - padding‬و الـ ‪ - margin‬و الـ ‪ - Width‬و الـ ‪height‬‬
‫ي‬
‫‪ -‬بيسمح بوجود أي عنرص قبله وبعده‬

‫‪Syntax‬‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫سبحان هللا وبحمده سبحان هللا العظيم‬
‫العل العظيم‬
‫ي‬ ‫أكي وال حول وال قوه اال باهلل‬
‫سبحان هللا والحمد هلل وال إله اال هللا وهللا ر‬

‫‪By: Amr Elsayed‬‬

 ‫‪Element Visibility And Use Cases Lesson #12‬‬
‫‪HTML‬‬ ‫‪CSS‬‬

‫الـ ـ ‪ Display none‬معناها ان العنرص ميبقاش موجود اخفية خالص من الصفحة‬

‫ن‬ ‫ن‬
‫اض‬ ‫وف حالة وجود الـ ‪ Display none‬بيتم شطب الـ ‪ Display Block‬ي‬
‫الل بيكون موجود افي ي‬ ‫ي‬
‫من الـ ‪user agent stylesheet‬‬

‫تستخدم هذه الخاصية ع سبيل المثال لو مثال عندي معلومات كتي عايز اخفيها واديها اوامر‬
‫ن‬
‫تان تختف ن‬
‫يعت كأنك‬ ‫بالجافاسكريبت لما اليورز يدوس عليها تبدأ تعرض المعلومات الل جوها ولما يدوس ن‬
‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬
‫تان زي برضو مثال السؤال وجاوب‬ ‫ن‬
‫بتفتح كدا المعلومات دي او تعملها توسعة تشوفها وبعدين تخفيها ي‬
‫يخف اإلجابة وهكذا‬ ‫معي يظهرلك إجابة السؤال تدوس عل نفس الزر ن‬
‫ن‬ ‫تدوس ع زر‬
‫ي‬ ‫ي‬
‫‪HTML‬‬ ‫‪CSS‬‬

‫ن‬
‫اختف تماما من الـ ‪work flow‬‬ ‫الـ ‪ div‬بتاع ‪ First‬لما اديته القيمة ‪display: none‬‬
‫ي‬
 ‫ولكن‬
‫ن‬ ‫ن‬ ‫ن‬
‫بيختف برضو ولكن بيحجز مكانه يف الـ ‪ work flow‬كأنك‬
‫ي‬ ‫يف حالة خاصية الـ ‪ visibility‬العنرص‬
‫ن‬
‫طيت العنرص بس هو لسه حاجز مكانه برضو يف الصفحة‬

‫‪CSS‬‬

‫ن‬ ‫ن‬ ‫ن‬

‫مختف لكن كمان حاجز مكانة يف الصفحة‬
‫ي‬ ‫‪first‬‬ ‫ـ‬‫ال‬ ‫عنرص‬ ‫األصل‬ ‫ف‬
‫ي‬

‫️♥راقت يل️♥‬

‫‪By: Amr Elsayed‬‬

 ‫‪Grouping Multiple Selectors Lesson #13‬‬
‫ن‬
‫باختصار شديد لو فيه مجموعة من ال ‪ Classes‬او ال ‪ Elements‬مشيكه مع بعض يف نفس‬
‫ن‬
‫الخواص زي ال ‪ background-color‬او ال ‪ padding‬ممكن تجمعهم كلهم يف ‪ selector‬واحد‬
‫ه دي " ‪" ,‬‬
‫الل ي‬
‫مع بعض وتفصل بينهم بعالمة ال ‪ coma sign‬ي‬
‫‪HTML‬‬ ‫‪CSS‬‬

‫ن‬ ‫ن‬
‫يف المثال دا خصوصا يف اخر جزء هتالحظ انه‬
‫تم تجميع ال ‪ Classes‬كلها جنب بعض‬
‫والفصل بينهم بعالمه "‪ ",‬وبعدين‬
‫اديتهم كلهم نفس الخصائص‬
‫الل اشيكوا فيها سوا‬
‫ي‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 Nesting Lesson #14
‫ن ن‬
‫يعت يف‬
‫ ي‬CSS ‫خالل االب بتاعة رلتنسيقه بـ‬ ‫الداخل من‬
‫ي‬ ‫ عنرص داخل عنرص و بيتم اختيار العنرص‬.. ‫ه باختصار شديد‬ ‫ي‬
‫ن‬
HTML ‫ داخل كود الـ‬p ‫ يف حالة وجود اكي من‬p ‫ و كمان داخله‬h2 ‫ العنرص االب بداخله ابن‬Div ‫التال هتالحظ ان الـ‬
‫ي‬ ‫المثال‬
CSS ‫ وبعدين ابدأ تنسيقه بـ‬p ‫الل هو‬
‫الل جواه ي‬
‫ وبحدد االبن ي‬div ‫الل هو الـ‬
‫بختار العنرص االب ي‬
) ‫( تم اصطياد العنرص عن طريق االب الخاص بيه‬
HTML
<div>
<h2>Title</h2>
<p>Paragraph Inside Div</p>
</div>
<p> Paragraph Outside Div</p>
CSS
div p {
color: red;
background-color: #eee;
}

‫ن‬ ‫ن‬
‫الل انا عايزو من خالل االب بتاعه‬
‫ي‬ p ‫ال‬ ‫بحدد‬ ‫برضو‬ class ‫ال‬ ‫بنفس‬ p ‫من‬ ‫اكي‬ ‫ف‬
‫ي‬ ‫لو‬ ‫حالة‬ ‫ف‬
‫ي‬
HTML
<div>
<h2>Title</h2>
<p>Paragraph Inside Div</p>
<p class="special">Paragraph Inside Div With Class</p>
</div>
<p class="Special"> Paragraph Outside Div With Class</p>

With class
special
CSS
div .special {
color: red;
background-color: #eee;
}

Never Forget That (Always Search)

By: Amr Elsayed
‫‪) Lesson #15‬األبعاد( ‪Dimensions - Width And Height‬‬
‫‪HTML‬‬ ‫‪CSS‬‬

‫ن‬ ‫ن‬
‫أكي عرض محطوط للكالم‬ ‫يعت اقل عرض محطوط للكالم و الـ ‪ max-width‬ي‬
‫يعت ر‬ ‫‪ -‬الـ ‪ min-width‬ي‬

‫طيب دا معناه أي ؟‬
‫‪ -‬معناه انه لو فرضنا ان الـ ‪ min-width‬دا ‪ 300px‬و فرضنا ان الـ ‪ max-width‬دا ‪ 400px‬طول ما الكالم‬
‫ً‬ ‫معي محطوط فيه‪ ،‬ولكن لما يبدأ يزيد ن‬ ‫ن‬
‫ميدش اعتباطا كدا‬ ‫بتاعك اقل من او يساوي الـ ‪ 300px‬هو ليه عرض‬
‫ن‬
‫معي ثابت بيبدأ‬ ‫‪ ..‬ال يزيد لحد ‪ 400px‬كأقص تقدير ولو الكالم زاد اكي العرض برضو يفضل ليه ليميت‬
‫ن‬ ‫ن‬
‫إضاف يبدأ يف سطر جديد بدون ما‬‫ي‬ ‫بينته عند ‪ 400px‬وال يزيد عنه واي كالم‬
‫ي‬ ‫من ‪ 300px‬و ال يقل عنه و‬
‫يعدي ال ‪400px‬‬
‫ن‬
‫طيب يف حالة انك محددتش الـ ‪max-width‬‬
‫هيح عند الـ ‪ 300px‬وتكون أموره تمام و أول ما يبدأ يزيد‬
‫‪ -‬دا معناه ان اقل عرض لو فرضنا انه ‪ 300px‬ر ي‬
‫ن‬
‫معي‬ ‫المحتوي ن يف الكالم هيبدأ العرض يتمدد معاه ويزيد اكي وكل دا عشان انت محددتش ‪limit‬‬
‫او ‪ break point‬يقف عنده العرض‬
‫ن‬ ‫ن‬ ‫ن‬
‫معي يقف‬ ‫والممي يف الـ ‪ max-height‬انك بتعمل ‪ limit‬لطول‬ ‫عل الـ ‪height‬‬
‫‪ -‬نفس الكالم دا بالظبط ينطبق ي‬
‫الكالم عنده‬
‫ن‬ ‫ن‬
‫تخل العنرص ‪ block‬زي ما هو‪،‬‬ ‫ي‬ ‫‪ -‬يف خاصية عظيمة جدا يف الـ ‪ Width‬اسمها ‪ fit-content‬بتتيح ليك انك‬
‫بالملل ع الكالم المكتوب‬
‫ي‬ ‫ولكن ابعاده مظبوطة‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫ن‬
‫الحارص ه ر‬ ‫ن‬
‫مؤش لمستقبلك القريب‬ ‫ي‬ ‫الوقت‬ ‫ف‬
‫افعالك ي‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫عل نبينا محمد ﷺ‬ ‫ّ‬
‫اللهم صل وسلم وزد وبارك ي‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫ن‬ ‫ال اله اال انت سبحانك ن‬
‫الظالمي‬ ‫ان كنت من‬‫ي‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Overflow - Overflow-X And Overflow-Y Lesson #16‬‬
‫ببساطة شديده الـ ‪ overflow‬هو الجزء الزيادة عن المحتوي الجزء الزايد جدا عن المحتوي‬

‫الل قدامك دا‬

‫بالظبط زي الشكل ي‬
‫الل زايد تحت‬
‫هو خروج الـ ‪ content‬نفسه بشكل زايد زي الكالم ي‬
‫الـ ‪ Background‬دا ‪ ..‬هو دا المقصود بيه الـ ‪overflow‬‬
‫ه ‪visible‬‬
‫القيمة االفياضية لخاصية الـ ‪ overflow‬ي‬

‫طيب نف حالة نان عايز ن‬

‫اخف الكالم الزايد تحت دا اعمل أي ؟‬
‫ي‬ ‫ي‬ ‫ي‬
‫هخل قيمة الـ ‪ overflow‬دي ‪hidden‬‬ ‫ي‬

‫ن‬
‫يف كمان قيمة اسمها ‪ scroll‬ممكن احطها لخاصية الـ ‪ overflow‬الغرض منها انها تعمل ‪ scroll‬للـ ‪content‬‬
‫ن‬
‫الل كنت محدده‬‫يف حالة لو كان زايد عن الطول او الـ ‪ height‬ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫يف كمان قيمة اسمها ‪ Auto‬ممكن احطها لخاصية الـ ‪ .. overflow‬الغرض منها انها تعمل ‪ scrolling‬للـ ‪content‬‬
‫ن‬ ‫ن‬ ‫ن‬
‫ويخف الـ ‪ scrolling‬يف حالة لو كان‬
‫ي‬ ‫الل كنت محدده ‪..‬‬
‫يف حالة لو كان زايد عن الطول او الـ ‪ height‬ي‬
‫الل كنت محدده‬
‫الـ ‪ content‬اقل من الـ ‪ height‬ي‬

‫ن‬ ‫ن‬
‫الل محدده‬
‫يف حالة لو الكالم ازيد من الـ ‪ height‬ي‬ ‫الل محدده‬
‫يف حالة لو الكالم اقل من الـ ‪ height‬ي‬
‫بيعمل ‪scrolling‬‬ ‫بيلغ الـ ‪scrolling‬‬‫ن‬
‫ي‬

‫ن يف قيمة اسمها ‪ overflow-x: hidden‬هدفها تعمل ‪ scrolling‬للـ ‪ content‬بالطول او بشكل عمودي‬

‫أفف‬
‫وقيمة اسمها ‪ overflow-y: hidden‬هدفها تعمل ‪ scrolling‬للـ ‪ content‬بالعرض او بشكل ي‬

‫‪By: Amr Elsayed‬‬

‫‪Text - Color And Shadow Lesson #17‬‬
‫يقبل أربعة قيم – ‪Syntax -------> accepts four values‬‬
‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪4‬‬
‫‪(H-Shadow horizontal), (V-shadow Vertical), Blur, Color‬‬
‫‪HTML‬‬ ‫‪CSS‬‬

‫ن‬
‫الل يف الـ ‪ text-shadow‬كل ما الظل يتغي معاك ومدي وضوحه يتغي‬
‫‪ -‬كل ما تزود النسب ي‬
‫ن‬
‫‪ -‬الـ ‪ text-shadow‬القيم بتاعته بتقبل ارقام سالبة عادي بتتحكم يف الظل يتحرك‬
‫ن‬
‫يمي او شمال او فوق او تحت وهكذا‬

‫ن‬ ‫ن‬
‫‪ -‬تقدر تتحكم يف اللون نفسه وتتحكم يف الشفافية الخاصة بيه‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬
‫ال من خي فقي‬
‫ان لما انزلت ي‬‫رن ي‬‫واكي ‪ ..‬ر ي‬
‫سبحان هللا والحمد هلل وال اله اال هللا وهللا ر‬
‫ُ‬ ‫نّ‬
‫أعت عل ذكرك وشكرك وحسن عبادتك‬ ‫اللهم ي‬
‫ينبغ لجالل وجهك‬ ‫كثيا مبارًكا فيه كما ن‬ ‫حمدا ً‬
‫طيبا ً‬ ‫ً‬ ‫ن‬
‫العالمي‬ ‫الحمد هلل رب‬
‫ي‬
‫ولعظيم سلطانك‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫‪Text - Alignment Lesson #18‬‬
‫المحاذاة ‪text-align‬‬
‫‪HTML‬‬ ‫‪CSS‬‬

‫االتجاه ‪direction‬‬
‫‪ltr -----> Left to right‬‬ ‫‪rtl -----> Right to Left‬‬
‫ال توجد عالقة ن‬
‫بي الـ ‪ text-align‬والـ ‪ direction‬حيث ان الـ ‪ text-align‬بتتعامل مع أي حاجه‬
‫ن ُ‬ ‫ن‬ ‫ن‬
‫يمي او يف النص او شمال‬ ‫الل بتحدده سواء كان‬
‫ما هو وتحطه يف االتجاه ي‬ ‫تخص النص بالكامل زي‬
‫ن‬ ‫ن‬ ‫ن‬
‫لليمي‬ ‫اليمي للشمال ام من الشمال‬ ‫اما الـ ‪ direction‬بيتحكم يف اتجاه الكالم نفسه هل هو من‬

‫‪By: Amr Elsayed‬‬

‫محاذاة الصورة مع النص ‪vertical-align‬‬

‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫‪By: Amr Elsayed‬‬

‫‪Text - Decoration And Transform Lesson #19‬‬
‫ن‬
‫بمعت انك تقدر تحط خط فوق النص او خط تحته‬ ‫الـ ‪ text-decoration‬بتستخدم ن‬
‫ليين النص‬
‫ي‬ ‫َ‬ ‫ن‬
‫او خط يف منتصف النص وكدا‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫ملحوظة‪ :‬يتم استخدام الـ‪Text-decoration‬‬

‫ن‬
‫الل بيكون تحتها‬
‫يف اللينكات لحذف الخط ي‬

‫الـ ‪ text- transform‬بيستخدم لـتغي شكل الحروف سواء جعل الحروف كلها ‪ capital‬او ‪small‬‬
‫الل ‪capital‬‬
‫او جعل اول حرف بس من كل كلمة هو ي‬

‫‪By: Amr Elsayed‬‬

 Text – Spacing Lesson #20
- Letter Spacing -----> it is the spaces that between words' letters
‫المسافات الموجودة ن‬
‫بي حروف الكلمات ممكن تكون قيمة موجبة او قيمة سالبة‬
div {
background-color: #f999;
letter-spacing: 3px;
}

- Indentation -------> It's the blank or empty spaces before words

‫ن‬
‫وف فرق بينها ن‬
padding ‫وبي انك تحط‬ ‫ه المساحة الفارغة قبل الكالم ي‬
‫ي‬
div {
background-color: #f999;
text-indent: 100px;
}

- Line Height --------> it's the spaces or height that there are between lines
or phrases in vertical mode
‫ن‬ ‫ن‬
‫أش أو العمودي‬‫ي‬ ‫ر‬‫ال‬ ‫الوضع‬ ‫ف‬
‫ه المسافات او االرتفاع الموجود بي االسطر او العبارات ي‬
‫ي‬
div {
background-color: #f999;
line-height: 1.7;
}

- Word Spacing --------> it’s the spaces between the Words

‫ن‬ ‫ وخل بالك نف فرق ن‬.. ‫بي الكلمات نفسها‬
‫ه الفراغات الموجودة ن‬
‫بي فراغات او مسافات يف‬ ‫ي‬ ‫ي‬ ‫ي‬
‫ن‬ ‫ن‬
‫حروف كلمة معينة وبي فراغات ومساحات بي كلمات جملة معينة‬
div {
background-color: #f999;
word-spacing: 15px;
}
‫‪- White Spaces + Wrapping‬‬
‫ن‬
‫معي يقف عنده برضو‬ ‫حت لو انا محدد ‪Width‬‬
‫مبيعملش قطع للكالم وبيكمل ي‬
‫{ ‪div‬‬
‫;‪background-color: #f999‬‬
‫;‪width: 300px‬‬
‫;‪white-space: nowrap‬‬
‫}‬

‫‪- word-break‬‬
‫ن‬
‫الل انت محدده علشان ميحصلش ‪ overflow‬ودا يف حالة‬ ‫بيعمل قطع للكالم عند ال ‪ width‬ي‬
‫ن‬
‫عل بعضها‪ ،‬ولكن طويلة يف الصورة‬
‫مثال لو بتتعامل مع لينك الن اللينك بيكون كلمة واحده ي‬
‫ه توضحيه شوية بس‪..‬‬ ‫ه مش افضل مثال ع الخاصية دي ولكن ي‬ ‫تحت اخر حاجه ي‬
‫{ ‪div‬‬
‫;‪background-color: #f999‬‬
‫;‪word-break: break-word‬‬
‫;‪line-height: 170%‬‬
‫;‪width: 300px‬‬
‫}‬

‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫‪By: Amr Elsayed‬‬

 Text - Overflow And Use Cases Lesson #21
‫ن‬
‫ الغرض منها انه لما الكالم يتقطع بخاصية‬ellipsis ‫ بتاخد قيمة اسمها‬text-overflow ‫يف خاصية اسمها‬
‫ن‬ ‫ن‬ ‫ر‬
‫كمؤش ان يف كالم مقطوع من هنا او يف كمالة لسه للجملة الطويلة دي‬ ‫ بتحط تلت نقط جنب بعض‬overflow: hidden ‫الـ‬

HTML
<div>
welcome to elzero web school, hello
</div>
CSS
div {
padding: 10px;
width: 200px;
background-color: #aaa;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

‫ن‬
‫يف خاصية كمان ممكن اضيفها بحيث لما اقرب ع الجملة المقطوعة دي يظهرها بالكامل‬
div: hover {
overflow: visible;
}

‫ن‬
title ‫ اسمه‬attribute ‫ هو انك تستخدم‬hover ‫ولكن يف حاجه افضل من كدا بديل عن ال‬
‫ن‬
HTML ‫يف كود الـ‬
<div title="welcome to elzero web school, hello">
welcome to elzero web school, hello
</div>

By: Amr Elsayed

 ‫‪ Lesson #22‬التوريث ‪Inheritance‬‬
‫تعتي ان العنارص بتاعتك ممكن تورث خواص من األبهات بتاعتها و بعض خواص تانية الء‬
‫تقدر ر‬
‫‪HMTL‬‬ ‫‪CSS‬‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫الل احنا أصال‬
‫لو فتحت الـ ‪ console‬واختارت منه عنرص الـ ‪ h3‬هتالقيه انه ورث بعض الخصائص ي‬
‫الل هو بمثابة االب لـ ‪ h3‬او الحاوي له‬
‫حطينها للـ ‪ div‬ي‬
‫الل ورثها زي الـ ‪ text-transform‬و ‪ text-align‬ولكن ع يل‬
‫عل سبيل المثال بعض الخصائص ي‬
‫ي‬
‫منطف لو العنرص‬
‫ي‬ ‫النقيض من ذلك هو لم يرث منه ال ‪ padding‬و ‪ background-color‬علشان مش‬
‫االب دا جواه مئات العنارص و العنارص دي داخلها مئات العنارص هل لو حبيت اغي الـ ‪ padding‬بتاع‬
‫الـ ‪ div‬دا ابوظ الهوامش بتاعت مئات العنارص ؟!!‬
‫طيب ليه الـ ‪ font-size‬مشطوب عليها الن ف األساس الـ ‪ user agent‬حاطط للـ ‪ h3‬قيمة أساسا‬

‫‪CSS‬‬
‫{ ‪div‬‬
‫;‪text-transform: capitalize‬‬
‫;‪text-align: center‬‬
‫;‪padding: 20px‬‬
‫;‪background-color: #eee‬‬
‫;‪font-size: 20px‬‬
‫;‪border: 2px solid blue‬‬
‫}‬

‫{ ‪div p‬‬
‫;‪border: 2px solid‬‬
‫;‪border-color: inherit‬‬
‫}‬

‫ن‬
‫يف بعض الحاالت لو حبيت اعمل ‪ Border‬للـ ‪ div‬كله واديته لون ازرق و ‪ border‬للـ ‪ p‬واديته لون ازرق‬
‫ن‬
‫طيب يف حالة لو حبيت اغي لون الـ ‪ border‬بتاع الـ ‪ div‬للون األحمر وكذلك الـ ‪ p‬حبيت اغي‬
‫بتاعت ومئات الـ ‪h3‬‬
‫ي‬ ‫الـ ‪ border‬بتاعه ل اللون األحمر وهفيض ان عندي مئات الـ ‪ p‬داخل التصميم‬
‫امس ع كل عنرص اغي الـ ‪ border‬بتاعه عشان اخليه زي لون الـ ‪ div‬ال‬‫هل منطف نان ر‬
‫ي‬ ‫ي ي‬

‫بيورث الخصائص من االب‪.‬‬ ‫ن‬

‫بتاع ِ‬
‫ي‬ ‫هنا يف خاصية اسمها ‪ inherit‬او التوريث بمجرد ما اضيفه للعنرص‬
‫ببساطه شديدة الـ ‪ inherit‬دي بستخدمها عشان اورث للعنرص االبن خصائص العنرص االب‬

‫‪By: Amr Elsayed‬‬

Typography - Font Family Lesson #23
‫ن‬
‫عل اسم الخط او اسم اكي‬ ‫ي‬ ‫بتحتوي‬ ‫دي‬ ‫العائلة‬ ‫للخطوط‬ ‫عائلة‬ ‫اسمها‬ ‫حاجه‬ ‫ف‬‫ي‬ ‫ببساطة شديدة‬
‫ن‬ ‫ن‬
‫وف الصورة التالية الفرق بينهم‬
‫ي‬ sans serif ‫او‬ serif ‫دا‬ ‫النوع‬ ‫كان‬ ‫سواء‬ ‫نوعه‬ ‫االخر‬ ‫وف‬
‫من خط ي‬

‫“ و مثال ع‬Times New Roman” ‫ زي خط‬serif ‫الل فيها كسور او‬ ‫كمثال ع الخطوط ي‬
‫الل بتكتب بيه‬
‫ او الخط ي‬Arial ‫ زي خط‬sans serif ‫الل مفيهاش كسور او بتكون‬
‫الخطوط ي‬
Calibri(Body) ‫الملخص دا‬

HTML
<div class="with-ser">Welcome To Elzero Web School, Hello
F</div>
<div class="san-ser">Welcome To Elzero Web School, Hello
F</div>
CSS
.with-ser {
font-family: 'Times New Roman', Times, serif;
}

.san-ser {
font-family: Arial, Helvetica, sans-serif;
}
.with-ser,
.san-ser {
background-color: #eee;
}

Never Forget That (Always Search)

By: Amr Elsayed
 ‫ن‬
‫‪ google‬الخطوط فيه بيتكون ‪ Valid‬وبتستخدم عادي جدا بدون أي مشاكل يف التوافقية‬ ‫ن يف موقع ‪fonts‬‬
‫ن‬ ‫ن‬
‫بتاع‬
‫ي‬ ‫التصميم‬ ‫داخل‬ ‫معي‬ ‫فونت‬ ‫اضيف‬ ‫حابب‬ ‫لو‬ ‫حالة‬ ‫ف‬
‫طيب ي‬

‫الل السهم أشار اليه هيفتح القائمة الجانبية هختار‬ ‫هختار الـ ‪ font‬و احدد ُ‬
‫السمك بتاعه و هضغط ع المكان‬
‫ن‬ ‫ي‬ ‫ن‬
‫منها اللينك بتاع الخط دا واحطه يف ‪ HTML‬و هنسخ الـ ‪ Family‬الخاصة بالـ ‪ font‬دا واحطها يف الـ ‪CSS‬‬
‫‪HMTL‬‬

‫‪CSS‬‬
‫{‪div‬‬
‫;‪font-family:’Cairo’, sans-serif‬‬
‫;‪background-color: #eee‬‬
‫;‪padding: 10px‬‬
‫}‬
‫‪Typography - Font Size And CSS Units Lesson #24‬‬
‫‪CSS‬‬

‫‪HTML‬‬

‫ن‬
‫طبعا الـ ‪ px‬مفهاش كالم كتي‪ ،‬ولكن المعلومة المهمة ان حجم الخط االفي ي‬
‫اض لصفحة الويب‬
‫ديما بيكون ‪ ...... 16px‬واألكيد كمان ال ـ ‪ 1em‬ال تساوي اطالقا ‪16px‬‬
‫الل بيورثها العنرص من االب‬
‫ه ضعف المساحه ي‬ ‫الل بتشي لكلمة ‪ time‬ي‬ ‫الـ ‪ em‬ي‬
‫*هديك مثال ن يف حالة انك اديت الـ ‪ Div‬القيمة ‪ font-size: 20px‬و روحت للـ ‪span‬‬
‫ن‬
‫يعت لو الـ ‪Div‬‬
‫اديته قيمة ‪ 2em‬هنا الـ ‪ span‬دا حجمه هيكون ضعف حجم الـ ‪ div‬ي‬
‫حجمه ‪ 20px‬الـ ‪ span‬هيكون حجمه ‪40px‬‬
‫‪CSS‬‬
‫{‪div‬‬
‫;‪background-color: #eee‬‬
‫;‪font-size: 20px‬‬
‫}‬
‫{ ‪div span‬‬
‫;‪font-size: 2em‬‬
‫}‬
 ‫ن‬ ‫ن‬
‫يبف يف تغيي فعال ؟ وان الـ ‪ 2em‬الخاصة بالـ ‪ span‬متبقاش ضعف‬
‫ولكن يف سؤال مهم جدا امته ي‬
‫حجم الـ ‪ div‬ي‬
‫الل هو األب ؟‬
‫لما قيمة الـ ‪ span‬متورثش خصائصها من الـ ‪ div‬االب‬
‫طيب امته دا يحصل ؟!‬
‫لو انا اديت الـ ‪ Body‬نفسه ‪ font-size‬وليكن ‪ 40px‬هنا الـ ‪ div‬هيورث الحجم دا من الـ ‪body‬‬
‫وبعدها الـ ‪ Span‬هيورث الحجم دا من الـ ‪div‬‬
‫{ ‪body‬‬
‫;‪font-size: 40px‬‬
‫}‬
‫{‪div‬‬
‫;‪background-color: #eee‬‬
‫}‬

‫{ ‪div span‬‬
‫;‪font-size: 2em‬‬
‫}‬

‫‪rem -----> Root Time‬‬

‫‪CSS‬‬
‫{ ‪body‬‬
‫;‪font-size: 40px‬‬
‫}‬
‫{‪div‬‬
‫;‪background-color: #eee‬‬
‫;‪font-size: 20px‬‬
‫}‬
‫{ ‪div span‬‬
‫;‪font-size: 2rem‬‬
‫}‬

‫الـ ‪ root time‬هو نفس الـ ‪ em‬بالظبط لكن الفرق ان العنرص بيورث خصائصه من جدز الصفحة‬
‫ن‬ ‫ن‬ ‫ن‬
‫اض‬ ‫الل هو ‪ HTML‬وطبعا زي ما احنا عارفي ان الـ ‪ HTML‬دا بيدي حجم افي ي‬
‫اض او خط افي ي‬ ‫ي‬
‫لصفحة الويب ‪16px‬‬
‫ن‬
‫معت الكالم دا ان الـ ‪ font-size‬بتاع ال ‪ span‬هيورث الحجم بتاعة من الـ ‪ Root‬ومدام‬
‫اذا ي‬
‫اض ‪ 16px‬اذا الـ ‪ Span‬هيكون حجمه ‪32px‬‬ ‫ن‬
‫الـ ‪ root‬حجمه االفي ي‬

‫‪Percentage %‬‬
‫ن‬
‫يعت الـ ‪ Div‬حجمه ‪20px‬‬
‫ًمفهاش كالم كتي العنرص بيورث حجم الخط بتاعه من االب ي‬
‫يبف هيورث الـ ‪ 20px‬بتوع الـ ‪ div‬لو خليناه ‪150%‬‬
‫اذا لو خلينا الـ ‪ 100% span‬ي‬
‫هيبف ‪30px‬‬
‫ي‬ ‫هيورث حجمه مرة ونص‬
‫‪VW ------> View Port Width‬‬
‫الـ ‪ vw‬بيشي يال حجم الصفحة كلها ‪ ..‬الـ ‪ 1vw‬بتساوي ‪ 1%‬من العرض بتاع الـ ‪view port‬‬
‫بتاع ‪ 900‬اذا ‪ 1%‬منه يساوي ‪9‬‬ ‫ن‬
‫معت كدا ان لو العرض‬
‫ي‬ ‫ي‬
‫ن‬
‫يعت ‪45px = 9*5‬‬
‫طيب لو قولتله ان العرض دا ‪ 5vw‬ي‬
‫ودي حاجه مهمه جدا ن يف عالم الـ ‪responsive‬‬

‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
Typography - Font Style And Variant And Weight Lesson #25
/*
Font Style
Font Variant
Font Weight
*/
1- Font Style
‫ مائل‬italic ‫تخل الخط‬
‫ي‬ ‫الغرض منها‬

HTML
<body>
<div>Welcome To Elzero Web School, <span>Hello</span></div>
</body>

CSS
div {
font-style: italic;
}

2- Font Variant
‫ن‬
‫ ولكن اصغر من حجم الخط االفي ي‬Capital ‫الغرض منه تحويل الكالم لحروف‬
‫اض‬

HTML
<body>
<div>welcome to elzero web school, hello</div>
<p>welcome to elzero web school, hello</p>
</body>

CSS
div {
font-variant: small-caps;
}
p {
text-transform: uppercase;
}

By: Amr Elsayed

3- Font-Weight
CSS
div {
font-weight: bold;
}

Never Forget That (Always Search)

‫ر‬
Mouse Cursor ‫مؤش الماوس‬ Lesson #26
‫ن‬ ‫الغرض من الخاصية دي تغي ر‬
‫ يف طبعا أنواع كتي ممكن تبص عليها‬Mouse ‫مؤش الفأرة او الـ‬
‫برحتك‬

HTML
<a href="#">Google</a>
<span>Test</span>
<button>Click</button>

CSS
button {
background: transparent;
color: red;
font-weight: bold;
border: none;
cursor: pointer;
}

Never Forget That (Always Search)

By: Amr Elsayed
 ‫‪Float And Clear Lesson#27‬‬
‫الل عندي‬
‫وعل حسب العنارص االبن ي‬
‫ي‬ ‫خدها قاعدة ديما ان العنرص االب دا الـ ‪ width‬بتاعه ‪100%‬‬
‫يبف كل عنرص واخد ‪25%‬‬
‫عل العنرص االب بحيث ي‬
‫هنفيض ان عندي ‪ 4‬عنارص بقسم العرض بتاعهم ي‬
‫‪ -‬استخدام خاصية الـ ‪ display: inline-block‬مش من ال ‪ best practices‬انك تستخدمها‬
‫ن‬
‫الل هتكتشف فيما بعد ان فيه خصائص غي الـ ‪float‬‬
‫يف توزيـ ــع العنارص علشان كدا هنتعلم الـ ‪ float‬ي‬
‫ن‬
‫افضل منه بكتي يف توزيـ ــع العنارص‬

‫ن‬
‫‪ -‬المقصود او الهدف من ال ‪ float‬ان العنارص ي‬
‫الل انشأتها تكون عائمة يف الصفحة‬

‫‪ -‬خاصية ال ‪ Clear‬الغرض منها انها تعمل ‪ Clear‬للـ ‪ float‬ي‬

‫الل انت عملته وتفصله عن أي حاجه‬
‫هتيح‬ ‫بي العنارص الل عملتلها ‪ float‬ن‬
‫وبي أي حاجه تانية‬ ‫هتكون تحته ‪ ..‬باختصار بتعمل زي حاجز ن‬
‫ر ي‬ ‫ي‬
‫تحت العنارص دي و بياخد القيمة ‪ both‬عشان يعالج جميع الجهات‬

‫‪ -‬كل المطلوب انك تفهم الخاصية دي شغلها بيكون ازاي و مع الوقت هتفهم عنها اكي واكي وهتستبدلها‬
‫أصال بخصائص تانية فيها مرونة و احيافيه عن كدا‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 ‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫كثيا مبارًكا فيه كما ن‬
‫ينبغ لجالل وجهك ولعظيم‬ ‫طيبا ً‬ ‫ً‬
‫حمدا ً‬ ‫اللهم لك الحمد‬
‫ي‬
‫ن‬
‫العالمي‬ ‫سلطانك يا رب‬
‫اللهم ّ‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬
‫العل العظيم‬ ‫ي‬ ‫ال حول وال قوة اال باهلل‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
‫‪Mastering The CSS Calculation Lesson #28‬‬
‫‪HTML‬‬
‫‪<div>Product‬‬ ‫>‪One</div‬‬
‫‪<div>Product‬‬ ‫>‪Two</div‬‬
‫‪<div>Product‬‬ ‫>‪Three</div‬‬
‫‪<div>Product‬‬ ‫>‪Four</div‬‬
‫دلوقت انا عندي ‪ 4‬عنارص عايز اقسمهم واحط بينهم هوامش خارجيه تفصلهم عن بعض!‬
‫ي‬
‫و علشان اعمل كدا‬
‫ن‬
‫ببساطة شديدة الموضوع كلو بيتم تلخيصه يف المعادلة التالية عشان تقدر تظبط مقاسات كل‬
‫العنارص و تحط بينهم هوامش خارجية‬
‫*‪/‬‬
‫‪Content Width Is: 100%‬‬
‫‪5 Spaces ==> Every Space = 1% ==> 1% * 5 = 5% From Content‬‬
‫‪Width‬‬
‫‪95% Available Space‬‬
‫‪4 Elements ==> The Width Is : 95% / 4‬‬
‫‪*/‬‬

‫طيب المعادلة البسيطة دي معناها أي ؟‬

‫دلوقت انا عندي ‪ 4‬عنارص او ‪ div 4‬عايز اوزعهم بالتساوي جنب بعض‬
‫ي‬ ‫‪ -‬زي ما قولت‬
‫واعمل بينهم هوامش خارجيه وهفيض ان الهوامش دي هتكون قبلهم وبعدهم‬
‫ً‬
‫‪ -‬اذا انا عندي ‪ 4‬عنارص و عايز اعمل قبلهم وبعدهم ‪ 5‬مسافات بحيث افصلهم عن بعض‬
‫ً‬
‫الكل بيكون ‪ 100%‬وانا عندي ‪ 5‬مسافات هفيض ان كل مسافة هتكون ‪ 1%‬اذا‬ ‫ي‬ ‫‪ -‬العرض‬
‫ً‬
‫الباف لما اشيل منه الـ ‪ 5%‬بتوع المسافات‬
‫ي‬ ‫انا كدا عندي ‪ 5%‬للمسافات فقط ‪ ..‬اذا العرض‬
‫ن‬
‫فاضيي‬ ‫باف ‪95%‬‬
‫هيكون ي‬

‫الل هما ‪ 4‬عنارص‬

‫الل عندي ي‬
‫عل عدد العنارص ي‬
‫‪ -‬من هنا هستخدم الـ ‪ 95%‬دول واقسمهم ي‬
‫{ ‪div‬‬
‫;‪padding-top: 10px‬‬
‫;‪padding-bottom: 10px‬‬
‫;‪text-align: center‬‬
‫;‪background-color: #eee‬‬
‫;‪width:23.75%‬‬
‫;‪float: left‬‬
‫;‪margin-left: 1%‬‬
‫}‬
‫*‪/‬‬
‫‪The full Content Width Is : 100%‬‬
‫‪5 spaces = 1% ===> 1% * 5 = 5%‬‬
‫‪95% available from Content Width‬‬
‫‪4 Elements ===> The Width is 95% / 4 */‬‬
 ‫خدها قاعدة ديما‪:‬‬
‫ً‬
‫‪ -‬أيا كان عدد العنارص ي‬
‫الل عندي لو عايز اعمل هوامش خارجيه قبلهم وبعدهم زي‬
‫يبف المسافات ديما هتكون زياده ‪ 1‬ي‬
‫عل عدد العنارص دي‬ ‫المثال دا ي‬
‫يعت لو عندي ‪ 6‬عنارص اذا هعمل ‪ 7‬مسافات ‪ ...‬لو عندي ‪ 8‬عنارص هعمل ‪9‬‬‫ن‬
‫ي‬
‫مسافات‬

‫ن‬ ‫ن‬ ‫ن‬

‫ان عايز اعمل هوامش خارجيه بي العنارص وبعضهم بس ‪ ..‬ي‬
‫يبف المسافات‬ ‫‪ -‬ولكن يف حالة ي‬
‫ديما هتكون اقل ‪ 1‬عن العنارص دي‬
‫يعت لو عندي ‪ 6‬عنارص اذا هعمل ‪ 5‬مسافات ‪ ...‬لو عندي ‪ 8‬عنارص هعمل ‪7‬‬ ‫ن‬
‫ي‬
‫مسافات ‪ ..‬وهكذا‬

‫يمكننا استخدما معادلة الـ ‪ Calc‬مع خاصية الـ ‪ width‬بحيث انها تسهل عليا الحسبة‬
‫;) ‪width: calc(95% / 4‬‬

‫ان مش عايز احسب المسافات بالنسبة المئوية‪ ،‬ولكن عايز احسبها بالـ ‪ px‬وعايز‬‫ن‬
‫طيب هفيض ي‬
‫ً‬ ‫ن‬
‫ان عندي ‪ 5‬عنارص اذا هيكون عندي ‪ 6‬مسافات‬ ‫احط قبل وبعد كل عنرص‪ 10px‬وعندي ‪ 5‬عنارص وبما ي‬
‫الل فوق‬
‫هستخدم نفس المعادلة ي‬
‫*‪/‬‬
‫‪The full Content Width Is : 100%‬‬
‫‪6 spaces = 10px ===> 10px * 6 = 60px‬‬
‫‪100 - 60px available from Content Width‬‬
‫‪5 Elements ===> The Width is (100 - 60px) / 5‬‬
‫‪*/‬‬

‫{ ‪div‬‬
‫;‪padding-top: 10px‬‬
‫;‪padding-bottom: 10px‬‬
‫;‪text-align: center‬‬
‫;‪background-color: #eee‬‬
‫;) ‪width: calc((100% - 60px) / 5‬‬
‫;‪float: left‬‬
‫;‪margin-left: 10px‬‬
‫}‬

‫‪By: Amr Elsayed‬‬

 Opacity Lesson #29
‫ انه بيعمل شفافية للعنرص بالخلفية بتاعته‬opacity ‫الفكرة من الـ‬
HTML
<div class="one">Element</div>
<div class="two">Element</div>
CSS
.one {
background-color: red;
opacity: 0.5;
}

.two {
background-color: red;
}

‫ن‬
♥️‫تحفيية‬ ‫️♥عبارات‬

By: Amr Elsayed

 Position Lesson #30
‫ن‬
.‫عل أي عنرص تحته او جانبه‬
‫تستخدم هذه الخاصية لتحريك أي عنرص بإرياحية يف الصفحة دون التأثي ي‬

HTML
<div class="one">One</div>
<div class="two">Two</div>
CSS
/*
Position
Static => Default
Relative
Absolute
Fixed
Sticky
*/
div {
color: white;
width: 100px;
padding: 10px;
}
.one {
background-color: red;
}
.two {
background-color: green;
}

Position: Static;
rest ‫ وتقدر تستخدمها ن يف انك تعمل‬default ‫الل بتكون‬
‫ ي‬static ‫ اولهم الـ‬value ‫ اكي من‬position ‫لخاصية الـ‬
‫ التانية‬positions ‫ألنواع الـ‬
.one {
background-color: red;
position: static;
}

Position: Relative;
.one {
background-color: red;
position: relative;
right: 15px;
}
 ‫عل يمينه‪.‬‬ ‫ن‬ ‫ن‬ ‫عل نفسه ‪..‬‬ ‫ً‬
‫بمعت انك لو حبيت تحرك العنرص دا من اليمي هيتحرك من ي‬‫ي‬ ‫هنا العنرص بيتحرك بناءا ي‬
‫ن‬
‫لليمي‬ ‫بي انه يتحرك هو شخصيا‬ ‫بي ان العنرص يتحرك من عل يمينه و ن‬ ‫خل بالك‪ :‬نف فرق ن‬
‫ي‬ ‫ي‬ ‫ي‬
‫معت كدا انه هيتحرك من تحته‬‫نف حالة ال ‪ relative‬العنرص بيتحرك باالعتماد ع نفسه لو عايز تحركه لفوق ن‬
‫ي‬ ‫ي‬
‫ن‬ ‫ن‬ ‫ن‬ ‫ن‬ ‫ن‬ ‫ن‬
‫ان احركه هو شخصيا لتحت‪)": .‬‬ ‫إن أحرك العنرص من تحته وبي ي‬ ‫تان يف فرق بي ي‬‫و ي‬

‫;‪Position: Absolute‬‬
‫الل تحته‬
‫الـ ‪ Absolute‬مختلف تماما عن الـ ‪ relative‬أوال العنرص بيكون خارج ال ‪ workflow‬والعنرص ي‬
‫هيح مكانه فورا‬
‫ر ي‬
‫ن ن‬
‫ان لو عايز احركه ‪ 15px‬لتحت هو فعليا هيبدا‬ ‫الل هو فيه ‪..‬‬ ‫ً‬ ‫‪-‬‬
‫بمعت ي‬
‫ي‬ ‫العنرص هنا بيتحرك بناءا ع االب ي‬
‫أعل الصفحة نفسها لتحت‬
‫يتحرك من ي‬
‫يبف الزم تستخدم القيمة ‪ top‬عشان تبدا‬
‫الل لو كنت عايز تحركه ‪ 15px‬لتحت ي‬
‫عكس الـ ‪ relative‬ي‬ ‫‪-‬‬
‫تحركه لتحت ‪ ..‬ألنه بكد هيبدا يتحرك من موقعه ي‬
‫الل هو فيه من فوق لتحت‬
‫{ ‪.one‬‬
‫;‪background-color: red‬‬
‫;‪position: absolute‬‬
‫;‪right: 0‬‬
‫;‪bottom: 0‬‬
‫}‬
 HTML
<body>
<div class="two">Two</div>
<div class="parent">
<div class="one">One</div>
</div>
</body>
CSS
.one {
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
.parent {
width: 250px;
height: 150px;
background-color: blue;
position: relative;
}

‫ن‬ ‫ن‬
‫ وبعدها‬Relative ‫ بقيمة‬position ‫ داخل اب جديد وحطيت لألب دا خاصية ال‬one ‫ان حطيت العنرص‬ ‫يف حالة ي‬
‫ يتحرك داخل االب بتاعه‬one ‫ هنا بيبدأ العنرص‬Absolute ‫ بقيمة‬position ‫ خاصية ال‬one ‫حطيت للعنرص‬
‫ئ‬
‫ مش هيتحرك ي‬one ‫ العنرص‬:‫خل بالك‬
relative ‫ وتكون قيمته‬position ‫نهان من غي م االب بتاعه ياخد‬ ‫ي‬

Never Forget That (Always Search)

By: Amr Elsayed
‫;‪Position: Fixed‬‬
‫ه ان العنرص ‪ one‬دا يفضل يتحرك معاك طول ما انت بتعمل ‪ Scroll‬ديما بدون ما‬
‫الغرض من القيمة ‪ fixed‬ي‬
‫ن‬
‫معي وال حاجه هو بس بياخد مقاسات زي ال ‪ bottom‬و ال ‪ right‬و بيبدأ يتحرك معاك‬ ‫يكون مرتبط بأب‬
‫طول ما بتعمل ‪Scroll‬‬

‫‪CSS‬‬
‫{ ‪.one‬‬
‫;‪background-color: red‬‬
‫;‪position: fixed‬‬
‫;‪right: 0‬‬
‫;‪bottom: 0‬‬
‫}‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬ ‫اللهم ّ‬
‫ٌ‬ ‫ر‬ ‫ُ‬ ‫ر‬ ‫ُ‬
‫قدير‪ ،‬ال‬ ‫ش ٍء‬
‫ال إله إال هللا وحده ال شيك له‪ ،‬له الملك وله الحمد وهو عل كل ي‬
‫إله إال ُ‬
‫هللا وحده‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ‬ ‫َ‬
‫ي القلوب‬ ‫ِ‬ ‫م‬‫ط‬ ‫ت‬ ‫اَّلل‬ ‫ر‬
‫ِِ ِ ِ‬‫ك‬‫ذ‬‫ب‬ ‫ال‬‫أ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫;‪Position: Sticky‬‬
‫ييل معاك طول ما انت‬ ‫الغرض من القيمة ‪ Sticky‬ان لو عندك ‪ nav bar‬فيه لينكات الـ ‪ nav‬دا ديما ن ن‬
‫بتعمل ‪scroll‬‬
‫ن‬ ‫ن‬ ‫ن‬ ‫ن‬
‫تان كتي هنا ال ‪ nav‬بيبدأ‬‫ان عندي كالم كتي وبعده يف ‪ nav bar‬وبعد الـ ‪ nav‬دا يف كالم ي‬ ‫هفيض ي‬
‫وييل معاك اول ما توصل لحد عنده وانت بتعمل ‪scroll‬‬‫يتحرك ن ن‬

‫الفرق بينه ن‬
‫وبي الـ ‪ fixed‬انه بيبدأ يتحرك اول ما بتوصله‬ ‫‪-‬‬
‫‪CSS‬‬
‫{ ‪body‬‬
‫;‪height: 3000px‬‬
‫}‬
‫{ ‪div‬‬
‫;‪background-color: red‬‬
‫;‪color: white‬‬
‫;‪padding: 10px‬‬
‫;‪position: sticky‬‬
‫;‪top: 15px‬‬
‫}‬

‫أول ما أوصل للـ ‪ nav bar‬بيبدأ يتحرك ن ن‬

‫وييل معايا ويكمل‬

‫‪By: Amr Elsayed‬‬

 ‫️♥راقت يل️♥‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ْ‬ ‫َ ْ َ َّ ُ َ َ َ َّ ُ َ َ َ ْ َ َ َّ ْ ُ‬
‫ت َو ُه َو َر ُّب ْال َع ْ‬
‫ش ال َع ِظيم‬
‫ِ‬ ‫ر‬ ‫حس ِر يت اَّلل َل ِإله ِإَل هو علي ِه توكل‬
‫تكلت ال نفس طرفة ن‬
‫عي‬ ‫شأن كله وال ن‬ ‫ن‬
‫ي‬ ‫ي ي‬ ‫ح يا قيوم برحمتك استغيث أصلح يل ي‬ ‫يا ي‬
‫الحمد هلل بال سبب‪ ،‬الحمد هلل بال طلب‪ ،‬الحمد هلل بال عدد‪ ،‬الحمد هلل حت ن‬
‫يرض‪.‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪Z-Index Lesson#31‬‬
‫ُ‬
‫الـ ‪ - Z-Index‬الطبقات ‪ ...‬الـ ‪ Default‬انه بيحط العنارص فوق بعض بحيث يكون ترتيب العنرص األول تحت خالص‬
‫والعنرص األخي يكون فوق خالص‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫ولكن ببساطه احنا بنستخدم الخاصية دي عشان نعدل ع الوضع الـ ‪ Default‬دا ونعيد ترتيب‬
‫العنارص دي بحيث ان اول عنرص بدل ما يكون اخر حاجه تحت كل العنارص ‪ ..‬ال يكون اول حاجه‬
‫ن‬ ‫ن‬
‫اكي قيمة يف ‪z-index‬‬
‫ان احطله ر‬‫بتظهر من خالل ي‬

‫مي اعل من ن‬
‫مي بغض النظر عن‬ ‫ن‬
‫التان بناءا ع الرقم ن‬ ‫يح فوق‬
‫ي‬ ‫ي‬ ‫بيخل كل عنرص ر ي‬
‫ي‬ ‫نظام الطبقات‬
‫ترتيب الـ ‪HTML‬‬
 ‫ن‬
‫اعل قيمة هتحطها يف ال ـ ‪ Z-index‬معناها ان‬ ‫ي‬ ‫‪-‬‬
‫العنرص دا هيكون هو اول حاجه تظهر‬
‫ن‬
‫‪ -‬اقل قيمة هتحطها يف ال ـ ‪ Z-index‬معناه ان العنرص‬
‫بمعت ادق العنرص‬ ‫ن‬ ‫دا هيكون اخر حاجه تظهر او‬
‫ي‬
‫هيكون ترتيبه األخي‬
‫‪ -‬الـ ‪ Z-index‬ال تعمل اال لو العنرص األب واخد‬
‫خاصية الـ ‪Position‬‬

‫ن‬ ‫ن‬ ‫ن‬

‫ان حطيت للعنرص ‪ one‬قيمة ‪ 3‬يف الـ ‪ Z-index‬وبعد كدا اديت للعنرص ‪ three‬قيمة ‪ 3‬برضو‬
‫طيب يف حالة ي‬
‫ن‬ ‫ر‬
‫الل بيخليه يحط اخر عنرص مكتوب يف ‪ HTML‬فوق خالص‬‫هيمس بيتيب ال ‪ Content‬بتاع الـ ‪ HTML‬ي‬
‫ي‬ ‫هنا‬

‫الـ ‪ z-index‬ال يعمل اال ن يف وجود خاصية الـ ‪position‬‬

‫تبف أي قيمة ممكنة للـ ‪position‬‬ ‫ر‬

‫قيمة الـ ‪ position‬مش شط تكون ‪ absolute‬ممكن ي‬

‫ن‬
‫خل قيمته ‪-1‬‬
‫لو انت عندك عنرص حابب تخلية اخر حاجه يف الصحفة او اخر حاجه تكون تحت تماما ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 Lists Styling Lesson #32
HTML
<h1>Title</h1>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript
<ul>
<li>Angular</li>
<li>React.JS</li>
<li>Vue.JS</li>
</ul>
</li>
</ul>

‫ن‬
‫الل قبل‬
‫ او االيقونات ي‬bullets ‫ عشان اتحكم يف نوع وشكل ال‬list-style-type ‫بيتم استخدام الخاصية‬
li ‫عنرص الـ‬
CSS
ul {
list-style-type: square;
}
CSS
li {
background-color: #eee;
margin-bottom: 10px;
}
ul {
list-style-position:
inside;
}

‫ن‬
‫الل‬
‫ي‬ bullets ‫ال‬ ‫هل‬ ‫ف‬‫ عشان اقدر اتحكم ي‬list-style-position: inside ‫بستخدم الخاصية‬
‫ تخش جنب العنرص وتاخد من نفس تنسيقاته وال تكون خارج التنسيقات دي‬li ‫قبل ال‬
 ‫‪CSS‬‬
‫{ ‪ul‬‬
‫;)(‪list-style-image: url‬‬
‫}‬

‫الل جنب عنرص الـ ‪ li‬بصورة معينة مثال‬

‫خاصية بيتم استخدامها عشان لو حابب اغي ال ‪ icons‬ي‬

‫‪List-Style Short-Hand‬‬
‫ن‬
‫مت تلت قيم (‪ list-style-type‬بعدها ‪ list-style-position‬بعدها ‪)list-style-image‬‬
‫الخاصية المخترصة بتقبل ي‬
‫‪CSS‬‬
‫{ ‪ul‬‬
‫;‪list-style: none‬‬
‫;‪margin: 0‬‬
‫;‪padding: 0‬‬
‫}‬

‫بتاعت بحيث اعيد تنسيقها‬ ‫ان اعمل ‪ Reset‬للعنارص‬ ‫ن ن‬

‫ي‬ ‫بيتم استخدام الكود دا يف ي‬
‫بشكل افضل مع االحتفاظ بكونها ‪ LI‬طبعا‬

‫ن‬
‫ان ممكن اعمل عنارص تحت بعض وخالص ؟!‬
‫طيب أي الحكمة من كدا مع ي‬
‫عشان اكيد هتحتاج تحط داخل ال ‪ LI‬دي لينكات‬

‫️♥راقت يل️♥‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
Tables Styling Lesson #33
HTML ‫شكل الجدول قبل اي تنسيق‬

User Agent ‫تنسيقات الـ‬

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
 ‫‪CSS‬‬ ‫رشح كود الـ ‪CSS‬‬
‫‪ -‬اول مقطع استهدفت فيه الـ ‪Table‬‬
‫وحطيت ليه ‪ Width‬يكون ‪ 100%‬من الشاشة كلها‬
‫وبعدين عملت ‪Border‬‬

‫الل موجوده داخل‬ ‫‪td‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫كل‬ ‫استهدف‬ ‫مقطع‬ ‫تان‬ ‫ن‬ ‫‪-‬‬
‫ي‬ ‫ي‬
‫يعت كل خليه جوا الجدول هتاخد التنسيقات‬‫ن‬
‫الجدول ي‬
‫الل هحطها دي‬
‫ي‬

‫دا كالم جميل وعظيم مفيش أي مشكله ‪ ..‬طيب لو حابب انسق الجزء الخاص بالـ ‪ thead‬ي‬
‫الل بيحتوي‬
‫ع الـ ‪ Name‬و الـ ‪ Age‬و الـ ‪Email‬‬

‫ن‬
‫كالتال‬
‫ي‬ ‫‪CSS‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫ف‬
‫اذا هستهدفه ي‬
‫‪CSS‬‬ ‫رشح كود الـ ‪CSS‬‬
‫‪ -‬خد بالك من الـ ‪ nesting‬انا هنا استهدفت الخاليا‬
‫ن‬
‫ه‬‫الل موجوده يف الـ ‪ thead‬فقط عشان انسقها ي‬ ‫ي‬
‫بعيدا عن أي خاليا تانية داخل الجدول‬

‫‪By: Amr Elsayed‬‬

‫‪CSS‬‬ ‫رشح كود الـ ‪CSS‬‬
‫ن‬
‫ه الفواصل‬ ‫‪ -‬يف البداية كدا الـ ‪ Border-spacing‬ي‬
‫أو الـ ‪ Border‬الل ن‬
‫بي الخاليا وبعضها فلما اخليها‬ ‫ي‬
‫بـ ‪ 0px‬اذا انا بحذفها تماما وبفعل مكانها الـ ‪border‬‬

‫الل فيه ‪ Nesting‬من خالله‬

‫‪ -‬أخر جزء ي‬
‫الل جوا الـ ‪thead‬‬
‫بستهدف الـ ‪ td‬ي‬
‫انا غيتله لون الـ ‪ Border‬فقط‬
‫لكن نوعه وحجمه زي ماهما‬

‫اذكر هللا ️♥‬

‫ر‬ ‫ر‬
‫ال اله اال هللا وحده ال شيك له ‪ ..‬له الملك وله الحمد وهو عل كل ي‬
‫شء قدير‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫الح القيوم واتوب اليه‬
‫استغفروا هللا العظيم الذي ال اله اال هو ي‬

‫‪By: Amr Elsayed‬‬

Pseudo Classes Lesson #34
‫ مش موجوده ولكن‬Classes ‫ه ببساطه‬
‫الل ي‬
‫ المزيفة ي‬Classes ‫ببساطة شديدة الدرس دا بيتكلم عنن الـ‬
‫بتاعت بحيث تغي يف شكله سواء مشيت عليه او ضغط عليه‬ ‫ي‬ ‫بضيفها للعنارص‬

Hover ‫االول‬
‫ي‬ ‫الحالة‬
HTML
<body>
<div class="one">Normal Element</div>
<hr />
<div class="two"></div>
<hr />
<a href="#">Link1</a>
<a href="#">Link2</a>
<hr />
<form action="">
<div>
<input type="text" />
</div>
<div>
<input type="checkbox" />
<label for="">Testing Check</label>
</div>
</form>
</body>
‫اخل‬ ‫ن‬
‫ان‬ ‫لنفيض ن‬
‫ي‬ ‫ بحيث ي‬a ‫الل اسمه‬
‫العنرص ي‬
‫ن‬
‫بتاع او‬
‫ي‬ ‫ المزيفة دي مع اللينك‬Classes ‫ان حابب استخدم ال‬ ‫ي‬
‫تان ودي بتكون من خالل‬ ‫ن‬
‫ ولكن لما اقرب منه او اقف بس عليه بالماوس لونه يتغي للون ي‬،‫شكله اخرص‬
“hover” ‫استخدام حاجه اسمها‬
CSS
a {
color: green;
text-decoration: none;
}

a:hover {
color: blue;
}

Never Forget That (Always Search)

By: Amr Elsayed
 checked ‫الحالة التانية‬
HTML
<form action="">
<div>
<input type="text" />
</div>
<div>
<input class="ch" type="checkbox" />
<label for="">Testing Check</label>
</div>
</form>
CSS
.ch:checked + label {
color: red;
}
‫ او‬checked ‫تبف‬ ‫ن‬
‫ هنا انا بديله امر لما ي‬check list ‫هنا الكود دا بينفذ امر معي لما يكون عندي‬
‫الل جنبه‬
‫ ي‬label ‫متعلم فيها صح يغي لون النص او الـ‬

visited ‫الحالة التالتة‬

HTML
<a href="https://google.com">Google</a>
<a href="https://twitter.com">Twitter</a>
<a href="https://youtube.com">YouTube</a>
<a
href="https://LinkedIn.com">LinkedIn</a>
CSS
a {
color: red;
text-decoration: none;
}

a:hover {
color: green;
}
a:visited {
color: blue;
}
Hovered

Visited
 empty ‫الحالة الرابعة‬
‫ن ن‬
‫ واديله تنسيقات معينة‬HTML ‫فاض يف‬
‫ي‬ ‫ببساطه شديدة ببحث ع أي عنرص‬

HTML
<div class="one">Normal Element</div>
<hr />
<div class="two"></div> ‫فاضي‬
CSS
.two {
background-color: #aaa;
width: 100px;
height: 100px;
}

Div: empty {
border: 10px solid rgb(1, 46, 77);
}

focus ‫الحالة الخامسة‬

‫ ن‬input ‫ببساطة شديدة لما يكون عندي‬
‫ فيه عشان ابدأ اكتب يتحول لونه كنوع من‬focus ‫فاض لما اعمل‬
‫ي‬
‫أنواع التهيئة للكتابة بداخله‬
HTML
<div>
<input class ="in" type="text" />
</div>
CSS
.in: focus {
border: 2px yellowgreen solid;
outline: none;
}

By: Amr Elsayed

‫دا كالم جميل وعظيم ومفيش فيه أي مشكلة‪ ،‬ولكن هو كل مره هحب اغي حاجة الزم اروح للـ ‪VSCode‬‬
‫ن‬ ‫ن‬
‫الل‬
‫عمل اكي من كدا وافضل من خالل ال ‪ dev tool‬ي‬‫ي‬ ‫تان عليها ‪ ..‬الء يف حل‬
‫عشان اغيها وأرجع ابص ي‬
‫موجوده ف المتصفح‬

‫‪ -1‬هحدد الـ ‪input‬‬

‫الل انا عايزو‬

‫‪ -2‬هختار ‪ force state‬ومن خاللها هختار ال ‪ pseudo class‬ي‬

‫‪ -3‬هبدأ التعديل عليه بصورة طبيعية جدا‪ ،‬ولكن من خالل الـ ‪developer tool‬‬
 ‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬
‫سبحانك اللهم وبحمدك‪ ،‬أشهد أن ال إله إال أنت‪ ،‬أستغفرك وأتوب إليك‪ ،‬ال‬
‫له الملك وله الحمد وهو عل كل ر‬ ‫ُ‬ ‫ُ‬
‫وحده ال ر‬
‫شء قدير‪.‬‬‫ي‬ ‫له‪،‬‬ ‫يك‬
‫ش‬ ‫إله إال هللا‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
Pseudo Elements - First Letter_ First Line_ Selection Lesson #35

“.one:: first-letter” ‫األول تنسيق الحرف األول من الجملة‬

‫ي‬ ‫الحالة‬
‫ن‬ ‫ن‬
‘L’ ‫الل هو حرف‬
‫ان انسق اول حرف فقط يف الجملة ي‬
‫ببساطه شديدة الغرض من العنرص المزيف دا تحديدا ي‬
HTML
<div class="one">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo beatae
veniam exercitationem ullam voluptate quis quasi molestias reiciendis.
</div>
<hr/>

<div class="two">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo beatae
veniam exercitationem ullam voluptate quis quasi molestias reiciendis.
</div>
<hr/>

<p class="three">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio quisquam
numquam dignissimos laborum modi sapiente libero
</p>

CSS
.one::first-letter {
display: inline-block;
background-color: red;
font-weight: bold;
font-size: 60px;
color: white;
}

Never Forget That (Always Search)

By: Amr Elsayed
 ‫الحالة الثانية تنسيق السطر األول بالكامل ”‪“.two::first-line‬‬
‫ن‬ ‫ن‬
‫ان انسق اول ِسطر فقط يف الجملة‬
‫ببساطه شديدة الغرض من العنرص المزيف دا تحديدا ي‬
‫‪CSS‬‬
‫{ ‪.two::first-line‬‬
‫;‪background-color: teal‬‬
‫;‪font-weight: bold‬‬
‫;‪font-family: Arial, Helvetica, sans-serif‬‬
‫;‪color: white‬‬
‫}‬

‫الحالة الثالثة الـ ”‪“Selection‬‬

‫ن‬
‫ان اغي لون التحديد ولون الكالم لما يتحدد‬
‫ببساطه شديدة الغرض من العنرص المزيف دا تحديدا هو ي‬

‫ن‬
‫معي‬ ‫دي بتكون الحالة الـ ‪ default‬لما تحدد كالم من سطر‬
‫‪CSS‬‬
‫{ ‪.three::selection‬‬
‫;‪background-color: black‬‬
‫;‪color: yellow‬‬
‫}‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫كثيا مبارًكا فيه كما ن‬
‫ينبغ لجالل وجهك ولعظيم سلطانك‬
‫ً‬
‫حمدا ً‬
‫طيبا ً‬ ‫ن‬
‫العالمي‬ ‫الحمد هلل رب‬
‫ي‬

‫‪By: Amr Elsayed‬‬

Pseudo Elements - Before_ After_ Content Lesson #36
After ‫ و الـ‬Before ‫ او العنرص المزيف باستخدام الـ‬pseudo Element ‫ببساطة شديدة الغرض من الـ‬
‫ن‬ ‫ن‬ ‫ن‬ ‫ن‬
‫ دون التعديل يف بنية‬CSS ‫ باستخدام الـ‬HTML ‫ان استخدمه يف انشاء محتوي او انشاء شكل يف بنية الـ‬
‫ي‬
HTML ‫الـ‬
CSS ‫ والـ‬HTML ‫دلوقت هنقوم بإنشاء بنية باستخدام الـ‬
‫ي‬
HTML
<div class="parent">
<div class="user">O</div>
<div class="one">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde harum
reiciendis modi sunt, porro quam culpa in, officiis ipsum repellat vel
sed iusto voluptatem animi repellendus reprehenderit, amet voluptas
dolorem.
</div>
</div>
<hr />

CSS
.parent {
margin-bottom: 20px;
margin-top: 50px ;
overflow: hidden;
}
.user {
background-color: #eee;
width: 50px;
margin-right: 20px;
padding: 10px;
height: 55.5px;
float: left;
font-size: 50px;
text-align: center;
}
.one {
background-color: #eee;
padding: 10px;
width: 600px;
float: left;
position: relative;
}

By: Amr Elsayed

 .. ‫ ن يف حاجه اطالقا‬HTML ‫ دون تدخل ال‬CSS ‫علشان اقدر اعدل ن يف الشكل األخي دا باستخدام ال‬
‫ن‬
‫ ي‬Before & After .. pseudo‫ ن‬elements ‫يح دور ال‬
‫الل زي ما قولنا قبل كدا يف استخدمها‬ ‫هنا ر ي‬
HTML ‫ممكن ننشأ شكل او محتوي يف بنية الـ‬
‫الل فيه الكالم‬ ‫للمستطيل‬ ‫ن‬
‫اليمي‬ ‫ع‬ Border ‫لنفيض نان عايز ر ئ‬
‫أنس‬
‫ي‬ ‫ي‬
After ‫باستخدام ال‬
CSS
.one::after {
content: "";
position: absolute;
height: 100%;
right: -10px;
border: 3px solid #009688;
top: -1px;
}

‫لنفيض نان عايز ر ئ‬

O ‫ الهدف منه االشارة للحرف‬arrow ‫أنس‬ ‫ي‬
Before ‫باستخدام ال‬
CSS
.one::before {
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
left: -20px;
background-color: white;
margin-top: -10px;
border-style: solid;
border-width: 10px;
border-color: transparent #009688 transparent transparent;
}

Content ‫ مش هتشتغل اطالقا إال ن يف وجود القيمة‬Before & After ‫ خاصية الـ‬:‫الحظ ان‬
CSS ‫المشار ليها بسهم فوق ن يف كود الـ‬
 ‫️♥راقت يل️♥‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬ ‫ن‬ ‫ن‬
‫الظالمي‬ ‫إن كنت من‬
‫إن أستغفرك واتوب إليك‪ ،‬ال اله اال انت سبحانك ي‬
‫اللهم ي‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪Pseudo Elements - Content And Trainings Lesson #37‬‬
‫ن‬
‫أول حاجه يف الدرس كانت العداد – ‪Counter‬‬
‫ببساطة شديدة جدا لو عندي ‪ Element 1000‬تحت بعض وعايز احط ليهم عداد يعدهم باليتيب‬
‫هنا ممكن استخدم خاصية الـ ‪Counter-increment‬‬
‫ن‬
‫ان عندي ‪ 5‬براجراف تحت بعض وعايز ارقمهم‬
‫لنفيض ي‬
‫‪HTML‬‬ ‫‪CSS‬‬

‫ُ‬
‫الل اسمها ‪ Counter-Increment‬واديها قيمة ‪ ..‬أي قيمة او م ي‬
‫سم‬ ‫بتاعت ي‬
‫ي‬ ‫بضيف الخاصية‬
‫وبعد كدا بروح للـ ‪ Before‬او الـ ‪ After‬و داخل الخاصية ‪ Content‬بختار قيمة اسمها‬
‫الل اديته للخاصية ‪Counter-increment‬‬‫‪ Counter‬واحط جواها االسم ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
attr() ‫ من خالل قيمة اسمها‬Attribute ‫ كمان بتقبل‬Counter-increment ‫مت‬
‫ زي ما بتقبل ي‬Content ‫الـ‬

HTML
CSS

HTML CSS

By: Amr Elsayed

 ‫‪Vendor Prefixes Lesson #38‬‬
‫ن ن‬
‫بتخليت يف حالة ظهور خاصية جديده‬
‫ي‬ ‫الل‬
‫نببساطه شديدة جدا الغرض من الدرس دا استخدام ال ‪ prefixes‬ي‬
‫يف ال ‪ CSS‬و المتصفحات لسه مدعمتش الخاصية دي بشكل كامل؛ او ان الخاصية دي تحت االنشاء؛‬
‫او تحت التجربة‬
‫ان استخدمها عشان اقدر اجرب الخاصية دي لحد ما يتم دعمها‬‫ن ن‬
‫يح دور ن الـ ‪ prefixes‬يف ي‬
‫هنا ر ي‬
‫بشكل كامل يف المتصحفات‬

‫‪Versions OF Browsers‬‬
‫‪1- Chrome‬‬

‫)‪2- Safari (Apple‬‬

‫‪3- Firefox‬‬

‫‪4- IE – Edge‬‬

‫‪5- Opera‬‬

‫‪-webkit-‬‬ ‫‪Chrome, Safari, New Versions of Opera‬‬

‫‪-moz-‬‬ ‫‪Firefox‬‬
‫‪-ms-‬‬ ‫‪Internet Explorer (IE), Microsoft Edge‬‬
‫‪-o-‬‬ ‫‪Old Versions of Opera‬‬

‫‪ -‬يمكنك استخدام موقع ‪ Can I use‬للتأكد من دعم المتصحفات ألي خاصية‬

‫‪ -‬يمكنك استخدام اضافه من إضافات ‪ VS Code‬لكتابة الخواص ي‬
‫الت تحتاج ‪ prefixes‬تلقائيا‬

‫‪By: Amr Elsayed‬‬

 ‫‪Border Radius Lesson #39‬‬
‫نصف القطر >‪Radius ----‬‬
‫خاصية الـ ‪ border-radius‬بتقبل اربــع قيم لكل ‪ Corner‬او بتقبل قيم من األربــع اتجاهات زي الـ ‪padding‬‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫ن‬
‫يف حالة ان ال ‪ border-Radius‬بيساوي نصف الـ ‪ Width‬و الـ ‪ height‬بيتحول الشكل لديرة‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫بمعت ان الـ ـ ‪ border-top-left-radius‬ممكن احط‬ ‫ن‬
‫قيمتي ‪..‬‬ ‫كل ‪ corner‬من األربعة بيكون ليه‬
‫ي‬
‫برقمي) غي بعض عادي جدا مش مجرد قيمة واحدة بس‬ ‫ن‬ ‫ن‬
‫قمتي‬ ‫ليه (‬

‫‪CSS‬‬

‫هيعتي انهم قيمة واحدة فقط‬

‫ر‬ ‫ن‬
‫القيمتي زي بعض‬ ‫لو خليت‬
‫ن‬
‫قمتي‬ ‫وبالتال هيتجاهل انهم‬
‫ي‬
‫ن‬
‫‪ -‬استخداماته الشائعة بتكون يف ‪buttons‬‬

‫اذكر هللا ️♥‬

‫ر‬ ‫ر‬
‫شء قدير‬ ‫ال اله اال هللا وحده ال شيك له ‪ ..‬له الملك وله الحمد وهو ي‬
‫عل كل ي‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫الح القيوم واتوب اليه‬
‫استغفروا هللا العظيم الذي ال اله اال هو ي‬
‫عل نبينا محمد ﷺ‬ ‫ّ‬
‫اللهم صل وسلم وزد وبارك ي‬
‫ينبغ لجالل وجهك ولعظيم سلطانك يا رب‬ ‫كثيا مبارًكا فيه كما ن‬
‫طيبا ً‬ ‫ً‬
‫حمدا ً‬ ‫اللهم لك الحمد‬
‫ي‬
‫العل العظيم‬
‫ي‬ ‫ال حول وال قوة اال باهلل‬
‫ن‬ ‫ن‬
‫الظالمي‬ ‫ان كن من‬
‫ال اله اال انت سبحانك ي‬

‫‪By: Amr Elsayed‬‬

‫‪Box Shadow And Examples Lesson #40‬‬

‫ن‬
‫ببساطة شديدة يمكن استخدام خاصية الـ ‪ Box-shadow‬يف عمل ظالل ‪ ,,‬الخاصية دي بتقبل اكي‬
‫من قيمة زي‬

‫أش او العمودي ؛ ‪ Blur‬ي‬

‫وه مدي‬ ‫االفف ؛ ‪ V-Shadow‬ي‬
‫وه الظل الر ي‬ ‫ي‬ ‫‪ H-Shadow‬ي‬
‫وه الظل‬
‫شفافية او وضوح الظل‪.‬‬

‫الـ ‪ Spread‬ودي معناها مدي انتشار الـ ‪ Shadow‬؛ وطبعا الـ ‪ Color‬هو لون الظل ؛ و ‪ Inset‬أو‬
‫ن‬
‫تعت ان الظل هيكون جوا الـ ‪ Box‬وال خارج الـ ‪Box‬‬
‫ه ي‬ ‫‪ Outset‬ي‬
‫‪HTML‬‬ ‫‪CSS‬‬

‫‪Shadow outset‬‬

‫‪Shadow inset‬‬

‫‪By: Amr Elsayed‬‬

‫ه‬ ‫ن‬ ‫خاصية الـ ‪ Box-Shadow‬بتقبل اكي من قيمة ‪..‬‬
‫الل ي‬
‫بمعت انك ممكن تحط القيم بتاعتك ي‬‫ي‬
‫‪ H-Shadow‬و ‪ V-Shadow‬و ‪ Blur‬و ‪ Spread‬و ‪ Color‬كقيمة واحده وتكررها اكي من مرة‬

‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫‪By: Amr Elsayed‬‬

‫‪The Box Model And Box Sizing Lesson #41‬‬
‫ه ان المحتوي يعمل ‪ include‬او احتواء للـ ‪padding‬‬‫ببساطة شديدة الغرض من الخاصية دي ي‬
‫عل الـ ‪ Width‬بتاعه‬ ‫ن‬
‫بمعت انه يتم إضافة ‪ padding‬للعنرص دون التأثي ي‬
‫ي‬ ‫و ال ـ ‪ Border‬ي‬
‫الل هيتم اضافته ‪..‬‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫‪ .1‬نف حالة لو زودت ال ـ ‪ margin‬بتاع العنارص هيحصل انه الـعنرصين مش هيبقوا جنب بعض واحد ن ن‬
‫هييل‬
‫ر ا‬ ‫ي‬
‫ن‬ ‫ن‬
‫وبالتال مع كل زياده للـ ‪ margin‬الزم ازود ال ـ ‪ width‬لالب بحيث انه ي‬
‫يبف يف مكان‬ ‫ي‬ ‫التان مباشة‬
‫ي‬ ‫تحت‬
‫يتسع للعنرصين جنب بعض‬

‫‪ .2‬نف حالة لو زدت ال ـ ‪ Padding‬برضو هيحصل ان العنرصين مش هيجوا جنب بعض و واحد ن ن‬
‫هييل‬
‫ر ا‬ ‫ي‬
‫ن‬ ‫ن‬
‫التان مباشة ‪ .....‬كذلك يف الـ ‪border‬‬
‫ي‬ ‫تحت‬

‫ن‬
‫الل هو ليه ‪ 300px width‬وموجود يف أب‬ ‫‪ .3‬الزيادة دي حصلت عشان الـ ‪ padding‬للعنرص ‪ One‬زاد ي‬
‫بالتال زيادة ال ‪ padding‬ألي عنرص هيخليهم يعدو الـ ‪ width‬بتاع األب‬
‫ي‬ ‫ليه ‪600px Width‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫وأخل العنرصين جنب بعض مهمها زودت يف ال ـ ‪ padding‬ي‬
‫يبف‬ ‫ي‬ ‫‪ .4‬طيب علشان اتجنب المشكلة دي‬
‫الل اسمها ‪ box-sizing‬و اديها القيمة ‪border-box‬‬
‫بتاعت ي‬
‫ي‬ ‫الزم استخدم الخاصية‬

‫‪ .5‬لو لحظت السهم بيشي يال انه تم اضافه ‪ 30px‬للـخاصية ‪padding‬‬

‫‪ .6‬مع إضافة خاصية ال ـ ‪ Box-Sizing‬بالقيمة ‪ border-box‬هيتم احتواء الـ ‪ 30px‬بتوع الـ ‪padding‬‬
‫للعنرص دون وجود أي مشكلة‬

‫‪ .7‬خاصية ال ‪ box-sizing‬بتحيم الـ ‪ height‬اذا ِ‬

‫وجد‬

‫الل هو الشكل دا * وبداخله خاصية الـ ‪ box-sizing‬بحيث‬

‫‪ .8‬يمكن استخدام الـ ‪ universal Selector‬ي‬
‫يكون شامل ألي حاجه ن يف الصفحة ‪ ...‬و متنساش الـ ‪prefixes‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪Transition Lesson #42‬‬
‫يوجد اربــع خواص متفرعة من خاصية الـ ‪Transition‬‬

‫‪1- Transition-duration‬‬

‫ن‬
‫ومعت القيمة ‪1s‬‬ ‫االنتقال‬ ‫ه‬ ‫تنفيذ‬ ‫اثناء‬ ‫العنرص‬ ‫هيستغرقها‬ ‫الل‬ ‫دة‬ ‫الخاصية دي مسؤولة عن ُ‬
‫الم‬
‫ي‬ ‫ي‬
‫انه هسيتغرق ‪ 1‬ثانيه اثناء التنفيذ‬

‫‪2- Transition-delay‬‬

‫ن‬
‫بمعت ان الـ ‪1s‬‬ ‫الل هيستغرقها العنرص عشان يبدأ ينفذ االنتقال ‪..‬‬
‫ي‬ ‫الخاصية دي مسؤوله عن المدة ي‬
‫دي معناها انه هياخد ‪ 1‬ثانيه عشان يبدا ينفذ االنتقال نفسه و هياخد ‪ 1s‬عشان يبدأ ينفذ الرجوع‬
‫ن‬
‫تان‬
‫الطبيغ ي‬
‫ي‬ ‫لوضعه‬

‫‪3- Transition-property:‬‬

‫الل‬ ‫ن‬ ‫ن‬

‫بمعت مي ي‬
‫ي‬ ‫الل تتأثر باالنتقال اثناء تنفيذ االنتقال دا‬
‫الخاصية دي مسؤوله عن تحديد أي الخواص ي‬
‫الل يحصل بالظبط وممكن‬ ‫الل يزيد وال أي ي‬ ‫الل يتأثر وال ال ‪ width‬هو ي‬
‫يتأثر الـ ‪ margin-left‬هو ي‬
‫بي الخواص بفاصلة ”‪“comma ,‬‬ ‫احدد اكي من خاصية جنب بعض تتأثر باالنتقال دا و بفصل ن‬

‫‪By: Amr Elsayed‬‬

 ‫‪4- Transition-timing-function‬‬

‫ن‬ ‫ن‬ ‫الخاصية دي الغرض منها التحكم ن يف ‪ Curve‬الرسعة ‪..‬‬

‫بمعت انه الغرض منها التحكم يف شكل شعة‬
‫ي‬
‫و استجابة العنرص اثناء تنفيذ ال ـ ‪transition‬‬
‫;‪Transition-timing-function: ease‬‬ ‫‪Default Value‬‬

‫‪Ease‬‬ ‫ئ‬
‫بط‬ ‫ينته‬ ‫بط بعدين يرسع بعدين‬ ‫ئ‬ ‫ال انه االنتقال يبدا‬
‫ي‬ ‫بتشي ي‬
‫ن‬ ‫ن‬
‫‪Linear‬‬ ‫خط نفس الرسعة ثابته سواء يف األول او يف االخر‬‫ي‬ ‫بشكل‬
‫‪Ease-out‬‬ ‫طبيغ والنهاية بتكون بطيئة‬
‫ي‬ ‫يبدا بشكل‬
‫‪Ease-in‬‬ ‫طبيغ‬ ‫ئ‬
‫بط وبعدين يكمل بشكل‬ ‫يبدأ‬
‫ي‬
‫‪Ease-in-out‬‬ ‫ئ‬
‫بط‬ ‫وينته‬
‫ي‬ ‫ئ‬
‫بط‬ ‫يبدا‬

‫ن‬ ‫نف فرق ن‬

‫بي الـ ‪ Ease‬و الـ ‪ Ease-in-out‬الـ ‪ Ease‬بيكون يف شعة نسبيه اثناء تطبيق تأثي االنتقال‬ ‫ي‬

‫ئ‬
‫بط دون وجود أي شعة اثناء تطبيق تأثي االنتقال‬ ‫نته‬ ‫ئ‬
‫بط و بي ي‬ ‫ئ‬
‫بط وبيكمل‬ ‫لكن الـ ‪ Ease-in-out‬بيبدأ‬

‫الخاصية المخترصة ‪5-Transition – Shorthand‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪CSS‬‬

‫معناه أي كتابة الـك ـ ـ ـ ــود دا‬

‫معناه ان كتبت الـ ‪Transition – Shorthand‬‬
‫ه الـ ‪Width‬‬ ‫‪ -1‬حددت الـ ‪ Transition-property‬ي‬
‫الل ي‬
‫ن‬
‫ال ال ـ ‪ .. Transition-duration‬الوقت ي‬
‫الل هيستغرقه العنرص يف تنفيذ‬ ‫‪ -2‬كتبت ‪ 2s‬ي‬
‫الل بتشي ي‬
‫االنتقال‬

‫ال الـ ‪ .. Transition-delay‬الوقت ي‬

‫الل هيستغرقه العنرص عشان يبدا‬ ‫‪ -3‬كتبت ‪ 1s‬ي‬
‫الل بتشي ي‬
‫تنفيذ االنتقال‬

‫الل بتشي يال الـ ‪Transition-timing-function‬‬

‫‪ -4‬كتبت ‪ Ease-in‬ي‬

‫هيح بعالمة ‪,‬‬

‫الل ر ي‬
‫ن‬
‫بعد كدا تم الفصل بينها وبي ي‬
‫ن‬
‫ه الـ ‪ height‬مع نفس الخطوات ي‬
‫الل فوق‬ ‫الل ي‬ ‫‪ -5‬بدأت بعد كدا يف تحديد الخاصية التانية ي‬
‫الل بدلت الـ ‪ Ease-in‬بـ ـ ـ ‪linear‬‬
‫عدا الخطوة رقم ‪ 4‬ي‬

‫‪By: Amr Elsayed‬‬

 ‫️♥راقت يل️♥‬

‫‪Animatable CSS properties‬‬

‫اذكر هللا ️♥‬
‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫عل نبينا محمد ﷺ‬ ‫ّ‬
‫اللهم صل وسلم وزد وبارك ي‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫ن‬ ‫ال اله اال انت سبحانك ن‬
‫الظالمي‬ ‫ان كنت من‬‫ي‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 Important Declaration And Use Cases Lesson #43
!Important Declaration ---------> ‫!ترصيـ ـ ـ ــح مهـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــم‬

inline style ‫ أو‬internal Style ‫ ودا يكون‬html ‫ن يف بعض األحوال بيكون ن يف تنسيق داخل ملف الـ‬
‫ن‬
‫الل بيكون اقوي حاجه يف التنسيقات جميعا‬
‫ي‬
!important ‫ هو انك تكتب جنب التنسيق بتاعتك كلمه‬.. ‫عل التنسيق دا‬
‫ ي‬override ‫الحل عشان ت ـ ـ ـ‬
CSS External Style ‫ن يف ملف الـ‬

HTML
(inline-style)

HTML
(internal-style)

CSS
(External-style)

Never Forget That (Always Search)

By: Amr Elsayed
 ‫‪The Margin Collapse Lesson #44‬‬
‫ن‬ ‫ببساطة شديدة الغرض من الخاصية دي ه معرفة انه بيحصل دمج ن‬
‫بي أي عنرصين تحت بعض يف حالة‬ ‫ي‬
‫ن‬
‫الل تحت دا حبيت‬ ‫لو حبيت احط ‪ margin-bottom‬لعنرص وهو تحته عنرص ي‬
‫تان وجيت عند العنرص ي‬
‫احطله ‪ margin-top‬نف الحالة دي هيحصل ‪ Collapse‬ن‬
‫بي العنرصين و هيدمج الـ ‪ margin‬بينهم‬ ‫ي‬

‫‪CSS‬‬ ‫‪HTML‬‬

‫‪Margin-Collapse‬‬

‫ر ا‬
‫مباشة وعملت ‪ margin-bottom‬أو‬ ‫اذا الغرض من الدرس دا هو ان لو فيه عنرصين تحت بعض‬
‫ن‬ ‫ن‬ ‫ن‬
‫‪ margin-top‬لحد فيهم الـ ‪ margin‬دا بيحصله ‪ Collapse‬او بيحصل اتحاد بي االتني فبيكون ي‬
‫يعت‬
‫وكانه اتعمل للعنرصين سوا‬
 ‫االن ‪:‬‬
‫الحظ ي‬
‫ن‬ ‫‪ )1‬الـ ‪ collapse‬مش بيحصل ن‬
‫بي العنارص غي يف الوضع العمودي‬
‫ن‬ ‫‪ )2‬لو نف عنرص اديته ‪ margin‬اكي من ن‬
‫اكي هو ي‬
‫الل‬ ‫الل خد ‪ margin‬ر‬
‫التان أي واحد فيهم يف الحالة دي الـعنرص ي‬
‫ي‬ ‫ر‬ ‫ي‬
‫هيطبق‬

‫‪Bigger‬‬
‫‪Margin-Collapse‬‬
‫‪Bigger Wins‬‬

‫‪ )3‬ال يعمل الـ ‪ Margin-collapse‬نف حالة تم الفصل ن‬

‫بي العنرصين بوجود عنرص أخر بينهما‬ ‫ي‬

‫فاصل – ‪Separator‬‬

‫ن‬
‫بمعت لو دخلت ال ـ‪ down div‬داخل عنرص أب‬ ‫‪ )4‬الـ ‪ Nesting‬ال يمنع الـ ‪ margin-collapse‬من حدوثه ‪..‬‬
‫ي‬
‫الل فوقه برضو‬ ‫ن‬
‫دا مش هيمنع حصول ال ‪ collapsing‬بينه وبي العنرص ي‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
‫‪CSS Variables And Trainings Lesson #45‬‬
‫ن‬ ‫ن‬
‫ببساطة شديدة بيتم استخدام المتغيات يف ملف ال ـ‪ CSS‬عشان احفظ جواها قيم لكل العنارص يف حالة لو‬
‫ن‬
‫بالتال وجود المتغيات يف اول الصفحة‬
‫ي‬ ‫حبيت اغي قيم العنارص دي مبقاش ُمضطر اروح لكل عنرص اغي قيمته‬
‫ن‬ ‫ن‬
‫بيديت مرونة اكي يف تغي أي قيمة بمجرد تغي قيمة الـ ‪ Variables‬نفسها‬
‫ي‬ ‫عندي‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫ن‬ ‫ن‬
‫المنطف اروح لكل عنرص اغي لونه ؟!‬
‫ي‬ ‫يف حالة لو حبيت اغي كل األحمر ي‬
‫الل يف العنارص هل من‬
‫يح دور الـ ـ ‪Variables‬‬
‫هنا ر ي‬

‫‪By: Amr Elsayed‬‬

 ‫‪Global Variables‬‬
‫ن‬
‫يسم ‪ Root‬وبعد كدا بيتم استعمال القيمة )(‪ var‬وبداخلها اسم الـ ‪Variable‬‬
‫ي‬ ‫يتم وضع المتغيات يف عنرص‬

‫بتاع او أي مشكلة حصلت مع العنرص‬

‫ي‬ ‫الـ ‪ Fallback value‬تشي يال انه لو حصل اي مشكله ن يف الـ ‪variable‬‬
‫‪ - :root‬الـ ‪ fallback‬بتحل محل الـ ‪ variable‬دا‬
 ‫بمعت زي ما تكتبه ن يف عنرص ‪ Root‬الزم تكتبه زي ما هو ن يف القيمة )(‪Var‬‬
‫ي‬
‫ن‬ ‫اسم الـ ‪ variable‬حساس ‪..‬‬
‫ن‬
‫اع وجودها‬‫بمعت لو فيه حروف ‪ Capital‬الزم تر ي‬
‫ي‬
‫ن‬ ‫ن‬ ‫ن‬
‫يف بعض الحاالت ممكن احتاج اعمل عملية حسبية يف الـ ‪ padding‬يف الحالة دي هستخدم القيمة )(‪ calc‬و‬
‫بتاع‬
‫ي‬ ‫‪ +‬اسم الـ ‪variable‬‬ ‫بداخلها القيمة )(‪var‬‬

‫)‪Padding : 15px + (20px --mainPadding‬‬

‫‪Local Variables‬‬
‫بيتم استخدام الـ ‪ variables‬داخل الـ ‪ Scope‬الخاص بالعنرص نفسه دون اللجوء يال الـ ‪:root‬‬
‫يمس عليها‬‫بمعت ادق العنرص بيخصص لنفسه هو متغيات ر‬ ‫ن‬
‫ي‬ ‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ْ‬ ‫َ ْ َ َّ ُ َ َ َ َّ ُ َ َ َ ْ َ َ َّ ْ ُ‬
‫ت َو ُه َو َر ُّب ْال َع ْ‬
‫ش ال َع ِظيم‬
‫ِ‬ ‫ر‬ ‫حس ِر يت اَّلل َل ِإله ِإَل هو علي ِه توكل‬
‫تكلت ال نفس طرفة ن‬‫شأن كله وال ن‬ ‫يا ح يا قيوم برحمتك استغيث أصلح ل ن‬
‫عي‬ ‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬
‫الحمد هلل بال سبب‪ ،‬الحمد هلل بال طلب‪ ،‬الحمد هلل بال عدد‪ ،‬الحمد هلل حت ن‬
‫يرض‪.‬‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
Flex-Box From Lesson #46 To Lesson #54
Flex Box (Parent - Direction_ Wrap_ Flow) Lesson #46

- Parent
Flex ‫الل بياخد خاصية ال ـ‬
‫الل جواه عشان العنرص االب دا هو ي‬
‫الزم يكون فيه عنرص أب ماسك العنارص ي‬

display: flex => To Start Flexible box

HTML CSS

‫ كلها عادي‬flex ‫ وتستمتع بخواص الـ‬display: flex ‫ نفسه تاخد‬parent ‫الل جوا الـ‬
‫ممكن العنارص ي‬

By: Amr Elsayed

 ‫ن‬
‫بالعرن‬
‫ري‬ ‫الغرض من الـ ‪ Flex-direction‬لو غيت اتجاه الصفحة بتاعتك لـ ‪ rtl‬ي‬
‫يعت المحتوي كله بقا‬
‫الل جوا العنرص االب هيتغي اتجاهه لـ ‪ rtl‬ودي كانت ر‬
‫اكي مشاكل‬ ‫كل المحتوي بتاعك بما فيهم المحتوي ي‬
‫بيحيك تروح لكل عنرص تغيله ال ‪ direction‬بتاعه‪.‬‬
‫ر‬ ‫خاصية الـ ـ ‪ float‬إلنه كان‬

‫الل‬ ‫ن‬
‫الخاصية دي مسؤولة عن تغي اتجاه العنارص من الشمال لليمي دون تغي اتجاه الصفحة بالكامل ي‬
‫كنت بحتاج اعمله من خالل خاصية ‪direction: rtl‬‬

‫ن‬
‫لليمي‪ ،‬ولكن لو بصيت ع العنارص‬ ‫األصل من الشمال‬ ‫هتالف ان اتجاه الصفحة‬ ‫لو الحظت كلمة ‪Flex Box‬‬
‫ي‬ ‫ي‬
‫ن‬ ‫ن‬
‫اليمي للشمال ودا الغرض من ‪Row – Reverse‬‬ ‫الل يف الـ ‪ box‬هتالحظ ان اتجاها من خالل الـ ‪ one‬من‬
‫ي‬

‫الخاصية دي مسؤولة عن تغي شكل العنارص ف الصفحة بحيث تكون بشكل عمودي تحت بعض‬

‫ن‬
‫يبف‬
‫والل كان فوق ي‬
‫ي‬ ‫يبف فوق‬ ‫وه يف الوضع العمودي بحيث ي‬
‫الل كان تحت ي‬ ‫خاصية مسؤولة عن عكس العنارص ي‬
‫تحت‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫ن‬
‫اض دا معناه ان لو انا ‪ 4‬عنارص وكل عنرص واخد ‪ 25%‬من الـ ‪width‬‬
‫يف حالة وضع الـ ‪ Flex-wrap‬ع الوضع االفي ي‬
‫عل الـ ‪ width‬ي‬
‫الل انا محدده‬ ‫بتاع االب وجيت انا ضفت عنرص خامس عليهم هيحصل ‪ override‬ا ي‬
‫باف العنارص ن يف الصندوق متجاهًل تماما الـ ‪width‬‬
‫بحيث ان العنرص الخامس دا يخش مع ي‬

‫اخل الـ ‪ Box‬يحتوي فقط ع األربــع عنارص ي‬

‫الل بالمناسبة كل عنرص منهم‬ ‫طب لو عايز امنع دا و ي‬
‫ُ‬
‫واخد ‪ 25%‬من مساحة الـ ‪ Width‬الكلية فأنا ‪ already‬مش عايز أي عنرص ر ي‬
‫يح جنبهم !‬

‫ن‬ ‫كدا هو نفذ المطلوب ان أي عنرص زياده عل مساحة الـ ‪ container‬يتعمله ‪ wrap‬ن ن‬
‫وييل تحت يف صف جديد‬ ‫ي‬

‫الل اتعمله ‪ Wrapping‬بدل ما يكون تحت ي‬

‫يبف‬ ‫الغرض من الـ ‪ wrap-reverse‬انه يتم عكس الـجزء ي‬
‫فوق‬
 ‫‪Shorthand Property‬‬

‫ن‬
‫الخاصيتي ‪ Flex-Direction‬و ‪ Flex-Wrap‬من خالل خاصية الـ ـ ‪Flex-Flow‬‬ ‫يمكن الدمج ن‬
‫بي‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫سبحان هللا وبحمده سبحان هللا العظيم‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫لل فات‬
‫تلخيص شيـ ــع جدا ي‬

‫‪By: Amr Elsayed‬‬

 ‫‪Flex Box Parent - Justify Content Lesson #47‬‬

‫‪-‬‬ ‫‪Parent‬‬
‫‪HTML‬‬ ‫‪CSS‬‬

‫تبف جزء واحد ن يف بداية ال ـ ‪Container‬‬

‫الل أصال ال ـ ‪ Default‬ان العنارص كلها ي‬
‫الغرض من الخاصية دي ي‬

‫تبف جزء واحد ن يف أخر ال ـ ‪Container‬‬

‫الغرض من الخاصية دي ان العنارص كلها ي‬
 ‫الل موجود ن يف الـ ‪Container‬‬
‫ه عمل توسيط للـ ‪ content‬ي‬
‫الغرض من الخاصية دي ي‬

‫األساش من الخاصية دي هيكون‬

‫ي‬ ‫خد بالك ان الغرض‬
‫توزيـ ــع العنارص بتاعتك بشكل افف او ن‬
‫عرض‬
‫ي‬ ‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫بمعت لو عندي ‪ 3‬عنارص ن يف ال ـ ‪Container‬‬
‫ي‬
‫ن‬ ‫الغرض من الخاصية دي انه يعمل مسافات ن‬
‫بي العنارص وبعضها ‪..‬‬
‫واخدين ‪ 100%‬من ال ـ ‪ .. Width‬اذا انا الزم اقلل ال ـ ‪ Width‬بتاعهم بحيث الباف يتوزع كمسافات ن‬
‫بي العنارص دي‬ ‫ي‬

‫ان عندي ‪ 3‬عنارص علشان احط‬ ‫ن‬

‫الغرض من الخاصية دي انه يعمل مسافه قبل و بعد كل عنرص ‪ ..‬لو افيضنا ي‬
‫يعت من مساحة االب الزم اوفر ‪ 6%‬للمسافات‬ ‫ن‬
‫مسافات قبلهم وبعدهم اذا هحتاج ‪ 6‬مسافات ي‬
‫ً‬ ‫ن‬
‫اجمال المسافات هيكون‬
‫ي‬ ‫ا‬‫اذ‬ ‫بتخليت أحط قبل كل عنرص و بعده ‪ 1%‬و بما انهم ‪ 3‬عنارص ‪....‬‬
‫ي‬ ‫الخاصية دي‬
‫‪ %6‬لمجموع ال‪ 3‬عنارص ؛ مسافه قبل وبعد كل عنرص‬

‫ن‬ ‫الغرض من الخاصية دي ه وضع مسافات قبل و بعد و ن‬

‫بي العنارص يف وقت واحد و بتكون مسافات‬ ‫ي‬
‫متساوية‬
 ‫لل فات‬
‫تلخيص شيـ ــع جدا ي‬

‫األساش من الخاصية دي هيكون‬

‫ي‬ ‫خد بالك ان الغرض‬
‫توزيـ ــع العنارص بتاعتك بشكل افف او ن‬
‫عرض‬
‫ي‬ ‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫‪Flex Box Parent - Align Items Lesson #48‬‬
‫‪-‬‬ ‫‪Parent‬‬

‫ن‬ ‫‪ -1‬الغرض من الخاصية دي بشكل عام هو ن‬

‫تبف يف‬
‫ي‬ ‫بحيث‬ ‫ترتيبها‬ ‫أضبط‬ ‫او‬ ‫العنارص‬ ‫اوزع‬ ‫ان‬
‫ي‬ ‫ُ‬
‫األعل او ن يف النص او ن يف األسفل‬

‫ن‬ ‫ن‬ ‫معت الكالم دا ن‬

‫‪ -2‬ن‬
‫المعت‬
‫ي‬ ‫طول التالتة نفس‬
‫ي‬ ‫او‬ ‫أش‬
‫ي‬ ‫ر‬ ‫او‬ ‫عمودي‬ ‫بشكل‬ ‫بتاعت‬
‫ي‬ ‫العنارص‬ ‫ف‬
‫ي‬ ‫اتحكم‬ ‫بقدر‬ ‫ان‬
‫ي‬ ‫ي‬

‫ن‬
‫ه بتتحكم يف توزيـ ــع او ترتيب العنارص‪ ،‬ولكن بشكل‬ ‫الل ي‬ ‫‪ -3‬دا عكس خاصية الـ ‪ justify-content‬ي‬
‫ُ‬ ‫ن‬ ‫ن‬ ‫افف او ن‬
‫ليمي او للشمال او للنص‬ ‫بمعت انها مسؤوله عن توزيـ ــع العنارص ل‬
‫ي‬ ‫‪..‬‬ ‫عرض‬
‫ي‬ ‫ي‬

‫ئ‬
‫تلقان كلما زاد ال ـ ‪Height‬‬
‫ي‬ ‫ال ـ ـ ـ ـ ‪ Default Value‬بتشي ي‬
‫ال ان العنارص بتتمدد بشكل‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬

 ‫ه توزيـ ــع العنارص بشكل عمودي بحيث تكون ن يف أول الـ ‪Container‬‬
‫الغرض من الخاصية دي ي‬

‫بتاعت او اوزعها بشكل عمودي بحيث تكون ن يف المنتصف‬

‫ي‬
‫ن‬
‫ان ارتب العنارص‬
‫الغرض من الخاصية دي ي‬

‫ه توزيـ ــع العنارص بشكل عمودي بحيث تكون ن يف أخر الـ ‪Container‬‬
‫الغرض من الخاصية دي ي‬
‫‪HTML‬‬ ‫‪CSS‬‬

‫توسيط العنرص‬
‫بشكل ن‬
‫عرض‬
‫ي‬
‫بشكل عمودي‬

‫اسياحة ر‬
‫نرسب الشاي‬

‫‪By: Amr Elsayed‬‬

 ‫‪Flex Box Parent - Align Content Lesson #49‬‬

‫ن‬
‫الغرض من الخاصية دي بشكل عام هو التحكم يف الـ ـ ـ ‪ Content‬كله بالكامل وبشكل عمودي‬

‫بتاع بالكامل ن يف األعل‬

‫ي‬ ‫اخل الـ ‪content‬‬
‫ي‬
‫ن‬
‫ان‬
‫الغرض من الخاصية دي ي‬
 ‫بتاع بالكامل ن يف األسفل‬
‫ي‬ ‫اخل الـ ‪content‬‬
‫ي‬
‫ن‬
‫ان‬
‫الغرض من الخاصية دي ي‬

‫الغرض من الخاصية دي وجود مسافة ن‬

‫بي ال ـ ‪Content‬‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫ن‬
‫بمعت اخر مسافة فوق و تحت‬ ‫الغرض من الخاصية دي وجود مسافة قبل و بعد الـ ‪ Content‬او‬
‫ي‬
‫الـ ‪Content‬‬

‫الغرض من الخاصية دي وجود مسافة قبل و بعد و ن‬

‫بي ال ـ‪ Content‬والمسافة دي بتكون متساوية‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫️♥راقت يل️♥‬

‫عل ربنا رزقك محفوظ‬

‫والباف ي‬
‫ي‬ ‫الل عليك‬
‫اسغ و لكل مجتهد نصيب أعمل ي‬
‫ي‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫َ ا ُ َ َّ ا‬ ‫ً‬ ‫ّ‬ ‫ًْ‬ ‫ً‬ ‫ً‬ ‫َُ َ‬ ‫َّ َّ نّ‬
‫ورزقا طيبا‪ ،‬وعمًل متقبًل‪.‬‬ ‫إن أسألك ِعلما نافعا‪ِ ،‬‬ ‫اللهم ي‬
‫َ َ َ‬ ‫ْ‬ ‫ْ َ َ ُ ْ َ َ ُ‬ ‫َّ ُ َّ َ نّ َ َ‬
‫اللهم أ ِع يت عل ِذك ِرك‪ ،‬وشك ِرك‪ ،‬وحس ِن ِعباد ِتك‪.‬‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‪.‬‬ ‫اللهم ّ‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫‪Flex Box Child - Grow_ Shrink_ Order Lesson #50‬‬

‫‪-‬‬ ‫‪Child‬‬

‫ه انه لما يكون عندك ‪ 6‬عنارص مثال وارد وانت بتقلل الـ ‪ width‬بتاع‬
‫الغرض من "خاصية النمو" دي ي‬
‫وباف العنارص بتنكمش هو يفضل ينمو‬‫حت ي‬ ‫تبف عايز عنرص من ال ‪ 6‬عنارص دول يفضل ينمو ي‬
‫ي‬ ‫العنارص دي‬

‫‪HTML‬‬

‫الل بتحطها لخاصية ال ‪ flex-grow‬لو كانت ‪ 2‬مثال ي‬

‫يبف انت كدا‬ ‫طبعا يتوقف ع حسب القيمة ي‬
‫ن‬
‫عايز العنرص دا ينمو مرتي ضعف ي‬
‫باف العنارص‬

‫‪By: Amr Elsayed‬‬

‫ه انه لما يكون عندي ‪ 6‬عنارص مثال وارد وانت بتقلل الـ ‪width‬‬
‫الغرض من "خاصية االنكماش" دي ي‬
‫ف عايز عنرص من ال ‪ 6‬عنارص دول ينمكش اكي من ي‬
‫باف العنارص ‪ ..‬ي‬
‫خل بالك انا هنا‬ ‫بتاع االب نفسه تب ي‬
‫بقلل عرض الـ ‪ Container‬األب مش بقلل حجم العنارص نفسها‬

‫‪HTML‬‬

‫الل بتحطها لخاصية ال ‪ flex-shrink‬لو كانت ‪ 3‬مثال ي‬

‫يبف انت‬ ‫عل حسب القيمة ي‬
‫طبعا دا يتوقف ي‬
‫كدا عايز العنرص دا ينكمش تلت مرات ضعف ي‬
‫باف العنارص‬

‫ه ترتيب توزيـ ــع العنارص ي‬

‫الل عندي لو حابب ان اول عنرص ع الشمال‬ ‫الغرض من الخاصية دي ي‬
‫يبف الزم استخدم خاصية الـ ‪order‬‬ ‫ن‬
‫يبف هو اخر عنرص ع اليمي ي‬‫ي‬
‫الل بتتحكم فيه من الـ ‪A-Z‬‬
‫ذك انت ي‬
‫والحظ ان اليتيب دا مش ي‬

‫;‪Order: 5; Order: 6‬‬

‫ن‬
‫بالتال قدرت اتحكم يف ترتيب وجودهم‬
‫ي‬ ‫عل سبيل المثال انا اديت العنرص ‪ 1‬و ‪ 2‬خاصية الـ ‪order‬‬
‫هنا ي‬
‫ن‬
‫بي العنارص‬
 ‫‪Flex Box Child - Flex Basis_ Flex Shorthand Lesson #51‬‬

‫‪-‬‬ ‫‪Child‬‬

‫ن‬
‫ه انها تحل محل الـ ‪ width‬يف حالة لو كان الـ ـ ‪ direction‬معمول‬ ‫‪ -‬الغرض من الخاصية دي ي‬
‫ن‬
‫بمعت التحكم‬
‫ي‬ ‫‪ Row‬وتحل محل الـ ‪ height‬كمان ن يف حالة لو ال ـ ‪ direction‬معمول ‪.. Column‬‬
‫الل ممكن‬ ‫عل خاصية ال ‪ flex-direction‬ي‬ ‫بالخاصية دي بيختلف من العرض او الطول اعتمادا ي‬
‫تحددها ‪ row‬او ‪column‬‬
‫‪ -‬بيتم فيها استخدم الـ ‪ CSS units‬عادي زي ال ـ ‪ width‬و الـ ‪height‬‬

‫الل موجوده ن يف ‪ Container‬واخد خاصية الـ ـ ‪Flex‬‬

‫‪ -‬الخاصية دي مش هتشتغل اال مع العنارص ي‬

‫‪ -‬الـ ‪ flex-basis‬بيحيم ال ـ ‪max-width‬‬

‫ن‬
‫يعت ع سبيل المثال العنرص رقم ‪ 2‬واخد الخاصية ‪ flex-basis‬و كمان الـ ‪Direction‬‬
‫ي‬
‫بالتال هو كدا اتعامل مع الـ ‪height‬‬
‫ي‬ ‫بتاع الـ ‪ Container‬معمول ‪column‬‬

‫;‪Flex-basis: 200px‬‬

‫لكن لو كنت استعملت الـ ‪ width‬بدل الـ ‪Flex-basis‬‬

‫والـ ‪ direction‬كان ‪ column‬كنت هقابل مشكلة‬
‫ان العنرص رقم ‪ 2‬خد بالفعل ‪200px – width‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪Shorthand‬‬

‫ن‬
‫يتم استخدام الـ ‪ Shorthand‬بحيث يمكن كتابة جميع الخواص يف سطر كود واحد‬

‫اخر حاجه‬
‫ُ‬ ‫ن‬
‫الل ديما بيكون واخد ال ـ‪full-width‬‬
‫ي‬ ‫‪Container‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫جنب‬ ‫عنرص‬ ‫ط‬‫اح‬ ‫عايز‬ ‫لو‬ ‫حالة‬ ‫ف‬
‫ي‬
‫هستخدم الـ ‪inline-flex‬‬
‫ن‬ ‫ن‬
‫ان اعمل صندوق مرن عادي جدا بس يكون ‪ inline‬يف نفس‬ ‫الغرض من الخاصية دي ي‬
‫الوقت بحيث انه يقدر ياخد عنارص تانية جنبه‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 Flex Box Child - Align Self_ Games_ Task lesson #52
- Child

‫ن‬ ‫ن ن‬ ‫ن‬ ‫ن‬

‫الل جنبه يف نفس‬ ‫ان اتحكم يف عنرص معي يف الوضع العمودي بخالف ي‬
‫باف العنارص ي‬ ‫الخاصية دي بتتيح يل ي‬
Container‫الـ‬

‫ن‬
HTML ‫ يف ملف الـ‬inline-style ‫تم استخدام الخاصية ك‬

Play Flex -box Froggy Game & Flex-box Zombie Game

By: Amr Elsayed

 ‫الل فات‬
‫تلخيص شيـ ــع جدا للجزء ي‬

shorthand

Never Forget That (Always Search)

By: Amr Elsayed
 ‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ْ‬ ‫َ ْ َ َّ ُ َ َ َ َّ ُ َ َ َ ْ َ َ َّ ْ ُ‬
‫ت َو ُه َو َر ُّب ْال َع ْ‬
‫ش ال َع ِظيم‬
‫ِ‬ ‫ر‬ ‫حس ِر يت اَّلل َل ِإله ِإَل هو علي ِه توكل‬
‫تكلت ال نفس طرفة ن‬
‫عي‬ ‫شأن كله وال ن‬ ‫ن‬
‫ي‬ ‫ي ي‬ ‫ح يا قيوم برحمتك استغيث أصلح يل ي‬ ‫يا ي‬
‫الحمد هلل بال سبب‪ ،‬الحمد هلل بال طلب‪ ،‬الحمد هلل بال عدد‪ ،‬الحمد هلل حت ن‬
‫يرض‪.‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪Filters Lesson #54‬‬
‫ببساطة شديدة الغرض من خاصية الـ ‪ Filters‬هو وضع اكي من ‪ filter‬ع التصميم بتاعك زي الـ ‪filters‬‬
‫الل ممكن تحطها ع صورك اثناء تعديلها عادي جدا‬
‫ي‬

‫‪CSS‬‬

‫‪Before hover‬‬ ‫‪After Hover‬‬

‫عل موقع ‪Can I‬‬ ‫متنساش تدخل ي‬
‫‪ Use‬علشان تشوف ال ‪filter‬‬
‫بيـ ‪ support‬أي علشان ميحصلش‬
‫ن‬
‫أي مشكله يف التصميم و الشغل‬

‫‪By: Amr Elsayed‬‬

 Gradients Lesson #55

‫تدرج األلوان‬
Direction || Angle -----> ‫اتجاه تدرج األلوان‬
Direction (to Top OR to Right OR to bottom OR to left)
Angle (0deg OR 90deg OR 180deg OR 270deg) OR (num of deg)
‫ زي الصورة ما هتوضح كدا‬CSS Units ‫بعد كدا األلوان تقدر تتحكم فيها بنسب مئوية او أي‬

By: Amr Elsayed

 ‫ن‬
‫تدرج األلوان عشان ميكونش متداخل يف بعضه زي الصورة دي كدا‬

‫ن‬ ‫ن‬
‫الل قبله ويتحدد هيقف لحد‬ ‫الزم تحدد اللون هيبدأ مني لحد في واللون ي‬
‫الل بعده يستلم من اللون ي‬
‫ن‬ ‫ن‬
‫في وهكذا كما هو موضح يف الـ ‪ code‬القادم‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
‫‪Pointer Events and Caret Color Lesson #56‬‬
‫هو تغي ر‬
‫مؤش الكتابة للون يناسب هوية وشكل الموقع الخاص بك >‪Caret color ----‬‬
‫‪HTML‬‬ ‫‪CSS‬‬

‫ه التحكم ن يف الحدث اثناء الضغط ع لينك مثال >‪Pointer Events ----‬‬

‫الغرض من الخاصية دي ي‬

‫‪HTML‬‬

‫‪CSS‬‬

‫حت لو عملت ‪ Hover‬عليه او ي‬

‫حت لو حبيت اضغط عليه مش هيضغط‬ ‫مفيش اي تأثي بيحصل للـ ‪ link‬ي‬
‫خالص‬

‫‪By: Amr Elsayed‬‬

 ‫️♥راقت يل️♥‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬
‫الظالمي‬ ‫ال إله اال انت سبحانك إ ن ين كنت من‬
‫اللهم ّ‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬
‫الحمد هلل و الشكر هلل‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫‪By: Amr Elsayed‬‬

‫‪Grid From Lesson #57 To Lesson #64‬‬
‫‪Grid - Parent - Template Columns Lesson #57‬‬
‫‪-‬‬ ‫‪Parent‬‬
‫الل بياخد خاصية ال ـ‬
‫الل جواه عشان العنرص االب دا هو ي‬
‫الزم يكون فيه عنرص أب ماسك العنارص ي‬
‫‪Grid‬‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫طبعا زي الـ ‪ Flex‬لو حبيت تجيب عنرص جنب توزيعة الـ ‪ grid‬هستخدم‬

‫ن‬ ‫تعالوا ر‬
‫نرسح بقا كل حاجه يف الـ ‪ Comment‬دا‬
 ‫ن‬
‫ه خاصية مسؤولة عن انشاء وتكوين األعمدة والتحكم يف عددها‬
‫ي‬

‫‪Px - % - auto‬‬

‫ن‬
‫معت الكود كدا دا انه هيتم انشاء ‪ 3‬أعمدة‬
‫ي‬
‫‪ -‬العمود األول ‪200px‬‬
‫‪ -‬العمود ن‬
‫التان ‪ 25%‬من مساحة الـ ‪Container‬‬
‫ي‬
‫ن‬
‫بمعت انه هياخد المساحة الباقية بعد توزيـ ــع الـ ‪ 200px‬و الـ ‪25%‬‬ ‫‪ -‬العمود التالت هيكون ‪auto‬‬
‫ي‬

‫ن‬
‫ه ‪600px‬‬
‫ي‬ ‫‪parent‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫او‬ ‫األب‬ ‫مساحة‬ ‫ان‬ ‫جاي‬ ‫والل‬
‫ي‬ ‫فات‬ ‫الل‬
‫ي‬ ‫المثال‬ ‫ف‬
‫خل بالك ي‬
‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫)( ‪Repeat‬‬

‫الغرض من الـ )(‪ repeat‬انه بدل ما اكرر كتابة األعمدة ‪ 5‬مرات ال انا ممكن استخدم ‪ repeat‬وجواها‬
‫ُ‬
‫الل هيخدها كل عمود‬ ‫عدد األعمدة و المساحة ي‬

‫ال عدد االعمدة والقيمة ‪ Auto‬تشي لتوزيـ ــع‬ ‫ن‬

‫معت الكود دا انه هيحصل تكرار حيث يشي الرقم ‪ 5‬ي‬
‫ي‬ ‫اذا‬
‫عل ‪5 columns‬‬ ‫ن‬ ‫ن‬
‫يعت ‪ 120px‬متوزعي ي‬ ‫عل العنارص بالتساوي ي‬
‫)مساحة العرض‪ (600px -‬ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫باف المساحة – ‪Fraction‬‬
‫ي‬

‫ن‬
‫معت الكود دا انه هيتم انشاء ‪ 3‬اعمده‬
‫ي‬
‫‪ -‬العمود األول ‪200px‬‬
‫‪ -‬العمود ن‬
‫التان ‪100px‬‬
‫ي‬
‫ن‬
‫تان عمود خدوا ‪300px‬‬
‫باف المساحة ‪ 1fr‬وبما ان االب ‪ 600px‬و أول و ي‬
‫‪ -‬العمود التالت هياخد ي‬
‫الل هو ‪ 300px‬هيوح ألخر عمود‬‫الباف ي‬
‫ي‬ ‫اذا‬

‫ن‬ ‫ن‬ ‫طب أي الفرق ن‬

‫االتني بيعملوا نفس الحاجه اال انه يف اختالف بينهم‬ ‫بي الـ ‪ auto‬و الـ ‪ fraction‬مع ان‬

‫‪Fraction vs auto => fraction is greedy , auto is shy‬‬

‫الـ ‪ Fraction‬طماع لكن الـ ‪ auto‬خجول‬
‫الل تعيشه وتخليه قادر يتنفس ويظهر بس‬ ‫ن‬
‫بمعت ان الـ ‪ auto‬بياخد بس المساحة ي‬
‫ي‬
 ‫ن‬
‫معت الكود دا انه فيه ‪ 4‬أعمدة‬
‫ي‬
‫‪ -‬العمود األول و ن‬
‫الل جواه‬
‫ي‬ ‫‪Content‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫قد‬ ‫عل‬
‫ي‬ ‫مساحة‬ ‫بياخد‬ ‫الل‬
‫ي‬ ‫الخجول‬ ‫‪auto‬‬ ‫التان‬
‫ي‬
‫‪ -‬العمود التالت و الرابع ‪ fraction‬الجشع الطماع ي‬
‫الل بياخد كل المساحة الباقية ليه‬

‫ن‬ ‫ن‬
‫عل العنارص‬
‫ي‬ ‫الباقية‬ ‫المساحة‬ ‫ـع‬‫ـ‬ ‫ـ‬ ‫ي‬‫توز‬ ‫ف‬
‫ي‬ ‫‪Auto‬‬ ‫ـ‬ ‫ال‬ ‫من‬ ‫االستخدام‬ ‫ودا معناه ان الـ ‪ fr‬افضل ي‬
‫ف‬

‫طيب الكود دا معناه أي‬

‫‪ -‬اول و ن‬
‫تان عمود كل واحد فيهم هيكون ‪150px‬‬
‫ي‬
‫باف المساحة‪ ،‬ولكن الـ ‪ 2fr‬هيكون ضعف الـ ‪1fr‬‬
‫‪ -‬تالت و رابع عمود هياخد ي‬

‫‪By: Amr Elsayed‬‬

‫‪Mix‬‬

‫ن‬
‫معت الكود دا انه مكون من ‪ 7‬أعمدة‬
‫ي‬
‫‪ -‬العمود األول ‪100px‬‬
‫‪ -‬العمود ن‬
‫التان و التالت و الرابع كل واحد فيهم ‪50px‬‬
‫ي‬
‫‪ -‬العمود الخامس هيكون ‪ 25%‬من الـ ‪container‬‬
‫الل بداخله‬ ‫‪ -‬العمود السادس هيكون ‪ auto‬وهيكون خجول بياخد بس مساحة ي‬
‫عل قد الـ‪ content‬ي‬
‫‪ -‬العمود السابع هيكون ‪ 1fr‬وهيكون طماع بياخد ي‬
‫باف المساحة‬

‫‪By: Amr Elsayed‬‬

 ‫‪Grid - Parent - Template Rows And Gap Lesson #58‬‬

‫‪-‬‬ ‫‪Parent‬‬

‫ن‬
‫ه خاصية مسؤولة عن انشاء وتكوين الصفوف والتحكم يف عددها و طولها‬
‫‪ -‬ي‬

‫ن‬
‫معت الكود دا انه هيتم انشاء ‪ 3‬صفوف‬
‫ي‬
‫‪ -‬الصف األول هيكون طوله ‪100px‬‬
‫التان هيكون طوله ‪100px‬‬ ‫‪ -‬الصف ن‬
‫ي‬
‫‪ -‬الصف التالت هيكون ‪200px‬‬
‫اذا مجموع طول الصفوف ‪ .. 400px‬وبما ان ال ـ ‪ Height‬انا كنت محدده ن يف أول درس بـ ‪500px‬‬
‫اذا المفروض هيكون فيه مساحة فاضية تحت اخر صف‬

‫مساحة فارغة‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫نفس كل حاجه ر‬
‫اترسحت يف الـ ‪grid-template-column‬‬

‫الغرض من الخاصية دي ه عمل فراغات ن‬

‫بي العنارص‬ ‫ي‬

‫‪shorthand‬‬

‫يمكن استخدام الـ ‪ shorthand‬لخاصية الـ ‪ gap‬زي المثال السابق‬

 ‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫ا‬ ‫ا‬ ‫ً‬ ‫ً‬ ‫اللهم نان أسألك ً‬
‫علما ً‬
‫نافعا ورزقا طيبا وعمًل متقبًل‬ ‫ي‬
‫الح القيوم و أتوب إليه‬ ‫هو‬ ‫اال‬ ‫ـه‬‫ل‬ ‫ا‬ ‫ال‬ ‫الذي‬ ‫العظيم‬ ‫هللا‬ ‫وا‬‫ر‬ ‫استغف ُ‬
‫ي‬ ‫ِ‬

‫‪By: Amr Elsayed‬‬

‫‪Grid - Parent - Justify Content And Align Content Lesson #59‬‬
‫تماما لكل حاجه تم دراستها ن يف ال ـ ‪Flex‬‬
‫الدرس دا ُمشابه ً‬

‫ولكن هنا هتفهم الفرق ن‬

‫بي الـ ‪ auto‬و الـ ‪fraction‬‬
‫بوضوح شديد‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫الـ ‪ flex-end‬من المفيض انها هتنقل‬

‫ن‬
‫لليمي‪ ،‬ولكن دا محصلش‬ ‫الـ ‪ Content‬كله‬

‫ببساطة شديدة دا محصلش عشان مفيش‬

‫مكان للعنارص تتحرك فيه ألنك استعملت‬
‫بالتال العنارص واخده‬
‫ي‬ ‫الـ ‪ fraction‬الـطماع‬
‫حجم الـ ‪ container‬بالكامل فـ مفيش فرصة‬
‫تحركهم‬
 ‫ن‬
‫وبالتال اقدر اتحكم يف‬
‫ي‬ ‫مع وجود الـ ‪ auto‬الـ ‪ content‬بياخد المساحة ي‬
‫الل يقدر يعيش فيها فقط‬
‫العنارص‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫مسافه ن‬
‫بي العنارص‬ ‫مسافه قبل و بعد العنارص‬

‫مسافه قبل و بعد و ن‬

‫بي العنارص و بتكون متساوية‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
By: Amr Elsayed
 ‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)

By: Amr Elsayed
‫لل فات‬
‫تلخيص شيـ ــع جدا ي‬

‫‪By: Amr Elsayed‬‬

‫‪Grid - Parent - Complete Layout With Template Areas Lesson #60‬‬
‫باختصار شديد عشان مطولش عليكم‬
‫هتالف هنا أكواد الدرس دا‬
‫ي‬
‫ن‬
‫و ببساطة شديدة جدا الخواص المستخدمة يف الدرس دا بعد تحدد األعمدة و الصفوف‬

‫ه تصميم ‪ Layout‬بسيط جدا بيتم فيه توزيـ ــع العنارص ي‬

‫عل عدد االعمدة ال يت‬ ‫الغرض من الخاصية ي‬
‫تم انشاؤها من خالل خاصية الـ ‪gird-template-columns‬‬

‫يح دور خاصية تانية اسمها ‪ grid-area‬الغرض منها ي‬

‫ه انساب ‪ area‬معينه لعنرص‬ ‫بعد كدا ر ي‬
‫ن‬
‫معي‬
 ‫الل سيبته فوق هتالحظ‬
‫اثناء تصفحك للكود من خالل اللينك ي‬
‫الخاصية دي معاه وحدة القياس ‪vh‬‬
‫ئ‬
‫تمل الشاشة بالكامل بحيث الملء‬ ‫ودي بيكون الغرض منها انها‬
‫دا يكون مناسب الي مقاسات شاشة‬

‫من خالل الضغط هنا هيتم تحويلك لصفحة فيها توضيح وتفاصيل اكي الستخدام الخاصية دي‬

‫فاض ن‬
‫بي عنرصين بتحط نقطه‬ ‫هتالحظ نف رشح الدرس دا انك لو عايز عمود فاصل او ن‬
‫ي‬ ‫ي‬
‫ن‬
‫بدل اسم الـ ‪ area‬يف خاصية الـ ‪grid-template-areas‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪Grid - Child - Grid Column And Grid Row Lesson #61‬‬

‫‪-‬‬ ‫‪Child‬‬

‫ه ‪ Child‬جوا الـ ‪ parent‬االب ي‬

‫الل مساكهم‬ ‫الل ي‬
‫الل هشتغل عليها ي‬‫العنارص ي‬
‫ن‬
‫و واخد خاصية الـ ‪ grid‬عشان اقدر اتحكم يف الـ ‪ children‬دول‬

‫ه ‪ Shorthand‬لخاصية الـ ‪ grid-column-start‬و الـ ‪grid-column-end‬‬

‫الخاصية دي ي‬
‫ن‬ ‫ن‬
‫ه التحكم يف العنرص الـ ‪ child‬بحيث اتحكم يف مكان وجده من أي عمود يبدأ‬
‫والغرض منها ي‬
‫ينته‬
‫ي‬ ‫وعند أي عمود‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫‪HTML‬‬ ‫‪CSS‬‬

‫الل اتحدد وخد القيمة دي هياخد مكان ‪ 4‬عنارص من ضمنهم مكانه بحيث انه هيبدا‬
‫دا معناه ان العنرص ي‬
‫ن‬
‫وينته عند العمود الرابع يف االعمدة‬
‫ي‬ ‫من العمود األول‬
‫الل هيقف عندها العنرص بدون ما يتم احتسابه من ضمن االعمدة‬‫و ال ‪ 5‬دي تشي للـ ‪ break point‬ي‬

‫ممكن تستخدم الـ ‪ span‬و هتعمل برضو نفس النتيجة ان العنرص دا هياخد ‪ 4‬أعمدة‬

‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪4‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫دي معناها انه هيبدا من العمود ن‬
‫التان ويسيب العمود األول فارغ ولما يبدا من العمود ي‬
‫تان يحجز‬ ‫ي‬
‫الل هو بدأ منه‬ ‫ن‬ ‫مكان ‪ 4‬اعمدة جنبه من ضمن األربعة دول العمود‬
‫التان ي‬
‫ي‬

‫‪‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪4‬‬

‫ه ‪ Shorthand‬لخاصية الـ ‪ grid-row-start‬و الـ ‪grid-row-end‬‬

‫الخاصية دي ي‬
‫ن‬ ‫ن‬
‫ه التحكم يف العنرص الـ ‪ child‬بحيث اتحكم يف مكان وجده من أي صف يبدأ‬
‫والغرض منها ي‬
‫ينته‬
‫ي‬ ‫وعند أي صف‬

‫‪By: Amr Elsayed‬‬

 ‫‪HTML‬‬ ‫‪CSS‬‬

‫صفي فقط بحيث ينته عند الصف ن‬

‫التان‬ ‫ن‬ ‫دي معناها انه هيبدأ من الصف األول و ياخد‬
‫ي‬ ‫ي‬
‫و ال ‪ 3‬دي تشي للـ ‪ break point‬ي‬
‫الل هيقف عندها العنرص بدون ما يتم احتسابه من ضمن الصفوف‬

‫ن‬
‫صفي‬ ‫ممكن تستخدم الـ ‪ span‬و هتعمل برضو نفس النتيجة ان العنرص دا هياخد‬

‫‪1‬‬

‫‪2‬‬
 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫الحمد هلل دائما وابدا ‪ ..‬الحمد هلل بال سبب‪ ،‬الحمد هلل بال طلب‪ ،‬الحمد هلل بال‬
‫ن ن‬ ‫عدد‪ ،‬الحمد هلل حت ن‬
‫العالمي يف كل األحول ‪ ..‬الحمد هلل‬ ‫يرض ‪ ..‬الحمد هلل رب‬
‫عت ر‬
‫الرس‬ ‫الذي قدر ل الخي و منع ن‬
‫ي‬ ‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫‪Grid - Child - Grid Area And Trainings Lesson #62‬‬

‫‪-‬‬ ‫‪Child‬‬

‫ا‬
‫ه خاصية مجمعة او نقدر نقول انها ‪ Shorthand‬لكًل من ‪:‬‬
‫ببساطة شديدة الـ ‪ grid-area‬ي‬
‫‪Grid-row-start -- grid-column-start -- grid-row-end -- grid-column-end‬‬

‫الل هشتغل عليها خصوصا العنرص رقم ‪9‬‬

‫العنارص ي‬

‫ن‬ ‫ن‬
‫ه التحكم يف العنرص الـ ‪ child‬بحيث اتحكم يف مكان وجده‬
‫الغرض من الخاصية دي ي‬
‫عل اليتيب‬
‫ينته ي‬
‫ي‬ ‫ينته وعند أي عمود‬
‫ي‬ ‫من أي صف يبدأ ومن أي عمود يبدأ ثم عند أي صف‬

‫‪By: Amr Elsayed‬‬

 ‫‪HTML‬‬ ‫‪CSS‬‬

‫التان ثم يبدأ من العمود ن‬

‫التان‬ ‫دي معناها انه هيبدأ من الصف ن‬
‫ي‬ ‫ي‬
‫ينته عند العمود الخامس‬‫ي‬ ‫ينته عند الصف الرابع ثم‬
‫ي‬ ‫و‬

‫و ال ‪ 5‬و ‪ 6‬دي تشي للـ ‪ break point‬ي‬

‫الل هيقف عندها العنرص بدون ما يتم احتسابه من ضمن‬
‫الصفوف او األعمدة‬

‫يبدأ من العمود التاني‬ ‫ينتهي عند العمود الخامس‬

‫يبدأ من الصف التاني‬

‫ينتهي عند الصــف الرابع‬

‫‪By: Amr Elsayed‬‬

 ‫خل بالك ‪:‬‬
‫ي‬
‫انته عند الصف الرابع والفرق بينهم صف واحد بس‬ ‫عشان لو استغربت ازاي هو بدأ من الصف ن‬
‫التان و‬
‫ي‬ ‫ي‬
‫احب اقولك ان بداية عد الصفوف بيكون من عند أول صف ‪..‬‬
‫اذا العنرص رقم ‪ 1‬هو اول صف و العنرص رقم ‪ 7‬الل تحته هو ن‬
‫تان صف‬
‫ي‬ ‫ي‬
‫بينته عنده هو دا رابع صف‬
‫ي‬ ‫الل تحته هو تالت صف و العنرص رقم ‪ 3‬ي‬
‫الل‬ ‫و العنرص رقم ‪ 1‬ي‬
‫ن‬
‫من حيث عدد الصفوف كذلك األمر يف األعمدة‬

‫ممكن استخدم الخاصية دي حيث انها ممكن تعوضك عن استخدام الـ ‪grid-template-columns‬‬
‫‪HTML‬‬

‫‪CSS‬‬

‫دا معناه انه تم‬ ‫كدا بمجرد ما كتبت كلمة ‪ 5 - head‬مرات‬

‫انشأ ‪ 5‬أعمدة‬
‫الل هياخد الـ ‪ area‬دي و بكتبها بأسمه‬
‫وبعد كدا بحدد الـعنرص ي‬

‫‪By: Amr Elsayed‬‬

 ‫‪HTML‬‬

‫‪CSS‬‬

‫ن‬
‫صفي و خمس أعمد وبعد كدا تم‬ ‫معت كود الـ ‪ CSS‬انه تم انشاء‬‫ن‬
‫ي‬
‫الل خصصتها‬ ‫عل األعمدة دي باسم الـ ‪ area‬ي‬
‫توزيـ ــع العنارص ي‬
‫لكل عنرص‬

‫‪head‬‬ ‫‪head‬‬ ‫‪nav‬‬ ‫‪nav‬‬

‫‪nav‬‬

‫‪cont‬‬ ‫‪cont‬‬ ‫‪cont‬‬ ‫‪cont‬‬

‫‪side‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪Grid - Min_ Max And Auto Fill Lesson #63‬‬

‫‪ Minmax‬تشي يال ‪ minimum <-------‬و ‪maximum‬‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫الكود دا معناه انه هيتم انشاء ‪ 3‬أعمدة ‪ ..‬العمود األول عرضه يبدأ من ‪ 200px‬و ال يقل عن المساحة‬
‫ً‬
‫نهائيا ‪..‬‬ ‫اقص عرض يوصل ليه لو فيه مساحه هو ‪ 400px‬وال يزيد عن المساحة دي‬ ‫ً‬
‫نهائيا و‬ ‫دي‬
‫ي‬
‫وبالفعل عشان فيه مساحة العمود األول اخد ‪ 400px‬و العمودين ن‬
‫التان و التالت خدو أي مساحة‬‫ي‬
‫باقيه‬
 ‫العمودين ن‬
‫العمود األول‬ ‫التان و التالت‬
‫ي‬

‫طيب نف حالة لو حددت ان العمود ن‬

‫التان و التالت كل واحد فيهم ‪500px‬‬
‫ي‬ ‫ي‬
‫اقص عرض يوصل ليه لو فيه مساحة هو ‪600px‬‬‫ي‬ ‫والعمود األول بيبدأ عرضه من ‪ 200px‬و‬

‫التان و التالت لما اتحدد ليهم ‪500px‬‬‫و بالفعل العمود ن‬

‫ي‬
‫العمود األول خد مساحته من ‪ 200px‬لحد ‪ 386.25px‬الن مفيش مساحة يمتد فيها ألكي من كدا‬

‫لنفيض ن يان عندي مساحة الشاشة ‪ 1400px‬وعايز كل ما المساحة دي تزيد يتم انشاء عمود جديد‬
‫عرضه يكون ‪200px‬‬

‫‪By: Amr Elsayed‬‬

 ‫خال بالك‪ :‬ان دا مش هيحصل اال لما توفر مساحة بقيمة الـ ‪ 200px‬عشان يتم انشاء العمود‬
‫بس ي‬
‫الجديد فيها‬

‫ن‬
‫بمعت ان لو مساحة الشاشة زادت لـ ‪ 1550px‬مش هيتم انشاء عمود جديد الن من الـ ‪ 1400px‬للـ ‪1550px‬‬
‫ي‬
‫الل تخليه ينشأ عمود جديد ‪...‬‬
‫مكملش المساحة ي‬

‫عشان ينشأ العمود دا الزم المساحه توصل لـ ‪1600px‬‬

‫ن‬
‫تعتي مشكله فـ الـ ‪Responsive‬‬
‫طيب هعمل أيه يف المساحة الفاضية دي ما دي كدا ر‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫الحل هيكون من خالل الـ ‪ Function‬دي‬

‫طيب معناه أي الكالم دا ؟!‬

‫ن‬ ‫ئ‬
‫الل الزم يكون عرضها بيبدأ من ‪200px‬‬
‫ي‬ ‫بالعنارص‬ ‫ليها‬ ‫حجم‬ ‫أي‬ ‫ف‬‫معناه انه هيتم مل الشاشة ي‬
‫ويغط المساحة الفاضية من الشاشة‬
‫ي‬ ‫و كل ما مساحة الشاشة تزيد الـ ‪ fr‬او الـ ‪ fraction‬يمال المساحة دي‬
‫ن‬ ‫ن‬ ‫ن‬
‫بمعت اكي انه العنرص هيبدأ من عرض ‪ 200px‬وكل ما يكون يف مساحة زياده يف الشاشة العرض دا يزيد‬
‫ي‬
‫باف المساحة وعملت دا باستخدام الـ )(‪minmax‬‬
‫عشان الـ ‪ fraction‬بياخد ي‬

‫هتالحظ انه بالرغم من ان مساحة الشاشة بقت ‪ 1550px‬اال ان العنارص كلها مغطيه مساحة الشاشة‬
‫تلقان للعنارص نف أي مساحة موجودة نف الشاشة ر‬
‫برسط ان كل عنرص‬ ‫ئ‬ ‫ودا عشان انا قولتله ان يتم ئ‬
‫مل‬
‫ي‬ ‫ي‬ ‫ي‬
‫ن‬
‫مساحته تبدأ من ‪ 200px‬ومع أي زياده يف مساحة الشاشة زود عرض العنارص دي‬

‫تعتي وحدة من وحدات‬ ‫محتاج عشان تزود معلوماتك تقرأ عن الـ ‪ .. Auto-fit‬و تقرأ عن الـ ‪ ch‬ي‬
‫الل ر‬
‫قياس الـ ‪CSS‬‬

‫‪Play CSS Grid Garden-Game‬‬

‫‪Just Click‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫ن‬ ‫ن‬
‫ثق يف هللا ثم يف قدراتك و نفسك‬

‫اذكر هللا ️♥‬

‫عل نبينا محمد ﷺ‬ ‫ّ‬
‫اللهم صل وسلم وزد وبارك ي‬
‫كثيا مبارًكا فيه كما ن‬
‫ينبغ لجالل وجهك ولعظيم‬ ‫طيبا ً‬ ‫ً‬
‫حمدا ً‬ ‫اللهم لك الحمد‬
‫ي‬
‫ن‬
‫العالمي‬ ‫سلطانك يا رب‬
‫العل العظيم‬
‫ي‬ ‫ال حول وال قوة اال باهلل‬
‫ن‬ ‫ال اله اال انت سبحانك ن‬
‫الظالمي‬ ‫ان كنت من‬
‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫‪2D Transform – Scale Lesson #65‬‬
‫البعد التالت ‪3D‬‬ ‫البعد ن‬
‫التان ‪ 2D‬أو ُ‬ ‫خاصية الـ ‪ transform‬بتسمحلك انك تحول العنرص من حالة لحالة مختلفة نف ُ‬
‫ي‬ ‫ي‬

‫ن‬
‫ال زياده‬ ‫الغرض من القيمة ‪ scale‬يف خاصية الـ‪ transform‬ي‬
‫ه مضاعفة حجم العنرص دون الحاجه ي‬
‫الـ ‪ width‬و الـ ‪height‬‬

‫‪HTML‬‬ ‫‪ CSS‬قبل إضافة الخاصية‬

‫‪ CSS‬بعد إضافة الخاصية‬

 ‫ان أزود الـ ‪ X , Y‬أي الطول والعرض‬‫ن‬ ‫ن‬
‫معت كدا انه كتابة خاصيه الـ )‪Transform: scale (2‬‬
‫ي‬ ‫ي‬
‫ن‬
‫ان ازود الطول والعرض نفسه‬
‫ضعفهم بس بطريقه افضل من ي‬
‫‪ -‬ممكن تحط الخاصية دي بالسالب عادي سواء للـ ‪ X‬او للـ ‪Y‬‬

‫‪ -‬ممكن تحط قيمة للعنرص ‪ X‬وقيمة للعنرص ‪Y‬‬

‫الطبيغ‬ ‫ن‬
‫مرتي عن حجمه‬ ‫هييد طولة مرة ونص عن حجمه الطبيغ و ن‬
‫هييد عرضه‬ ‫بمعت ان العنرص ن‬
‫ن‬
‫ي‬ ‫ي‬ ‫ي‬

‫استخدام الخاصية دي‬

‫ممكن اعمل ‪ transition‬للعنرص بقيمة ‪1s‬‬

‫عل العنرص يتم استخدام الـ )(‪transform: Scale‬‬
‫ولما يحصل ‪ Hover‬ي‬
‫ن‬
‫فييد حجمه‬

‫جرب بنفسك‬

‫‪ -‬متنساش استخدام الـ ‪ prefixes‬للخاصية دي‬

‫‪By: Amr Elsayed‬‬

‫‪2D Transform – Rotate Lesson #66‬‬

‫الغرض من الـ ‪ rotate‬ي‬

‫ه انك تلف العنرص بزوايا ودرجات مختلفة‬

‫ممكن تستخدم قيم سالبة وهيكون بيلف عكس االتجاه‬

‫ن‬
‫بمعت انه العنرص يحصله نص لفة‬ ‫‪0.5turn‬‬
‫ي‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫ مع بعض‬Rotate ‫ و الـ‬Scale ‫استخدام الـ‬

Before Hover

After Hover
‫‪2D Transform – Translate Lesson #67‬‬

‫ن‬
‫قيمتي سواء موجوب او سالب الهدف منها تحريك العنرص‬ ‫الخاصية دي بتاخد‬
‫ن‬
‫اليمي او قيمة سالبه لتحريك العنرص‬ ‫‪ -‬سواء استخدمت قيمة موجبه لتحريك العنرص ناحية‬
‫ناحية الشمال ن يف البعد ‪X‬‬
‫‪ -‬أو استخدمت قيمة موجبة لتحريك العنرص لألسفل او قيمة سالبة لتحريك العنرص لألعل‬
‫ن يف البعد ‪Y‬‬

‫ن‬
‫لتحريك العنرص يف منتصف الصفحة‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ر‬ ‫ر‬
‫شء قدير‬
‫عل كل ي‬ ‫ال اله اال هللا وحده ال شيك له ‪ ..‬له الملك وله الحمد وهو ي‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫الح القيوم واتوب اليه‬
‫استغفروا هللا العظيم الذي ال اله اال هو ي‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫أكي‬
‫سبحان هللا و الحمد هلل و ال الـه اال هللا و هللا ر‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشة و مداد كلماته‬
‫الح القيوم واتوب إليه‬
‫استغفروا هللا العظيم الذي ال اله اال هو ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪2D Transform – Skew Lesson #68‬‬

‫ه عمل انحراف للعنرص‬

‫الغرض من الخاصية دي ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫طيب يف حالة لو حابب اعمل انحراف للعنرص وعايز اتجنب انحراف الكالم نفسه الن دي مشكلة‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫هنا انا استخدمت الـ ‪ Before‬إلنشاء الـ ‪background‬‬

‫الحمراء‬
‫عشان اقدر استخدم عليها خاصية الـ ‪transform: skew‬‬
‫عشان اعمل انحراف للـ ‪ background‬بدون ما اثر ع‬
‫الـ ‪ H2‬واخليه ينحرف‬

‫المشكلة قبل الحل ان الكالم نفسه انحرف‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪2D Transform – Matrix Lesson #69‬‬
‫ه شاملة لكل من الخواص التالية‪:‬‬
‫نقدر نقول كدا ان الخاصية دي ي‬

‫بي استخدام الـ ‪ matrix‬ن‬

‫وبي استخدام الـ ‪ Short-hand‬لخاصية الـ ‪transform‬‬ ‫أي الفرق ن‬

‫‪Matrix‬‬
‫‪transform: matrix(1.2, 0.2679, 0, 1.2, 20,‬‬
‫;)‪20‬‬

‫‪Transform‬‬
‫;)‪transform: translateX(20px) translateY(20px) scaleX(1.2) skewY(15deg) skewX(0deg) scaleY(1.2‬‬

‫لو استخدمت الـ ‪ Short-hand‬هتالحظ اختالف بينها وبينها ن‬

‫وبي استخدام الـ ‪ matrix‬وعشان تعالج‬
‫البد من انك تنقل الـ ‪ translate‬كـأول قيمة مش تسيبها لألخر كما هو موضع ن يف الـ ‪Shot-hand‬‬
‫ُ‬
‫االختالف دا‬

‫‪By: Amr Elsayed‬‬

 ‫‪) - Lesson #70‬المنشأ( ‪Transform – Origin‬‬
‫ن‬
‫بتاع يتحرك من عنده‬
‫ي‬ ‫العنرص‬ ‫هيبدا‬ ‫الل‬
‫ي‬ ‫المكان‬ ‫ف‬
‫ه ان اتحكم ي‬
‫الغرض من الخاصية دي ي‬

‫*‪/‬‬
‫‪transform-origin‬‬
‫‪Syntax‬‬
‫‪Default Values => 50% 50% 0‬‬
‫‪2D Transform => transform-origin‬‬ ‫)‪(X, Y‬‬
‫‪3D Transform => transform-origin‬‬ ‫)‪(X, Y, Z‬‬

‫‪X-Axis‬‬
‫]‪- CSS Units [px, em, rem‬‬
‫‪- % percentage‬‬
‫‪- Keyword‬‬
‫‪Left = 0%‬‬
‫‪Center = 50%‬‬
‫‪Right = 100%‬‬

‫‪Y-Axis‬‬
‫]‪- CSS Units [px, em, rem‬‬
‫‪- % percentage‬‬
‫‪- Keyword‬‬
‫‪Top = 0%‬‬
‫‪Center = 50%‬‬
‫‪Bottom = 100%‬‬
‫‪*/‬‬

‫طيب ن‬
‫معت الكالم دا أي؟!‬
‫ي‬
‫ن‬ ‫ن‬
‫اساسي ‪ X, Y‬انا بحط لكل محور فيهم قيمة معينه عشان ابدأ اتحكم يف‬ ‫معناه انه عندي محورين‬
‫بتاع‬
‫ي‬ ‫حركه العنرص‬
‫ن‬
‫المعية عن‬
‫ر‬ ‫ه‬
‫ي‬ ‫‪100%‬‬ ‫القيمة‬ ‫و‬ ‫‪left‬‬ ‫االتجاه‬ ‫عن‬ ‫ة‬‫المعي‬
‫ر‬ ‫ه‬ ‫ي‬ ‫‪0‬‬ ‫القيمة‬ ‫‪X‬‬ ‫بالمحور‬ ‫الخاص‬ ‫الجزء‬ ‫ف‬‫ي‬
‫المعية عن الـ ‪ Center‬دا بالنسبة للمحور ‪X‬‬
‫ر‬ ‫االتجاه ‪ Right‬والقيمة ‪ 50%‬ي‬
‫ه‬

‫ن‬
‫المعية‬
‫ر‬ ‫ه‬
‫ي‬ ‫‪100%‬‬ ‫القيمة‬ ‫و‬ ‫‪Top‬‬ ‫االتجاه‬ ‫عن‬ ‫ة‬‫المعي‬
‫ر‬ ‫ه‬
‫ي‬ ‫‪0‬‬ ‫فالقيمة‬ ‫‪Y‬‬ ‫للمحور‬ ‫الخاص‬ ‫الجزء‬ ‫ف‬
‫اما ي‬
‫المعية عن الـ ‪Center‬‬
‫ر‬ ‫عن االتجاه ‪ Bottom‬والقيمة ‪ 50%‬ي‬
‫ه‬

‫‪By: Amr Elsayed‬‬

 ‫طيب دا معناه أي اكي ؟‬
Transform-origin ‫ه‬ ‫ن‬
‫الل ي‬
‫بتاعت ي‬
‫ي‬ ‫المعت هستخدم الخاصية‬
‫ي‬ ‫علشان يبان‬

HTML
<div class="test">
<span class="origin"></span>
<div
class="trans">Transform</div>
</div>
CSS
.test {
background-color: #ddd;
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
}
.test div {
color: white;
background-color: rgb(255 0 0 /
39%);
width: 95%;
height: 95%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 30px;
position: absolute;
top: 5px;
left: 5px;
}
.test .origin {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
left: 50%;
top: 50%;
z-index: 2;
}

Never Forget That (Always Search)

By: Amr Elsayed
‫;)‪Transform-origin (X Y‬‬

‫‪ X‬لما تكون قيمته ‪ 100%‬ن‬

‫معت كدا انه ‪Right‬‬ ‫اذا المحور‬
‫ي‬
‫و المحور ‪ Y‬لما تكون قيمته ‪ 100%‬ن‬
‫معت كدا انه ‪Bottom‬‬
‫ي‬
‫ن‬
‫اليمي‬ ‫هيبف بيتحرك من تحت ع‬ ‫بتاع‬ ‫ن‬
‫معت كدا انه العنرص‬
‫ي‬ ‫ي‬ ‫اذا ي‬

‫‪By: Amr Elsayed‬‬

‫معية زي ‪right bottom‬‬
‫انت ممكن كمان تستبدل الـ ‪ 100%‬دي وتستخدم ‪ keyword‬ر‬
‫ن‬
‫المعت )‪transform-origin (right bottom‬‬ ‫ه برضو نفس‬
‫ي‬ ‫وتبف ي‬
‫ي‬

‫ن‬ ‫ن‬ ‫ن‬

‫مني بالظبط‬ ‫بتاع يبدا يتحرك‬
‫ي‬ ‫معت كدا ان بتحكم يف منشأ حركة العنرص‬
‫ي‬
‫وكل دا معتمد ع استخدام الخاصية ‪ transform-origin‬والمحورين ‪X , Y‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬
‫ن‬
‫العالمي‬ ‫كثيا مبارًكا فيه كما ن‬
‫ينبغ لجالل وجهك ولعظيم سلطانك يا رب‬
‫ً‬
‫حمدا ً‬
‫طيبا ً‬ ‫اللهم لك الحمد‬
‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪3D Transform – Rotate Lesson #71‬‬

‫‪Syntax‬‬

‫بيتم استخدام القيمة ‪ rotate3d‬و القيم ‪ 1‬تشي يال ‪X-axis , Y-axis, Z-axis‬‬
‫عل اليتيب‬
‫ي‬
‫ن‬ ‫ن‬
‫عت شغال و ‪ 0‬ي‬
‫يعت مش شغال‬ ‫القيمة دي بتكون (‪ 0‬أو ‪ )1‬و بـلغة الـ ‪ 1 CS‬ي ي‬

‫‪By: Amr Elsayed‬‬

‫‪3D Transform - Translate_ Perspective_ Perspective Origin Lesson #72‬‬

‫ن يف القيمة ‪ translate‬استخدمت الـ ‪ Z-axis‬عشان اقدر اتحكم ن يف العنرص ن يف البعد التالت الـ ‪3d‬‬
‫وممكن استخدم الـ ‪ translate3d‬و اجمع فيها الـ ‪ X-axis, Y-axis, Z-axis‬ي‬
‫عل اليتيب‬

‫ولكن الـ ‪ Z-axis‬عشان يشتغل الزم استخدم خاصية اسمها ‪Perspective‬‬

‫>‪Perspective -------‬‬ ‫بيت ن‬

‫وبي العنرص‬ ‫ديما بتكون نف العنرص األب وه المختصة بتحديد المسافة الل ن‬
‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬

‫‪Perspective-origin‬‬
‫ن‬ ‫ن‬
‫شأنها شأن الـ ‪ transform-origin‬يف كل حاجة؛ كذلك الزم تكون موجودة يف العنرص األب ي‬
‫الل ماسك‬
‫الل عايز اطبق عليه الـ ‪ 3d‬و الغرض منها هو توجيه العنرص للمكان ي‬
‫الل هبدأ اشوفه منه‬ ‫العنرص ي‬
‫الل زي ما قولنا ان الغرض منها هو تحديد‬
‫ي‬ ‫مش هتشتغل اال ن يف وجود خاصية الـ ‪Perspective‬‬ ‫‪-‬‬
‫بيت ن‬
‫وبي العنرص‬ ‫ن‬
‫الل هتكون ي‬
‫المسافة ي‬

‫‪By: Amr Elsayed‬‬

‫‪3D Transform - Backface Visibility And Flip Product Lesson #73‬‬
‫أكواد الدرس موجوده هنا‬

‫‪1- backface-visibility‬‬

‫الخاصة دي بتستخدم مع العنرص نفسه وليس األب‬

‫ن‬ ‫ن‬
‫الل امامه لحد ما يحصل ‪Hover‬‬ ‫مختف خلف العنرص ي‬
‫ي‬ ‫الل بيكون يف الخلف‬
‫تخل العنرص ي‬
‫ي‬ ‫الغرض منها انه‬
‫الل ن يف الخلف يفضل محتفظ بوجوده ومكانه ن يف عالم الـ ‪3d‬‬
‫عل الشكل فيبدأ يظهر‪ ،‬ولكن عشان العنرص ي‬
‫ي‬
‫الزم نستخدم خاصية كمان ودا ينقلنا للخطوة التانية‬

‫‪2- transform-style‬‬

‫الخاصية دي بتستخدم مع االب ي‬

‫الل ماسك العنارص‬
‫الل موجودة داخل األب تحتفظ بمكانها ن يف عالم الـ ‪3d‬‬
‫تخل العنارص ي‬
‫ي‬ ‫الغرض منها انها‬

‫‪3- Perspective‬‬

‫‪ -‬وعشان يكون فيه ‪ 3d‬ن يف الموضوع الزم استخدم خاصية الـ ‪Perspective‬‬
‫‪By: Amr Elsayed‬‬
 ‫ن‬ ‫ن‬ ‫ر‬
‫واف للـ ‪ transform‬ولكن مع التطبيقات‬
‫ي‬ ‫و‬ ‫كاف‬
‫بعتذر و بشدة عن عدم وجود شح ي‬
‫العملية مع بشمهندس أسامة الزيرو هتقدر تستوعب كل حاجه فيها‬
‫كمان بالتطبيق مع نفسك هتقدر تستوعها بشكل كبي جدا‬

‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬ ‫ن‬ ‫ن‬
‫الظالمي‬ ‫إن كنت من‬
‫ي‬ ‫سبحانك‬ ‫انت‬ ‫اال‬ ‫اله‬ ‫ال‬ ‫إليك‪،‬‬ ‫واتوب‬ ‫أستغفرك‬ ‫إن‬
‫اللهم ي‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬
‫ال تنسونا من دعواتكم‬
‫‪By: Amr Elsayed‬‬
‫‪Animation - Keyframes_ Name_ Duration Lesson #74‬‬

‫‪1- Keyframes‬‬
‫ه الخاصية المتحكمة ن يف حركة وظهور الـ ‪animation‬‬
‫الـ ‪ Keyframes‬ي‬
‫ن‬ ‫ن‬
‫بطريقتي ‪ +‬بحط جنبها (اسم للـ ‪ animation‬زي ‪ (change-color‬الل ف األمثلة‬
‫ي ي‬ ‫ممكن اكتبها‬

‫الطريقة الثانية‬ ‫األول‬

‫ي‬ ‫الطريقة‬

‫‪By: Amr Elsayed‬‬

 ‫وعشان الخاصية دي تشتغل البد من‬
‫الل انا أصال حطيته جنب خاصية الـ ‪keyframes‬‬
‫أول حاجة كتابه الـ ‪ animation-name‬ي‬
‫الل هيستغرقها الـ ‪animation‬‬ ‫ن‬
‫تان حاجه محتاج اكتب الـ ‪ animation-duration‬عشان احدد المدة ي‬
‫ي‬

‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫‪By: Amr Elsayed‬‬

Animation - Iteration Count_ Timing Function_ Spinner Loading Lesson #75

HTML CSS

By: Amr Elsayed

 ‫‪1- Iteration Count‬‬
‫أساش عن تحديد عدد اللفات‬
‫ي‬ ‫خاصية الـ ‪ Iteration Count‬الخاصية دي مسؤولة بشكل‬
‫الل عملتها فكون انك تديها القيمة ‪ infinite‬دا معناه ان الـ ‪ Spin‬دي‬
‫الخاص بالـ ‪ Spin‬ي‬
‫هتفضل تلف مدي الحياة‬

‫‪2- Animation-timing-function‬‬
‫أساش عن تحديد نوع اللفة‬
‫ي‬ ‫خاصية الـ ‪ Animation-timing-function‬الخاصية دي مسؤولة بشكل‬
‫الل كانت موجوده ن يف الـ ‪Transition‬‬ ‫ئ‬
‫وتنته بط زي الخواص ي‬
‫ي‬ ‫بط وتكمل برسعة‬
‫هل تبدا ي‬
‫‪ Ease‬و ‪ ease-in‬و ‪ linear‬وهكذا‬

‫الجزء الخاص بالـ ‪ keyframes‬بيكون جنبه ديما اسم الـ ‪ Animation‬و بعد كدا انا حددت البداية و‬
‫النهاية بحيث البداية هتكون من ‪ 0‬درجه و النهاية هتكون لفة كامله‬
‫ومع وجود خاصية الـ ‪ iteration count‬اللفة دي هتبدأ من الصفر وتاخد لفة وتفضل تعيد نفس األمر لالبد‬

‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫‪By: Amr Elsayed‬‬

‫‪Animation - Direction_ Fill Mode_ Play State_ Delay Lesson #76‬‬

‫‪Animation-direction: normal ==> Default Value‬‬

‫ه انها تعكس سواء لون او اتجاه الـ ‪animation‬‬

‫الغرض من الخاصية دي ي‬

‫الغرض من القيمة دي ان العنرص يبدأ من األمام بعدين ينتقل للخلف‬

‫ه عكسها تماما الغرض منها ان العنرص يبدأ من الخلف بعيدين ينتقل لألمام‬
‫الل تحتها ي‬
‫القيمة ي‬

‫الغرض من الخاصية دي انها تحط وقت يبدأ بعده شغل الـ ‪Animation‬‬
‫الـ ‪ delay‬بيقبل قيمة سالبة بس دا معناه لو فرضنا ان الـ ‪ 10 duration‬ن‬
‫ثوان وانا خليت الـ ‪delay‬‬
‫ي‬
‫سالب ‪2‬‬
‫ثوان بدل ‪ 10‬ن‬ ‫اذا دا هيخل الـ ‪ duration‬يكون ‪ 8‬ن‬
‫ثوان‬
‫ي‬ ‫ي‬ ‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫‪Animation-fill-mode: none ==> Default value‬‬

‫ن‬
‫ه انه العنرص يحتفظ بأخر حاجه وصلها يف الـ ‪keyframe‬‬
‫الغرض من الخاصية دي ي‬

‫الل فوق بيحتفظ بـ ‪ Style‬أول ‪ keyframe‬بدأ من عنده‬

‫عكس القيمة ي‬

‫الل حددته‬ ‫ً‬

‫عل الـ ‪ direction‬ي‬
‫بيحتفظ بأخر او بأول ‪ Keyframe‬ودا بيتحدد بناءا ي‬

‫‪Animation-play-state: Running ===> Default Value‬‬

‫الغرض من الخاصية دي ان العنرص يكون واقف‬ ‫الغرض من الخاصية دي ان العنرص شغال‬

‫ً‬ ‫ئ‬
‫تماما‪ ،‬ولكن بمجرد ما اقف عليه‬ ‫تلقان‪ ،‬ولكن بمجرد ما اقف عليه‬
‫ي‬
‫العنرص يشتغل عادي ومفعول الـ ‪animation‬‬ ‫العنرص يقف هو كمان ومفعول الـ ‪animation‬‬
‫هو كمان يشتغل‬ ‫هو كمان يقف‬

‫الـ ‪Shorthand‬‬
‫;‪animation: color 8s linear 2s infinite reverse‬‬
‫;‪-webkit-animation: color 8s linear 2s infinite reverse‬‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
‫‪Up And Down Loading Animation Training Lesson #77‬‬
‫ن‬
‫الل تم دراستها يف الـ ‪ Animation‬من خالل التطبيق‬
‫الغرض من الدرس دا هو التأكيد ع بعض المعلومات ي‬
‫تفاعل‪..‬‬
‫ي‬ ‫العمل عليها لذلك هيكون من الصعب نقل محتوي الفيديو بشكل‬
‫ي‬
‫أكواد الدرس موجودة هنا‬

‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪CSS Selectors Reference Part 1 Lesson #78‬‬

‫ن‬
‫الل يف الصورة دا باستخدام رمز (النجمة *) بيعمم أي ‪ values‬بتتكتب ع الكود‬
‫الـ ‪ universal‬بمجرد كتابة الكود ي‬
‫ن‬
‫الموجود يف صفحة الـ ‪HTML‬‬
‫ن‬
‫ملحوظة‪ :‬الـ ‪ universal‬من عيوبه ان الـ ‪ specificity‬بتاعته اضعف من أي حاجه تانية ي‬
‫يعت هو اضعف ‪selector‬‬
‫للتنسيق‬

‫ر‬
‫مباش من خالل اسمه‬ ‫هنا انا بـ ‪ Target‬الـ ‪ element‬بشكل‬

‫ن‬
‫تان ‪ ...‬بستهدف عنرص داخل عنرص أخر‬
‫هنا انا بـ ‪ element - Target‬داخل ‪ element‬ي‬
‫ن‬
‫بمعت اخر انا هنا بستهدف أي ‪ paragraph‬موجود داخل أي ‪Div‬‬
‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫معي‬ ‫السطر بستهدف عنرص ليه ‪class-name‬‬
‫ن‬
‫التان بستهدف عنرص ليه ‪ID-name‬‬
‫السطر ي‬

‫الل ليه ‪ class‬اسمه ‪parent‬‬

‫هنا بستهدف عنرص ابن ليه ‪ Class‬اسمه ‪ child‬من خالل العنرص االب ي‬

‫ن‬
‫معي ليه ‪ class 2‬عشان كدا انا الزق الـ ‪ class 2‬جنب بعض‬ ‫هنا انا بستهدف عنرص‬

‫ن‬
‫ان عندي عنرص ليه‬ ‫ن‬ ‫الل ليه ‪.. class‬‬
‫بمعت لو فرضنا ي‬
‫ي‬ ‫األساش من خالل العنرص االب ي‬
‫ي‬ ‫هنا انا بستهدف العنرص‬
‫‪ class name‬وجوا العنرص دا مجموعة من الـ ‪p‬‬
‫اليجرافات الموجودة داخل الـ ‪ Class name‬دا‬
‫بمجرد ما اكتب ال ‪ Class name‬وجنبه الـ ‪ p‬انا كدا بستهدف كل ر‬
‫لما بجمع عنرصين مع بعض وافصل بينهم بالفاصلة كدا انا بعمل ‪ grouping‬ودا معناه ن يان بطلب منه يستهدف الـ ‪p‬‬
‫و الـ ‪ Div‬الموجودين داخل الـ ‪ class-name‬دا‬

‫ن‬
‫معي داخل عنرص الـ ‪ p‬بس‬ ‫هنا انا بستهدف عنرص ليه ‪class name‬‬
‫ن‬ ‫ن‬ ‫ن ن‬ ‫ن ن‬ ‫ن‬
‫ان اكتب ‪ p.class-name‬والفرق دا يف المثال معناه ي‬
‫ان‬ ‫ان اكتب ‪ Class-name‬بس وبي ي‬
‫الحظ‪ :‬يف فرق بي ي‬
‫بستهدف الـ ‪ p‬بس‬
‫‪By: Amr Elsayed‬‬
 ‫بمعت لو عندي ‪ Div‬اب جواه عنارص كتي‬ ‫ن‬
‫ي‬ ‫هنا انا بستهدف الـ ‪ direct child‬ي‬
‫الل جوا العنرص األب‬
‫ر‬ ‫ر ا‬
‫مباش‬ ‫يعتي ابن ليه‬
‫مباشة بدون فواصل بينهم ر‬ ‫أي عنرص جوا الـ ‪ div‬دا وتحته‬
‫ن‬
‫الل موجوده تحت الـ ‪ div‬االب كدا العنارص دي‬
‫لكن لو فرضنا ان يف عنارص داخل العنارص الـ ‪ direct child‬ي‬
‫األصل للـ ‪ Div‬االب ومش هتاخد أي تنسيق‬
‫ي‬ ‫مش االبن‬

‫ر‬
‫مباش‬ ‫الـ ‪ P‬دا مش ابن‬
‫للـ ‪parent - Class‬‬

‫اذكر هللا ️♥‬

‫شء قدير‪.‬‬‫ر‬ ‫ر‬
‫ال اله اال هللا وحده ال شيك له ‪ ..‬له الملك وله الحمد وهو عل كل ي‬
‫الح القيوم واتوب اليه‪.‬‬
‫استغفروا هللا العظيم الذي ال إله اال هو ي‬
‫عل نبينا محمد ﷺ‪.‬‬ ‫ّ‬
‫اللهم صل وسلم وزد وبارك ي‬
‫ن‬
‫الظالمي‪.‬‬ ‫ان كنت من‬ ‫ن‬
‫ال إله اال انت سبحانك ي‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 Div ==> parent
Paragraph 2 ==> direct child

Div ==> Parent

H1 ==> direct child
Paragraph 5==> direct child

‫ر‬
Div ‫المباش للـ‬ ‫ ر‬Div ‫ داخل أي‬p ‫نف المثال دا انا استهدفت أي‬
‫ هو االبن‬p ‫برسط يكون الـ‬ ‫ي‬
‫ دا‬Direct child ‫ هما الـ‬Paragraph 5 ‫ و‬Paragraph 2 ‫هتالف ان‬
‫ي‬ ‫ولو الحظت‬

direct Child ‫وعل رشط تكون‬

‫ي‬ ‫ بس‬p ‫ ولكن انا مستهدف الـ‬direct Child ‫يعتي‬
‫ ر‬H2 ‫الـ‬

‫ عاش يا بطل‬.. Keep Going

By: Amr Elsayed
‫‪CSS Selectors Reference Part 2 Lesson #79‬‬

‫عل أي براجراف ‪p‬‬

‫ي‬ ‫هنا انا بستهدف ال ـ ‪ next selector‬عالمة "الـ ‪ "+‬معناها ان التنسيق هيتم‬
‫ن‬ ‫متبوع ر‬
‫مباشة بعد الـ ‪ div‬متبوع بدون ما يكون يف فاصل بينهم‬

‫ألنه مش متبوع ورا ‪div‬‬

‫ر‬
‫مباش‬ ‫بشكل‬
‫‪‬‬

‫‪‬‬

‫‪By: Amr Elsayed‬‬

 ‫َْ‬
‫والل باختصار‬
‫ي‬ ‫التلدة ~ "‬‫هنا انا بستهدف الـ ‪ siblings selectors‬او االشقاء من خالل عالمة " ِ‬
‫ر‬
‫مباش بدون فاصل من نوع ‪ div‬يتم تنسيق الـ ‪ div‬دا‬ ‫ال ‪ ..‬ان أي عنرص ‪ p‬يكون بعده شقيق‬
‫شديد بتشي ي‬
‫( ‪ + shift‬ذ = ~ )‬

‫بالرغم من وجود ‪ h3‬بعد الـ ‪p‬‬

‫ر‬
‫مباشة اال انه لم يمنع تنسيق‬
‫الل بعده‬
‫الـ ‪ div‬ي‬

‫‪‬‬ ‫مخدش تنسيق بالرغم من ان قبله ‪P‬‬

‫‪‬‬ ‫عشان فصل االخوة بينهم الـ ‪Section‬‬
‫الل اتحط جواه‬
‫ي‬

‫هنا بيتم استهداف العنرص من خالل الـ ‪ attribute‬الخاص بيه‬

‫الل فوق أي عنرص ليه ‪ attribute‬اسمه ‪title‬‬
‫بالنظر للكود ي‬
‫هيتم تنسيقه‬

‫‪By: Amr Elsayed‬‬

 ‫هنا بيتم استهداف العنرص من خالل الـ ‪ attribute‬الخاص بيه‬
‫الل واخد الـ ‪ attribute‬دا بالنظر للكود‬
‫مع تحديد نوع العنرص ي‬
‫الل فوق أي عنرص ليه ‪ attribute‬اسمه ‪ title‬ونوعه ‪ div‬فقط‬
‫ي‬
‫هيتم تنسيقه‬

‫هنا بيتم استهداف العنرص من خالل الـ ‪ attribute‬الخاص بيه‬

‫مع تحديد قيمة الـ ‪ attribute‬دا و بالنظر لكود الـ ‪ HTML‬ي‬
‫الل فوق‬
‫وقيمته ‪ S01‬هيتم تنسيقه‬ ‫أي عنرص ليه ‪ attribute‬اسمه ‪title‬‬

‫ممكن احدد الـ ‪ Element‬نفسه زي الـ ‪ input‬و الـ ‪ attribute‬بتاعه زي الـ ‪type‬‬
‫و الـ ‪ value‬بتاعته زي الـ ‪submit‬‬

‫ن‬ ‫ن‬ ‫الل جواها ‪ Value‬فيها كلمة معينة او‬

‫بمعت ادق بينهم‬
‫ي‬ ‫كلمتي‬ ‫السطر األول بستهدف الـ ‪ attribute‬ي‬
‫مسافة زي (‪ )First Div‬مع العالمة =~‬
‫ن‬ ‫ن‬
‫الل جواه ‪ value‬فيها ‪ string‬ي‬
‫يعت جملة ممكن تكون‬ ‫التان بستهدف الـ ‪ attribute‬ي‬
‫السطر ي‬
‫الزقي ن يف بعض زي (‪ )TestDiv‬مع العالمة =*‬
‫ن‬ ‫ن‬
‫كلمتي او اكي‬

‫الل جواه ‪ value‬بتبدأ بحروف معينه وهو بيكمل عليه‬

‫السطر التالت بستهدف الـ ‪ attribute‬ي‬
‫ن‬
‫بالحرفي دول نسقه‬ ‫زي (‪ )S0‬مع العالمة =^ كدا انا بقوله أي ‪ attribute‬بيبدأ‬
 ‫ن‬
♥️‫تحفيية‬ ‫️♥عبارات‬

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
CSS Selectors Reference Part 3 Lesson #80

First-Child

Body ‫ من الـ‬first-child ‫هنا يتم بستهدف الـ‬

P ‫ربرسط انه يكون‬ ‫أو من االب ي‬
‫الل هو فيه‬


‫األب‬

‫األب‬

By: Amr Elsayed

 ‫ن‬ ‫هنا بستهدف االبن األخي من كل اب ر‬
‫برسط انه يكون ‪ paragraph‬وكذلك يكون اخر ابن يف األب بتاعه‬

‫األب‬
‫‪Last-Child‬‬
‫األب‬
‫‪Last-Child‬‬

‫‪‬‬ ‫ر‬
‫الرسط يكون االبن األخي ونوعه ‪P‬‬
‫‪‬‬

‫واألول‬ ‫بمعت انه رشط يكون العنرص ‪P‬‬

‫ي‬
‫ن‬ ‫هنا بستهدف ‪ paragraph‬ر‬
‫برسط يكون األول من نوعه ‪..‬‬
‫ن‬
‫من نوعه يف االب بتاعه‬

‫‪First-Of-Type ---> P‬‬

‫بمعت انه رشط يكون العنرص ‪ P‬و األخي‬
‫ي‬
‫ن‬ ‫هنا بستهدف ‪ paragraph‬ر‬
‫برسط يكون االخي من نوعه ‪..‬‬
‫ن‬
‫من نوعه يف االب بتاعه‬

‫هنا انا بستهدف ‪ paragraph‬ر‬

‫برسط يكون االبن الوحيد لالب بتاعه ‪ ..‬االبن الوحيد فقط ومش معاه أي أبناء‬
‫ن‬
‫غيه يف نفس االب‬

‫برسط ميكونش من نفس نوعه ‪..‬‬ ‫هنا بستهدف االبن الوحيد من نوعه نف االب حت لو معاه أبناء غيه بس ر‬
‫ي‬ ‫ي‬
‫ر‬ ‫ن ن‬
‫ان بستهدف االبن الوحيد من نوع الـ ‪ paragraph‬ي‬
‫حت لو معاه أبناء غيه برسط ان ميكونش األبناء دي‬ ‫بمعت ي‬
‫ي‬
‫من نفس النوع و اال هنا يبطل ر‬
‫الرسط‬

‫ن‬
‫الـ ‪ P‬الوحيد من نوعه بالرغم من وجود عنرص اخر معاه يف نفس األب‬
‫‪By: Amr Elsayed‬‬
‫‪CSS Selectors Reference Part 4 Lesson #81‬‬

‫ن‬
‫ان بستهدف منه‬
‫دا طبعا معروف ي‬
‫الـ ‪first-child‬‬

‫ن‬ ‫ن‬
‫ان عايز استهدف كل‬‫طيب يف حالة ي‬
‫الـ ‪ Paragraphs‬ماعدا الـ ‪first-child‬‬
‫هستخدم الـ )(‪ :not‬وداخلها ي‬
‫الل هيتم‬
‫استبعاده‬

‫هنا بيتم استهداف كل الـ ‪paragraphs‬‬

‫الل ليه ‪ Class‬اسمه ‪special‬‬
‫عدا ي‬

‫‪By: Amr Elsayed‬‬

 ‫هنا بستهدف العنرص من خالل رقمه او ترتيبه ن يف بنية الـ ‪HTML‬‬

‫هنا يتم استهداف‬ ‫هنا يتم استهداف‬

‫األرقام الزوجية‬ ‫األرقام الفردية‬ ‫‪-‬‬

‫قم بالضغط‬ ‫‪ nthmaser‬الحياف الـ ‪nth‬‬

‫هنا بستهدف العنرص باليتيب او ِببدأ العد من األسفل‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫هنا بيتم استهداف الـ ‪ Div‬و تحديدا ن‬
‫التان من نوعية الـ ‪div‬‬
‫ي‬
‫ن‬ ‫ن‬
‫الل فوق و بيبحث عن ي‬
‫تان عنرص‬ ‫المية هنا انه بيتجاهل اعداد الـ ‪ p‬ي‬
‫ن‬
‫من نوع الـ ‪ div‬و يبدأ يف تنسيقه‬

‫ً‬
‫هنا انا بستهدف العنرص األول من نوع الـ ‪ Div‬تحديدا و من تحت‬

‫اذكر هللا ️♥‬

‫الح القيوم واتوب اليه‪.‬‬
‫استغفروا هللا العظيم الذي ال إله اال هو ي‬
‫عل نبينا محمد ﷺ‪.‬‬ ‫ّ‬
‫اللهم صل وسلم وزد وبارك ي‬
‫ن‬
‫الظالمي‪.‬‬ ‫ان كنت من‬ ‫ن‬
‫ال إله اال انت سبحانك ي‬
‫العل العظيم‪.‬‬
‫ي‬ ‫ال حول وال قوة اال باهلل‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
CSS Selectors Reference Part 5 Lesson #82

‫ تاج‬HTML ‫لو حابب توصل للـ‬

Never Forget That (Always Search)

By: Amr Elsayed
 ‫ن‬
‫ان اخيت الـ ‪ input Element‬من خالل الـ ‪ attribute‬بتاعه‬
‫طيب الكود دا معناه ايه ‪ ...‬معناه ي‬
‫الل بعد الـ ‪ input Element‬باستخدام عالمة ‪)next-selector( +‬‬
‫بعد كدا حددت الـ ‪ label Element‬ي‬

‫وحددت من خالل الـ ‪ :checked‬ان لما عنرص الـ ‪ input‬يحصله ‪ - checked‬الـ ‪ label‬ي‬
‫الل بعده‬
‫يتغي لونه لألحمر‬

‫الل جنبه يتغي لونه لألحمر‬

‫لما يحصل ‪ - checked‬للـ ‪ - input‬الـ ‪ label‬ي‬

‫بيتم استخدامه الستهداف العنارص الفارغة و تنسيقها‬

‫الحال ‪ Div‬فارغ و ‪ div‬غي فارغ‬
‫ي‬ ‫زي المثال‬

‫‪By: Amr Elsayed‬‬

 ‫الغرض منه استهداف الـ ‪ inputs‬ي‬
‫الل بتكون غي قابلة للتعديل‬
‫وتنسيقها‬

‫الل بتكون ‪required‬‬

‫الغرض منه استهداف الـ ‪ inputs‬ي‬
‫وبعد كدا بالـ ‪ next selector‬بحدد العنرص ي‬
‫الل بعده‬
‫واقدر انسقه‬

‫الغرض منه استهداف الـ ‪ input‬وعند الضغط عليه‬

‫يتم الي ن‬
‫كي ”‪ “focus‬عليه بتغي لونه‬

‫تغي لون الـ ‪selection‬‬

‫تغي لون أي حقل موجود فيه ‪placeholder‬‬

‫‪By: Amr Elsayed‬‬

 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬

‫اكي و ال حول وال قوة اال باهلل‬

‫سبحان هللا و الحمد هلل و ال الـه اال هللا و هللا ر‬
‫عل نبينا محمد ﷺ‬ ‫وبارك‬ ‫وزد‬ ‫وسلم‬ ‫اللهم ّ‬
‫صل‬
‫ي‬
‫ن‬ ‫اللهم نإن أستغفرك واتوب إليك‪ ،‬ال اله اال انت سبحانك ن‬
‫الظالمي‬ ‫إن كنت من‬
‫ي‬ ‫ي‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬

‫‪Media Queries And Responsive Designs Intro Lesson #83‬‬
‫ببساطة شديدة الـ ‪ Responsive design‬هو التصميم ي‬
‫الل بيكون مستجيب مع‬
‫الل بتم تحديدها‬ ‫وط‬‫الرس‬ ‫المستخدم نف أي شاشة عرض ً‬
‫بناءا عل بعض ر‬
‫ي‬ ‫ي‬ ‫ي‬
‫ه عبارة عن استفسارات او استعالمات والـ ‪ media‬ي‬
‫ه الوسائط‬ ‫أما الـ ‪ Media Queries‬ي‬
‫ن‬ ‫ن‬
‫بمعت ادق هو االستعالم عن المقاسات المتاحة لعرض التصميم يف مختلف الشاشات‬
‫ي‬
‫‪Syntax‬‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫‪By: Amr Elsayed‬‬

 ‫تعال نطبق ونضيف الكود دا ونفهم معناه‬
‫ي‬ ‫طيب‬

‫يعتي دا الـ ‪Condition‬‬

‫استخدام الـ ‪ max-width‬مع تحديد القيمة أيا كانت القيمة دي ولنفيض ‪ 1000px‬ر‬
‫يعت تبدأ من ‪ 0px‬لـ ‪ 1000px‬دا اخرك‬‫ن‬
‫ه ‪ 1000px‬ي‬ ‫اقص حاجه توصلها ي‬
‫ي‬ ‫اقص عرض‬‫ي‬ ‫و دا معناه ان‬
‫ن‬ ‫ن‬
‫تبف ازرق بمجرد ما تعدي الـ ‪ max‬ي‬
‫الل‬ ‫وطول ما انت يف الحي دا الـ‪ background-color‬للـ ‪ Div‬ي‬
‫طبيغ للونها األحمر‬
‫ي‬ ‫حددته دا ترجع‬

‫بدأت من ‪ 0px‬ومكمل للـ ‪ 750px‬ولحد الـ ‪1000px‬‬

‫الطبيغ‬
‫ي‬ ‫الل هو ‪ 1000px‬و أروح لـ ‪ 1040px‬يبدأ يرجع للـ ‪background-color‬‬
‫بمجرد ما اعدي الـ ‪ max‬ي‬

‫تان ر‬
‫برس ن‬
‫طي ونفهم معناه‬ ‫تعال نجرب مثال ن‬
‫ي‬ ‫ي‬
‫)‪@media (min-width:800px) and (max-width: 1050px‬‬
‫{‬
‫{ ‪.parent > div‬‬
‫;‪background-color: blue‬‬
‫}‬
‫}‬

‫استخدام الـ ‪ min‬و الـ ‪ max‬بأي قيمة مهما كانت دا معناه أي ؟!‬
‫ن‬
‫معناه لما أقول الـ ‪ min-width‬قيمتها ‪ 800px‬فأنا هنا بقوله ان اقل قيمة تبدأ من عندها يف تنفذ‬
‫ه ‪ 800px‬دي البداية بتاعتك من ‪800px‬‬ ‫المطلوب ي‬

‫‪By: Amr Elsayed‬‬

 ‫ينته عندها تنفيذ المطلوب‬
‫ي‬ ‫اقص قيمة‬
‫ي‬ ‫ولما أقول الـ ‪ max-width‬قيمتها ‪ 1050px‬دا معناه ان‬
‫الرسط وما قبل الـ ‪ 800‬دي ميبدأش تنفيذ ر‬
‫الرسط‬ ‫ه الـ ‪ 1050px‬وما بعد الـ ‪ 1050‬دي ينته تنفيذ ر‬
‫ي‬ ‫ي‬

‫الرسط مش هيتنفذ ولكن بمجرد ما أوصل للـ ‪ 800‬يبدا تنفيذ ر‬

‫الرسط‬ ‫حاليا انا اقل من الـ ‪ 800px‬ف لسه ر‬

‫بي القيمة ‪ 800px‬لحد القيمة ‪ 1050px‬ر‬

‫الرسط يفضل متحقق‬ ‫ما ن‬

‫بعد ما اتجاوز الـ ‪ 1050px‬ولو ب ـ ـ ـ ‪ 1px‬ينته تنفيذ ر‬

‫الرسط‬ ‫ي‬

‫طيب نف حالة استخدام الـ ‪ min-width‬فقط ر‬

‫كرسط‬ ‫ي‬
‫{ )‪@media (min-width:800px‬‬
‫{ ‪.parent > div‬‬
‫;‪background-color: blue‬‬
‫}‬
‫}‬

‫ان بقوله اقل عرض تبدأ من عنده تنفيذ الكود هو ‪ 800px‬و ما قبل الـ ‪ 800px‬مش‬ ‫الكود دا معناه ن‬
‫ي‬
‫محسوب‬
‫اقص عرض‬ ‫محددتش‬ ‫إلن‬‫وبمجرد ما تبدأ من ‪ 800px‬تنفيذ الكود ممتد ال ما شاء هللا ‪ ..‬ال ماال نهاية ن‬
‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬
‫او (‪ )max-width‬يقف تنفيذ الكود عنده‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪Media Queries And Responsive Designs Standards Lesson #84‬‬
‫يمكنك استخدام الـ ‪ Media‬ن يف أي مكان عندك سواء ن يف ملف الـ ‪ CSS‬او ملف الـ ‪HTML‬‬
‫ن‬
‫حت يف ملف ‪ CSS‬منفصل تماما‬ ‫او ي‬
‫الـ ‪ media attribute‬ممكن تستعمله ن يف تاج الـ ‪link‬‬

‫ن‬
‫ممكن تستعمل الـ ‪ media‬يف الـ ‪ src‬تاج‬
‫ممكن تستعمله ن يف تاج الـ ‪style‬‬

‫والل يفضل ديما استخدام الـ ‪ media‬فيه هو انك تحتها ن يف ملف الـ ‪CSS‬‬
‫ي‬ ‫ولكن الـ ‪best practice‬‬
‫األصل بتاعك تحت تنسيقات العنرص الخاصة بيه بحيث تقدر توصله بسهوله وبرسعة‬
‫ي‬
‫‪1‬‬

‫‪By: Amr Elsayed‬‬

 Standard Media

Never Forget That (Always Search)

By: Amr Elsayed
 ‫ببساطه شديدة انا كدا حددت ‪ media‬وهحط فيها تنسيقات معينه ممكن كل ‪ media‬احط فيها‬
‫ن‬ ‫ن‬
‫الل انا محددها دي فقط‬
‫تنسيق معي مش هيظهر غي يف المساحة ي‬

‫ن‬
‫الل‬
‫ي‬ ‫التنسيقات‬ ‫تنفيذ‬ ‫عل اول ‪ media‬الخاصة بالـ ‪ mobile‬انا هنا بقوله اخرك ي‬
‫ف‬ ‫‪ -‬لما نبص ي‬
‫يعت تبدأ من ‪ 0px‬لحد ‪ 767px‬تطبق التنسيقات دي‬ ‫ن‬
‫هحطها جواك لحد المساحه ‪ 767px‬ي‬

‫وينته عنده‬
‫ي‬ ‫‪ media‬الخاصة بالـ ‪ Small Screens‬انا هنا حاطط رينج يبدا من عنده‬ ‫‪ -‬ولما نبص ع الـ‬
‫وينته عند المساحة ‪991px‬‬ ‫ن‬
‫بمعت انه يبدا من المساحه ‪768px‬‬
‫ي‬ ‫ي‬
‫الل هحطها‬
‫وداخل الرينج دا نفذ التنسيقات ي‬

‫‪ -‬ولما نبص ع الـ ‪ media‬الخاصة بال ‪ Medium Screens‬انا هنا حاطط رينج وبقوله‬
‫ابدا من المساحة الل قابل ر‬
‫مباشة لحد ما توصل لـ ‪992px‬‬ ‫ي‬ ‫ي‬

‫‪ -‬ولما نبص ع الـ ‪ media‬الخاصة بال ‪ Large Screens‬انا هنا حاطط رينج وبقوله‬
‫ابدا من المساحة الل قابل ر‬
‫مباشة لحد ما توصل لـ ‪1200px‬‬ ‫ي‬ ‫ي‬

‫ن‬
‫‪ -‬وعملت ‪ media‬خاصة مختلفة بمساحة معينه هحط فيها تنسيقات معينه تتنفذ يف المساحة دي فقط‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ر‬ ‫ر‬
‫شء قدير‬
‫عل كل ي‬‫ال اله اال هللا وحده ال شيك له ‪ ..‬له الملك و له الحمد وهو ي‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪Media Queries And Responsive Designs Practice Lesson #85‬‬
‫ه الـ ‪meta viewport‬‬
‫أول حاجه محتاجها عشان تجعل التصميم بتاعك ‪ responsive‬ي‬

‫ن‬
‫بمعت انه هشوف التصميم وهو متجاوب مع شاشات الهاتف األول‬ ‫ر‬
‫همس بمبدأ ‪mobile first‬‬
‫ي‬ ‫ي‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫دي بتكون تنسيقات للعنارص بشكل عام خارج أي ‪media‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫شاشة الموبايل انا مش محتاج اعدل يف الـ ‪ media‬بتاعتها حاجه‬
‫ن‬
‫الن خليت كل العنارص تاخد الـ ‪ Full-width‬بشكل عام يف أي شاشة‪ ،‬ولكن الـ ‪full-width‬‬
‫ن‬
‫باف الميديا التانية‬
‫الزم اعدله ي ي‬
‫ف‬

‫ه الـ ‪Small Screens‬‬

‫الل ي‬
‫الل بعد كدا ي‬
‫ندخل ع الـ ‪ media‬ي‬

‫ن‬
‫وف الـ ‪ media‬دي حددت ان الـ ‪ width‬يكون ‪ 50%‬لكل عنرص‬
‫بدأت من الـ ‪ 768px media‬ي‬
‫ناقص ‪ 10px‬مسافات بينهم بس‬

‫‪By: Amr Elsayed‬‬

 ‫ه الـ ‪Medium Screens‬‬
‫الل ي‬ ‫ندخل ع الـ ‪ media‬ي‬
‫الل بعد كدا ي‬

‫مباشة نف التنفيذ من بعد الـ ‪ 992px‬النها قبل الـ ‪ 992px‬كانت موجودة نف ن‬

‫حي الـ ‪media‬‬ ‫بدأت ر‬
‫ي‬ ‫ي‬
‫بتاع الـ ‪768px‬‬
‫ه ‪992px‬‬ ‫أصال الكود معناه انه اقل حاجه هيبدا من عندها تنفيذ المطلوب ي‬
‫ن‬
‫الل يف الـ ‪ media‬اال بعد ما يوصلها‬
‫لذلك قبل المساحة دي هو مش هينفذ الكود ي‬

‫تيح ‪ media‬بعدها تستلم منها وتبدأ تنفذ رشوط تانية‬

‫الـ ‪ media‬دي هتفضل ممتدة لالبد لحد ما ر ي‬
‫ال ماال نهاية ؟!‬
‫طيب ليه هتفضل ممتدة ي‬
‫النك بالمنطق قولتله الـ ‪ 992px‬دي اقل حاجه تبدأ من عندها تنفيذ ر‬
‫الرسط و محددتش‬
‫تيح ‪media‬‬ ‫ر‬ ‫ر‬
‫الل الرسط دا هيقف عندها لذلك الرسط هيفضل شغال لحد ما ر ي‬‫الـ ‪ break point‬ي‬
‫بعده توقفه‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ر‬ ‫ر‬
‫شء قدير‬ ‫ال اله اال هللا وحده ال شيك له ‪ ..‬له الملك و له الحمد وهو ي‬
‫عل كل ي‬
‫ن‬
‫الظالمي‬ ‫إن كنت من‬ ‫ال إله إال أنت سبحانك ن‬
‫ي‬
‫سبحان هللا وبحمده سبحان هللا العظيم‬
‫ْ َّ َ ْ َ ئ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬ ‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪Create Your Framework Lesson #86‬‬
‫ببساطة شديدة الفكرة من عمل ‪ framework‬خاص بيك او بشغلك انك تقلل من كتابه االكواد ن يف الـ ‪CSS‬‬
‫معي وتحط فيه تنسيقات محددة‬ ‫ن‬ ‫طيب دا ممكن يحصل ازاي عن طريق انك تعمل ‪ class‬باسم‬
‫وتروح لملف الـ ‪ HTML‬أي عنرص عندك حابب تديله التنسيقات دي تحط داخله اسم ال ‪ class‬بس ‪..‬‬
‫موضوع بسيط جدا‬

‫‪HTML‬‬ ‫‪CSS‬‬

‫ُ‬
‫ان عايز انسق العنرصين دول بحيث انهم يكونوا ن يف نص الصفحة !!‬
‫ي‬
‫طيب نف حالة ن‬
‫ي‬
‫هبف محتاج ن‬
‫ان انسق كل عنرص لوحده‬ ‫ي‬ ‫ي‬

‫‪By: Amr Elsayed‬‬

‫وكمان تنسيق تنسيق خاص بـ ‪ Class‬الـ ‪product‬‬ ‫زي مثال تنسيق خاص للـ ‪Child‬‬

‫ن‬
‫وكل الكتابة دي الغرض منها توسيط كل عنرص يف منتصف الصفحة‬

‫ان اعمل ‪ framework‬خاص بيا‬‫هنا بقا يح دور ن‬

‫ي‬ ‫ر ي‬

‫ن‬
‫بعدها اخد اسم الـ ‪ class‬دا واحطه ك ـ ‪ class‬يف ملف الـ ‪ HTML‬داخل أي عنرص عايز اديله نفس التنسيق دا‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫ن‬
‫ان عايز انسق الـ ‪ product‬يف نص الصفحة واسيب الـ ‪ Child‬ي‬
‫الل فوق دا زي ما هو‬ ‫ولنفيض ي‬

‫طيب لو حبيت انسق العنرص الـ ‪ Child‬الل خلفيته ن‬

‫خرصاء بنفس التنسيقات هل اروح‬ ‫ي‬
‫ن ن‬
‫تان يف الـ ‪ CSS‬واقعد اكررها ‪ ...‬ال هعمل ي‬
‫االن‪:‬‬ ‫احط التنسيقات دي كلها ي‬

‫الل عملتها للـ ‪Class‬‬

‫بمجرد ما احط الـ ‪ Class‬الي عنرص داخل ملف الـ ‪ HTML‬هياخد التنسيقات ي‬
‫دا داخل ملف الـ ‪CSS‬‬

‫‪By: Amr Elsayed‬‬

‫طيب لو حبيت اخ يل عنرص فيهم عبارة عن دائرة هروح ملف الـ ‪ CSS‬اعمل ‪ Class‬جديد‬
‫خالص اديلها تنسيقات الدائرة واخد اسم الـ ‪ Class‬دا اضيفها للعنرص ن يف ملف الـ ‪HTML‬‬

‫ن‬
‫تان لو حبيت أوسط كلمة ‪ Child‬دي داخل الدائرة اعمل اي ؟‬
‫طيب ي‬
‫الل هوسط بيه الكلمة‬‫هعمل ‪ framework‬فيه تنسيقات الـ ‪ Flex‬ي‬

‫بعد كدا اضيف الـ ‪ class‬دا للعنرص ن يف ملف الـ ‪HTML‬‬

‫‪By: Amr Elsayed‬‬

 ‫الل عليا ن يان احط أسماء الـ ‪Class‬‬
‫ولو حبيت انسق عنرص الـ ‪ product‬نفس تنسيقات الـ ‪ Child‬كل ي‬
‫بس جنب العنرص ن يف ملف الـ ‪HTML‬‬
‫‪Before‬‬

‫‪HTML‬‬

‫‪After‬‬

‫باختصار شديد الـ ‪ Framework‬الهدف منها هو تقليل كتابة اكواد كتي ن يف ملف الـ‪CSS‬‬
‫ن‬ ‫ن‬
‫لو يف ‪ 4‬عنارص عايز اوسطهم يف منتصف الصفحة فمش رشط امسك كل عنرص لوحده انسقه‬
‫لكن ممكن اعمل ‪ Class‬فيه كل تنسيقات الـ‪ center‬واضيفها فقط للعنارص دي ن يف ملف الـ ‪HTML‬‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
CSS Global Values Lesson #87

HTML CSS

By: Amr Elsayed

‫‪1- inherit‬‬
‫ن‬
‫ان اورث خصائص معينه من األب لألبن بتاعه‬
‫ه ي‬‫ببساطة شديدة الهدف من الخاصية دي ي‬
‫ه‬ ‫الل فوق باألحمر دي و ورثناها خاصية من خواص االب الكبي ي‬
‫الل ي‬ ‫لو خدنا كلمة ‪ paragraph‬ي‬
‫جواه‬

‫الل هوا فيه ولو غينا حاجه ن يف خاصية الـ‬

‫هنالحظ ان الـ ‪ p‬ورث خاصية الـ ‪ border‬من االب ي‬
‫‪ border‬بالنسبة لألب ‪ ...‬االبن برضو هيورثها ويتغي معاه‬

‫‪2- initial‬‬
‫تعتي الـ ‪ Default Value‬ألي خاصية‬
‫ه ر‬ ‫ببساطه شديدة ي‬
‫ن‬
‫لكن المتصفح بيحط للعنرص دا تنسيقات من‬ ‫‪display: inline‬‬ ‫أي عنرص يف الدنيا هو عبارة عن‬
‫عنده عشان ن‬
‫يميه عن عنارص تانية‬

‫غ‬ ‫والطبي‬ ‫اض‬‫بمجرد كتابه الخاصية ‪ initial‬الي عنرص فدا معناه نان برجع العنرص دا لوضعه االفي ن‬
‫ي‬ ‫ي‬ ‫ي‬
‫ا‬
‫متجاهًل تنسيقات الـ ‪browser‬‬

‫هيبف ‪inline‬‬ ‫الل من خالله‬ ‫معت كدا ان الـ ‪ div‬األب الكبي هيجع لوضعه‬‫ن‬
‫ي‬ ‫الطبيغ ي‬
‫ي‬ ‫ي‬
‫ا‬
‫الل كانت مخليها ‪Block Element‬‬
‫ي‬ ‫‪browser‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫تنسيقات‬ ‫متجاهًل‬
 ‫‪3- Unset‬‬
‫ن‬
‫بساطة شديدة القيمة دي بتعمل عمل الـ ‪ inherit‬يف حالة ان الخاصية ي‬
‫الل بتشتغل عليها‬
‫دي ممكن ترث عادي‬
‫ن‬
‫دي ال ترث‬ ‫و بتعمل عمل الـ ‪ initial‬يف حالة ان الخاصة الخاصية ي‬
‫الل بتشتغل عليها‬

‫عل زرار الـ ‪ button‬واديت خاصية الـ‪ color‬بتاعته القيمة ‪unset‬‬

‫لو جيت ي‬
‫الل هو فيه اللون الن الـ‪ color‬خاصية بيث قيمتها من االب‬
‫هيحصل ان الـ‪ color‬دا هيث من االب ي‬
‫عادي جدا‬

‫ن‬
‫يف العادي الـ ‪ Button‬لونه اسود‪ ،‬ولكن لما اغي قيمة الـ ‪ color‬واحط ‪ Value‬الـ ‪ unset‬هيحصل ان‬
‫ن‬
‫الل بيث قيمتها عادي‬
‫ي‬ ‫الخصائص‬ ‫من‬ ‫‪color‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫خاصية‬ ‫الن‬ ‫‪inherit‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫وضع‬ ‫ف‬ ‫الـ ‪ color‬ي‬
‫يبف ي‬

‫{ ‪button‬‬
‫;‪color: unset‬‬ ‫===‬ ‫‪color:‬‬
‫;‪inherit‬‬
‫}‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫الل ال ترث من االب هنا بقا القيمة ‪unset‬‬
‫زي الـ ‪ Border‬ي‬ ‫طيب يف حالة ان عندي خاصية‬
‫هتعمل عمل الـ ‪initial‬‬

‫هنا الـ ‪ Button‬لم يرث قيم خاصية الـ ‪ Border‬من االب‬

‫‪4- revert‬‬
‫ببساطه شديدة الغرض من القيمة دي انها ترجع العنارص للقيمة االفياضية ي‬
‫الل‬
‫ُ‬ ‫ُ‬
‫الل ِبتعرف بالـ ‪user agent stylesheet‬‬
‫الـ ‪ Browser‬بيحطها بنفسه للعنرص ي‬

‫اذا ن‬
‫تان بوضوح اكي الـ ‪ user agent‬او الـ ‪ browser‬بشكل عام بيحط قيم من عنده لبعض‬
‫ي‬
‫العنارص زي مثال الـ ‪ margin‬المتصفح بيحط ‪ 8px‬من عنده‬

‫الل المتصفح‬
‫الطبيغ ي‬
‫ي‬ ‫لو حبيت بقا ارجع لوضعة‬ ‫‪ reset‬للـ ‪ margin‬دا و أخليه ‪0‬‬ ‫لما ر ي‬
‫اح اعمل‬
‫بيحطه بنفسه‬

‫الطبيغ دا بتاع المتصفح هو استخدام القيمة ‪ revert‬بحيث انها‬ ‫ن‬

‫ان ارجعه للوضع‬
‫ي‬ ‫هيبف افضل حل ي‬
‫ي‬
‫ترجع للـ ‪ margin‬القيمة ‪ 8px‬ي‬
‫الل بيحطها المتصفح من نفسه‬

‫‪5- all‬‬
‫ببساطة شديدة بيتم استخدامها لجمع جميع الخواص مرة واحدها مع بعض واعطائهم قيمة‬
‫اترسحت فوق‬‫من القيم الل ر‬
‫ي‬

‫‪By: Amr Elsayed‬‬

The End And How To Master HTML And CSS Lesson #88

CSS♥️
Css Battle
CSS Templates
Front-End Mentor
Learn Git & GitHub
Elzero Web - Assignments
Elzero Web School challenges
CSS Reference – For All Properties

By: Amr Elsayed

 ‫ن‬
‫تحفيية️♥‬ ‫️♥عبارات‬

‫ينبغ لجالل وجهك ولعظيم سلطانك‪.‬‬ ‫كثيا مبارًكا فيه كما ن‬

‫طيبا ً‬ ‫حمدا ً‬ ‫ً‬
‫اللهم لك الحمد‬
‫ي‬
‫َ ا ُ َ َّ ا‬ ‫ً‬ ‫ّ‬ ‫ًْ‬ ‫ً‬ ‫ً‬ ‫َُ َ‬ ‫َّ َّ نّ‬
‫ورزقا طيبا‪ ،‬وعمًل متقبًل‪.‬‬ ‫ِ‬ ‫ا‪،‬‬‫نافع‬ ‫ا‬‫لم‬ ‫ع‬‫ِ‬ ‫ك‬ ‫ل‬ ‫أسأ‬ ‫إن‬
‫اللهم ي‬
‫ُ‬
‫أستغفرك واتوب اليك‪.‬‬ ‫سبحانك اللهم وبحمدك أشهد ان ال إله اال انت‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬

 ‫الخاتمة وشويه فضفضة ️♥‬
‫ن‬
‫وتعال أتوجه بجزيل الشكر واالمتنان والعرفان بالجميل‬
‫ي‬ ‫❖ يف البداية وبفضل هللا سبحانه‬
‫الل بفضل هللا علينا ثم مجهوده مكنش الـ ‪ Text‬دا تم ربنا يجازيك كل خي‬
‫للبشمهندس أسامة الزيرو ي‬
‫ويكرمك ويوسع رزقك ويمال حياتك خي وبركه وسعادة ويرزقك الفردوس األعل انت وكل احبابك‬
‫لينك القناة‬
‫لينك البالي ليست الخاصة بالـ ‪CSS‬‬
‫اكود الدروس مكتوبة بالكامل‬
‫لينك اكاديمية الزيرو‬
‫لينك التكليفات‬
‫لينك لمراجعة حل التكليفات‬
‫❖ استكماال للمشوار وبعد تلخيص الـ ‪ HTML‬وفقنا هللا لتلخيص الـ ‪ .. CSS‬ارجوا من هللا عز‬
‫وجل ان يكون ذا نفع للجميع ‪ ..‬و ارجوا من هللا عز وجل ان يجعل هذا العمل نف ن‬
‫ميان‬ ‫ي‬
‫حسناتنا جميعا‬
‫نظرا لطلب ناس كتي جدا شافوا ان الملخص هيكون افيد لو‬ ‫اإلنجليية ً‬
‫ن‬ ‫❖ تجنبت الكتابة باللغة‬
‫مكتوب باللغة العربية‬
‫ن‬
‫❖ بعتذر عن وجود أي أخطاء امالئية او أخطاء يف أي كود فالكمال هلل وحده‬
‫ن‬
‫❖ خصصت يف الملخص دا تلت أجزاء ‪ ..‬الجزء األول لذكر هللا عشان متخليش حاجه ابدا تشغلك‬
‫الل قادر ينجيك ويفتحلك ابواب الرزق ويرزقك ويسهل عليك الفهم‬ ‫عن ذكر هللا ي‬
‫ن‬ ‫ن‬ ‫ن‬
‫رئيس يف تكبي حجم‬
‫ي‬ ‫جزئي العبارات التحفيية و جمل وعبارات راقت يل اه هما ر‬
‫يعتيوا سبب‬ ‫و‬
‫الملخص‪ ،‬ولكن وهللا حبيت انهم يكرسوا ملل المذاكرة والقراءة وربما يكون فيهم نفع او الهام لحد‬
‫❖ تم االستعانة ببعض صور ر‬
‫الرسح من موقع ‪Pinterest‬‬
‫موش لتنفيذه جدول المحتويات‬
‫ي‬ ‫لصديف البشمهندس اسالم‬‫ي‬ ‫❖ كامل شكري و تقديري‬
‫❖ الملخص دا اخد نف تنفيذه ‪ 3‬شهور و ازيد من السهر والتعب و التصميم والتنسيق و اتعمل ر‬
‫اكي‬ ‫ي‬
‫بأكي من طريقة عشان يطلع بأفضل شكل ممكن‬ ‫من مرة و ر‬
‫ن‬
‫تفتكرن‬ ‫❖ ألي حد هيوصله الكالم دا مش طالب منك غي طلب واحد وامانة عليك الزم تنفذه و هو انك‬
‫ي‬
‫بدعوة طيبة لوجه هللا‬
‫❖ ‪Never Forget That Always Search‬‬
‫‪GitHub Account‬‬ ‫عي الفيس بوك‬
‫مغ ر‬
‫للتواصل ي‬
‫‪Codepen Account‬‬ ‫عي تويي‬‫مغ ر‬
‫للتواصل ي‬
‫ن‬
‫افتكرون بدعوة طيبة لوجه هللا واشوفكم ان شاء هللا مع حاجه أفضل وأفضل لكورس الـ ‪JS‬‬
‫ي‬
‫شكرا لكم ️♥‬
‫‪By: Amr Elsayed‬‬