این دوره جامع، شما را با جدیدترین و کاربردی‌ترین مفاهیم CSS آشنا می‌کند:

• آشنایی کامل با Flexbox و CSS Grid: تسلط بر این دو سیستم قدرتمند چیدمان برای ساخت طرح‌بندی‌های پیچیده و واکنش‌گرا. خواهید آموخت چگونه با استفاده از مثال‌های عملی، ساختارهایی منعطف و قابل نگهداری ایجاد کنید.
• طراحی واکنش‌گرا (Responsive Design) واقعی: فراتر از media queries صرف. یاد می‌گیرید چگونه وب‌سایت‌هایی طراحی کنید که در هر اندازه صفحه‌نمایش و دستگاهی به بهترین شکل نمایش داده شوند، از جمله رویکرد Mobile-First و استفاده از واحدهای نسبی.
• انیمیشن‌ها و ترنزیشن‌های پیشرفته: ایجاد تجربه‌های کاربری پویا و جذاب با استفاده از CSS animations و transitions. از مفاهیم کلیدی مانند keyframes تا بهینه‌سازی عملکرد انیمیشن‌ها.
• نحوه بهینه‌سازی عملکرد CSS: کاهش زمان بارگذاری و بهبود تجربه کاربری با تکنیک‌هایی مانند بهینه‌سازی انتخاب‌گرها، مدیریت فایل‌های CSS و استفاده از تکنیک‌های Critical CSS.
• متغیرهای CSS (Custom Properties): سازماندهی و مدیریت کد CSS خود با استفاده از متغیرها برای ایجاد یک سیستم طراحی سازگار و قابل تغییر.
• استفاده از SASS/SCSS: آشنایی با پیش‌پردازنده‌های CSS برای نوشتن کدی تمیزتر، ماژولارتر و قابل نگهداری‌تر. مباحثی مانند متغیرها، توابع، mixins و partials پوشش داده می‌شوند.
• معماری CSS و سازماندهی پروژه: یادگیری بهترین شیوه‌ها برای سازماندهی کدهای CSS در پروژه‌های بزرگ، با رویکردهایی که منجر به کدی قابل مقیاس‌پذیری و نگهداری آسان می‌شود.
• تکنیک‌های مدرن CSS: کاوش در قابلیت‌های جدید و جذاب CSS مانند clip-path، custom shapes، blend modes و filters برای ایجاد طراحی‌های منحصر به فرد.

با اتمام این دوره، شما به مجموعه‌ای از مهارت‌های ارزشمند دست خواهید یافت که شما را در بازار کار برجسته می‌کند:

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

برای بهره‌مندی حداکثری از این دوره، داشتن دانش پایه در موارد زیر توصیه می‌شود:

• دانش مقدماتی HTML: آشنایی با ساختار سند HTML و تگ‌های اساسی.
• دانش مقدماتی CSS: شناخت مفاهیمی مانند انتخاب‌گرها، ویژگی‌ها، مدل جعبه‌ای (box model) و نحوه اضافه کردن CSS به سند HTML. این دوره برای کسانی طراحی شده که می‌خواهند از سطح متوسط به پیشرفته ارتقا یابند.
• یک ویرایشگر کد: مانند VS Code یا Sublime Text.
• یک مرورگر وب: برای مشاهده و اشکال‌زدایی پروژه‌ها.

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

این دوره به صورت ساختاریافته طراحی شده تا شما را گام به گام در مسیر تسلط بر CSS پیشرفته هدایت کند:

• مقدمه و تنظیم محیط:
  • خوش‌آمدگویی و معرفی دوره
  • تنظیم ابزارهای توسعه (ویرایشگر کد، افزونه‌ها)
  • مرور سریع اصول CSS برای اطمینان از هم‌ترازی دانش پایه
• مدل جعبه‌ای CSS و جایگاه‌بندی پیشرفته:
  • درک عمیق‌تر Box Model و حالت‌های نمایش (block, inline, inline-block)
  • Positioning (relative, absolute, fixed, sticky) و کاربردهای عملی آن‌ها
  • Stacking Context و z-index
• تسلط بر Flexbox:
  • مبانی Flexbox و محورهای اصلی و متقاطع
  • ویژگی‌های container (justify-content, align-items, flex-wrap)
  • ویژگی‌های item (flex-grow, flex-shrink, flex-basis, order, align-self)
  • مثال‌های کاربردی: ساخت navigation bar، کارت‌های محصول، فرم‌ها
• قدرت CSS Grid:
  • مقدمه‌ای بر Grid Layout و مفاهیم track, line, cell, area
  • تعریف شبکه‌ها (grid-template-columns, grid-template-rows, grid-template-areas)
  • جایگذاری آیتم‌ها (grid-column, grid-row, grid-area)
  • Grid خودکار و implicit grid
  • مثال‌های پیچیده: چیدمان کل صفحات، گالری تصاویر
• طراحی واکنش‌گرا (Responsive Web Design) پیشرفته:
  • رویکرد Mobile-First و Desktop-First
  • استفاده هوشمندانه از Media Queries
  • تصاویر واکنش‌گرا و Viewport units (vh, vw, vmin, vmax)
  • Conditional CSS با supports() و قابلیت‌های جدیدتر
• انیمیشن‌ها و ترنزیشن‌ها:
  • مبانی Transitions (property, duration, timing-function, delay)
  • تکنیک‌های Keyframes و Animations پیشرفته
  • تغییرات (Transformations): translate, rotate, scale, skew
  • بهینه‌سازی انیمیشن‌ها برای عملکرد بهتر (will-change)
• مدیریت و سازماندهی CSS: SASS/SCSS:
  • نصب و راه‌اندازی SASS
  • متغیرها، Nesting و Partial‌ها
  • Mixins و Functions برای کدهای قابل استفاده مجدد
  • Extend/Inheritance و Placeholder Selectors
  • معماری پروژه‌های SASS
• متغیرهای CSS (Custom Properties) و کاربردهای آن‌ها:
  • تعریف و استفاده از متغیرها در CSS
  • محدوده متغیرها (scoping) و آبشاری بودن
  • کاربرد متغیرها در Responsive Design و Theme Switching
• تکنیک‌های پیشرفته و مدرن CSS:
  • CSS Shapes (clip-path, shape-outside)
  • Filter و Blend Modes برای افکت‌های بصری
  • Selectorهای پیشرفته (مثلاً :nth-child(), :has(), :not(), :where(), :is())
  • Logical Properties و Gap برای طرح‌بندی‌های RTL/LTR
• بهینه‌سازی و عملکرد CSS:
  • کاهش حجم فایل CSS و فشرده‌سازی
  • تکنیک Critical CSS و بارگذاری غیرهمزمان
  • شناسایی و رفع مشکلات Reflow و Repaint
  • بهره‌وری از ابزارهای DevTools برای پروفایلینگ CSS
• پروژه نهایی:
  • یک پروژه عملی برای پیاده‌سازی تمام مفاهیم آموخته شده
  • نکات اشکال‌زدایی و بهترین شیوه‌های توسعه