آموزش سی اس اس – طرح بندی های پیشرفته با گرید

دوره آموزش سی اس اس – طرح بندی های پیشرفته با گرید
Lynda – CSS – Advanced Layouts with Grid
به زبان انگلیسی با زیرنویس فارسی توسط هوش مصنوعی و زیرنویس انگلیسی کامل

طرح بندی CSS در حد یک معما می باشد. پس از دهه ها هک کردن CSS برای ایجاد طرح بندی چند رنگ ، ماژول طرح شبکه CSS باعث می شود طرح صفحه قابل پیش بینی باشد.

در این دوره آموزش سی اس اس – طرح بندی های پیشرفته با گرید، یک قدم به عقب از مدلهای طرح بندی سنتی بردارید و یاد بگیرید که چگونه می توانید از قابلیت های جدید شبکه CSS استفاده کنید تا رابط هایی جذاب ، در دسترس و پاسخگو باشد.
به مدرس مورتن رند-هاندریکسن بپیوندید ، زیرا او می تواند نحوه ایجاد طرح بندی کامل ، چیدمان های چند رنگ و طرح های پیشرفته مبتنی بر کارت را طی کند. او نشان می دهد که چگونه می توان شبکه های پاسخگو پویا را ایجاد کرد که با فضای نمای موجود در دسترس آنها تنظیم می شود.

فهرست سرفصل های دوره : آموزش Lynda – CSS – Advanced Layouts with Grid
دوره آموزش سی اس اس – طرح بندی های پیشرفته با گرید

• مقدمه
  خوش آمدی
  با استفاده از فایل های تمرین
  پیش نیازها
  
• 1. CSS Grid: اصول اصلی
  واژه شناسی
  یک شبکه تعریف کنید
  خطوط و واحدهای شبکه
  قرار دادن خودکار آیتم در شبکه
  قرار دادن آیتم در شبکه دستی
  خطوط نامگذاری شده
  مناطق شبکه
  شکاف شبکه
  
• 2. برنامه ریزی برای طرح بندی شبکه
  CSS Grid به معنای بازنگری در طرح‌بندی وب است
  طرح های خود را با قلم و کاغذ شروع کنید
  یک رویکرد جدید برای سازگاری با عقب
  ابتدا دسترسی
  
• 3. طرح چند ستونی
  چالش
  مروری بر نقطه شروع
  پشتیبانی از شبکه را بررسی کنید
  شبکه اصلی را ایجاد کنید
  موارد را روی شبکه قرار دهید
  یک ستون سوم را برای نمای گسترده تر اضافه کنید
  شکستن شبکه
  شبکه داخل ظرف شبکه را توجیه کنید
  از فضای سفید برای اجرای جادو استفاده کنید
  
• 4. طرح بندی تک ستونی کامل
  چالش
  مروری بر نقطه شروع
  پشتیبانی از شبکه را بررسی کنید
  شبکه مشترک را ایجاد کنید
  ایجاد ستون ها و موقعیت اقلام شبکه
  شبکه را پاسخگو کنید
  
• 5. طرح بندی کارت های مختلف
  چالش
  مروری بر نشانه گذاری کارت مبتنی بر متن
  برای هر کارت یک شبکه ایجاد کنید
  موارد را روی شبکه قرار دهید
  کارت ها را روی یک شبکه قرار دهید
  مروری بر نشانه گذاری کارت مبتنی بر تصویر
  استفاده از شبکه برای چیدن موارد شبکه
  ظاهر کارت ها را با فلکس تغییر دهید
  آیتم های شبکه ای با اندازه های مختلف ایجاد کنید
  یک شبکه پیچیده به سبک مجله ایجاد کنید
  
• 6. طرح بندی ناوبری خارج از صفحه نمایش قابل دسترسی
  گزینه های مختلف ناوبری خارج از صفحه نمایش
  خارج از صفحه برای پوشش نمای کلی ناوبری
  شبکه اصلی را تنظیم کنید
  ناحیه ناوبری را روی شبکه قرار دهید
  ناحیه پیمایش را روی بوم پنهان کنید
  با استفاده از جاوا اسکریپت یک افکت آشکار ایجاد کنید
  دسترسی به ناوبری خارج از صفحه را بهبود بخشید
  نمای کلی از پانل ناوبری کشویی
  یک شبکه سرریز ایجاد کنید
  محتوا را داخل و خارج از بوم اسلاید کنید
  امتیاز: افکت کشویی را متحرک کنید
  
• 7. فصل پاداش: از مربی بپرسید
  تصاویر واکنش گرا چیست؟
  اکنون که CSS Grid داریم، آیا هنوز باید Flexbox را یاد بگیرم؟
  ویژگی های سفارشی CSS (متغیرها) چیست؟
  تابع calc() چگونه کار می کند؟
  HSL چگونه کار می کند؟
  
• متشکرم
  نتیجه

دوره آموزش سی اس اس – طرح بندی های پیشرفته با گرید، Lynda – CSS – Advanced Layouts with Grid، به زبان انگلیسی با زیرنویس فارسی توسط هوش مصنوعی و زیرنویس انگلیسی کامل ارائه شده است!