جاري التحميل...

ملخص CSS والخطوات التالية

في الدرس السابق غطّت إمكانية الوصول بـ CSS حلقات التركيز والتباين وتقليل الحركة وعادات الأسلوب القريبة من المستخدم. هذا الدرس لا يضيف عرضًا جديدًا. إنه يلخّص مسار CSS حتى الآن: ماذا تستطيع تنسيقه، وأي عادات تبقيها، وماذا تتمرّن عليه لاحقًا — بما في ذلك المشروع المصغّر القادم.

لماذا الملخص مهم الآن

مررت بالتتابع وصندوق العناصر وFlex وGrid والتصميم المتجاوب والحركة والأدوات الحديثة وإمكانية الوصول. بلا خريطة يسهل حفظ الخصائص منفصلة ونسيان الترتيب: أولًا المحددات والتتابع، ثم الأسطح والصناديق، ثم أنظمة التخطيط، ثم التجاوب ولمسات الحركة، ثم الأدوات الحديثة والإشارات المتاحة. ملخص قصير يحوّل درسًا طويلًا إلى عدة أدوات تُستخدم في صفحات حقيقية.

إجابة مباشرة

1) تستطيع تنسيق صفحات ثابتة متعددة الأقسام باستراتيجية تتابع واضحة، وتحكم قوي بصندوق العناصر، وتخطيطات Flex وGrid، ونقاط توقف متجاوبة، وحركة متزنة — دون إطار CSS.
2) أبقِ عادات التتابع أولًا: محددات معقولة، وخصوصية متوقعة، وأنماط تصمد على الشاشات الصغيرة وتركيز لوحة المفاتيح.
3) تمرّن على صفحة هبوط صغيرة منسّقة (جلسة المشروع المصغّر) قبل مكتبات المكوّنات.
4) اعتبر الأُطر والمعالجات الثقيلة أدوات لاحقة — CSS اليدوي ما زال يعلّمك ما تخفيه.
5) هذا الملخص بلا اختبار — استخدم خريطة المهارات والتأمل بدلًا منه.

📊 Skill groups in this CSS course

Group	Examples	Keep in mind
Getting started	syntax, how-to link CSS, comments, units	Every stylesheet needs a clear entry point
Selectors & cascade	combinators, pseudo-classes, specificity	Specificity fights cost more than they buy
Surfaces & color	colors, backgrounds, gradients, opacity	Contrast is part of the palette
Box model	margin, padding, border, sizing, overflow	Content + padding + border decide real size
Text & type	fonts, web fonts, text effects	Readable type beats decorative noise
Layout building blocks	display, position, z-index, float legacy	Position is a scalpel, not a default
Components	links, lists, tables, forms, buttons, nav	Reusable patterns beat one-off hacks
Flex & Grid	containers, items, areas, responsive tracks	One-dimensional vs two-dimensional layout
Responsive	media queries, images, breakpoints	Design for change, not one viewport
Motion & polish	shadow, transitions, transforms, animations, filters	Motion should help, not distract
Modern toolkit	variables, calc, nesting, container queries, @supports	Progressive enhancement, not novelty for its own sake
Accessible styles	focus-visible, contrast, reduced motion	People feel these choices every day

ماذا تستطيع فعله الآن

تنسيق موقع ثابت متعدد الأقسام بـ CSS طبقي: التتابع والمحددات تحت السيطرة، والأسطح والصناديق متوقعة، والنص مقروء، وFlex وGrid لتخطيط حقيقي، واستعلامات وسائط لنقاط التوقف، وحركة خفيفة حين تساعد، ومتغيرات واستعلامات ميزات حين تستحق مكانها، وعادات التركيز/التباين التي تبقي الصفحة قابلة للاستخدام. لا تحتاج إطارًا لهذه العدة.

قراءة خريطة المهارات

