در این دوره با فریمورک قدرتمند tailwind آشنا خواهیم شد . فریمورکی که با کنار زدن رقبای بزرگی مثل بوت استرپ روز به روز در دنیای طراحی مشهور تر و پر استفاده تر خواهد شد. در این دوره سعی کردیم نکات مهم این فریمورک را بصورت پروژه محور خدمت شما عزیزان آموزش بدهیم.
سرفصل های دوره:
مقدمه ای بر tailwind
اصول طراحی واکنشگرا در tailwind
variants
کار با رنگ ها و اندازه ها
مفهوم کامپوننت و استفاده از آن
utilities
شخصی سازی
استفاده از فلکس باکس
استفاده از grid
پروژه عملی
پیش نیاز های دوره :
HTML/CSS
فهرستـــ ویدیوها
مدت زمان دوره 13:10:00
با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
1
معرفی دوره Tailwind CSS
00:06:23
معرفی دوره Tailwind CSS
2
tailwind چیست؟ ابزار موردنیاز دوره
00:03:52
tailwind چیست؟ ابزار موردنیاز دوره
3
مزیت های tailwind
00:13:55
مزیت های tailwind
4
Atomic CSS چیست؟
00:13:48
Atomic CSS چیست؟
5
نصب و راه اندازی
00:12:49
نصب و راه اندازی tailwindcss به کمک npm
6
نصب و راه اندازی - روش های جانبی + باید ها و نباید ها
00:17:21
نصب و راه اندازی - روش های جانبی + باید ها و نباید ها استفاده از cdn - توضیح در رابطه با minify کردن کد ها
7
کار با رنگ ها
00:15:30
کار با رنگ ها
8
کار با متن ها
00:13:13
کار با متن ها
9
کار با متن ها - بخش دوم
00:14:28
کار با متن ها - بخش دوم Font Style Font Smoothing Font Weight Letter Spacing Line Height
10
کار با متن ها - بخش سوم
00:13:12
کار با متن ها - بخش سوم List Style Type Text Decoration Color Text Decoration Style Text Decoration Thickness Text Underline Offset text-color text-decoration text-align
11
کار با متن ها - بخش چهارم
00:13:29
کار با متن ها - بخش چهارم text-transform text-overflow text-indent text-content
12
اندازه ها
00:13:22
اندازه ها width height
13
اندازه ها - بخش دوم
00:10:05
اندازه ها - بخش دوم
14
Borders
00:11:14
Borders width color style
15
Outline-Divide-Ring
00:12:34
Outline-Divide-Ring
16
Box Shadow
00:08:54
Box Shadow Box Shadow Color
17
opacity - blend
00:09:47
opacity - blend
18
Spacing -Margin & Padding
00:10:16
Spacing -Margin & Padding
19
Spacing
00:08:30
Spacing
20
Display
00:11:30
Display
21
Float - Clear
00:08:20
Float - Clear
22
Position
00:12:08
Position left top right bottom در tailwind
23
box-sizing , overflow , visibility
00:13:33
box-sizing , overflow , visibility
24
Object Fit , Overscroll Behavior , Z-Index
00:13:52
Object Fit , Overscroll Behavior , Z-Index
25
flexbox- بخش اول
00:17:05
flexbox- بخش اول flex-container in tailwind
26
Flex Items
00:21:35
Flex Items order align self flex grow flex shrink
27
تمرینکده - بخش اول
00:15:50
تمرینکده - بخش اول پیاده سازی Alert Box
28
تمرینکده - بخش دوم
00:11:26
تمرینکده - بخش دوم
29
تمرینکده - بخش سوم
00:13:15
تمرینکده - بخش سوم
30
تمرینکده - بخش سوم - بخش دوم
00:12:02
تمرینکده - بخش سوم - بخش دوم
31
Dark Mode
00:14:36
Dark Mode
32
تمرینکده - بخش چهارم
00:17:24
تمرینکده - بخش چهارم
33
طراحی واکنشگرا - Responsive Design
00:10:59
طراحی واکنشگرا - Responsive Design break points نقاط شکست در tailwind
34
تمرینکده - بخش پنجم
00:10:17
تمرینکده - بخش پنجم طراحی layout بصورت واکنشگرا responsive layout tailwind
35
Grid در Tailwind
00:11:39
Grid در tailwind
36
Grid Column Start / End
00:14:12
Grid Column Start / End
37
تمرینکده - بخش ششم
00:13:01
تمرینکده - بخش ششم ساخت card card in tailwind
38
Grid Template Rows
00:10:03
Grid Template Rows Grid Row Start / End
39
Grid Auto Flow
00:18:06
Grid Auto Flow Grid Auto Columns Grid Auto Rows Place Content Place Items Place Self
40
background
00:20:36
Background Attachment Background Clip Background Color Background Origin Background Position Background Repeat Background Size Background Image Gradient Color Stops
مخصوص اعضای ویژه 
.jpg)
نظرات کاربران در رابطه با این دوره