YoVDO

دورة تعلم tailwindcss

Offered By: YouTube

Tags

Tailwind Courses Web Design Courses Responsive Design Courses CSS Preprocessors Courses Code Optimization Courses Dark Mode Courses

Course Description

Overview

تعلم إطار العمل Tailwindcss من خلال دورة عربية شاملة مدتها 6 ساعات. قم بتحويل مواقع وتصميمات من أطر عمل CSS أخرى إلى Tailwindcss. ابدأ بمقدمة لإطار العمل وتعلم كيفية تضمينه وتخصيصه في مشروعك. استكشف استخدام Tailwindcss مع المعالجات المسبقة مثل Sass وLess، وقارن حجم ملفاته مع أطر العمل الأخرى. طور مهاراتك في التصميم المتجاوب من خلال إنشاء عناصر مختلفة مثل شريط التنقل والهيدر وأقسام عرض المشاريع والسيرة الذاتية والاتصال. تعلم تحسين الكود باستخدام @apply وكيفية إضافة ميزات مثل الوضع الداكن. اختتم الدورة بتعلم كيفية تقليص حجم ملف CSS النهائي باستخدام PurgeCSS.

Syllabus

التطبيق الأول : مقدمة لإطار العمل Tailwindcss.
التطبيق الأول : تضمين الـ Tailwindcss في التطبيق | Installation.
التطبيق الأول : شرح تخصيص tailwindcss من خلال ملف الإعدادات.
التطبيق الأول : اضافة Tailwindcss للـ postcss.
التطبيق الأول : إستخدام Tailwindcss مع الـ preprocessors مثل sass , less.
التطبيق الأول : مقارنة حجم ملف tailwindcss مع اطر العمل الأخرى و دعم المتصفحات له.
التطبيق الأول : تخصيص الـ font family في تطبيقنا.
التطبيق الأول : التصميم المتجاوب و كيف نبدأ في العمل على التصميم.
التطبيق الأول : تصميم الـ navbar - الجزء الأول.
التطبيق الأول : تصميم الـ navbar - الجزء الثاني.
التطبيق الأول : تصميم الـ navbar - الجزء الثالث.
التطبيق الأول : تصميم الـ navbar - الجزء الأخير.
التطبيق الأول : تصميم الهيدر - الجزء الأول.
التطبيق الأول : تصميم الهيدر - الجزء الثاني.
التطبيق الأول : تصميم الهيدر - الجزء الثالث.
التطبيق الأول : تحسين الكود - إستخدام @apply.
التطبيق الأول : تصميم قسم عرض المشاريع - الجزء الأول.
التطبيق الأول : تصميم قسم عرض المشاريع - الجزء الثاني.
التطبيق الأول : تصميم قسم Resume - الجزء الأول.
التطبيق الأول : تصميم قسم Resume - (التعديلات الجديدة و الشكل النهائي).
التطبيق الأول : تصميم قسم Resume - (تحسين الكود).
التطبيق الأول : تصميم قسم Resume - (جعل التصميم متجاوب).
التطبيق الأول : تصميم قسم Contact - (الجزء الأول).
التطبيق الأول : تصميم قسم Contact - (الجزء الثاني).
التطبيق الأول : تصميم قسم Contact - (جعل التصميم متجاوب).
التطبيق الأول : اضافة Headroom.js & Typed.js.
التطبيق الأول : خاصية الدارك مود - Dark Mode.
[ نهاية الدورة ] التطبيق الأول : تقليص حجم ملف الـ css النهائي - PurgeCss.


Taught by

Algorithm Academy

Related Courses

Front-End Web UI Frameworks and Tools: Bootstrap 4
The Hong Kong University of Science and Technology via Coursera Build Restaurant Business Website using Google Sites
Coursera Project Network via Coursera Build Training Website using Google Sites
Coursera Project Network via Coursera Building High Quality User Experience Using Material UI
NIIT StackRoute via Coursera Learn Bootstrap
Codecademy