دورة تعلم Tailwind CSS
أتقن Tailwind CSS من الأساس وابنِ واجهات جاهزة للإنتاج أسرع من أي وقت مضى. يغطي هذا المقرر كل شيء من أساسيات المنفعة فائقة الأولوية إلى الوضع الداكن المتقدم والإضافات المخصصة وتكامل الأطر البرمجية. ستكتب كودًا أنقى، وتصدر أنماطًا أصغر حجمًا، وتصمم بثقة.
ماذا ستتعلم:
ستبدأ بفلسفة Tailwind الأساسية وتثبيته، ثم ستنتقل إلى التباعد، والطباعة، وأنظمة الألوان، وFlexbox، وشبكة CSS. ستتعلم كيفية بناء تخطيطات متجاوبة بالكامل باستخدام نظام بادئة نقاط التوقف في Tailwind وكيفية تصميم الحالات التفاعلية مثل التمرير والتركيز والمعطل دون كتابة CSS مخصصة. تتضمن المواضيع المتقدمة الوضع الداكن، وتحسين الأداء، والإضافات المخصصة، وتوجيه @apply. ستدمج أيضًا Tailwind في مشاريع React وVue وSvelte وتستكشف أفضل ممارسات إمكانية الوصول. في النهاية، سيكون لديك مشاريع حقيقية جاهزة لعرضها على أصحاب العمل أو العملاء.
كيف تدرس بشكل عملي دورة تعلم Tailwind CSS
كيف تتدرب عملياً دورة تعلم Tailwind CSS
لك إذا كنت شركة وتريد تدريب فريقك
في Elevify للشركات، يأتي الدورة مع تمارين وأمثلة من عملك نفسه وبالطريقة التي تحتاجها شركتك.
محتوى الدورة
8 فصول • 40 دروسمدة بين 4 و 360 ساعة (أنت تقرر)
الفصل 1إخفاءإخفاء التفاصيلعرض التفاصيلمقدمة في Tailwind CSS
مقدمة في Tailwind CSS
الدرس 1 • تثبيت وإعداد Tailwind
يشرح التثبيت عبر CLI، والتكامل مع PostCSS، واستخدام CDN. سينتج المتدربون بيئة عمل محلية جاهزة لجميع التمارين اللاحقة.
الدرس 2 • الفلسفة الأساسية لـ Tailwind CSS
تستكشف قيود تصميم Tailwind وإعداداته الافتراضية الموجهة ونظام التصميم القائم على القيود. تربط الفلسفة بمكاسب الإنتاجية العملية التي سيختبرها المتدربون.
الدرس 3 • ما هي CSS القائمة على المرافق
تعرّف أسلوب المرافق وتقارنه بالأطر المبنية على المكونات. تحدد الأساس المفاهيمي لكل قرار يتعلق بـ Tailwind خلال المقرر.
الدرس 4 • ملف إعدادات Tailwind
يقدم هيكل tailwind.config.js ومسارات المحتوى ومفاتيح الثيم. يهيئ المتدربين لتخصيص Tailwind دون الإخلال بإعداداته الافتراضية.
الدرس 5 • خط أنابيب النشر
يشرح كيفية تكامل Tailwind مع Vite و webpack وأدوات التجميع المماثلة. سيفهم المتدربون كيف يحافظ التطهير على صغر حجم حزم الإنتاج.
الفصل 2إخفاءإخفاء التفاصيلعرض التفاصيلفئات المرافق الأساسية والتباعد
فئات المرافق الأساسية والتباعد
الدرس 1 • مرافق العرض والارتفاع والتحجيم
تستكشف فئات التحجيم الثابت والكسري والنسبي إلى منفذ العرض والمحتوى. يحدد المتدربون حجم الحاويات والصور بشكل صحيح عبر سياقات التخطيط المختلفة.
الدرس 2 • مرافق العرض والرؤية
تغطي فئات block و inline و flex و grid و hidden والرؤية. يتحكم المتدربون في عرض العناصر وتقنيات الإخفاء الآمنة لإمكانية الوصول.
الدرس 3 • مرافق الهوامش والحشوات
تعلم فئات الهوامش والحشوات الاتجاهية بما في ذلك المختصرات ومتغيرات المحاور. يطبق المتدربون التباعد على عناصر واجهة المستخدم الفعلية بدقة.
الدرس 4 • فهم مقياس التباعد
تغطي مقياس التباعد الافتراضي المعتمد على rem في Tailwind وكيفية ترجمة الرموز العددية إلى قيم بكسل. توفر النموذج العقلي اللازم لاتخاذ قرارات متسقة للهوامش والحشوات.
الدرس 5 • مرافق الفائض وصندوق النموذج
تتناول الفائض و box-sizing وسلوك border-box في Tailwind. يمنع المتدربون أخطاء التخطيط الشائعة الناتجة عن فائض المحتوى وتضارب التحجيم.
الفصل 3إخفاءإخفاء التفاصيلعرض التفاصيلنظام الطباعة والألوان
نظام الطباعة والألوان
الدرس 1 • أساسيات لوحة ألوان Tailwind
تقدم هيكل اللوحة الافتراضية وترقيم الدرجات والأدوار اللونية الدلالية. يختار المتدربون أزواج الألوان القابلة للوصول باستخدام مقياس Tailwind المدمج.
الدرس 2 • حجم الخط وارتفاع السطر
تربط مقياس حجم النص في Tailwind بالأدوار الطباعية وتشرح الإعدادات الافتراضية المقترنة لارتفاع السطر. يؤسس المتدربون تسلسلاً هرمياً بصرياً واضحاً في أي واجهة مستخدم.
الدرس 3 • تخصيص الألوان وتوسيعها
توضح إضافة ألوان العلامة التجارية ومتغيرات CSS والأسماء المستعارة الدلالية في الإعدادات. يحافظ المتدربون على نظام ألوان قابل للتوسع عبر المشاريع الكبيرة.
الدرس 4 • تباعد الأحرف ومحاذاة النص
تعلم مرافق التتبع ومحاذاة النص وتحويل النص للتحكم الطباعي الدقيق. يصقل المتدربون العناوين والنصوص الأساسية وفق معايير مهنية.
الدرس 5 • وزن الخط ونمطه وعائلته
تغطي رموز وزن الخط والمائل ومجموعات عائلات الخطوط المهيأة في Tailwind. يطبق المتدربون التأكيد الطباعي وخطوط العلامة التجارية بشكل صحيح.
الفصل 4إخفاءإخفاء التفاصيلعرض التفاصيلتخطيطات Flexbox باستخدام Tailwind
تخطيطات Flexbox باستخدام Tailwind
الدرس 1 • بناء مكونات Flex عملية
تطبق جميع مرافق flex لبناء شريط تنقل وكائن وسائط وتذييل. يعزز المتدربون معرفتهم بـ flex من خلال بناء مكونات عملية.
الدرس 2 • النمو المرن والانكماش والأساس
تشرح مرافق flex-grow و flex-shrink و flex-basis وتفاعلها. يبني المتدربون أعمدة سائلة يتغير حجمها بشكل متوقع تحت محتويات مختلفة.
الدرس 3 • مرافق الترتيب والمحاذاة الذاتية
تعلم فئات الترتيب وتجاوزات المحاذاة لكل عنصر للترتيبات المعقدة لـ flex. يعيد المتدربون ترتيب العناصر المرئية دون تغيير هيكل DOM.
الدرس 4 • المحاذاة والتوزيع
تغطي مرافق justify-content و align-items و align-self و align-content. يقوم المتدربون بتوسيط العناصر وتوزيعها وتمديدها بدقة في أي تخطيط flex.
الدرس 5 • أساسيات حاوية Flex
ينشط سياق flex ويتحكم في الاتجاه والتفاف والفجوة على الحاوية. يفهم المتدربون كيف تحكم خصائص الحاوية سلوك جميع العناصر الفرعية.
الفصل 5إخفاءإخفاء التفاصيلعرض التفاصيلتخطيطات شبكة CSS باستخدام Tailwind
تخطيطات شبكة CSS باستخدام Tailwind
الدرس 1 • المحاذاة داخل الشبكة
تطبق justify-items و align-items و justify-self و align-self ضمن سياق الشبكة. يضع المتدربون محتوى الخلايا بشكل مستقل عن تحجيم المسار.
الدرس 2 • إعداد حاوية الشبكة
ينشط سياق الشبكة ويحدد قوالب الأعمدة والصفوف باستخدام فئات Tailwind. يفهم المتدربون كيف تتحكم تعريفات القوالب في وضع جميع العناصر الفرعية.
الدرس 3 • بناء تخطيطات شبكة عملية
ينشئ هيكل لوحة بيانات ومعرض صور وتخطيط صفحة تحريرية باستخدام أدوات الشبكة. يطبق المتدربون معرفتهم بالشبكة على هياكل صفحات بجودة إنتاجية.
الدرس 4 • امتداد الأعمدة والصفوف
تغطي مرافق col-span و row-span و full-span لوضع العناصر عبر مسارات متعددة. ينشئ المتدربون تخطيطات غير متماثلة تكسر نمط الشبكة المنتظم.
الدرس 5 • التدفق التلقائي والمسارات الضمنية
تشرح grid-auto-flow و auto-cols و auto-rows للمحتوى المُنشأ ديناميكياً. يتعامل المتدربون مع عدد العناصر غير المعروف دون الإخلال بسلامة التخطيط.
الفصل 6إخفاءإخفاء التفاصيلعرض التفاصيلالتصميم المتجاوب ونقاط التوقف
التصميم المتجاوب ونقاط التوقف
الدرس 1 • تبديل التخطيط المتجاوب
يتبدل بين تخطيطات flex والشبكة عند نقاط توقف مختلفة للحصول على هيكل متكيف. يبني المتدربون مكونات تعيد هيكلة نفسها دون استخدام JavaScript.
الدرس 2 • بادئات نقاط التوقف في Tailwind
تغطي البادئات sm و md و lg و xl و 2xl وعتبات البكسل الافتراضية الخاصة بها. يطبق المتدربون بادئات نقاط التوقف على أي فئة أداة بثقة.
الدرس 3 • مبادئ التصميم القائم على الجوال أولاً
تؤسس التفكير القائم على الجوال أولاً وتشرح سبب كون نقاط توقف Tailwind هي min-width. يعيد المتدربون صياغة قرارات التصميم لتبدأ من أصغر منفذ عرض.
الدرس 4 • نقاط التوقف المخصصة وإعداد الشاشات
يضيف نقاط توقف خاصة بالمشروع ويتجاوز الإعدادات الافتراضية في مفتاح إعدادات الشاشات. يصمم المتدربون نظام Tailwind المتجاوب ليناسب أي مواصفات تصميم.
الدرس 5 • الطباعة والتباعد المتجاوبان
يضبط أحجام الخطوط وارتفاعات الأسطر والتباعد عبر نقاط التوقف لتحقيق أفضل قراءة. يضمن المتدربون تحجيم النص والمساحات البيضاء بشكل مناسب على كل جهاز.
الفصل 7إخفاءإخفاء التفاصيلعرض التفاصيلالحالات والمتغيرات والتفاعلية
الحالات والمتغيرات والتفاعلية
الدرس 1 • متغيرات المجموعة والنظير
تعلم أنماط group-hover و peer-checked للأنماط التي يتم تشغيلها بواسطة العنصر الأصلي والعنصر الشقيق. يبني المتدربون قوائم منسدلة ومربعات اختيار مخصصة دون استخدام JavaScript.
الدرس 2 • متغيرات حالة النموذج
يطبق المتغيرات required و invalid و valid و checked لتصميم حالات التحقق من صحة النموذج. يقدم المتدربون تغذية راجعة بصرية واضحة لإدخال المستخدم دون CSS مخصص.
الدرس 3 • مرافق الانتقال والرسوم المتحركة
يضيف انتقالات سلسة ورسومًا متحركة باستخدام فئات الأدوات المدمجة في Tailwind. يعزز المتدربون التفاعلية بحركة عالية الأداء صديقة لـ GPU.
الدرس 4 • الحالات النشطة والتي تمت زيارتها والمعطلة
تغطي المتغيرات active و visited و disabled و placeholder لتصميم كامل للنماذج والروابط. يتعامل المتدربون مع جميع الحالات التفاعلية في سير عمل بفئات أداة واحدة.
الدرس 5 • متغيرات التمرير والتركيز
يطبق بادئات التمرير والتركيز على مرافق اللون والظل والتحويل. يبني المتدربون أزرارًا وروابط تفاعلية تلبي معايير التغذية الراجعة البصرية.
الفصل 8إخفاءإخفاء التفاصيلعرض التفاصيلتقنيات Tailwind المتقدمة
تقنيات Tailwind المتقدمة
الدرس 1 • القيم العشوائية ومتغيرات CSS
يستخدم تدوين الأقواس للقيم لمرة واحدة ويدمج خصائص CSS المخصصة في الأدوات. يتحرر المتدربون من المقياس الافتراضي عندما تتطلب مواصفات التصميم الدقة.
الدرس 2 • تحسين الأداء وحجم الحزمة
يدقق حجم مخرجات CSS، ويضبط مسارات المحتوى بدقة، ويطبق أنماط القائمة البيضاء. يشحن المتدربون أصغر ورقة أنماط ممكنة دون التضحية باستخدام الفئة الديناميكية.
الدرس 3 • تطبيق الوضع الداكن
يهيئ الوضع الداكن القائم على الفئة والقائم على الوسائط ويطبق متغيرات داكنة عبر واجهة المستخدم. يقدم المتدربون سمات كاملة فاتحة وداكنة من ورقة أنماط واحدة.
الدرس 4 • كتابة إضافات Tailwind مخصصة
يبني إضافات أدوات ومكونات ومتغيرات مخصصة باستخدام API الإضافات في Tailwind. يوسع المتدربون قدرات Tailwind لتتناسب مع المتطلبات الفريدة لأي مشروع.
الدرس 5 • استخراج المكونات باستخدام @apply
توضح @apply لإنشاء فئات CSS قابلة لإعادة الاستخدام من مجموعات الأدوات. يوازن المتدربون بين نقاء أسلوب المرافق واحتياجات تجريد المكونات العملية.
شهادتك الصالحة للتخرج
هذا الدورة مخصصة لك:
مطوّر الواجهة الأمامية: يريد بديلاً أسرع وأكثر اتساقاً عن كتابة CSS مخصصة.
مصمّم ويب مستقل: يحتاج إلى تسليم مواقع عملاء مُتقنة ضمن مواعيد نهائية ضيقة.
مطوّر شامل: يتعامل مع أعمال واجهة المستخدم لكنّه يواجه صعوبة في الحفاظ على تنظيم أوراق الأنماط وقابليتها للتوسّع.
محوّل مهني: يبني محفظة أعمال لدخول مجال تطوير الويب من مجال آخر.
طالب علوم حاسوب: مستعد لتجاوز المهام الدراسية وبناء واجهات من العالم الحقيقي.
مطوّر واجهة خلفية: ينتقل إلى مسؤوليات الواجهة الأمامية ويحتاج إلى نظام تنسيق عملي.
ماذا يقول طلابنا
آراء من درسوا معنا:
دروسكم مثالية. اشتريت الباقة السنوية، وأخيراً أصبح لدي الفرصة لمتابعة مواضيع متنوعة تهمني دون الحاجة لتغيير المنصة... أشكركم على كل ما تقومون به، لقد أوصيت بكم لأشخاص آخرين...
أحب كيف أن الدروس مباشرة ومركزة وكيف يمكنني تغيير الفصول وتخطي المحتوى الذي لا أحتاجه.
أحب المحتوى وطريقة العرض ونسخ الفيديوهات، مما يسرّع العملية!
المنصة سريعة وبسيطة الاستخدام. تنوع المحتوى والفيديوهات التكميلية تساعد كثيراً في التعلم.
أهم الدورات
الأسئلة الشائعة
من هي Elevify؟ كيف تعمل؟
هل الدورات تتضمن شهادات؟
هل الدورات مجانية؟
ما هو عبء الدورة؟
كيف تبدو الدورات؟
كيف تعمل الدورات؟
ما هي مدة الدورات؟
ما هو سعر أو تكلفة الدورات؟
ما هو التعليم عن بعد أو الدورة عبر الإنترنت وكيف تعمل؟
دورة PDF