دوره جامع Tailwind و Bootstrap | طراحی حرفه‌ای صفحات وب ریسپانسیو

مدت: ۴۵ ساعت

پیش‌نیاز

HTML/CSS

درباره دوره

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

دوره CSS & Tailwind | Web Design 2 در کندو دقیقا برای همین نیاز طراحی شده. ابتدا بخش‌های تکمیلی CSS رو یاد می‌گیری و بعد وارد Tailwind می‌شی تا ساخت صفحات واکنش‌گرا، طراحی با Utilityها، مدیریت استایل‌ها و ساختاردهی مدرن رو تجربه کنی. این دوره نسخه‌ی جایگزین Web Design 2 قدیمه و کاملاً مطابق فناوری‌های جدید به‌روزرسانی شده.

سرفصل‌ها

بخش اول: css پیشرفته

Flexbox و Grid
Media Queries و طراحی Responsive
متغیرهای CSS و ساختاردهی مدرن
استفاده از LESS/SASS/SCSS (در حد نیاز)

بخش دوم: مقدمات Tailwind

آشنایی با مفهوم Tailwind CSS
- چیستی Tailwind CSS و تفاوت آن با دیگر فریم‌ورک‌ها
- چرا باید از Tailwind CSS استفاده کنیم؟
- بررسی مزایا و معایب استفاده از Tailwind CSS
نصب و راه‌اندازی Tailwind CSS
- نصب Tailwind CSS در پروژه‌های جدید
- راه‌اندازی از طریق CDN
- تنظیم Tailwind در پروژه‌های مبتنی بر Webpack, PostCSS
ساختار اولیه پروژه با Tailwind
- ساختار فایل‌های Tailwind و آشنایی با فایل پیکربندی tailwind.config.js
- تعریف و سفارشی‌سازی پیکربندی اولیه
- استفاده از تیلویند در CSS

بخش سوم: اصول پایه و کلاس‌های Utility

کلاس‌های پایه و کاربردی Tailwind
- کلاس‌های رنگ‌ها: bg-, text-, border-
- کلاس‌های اندازه‌ها: w-, h-, max-w-, min-w-
- کلاس‌های فاصله‌گذاری: m-, p-, mt-, mb-, pl-, pr-
تنظیمات متن و تایپوگرافی
- تغییر اندازه و نوع فونت: text-xl, font-serif, font-sans
- استایل‌های متن: uppercase, italic, underline, line-through
- تنظیم فاصله بین خطوط و حروف: leading-, tracking-
استایل‌دهی به پس‌زمینه و حاشیه‌ها
- کار با پس‌زمینه‌ها: bg-blue-500, bg-gradient-to-r
- تنظیم حاشیه‌ها و دایره‌سازی: border, border-radius, border-2
- سایه‌ها: shadow, shadow-lg, shadow-inner

بخش چهارم: طراحی ریسپانسیو (Responsive Design)

مفهوم طراحی ریسپانسیو در Tailwind
- معرفی کلاس‌های ریسپانسیو در Tailwind
- استفاده از کلاس‌های ریسپانسیو برای اندازه‌های مختلف صفحه (یعنی sm:, md:, lg:, xl:)
ساخت شبکه و گرید (Grid) در Tailwind
- استفاده از کلاس‌های گرید: grid, grid-cols-3, gap-4
- آشنایی با Flexbox در Tailwind: flex, flex-row, flex-col
- سفارشی‌سازی گریدها برای دستگاه‌های مختلف
پیکربندی و سفارشی‌سازی ریسپانسیو
- استفاده از کلاس‌های ریسپانسیو در ستون‌ها و اجز
- تنظیم اندازه فونت‌ها و فاصله‌گذاری برای دستگاه‌های مختلف

بخش پنجم: سفارشی‌سازی و کار با Tailwind CSS

