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

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

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

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

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


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

  1. HTML/CSS

فهرستـــ ویدیوها

مدت زمان دوره 13:10:00
Current Time 0:00
Duration -:-
Loaded: 0%
Stream Type LIVE
Remaining Time -:-
 
1x

  • با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.

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

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

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

مشاهده همه دوره ها
اینستاگرام
تلگرام

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

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