دوره آموزشی CSS: طرح‌بندی‌های پیشرفته با Grid

جزئیات دوره

این دوره یک مرور مختصر درباره ماژول چیدمان شبکه (CSS Grid) ارائه می‌دهد و زمینه‌ای برای استفاده از آن در کنار یا به جای روش‌های سنتی‌تر چیدمان فراهم می‌کند. همچنین نمونه‌های کاربردی از پنج الگوی شبکه رایج که برای چیدمان‌های مدرن وب استفاده می‌شوند، ارائه می‌گردد. مربی کری دیلز مفاهیم اصلی CSS Grid را بررسی کرده، نشان می‌دهد چگونه با استفاده از آن به چیدمان‌های دلخواه دست پیدا کنید، نمونه‌های کاربردی از استفاده از CSS Grid ارائه می‌کند و همچنین چیدمان‌های واکنش‌گرا را با CSS Grid نشان می‌دهد.

اهداف یادگیری:
تعریف CSS Grid به همراه اصطلاحات و ویژگی‌های آن.
استفاده از ابزارهای مرورگر برای کمک به ساخت چیدمان‌های شبکه‌ای.
ایجاد الگوهای رایج شبکه برای چیدمان کلی وب‌سایت و چیدمان اجزای منفرد.

سرفصل ها

0. مقدمه

01 - به CSS Grid خوش آمدید
02 - آنچه باید بدانید
03 - استفاده از GitHub Codespaces با این دوره

1. CSS Grid - مفاهیم اصلی

04 - CSS Grid چیست
05 - اصطلاحات شبکه
06 - یک شبکه ایجاد کنید
07 - خطوط و واحدهای شبکه
08 - قرار دادن اقلام شبکه
09 - مناطق شبکه
10 - خطوط شبکه نامگذاری شده
11 - شکاف شبکه
12 - تراز شبکه

2. برنامه ریزی برای طرح بندی شبکه

13 - چه زمانی از Grid استفاده کنیم
14 - طراحی چیدمان با قلم و کاغذ
15 - استفاده از ژنراتورهای Grid
16 - رویکرد اول موبایل
17 - ملاحظات دسترسی

3. طرح چند ستونی

18 - چیزی که شما ایجاد می‌کنید - یک طرح چند ستونی
19 - مروری بر نقطه شروع
20 - شبکه اصلی را ایجاد کنید
21 - قرار دادن آیتم‌های شبکه ای به صورت دستی
22 - ستون سوم را برای نمای گسترده‌تر اضافه کنید
23 - شبکه را توجیه کنید
24 - پاداش - Refactor با استفاده از مناطق شبکه

4. Full-Bleed Layout

25 - چیزی که شما ایجاد می‌کنید - یک طرح بندی کامل
26 - مروری بر نقطه شروع
27 - شبکه مشترک را ایجاد کنید
28 - ستون‌ها و موارد شبکه موقعیت را تعریف کنید

5. طرح بندی کارت بسیار یکنواخت

29 - چیزی که شما ایجاد می‌کنید - یک طرح کارت یکنواخت
30 - نمای کلی از نشانه گذاری کارت و سبک‌های شروع
31 - شبکه اصلی را تعریف کنید
32 - برای هر کارت شبکه ایجاد کنید

6. طرح بندی کارت متغیر

33 - چیزی که شما ایجاد می‌کنید - طرح بندی کارت متغیر
34 - مروری بر نشانه گذاری کارت
35 - شبکه اصلی را تعریف کنید
36 - کارت‌ها را روی شبکه قرار دهید
37 - برای هر کارت شبکه ایجاد کنید
38 - موارد را در داخل شبکه کارت قرار دهید
39 - مطمئن شوید که پاسخگو باشد

7. چیدمان نامتقارن یا شکسته

40 - چیزی که شما ایجاد می‌کنید - یک طرح نامتقارن
41 - مروری بر نقطه شروع
42 - طرح شبکه اولیه را تعریف کنید
43 - اولین شبکه تو در تو را ایجاد کنید
44 - دومین شبکه تودرتو ایجاد کنید

نتیجه گیری

45 - مراحل بعدی