آموزش CSS - طرح بندی های پیشرفته با گرید
✅ سرفصل و جزئیات آموزش
در این دوره شما می آموزید که چگونه از قابلیت های CSS Grid برای ایجاد رابط هایی جذاب، دسترس پذیر و واکنش گرا استفاده کنید.
این دوره از آنچه ماژول طرح بندی CSS grid است یک بررسی مختصر ارائه می دهد و زمینه ای را برای استفاده از آن در کنار (یا به جای) روش های طرح بندی سنتی تر فراهم می کند. علاوه بر این، مثال های کاری از پنج الگوی گرید رایج مورد استفاده برای طرح بندی های وب مدرن را ارائه می دهد. مدرس کری دیلز، مفاهیم اصلی CSS grid را پوشش می دهد، نحوه استفاده از CSS grid برای دستیابی به طرح بندی دلخواه را نشان می دهد، مثال های کاربردی استفاده از CSS grid را ارائه داده و طرح بندی های واکنش گرا با CSS grid را توضیح می دهد.
این دوره با GitHub Codespaces یکپارچه شده است، محیط توسعه دهنده ابر فوری که تمام قابلیت های IDE مورد علاقه شما را بدون نیاز به هیچ گونه راه اندازی ماشین محلی ارائه می دهد. با GitHub Codespaces، می توانید در هر زمان و در هر مکانی از هر ماشینی تمرین عملی داشته باشید، در حالی که از ابزاری استفاده می کنید که احتمالا در محل کار با آن مواجه خواهید شد. برای یادگیری نحوه شروع کار، ویدئوی «استفاده از GitHub Codespaces با این دوره» را بررسی کنید.
آموزش CSS - طرح بندی های پیشرفته با گرید
-
به CSS Grid خوش آمدید 0:00:57
-
آنچه باید بدانید 0:00:43
-
استفاده از GitHub Codespaces با این دوره 0:02:20
-
CSS Grid چیست؟ 0:01:10
-
اصطلاح گرید 0:02:48
-
ایجاد یک گرید 0:04:30
-
خطوط و واحدهای گرید 0:06:26
-
قرار دادن آیتم های گرید 0:07:51
-
نواحی گرید 0:07:56
-
خطوط گرید نامگذاری شده 0:04:53
-
شکاف گرید 0:02:24
-
ترازبندی گرید 0:03:25
-
چه زمانی از گرید استفاده کنیم؟ 0:02:24
-
طراحی طرح بندی ها با قلم و کاغذ 0:02:06
-
استفاده از ژنراتورهای گرید 0:02:29
-
رویکرد Mobile-first 0:01:55
-
ملاحظات دسترس پذیری 0:01:44
-
آنچه شما ایجاد می کنید - طرح بندی چندستونی 0:00:36
-
بررسی نقطه شروع 0:03:13
-
ایجاد گرید اصلی 0:04:05
-
قرار دادن آیتم در گرید به صورت دستی 0:04:21
-
افزودن ستون سوم برای viewports پهن تر 0:04:26
-
جاستیفای کردن گرید 0:02:43
-
جایزه - ریفکتور کردن با استفاده از نواحی گرید 0:04:44
-
آنچه شما ایجاد می کنید - طرح بندی Full-Bleed 0:01:14
-
بررسی نقطه شروع 0:02:58
-
ایجاد گرید مشترک 0:03:04
-
تعریف ستون ها و موقعیت یابی آیتم های گرید 0:05:09
-
آنچه شما ایجاد می کنید - طرح بندی کارت یکنواخت 0:01:04
-
بررسی نشانه گذاری کارت و استایل های استارتر 0:02:43
-
تعریف گرید اصلی 0:04:07
-
ایجاد گرید برای هر کارت 0:04:43
-
آنچه شما ایجاد می کنید - طرح بندی کارت متغیر 0:01:01
-
بررسی نشانه گذاری کارت 0:03:08
-
تعریف گرید اصلی 0:04:37
-
قرار دادن کارت ها روی گرید 0:04:03
-
ایجاد گرید برای هر کارت 0:05:03
-
موقعیت یابی آیتم ها در گرید کارت 0:03:51
-
مطمئن شوید که واکنش گرا است 0:03:22
-
آنچه شما ایجاد می کنید - طرح بندی نامتقارن 0:00:32
-
بررسی نقطه شروع 0:02:17
-
تعریف طرح بندی گرید اولیه 0:02:35
-
ایجاد اولین گرید تودرتو 0:05:31
-
ایجاد دومین گرید تودرتو 0:06:20
-
گام های بعدی 0:00:39
مشخصات آموزش
آموزش CSS - طرح بندی های پیشرفته با گرید
- تاریخ به روز رسانی: 1404/06/14
- سطح دوره:پیشرفته
- تعداد درس:45
- مدت زمان :2:28:10
- حجم :410.0MB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
- زمان: 06:19:16
- تعداد درس: 40
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 17:11:52
- تعداد درس: 113
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 21:10:47
- تعداد درس: 202
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 14:29:26
- تعداد درس: 36
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 10:39:08
- تعداد درس: 64
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 11:07:45
- تعداد درس: 63
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 18:23:18
- تعداد درس: 103
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 00:57:00
- تعداد درس: 20
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 00:41:00
- تعداد درس: 9
-
سطح دوره:
-
زبان: دوبله فارسی