0Pricing
Tailwind CSS Academy icon
HTMLCssFrontendDesignالمستويات A1 → B215 لغات

Tailwind CSS Academy

أتقن إطار عمل CSS الموجه بالمرافق والموثوق به من قبل OpenAI و Vercel و Shopify. تعلم كل مرفق، والتصميم المتجاوب، والوضع الليلي، والحركات، وتحسين الإنتاج. مسار تعلّم من CoddyKit يضم 30 دورات قصيرة و120 دروس تفاعلية، مع معلم ذكاء اصطناعي إلى جانبك على مدار الساعة طوال أيام الأسبوع.

الدورات
30
الدروس
120
خطوات تفاعلية
1,559
البدء مجانًا
الدورة 1
المنهج الدراسي

30 دورات في هذا المسار

كل دورة في مسار Tailwind CSS Academy، مرتبة حسب تسلسل التعلم. الدورة الأولى مجانية.

1

A14 دروسمجانًا

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

  1. 1شرح CSS القائم على الأدوات
  2. 2تثبيت Tailwind وإعداده
  3. 3أولى صفحاتك باستخدام Tailwind
  4. + 1 المزيد
ابدأ التعلم مجانًا
2

A14 دروسPRO

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

  1. 1حجم الخط وسمكه
  2. 2لون النص وشفافيته
  3. 3ارتفاع السطر وتباعد الأحرف
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
3

A14 دروسPRO

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

  1. 1لوحة ألوان Tailwind
  2. 2تدرجات الخلفية
  3. 3معدّلات الشفافية والألوان
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
4

A14 دروسPRO

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

  1. 1مقياس المسافات في Tailwind
  2. 2أدوات الحشو الداخلي
  3. 3أدوات الهوامش والهوامش التلقائية
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
5

A14 دروسPRO

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

  1. 1تفعيل Flex وتحديد الاتجاه
  2. 2توزيع المحتوى ومحاذاة العناصر
  3. 3تمدد Flex وانكماشه وأساسه
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
6

A24 دروسPRO

استفد من CSS Grid عبر أدوات grid في Tailwind لبناء تخطيطات ثنائية الأبعاد معقدة. حدّد الأعمدة والصفوف والمناطق باستخدام أسماء فئات بسيطة، وتحكم في مواضع العناصر بدقة.

  1. 1تحديد أعمدة Grid
  2. 2امتداد الأعمدة والصفوف
  3. 3صفوف Grid والتوزيع التلقائي
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
7

A24 دروسPRO

تحكم في أبعاد العناصر باستخدام أدوات العرض والارتفاع والقيود الدنيا والعليا ونسبة الأبعاد في Tailwind. ابنِ مكوّنات متجاوبة وثابتة الحجم بثقة.

  1. 1أدوات العرض
  2. 2أدوات الارتفاع
  3. 3قيود الحد الأدنى والأقصى
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
8

A24 دروسPRO

نسّق حواف العناصر وعمقها باستخدام أدوات الحدود والظلال في Tailwind. تعلّم إضافة زوايا مستديرة، والتحكم في عرض الحدود ولونها، وتطبيق ظلال الصناديق لإضفاء العمق.

  1. 1عرض الحدود ولونها
  2. 2نصف قطر الحدود والزوايا المستديرة
  3. 3ظلال الصناديق
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
9

A24 دروسPRO

أضف التفاعلية إلى واجهتك بتطبيق الأنماط بشكل شرطي عند التحويم والتركيز والنشاط والتعطيل وغيرها من الحالات الزائفة. تعلّم نظام بادئات التنوّعات في Tailwind للتحكم في كل حالة تفاعلية.

  1. 1تنوّعات Hover وActive
  2. 2تنوّعات Focus وFocus-Visible
  3. 3تنوّعات Disabled وPlaceholder
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
10

A24 دروسPRO

ابنِ تخطيطات تتكيف مع أي حجم شاشة باستخدام نقاط التوقف المتجاوبة في Tailwind، التي تتبع نهج الأجهزة المحمولة أولًا. طبّق فئات أدوات مختلفة عند عروض محددة لإطار العرض لإنشاء تصميمات متجاوبة فعلًا.

  1. 1نظام نقاط التوقف في Tailwind
  2. 2التخطيطات المتجاوبة باستخدام Flex وGrid
  3. 3الطباعة والمسافات المتجاوبة
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
11

B14 دروسPRO