البداية والمحددات تقرران أين تلتصق الأنماط ومن يفوز
الأسطح ونموذج الصندوق يقرران اللون والمسافة والحجم
النص والمكوّنات تجعل الصفحة مقروءة وقابلة للنقر
Flex وGrid ترتّبان الأقسام؛ التجاوب يكيّفها
الحركة والأدوات الحديثة تلميع دون استبدال الأسس
الأنماط المتاحة تبقي التركيز والتباين والحركة لطيفة للمستخدمين الحقيقيين

عادات تستحق الإبقاء

فضّل أسماء أصناف واضحة وخصوصية منخفضة على حساء !important
صمّم مسافات مناسبة للجوال مبكرًا؛ وسّع عند نقاط التوقف بدل تقليص تخطيط سطح المكتب فقط
اختر Flex للصفوف/الأعمدة أحادية البعد وGrid حين يهمّ المحوران
قيّد الحركة غير الضرورية بـ prefers-reduced-motion
أبقِ تركيز لوحة المفاتيح مرئيًا — لا تحذف outline بلا بديل أقوى
استخدم خصائص مخصصة للرموز المشتركة بدل نسخ القيم
اقرأ CSS الآخرين وبسّط المحددات قبل إضافة طبقات جديدة

الخطوات التالية

ابنِ صفحة هبوط صغيرة منسّقة يدويًا — جلسة المشروع المصغّر تسير في ذلك المسار.
راجع أي وحدة ضعيفة (غالبًا مناطق Grid أو استعلامات الحاوية أو أنماط التركيز) بصفحة تمرين صغيرة.
اقرأ أوراق أنماط حقيقية واذكر بجملة ماذا يفعل كل قاعدة.
أضف إطارًا فقط بعد أن تستطيع شحن تخطيط ثابت نظيف بدونه.
أبقِ دلالات HTML قوية؛ CSS لا يصلح معالم أو تسميات أو alt ناقصة.

تأمل — افحص عدتك

سمِّ ست مجموعات مهارات من الجدول دون النظر.
افتح ورقة أنماط قديمة واذكر محددًا واحدًا وقاعدة صندوق واحدة وقاعدة تخطيط واحدة تبسطها.
ارسم صفحة هبوط (بطل / ميزات / اتصال) على ورق وعلّم Flex أو Grid لكل قسم.
اكتب جملة: التتابع والتخطيط أولًا؛ الحركة والجدة ثانيًا؛ الأُطر أخيرًا.
اختر كتلة التمرين التالية: المشروع المصغّر أولًا، أو مراجعة قصيرة لموضوع ضعيف — كلاهما جيد إن بقيت تنسّق يدويًا.
انظر للأمام: المشروع المصغّر يحوّل هذه الخريطة إلى صفحة هبوط حقيقية صغيرة.

أخطاء سهلة بعد دورة طويلة

القفز إلى إطار CSS قبل تنسيق يدوي لصفحة متعددة الأقسام نظيفة
حل كل تعارض بـ !important بدل إصلاح المحددات والترتيب
معاملة Flex وGrid كبدائل دائمًا دون اختيار النظام المناسب
شحن حركات كبيرة للجميع بلا مسار تقليل الحركة
إزالة حدود التركيز «للتصميم» وترك مستخدمي لوحة المفاتيح تائهين
حفظ قوائم الخصائص بدل تمرين صفحات حقيقية صغيرة
تخطي المشروع المصغّر وافتراض أن الدرس وحده يكفي للطلاقة
نسيان الدرس السابق: CSS المتاح هو التركيز والتباين والحركة — وليس بديلًا لـ HTML الدلالي

ملخص

أعطتك هذه الدورة عدة CSS من المبتدئ إلى أوائل المتوسط للمواقع الثابتة
استخدم خريطة مجموعات المهارات عند التخطيط أو مراجعة ورقة أنماط
أبقِ عادات التتابع أولًا والتخطيط الواعي والإتاحة في كل صفحة جديدة
المشروع المصغّر هو خطوة التمرين الطبيعية بعد هذا الختام
الأُطر تأتي لاحقًا — CSS اليدوي يعلّم ما تختزله
إمكانية الوصول كانت آخر درس مهارة عميق؛ هذه الجلسة خريطة الدورة والخطوات التالية

اللغة