0Pricing
CSS Academy icon

CSS Academy

CSSWebFrontendBeginner

حسّن تصاميمك على الويب باستخدام CSS من خلال دروس شاملة في CSS Academy.

🤖 مدعوم بالذكاء الاصطناعي📚 40 دورة👥 100,000+ متعلم⭐ تقييم 4.9
نظرة عامة على الدورة

CSS: لغة تصميم الويب

يتحكم CSS في كل التفاصيل البصرية لصفحة الويب — الألوان والتخطيط والمسافات والرسوم المتحركة والاستجابة. لقد تطورت من طبقة عرض بسيطة إلى لغة نظام تصميم كاملة، مع ميزات حديثة مثل استعلامات الحاويات و @layer والخصائص المنطقية و Houdini API التي تمنح المطورين تحكماً دقيقاً في العرض. يغطي هذا المسار النطاق الكامل لـ CSS، من كتابة أول محدد لديك إلى تصميم أنظمة تصميم قابلة للتوسع تُستخدم عبر قواعد بيانات الإنتاج الكبيرة.

ما ستتعلمه

ستبدأ بالصيغة والمحددات والألوان وعلم الطباعة، ثم ستبني فهماً قوياً لنموذج الصندوق وخصائص العرض والتموضع. من هناك ستعمل من خلال Flexbox و CSS Grid للتخطيطات القياسية والمتقدمة، وتطبق التصميم المتجاوب واستعلامات الوسائط، واستخدم متغيرات CSS والدوال المخصصة والرموز التصميمية للمواضيع القابلة للصيانة. ستغطي أيضاً الانتقالات والرسوم المتحركة الرئيسية والتحويلات والمرشحات وأنماط الدمج والوضع الليلي — بالإضافة إلى الأدوات الحديثة مع Sass و PostCSS و CSS-in-JS. ينتهي المسار بعمارة CSS باستخدام BEM والخصوصية والـ cascade واستعلامات الحاويات و @layer cascade layers و CSS Houdini والأداء.

مسار التعلم

أربعون دورة تمتد من A1 إلى C1. تؤسس الدورات المبكرة A1 و A2 الأساسيات — المحددات ونموذج الصندوق والفئات الزائفة والعناصر الزائفة والوحدات. تغطي دورات B1 الـ Flexbox و Grid والتصميم المتجاوب والرسوم المتحركة وتصحيح الأخطاء باستخدام DevTools ودوال CSS. تصعد دورات B2 إلى Flexbox و Grid المتقدمة و Sass و PostCSS و CSS-in-JS والرموز التصميمية و CSS Shapes والخصائص المنطقية واستعلامات الحاويات و CSS Layers. تتناول الدورات الثلاث C1 — CSS Houdini و CSS Performance و CSS Future — الحافة القطعية للمنصة.

كيف يعمل

تُقسم كل دورة إلى دروس قصيرة ومركزة تكملها مباشرة في محرر مدمج مع تعليقات فورية. يتوفر معلم ذكاء اصطناعي عندما تعلق، والتقدم متعمد بشكل تدريجي بحيث يعزز كل مفهوم السابق قبل إدخال المفهوم التالي.

ابدأ التعلم →

كيف ستتعلم

🎯
دروس تفاعلية
تمارين برمجة عملية مع ردود فعل فورية
🤖
معلم الذكاء الاصطناعي
احصل على مساعدة فورية من معلمنا الذكي عندما تعلق
💻
محرر مدمج
اكتب وشغّل الأكواد مباشرة في متصفحك
🏆
الشهادة
احصل على شهادة عند إكمالك للدورة
المنهج الدراسي

40 دورة

كل الدورات في مسار تعلم CSS Academy.

01

بنية CSS والمحدِّدات

A13 دروس

تعلّم البنية الأساسية لـ CSS وكيفية استهداف عناصر HTML باستخدام المحددات المعتمدة على الوسوم والفئات والمعرّفات والسمات والمحدّدات المركبة.

02

الألوان والخلفيات

A14 دروسPRO

أتقن تنسيقات الألوان وخصائص الخلفيات في CSS لإنشاء صفحات ويب غنية بصريًا.

03

الطباعة والنصوص

A14 دروسPRO

نسّق المحتوى النصي باستخدام الخطوط والأحجام والأوزان والمحاذاة وتقنيات تحميل الخطوط المخصصة.

04

نموذج الصندوق

A24 دروسPRO

افهم أن كل عنصر HTML عبارة عن صندوق، وتحكّم في حجمه ومسافاته وحدوده وظلاله.

05

خصائص العرض

A24 دروسPRO

