قراره تو این دوره چی یاد بگیرم؟

  • نصب و راه اندازی
  • Padding-Margin and Border
  • استفاده از فلکس باکس
  • طراحی رسپانسیو
  • آموزش کامل grid
  • Transform and Transition
  • و...

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

۱ فصل
۱۹ جلسه
۲ ساعت
۱

لیست ویدئوهای دوره

۱۹ قسمت
۰۲:۲۵:۵۱
1

معرفی دوره

رایگان
۰۶:۵۹
2

نصب و راه اندازی

رایگان
۱۱:۵۰
4

اجرای برنامه به صورت خودکار

۰۶:۲۷
5

فونت و رنگ

۱۰:۵۶
6

Padding-Margin and Border

۰۹:۲۴
7

پیکربندی تیلویند

۰۶:۱۳
8

فونت شخصی

۰۴:۵۵
9

استفاده از فلکس باکس

۰۷:۳۱
10

طراحی رسپانسیو

۰۵:۴۵
11

کارت ها

۰۹:۴۷
12

ایجاد تگ قیمت

۰۴:۵۹
13

قسمت 13

۰۴:۱۷
14

grid

۰۶:۳۸
15

دکمه ها

۰۴:۲۹
16

آیکون ها

۰۶:۰۱
17

hover and active Effects

۰۶:۱۱
18

نوبار رسپانسیو

۱۴:۱۱
19

Transform and Transition

۰۹:۳۹

آموزش tailwind CSS یکی از نیاز های ضروری طراحان سایت در زمان کنونی محسوب میشود. این فریمورک یک رقیب جدی برای Bootstrap میباشد که دلیل اصلی آن، قدرت عجیب tailwind CSS در استفاده بهینه از کد های CSS است. به صورت کلی، فریمورک های css مجموعه ای از کلاس ها را برای ما ایجاد میکنند تا css کمتری بنویسیم و صرفا با نوشتن نام کلاس، استایل مد نظر را روی آن تگ اعمال کنیم. البته فریمورک های css دو دسته هستند :

  • فریمورک های دارای کامپوننت
  • فریمورک های بدون کامپوننت

فریمورک های دارای کامپوننت، فریمورک هایی هستند که با نوشتن برخی کلاس ها، میتوان آن کامپوننت را (مثل button، accordion، card ) فراخوانی کرد. محبوب ترین فریمورکی که از این قاعده پیروی میکند bootstrap است. نقطه ضعف این فریمورک ها، فراخوانی تمام فایل های CSS به صورت یکجا میباشد. یعنی ممکن است ما فقط به 30 درصد آن کلاس ها نیاز داشته باشیم اما 100 درصد کلاس ها در فایل CSS قرار گرفته و سبب کند شدن صفحه میشوند.

فریمورک های بدون کامپوننت، فریمورک هایی هستند که هیچ کلاس آماده ای برای فراخوانی کامپوننت ندارند. بلکه کلاس هایی دارند که این امکان را به ما می دهد تا کامپوننت های خود را بسازیم. tailwindcss دقیقا از همین قابلیت استفاده میکند. این قابلیت سبب حذف کد های اضافه شده و صرفا همان کلاس هایی را ایجاد میکند که ما نیاز داریم.

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

Tailwind CSS یک فریمورک بسیار نوپا و جدید است که آموزش های حرفه ای زیادی برای آن منتشر و تولید نشده. در این میان، دانشجویار اقدام به تولید یک آموزش کاملا پروژه محور برای این تکنولوژی جدید کرده است. این دوره به دلیل داشتن پروژه واقعی میتواند شما را به تمام اهداف تان در حوزه طراحی واکنش گرا برساند.

در دوره آموزش Tailwind CSS چه می آموزید ؟

ابتدا توضیحات مختصری را در مورد Tailwind خواهیم گفت و پس از مقایسه این فریمورک با سایر فریمورک ها، شروع به نصب tailwind CSS میکنیم. در ادامه با مقدمات Tailwind آشنا شده و سپس کامپوننت هایی را با تیلویند آماده خواهیم کرد. در این دوره فریمورک تیلویند را یاد خواهید گرفت و پروژه ای را با استفاده از این فریمورک آماده انجام خواهیم داد تا همه فن حریف این حوزه شوید 😉

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

tailwind css

پیش نیازهای دوره آموزش Tailwind CSS چیست ؟

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

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

  • متخصصان فرانت اند که قصد بروزرسانی اطلاعات خود را دارند
  • برنامه نویسان HTML و CSS که علاقه مند طراحی واکنش گرا هستند
  • توسعه دهندگانی که قصد تکمیل رزومه خود را دارند
  • علاقه مندان به یادگیری تکنولوژی های جدید
  • دانش آموزان رشته شبکه و نرم افزار که درس طراحی وب را گذرانده اند

