اهداف دوره: چه چیزی یاد خواهید گرفت؟

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

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

مزایای شرکت در این دوره

سرمایه‌گذاری بر روی مهارت‌های پیشرفته CSS و SASS مزایای قابل توجهی برای آینده شغلی و توانایی‌های فنی شما به همراه خواهد داشت:

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

پیش‌نیازهای لازم برای شرکت در دوره

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

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

توجه داشته باشید که نیازی به دانش قبلی از SASS، Flexbox، Grid یا انیمیشن‌ها نیست، زیرا این دوره تمامی این مباحث را از صفر تا سطح پیشرفته پوشش می‌دهد.

سرفصل‌های کلیدی دوره

این دوره به بخش‌های مختلفی تقسیم شده است تا یادگیری را برای شما ساختارمند و جامع کند. در ادامه به مهم‌ترین سرفصل‌ها اشاره می‌کنیم:

• مقدمه و آماده‌سازی محیط:
  • معرفی دوره و اهداف آن.
  • نصب ابزارهای لازم (Node.js, NPM) و تنظیم محیط توسعه.
  • آشنایی با نحوه کامپایل SASS به CSS.
• CSS پیشرفته و مفاهیم بنیادی:
  • مدیریت واحدها (em, rem, vw, vh) و کاربرد آن‌ها.
  • مدل جعبه پیشرفته و تفاوت‌های آن در مرورگرها.
  • آشنایی با انواع نمایش (display: block, inline, inline-block, flex, grid).
  • کار با انتخابگرهای پیشرفته CSS و شبه‌کلاس‌ها (pseudo-classes) و شبه‌عناصر (pseudo-elements).
  • CSS Custom Properties (Variables) و کاربرد آن‌ها در طراحی پویا.
• تسلط بر SASS/SCSS از صفر تا صد:
  • متغیرها (Variables) و نگهداری مقادیر قابل استفاده مجدد.
  • پارشال‌ها (Partials) و سازماندهی کد SASS.
  • میکس‌این‌ها (Mixins) و include کردن بلاک‌های کد CSS.
  • ارث‌بری (Extend) و به اشتراک‌گذاری استایل‌ها بین انتخابگرها.
  • توابع (Functions) و انجام محاسبات در SASS.
  • کنترل جریان (if/else, for/each/while loops) برای ایجاد منطق در استایل‌ها.
• طراحی واکنش‌گرا با فلکس‌باکس (Flexbox):
  • مروری جامع بر خواص کانتینر فلکس (flex-container) و آیتم‌های فلکس (flex-items).
  • جهت‌گیری‌ها (flex-direction)، بسته‌بندی (flex-wrap) و ترازبندی (justify-content, align-items, align-self).
  • ایجاد چیدمان‌های رایج مانند هدر، فوتر، ناوبری و گالری تصاویر با Flexbox.
  • پیاده‌سازی واکنش‌گرایی پیشرفته با استفاده از Flexbox.
• سیستم گرید CSS (Grid Layout):
  • تعریف گرید (grid-template-columns, grid-template-rows, grid-template-areas).
  • قرار دادن آیتم‌ها در گرید با استفاده از خطوط و مناطق گرید.
  • تراز بندی آیتم‌ها در گرید (justify-items, align-items).
  • پیاده‌سازی چیدمان‌های پیچیده و نامنظم با CSS Grid.
  • مقایسه Flexbox و Grid و انتخاب رویکرد مناسب برای هر موقعیت.
• ساخت یک فریم‌ورک CSS سفارشی:
  • آشنایی با معماری‌های CSS مانند BEM، SMACSS یا OOCSS.
  • طراحی یک سیستم گرید پایه برای فریم‌ورک شما.
  • ایجاد کامپوننت‌های قابل استفاده مجدد (دکمه‌ها، فرم‌ها، کارت‌ها، نوتیفیکیشن‌ها).
  • مدیریت تم‌ها، رنگ‌ها و تایپوگرافی در فریم‌ورک.
  • آموزش مستندسازی و نگهداری فریم‌ورک شخصی.
• انیمیشن‌ها و ترنزیشن‌های CSS:
  • ترنزیشن‌ها (Transitions) و ایجاد حرکت‌های روان بین حالت‌ها.
  • ترنسفورم‌ها (Transforms) شامل translate, rotate, scale, skew.
  • کی‌فریم‌ها (Keyframes) و ساخت انیمیشن‌های پیچیده.
  • خصوصیات انیمیشن (animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count).
  • بهینه‌سازی عملکرد انیمیشن‌ها برای تجربه‌ای روان.
• پروژه‌های عملی و بهترین شیوه‌ها:
  • پیاده‌سازی چندین پروژه واقعی برای اعمال تمام آموخته‌ها.
  • نکات و ترفندهای بهینه‌سازی کد CSS.
  • معماری کد CSS برای پروژه‌های بزرگ و تیمی.