تحكّم في كيفية تدفق العناصر داخل المستند باستخدام أوضاع العرض block وinline وinline-block.

06

أساسيات التموضع

A24 دروسPRO

أخرج العناصر من التدفق العادي باستخدام قيم CSS الخاصة بالموضع، وتحكّم في التراص باستخدام z-index.

07

وحدات CSS وقيمها

A24 دروسPRO

أتقن وحدات CSS المطلقة والنسبية لإنشاء تخطيطات قابلة للتوسع ومتجاوبة.

08

الفئات الزائفة

A24 دروسPRO

استهدف العناصر بناءً على حالتها وموضعها وعلاقتها بالعناصر الأخرى باستخدام الفئات الزائفة.

09

العناصر الزائفة

A24 دروسPRO

أدرج محتوى تزيينيًا ونسّق أجزاءً محددة من العناصر باستخدام عناصر CSS الزائفة.

10

أساسيات Flexbox

B14 دروسPRO

أنشئ تخطيطات أحادية البعد باستخدام CSS Flexbox، مع التحكّم في الاتجاه والمحاذاة والالتفاف.

11

أساسيات CSS Grid

B14 دروسPRO

أنشئ تخطيطات قوية ثنائية الأبعاد باستخدام CSS Grid عبر المسارات والفجوات ومناطق القوالب.

12

التصميم المتجاوب

B14 دروسPRO

أنشئ تخطيطات تتكيف بسلاسة مع أي حجم شاشة باستخدام العروض المرنة وتقنيات التصميم المتجاوب.

13

الاستعلامات الإعلامية

B14 دروسPRO

طبّق أنماطًا مختلفة بناءً على حجم الشاشة واتجاهها وتفضيلات المستخدم باستخدام الاستعلامات الإعلامية.

14

متغيرات CSS

B14 دروسPRO

أنشئ أوراق أنماط سهلة الصيانة باستخدام خصائص مخصصة يمكن إعادة استخدامها وتحديثها ديناميكيًا.

15

الانتقالات في CSS

B14 دروسPRO

أضف تغييرات سلسة ومتحركة للحالات في خصائص CSS باستخدام الصيغة المختصرة للانتقال ودوال التوقيت.

16

تحريكات CSS والإطارات المفتاحية

B14 دروسPRO

أنشئ تحريكات معقدة متعددة الخطوات باستخدام @keyframes وخاصية animation المختصرة.

17

تحويلات CSS

B14 دروسPRO

حرّك العناصر ودوّرها وكبّرها ومِلْ بها في فضاء ثنائي وثلاثي الأبعاد باستخدام دوال transform في CSS.

18

الأولوية والتسلسل المتتابع

B14 دروسPRO

افهم بعمق كيف تحدد CSS الأنماط التي تسود عندما تستهدف قواعد متعددة العنصر نفسه.

19

دوال CSS

B14 دروسPRO

استخدم دوال CSS القوية للحسابات الديناميكية، وتحديد الأحجام المرن، وتخطيطات الشبكة، ومعالجة الألوان الحديثة.

20

المرشحات وأنماط المزج

B14 دروسPRO

طبّق تأثيرات بصرية على العناصر والصور باستخدام مرشحات CSS وتركيب أنماط المزج.

21

التمرير والتجاوز

B14 دروسPRO

تحكّم في سلوك التمرير ونقاط الالتقاط واقتصاص التجاوز لتوفير تجارب مستخدم سلسة.

22

الوضع الداكن وأنظمة الألوان

B14 دروسPRO

طبّق الوضع الداكن التلقائي واليدوي باستخدام متغيرات CSS وcolor-scheme والاستعلامات الإعلامية.

23

تصحيح CSS وأدوات المطور

B14 دروسPRO

أتقن أدوات المطور في المتصفح لفحص تخطيط CSS وتحريكاتها وأنماطها المحسوبة وتصحيحها وفهمها.

24

Flexbox المتقدم

B24 دروسPRO

تجاوز الأساسيات عبر المحاذاة المتقدمة في flexbox، والترتيب، وأنماط التخطيط الواقعية.

25

Grid المتقدم

B24 دروسPRO

استفد من كامل قوة CSS Grid باستخدام الخطوط المسمّاة، والتموضع التلقائي، وsubgrid، والأنماط المعقدة.

26

بنية CSS وBEM

B24 دروسPRO

نظّم قواعد CSS البرمجية الكبيرة باستخدام الأنماط المعمارية، واصطلاحات التسمية، وهياكل الملفات.

27

أشكال CSS وclip-path

B24 دروسPRO

