قیمت این دوره: 699,000 349,500 تومان
  • مدرس دوره : حسن خسروجردی
  • تعداد ویدیوها : 65 ویدیو
  • مدت زمان دوره : 13:10:00
  • سطح دوره : پیشرفته
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1402/07/24
ثبتـــ نام در این دوره ثبت نام در دوره
آموزش پروژه محور TailwindCSS

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

در این دوره با فریمورک قدرتمند tailwind  آشنا خواهیم شد . فریمورکی که با کنار زدن رقبای بزرگی مثل بوت استرپ روز به روز در دنیای طراحی مشهور تر و پر استفاده تر خواهد شد. در این دوره سعی کردیم نکات مهم این فریمورک را بصورت پروژه محور خدمت شما عزیزان آموزش بدهیم.

سرفصل های دوره:

مقدمه ای بر tailwind
اصول طراحی واکنشگرا در tailwind
variants
کار با رنگ ها و اندازه ها
مفهوم کامپوننت و استفاده از آن
utilities
شخصی سازی
استفاده از فلکس باکس
استفاده از grid
پروژه عملی


پیش نیاز های دوره :

  1. 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

41
  • Transitions & Animation

00:16:36

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

42
  • Preflight - modern-normalize

00:09:07

Preflight - modern-normalize

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

00:11:20

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

44
  • Filters

00:10:12

Filters Blur Brightness Contrast Hue Rotate Invert

45
  • Interactivity

00:10:33

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

46
  • Reusing Styles

00:08:16

Reusing Styles @apply @layout

47
  • Arbitrary values - استایل های دلخواه

00:11:29

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

48
  • Handling Hover, Focus, and Other States

00:10:40

Handling Hover, Focus, and Other States

49
  • Peer

00:06:11

Peer Tailwind

50
  • تمرینکده - بخش هفتم

00:12:43

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

51
  • Group

00:07:16

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

52
  • other states and selectors

00:12:26

other states and selectors

53
  • Transform

00:06:46

Translate Scale Skew Rotate Transform tailwind

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

00:03:15

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

55
  • ساختار پروژه

00:06:57

ساختار پروژه

56
  • چیدمان Header

00:18:38

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

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

00:11:35

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

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

00:14:17

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

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

00:13:44

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

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

00:13:10

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

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

00:12:22

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

62
  • طراحی بخش آخرین دوره ها - بخش دوم

00:12:34

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

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

00:07:01

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

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

00:13:15

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

65
  • ساخت بخش مقالات - اتمام دوره - فایل کامل پروژه

00:15:34

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

دوره های دیگر مدرس

مشاهده همه دوره ها

نظرات کاربران در رابطه با این دوره

لطفا سوالات خود را راجع به این آموزش در این بخش پرسش و پاسخ مطرح کنید به سوالات در قسمت نظرات پاسخ داده نخواهد شد و آن نظر حذف میشود.
جهت ثبت نظر باید در سایت عضو شوید و یا وارد سایت شده باشید .