قیمت این دوره: 500,000 تومان
  • مدرس دوره : طه قاسمی زرگر
  • تعداد ویدیوها : 45 ویدیو
  • مدت زمان دوره : 13:17:00
  • سطح دوره : پیشرفته
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1403/05/15
ثبتـــ نام در این دوره ثبت نام در دوره
آموزش Tailwind css با 3 پروژه عملی اینستاگرام، گوگل و توییتر

آموزش Tailwind css با 3 پروژه عملی اینستاگرام، گوگل و توییتر

در این دوره آموزش کامل آخرین ورژن فریم ورک Tailwind css صورت می‌پذیرد و 3 پروژه عملی شامل طراحی سایت اینستاگرام، گوگل و توییتر نیز برای تثبیت موارد آموخته شده در نظر گرفته شده است. دانشجو پس از اتمام این دوره قادر به طراحی هر گونه طرح مد نظر خود با فریم ورک محبوب   Tailwind خواهد بود.

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

ستاپ دوره (موارد مورد نیاز برای شروع دوره و نحوه نصب و استفاده از Tailwind)

آموزش موارد پایه ای و مهم Tailwind

آموزش تنظیمات Tailwind  اعم از Extend options

پروژه اول: طراحی Landing page

پروژه دوم: طراحی Google

پروژه سوم: طراحی Instagram

پروژه چهارم: طراحی Twitter

 



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

  1. آشنایی مقدماتی با HTML و Css

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

مدت زمان دوره 13:17:00

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

1

  • مقایسه Bootstrap با Tailwind

00:09:14

در این قسمت قصد داریم تا به بررسی و مقایسه بین دو فریم ورک مطرح Bootstrap و Tailwind بپردازیم و دلایل برتری Tailwind بر Bootstrap و دلیل محبوبیت بالای Tailwind را بهتر درک کنیم.

2

  • نیازمندی های دوره و ابزار های مورد نیاز

00:01:53

در این قسمت به بررسی ابزار مورد نیاز برای شروع این دوره خواهیم پرداخت.

3

  • آموزش نصب Tailwind با استفاده از روش CLI

00:13:08

در این قسمت با آموزش نصب Tailwind از طریق روش CLI آشنا خواهید شد.

4

  • آموزش نصب Tailwind با استفاده از روش Post css

00:09:48

در این قسمت نحوه نصب Tailwind رو با کمک روش Post css یاد میگیریم.

5

  • Vendor prefix در Tailwind

00:09:02

در این قسمت مبحث جذاب Vendor Prefix بیان خواهد شد.

6

  • تایپو گرافی در Tailwind

00:25:07

در این قسمت به طور کاربردی به مبحث مهم Typography در این فریم ورک میپردازیم.

7

  • رنگ ها (Colors) در Tailwind

00:10:45

تمامی رنگ های موجود در Tailwind در این قسمت آموزش داده خواهند شد.

8

  • Object properties در Tailwind

00:21:20

در این قسمت به بررسی کامل ویژگی های مهم شی ها در Tailwind خواهیم پرداخت.

9

  • شروع مبحث لایه ها (Layouts)

00:16:11

در این قسمت شروع به آموزش مبحث لایه بندی صفحات HTML خودمون و نحوه بخش بندی بر اساس طرح های مختلف می‌کنیم و درباره کلاس پر کاربرد container در Tailwind نیز صحبت خواهیم کرد.

10

  • آموزش مبحث طراحی واکنش گرا (Responsive)

00:07:03

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

11

  • FlexBox در Tailwind

00:12:18

در این قسمت درباره نحوه پیاده سازی FlexBox در Tailwind صحبت خواهیم کرد.

12

  • Grid در Tailwind

00:09:04

در این قسمت به بررسی Grid template system خواهیم پرداخت.

13

  • دارک مود (ِDark mode)

00:20:58

در این قسمت به مبحث جذاب دارک مود و نحوه استفاده از آن در Tailwind خواهیم پرداخت.

14

  • آموزش Extend options

00:07:47

در این قسمت به آموزش ویژگی و امکان پرکاربرد و جذاب Extend options خواهیم پرداخت.

15

  • آموزش Override options

00:09:28

ویژگی جذاب override options در این قسمت بررسی می‌شود.

16

  • آموزش Extract component

00:07:06

ویژگی محبوب Extract component در این قسمت بررسی خواهد شد.

17

  • معرفی پروژه اول | Landing page

    • نمایش آنلاین این بخش رایگان است
00:02:16

پروژه اول ما تحت عنوان طراحی یک لندینگ پیج از این جا شروع خواهد شد.

18

  • طراحی سربرگ (Header) پروژه

00:26:45

طراحی و کدنویسی هدر پروژه اول ما در این قسمت انجام خواهد شد.

19

  • طراحی بخش های Statics و Intro

00:27:15

طراحی بخش های Statics و Intro در این قسمت انجام می‌شود.

20

  • طراحی بخش Solution پروژه اول

00:16:17

طراحی بخش Solution پروژه لندینگ.

