تخطِّ المحتوى واذهب مباشرة

سينتاكس Academy

الرئيسية
الكورسات
تسجيل الدخول

51 – تصميم تخطيطات احترافية باستخدام `grid-template-areas` و `grid-area`

تعلم css كاملة في 2025 0%

قسم 1 – الأساسيات (1 – 27)

27 ▼

1 - مقدمة عن كورس ال css | ماهي ال css وما الفائده من استخدامها

2- ازاي اكتب الكود واماكن كتابه كود ال css | كورس CSS

3 - ماهو ال id وال class وما الفرق بينهما مع مثال عملي | كورس css

4 - ترتيب الأولويات في CSS: فهم تأثير class, id, العناصر المستهدفة، والنمط العالمي على تصميم موقعك

5 - شرح تفصيلي لألوان الخلفية في CSS | كيفية استخدام background-color لتصميم احترافي | كورس css

6 - إتقان ألوان الخلفية في CSS: فهم وتطبيق HSL، RGBA، والألوان الست عشرية | كورس CSS

7 - فهم وتطبيق خاصية width في CSS: التحكم في عرض العناصر بفعالية | كورس CSS

8 - إتقان خاصية height في CSS: كيفية التحكم في ارتفاع العناصر بمرونة | كورس CSS

9 - هم مستويات display في CSS: التحكم في طريقة عرض العناصر بذكاء 🧠| block, inline inline-block, none

10 - إتقان خاصية margin في CSS: التحكم في المسافات الخارجية للعناصر | كورس CSS

11 - فهم خاصية padding في CSS: كيفية التحكم في المسافات الداخلية للعناصر | كورس CSS

12 - فهم وتطبيق خاصية border في CSS: كيفية التحكم في حدود العناصر | كورس CSS

13- إتقان خاصية box sizing في CSS كيفية التحكم في حجم العناصر بدقة | كورس CSS 2

14 - فهم خاصية outline في CSS التحكم في الإطار الخارجي للعناصر | كورس CSS

15 - إتقان خاصية border-radius في CSS: كيفية إنشاء الزوايا المنحنية للعناصر | كورس CSS

16 - إضافة العمق والجاذبية بتطبيق box shadow في CSS دليل شامل | كورس CSS

17 - كيفية تعليق الأكواد مؤقتًا في CSS باستخدام التعليقات | كورس CSS

18 - تأثيرات النصوص في CSS: التحكم في المحاذاة، التزيين، والتحويل | الجزء الأول - كورس CSS

19 - تأثيرات النصوص في CSS: التباعد والظلال | الجزء الثاني | كورس CSS

20 - تأثيرات النصوص في CSS: التحكم في المسافات البيضاء Wrap و No-wrap | ومراجعة شاملة - كورس CSS

21 - التحكم في الخطوط في CSS: استدعاء الخطوط الخارجية وفهم فكرة الخطوط | كورس CSS

22 - أستخدام أيقونات باستخدام CSS وأنشاء تصميم بسيط وتطبيق عملي علي ال CSS | أنشاء تصميم بسيط css

23 - إتقان الخلفيات في CSS: إضافة الصور والتحكم في التكرار | كورس css

24 - التحكم في حجم وموقع الخلفية وثباتها في وbackground-attachment CSS | background-position

25 - الكتابة المختصرة للخصائص: background shorthand في CSS shorthand

26 - الشفافية باستخدام خاصية Opacity في CSS

27 - التحكم في الحجم الأقصى للعناصر: max-width و max-height في CSS

قسم 2 – المستوى المتوسط (28 → 32)

5 ▼

28- شرح خاصية Overflow في CSS – التحكم في المحتوى الزائد ببساطة!

29- ما هي CSS Combinators؟ شرح العلاقات بين العناصر في CSS

30- هتتحكم في أي عنصر بـ سطر واحد! 💡 CSS Attribute Selectors

31- CSS Pseudo Classes – تحكّم ذكي بالعناصر بلمسة واحدة!

32 - CSS Pseudo-Elements – قوة before و after لتزيين المحتوى!

قسم 3 – الموضع (Positioning)

6 ▼

33 - CSS Position Static vs Relative – الأساس والحركة داخل التدفق

34 - CSS Position Absolute – التموضع الحر داخل الحاوية

35 - CSS Position Fixed – العناصر الثابتة أثناء التمرير

36 - شرح CSS Position Sticky عمليًا: كيف تجعل العناصر تلتصق أثناء التمرير؟

37 - كل ما يخص z-index في CSS فهم طبقات العناصر ومنع التداخل غير المرغوب

38 - CSS Float ببساطة كيفية تحويم العناصر وترتيب النص حولها

قسم 4 – فلكس بوكس و جريد (Flexbox & Grid)

15 ▼

39 - مقدمة Flexbox: فهم اتجاه العناصر باستخدام flex-direction

40 – توزيع العناصر وتحديد المسافات باستخدام justify-content و gap في Flexbox

41 – flex wrap و flex flow لف العناصر وتحديد اتجاهها في Flexbox

42 – الفرق بين align-items و align-content في Flexbox (مع أمثلة توضّح الفرق بوضوح)

43 التحكم في توسّع العناصر داخل Flex – شرح flex grow بالتفصيل

44 - flex-shrink – متى وكيف تنكمش العناصر داخل الحاوية؟

45 – flex-basis وكتابة flex المختصرة ضبط الأساس والحجم في سطر واحد

46 – order إعادة ترتيب عناصر Flexbox بدون لمس الـ HTML

47 – align-self تخصيص محاذاة عنصر واحد داخل Flexbox

48 – CSS Grid التحكم في الأعمدة والصفوف باستخدام grid-template-columns, grid-template-rows وrepeat()

49 – التحكم في تموضع العناصر داخل Grid باستخدام grid-row, grid-column وgrid-area

50 – توزيع المساحات في CSS Grid باستخدام `fr`, `minmax()`، و`grid-gap

51 – تصميم تخطيطات احترافية باستخدام `grid-template-areas` و `grid-area`

🧲 52 - الانتقالات البسيطة باستخدام transition في CSS

🧠 53 - المتغيرات (CSS Variables) في CSS – ازاي تستخدمها وتنظم كودك

قسم 5 – التصميم المتجاوب (Responsive Design)

2 ▼

54 Media Queries

55 - وحدات القياس النسبية في CSS ‎(%‎ | vw | vh) – ازاي تتحكّم في أبعاد العناصر على أي شاشة

قسم 6 – المشاريع العملية

1 ▼

تصميم كامل ب HTML - CSS فقط | تصميم بطاقة منتج جذابة خطوة بخطوة (كارت أنيق + زر شراء تفاعلي)

الانتقال للدرس التالي...

تقييم الكورس

★ ★ ★ ★ ★

الإبلاغ عن مشكلة

×

الاسم *

البريد الإلكتروني *

وصف المشكلة *

سيتم إرسال رابط هذه الصفحة تلقائياً مع البلاغ

© 2025 سينتاكس أكاديمي.

تواصل معنا
من نحن
سياسة الخصوصية
شروط الاستخدام