این دوره به شما کمک می‌کند تا:

• درک عمیق‌تری از مفاهیم پیشرفته CSS مانند Grid Layout، Flexbox، Custom Properties (متغیرهای CSS) و ترنسفورمیشن‌ها به دست آورید.
• توانایی ایجاد طرح‌بندی‌های پیچیده و واکنش‌گرا (Responsive) را با استفاده از تکنیک‌های مدرن CSS کسب کنید.
• عملکرد و قابلیت نگهداری کدهای CSS خود را به طور چشمگیری بهبود بخشید.
• با استفاده از انیمیشن‌ها و ترنزیشن‌های CSS، تجربه‌های کاربری جذاب‌تری خلق کنید.
• با استانداردهای جدید CSS و بهترین شیوه‌های کدنویسی آشنا شوید.
• پروژه‌های وب خود را به سطح بالاتری از کیفیت و حرفه‌ای‌گری برسانید.

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

• Grid Layout: یادگیری نحوه استفاده از Grid Layout برای ایجاد طرح‌بندی‌های دو بعدی پیچیده و انعطاف‌پذیر. این بخش شامل مباحثی مانند تعریف ردیف‌ها و ستون‌ها، قرار دادن عناصر در سلول‌های Grid، و استفاده از توابع fr برای تقسیم فضا به صورت نسبی می‌شود.
• Flexbox: تسلط بر Flexbox برای ایجاد طرح‌بندی‌های یک بعدی و مدیریت نحوه توزیع فضا بین عناصر. در این قسمت، با مفاهیمی مانند flex-direction، justify-content، align-items و flex-grow آشنا خواهید شد.
• Custom Properties (متغیرهای CSS): آشنایی با نحوه تعریف و استفاده از متغیرهای CSS برای افزایش قابلیت نگهداری و انعطاف‌پذیری کدها. با استفاده از Custom Properties می‌توانید مقادیر رنگ، فونت، اندازه و سایر ویژگی‌های CSS را به صورت متمرکز تعریف کرده و در سراسر پروژه خود از آن‌ها استفاده کنید.
• Transforms, Transitions, and Animations: یادگیری نحوه استفاده از ترنسفورمیشن‌ها، ترنزیشن‌ها و انیمیشن‌های CSS برای ایجاد جلوه‌های بصری جذاب و تعاملی. این بخش شامل مباحثی مانند translate، rotate، scale، skew، transition و animation می‌شود.
• CSS Functions: بررسی توابع قدرتمند CSS مانند calc()، clamp()، min() و max() برای انجام محاسبات ریاضی و محدود کردن مقادیر.
• Selectors Level 4: آشنایی با سلکتورهای جدید CSS Level 4 که امکان انتخاب عناصر با دقت و انعطاف‌پذیری بیشتری را فراهم می‌کنند. این سلکتورها شامل :is()، :where()، :has() و :not() می‌شوند.
• Logical Properties and Values: یادگیری نحوه استفاده از ویژگی‌ها و مقادیر منطقی CSS برای ایجاد وب‌سایت‌هایی که با جهت‌های مختلف نوشتاری سازگار هستند (مانند زبان‌های راست به چپ).

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

• آشنایی با مبانی HTML و CSS.
• درک مفاهیم پایه طراحی وب.
• توانایی کار با یک ویرایشگر کد.
• تجربه کدنویسی CSS در پروژه‌های واقعی (حتی پروژه‌های کوچک).

ارائه این دوره بر روی فلش مموری 32 گیگابایتی، مزایای متعددی را برای شما فراهم می‌کند:

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

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

• چگونه یک طرح‌بندی واکنش‌گرا (Responsive) را با استفاده از Grid Layout ایجاد کنید که در اندازه‌های مختلف صفحه نمایش به درستی نمایش داده شود.
• چگونه یک نوار منو (Navigation Bar) را با استفاده از Flexbox طراحی کنید که به صورت خودکار فضای موجود را بین آیتم‌ها توزیع کند.
• چگونه یک انیمیشن ساده را با استفاده از ترنزیشن‌ها و ترنسفورمیشن‌های CSS ایجاد کنید که با هاور کردن ماوس بر روی یک عنصر فعال شود.
• چگونه از Custom Properties برای تعریف تم‌های مختلف برای یک وب‌سایت استفاده کنید و به کاربران امکان دهید تم مورد نظر خود را انتخاب کنند.

مثال: استفاده از Custom Properties برای تغییر رنگ تم:

فرض کنید می‌خواهید رنگ اصلی یک وب‌سایت را با استفاده از Custom Properties تعریف کنید. می‌توانید به صورت زیر عمل کنید:

:root {
  --primary-color: #4A90E2;
}

h1 {
  color: var(--primary-color);
}

button {
  background-color: var(--primary-color);
}
    

با تغییر مقدار –primary-color، رنگ تمام عناصر h1 و دکمه‌ها به صورت خودکار تغییر خواهد کرد.