قیمت این دوره: رایگانــ
  • مدرس دوره : طه قاسمی زرگر
  • تعداد ویدیوها : 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

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

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 رو نیز خدمت شما عزیزان ارائه خواهیم کرد و این دوره رو به پایان می‌رسونیم. امیدوارم که این دوره توانسته باشد هر چند اندک، به دانش شما اضافه کند وبرای شما مفید بوده باشد. مارو از نظرات و انتقادات سازنده‌ی خودتون بی نصیب نگذارید.

اینستاگرام
تلگرام

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

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