سفارشی‌سازی Tailwind CSS
- سفارشی‌سازی رنگ‌ها، فونت‌ها و اندازه‌ها از طریق فایل پیکربندی tailwind.config.js
- ایجاد کلاس‌های سفارشی برای پروژه‌های خاص
- استفاده از @layer و @apply برای مدیریت بهتر استایل‌ها
پیکربندی برای پروژه‌های بزرگ
- نحوه کار با Tailwind در پروژه‌های بزرگ و پیچیده
- مدیریت بهتر فایل‌های CSS با استفاده از PostCSS
- استفاده از Tailwind با فریم‌ورک‌های JavaScript مانند React یا Vue.js
بهینه‌سازی و کاهش حجم فایل CSS
- استفاده از PurgeCSS برای حذف کلاس‌های غیرضروری
- تکنیک‌های بهینه‌سازی عملکرد برای پروژه‌های بزرگ
- کاهش حجم فایل CSS در محیط‌های تولید (Production)

بخش ششم: پروژه‌های عملی با Tailwind CSS

ساخت صفحات وب واکنش‌گرا (Responsive)
- طراحی یک صفحه فرود (Landing Page) با استفاده از Tailwind
- ساخت یک صفحه وب ساده برای نمایش نمونه‌های کار (Portfolio)
- طراحی فرم‌های ثبت‌نام و ورود با استفاده از کلاس‌های Tailwind
توسعه یک پروژه فروشگاهی ساده
- طراحی صفحات محصول، سبد خرید و پرداخت
- استفاده از Grid و Flexbox برای طراحی ساختار صفحات
- پیاده‌سازی منوهای کشویی و نوار جستجو
پروژه نهایی: ایجاد یک وب‌سایت کامل
- طراحی صفحات اصلی وب‌سایت با Tailwind
- استفاده از تکنیک‌های ریسپانسیو و سفارشی‌سازی برای طراحی زیبا و بهینه

بخش هفتم: نکات پیشرفته و بهترین شیوه‌ها

استفاده از Tailwind با فریم‌ورک‌های JavaScript
- استفاده از Tailwind در پروژه‌های React, Vue.js, Next.js
- نحوه استفاده از Tailwind CSS در قالب‌های Static Site
افزایش عملکرد با استفاده از Tailwind
- بهینه‌سازی پروژه با PurgeCSS
- استفاده از Tailwind در پروژه‌های بزرگ و پیچیده
بهترین شیوه‌ها و الگوهای طراحی با Tailwind
- رعایت اصول طراحی و ساختار مدرن با Tailwind
- طراحی برای عملکرد و مقیاس‌پذیری بالا
- مدیریت موثر کد و بهینه‌سازی سرعت بارگذاری صفحات

بخش هشتم : Bootstrap

مقدمه و مفاهیم پایه
- Bootstrap چیست؟
- تفاوت Bootstrap با CSS خام و فریم‌ورک‌های Utility مثل Tailwind
- معرفی ساختار فایل‌ها و سیستم ماژولار در نسخه 5
- نحوه‌ی اضافه کردن Bootstrap به پروژه (CDN و نصب با npm)
- آشنایی با فایل‌های min.css و bootstrap.bundle.js
سیستم گرید (Grid System)
- مفهوم Grid و Container در Bootstrap
- ردیف‌ها و ستون‌ها (row و col)
- اندازه‌ها و Breakpoints در طراحی Responsive
- ساخت Layoutهای چندستونه برای موبایل، تبلت و دسکتاپ

انتخاب دوره و ثبت‌نام

در حال حاضر گزینه‌ای برای ثبت‌نام در دسترس نیست.

از کلاس بعدی این دوره باخبر شوید

اطلاعات خود را بگذارید تا کارشناسان کندو برای کلاس بعدی با شما تماس بگیرند.

فیلد های "(اجباری)" اجباری هستند

نظر کاربران

۱ نظر

نظرت درباره این دوره چیه؟

برای ثبت نظر و امتیاز، وارد حساب کاربری‌ات شو.

ورود با شماره موبایل و کد پیامکی، کمتر از یک دقیقه.

ورود و ثبت نظر

فاطمه آبان ۱۴۰۴

به به ... بالاخره دوره TAILWIND رو اوردید؟ خیلی منتظر بودیم ...من الان جاواسکریپت هم تموم کردم و منتظر این دوره بوده که با خود آقای رحمانی نژاد دوره برگزار بشه. چی بهتر از این

پاسخ کندوآذر ۱۴۰۴

فاطمه عزیز
ممنون از انرژی مثبت و حال خوبت
خوشحالیم دوره٬ها براتون مفیده