نفّذ الوضع الداكن في تطبيقات الويب باستخدام تنويعة dark المدمجة في Tailwind. تعلّم الفرق بين استراتيجية الفئات واستراتيجية الوسائط، وابنِ مكوّنات تبدو رائعة في السمات الفاتحة والداكنة.

  1. 1استراتيجيات الوضع الداكن
  2. 2تطبيق تنوّعات الوضع الداكن
  3. 3إنشاء مفتاح تبديل الوضع الداكن
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
12

B14 دروسPRO

أطلق كامل قوة Tailwind عبر إتقان ملف tailwind.config.js. تعلّم توسيع السمة الافتراضية، وإضافة قيم مخصصة، وضبط مسارات المحتوى، وإدارة الإضافات.

  1. 1بنية tailwind.config.js
  2. 2مسارات المحتوى وإزالة الفئات غير المستخدمة
  3. 3تمديد المظهر في مقابل استبداله
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
13

B14 دروسPRO

خصّص Tailwind لعلامتك التجارية عبر إضافة ألوان مخصصة ودمج Google Fonts وتعريف مقياس تباعد مخصص. ابنِ لغة تصميم خاصة بالمشروع مع الاستفادة من جميع أدوات Tailwind.

  1. 1إضافة ألوان مخصّصة
  2. 2عائلات الخطوط المخصّصة
  3. 3قيم المسافات المخصّصة
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
14

B14 دروسPRO

تعلّم متى وكيف تستخدم توجيه @apply في Tailwind لاستخراج أنماط الأدوات المتكررة في فئات CSS قابلة لإعادة الاستخدام. وازن بين نهج الأدوات أولًا والحاجة إلى تجريدات مكوّنات سهلة الصيانة.

  1. 1ما الذي يفعله @apply ومتى يُستخدم
  2. 2إنشاء فئات مكوّنات قابلة لإعادة الاستخدام
  3. 3تنظيم CSS المخصّص باستخدام الطبقات
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
15

B14 دروسPRO

أضف حركة سلسة إلى واجهتك باستخدام أدوات الانتقال والرسوم المتحركة المدمجة في Tailwind. تعلّم التحكم في المدة والتسهيل والتأخير، وتطبيق رسوم متحركة بإطارات رئيسية لتجارب مستخدم جذابة.

  1. 1أدوات الانتقال
  2. 2المدة ووظيفة التوقيت
  3. 3حركات الإطارات المفتاحية المضمّنة
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
16

B14 دروسPRO

ابنِ عناصر أساسية مصقولة وقابلة لإعادة الاستخدام لواجهة المستخدم باستخدام فئات أدوات Tailwind. تعلّم الأنماط القياسية للأزرار ذات التنوّعات، والبطاقات ذات الرؤوس والتذييلات، والشارات المعلوماتية الصغ…

  1. 1تنويعات الأزرار وحالاتها
  2. 2أنماط مكوّنات البطاقات
  3. 3مكوّنات الشارات والوسوم
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
17

B14 دروسPRO

ابنِ أشرطة تنقل متجاوبة وأشرطة جانبية قابلة للطي باستخدام أدوات Tailwind. تعلّم التعامل مع قوائم الهامبرغر على الأجهزة المحمولة وإنشاء تنقل ثابت يظل ظاهرًا أثناء تمرير المستخدمين.

  1. 1إنشاء شريط تنقل متجاوب
  2. 2التنقل الثابت والملتصق
  3. 3تخطيط الشريط الجانبي العمودي
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
18

B14 دروسPRO

نسّق عناصر نماذج سهلة الوصول وجذابة باستخدام أدوات Tailwind. تعلّم إنشاء حقول النص وقوائم الاختيار ومربعات الاختيار وأزرار الاختيار وتخطيطات النماذج الكاملة مع حالات التحقق.

  1. 1تنسيق حقول النص ومناطق النص
  2. 2قوائم Select ومربعات الاختيار
  3. 3أنماط تخطيط النماذج
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
19

B14 دروسPRO

ابنِ أنماط واجهة مستخدم عائمة مثل النوافذ المنبثقة ومربعات الحوار والقوائم المنسدلة باستخدام Tailwind وJavaScript محدود. تعلّم التموضع وترتيب z-index وانتقالات الفتح والإغلاق السلسة.

  1. 1بنية مربع الحوار المنبثق
  2. 2حركة فتح النافذة المنبثقة وإغلاقها
  3. 3مكوّن القائمة المنسدلة
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
20

B14 دروسPRO