21

  • طراحی بخش Strategies پروژه لندینگ پیج

00:32:12

در این قسمت بخش Strategies از طرح ما کد نویسی خواهد شد.

22

  • کد نویسی بخش Workflow و Pre-footer پروژه لندینگ پیج

00:27:37

در این قسمت کد نویسی بخش Workflow و Pre-footer پروژه لندینگ پیج انجام میشود.

23

  • کدنویسی فوتر (Footer) پروژه لندینگ پیج | اتمام پروژه اول

00:19:56

پروژه اول ما در این قسمت تمام شد. اولین تجربه خودمون از کدنویسی با Tailwind رو با هم سپری کردیم ...

24

  • شروع پروژه گوگل (Google) | کدنویسی هدر

    • نمایش آنلاین این بخش رایگان است
00:11:55

در این قسمت کدنویسی هدر رو شروع خواهیم کرد.

25

  • کدنویسی بخش Main پروژه گوگل (Google)

00:23:59

کدنویسی بخش Main رو در این قسمت انجام میدیم.

26

  • کدنویسی فوتر (Footer) پروژه گوگل (Google)

00:15:12

کدنویسی فوتر (Footer) پروژه گوگل (Google) در این قسمت انجام خواهد شد.

27

  • ریسپانسیو (Responsive) پروژه گوگل (Google) | اتمام پروژه دوم

00:33:28

در این قسمت به طور عملی پروژه خود را ریسپانسیو خواهیم کرد.

28

  • معرفی پروژه سوم | اینستاگرام (Instagram)

    • نمایش آنلاین این بخش رایگان است
00:01:54

معرفی پروژه سوم، طراحی سایت اینستاگرام

29

  • طراحی هدر پروژه اینستاگرام (Instagram)

00:36:07

طراحی هدر پروژه اینستاگرام (Instagram) در این قسمت انجام میشود.

30

  • کد نویسی بخش پروفایل پروژه اینستاگرام (Instagram)

00:38:21

کد نویسی بخش پروفایل پروژه اینستاگرام (Instagram) در این بخش انجام میشود.س

31

  • کدنویسی بخش استوری پروژه اینستاگرام (Instagram)

00:12:47

کدنویسی بخش استوری پروژه اینستاگرام (Instagram) در این قسمت انجام خواهد شد.

32

  • کدنویسی بخش Posts پروژه اینستاگرام (Instagram)

00:35:05

کدنویسی بخش Posts پروژه اینستاگرام (Instagram) در این بخش انجام می‌شود.

33

  • کدنویسی فوتر پروژه اینستاگرام (Instagram)

00:11:38

کدنویسی فوتر پروژه اینستاگرام (Instagram) در این قسمت انجام می‌شود.

34

  • ریسپانسیو پروژه اینستاگرامی بخش اول

00:31:12

ریسپانسیو پروژه اینستاگرامی بخش اول

35

  • ریسپانسیو پروژه اینستاگرامی بخش دوم

00:13:40

ریسپانسیو پروژه اینستاگرامی بخش دوم

36

  • ریسپانسیو پروژه اینستاگرامی بخش سوم

00:12:37

ریسپانسیو پروژه اینستاگرامی بخش سوم

37

  • ریسپانسیو پروژه اینستاگرامی بخش چهارم

00:07:28

ریسپانسیو پروژه اینستاگرامی بخش چهارم

38

  • معرفی پروژه توییتر

    • نمایش آنلاین این بخش رایگان است
00:04:02

معرفی پروژه توییتر در این قسمت انجام می‌شود.

39

  • شروع پروژه توییتر | کد نویسی بخش Left section

00:11:16

شروع پروژه توییتر | قالب بندی پروژه در این قسمت اجرا خواهد شد.

40

  • کدنویسی بخش Right setion پروژه توییتر

00:34:37

کدنویسی بخش Right setion پروژه توییتر در این قسمت انجام خواهد شد.

41

  • کدنویسی بخش Profile پروژه توییتر (Twitter)

00:35:12

کدنویسی بخش Profile پروژه توییتر (Twitter)

42

  • کدنویسی بخش Posts پروژه توییتر (Twitter)

00:36:55

کدنویسی بخش Posts پروژه توییتر (Twitter)

43

  • کدنویسی بخش Post Tabs پروژه توییتر (Twitter)

00:18:37

کدنویسی بخش Post Tabs پروژه توییتر (Twitter)

44

  • ریسپانسیو پروژه توییتر (Twitter)

00:08:47

ریسپانسیو پروژه توییتر (Twitter) در این قسمت انجام می‌شود و دوره ما در همین جا به پایان میرسه. امیدوارم این دوره برای شما مفید بوده باشه. ما رو از نظرات ارزشمندتون بی دریغ نگذارید. ارادت زرگر.

45

  • آپدیت دوره: ساخت مگامنو بخش اول

00:20:04

با آپدیت دوره و پیاده سازی موارد جدیدی که شما عزیزان از ما درخواست کرده بودید برگشتیم و امیدوارم که کاربردی باشه براتون.

اینستاگرام
تلگرام

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

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