قیمت این دوره: 70,000 تومان
  • مدرس دوره : میثم کیانی
  • تعداد ویدیوها : 12 ویدیو
  • مدت زمان دوره : 2:11:00
  • سطح دوره : مقدماتی
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1401/01/16
ثبتـــ نام در این دوره
آموزش CSS Grid

گرید یک سیستم صفحه آرایی دو بعدی است که برای رفع مشکلات صفحه آرایی در طراحی واسط کاربری ساخته شده است.

ما همیشه صفحه آرایی را به واسطه عناصر و ویژگی هایی که هدف آنها بوجود آوردن صفحه آرایی نبوده است انجام می دادیم. اول از همه عناصر جدول در HTML و بعد از آن ویژگی float بودند که صفحه آرایی را از طریق آنها انجام می دادیم اما این روش ها استاندارد نبودند چرا که هدف این عناصر و ویژگی ها کار دیگری بود.

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

گرید توانایی های جدیدی برای ما دارد که از مهمترین آنها می توان به مدیریت صفحه آرایی در دو بعد افقی و عمودی به صورت همزمان اشاره کرد.

در این دوره ما به صورت کامل CSS گرید را پوشش داده و در انتها یک پروژه ساده با یک دیگر طراحی میکنیم که میتوانید آن را در بخش معرفی دوره مشاهده کنید.

سرفصل های دوره : 

معرفی دوره

ابزارهای مورد نیاز

شروع Css grid

Creating a Grid - grid-template-columns - repeat() - Gap Spacing

Row Height - grid-auto-rows - minmax()-grid-template-rows- Align & Justify

Grid Column Span - Grid Row Span-

شروع به طراحی پروژه نهایی

 

 


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

  1. HTML
  2. CSS
  3. FlexBox


فهرستـــ ویدیوها

مدت زمان دوره 2:11:00
  • لطفا در صورت اقدام به دانلود تا انتها فرایند دانلود ، این صفحه را باز نگاه دارید.

1
  • معرفی دوره

00:06:03

معرفی دوره، پیش نیازها و پروژه نهایی

2
  • ابزار های مورد نیاز

  • نمایش آنلاین این بخش رایگان است
00:06:41

معرفی ابزارهای مورد نیاز

3
  • اصطلاحات اولیه در css grid

00:05:46

بررسی اصطلاحات اولیه در css grid

4
  • ()Creating a Grid - grid-template-columns - repeat

00:20:05

()Creating a Grid - grid-template-columns - repeat

5
  • Gap Spacing

  • نمایش آنلاین این بخش رایگان است
00:06:24

Gap Spacing

6
  • Row Height - grid-auto-rows - minmax()-grid-template-rows

00:07:35

Row Height - grid-auto-rows - minmax()-grid-template-rows

7
  • بررسی کامل خاصیت های Align & Justify

00:08:15

بررسی کامل Align & Justify

8
  • بررسی کامل align-self & justify-self

00:07:43

بررسی کامل align-self & justify-self

9
  • grid-column-end / grid-column-start / grid-row-end / grid-row-start

00:07:44

بررسی کامل دستورات grid-column-end / grid-column-start / grid-row-end / grid-row-start

10
  • واکنشگرایی در گرید - معرفی تمرین

00:08:10

معرفی تمرین - واکنشگرا نمودن المان ها در css grid - استفاده از auto-fill & minmax

11
  • حل تمرین

00:16:43

حل تمرین

12
  • پروژه نهایی

00:30:25

پروژه نهایی

نظرات کاربران در رابطه با این دوره

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