دوره آموزشی CSS: طرحبندیهای پیشرفته با گرید (2017)
3 ساعت 22 دقیقهپیشرفته2019-04-01
مدرسین

Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
جزئیات دوره
طرح بندی های CSS در حال تبدیل شدن به یک پازل هستند. پس از دههها هک CSS برای ایجاد طرحبندیهای چند ستونی، ماژول CSS Grid Layout چینش صفحه را قابل پیشبینی میکند. در این دوره، از مدلهای چیدمان سنتی یک گام به عقب برگردید و یاد بگیرید که چگونه از قابلیتهای جدید CSS Grid برای ساخت رابطهایی جذاب، در دسترس و واکنشگرا استفاده کنید. به مورتن رند-هندریکسن بپیوندید تا نحوه ایجاد طرحبندیهای کامل، طرحبندیهای چند ستونی و طرحبندیهای مبتنی بر کارت پیشرفته را توضیح دهد. او نحوه ایجاد شبکههای پاسخگو پویا را نشان میدهد که با فضای دید در دسترس خود تنظیم میشوند.
اهداف یادگیری
تعریف یک شبکه
خطوط و واحدهای شبکه
قرار دادن خودکار و دستی اقلام شبکه ای
برنامه ریزی برای چیدمان های شبکه ای
طرح های خود را با قلم و کاغذ شروع کنید
طرح بندی چند ستونی
طرح بندی های تک ستونی کامل
پاسخگو کردن شبکه
طرح بندی کارت های مختلف
طرحبندیهای ناوبری خارج از صفحه نمایش قابل دسترسی
اهداف یادگیری
تعریف یک شبکه
خطوط و واحدهای شبکه
قرار دادن خودکار و دستی اقلام شبکه ای
برنامه ریزی برای چیدمان های شبکه ای
طرح های خود را با قلم و کاغذ شروع کنید
طرح بندی چند ستونی
طرح بندی های تک ستونی کامل
پاسخگو کردن شبکه
طرح بندی کارت های مختلف
طرحبندیهای ناوبری خارج از صفحه نمایش قابل دسترسی
مهارت ها
Responsive Web DesignCSSWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
سرفصل ها
0. مقدمه
- 01 - خوش آمدید
- 02 - استفاده از فایلهای تمرین
- 03 - پیش نیازها
1. CSS Grid - اصول اصلی
- 04 - اصطلاحات
- 05 - یک شبکه تعریف کنید
- 06 - خطوط و واحدهای شبکه
- 07 - قرار دادن خودکار آیتمهای شبکه ای
- 08 - قرار دادن آیتم در شبکه دستی
- 09 - خطوط نامگذاری شده
- 10 - مناطق شبکه
- 11 - شکاف شبکه
2. برنامه ریزی برای طرح بندی شبکه
- 12 - CSS Grid به معنی بازنگری در طرح بندی وب است
- 13 - چیدمانهای خود را با قلم و کاغذ شروع کنید
- 14 - رویکرد جدید برای سازگاری با عقب
- 15 - ابتدا دسترسی
3. طرح چند ستونی
- 16 - چالش
- 17 - مروری بر نقطه شروع
- 18 - پشتیبانی از شبکه را بررسی کنید
- 19 - شبکه اصلی را ایجاد کنید
- 20 - موارد را روی شبکه قرار دهید
- 21 - یک ستون سوم برای نمای گستردهتر اضافه کنید
- 22 - شکستن شبکه
- 23 - توری داخل ظرف توری را توجیه کنید
- 24 - از فضای سفید برای اجرای جادو استفاده کنید
4. طرح بندی تک ستونی کامل
- 25 - چالش
- 26 - مروری بر نقطه شروع
- 27 - پشتیبانی از شبکه را بررسی کنید
- 28 - شبکه مشترک را ایجاد کنید
- 29 - ایجاد ستونها و موقعیت اقلام شبکه
- 30 - شبکه را پاسخگو کنید
5. طرح بندی کارتهای مختلف
- 31 - چالش
- 32 - مروری بر نشانه گذاری کارت مبتنی بر متن
- 33 - برای هر کارت یک شبکه ایجاد کنید
- 34 - موارد را روی شبکه قرار دهید
- 35 - کارتها را روی یک شبکه قرار دهید
- 36 - مروری بر نشانه گذاری کارت مبتنی بر تصویر
- 37 - استفاده از گرید برای چیدن اقلام شبکه
- 38 - ظاهر کارتها را با فلکس تغییر دهید
- 39 - آیتمهای شبکه ای با اندازههای مختلف ایجاد کنید
- 40 - یک شبکه پیچیده به سبک مجله ایجاد کنید
6. طرح بندی ناوبری خارج از صفحه نمایش قابل دسترسی
- 41 - گزینههای مختلف ناوبری خارج از صفحه نمایش
- 42 - خارج از صفحه برای پوشش نمای کلی ناوبری
- 43 - شبکه اصلی را راهاندازی کنید
- 44 - ناحیه ناوبری را روی شبکه قرار دهید
- 45 - ناحیه ناوبری را روی بوم پنهان کنید
- 46 - با استفاده از جاوا اسکریپت یک افکت آشکار ایجاد کنید
- 47 - بهبود دسترسی به ناوبری خارج از صفحه
- 48 - نمای کلی از پانل ناوبری کشویی
- 49 - یک شبکه سرریز ایجاد کنید
- 50 - محتوا را داخل و خارج از بوم اسلاید کنید
- 51 - جایزه - افکت کشویی را متحرک کنید
7. فصل پاداش - از مربی بپرسید
- 52 - تصاویر واکنش گرا چیست؟
- 53 - اکنون که CSS Grid داریم، آیا هنوز باید Flexbox را یاد بگیرم
- 54 - ویژگیهای سفارشی CSS (متغیرها) چیست؟
- 55 - تابع calc() چگونه کار میکند
- 56 - HSL چگونه کار میکند
متشکرم
- 57 - نتیجه گیری
دوره های مرتبط
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
- دوره آموزشی ساخت وبسایتهای ریسپانسیو با استفاده از Canva
- دوره آموزشی ساخت وب سایت های واکنش گرا با Canva آپدیت (2022)
- دوره آموزشی سطح بالا: طرح بندی CSS
- دوره آموزشی کاتینگ اج CSS
- دوره آموزشی CSS: Combining Grid and Flexbox
- دوره آموزشی ساخت وب سایت های پویا با استفاده از AWS Lambdas
- دوره آموزشی چیدمان های CSS: از Float تا Flexbox و Grid