متغيرات CSS والحركة والوضع الليلي: مشروع صفحة كاملة

متغيرات CSS

بدل تكرار اللون نفسه في 20 مكانًا، عرّفه مرة واحدة:

:root {
  --brand: #2563eb;
  --text: #0f172a;
  --radius: 14px;
}
.btn { background: var(--brand); border-radius: var(--radius); }

غيّر --brand مرة واحدة فيتغير الموقع كله.

الانتقالات (Transitions)

الوضع الليلي التلقائي

المشروع: تجميل صفحة البورتفوليو

نأخذ صفحة مشروع HTML ونضيف لها CSS:

إلى أين بعد ذلك؟

• دورة JavaScript لجعل النموذج والأزرار تعمل فعلًا.
• تدرّب بإعادة تصميم صفحات تعجبك من مواقع حقيقية.
• عُد إلى صفحة الدورة وأجب عن الاختبار لتحصل على الشارة.

الخلاصة

• متغيرات CSS تجعل الألوان والمسافات في مكان واحد.
• transition للحركة الناعمة، وprefers-color-scheme للوضع الليلي.
• جمعت في المشروع: المتغيرات، Flexbox، Grid، والتجاوب.