افهم محرّك Just-In-Time في Tailwind وكيفية إنشائه CSS الذي تستخدمه فقط. تعلّم تحسين حزمة الإنتاج، وتحليل حجم المخرجات، وكتابة فئات يستطيع محرّك JIT اكتشافها.

  1. 1كيفية عمل محرّك JIT
  2. 2إدراج الفئات الديناميكية في القائمة الآمنة
  3. 3تحليل حجم الحزمة وتقليله
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
21

B24 دروسPRO

أنشئ نظامًا متينًا لرموز التصميم ضمن إعداد Tailwind لتمكين إضفاء سمات متسقة على علامات تجارية متعددة. اربط الرموز الأولية بالرموز الدلالية، وابنِ لغة تصميم قابلة للتوسع للمشاريع الكبيرة.

  1. 1الرموز البدائية مقابل الرموز الدلالية
  2. 2إنشاء السمات بالاعتماد على متغيرات CSS
  3. 3استراتيجية السمات متعددة العلامات التجارية
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
22

B24 دروسPRO

ادمج Tailwind CSS في تطبيقات React وNext.js باستخدام الإعداد الرسمي. تعلّم أفضل الممارسات لتطبيق الأدوات في JSX، وإدارة الفئات الشرطية، وتنظيم الأنماط في بنى قائمة على المكوّنات.

  1. 1إعداد Tailwind في Next.js
  2. 2الفئات الشرطية في React
  3. 3تنويعات المكوّنات باستخدام CVA
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
23

B24 دروسPRO

اجمع بين Tailwind CSS وHeadless UI لبناء مكوّنات سهلة الوصول بالكامل وغير منسّقة مسبقًا. طبّق فئات Tailwind الخاصة بك على القوائم ومربعات الحوار ومربعات الاختيار المشترك والانتقالات، مع الحفاظ على إم…

  1. 1مقدمة إلى Headless UI
  2. 2تنسيق القوائم المنسدلة في Headless UI
  3. 3إنشاء مربعات حوار سهلة الوصول
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
24

B24 دروسPRO

وسّع وظائف Tailwind بكتابة إضافات مخصصة تضيف أدوات ومكوّنات وتنوّعات جديدة. تعلّم واجهة الإضافات البرمجية لتغليف منطق الأنماط القابل لإعادة الاستخدام ومشاركته بين المشاريع.

  1. 1واجهة Tailwind الإضافية
  2. 2إضافة أدوات مساعدة مخصصة عبر إضافة
  3. 3إضافة تنويعات مخصصة عبر إضافة
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
25

B24 دروسPRO

ابنِ مكوّنات واجهة مستخدم تستوفي معايير إمكانية الوصول WCAG باستخدام أدوات Tailwind لتباين الألوان وإدارة التركيز ودعم قارئات الشاشة. اكتب بنية HTML وأنماط Tailwind تعمل للجميع.

  1. 1تباين الألوان والنص المقروء
  2. 2مؤشرات التركيز والتنقل بلوحة المفاتيح
  3. 3سمات ARIA وقارئات الشاشة
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
26

B24 دروسPRO

اعتمد أفضل الممارسات الاحترافية لشحن Tailwind CSS في تطبيقات الإنتاج. تعلّم تدقيق الحزمة واستراتيجيات تنظيم الفئات والتحقق الثابت وتقنيات تحسين الأداء التي تستخدمها الفرق الكبيرة.

  1. 1تدقيق مخرجات CSS
  2. 2ترتيب الفئات وإضافة Prettier
  3. 3فحص Tailwind باستخدام ESLint
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
27

B24 دروسPRO

طبّق كل ما تعلّمته حتى الآن لبناء صفحة هبوط تسويقية متكاملة ومتجاوبة من الصفر باستخدام Tailwind CSS فقط. غطِّ أقسام الواجهة الرئيسية والميزات والشهادات والأسعار والتذييل.

  1. 1قسم الواجهة الرئيسية والتنقل
  2. 2قسما الميزات وإثبات الثقة الاجتماعي
  3. 3قسم جدول الأسعار
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
28

B24 دروسPRO

أنشئ واجهة لوحة تحكم إدارية متكاملة الميزات باستخدام Tailwind CSS. ابنِ شريطًا جانبيًا وشريطًا علويًا وبطاقات إحصاءات وجداول بيانات وعناصر نائبة للمخططات ضمن تخطيط متماسك ومتجاوب.

  1. 1هيكل لوحة المعلومات والشريط الجانبي
  2. 2الشريط العلوي ومسارات التنقل
  3. 3بطاقات الإحصاءات وعناصر KPI
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
29

