آنچه در این دوره خواهید آموخت

• تسلط کامل بر فلکس‌باکس (Flexbox): نحوه چیدمان عناصر در یک بعد (سطر یا ستون)، کنترل جهت، ترازبندی، توزیع فضا و قابلیت واکنش‌گرایی با فلکس‌باکس. مفاهیمی مانند main axis، cross axis، justify-content، align-items و flex-wrap را به طور کامل فرا خواهید گرفت.
• تسلط کامل بر CSS Grid: نحوه طراحی چیدمان‌های دوبعدی (هم سطر و هم ستون)، تعریف شبکه‌های پیچیده، قرار دادن عناصر در نقاط دلخواه گرید و ساخت قالب‌های وب‌سایت کامل. با اصطلاحات grid-template-columns، grid-template-rows، grid-gap و grid-template-areas آشنا خواهید شد.
• ساخت چیدمان‌های واکنش‌گرا (Responsive Layouts): یاد می‌گیرید چگونه با استفاده از این دو تکنیک و Media Queries، صفحات وب خود را برای انواع دستگاه‌ها و اندازه‌های صفحه نمایش بهینه‌سازی کنید.
• ترکیب هوشمندانه Grid و Flexbox: درک اینکه چه زمانی از هر کدام استفاده کنید و چگونه این دو را به بهترین شکل ممکن برای رسیدن به پیچیده‌ترین چیدمان‌ها ترکیب کنید.
• تکنیک‌های پیشرفته چیدمان: مفاهیمی مانند auto-fill، auto-fit، minmax()، و استفاده از تابع repeat() برای ایجاد گرید‌های دینامیک را یاد می‌گیرید.
• اشکال‌زدایی و بهینه‌سازی چیدمان‌ها: آشنایی با ابزارهای توسعه‌دهنده مرورگر برای تحلیل و اشکال‌زدایی مشکلات مربوط به چیدمان CSS.
• ساخت بیش از 10 پروژه عملی: شامل ساخت نوار ناوبری، فرم‌های پیچیده، گالری تصاویر، کارت‌های محصول، بخش‌های مختلف وب‌سایت، چیدمان‌های کامل صفحه وب (مانند یک صفحه داشبورد یا وب‌سایت شخصی) و یک پروژه نهایی جامع.

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

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

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

پیش‌نیازهای دوره

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

• HTML: آشنایی با ساختار سند HTML، تگ‌های رایج و نحوه سازماندهی محتوا در صفحات وب.
• CSS پایه: درک مفاهیم اولیه CSS مانند انتخاب‌گرها (selectors)، ویژگی‌ها (properties) و مقادیر (values)، مدل جعبه‌ای (box model) و نحوه اتصال CSS به HTML.
• آشنایی با ابزارهای توسعه‌دهنده مرورگر: آشنایی ابتدایی با نحوه باز کردن و استفاده از DevTools مرورگر (مانند Chrome DevTools یا Firefox Developer Tools) برای بازرسی عناصر، مشاهده و تغییر استایل‌ها به صورت موقت.

نکته مهم: نیازی به تجربه قبلی با CSS Grid یا Flexbox نیست؛ این دوره برای آموزش کامل این مفاهیم از صفر طراحی شده است و تمام جزئیات لازم را پوشش می‌دهد.

سرفصل‌های جامع دوره

این دوره به صورت گام به گام طراحی شده تا شما را از مبتدی تا حرفه‌ای در زمینه CSS Grid و Flexbox پیش ببرد. سرفصل‌ها به شرح زیر هستند:

• بخش 1: مقدمه‌ای بر طراحی واکنش‌گرا و اهمیت آن
  • چرا چیدمان‌های واکنش‌گرا حیاتی هستند و چگونه وب‌سایت‌های مدرن را متحول کرده‌اند؟
  • گذری بر تاریخچه چیدمان‌های وب و نقاط ضعف روش‌های قدیمی
  • مقدمه‌ای بر CSS Grid و Flexbox، فلسفه وجودی و جایگاه آن‌ها در اکوسیستم وب مدرن
