تسلط بر Tailwind CSS UI/UX با 18 نمونه پروژه 2024

Mastering Tailwind CSS UI/UX with 18 Project Examples 2024

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

Tailwind CSS یک فریم ورک بسیار محبوب برای اولین بار در CSS است که روشی را که توسعه دهندگان وب به طراحی front-end رویکرد می کنند متحول کرده است. در این دوره جامع Udemy، شما عمیقاً در دنیای Tailwind CSS غوطه ور می شوید و یاد می گیرید که چگونه از ویژگی های قدرتمند آن برای ایجاد رابط های کاربری خیره کننده و پاسخگو استفاده کنید.

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

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

در پایان این دوره، شما یک کاربر مطمئن Tailwind CSS خواهید بود که قادر به طراحی و ساخت وب‌سایت‌ها و برنامه‌های کاربردی تحت وب، واکنش‌گرا و از نظر بصری خیره‌کننده خواهید بود. چه مبتدی یا یک توسعه‌دهنده وب با تجربه باشید، این دوره آموزشی طراحی شده است تا مهارت‌های توسعه مقدماتی شما را به اوج برساند.


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

مقدمه Introduction

  • مقدمه Introduction

  • مزیت Tailwind CSS Advantage of Tailwind CSS

  • محیط توسعه باد دم Tailwind Development Environment

  • نصب CLI CLI Installation

  • ورودی Tailwind - خروجی CSS Tailwind Input - Output CSS

  • مقدمه ای بر HTML Emmet Introduction to HTML Emmet

  • فایل های پروژه Project Files

تایپوگرافی Typography

  • اندازه فونت Font Size

  • خانواده فونت Font Family

  • سبک و دکوراسیون Style and Decoration

  • خطوط، رنگ و سبک Lines, Color and Style

  • رنگ های دم بادی Tailwind Colors

  • حاشیه، طرح کلی، حلقه Border, Outline, Ring

  • پیکربندی تم Theme Config

بالشتک، حاشیه، خطوط Padding, Margins, Lines

  • خط، بالشتک، حاشیه 1 Line, Padding, Margins 1

  • خط، بالشتک، حاشیه 2 Line, Padding, Margins 2

  • لبه گرد Rounded Edge

  • ویژگی های End Logic را شروع کنید Start End Logic Properties

اندازه، تعامل، تایپوگرافی بیشتر Sizing, Interactivity, more Typography

  • اندازه - عرض و ارتفاع Sizing - Width & Height

  • اندازه - عرض و ارتفاع 2 Sizing - Width& Height 2

  • نقاط شکست Breakpoints

  • تعامل Interactivity

  • سایه Shadow

  • دستورالعمل CSS سفارشی Custom CSS Directive

  • بیشتر در مورد تایپوگرافی More on Typography

  • اطلاعات بیشتر در مورد تایپوگرافی 2 More on Typography 2

پس زمینه و تصاویر Background and Images

  • پس زمینه و گرادیان Background & Gradient

  • تصویر پس زمینه و موقعیت یابی Background Image & Positioning

  • پیوست تصویر Image Attachement

  • تناسب و موقعیت شی Object Fit & Position

  • تعیین موقعیت عنصر Element Positioning

طرح بندی Layout

  • ظرف Container

  • ستون ها Columns

  • طرح بندی فلکس 01 Flex Layout 01

  • طرح بندی فلکس 02 Flex Layout 02

  • طرح بندی شبکه ای 01 Grid Layout 01

  • طرح بندی شبکه ای 01 Grid Layout 01

  • طرح بندی شبکه ای 02 Grid Layout 02

انتقال، تحول و انیمیشن Transition, Transformation and Animation

  • فیلترها Filters

  • فیلترهای پس زمینه Backdrop Filters

  • تبدیل عنصر Element Transformation

  • انتقال ها Transitions

  • انیمیشن ها Animations

  • انیمیشن سفارشی 01 Custom Animation 01

  • انیمیشن سفارشی 02 - پیشرفته Custom Animation 02 - Advanced

فرم ها Forms

  • کار با فرم ها Working With Forms

ویژگی های پیشرفته Advanced Features

  • توابع استاتیک پلاگین Plugin Static Functions

  • تابع تم Utilities را اضافه کنید Add Utilities Theme Function

  • عملکرد پویا پلاگین Plugin Dynamic Function

  • پلاگین های خارجی External Plugins

  • پلاگین های خارجی - رسمی External Pluggins- Official

  • افزونه خارجی - Flowbite External Plugin - Flowbite

پروژه های 01 - طراحی اجزا Projects 01 - Components Designs

  • مقدمه Introduction

  • دکمه ها Buttons

  • آواتارها Avatars

  • نشان ها Badges

  • کارت 01 Card 01

  • کارت 02 Card 02

  • کارت 03 Card 03

  • منو Menu

  • نوار منوی عمودی Vertical Menu Bar

  • حالت تاریک Dark Mode

  • منوی کشویی Dropdown Menu

  • پاورقی Footer

  • آکاردئون Accordion

  • معین Modal

  • لیست قیمت Price List

  • فرم ورود Login Form

پروژه 02 - وب سایت Project 02 - Website

  • منوی بالا - وب سایت های Salespecks Top Menu - Salespecks Websites

  • بنر برتر - وب سایت Salespecks Top Banner - Salespecks Website

  • Top Grid Card - وب سایت Salespecks Top Grid Card - Salespecks Website

  • بخش فناوری - وب سایت Salespecks Technology Section - Salespecks Website

  • محصولات و خدمات - وب سایت Salespecks Products & Services - Salespecks Website

  • بخش گواهینامه - وب سایت Salespecks Testimonial Section - Salespecks Website

  • بخش پاورقی - وب سایت Salespecks Footer Section - Salespecks Website

پروژه 03- رابط کاربری چت Project 03- Chat UI

  • فهرست مخاطبین - رابط کاربری چت Contact List - Chat UI

  • اتاق چت - رابط کاربری چت Chat Room - Chat UI

نمایش نظرات

تسلط بر Tailwind CSS UI/UX با 18 نمونه پروژه 2024
جزییات دوره
9 hours
77
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
2,173
4.7 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Emmanuel Bakare Emmanuel Bakare

معمار و مربی نرم افزار