تسلط به Tailwind CSS - راهنمای مبتدیان برای طراحی وب مدرن
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- چگونه یک پروژه Tailwind CSS راهاندازی کنید؟
- چگونه از کلاسهای یوتیلیتی برای طراحی صفحات وب خود استفاده کنید؟
- چگونه با Tailwind CSS طراحیهای واکنشگرا ایجاد کنید؟
- تکنیکهای پیشرفته و بهترین شیوهها برای استفاده از Tailwind CSS
- برنامه درسی جامع - شامل همه موارد از مبانی Tailwind CSS تا تکنیکهای پیشرفته و بهترین شیوهها
- یادگیری عملی با تمرینات کاربردی و پروژههای واقعی
پیشنیازهای دوره
- HTML و CSS ابتدایی
توضیحات دوره
تسلط به Tailwind CSS - راهنمای مبتدیان برای طراحی وب مدرن
به دوره «تسلط به Tailwind CSS - راهنمای مبتدیان برای طراحی وب مدرن» خوش آمدید! این دوره برای کمک به شما در یادگیری و تسلط به Tailwind CSS، فریمورک utility-first CSS که ساخت طراحیهای وب مدرن و واکنشگرا را ساده میکند، طراحی شده است.
شما قدرت Tailwind CSS را کشف کرده و مهارتهای توسعه وب خود را متحول میکنید. این دوره جامع برای مبتدیانی طراحی شده که میخواهند به دنیای فریمورکهای utility-first CSS وارد شوند.
شما یاد خواهید گرفت که چگونه وبسایتهای واکنشگرا و ویژوال جذاب بسازید. از درک مبانی تا تسلط به تکنیکهای پیشرفته، این دوره شامل تمام مواردی است که برای تسلط به Tailwind CSS نیاز دارید. به ما بپیوندید و سفر خود را به سمت تبدیل شدن به یک طراح وب مدرن آغاز کنید.
بررسی دوره
آنچه یاد خواهید گرفت:
- مبانی Tailwind CSS
- چگونه CLI Tailwind CSS را برای توسعه سریع پروژه راهاندازی کنید؟
- چگونه از کلاسهای یوتیلیتی برای طراحی صفحات وب خود استفاده کنید؟
- چگونه با Tailwind CSS طراحیهای واکنشگرا ایجاد کنید؟
- ایجاد کامپوننتهای قابل استفاده مجدد Tailwind CSS با React.js
- تکنیکهای پیشرفته و بهترین شیوهها برای استفاده از Tailwind CSS
پیشنیازهای دوره
- قبل از شروع دوره، باید درک پایهای از HTML و CSS داشته باشید.
- آشنایی با جاوااسکریپت مزیت محسوب میشود، اما ضروری نیست.
شروع کار
برای شروع کار با Tailwind CSS، باید محیط توسعه خود را راهاندازی کنید. دستورالعملهای بخش بعدی را دنبال کنید تا Tailwind CSS را راهاندازی کرده و پروژه اول خود را ایجاد کنید.
بیایید وارد عمل شده و شروع به ساخت طراحیهای وب زیبا و مدرن با Tailwind CSS کنیم.
این دوره برای چه کسانی مناسب است؟
- مبتدیانی که میخواهند یاد بگیرند چگونه وب اپلیکیشنهای مدرن و واکنشگرا با Tailwind CSS بسازند.
- طراحان و توسعهدهندگان وب که به دنبال بهبود مهارتهای خود هستند.
- کسی که به ایجاد طراحیهای وب مدرن و واکنشگرا علاقهمند است.
- توسعهدهندگان پیشرفته که میخواهند یاد بگیرند چگونه از Tailwind CSS برای ساخت وب اپلیکیشنهای مدرن و واکنشگرا استفاده کنند.
تسلط به Tailwind CSS - راهنمای مبتدیان برای طراحی وب مدرن
-
مقدمه 02:25
-
مباحث دوره و پروژهها 05:33
-
چگونه یاد بگیریم؟ 03:31
-
Tailwind CSS چیست؟ 04:22
-
چرا از Tailwind CSS در مقابل بوتاسترپ و CSS معمولی استفاده کنیم؟ 05:59
-
راهاندازی اولیه محیط 02:32
-
نصب ویژوال استودیو کد 04:54
-
نصب نودجیاس 02:43
-
نصب افزونههای Tailwind CSS 02:20
-
درباره مخزن کد منبع و Sandbox 03:17
-
درباره این بخش 02:36
-
چگونه میتوان CDN Tailwind را دریافت کرد؟ 05:41
-
تایپوگرافی فونت 06:33
-
تایپوگرافی متن 04:16
-
اندازهگیری عرض 04:30
-
اندازهگیری ارتفاع 03:06
-
فضاگذاری حاشیه 06:42
-
فضاگذاری Padding 03:20
-
رنگها 06:39
-
نمایش و موقعیتیابی 04:40
-
پسزمینهها 10:08
-
بوردرها 06:27
-
افکت Box-Shadow 03:15
-
افکتهای Opacity 04:22
-
فیلترها 02:04
-
ترنزیشنها 05:32
-
انیمیشنها 02:12
-
سفارشیسازی انیمیشنها 05:06
-
تبدیلات 05:38
-
جداول 01:51
-
ستونها 03:03
-
Flexbox 07:15
-
سیستم گرید 05:37
-
ویژگیهای گرید و Flex 10:21
-
Dark mode 04:20
-
شروع کار با Tailwind CSS 03:34
-
ساخت یک وبسایت سریع با Tailwind CLI 10:07
-
ایجاد یک وبسایت ساده با Tailwind CSS 03:46
-
آشنایی با پروژهها 01:20
-
راهاندازی پروژه 03:01
-
ایجاد بدنه و نمایش ماشینحساب 04:19
-
ایجاد دکمههای ماشینحساب 05:06
-
افزودن کلاسهای مشابه به تمام دکمهها با استفاده از جاوااسکریپت 05:17
-
افزودن افکت کلیک به دکمهها 04:42
-
محاسبه مقادیر 06:09
-
آشنایی با پروژهها 01:36
-
راهاندازی پروژه 02:35
-
ایجاد کانتینر، ورودی و افزودن دکمه 06:04
-
ایجاد محتوای آیتم لیست با اکشنها 08:54
-
توضیح لیست To-Do 03:29
-
آشنایی با پروژه 04:06
-
راهاندازی پروژه و ساختار صفحه 03:50
-
هدر صفحه با ناوبری واکنشگرا 09:34
-
ایجاد بخش Hero 04:24
-
ایجاد کاروسل تصویر 05:50
-
ایجاد بخش تصدیقنامهها 04:32
-
ایجاد فرم اشتراک خبرنامه 06:50
-
ایجاد فوتر چسبنده 03:40
-
آشنایی با پروژهها 02:10
-
راهاندازی کلی و طرح کلی پروژه 03:58
-
پیکربندی Dark Mode 04:15
-
ایجاد بخش هدر با ناوبری و تاگل گردن Dark Mode 10:42
-
ایجاد بخش درباره ما 05:51
-
ایجاد بخش پروژهها و لینکدهی پروژههای خود 09:26
-
ایجاد بخش تماس با ما با جزئیات و فرم 11:10
-
پیادهسازی اسکرولینگ هموار برای رفتن به بالا و فوتر 05:07
-
درباره این بخش 01:41
-
چگونه Tailwind CSS را در ریاکت با Vite نصب کنیم؟ 05:04
-
راهاندازی پروژه 04:22
-
ایجاد کامپوننت دکمه اصلی سفارشی 13:06
-
ایجاد کامپوننت دکمه ثانویه سفارشی 04:10
-
ایجاد کامپوننت دکمه طرح کلی سفارشی 04:18
-
ایجاد کامپوننت کارت سفارشی 11:12
-
ایجاد 2 کامپوننت هشدار سفارشی 09:16
-
آشنایی با پروژه 03:33
-
راهاندازی پروژه 04:11
-
ایجاد و پیادهسازی کامپوننت دکمه با هدر 10:18
-
ایجاد محصولات و پیادهسازی کامپوننت کارت 07:19
-
ایجاد کامپوننت سبد خرید 07:04
-
ایجاد کامپوننت آیتم سبد خرید 10:12
-
افزودن محصولات به سبد خرید 07:54
-
بروزرسانی مقدار محصول در سبد خرید 03:55
-
حذف محصول از سبد خرید 03:08
-
افزودن کامپوننتهای هشدار به اکشنهای کاربر 06:43
-
محاسبه قیمت کل در سبد خرید 05:06
-
افزودن تاگل کردن Dark Mode به اپلیکیشن 03:58
-
انتشار پروژه بیلد خود در وب 02:02
-
آشنایی با پروژه 02:33
-
ساختار و راهاندازی اپلیکیشن 03:43
-
پیکربندی سفارشی برای Tailwind CSS 03:13
-
ناوبری بالایی با تاگل کردن Dark Mode 07:58
-
کامپوننت کارتهای اصلی 07:37
-
کامپوننت بارگذاری هنگام واکشی داده 06:43
-
کامپوننت تحلیل 07:48
-
کامپوننت ناوبری جانبی 09:51
-
پیادهسازی ناوبری جانبی 03:41
-
پیادهسازی محدودیت با هشدارها 05:42
مشخصات آموزش
تسلط به Tailwind CSS - راهنمای مبتدیان برای طراحی وب مدرن
- تاریخ به روز رسانی: 1404/12/10
- سطح دوره:همه سطوح
- تعداد درس:97
- مدت زمان :08:36:44
- حجم :4.82GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy