آموزش پروژه محور TailwindCSS

معرفی دوره Tailwind CSS

tailwind چیست؟ ابزار موردنیاز دوره

مزیت های tailwind

Atomic CSS چیست؟

نصب و راه اندازی tailwindcss به کمک npm

نصب و راه اندازی - روش های جانبی + باید ها و نباید ها استفاده از cdn - توضیح در رابطه با minify کردن کد ها

کار با رنگ ها

کار با متن ها

کار با متن ها - بخش دوم Font Style Font Smoothing Font Weight Letter Spacing Line Height

کار با متن ها - بخش سوم List Style Type Text Decoration Color Text Decoration Style Text Decoration Thickness Text Underline Offset text-color text-decoration text-align

کار با متن ها - بخش چهارم text-transform text-overflow text-indent text-content

اندازه ها width height

اندازه ها - بخش دوم

Borders width color style

Outline-Divide-Ring

Box Shadow Box Shadow Color

opacity - blend

Spacing -Margin & Padding

Spacing

Display

Float - Clear

Position left top right bottom در tailwind

box-sizing , overflow , visibility

Object Fit , Overscroll Behavior , Z-Index

flexbox- بخش اول flex-container in tailwind

Flex Items order align self flex grow flex shrink

تمرینکده - بخش اول پیاده سازی Alert Box

تمرینکده - بخش دوم

تمرینکده - بخش سوم

تمرینکده - بخش سوم - بخش دوم

Dark Mode

تمرینکده - بخش چهارم

طراحی واکنشگرا - Responsive Design break points نقاط شکست در tailwind

تمرینکده - بخش پنجم طراحی layout بصورت واکنشگرا responsive layout tailwind

Grid در tailwind

Grid Column Start / End

تمرینکده - بخش ششم ساخت card card in tailwind

Grid Template Rows Grid Row Start / End

Grid Auto Flow Grid Auto Columns Grid Auto Rows Place Content Place Items Place Self

Background Attachment Background Clip Background Color Background Origin Background Position Background Repeat Background Size Background Image Gradient Color Stops

Transitions & Animation Transition Property Transition Duration Transition Timing Function Transition Delay Animation

Preflight - modern-normalize

Typography - Font Family - استفاده از فونت خارجی

Filters Blur Brightness Contrast Hue Rotate Invert

Interactivity Accent Color Appearance Cursor Caret Color Pointer Events Resize Scroll Behavior Scroll Margin Scroll Padding Scroll Snap Align Scroll Snap Stop Scroll Snap Type User Select

Reusing Styles @apply @layout

Using arbitrary values Arbitrary values - استایل های دلخواه

Handling Hover, Focus, and Other States

Peer Tailwind

تمرینکده - بخش هفتم floating lable tailwind لیبل شناور در تیلویند

Styling based on parent state (group-{modifier})

other states and selectors

Translate Scale Skew Rotate Transform tailwind

معرفی پروژه عملی دوره

ساختار پروژه

چیدمان Header فونت فارسی در تیلویند استفاده از آیکون در تیلویند

تکمیل بخش اولیه header

اتمام طراحی header سایز موبایل

تکمیل بخش header - شروع بخش منو

پیاده سازی اسلایدر - Tailwind CSS Carousel

طراحی بخش آخرین دوره ها - بخش اول

طراحی بخش آخرین دوره ها - بخش دوم طراحی باکس دوره ها

واکنشگرایی بخش دوره ها

دوره های پیشنهادی - Owl Carousel

ساخت بخش مقالات - اتمام دوره