CSS
CSS Text Course
عن الكورس
فايدة الكورس إنك تقدر تحول صفحة HTML لواجهة واضحة ومنظمة وتعبر عن التصميم اللي في بالك وتفهم سبب ظهور العناصر بالشكل ده علشان تتحكم في التنسيق وتحل مشاكله بثقة عن طريق إستخدام لغة ال CSS وهي اللغة المسؤولة عن شكل صفحات الويب وتنسيقها وتناسبها مع أحجام الشاشات المختلفة
Tables
1
تنسيق الجدول والخلايا والحدود
2
محاذاة محتوى الخلايا وعنوان الجدول
3
عرض الأعمدة والفرق بين auto و fixed
4
المسافات بين الخلايا والخلايا الفاضية
5
عرض جدول عريض داخل مساحة صغيرة
6
تطبيق على جدول مقارنة كورسات
IntroductionFree
7 يعني إيه CSS وإيه دورها في صفحة الويب 8 طرق إضافة تنسيق CSS للصفحة 9 تجهيز مشروع learn-css وربط أول ملف تنسيق 10 فهم Selector و Property و Value في كود CSS 11 اختيار العناصر باستخدام اسم العنصر و class و id 12 التعليقات في CSS وتطبيق عملي 13 طريقة التسمية Naming Convention 14 تجميع المحددات باستخدام Grouping SelectorsBackgroundsFree
15 لون الخلفية باستخدام background-color 16 صورة الخلفية ومسارها باستخدام background-image 17 تكرار صورة الخلفية باستخدام background-repeat 18 مكان صورة الخلفية باستخدام background-position 19 حجم صورة الخلفية والفرق بين cover و contain 20 حركة الخلفية مع التمرير باستخدام background-attachment 21 اختصار خواص الخلفية باستخدام backgroundColorsFree
22 أسماء الألوان وكتابة اللون باستخدام Hex 23 كتابة الألوان باستخدام RGB و RGBA 24 التحكم في درجة اللون باستخدام HSL و HSLA 25 الفرق بين Alpha و opacity في الشفافيةBox ModelFree
26 المسافات الداخلية باستخدام padding 27 المسافات الخارجية وتوسيط العنصر باستخدام margin 28 اندماج المسافات الخارجية Margin Collapse 29 سمك الحدود وشكلها ولونها باستخدام border 30 الإطار الخارجي outline والفرق بينه وبين border 31 عرض العنصر وارتفاعه باستخدام width و height 32 حساب حجم العنصر باستخدام Box Model و box-sizing 33 الحد الأدنى والأقصى للأبعاد باستخدام min و max 34 المحتوى الزائد والتمرير باستخدام overflow 35 استدارة الأركان باستخدام border-radiusDisplay And Visibility
36
طريقة عرض العنصر باستخدام display و Block
37
العناصر داخل السطر باستخدام Inline
38
الجمع بين العرض داخل السطر والأبعاد باستخدام Inline Block
39
إخفاء العناصر والفرق بين display و visibility
40
تطبيق للمقارنة بين طرق العرض والإخفاء
Text Styling
41
لون النص وإضافة ظل باستخدام text-shadow
42
محاذاة النص باستخدام text-align
43
زخرفة النص وتغيير حالة الحروف
44
المسافات بين الحروف والكلمات والسطور
45
التعامل مع النص الطويل باستخدام white-space و text-overflow
Typography
46
وراثة خواص النص باستخدام Inheritance
47
اختيار نوع الخط باستخدام font-family
48
حجم الخط والفرق بين px و em و rem
49
سمك الخط والميل وشكل الحروف الصغيرة
50
اختصار خواص الخط باستخدام font
51
تطبيق على تنسيق بطاقة قراءة
Layout Basics
52
تغيير شكل مؤشر الماوس باستخدام cursor
53
التفاف النص حول عنصر باستخدام float
54
إيقاف الالتفاف واحتواء العناصر المعومة
55
حساب المساحات باستخدام calc
56
تطبيق على عمودين باستخدام float و calc
Positioning
57
مكان العنصر الطبيعي والفرق بين static و relative
58
تحديد مكان عنصر داخل عنصر باستخدام absolute
59
تثبيت عنصر في شاشة المتصفح باستخدام fixed
60
تثبيت العنصر وقت التمرير باستخدام sticky
61
ترتيب العناصر المتداخلة باستخدام z-index
Lists
62
تنسيق علامات القوائم باستخدام list-style
63
بداية ترقيم القائمة والتحكم في رقم عنصر
64
عكس ترقيم القائمة باستخدام reversed
65
صورة علامة القائمة واختصار list-style
66
تطبيق على القوائم المتداخلة والمسافات
Pseudo Classes And Elements
67
تنسيق التفاعل باستخدام hover و focus و active
68
حالات الروابط والحقول باستخدام visited و checked و disabled
69
اختيار العناصر حسب ترتيبها باستخدام first-child و nth-child
70
تنسيق أول حرف وأول سطر والنص المحدد
71
إضافة شكل قبل العنصر وبعده باستخدام before و after
72
تطبيق على before و after مع تحديد المكان
73
الترقيم التلقائي باستخدام Counter Increment
Shadows And Transitions
74
ظل العنصر باستخدام box-shadow
75
الظل الداخلي وأكتر من ظل لنفس العنصر
76
أول انتقال باستخدام transition-property و transition-duration
77
سرعة الانتقال وتأخير بدايته
78
اختصار transition وانتقال أكتر من خاصية
79
تطبيق كارت تفاعلي بظل وانتقال
Flexbox
80
بداية Flexbox والفرق بين الأب والأبناء
81
اتجاه العناصر وفهم المحورين
82
نزول العناصر لسطر جديد والمسافات
83
توزيع العناصر باستخدام justify-content
84
محاذاة العناصر باستخدام align-items و align-self
85
محاذاة سطور الفليكس باستخدام align-content
86
توزيع المساحة الزيادة باستخدام flex-grow
87
انكماش العناصر باستخدام flex-shrink
88
المقاس الأساسي واختصار flex
89
ترتيب العناصر والمسافات التلقائية
90
تطبيق شريط أدوات وحقل بحث مرن
91
تطبيق كروت بارتفاع متناسق وزرار في الأسفل
Grid
92
بداية Grid وفهم الصفوف والأعمدة
93
توزيع العرض باستخدام fr و repeat
94
ارتفاع الصفوف والصفوف التلقائية
95
المسافات وقياسات الأعمدة باستخدام minmax
96
تحديد مكان العنصر بخطوط الشبكة و span
97
تقسيم الصفحة باستخدام grid-template-areas
98
محاذاة العناصر داخل خلايا Grid
99
محاذاة الشبكة كلها داخل الأب
100
التوزيع التلقائي باستخدام grid-auto-flow
101
عدد أعمدة تلقائي باستخدام auto-fit و auto-fill
102
النص الطويل والحد الأدنى لأعمدة Grid
103
تطبيق لوحة بسيطة باستخدام Grid و Flexbox
104
تطبيق كروت متناسقة باستخدام subgrid
2D Transforms
105
تحريك العنصر باستخدام translate
106
تكبير وتصغير العنصر باستخدام scale
107
تدوير العنصر باستخدام rotate
108
إمالة العنصر باستخدام skew
109
نقطة التحويل باستخدام transform-origin
110
دمج التحويلات وأهمية ترتيبها
111
توسيط عنصر باستخدام translate
112
فهم matrix بمثال بسيط
113
تطبيق كارت تفاعلي بخط متحرك
3D Transforms
114
فهم العمق والتحريك باستخدام translateZ
115
الدوران حول المحاور باستخدام rotateX و rotateY
116
التحكم في المنظور باستخدام perspective
117
تغيير مكان النظر باستخدام perspective-origin
118
الحفاظ على عمق العناصر باستخدام preserve-3d
119
إخفاء ظهر العنصر باستخدام backface-visibility
120
تطبيق كارت بوجهين في مساحة 3D
Animations
121
أول حركة باستخدام keyframes
122
تقسيم الحركة لمراحل بالنسب المئوية
123
سرعة الحركة باستخدام animation-timing-function
124
التأخير والتكرار واتجاه الحركة
125
شكل العنصر قبل وبعد الحركة باستخدام fill-mode
126
إيقاف الحركة مؤقتا باستخدام play-state
127
اختصار animation وتشغيل أكثر من حركة
128
تطبيق مؤشر تحميل مع تقليل الحركة
129
تطبيق ظهور كروت بتأخير متتابع
Responsive Design And Media Queries
130
فهم التصميم المتجاوب ومساحة العرض
131
أول شرط باستخدام Media Query
132
بناء التصميم بأسلوب Mobile First
133
اختيار Breakpoints وتجميع شروط العرض
134
صور ونصوص مرنة من غير سكرول أفقي
135
شروط التفاعل واتجاه العرض والطباعة
136
تطبيق صفحة كورسات متجاوبة واختبارها
CSS Variables And Custom Properties
137
تعريف المتغيرات واستخدام var
138
نطاق المتغير والوراثة وتغيير القيمة
139
القيمة البديلة وأخطاء استخدام المتغير
140
استخدام المتغيرات مع calc والمقاسات
141
تغيير المتغيرات مع Media Queries
142
تطبيق كروت بثيم فاتح وداكن
Filters And Blend Modes
143
تأثيرات الصور باستخدام filter
144
السطوع والتباين وتشبع الألوان
145
تغيير الألوان وترتيب الفلاتر
146
الفرق بين drop-shadow و box-shadow
147
دمج طبقات الخلفية باستخدام background-blend-mode
148
دمج العناصر وعزل التأثير باستخدام isolation
149
تطبيق كارت صورة بتأثير تفاعلي
CSS Selectors And Specificity
150
اختيار العناصر حسب علاقتها ببعض
151
اختيار العناصر عن طريق Attributes
152
فهم وزن المحدد Specificity
153
الوراثة و Inline Style و important
154
تجميع واستثناء المحددات باستخدام is و where و not
155
اختيار الأب حسب المحتوى باستخدام has
156
تطبيق تتبع تعارضات التنسيق في DevTools
Logical Properties And Writing Modes
157
فهم اتجاه السطر و اتجاه البلوك
158
المسافات المنطقية باستخدام Margin و Padding
159
أبعاد العنصر باستخدام Inline Size و Block Size
160
الحدود و موضع العناصر حسب اتجاه الكتابة
161
تغيير اتجاه الكتابة باستخدام Writing Mode
162
تطبيق كارت يدعم الاتجاهين بنفس كود التنسيق
Images And Object Fitting
163
تغيير حجم الصورة من غير ما تتشوه
164
الفرق بين Fill و Contain و Cover في Object Fit
165
عرض الصورة بحجمها الأصلي و استخدام Scale Down
166
اختيار الجزء الظاهر من الصورة باستخدام Object Position
167
تثبيت نسبة أبعاد الصور باستخدام Aspect Ratio
168
تطبيق معرض صور بكروت متساوية و قص مناسب
Gradients
169
عمل تدرج لوني باستخدام Linear Gradient
170
تحديد أماكن الألوان و عمل فواصل حادة
171
التدرج من نقطة للخارج باستخدام Radial Gradient
172
توزيع الألوان حول المركز باستخدام Conic Gradient
173
عمل أنماط متكررة باستخدام Repeating Gradients
174
تطبيق كارت بتدرجات متعددة و طبقة فوق صورة
Practice And Review
175
تطبيق صفحة شخصية متجاوبة
176
تطبيق صفحة منتجات باستخدام Grid و Flexbox
177
مراجعة تصميم و إصلاح مشاكل المقاسات و التجاوب