Learn Tailwind CSS In Arabic
Description
هذا الكورس المكثف مخصص لتعلم Tailwind CSS من البداية إلى المستوى المتوسط، وهو إطار عمل CSS يعتمد على نهج المرافق (utility-first) الذي يسمح للمطورين ببناء واجهات ويب حديثة وجذابة بسرعة وسهولة. Tailwind CSS يختلف عن أطر العمل التقليدية من خلال تقديم مجموعة شاملة من الفئات الجاهزة التي يمكن استخدامها مباشرة في HTML، مما يقلل الحاجة لكتابة CSS مخصص ويوفر وقتًا كبيرًا في التطوير. سواء كنت مطورًا مبتدئًا أو لديك خبرة في CSS وتريد الانتقال إلى إطار أكثر كفاءة، فإن هذا الكورس سيساعدك على إتقان Tailwind CSS خطوة بخطوة.
يبدأ الكورس بمقدمة شاملة عن Tailwind CSS وأهميته في عالم تطوير الويب، حيث ستتعرف على المزايا الرئيسية مثل السرعة في التطوير، وسهولة الصيانة، والتكيف مع التصاميم المعقدة. ثم ننتقل إلى التثبيت العملي والإعداد البيئي اللازم لبدء استخدام Tailwind في مشاريعك، متبوعًا بإنشاء قوالب HTML أساسية لضمان فهم سير العمل. طوال الدروس، ستطبق المفاهيم عبر أمثلة عملية تغطي الجوانب الأساسية مثل الخطوط والألوان، والهوامش والحشو والحدود، مما يبني أساسًا متينًا للتصميم.
بعد إتقان الأساسيات، يتعمق الكورس في مواضيع أكثر تقدمًا مثل تخصيص الألوان والخطوط لتناسب احتياجاتك الخاصة، واستخدام Flexbox لإنشاء تخطيطات مرنة، وبناء مكونات شائعة مثل البطاقات والشارات. ستتعلم أيضًا كيفية استخدام directive apply لإنشاء مكونات مخصصة قابلة لإعادة الاستخدام، وتطبيق نظام Grid لتصميم تخطيطات معقدة، وتصميم أزرار تفاعلية مع إضافة أيقونات لتحسين تجربة المستخدم.
أخيرًا، يغطي الكورس تأثيرات التصميم الديناميكي مثل تأثيرات التمرير (hover effects) والانتقالات (transitions) لإضفاء الحيوية على الواجهات، وينتهي بموضوع الاستجابة للشاشات (responsive design) لضمان أن تصاميمك تعمل بشكل مثالي على جميع الأجهزة. بنهاية هذا الكورس، ستكون قادرًا على بناء مشاريع ويب كاملة باستخدام Tailwind CSS بثقة واحترافية.
أهم النقاط التي يتناولها هذا الكورس:
- مقدمة إلى Tailwind CSS وأسباب استخدامه في تطوير الويب.
- تثبيت وإعداد Tailwind CSS في البيئة المحلية.
- إنشاء واستخدام قوالب HTML مع Tailwind.
- تطبيق وإدارة الخطوط والألوان الأساسية والمخصصة.
- استخدام خصائص الهوامش والحشو والحدود في التصميم.
- تخصيص الألوان والخطوط لتناسب متطلبات المشروع.
- تطبيق Flexbox لإنشاء تخطيطات مرنة ومتجاوبة.
- تصميم وبناء مكونات مثل البطاقات والشارات.
- استخدام directive apply لإنشاء مكونات مخصصة.
- تطبيق نظام Grid للتخطيطات المتقدمة والمعقدة.
- تصميم أزرار تفاعلية وإضافة أيقونات.
- تطبيق تأثيرات التمرير والانتقالات لتحسين التفاعل.
- جعل التصاميم متجاوبة مع مختلف أحجام الشاشات.
يبدأ الكورس بمقدمة شاملة عن Tailwind CSS وأهميته في عالم تطوير الويب، حيث ستتعرف على المزايا الرئيسية مثل السرعة في التطوير، وسهولة الصيانة، والتكيف مع التصاميم المعقدة. ثم ننتقل إلى التثبيت العملي والإعداد البيئي اللازم لبدء استخدام Tailwind في مشاريعك، متبوعًا بإنشاء قوالب HTML أساسية لضمان فهم سير العمل. طوال الدروس، ستطبق المفاهيم عبر أمثلة عملية تغطي الجوانب الأساسية مثل الخطوط والألوان، والهوامش والحشو والحدود، مما يبني أساسًا متينًا للتصميم.
بعد إتقان الأساسيات، يتعمق الكورس في مواضيع أكثر تقدمًا مثل تخصيص الألوان والخطوط لتناسب احتياجاتك الخاصة، واستخدام Flexbox لإنشاء تخطيطات مرنة، وبناء مكونات شائعة مثل البطاقات والشارات. ستتعلم أيضًا كيفية استخدام directive apply لإنشاء مكونات مخصصة قابلة لإعادة الاستخدام، وتطبيق نظام Grid لتصميم تخطيطات معقدة، وتصميم أزرار تفاعلية مع إضافة أيقونات لتحسين تجربة المستخدم.
أخيرًا، يغطي الكورس تأثيرات التصميم الديناميكي مثل تأثيرات التمرير (hover effects) والانتقالات (transitions) لإضفاء الحيوية على الواجهات، وينتهي بموضوع الاستجابة للشاشات (responsive design) لضمان أن تصاميمك تعمل بشكل مثالي على جميع الأجهزة. بنهاية هذا الكورس، ستكون قادرًا على بناء مشاريع ويب كاملة باستخدام Tailwind CSS بثقة واحترافية.
أهم النقاط التي يتناولها هذا الكورس:
- مقدمة إلى Tailwind CSS وأسباب استخدامه في تطوير الويب.
- تثبيت وإعداد Tailwind CSS في البيئة المحلية.
- إنشاء واستخدام قوالب HTML مع Tailwind.
- تطبيق وإدارة الخطوط والألوان الأساسية والمخصصة.
- استخدام خصائص الهوامش والحشو والحدود في التصميم.
- تخصيص الألوان والخطوط لتناسب متطلبات المشروع.
- تطبيق Flexbox لإنشاء تخطيطات مرنة ومتجاوبة.
- تصميم وبناء مكونات مثل البطاقات والشارات.
- استخدام directive apply لإنشاء مكونات مخصصة.
- تطبيق نظام Grid للتخطيطات المتقدمة والمعقدة.
- تصميم أزرار تفاعلية وإضافة أيقونات.
- تطبيق تأثيرات التمرير والانتقالات لتحسين التفاعل.
- جعل التصاميم متجاوبة مع مختلف أحجام الشاشات.
0
16
01:09:34
2023-05-31
0
0
16/0 100/0
المقدمة والتثبيت
الأساسيات والتنسيق
التخطيط والمكونات
التأثيرات والاستجابة