وب سایت آموزشی آرتور

شرکت در این دوره
لینک با موفقیت کپی شد !
صفحه اصلی آرشیو دوره ها دوره آموزش CSS Grid + پروژه

دوره آموزشی CSS Grid


 

 

 

CSS Gridیکی از موضوعاتی است که اخیرا بیشتر و بیشتر در بحث توسعه وب به آن اشاره می کنند.CSS یا Cascading Style Sheets به ما کمک می‌کند ظاهر مورد علاقه خود را برای سایت طراحی کنیم.در اصل CSS دارای دو ابزاری کاربردی به نام های flexbox و CSS grid میباشد که به توسعه دهنده وب سایت کمک میکند تا با استفاده از CSS صفحات وب را به آسانی و با سرعت بالا طراحی کنیم.


Layout در css

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


CSS Grid چیست ؟

طرح‌بندی CSS Grid یک سیستم شبکه‌ای دو بُعدی را برای CSS فراهم می‌کند. از این فضای مُشبک یا همان Grid می‌توان برای طرح‌بندی نواحی اصلی صفحه یا عناصر کوچک رابط کاربری استفاده کرد. یک Grid مجموعه‌ای از خط‌های افقی و عمودی متقاطع است که تعریف کننده سطرها و ستون‌ها هستند. می‌توان در داخل این سطرها و ستون‌ها عنصرهایی را قرار داد و جانمایی کرد.


از کدام یک باید استفاده کرد، گرید یا فلکس باکس؟

Grid نسبت به Flexbox‌ بسیار جدیدتر است. Grid می‌تواند کارهایی انجام دهد که Flexbox قادر به انجام آن‌ها نیست. در Flexbox نیز می‌توان کارهایی را انجام داد که در CSS Grid امکان‌پذیر نیستند. اما می‌توان از Flexbox و Grid به صورت همزمان استفاده کرد و از قابلیت‌های هر دوی آن‌ها بهره‌مند شد. در واقع یک آیتم Grid می‌تواند یک محفظه یا همان نگهدارنده Flexbox باشد. در ادامه آموزش CSS Grid ، توضیحات لازم در مورد مفاهیم بیان شده، نظیر نگهدارنده و آیتم Grid ارائه شده است.

 

یادگیری CSS Grid چقدر زمان می‌برد؟

به دلیل اینکه CSS Grid با هدف دست‌یابی به انعطاف‌پذیری بالا خلق شده است و برای کاربردها و موارد استفاده گوناگون و متعددی به کار گرفته می‌شود، نمی‌توان آن را به راحتی آموزش دید و از آن استفاده کرد. آموزش CSS Grid به صرف زمان کافی نیازمند است. در این دوره سعی شده مطالب مهم این تکنولوژی را با بیان مثال و در قالب پروژ] به صورت ساده بیان کنیم.


آیا CSS Grid ارزش یادگیری دارد؟

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

 

پیش نیازهای آموزش CSS Grid چیست؟

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

 


1370 بازدید
Mz
Mz

1 سال پیش

سلام خسته نباشید.
ممنون از دوره ی خوبتون.
حدودا دوره کی به اتمام میرسه؟

Mz
رضا کوهساری

1 سال پیش

سلام سعی میکنم تا دو هفته دیگه این دوره را به پایان برسونم.

رضا کوهساری

مدرس دوره:

رضا کوهساری

وضعیت دوره :

اتمام دوره

زمان دوره :

04:12:28

تعداد قسمت ها:

14

پیش نیاز:

HTML - CSS

سطح دوره :

قیمت دوره:

رایگانــ
دوره های پیشنهادی

پروژه فشرده سازی تصویر با جاوا اسکریپت
پروژه فشرده سازی تصویر با...

بر کسی پوشیده نیست که ابزار نویسی یکی از شیرین ترین قسمت در برنام...

آموزش جامع javascript
دوره جاوا اسکریپت مقدماتی...

دوره آموزش جاوا اسکریپت مقدماتی تا پیشرفته مناسب افرادیست که تا ح...

آموزش پروژه محور Sass
دوره جامع و پروژه محور Sa...

Sass مخفف کلمات Syntactically Awesome Stylesheets است. از Sass را...

آموزش CSS
دوره جامع CSS

یک صفحه وب از دو بخش Client Side و Server Side تشکیل شده است. بخش...

درباره ما


آرتور در زمستان 1400 با هدف آموزش مهارت برنامه نویسی از سطح مقدماتی تا مرحله کسب درآمد، متناسب با نیاز بازار کار تشکیل گردیده است. وب سایت آرتور یک چارت آموزشی مخصوص به دوره های خود دارد که میتواند نقطه شروع شما را تعیین کند. با دوره های رایگان آرتور کار را شروع کنید و در صورت علاقه راه را ادامه دهید.

ارتباط با پشتیبانی


شما میتوانید با استفاده از یکی از راه‌های زیر با پشتیبانی ارتباط برقرار کنید

ایمیل: info@rtor.ir

تلگرام :rtor_dev@