بطور کلی؛ این دوره برای توسعه‌دهندگان و طراحان وب مناسب است که می‌خواهند تیلویند سی‌اس‌اس را برای استایل‌دهی به پروژه‌های وب خود یاد بگیرند. آیا شما مبتدی هستید یا تجربه‌ای در توسعه وب دارید، این دوره با رویکرد مبتنی بر پروژه به شما کمک خواهد کرد تا اصول را درک کنید و در مواقع واقعی آنها را اعمال کنید. این دوره برای کسانی ایده‌آل است که از یک چهارچوب سی‌اس‌اس ابزارمحور استفاده کرده و یا مایل به آشنایی با آن هستند.

چه نرم افزارهایی در این دوره استفاده شده است ؟

  • ویرایشگر متن VSCode
  • مرورگر Edge

پس از اتمام دوره، به چه سطحی از مهارت خواهید رسید؟

  • پس از اتمام دوره، شما باید یک پایه قوی در استفاده از تیلویند سی‌ اس‌اس برای استایل‌دهی به پروژه‌های وب داشته باشید. اما برای رسیدن به بهترین نتایج، توصیه می‌شود اقدامات زیر را انجام دهید:
  1. تمرین: مفاهیم یادگرفته شده را در پروژه‌های خود اعمال کنید تا یادگیری خود را تثبیت کنید.
  2. ایجاد پروژه: پروژه‌های کوچک را آغاز کنید تا تجربه عملی کسب کنید و مهارت‌های خود را به نمایش بگذارید.
  3. مطالعه مستندات: با مستندات تیلویند سی‌اس‌اس آشنا شوید تا از ویژگی‌ها و گزینه‌های سفارشی‌سازی بیشتر آگاه شوید.
  4. مشارکت در اجتماع: به انجمن‌ها یا اجتماعات مرتبط با تیلویند بپیوندید تا از دیگران یاد بگیرید، سوالات خود را بپرسید و با بهترین روش‌ها آشنا شوید.
  5. بروزرسانی اطلاعات: با تحولات فناوری وب همگام باشید و با آخرین ویژگی‌ها و روش‌های استفاده از تیلویند سی‌اس‌اس آشنا شوید تا مهارت‌های خود را بهبود بخشید.

اهمیت آموزش tailwind CSS

اگر شما طراح سایت باشید قطعا از اهمیت ریسپانسیو کردن یا واکنش گرایی وبسایت باخبر هستید. اما طراحی سایت واکنش گرا با استفاده از CSS خام و بدون بهره بردن از فریمورک ها، کمی خسته کننده و دشوار است. شاید بگویید که از بوت استرپ استفاده میکنیم و مشکلی نست؛ اما دنیای تکنولوژی و برنامه نویسی، دنیای تغییرات و بروز رسانی هاست. شما همواره باید در حال رشد و پیشرفت در جهت افزایش سرعت سایت خود باشید.

آموزش tailwind CSS از این جهت حائز اهمیت است که این فریمورک میتواند سرعت وبسایت شما را افزایش داده و تحولی عظیم در سایت ایجاد کند. در واقع ویژگی اصلی تیلویند این است که فقط کلاس هایی را در فایل css قرار میدهد که شما در قالب خود استفاده کرده باشید. در نتیجه هیچ کلاس اضافه ای در فایل CSS شما ایجاد نشده و سرعت اجرای سایت افزایش میابد. این دقیقا همان کاری است که در بوت استرپ انجام نمیشود.

tailwind چه بازارکاری دارد؟

قطعا نباید به دنبال بازار کار tailwind CSS بگردیم. چیزی که اهمیت دارد، بازار کار طراحی سایت است. کارفرمایی که از شما یک سایت درخواست میکند، برایش مهم نیست که از بوت استرپ استفاده میکنید یا tailwind CSS؛ قطعا کارفرما از شما یک سایت با بهترین کیفیت و بالاترین سرعت را طلب خواهد کرد. پس در نهایت این خود شما هستید که باید میان فریمورک های مختلفی یکی را برای طراحی سایت کارفرما انتخاب کنید.

قطعا با توجه به کاربرد هایی که tailwind CSS برای طراحان سایت فراهم کرده است، انتخاب کردن یک فریمورک حرفه ای، آنچنان هم سخت نخواهد بود. شما با استفاده از تیلویند در کمترین زمان ممکن قادر به طراحی حرفه ای ترین وبسایت ها خواهید بود. هر طرحی با هر جزئیاتی را در tailwind CSS میتوانید پیاده سازی کنید. چراکه هسته طراحی سایت همچنان همان HTML و CSS خودمان است.

تیلویند رو یاد بگیرم بهتره یا بوت استرپ؟

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