10 روز آموزش CSS Grid

آنچه یاد خواهید گرفت:

• روز اول: طراحیCSS Grid برای فرم‌ها
• روز دوم: طراحی CSS Grid برای جعبه‌های چند رنگی در مرکز
• روز سوم: طراحی CSS Grid برای تایم‌لاین
• روز چهارم: طراحی CSS Grid تودرتو
• روز پنجم: طراحی CSS Grid برای موبایل
• روز ششم: طراحی CSS Grid برای کیبورد
• روز هفتم: طراحی CSS Grid لوزی شکل
• روز هشتم: طراحی CSS Grid برای تصویر تقسیم شده
• روز نهم: طراحی CSS Grid برای وب‌سایت واکنشگرا
• روز دهم: طراحی CSS Grid برای منوی کشویی واکنشگرای نوبار

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

• دانشجویان باید درک خوبی از چگونگی راه‌اندازی و ایجاد اسناد HTML اولیه داشته باشند.
• دانشجویان باید درک خوبی از CSS عمومی داشته باشند.
• یک مرورگر وب مورد نیاز است. ما از گوگل کروم استفاده خواهیم کرد و گاهی اوقات از ابزارهای توسعه‌دهنده کروم استفاده می‌کنیم.
• یک ویرایشگر کد مورد نیاز است. ما از VS Code با افزونه Live Server نصب شده استفاده خواهیم کرد.

توضیحات دوره

آیا می‌خواهید به CSS Grid مسلط شوید؟ دیگر نگران نباشید، در این دوره جامع با عنوان "10 روز آموزش CSS Grid" که به طور خاص برای ارائه اطمینان کامل در اعمال CSS Grid در سناریوهای طراحی مختلف طراحی شده است. ساختار این دوره به گونه‌ای است که ما می‌توانیم با اعمال مدل طرح‌بندی CSS Grid بر روی برخی طرح‌های اساسی شروع کنیم و به تدریج به طرح‌های پیچیده‌تر برویم. از نظر ویژگی‌های CSS Grid که در این دوره مورد بررسی قرار می‌گیرند، لزوماً تئوری پشت آن‌ها توضیح داده نمی‌شود، بلکه چگونگی استفاده از آن‌ها در پروژه‌های مختلف نشان داده می‌شود. در زیر بررسی پروژه‌هایی که در این دوره پوشش خواهیم داد آورده شده است:

روز اول: طراحی CSS Grid برای فرم‌ها

• در روز اول، شما بررسی خواهید کرد که چگونه می‌توان از ویژگی grid-template-columns استفاده کرد تا بتوانیم دو ستون با عرض مساوی تعریف کنیم.

روز دوم: طراحی CSS Grid برای جعبه‌های چند رنگی در مرکز

• در روز دوم، شما یاد خواهید گرفت که چگونه می‌توانیم از ویژگی‌های grid-template-columns ،justify-content ،align-content و grid-gap برای دستیابی به یک طرح‌بندی جعبه‌ای متمرکز با رنگ‌های مختلف استفاده کنیم.

روز سوم: طراحی CSS Grid برای تایم‌لاین

• در روز سوم، شما یاد خواهید گرفت که چگونه می‌توانیم از ویژگی‌های grid-template-columns ،grid-column-gap و justify-self برای دستیابی به یک طرح‌بندی مبتنی بر تایم‌لاین استفاده کنیم.

روز چهارم: طراحی CSS Grid تودرتو

• در روز چهارم، شما یاد خواهید گرفت که چگونه می‌توانیم از ویژگی‌هایی مانند grid-template-columns ،justify-items و align-items برای دستیابی به یک طراحی گرید تودرتو استفاده کنیم.

روز پنجم: طراحی گرید CSS برای موبایل

• در روز پنجم، شما خواهید آموخت که چگونه می‌توان از ویژگی‌هایی مانند grid-template-columns ،grid-template-rows ،grid-auto-rows ،grid-row ،align-self ،justify-items و align-items برای ساخت یک طراحی موبایل عمومی استفاده کرد.

روز ششم: طراحی CSS Grid برای کیبورد

• در روز ششم، شما خواهید آموخت که چگونه می‌توان از ویژگی‌هایی مانند grid-template-columns ،grid-gap ،grid-column ،justify-items و align-items برای ساخت یک طراحی کیبورد عمومی استفاده کرد.

روز هفتم: طراحی CSS Grid لوزی شکل

• در روز هفتم، شما خواهید آموخت که چگونه از ویژگی‌هایی مانند grid-template-columns ،grid-gap و grid-column برای ایجاد یک طراحی گرید لوزی شکل استفاده کنید.

روز هشتم: طراحی CSS Grid برای تصویر تقسیم شده

• در روز هشتم، شما خواهید آموخت که چگونه یک طرح‌بندی گرید تصویر تقسیم شده با استفاده از ویژگی‌هایی مانند grid-template-columns ،grid-template-rows ،grid-gap و grid-column ایجاد کنید.

روز نهم: طراحی CSS Grid برای وب‌سایت واکنشگرا

• در روز نهم، شما خواهید آموخت که چگونه از ویژگی‌هایی مانند grid-template-columns ،grid-template-rows ،grid-column-gap ،grid-template-areas ،grid-auto-flow ،grid-auto-rows ،justify-content ،align-self ،justify-self ،justify-items و align-items برای ایجاد یک طراحی گرید وب‌سایت واکنشگرا استفاده کنید.

روز دهم: طراحی CSS Grid برای منوی کشویی واکنشگرای نوبار

• در روز دهم، شما خواهید آموخت که چگونه یک منوی کشویی واکنشگرای نوبار را با استفاده از ویژگی‌هایی مانند grid-template-columns ،grid-template-rows ،justify-items، align-items ،justify-content ،align-content و justify-self بسازید.

در پایان این دوره، شما باید درک کاملی از چگونگی ادغام مدل طرح‌بندی CSS Grid در طراحی‌های وب‌سایت خود داشته باشید. اکنون در این دوره شرکت کنید و بیایید با هم به CSS Grid مسلط شویم.

این دوره برای چه کسانی مناسب است؟

• هر کسی که به دنبال احساس اطمینان در طراحی صفحات وب با استفاده از مدل طرح‌بندی CSS Grid است.
• هر کسی که می‌خواهد ببیند چگونه می‌توان از CSS Grid در طرح‌بندی‌های مختلف طراحی استفاده کرد.