أنشئ عناصر غير مستطيلة وأشكالًا يلتف النص حولها باستخدام clip-path وCSS Shapes.

28

الخصائص المنطقية في CSS

B24 دروسPRO

اكتب CSS مستقلًا عن اتجاه الكتابة ويعمل مع اللغات من اليسار إلى اليمين ومن اليمين إلى اليسار باستخدام الخصائص المنطقية.

29

استعلامات الحاويات

B24 دروسPRO

طبّق الأنماط بناءً على حجم حاوية المكوّن بدلًا من إطار العرض باستخدام استعلامات الحاويات.

30

طبقات CSS ‏(@layer)

B24 دروسPRO

أدر أولوية تسلسل CSS صراحةً باستخدام @layer للقضاء على تعارضات الأولوية في قواعد CSS البرمجية الكبيرة.

31

مترجم Sass التمهيدي

B24 دروسPRO

عزّز كتابة CSS بالمتغيرات والتداخل والمزائج والدوال باستخدام المترجم التمهيدي Sass.

32

PostCSS وأدوات CSS

B24 دروسPRO

حوّل CSS وحسّنها باستخدام إضافات PostCSS لإضافة البادئات تلقائيًا، والتصغير، والتحويلات المخصصة.

33

أنماط CSS-in-JS

B24 دروسPRO

استكشف تنسيقًا محصورًا بالمكوّنات باستخدام styled-components وEmotion وCSS Modules وVanilla Extract.

34

رموز التصميم وإضفاء السمات

B24 دروسPRO

ابنِ أنظمة تصميم قابلة للتوسع باستخدام رموز التصميم وإضفاء السمات للعلامات المتعددة عبر خصائص CSS المخصصة.

35

اختبار CSS

B24 دروسPRO

تحقق من صحة CSS واتساقها البصري عبر اختبارات الانحدار واختبارات الوحدات وتدقيقات إمكانية الوصول.

36

أنماط مكوّنات CSS

B24 دروسPRO

أنشئ مكوّنات واجهة مستخدم جاهزة للإنتاج، مثل البطاقات والنوافذ المنبثقة والقوائم المنسدلة وعلامات التبويب، باستخدام تقنيات CSS الخالصة.

37

أنماط التخطيط الحديثة

B24 دروسPRO

طبّق أنماط تخطيط متقدمة وواقعية باستخدام تقنيات CSS Grid وFlexbox الحديثة.

38

CSS Houdini

C14 دروسPRO

وسّع CSS نفسها باستخدام JavaScript عبر واجهات Houdini للخصائص المخصصة والرسم والتخطيط.

39

أداء CSS

C14 دروسPRO

حسّن تسليم CSS وأداء العرض بفهم مسار عرض المتصفح.

40

مستقبل CSS

C14 دروسPRO

استكشف أحدث ما وصلت إليه CSS مع التداخل الأصلي، و:has()، والأنماط المحصورة، وانتقالات View Transitions.

الأسئلة الشائعة

الأسئلة الشائعة

هل دورة CSS Academy مجانية؟

نعم. يمكنك البدء في دورة CSS Academy مجانًا وإكمال دروسها التفاعلية بلا تكلفة. اشتراك PRO اختياري يفتح لك أدوات ذكاء اصطناعي متقدمة وشهادة قابلة للمشاركة.

هل أحتاج إلى خبرة سابقة لتعلم CSS؟

لا. تبدأ الدورة بالأساسيات وتنتقل تدريجيًا إلى مواضيع أكثر تقدمًا، لذا يمكنك البدء حتى بدون خبرة سابقة في CSS.

كيف ستتعلم CSS على CoddyKit؟

تتعلم من خلال العمل. دروس تفاعلية قصيرة تجمع بين شرح واضح وتمرين برمجة عملي يعمل في الوقت الفعلي، ومعلم ذكاء اصطناعي يعمل 24/7 يقدم مساعدة مخصصة عندما تعلق.

هل أحصل على شهادة عند إكمال CSS Academy؟

نعم. متعلمو PRO يمكنهم الخضوع لامتحان والحصول على شهادة إكمال قابلة للمشاركة برمز تحقق لدورة CSS Academy.

هل يمكنني تعلم CSS على هاتفي؟

نعم. CoddyKit متاح على الويب وكتطبيقات iOS و Android أصلية، لذا يمكنك تعلم CSS على أي جهاز وسيتم مزامنة تقدمك عبرها جميعًا.

ابدأ CSS Academy الآن

انضم إلى آلاف المتعلمين الذين يتقنون البرمجة مع دروس مدعومة بالذكاء الاصطناعي.

ابدأ مجاناً →استعرض جميع الدورات