قیمت این دوره: رایگانــ
  • مدرس دوره : طه قاسمی زرگر
  • تعداد ویدیوها : 12 ویدیو
  • مدت زمان دوره : 2:53:00
  • سطح دوره : مقدماتی
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1402/12/09
دوره آموزش جامع Flexbox & Grid

دوره آموزش جامع Flexbox & Grid

این دوره شامل آموزش کامل Grid & Flexbox هست 

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

معرفی دوره

مقایسه Grid و Flexbox

آموزش Grid containers & Grid items

بررسی ویژگی grid-template-columns

بررسی ویژگی grid-auto-rows

بررسی ویژگی grid-template-areas

پروژه پایانی بخش گرید (طراحی بخش معرفی اعضای تیم)

معرفی FlexBox (Flex containers, flex-wrap, flex-direction, justify. Align, flex-flow) و معرفی main axis  و cross axis

Flex grow

Flex shrink

ساخت هدر با FlexBox

ساخت یک فوتر حرفه ای با FlexBox

بررسی ویژگی elements-order در flexbox و پایان دوره

 



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

  1. HTML & CSS

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

مدت زمان دوره 2:53:00
00:00
00:00
  • با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.

1
  • مقایسه Grid و FlexBox

00:07:08

در این قسمت سعی کرده ایم تا مقایسه ای کوتاه بر تفاوت های کلیدی FlexBox و Grid داشته باشیم.

2
  • بررسی Containers و Items در سیستم Grid

00:04:22

در این قسمت به بررسی دقیق Grid-containers و Grid-items پرداخته ایم. درک این تو موضوع تاثیر شایانی بر یادگیری شما از این دوره خواهد داشت.

3
  • پیاده سازی اولین طرح با grid-template-colu

00:14:37

در این قسمت به آموزش property بسیار مهم grid-template-columns میپردازیم و یک ساختار ساده را نیز با کمک این property پیاده سازی خواهیم کرد.

4
  • بررسی ویژگی grid-auto-rows

00:04:09

در این قسمت به بررسی property با اهمیت grid-auto-rows میپردازیم.

5
  • بررسی ویژگی grid-template-areas

00:22:00

در این قسمت به بررسی ویژگی grid-template-areas می‌پردازیم و یک ساختار کاربردی را نیز با کمک این property ایجاد می‌کنیم.

6
  • پروژه نهایی بخش Css Grid

00:32:07

بخش Css Grid رو در این بخش به اتمام می‌رسونیم و پروژه نهایی رو با سیستم Grid پیاده سازی می‌کنیم.

7
  • شروع بخش FlexBox (flex-wrap,flex-direction, justify-content, align-items, align-content- flex-flow)

00:16:48

شروع بخش FlexBox دوره ما از این قسمت شروع میشه و درباره property های خیلی مهمی هم توضیح داده میشه.

8
  • بررسی ویژگی Flex-grow

00:07:51

در این قسمت به بررسی ویژگی چر کاربرد Flex-grow خواهیم پرداخت.

9
  • بررسی ویژگی Flex-shrink

00:05:53

در این قسمت به بررسی ویژگی مهم Flex-shrink می‌پردازیم.

10
  • ساخت هدر سایت با Flex-box

00:13:42

در این قسمت قرار هست با استفاده از FlexBox یک هدر ایجاد کنیم و با روند کامل ساخت هدر سایت آشنا بشیم.

11
  • پروژه فوتر با FlexBox

00:36:05

در این قسمت یک فوتر حرفه ای رو به عنوان یه مینی پروژه با flexbox انحام میدیم.

12
  • آموزش ویژگی Element-order و پایان دوره

00:08:33

در این قسمت آخرین ویژگی از FlexBox رو نیز خدمت شما عزیزان ارائه خواهیم کرد و این دوره رو به پایان می‌رسونیم. امیدوارم که این دوره توانسته باشد هر چند اندک، به دانش شما اضافه کند وبرای شما مفید بوده باشد. مارو از نظرات و انتقادات سازنده‌ی خودتون بی نصیب نگذارید.

دوره های دیگر مدرس

مشاهده همه دوره ها

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

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

tka20

ارسال شده در 1403/08/02

دوره عالی بود. ممنونم

علی راد

علی راد

ارسال شده در 1402/12/16

لطفا آموزش بوت استرپ رو هم منتشر کنید.

علی راد

طه قاسمی زرگر (مدرس)

ارسال شده در 1402/12/16

چشم حتما

رضا کریمی

رضا کریمی

ارسال شده در 1402/12/15

دوره مفید، کاربردی و مختصر بود ممنونم

رضا کریمی

طه قاسمی زرگر (مدرس)

ارسال شده در 1402/12/16

ممنونم از شما

علی راد

علی راد

ارسال شده در 1402/12/14

استاد امکانش هست دوره ی بوت  استرپ رو هم منتشر کنید خودتون؟ من با شیوه تدریس شما خوب یاد میگیرم و به بوت استرپ هم علاقه مندم.

علی راد

طه قاسمی زرگر (مدرس)

ارسال شده در 1402/12/14

برای دوره بعدی که در نظر گرفته شده قرار هست Tailwind رو برای شما عزیزان آماده کنیم. ولی بعد از اون حتما به بوت استرپ هم خواهیم پرداخت.

علی راد

علی راد

ارسال شده در 1402/12/14

ممنون از دوره ی خوب شما، مباحث خیلی ساده بیان شدن.

علی راد

طه قاسمی زرگر (مدرس)

ارسال شده در 1402/12/14

ممنون از نظر شما

دارا قاسمی

ارسال شده در 1402/11/29

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

دارا قاسمی

طه قاسمی زرگر (مدرس)

ارسال شده در 1402/11/29

تمرکز ما در این دوره روی ارائه اصولی و قابل فهم سرفصل ها بوده، خوشحالم که تونسته برای شما مفید باشه.

طاها قاسمی زرگر

طاها قاسمی زرگر

ارسال شده در 1402/11/27

این دوره واقعا عالیه، مباحث به شکل ساده و روان بیان شده و با مثال های متنوع مفاهیم توضیح داده شده که باعث میشه بصورت عمیق مفاهیم فلکس باکس و گرید رو درک کنید. از شما بابت تهیه این دوره عالی ممنونم. 

طاها قاسمی زرگر

طه قاسمی زرگر (مدرس)

ارسال شده در 1402/11/27

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