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

• تسلط کامل بر فلکس‌باکس: یادگیری نحوه ساخت چیدمان‌های انعطاف‌پذیر و واکنش‌گرا با استفاده از فلکس‌باکس، از جمله تراز کردن عناصر و توزیع فضا در یک بعد.
• بهره‌برداری از گرید CSS: توانایی طراحی ساختارهای پیچیده و دو‌بعدی با گرید CSS، که برای چیدمان‌های اصلی و بخش‌های مختلف وب‌سایت ایده‌آل است.
• افزایش کارایی با ساس: شناخت کامل ساس (Sass) به عنوان یک پیش‌پردازنده قدرتمند CSS برای نوشتن کدهای تمیزتر، قابل نگهداری‌تر و مقیاس‌پذیرتر با استفاده از متغیرها، میکس‌این‌ها و توابع.
• خلق انیمیشن‌های پویا: پیاده‌سازی ترنزیشن‌ها و انیمیشن‌های CSS برای افزودن جلوه‌های بصری جذاب و تعاملی به عناصر وب‌سایت، مانند افکت‌های هاور یا لودینگ.
• ترکیب تکنولوژی‌ها: توانایی ادغام هوشمندانه فلکس‌باکس، گرید، ساس و انیمیشن‌ها برای ساخت وب‌سایت‌های مدرن و حرفه‌ای.
• توسعه پروژه‌محور: تجربه عملی ساخت پروژه‌های واقعی و کاربردی که هر یک از مفاهیم آموخته شده را در بر می‌گیرد و شما را برای چالش‌های دنیای واقعی آماده می‌سازد.
• بهینه‌سازی و بهترین شیوه‌ها: آشنایی با تکنیک‌های بهینه‌سازی عملکرد (Performance Optimization) و رعایت بهترین شیوه‌ها (Best Practices) در کدنویسی CSS.

با سرمایه‌گذاری بر روی مهارت‌های خود در این دوره، شما نه تنها دانش فنی خود را افزایش می‌دهید، بلکه به مزایای چشمگیری در مسیر حرفه‌ای خود دست خواهید یافت:

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

این دوره برای افرادی طراحی شده که می‌خواهند دانش خود را در زمینه توسعه وب فرانت‌اند عمیق‌تر کنند. برای بهره‌برداری حداکثری از محتوای دوره، داشتن دانش پایه در موارد زیر توصیه می‌شود:

• آشنایی با HTML: درک ساختار اساسی صفحات وب و نحوه استفاده از تگ‌های HTML.
• دانش پایه CSS: آشنایی با انتخابگرهای (Selectors) CSS، ویژگی‌های اصلی (Properties) مانند `color`, `font-size`, `margin`, `padding` و نحوه اعمال استایل به عناصر.
• توانایی کار با ویرایشگر کد: آشنایی با محیط‌های توسعه مانند VS Code یا Sublime Text.

نگران نباشید اگر تجربه قبلی در زمینه فلکس‌باکس، گرید، ساس یا انیمیشن‌ها ندارید؛ این دوره از پایه شروع می‌شود و تمامی مفاهیم ضروری را به صورت جامع پوشش می‌دهد.

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

۱. مقدمه و آماده‌سازی محیط

• اهمیت CSS مدرن و نقش آن در توسعه وب امروزی.
• مروری بر ابزارهای توسعه وب: ویرایشگرهای کد، مرورگرها و ابزارهای توسعه‌دهنده (Developer Tools).
• تنظیم پروژه اولیه و ساختار فایل‌ها.

۲. تسلط بر فلکس‌باکس (Flexbox)

• مفاهیم اصلی فلکس‌باکس: کانتینر (Container) و آیتم‌ها (Items).
• خصیصه‌های کانتینر: `display: flex`، `flex-direction`، `justify-content`، `align-items`، `flex-wrap` و `align-content`.
• خصیصه‌های آیتم: `flex-grow`، `flex-shrink`، `flex-basis`، `order` و `align-self`.
• مثال عملی: ساخت یک نوار ناوبری (Navigation Bar) ریسپانسیو با فلکس‌باکس.
• مثال عملی: طراحی کارت‌های محصولات (Product Cards) با چیدمان انعطاف‌پذیر.

۳. قدرت گرید CSS (CSS Grid)

• مفاهیم اصلی گرید: کانتینر گرید (Grid Container) و آیتم‌های گرید (Grid Items).
• تعریف ردیف‌ها و ستون‌ها با `grid-template-columns` و `grid-template-rows`.
• تنظیم فواصل بین خانه‌ها با `gap`, `row-gap` و `column-gap`.
• قرار دادن آیتم‌ها در گرید با `grid-column`، `grid-row` و `grid-area`.
• توابع کاربردی: `repeat()`, `minmax()`, `auto-fit` و `auto-fill`.
• مفهوم گرید ضمنی (Implicit Grid) و صریح (Explicit Grid).
• مثال عملی: پیاده‌سازی چیدمان کامل یک وب‌سایت (Layout) با گرید.
• مثال عملی: طراحی یک داشبورد پیچیده با استفاده از مناطق گرید (Grid Areas).

۴. بهینه‌سازی CSS با ساس (Sass)

• مقدمه‌ای بر ساس: چرا از پیش‌پردازنده‌ها استفاده کنیم؟ نصب و کامپایل ساس.
• متغیرها (Variables): استفاده از متغیرها برای مقادیر تکراری مانند رنگ‌ها و فونت‌ها.
• نستینگ (Nesting): نوشتن CSS تو در تو برای ساختار سلسله‌مراتبی.
• میکس‌این‌ها (Mixins): ایجاد بلاک‌های کد قابل استفاده مجدد با و بدون آرگومان.
• اکستندها (Extends) و نگهدارنده‌ها (Placeholders): به اشتراک‌گذاری ویژگی‌های CSS.
• توابع (Functions): ساخت توابع سفارشی برای پردازش مقادیر.
• partials و import: سازماندهی پروژه ساس در فایل‌های کوچک‌تر.
• سازماندهی پروژه‌های بزرگ با ساس: ساختاردهی مناسب برای مقیاس‌پذیری.

۵. انیمیشن‌ها و ترنزیشن‌های CSS

• مقدمه‌ای بر ترنزیشن‌ها (Transitions): `transition-property`, `transition-duration`, `transition-timing-function` و `transition-delay`.
• ساخت افکت‌های هاور و فوکوس جذاب با ترنزیشن‌ها.
• مقدمه‌ای بر انیمیشن‌ها (Animations) و keyframes: `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction` و `animation-fill-mode`.
• طراحی لودینگ‌های زیبا و عناصر متحرک.
• ساخت انیمیشن‌های پیچیده UI/UX برای افزایش تعامل کاربر.
• بهینه‌سازی پرفورمنس انیمیشن‌ها برای تجربه کاربری روان.

۶. پروژه نهایی و بهترین شیوه‌ها

• طراحی و پیاده‌سازی یک پروژه وب کامل با ترکیب فلکس‌باکس، گرید، ساس و انیمیشن‌ها.
• نکات و تکنیک‌های پیشرفته در طراحی ریسپانسیو.
• بهینه‌سازی کد و پرفورمنس وب‌سایت.
• اصول اشکال‌زدایی (Debugging) در CSS و جاوااسکریپت (به میزان نیاز).
• مروری بر ابزارهای مدرن توسعه و جریان کاری (Workflow).