دسته بندی

در حال حاضر محصولی در سبد خرید شما وجود ندارد.

پنل کاربری

رمز خود را فراموش کرده اید؟ اگر اولین بار است از سایت جدید استفاده میکنید باید پسورد خود را ریست نمایید.

آموزش طراحی بوسیله Tailwind CSS

دانلود egghead Design with Tailwind CSS Masterclass

10,900 تومان
بیش از یک محصول به صورت دانلودی میخواهید؟ محصول را به سبد خرید اضافه کنید.
افزودن به سبد خرید
خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

ویدئو معرفی این محصول

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

عنوان اصلی : Design with Tailwind CSS Masterclass

این مجموعه آموزش ویدیویی محصول موسسه آموزشی egghead است که بر روی 1 حلقه دیسک ارائه شده و به مدت زمان 3 ساعت و 5 دقیقه در اختیار علاقه مندان قرار می گیرد.

در ادامه با برخی از سرفصل های درسی این مجموعه آموزش آشنا می شویم :


1. معرفی Tailwind و Utility First Workflow AC67:
1. راه اندازی tailwind و postcss
2. اولین گردش کار ابزار Tailwind
3. سبک های پاسخگو در Tailwind
4. عناصر سبک مشروط با انواع Tailwind در شناور و تمرکز:
5. نرم افزار Tailwind را با Apply ترکیب کنید
6. استخراج اجزای Tailwind قابل استفاده مجدد
7. سیستم طراحی Tailwind را سفارشی کنید
8. حذف CSS استفاده نشده با Purgecss
2. طراحی و پیاده سازی اجزای معمولی tailwind:
1. ساختار یک کارت اساسی در Tailwind
2. متن طراحی در یک کارت Tailwind برای تأکید بر محتوای مهم
3. آیکون های SVG سبک با کلاس های ابزار Tailwind
4. استفاده از tailwind برای طراحی یک فاصله که به نظر می رسد مانند یک نشان
5. تصاویر محصول و موقعیت با Utilities Object-Fit Tailwind
6. یک تصویر را به یک نسبت ابعاد ثابت با پدال بر اساس درصد در Tailwind قفل کنید
7. ایجاد عمق در یک جزء Tailwind با سایه ها و لایه ها
3. ساخت یک نوار ناوبری پاسخگو با tailwind:
1. ساخت یک طرح ناوبری با استفاده از tailwind و flexbox
2. پیوندهای منوی Navar را در Tailwind با Vue قرار دهید
3. کلاس های ابزار پیشوند Tailwind با نقطه های نقطه ای برای ایجاد یک نوار نافال
4. ساخت و سبک کشویی در Tailwind:
1. عناصر کشویی پایه را با Tailwind سبک کنید
2. استفاده از موقعیت مطلق برای قرار دادن یک ناحیه کشویی سبک Tailwind در یک نوار ناوبری
3. یک تکه تکه تکه تکه ای را تعاملی ایجاد کنید
4. یک لیست کشویی را برای تلفن همراه با Tailwind دوباره طراحی کنید


1. introduction to tailwind and the utility first workflow ac67:
1. Set up Tailwind and PostCSS
2. The Tailwind Utility First Workflow
3. Make Styles Responsive in Tailwind

4. Conditionally Style Elements with Tailwind Variants on Hover and Focus:
5. Compose Tailwind Utilities with @apply
6. Extract Reusable Tailwind Components
7. Customize the Tailwind Design System
8. Remove unused CSS with Purgecss

2. Design and Implement Common Tailwind Components:
1. Structure a Basic Card in Tailwind
2. Design Text in a Tailwind Card to Emphasize Important Content
3. Style SVG Icons with Tailwind Utility Classes
4. Use Tailwind to Design a span that Looks like a Badge
5. Crop and Position Images with Tailwind object-fit Utilities
6. Lock an Image to a Fixed Aspect Ratio with Percentage-based Padding in Tailwind
7. Create Depth in a Tailwind Component with Shadows and Layers

3. Build a Responsive Navbar with Tailwind:
1. Build a Navbar Layout using Tailwind and Flexbox
2. Toggle Navar Menu Links in Tailwind with Vue
3. Prefix Tailwind Utility Classes with Breakpoints to Make a Responsive Navbar

4. Build and Style a Dropdown in Tailwind:
1. Style the Basic Dropdown Elements with Tailwind
2. Use Absolute Positioning to Position a Tailwind Styled Dropdown Area in a Navbar
3. Make a Tailwind Styled Dropdown Interactive
4. Redesign a Dropdown List for Mobile with Tailwind