B24 دروسPRO

استكشف كيفية اندماج Tailwind في استراتيجيات بنية CSS الأوسع المستخدمة في المشاريع الكبيرة. تعلّم تنظيم الملفات وبنية طبقات المكوّنات والتعايش مع CSS القديم أو أدوات التنسيق الأخرى.

  1. 1تنظيم الملفات والمجلدات
  2. 2التعايش مع CSS القديم
  3. 3وحدات CSS وTailwind
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
30

B24 دروسPRO

اجمع كل المهارات من هذا المسار لبناء نظام تصميم متكامل قائم على Tailwind. حدّد الرموز، وابنِ مكتبة مكوّنات، واكتب إضافة، ووثّق النظام لاستخدام الفريق.

  1. 1تخطيط نظام التصميم
  2. 2إنشاء طبقة الرموز والإعدادات
  3. 3إنشاء مكتبة المكوّنات
  4. + 1 المزيد
ابدأ التعلم مجانًاافتح باستخدام PRO
CoddyKit PRO

افتح جميع 30 دورة في هذا المسار، وكل مسار آخر

معلم الذكاء الاصطناعي، وامتحان الشهادة، والشهادة. يعمل على الويب وiOS وAndroid.

عرض جميع الخطط
سنوي$29.90 / سنويًاحوالي $2.49 شهريًاادفع مرة واحدةمدى الحياة$69.99 مرة واحدةلا توجد تجديدات. PRO إلى الأبد.
نظرة عامة على الدورة

إتقان Tailwind CSS

أتقن إطار عمل CSS الموجه بالمرافق والموثوق به من قبل OpenAI و Vercel و Shopify. تعلم كل مرفق، والتصميم المتجاوب، والوضع الليلي، والحركات، وتحسين الإنتاج. تغطي هذه المسارات 30 دورة صغيرة تدريجية من المستوى المطلق للمبتدئين (A1) إلى المستوى المتقدم (B2)، مع دروس قصيرة ومركزة واختبارات سريعة لتثبيت كل مفهوم.

ما ستتعلمه

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

كيف يعمل

تنقسم كل دورة إلى أربعة دروس مركزة. أكمل بضعة دروس يوميًا وستتقن المسار الكامل في أسابيع، وليس أشهرًا.

الأدوات

تدرّب باستخدام الذكاء الاصطناعي، لا تكتفِ بالقراءة

عزّز تعلمك باستخدام أدوات وميزات مدعومة بالذكاء الاصطناعي

محادثة الذكاء الاصطناعيتحدث مع معلم الذكاء الاصطناعياطرح سؤالًا متقدمًااحصل على إجابات على مستوى الخبراءPROإنشاء درسمنشئ دروس مدعوم بالذكاء الاصطناعيPROابدأ امتحان الشهادةاحصل على شهادتكPROابدأ التحدياختبر مهاراتك

كيف ستتعلم

  1. 01

    دروس تفاعلية

    تمارين برمجة عملية مع ردود فعل فورية

  2. 02

    معلم الذكاء الاصطناعي

    احصل على مساعدة فورية من معلمنا الذكي عندما تعلق

  3. 03

    محرر مدمج

    اكتب وشغّل الأكواد مباشرة في متصفحك

  4. 04

    الشهادة

    احصل على شهادة عند إكمالك للدورة

واصل الاستكشاف

مسارات تعلم ذات صلة

Frontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.Web Accessibility AcademyBuild inclusive websites everyone can use. Master semantic HTML, ARIA, keyboard and scree…Angular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Vue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.Sveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.HTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.
الأسئلة الشائعة

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

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

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

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

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

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

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

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

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

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

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

كم تبلغ تكلفة CoddyKit PRO؟

الدورة الأولى من Tailwind CSS Academy مجانية. يفتح CoddyKit PRO جميع الدورات: $5.90 أسبوعيًا، $7.90 شهريًا، $29.90 سنويًا، أو $69.99 مرة واحدة للوصول مدى الحياة دون تجديدات.

كم يستغرق إكمال Tailwind CSS Academy؟

يضم Tailwind CSS Academy 30 دورات و120 دروس. تستغرق معظم الدروس نحو 5–10 دقائق، لذا يستغرق المسار بالكامل حوالي 14 ساعة من التدريب العملي، وفق وتيرتك الخاصة.

ابدأ Tailwind CSS Academy الآن

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

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