• بخش 2: مبانی فلکس‌باکس (Flexbox) – چیدمان تک‌بعدی
  • معرفی display: flex و درک مفهوم محورهای اصلی (main axis) و متقاطع (cross axis)
  • ویژگی‌های کانتینر فلکس: flex-direction (جهت‌دهی آیتم‌ها)، flex-wrap (بسته‌بندی آیتم‌ها)، justify-content (ترازبندی محتوا)، align-items (ترازبندی آیتم‌ها در محور متقاطع)، align-content (ترازبندی خطوط)
  • ویژگی‌های آیتم‌های فلکس: flex-grow (قابلیت رشد)، flex-shrink (قابلیت انقباض)، flex-basis (اندازه اولیه)، flex (ویژگی ترکیبی)، order (ترتیب نمایش)، align-self (ترازبندی شخصی)
  • پروژه عملی: ساخت نوار ناوبری (Navbar) کاملاً واکنش‌گرا و کارت‌های محصول ریسپانسیو با فلکس‌باکس
• بخش 3: مبانی CSS Grid – قدرت چیدمان دوبعدی
  • معرفی display: grid و تفاوت‌های بنیادین آن با فلکس‌باکس
  • تعریف ردیف‌ها و ستون‌ها: grid-template-columns و grid-template-rows (با استفاده از واحدهای مختلف مانند px، em، rem، % و fr)
  • ایجاد گپ (Gap) بین سطرها و ستون‌ها: grid-gap / gap
  • نام‌گذاری خطوط گرید و مناطق گرید: grid-template-areas برای طراحی بصری و سازمان‌دهی کد
  • پروژه عملی: طراحی یک طرح‌بندی (Layout) کلی برای صفحه وب با Grid Areas و پیاده‌سازی بخش Header و Footer
• بخش 4: قرارگیری آیتم‌ها در گرید و تکنیک‌های پیشرفته
  • قرار دادن آیتم‌ها با استفاده از خطوط: grid-column و grid-row (با استفاده از شماره خط یا نام خط)
  • استفاده از span برای گسترش آیتم‌ها در چندین سطر یا ستون
  • ویژگی‌های ترازبندی گرید: justify-items، align-items (برای آیتم‌های داخلی) و justify-content، align-content (برای محتوای کلی گرید)
  • تکنیک‌های خودکارسازی گرید: auto-fill و auto-fit برای چیدمان‌های دینامیک، و استفاده از minmax() برای کنترل انعطاف‌پذیری ابعاد
  • پروژه عملی: ساخت گالری تصاویر واکنش‌گرا و چیدمان محصولات فروشگاهی به صورت شبکه‌ای
• بخش 5: ترکیب هوشمندانه Grid و Flexbox و کاربردهای واقعی
  • سناریوهای استفاده: چه زمانی Grid برتری دارد و چه زمانی Flexbox؟ (قواعد طلایی)
  • چگونه این دو را برای چیدمان‌های پیچیده ترکیب کنیم؟ (استراتژی: Grid برای Layout کلی، Flexbox برای کامپوننت‌های داخلی و چیدمان عناصر فرعی)
  • طراحی کامپوننت‌های UI پیچیده مانند مودال‌ها، سایدبارها و عناصر تعاملی با ترکیب Grid و Flexbox
  • پروژه عملی: ساخت یک صفحه فرود (Landing Page) کامل و واکنش‌گرا با چندین بخش پیچیده
  • پروژه عملی: پیاده‌سازی یک صفحه داشبورد (Dashboard) تعاملی با بخش‌های مختلف و ابزارک‌ها
• بخش 6: پروژه‌های جامع و تکمیلی
  • ساخت یک وبلاگ کامل با چیدمان واکنش‌گرا شامل بخش پست‌ها، سایدبار و فرم‌ها
  • طراحی صفحه پروفایل کاربری پیشرفته با اطلاعات شخصی و گالری عکس
  • پیاده‌سازی یک صفحه جزئیات محصول با بخش‌های پویا مانند تصاویر، توضیحات، نظرات کاربران
  • پروژه‌های متنوع دیگر برای تقویت مهارت‌ها و افزودن به پورتفولیو شما