دوره آموزشی
دوبله زبان فارسی
تسلط به Flexbox و CSS Grid - راهنمای عملی مدرن
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- شما یاد خواهید گرفت که چگونه استایلهای مختلف طرحبندی را با CSS Grid و Flexbox ایجاد کنید.
- شما قادر خواهید بود با استفاده از grid-template-areas طرحبندیهای گرید ایجاد کنید.
- شما یاد خواهید گرفت که چگونه با استفاده از CSS Grid و Flexbox ستونها و سطرهای برابر و نابرابر ایجاد کنید.
- شما در مورد نحوه طراحی طرحبندی MASONRY با flex و گرید مهارت خواهید یافت.
- شما یاد خواهید گرفت که چگونه از واحد کسری (fr) در CSS Grid استفاده کنید.
- شما در مورد نحوه ایجاد طرحبندیهای flex با flex-basis مهارت خواهید یافت
- شما در مورد نحوه کار با گرید implicit و گرید explicit مهارت خواهید یافت.
- شما یاد خواهید گرفت که چگونه از کوئری رسانه CSS برای موبایل پسند کردن و واکنشگرا کردن طراحی وب خود استفاده کنید.
- شما یاد خواهید گرفت که چگونه با CSS Grid و Flexbox گالری تصاویر و گالری ویدئو ایجاد کنید.
- شما قادر خواهید بود آیتمهای گرید و آیتمهای flex را ترازبندی و جاستیفای کنید.
- شما تفاوت بین auto-fill و auto-fit در گرید را خواهید آموخت.
- شما به نحوه استفاده از نامهای دلخواه خطوط گرید در گرید تسلط خواهید یافت.
- شما قادر خواهید بود با تمام ویژگیهای flexbox و تمام ویژگیهای گرید گامبهگام کار کنید.
- شما به طور خلاقانه طرحبندی وب یکسانی را با استفاده از flexbox و گرید ایجاد خواهید کرد.
پیشنیازهای دوره
- شما به ویرایشگر متن اولیه نیاز دارید که برای ما رایگان است. به عنوان مثال sublime text، ویژوال استودیو کد و براکتها
- شما باید درک درستی از نحوه کدنویسی با CSS و HTML اولیه داشته باشید.
توضیحات دوره
این دوره طراحی شده تا شما را به طراح وب فرانتاند درجه یک جهانی تبدیل کند که CSS Grid و Flexbox ابزارهای اصلی او هستند. با مهارتهایی که از این دوره خواهید آموخت، میتوانید با افتخار هر طرحبندی وبسایتی را از ابتدا تا انتها خلق کنید. این اطمینان وجود دارد چون این دوره Flexbox و CSS Grid مدرن، باکیفیت، به خوبی توضیح داده شده و ساختاربندی شده است.
آنچه خواهید آموخت:
- شما قادر خواهید بود به صورت گامبهگام با تمام ویژگیهای flexbox و تمام ویژگیهای گرید کار کنید.
- شما یاد میگیرید چگونه با CSS Grid و Flexbox انواع مختلف طرحبندیها را بسازید.
- شما نحوه استفاده از واحد کسری (fr) را در CSS Grid خواهید آموخت.
- شما مهارت ایجاد طرحبندیهای گرید واکنشگرا با استفاده از grid-template-areas را خواهید داشت.
- شما مهارت نحوه طراحی طرحبندی masonry را با flex و گرید کسب خواهید کرد.
- شما مهارت کار با گرید implicit و گرید explicit را خواهید داشت.
- شما تفاوت بین auto-fill و auto-fit در گرید را یاد میگیرید.
- شما توانایی ترازبندی و جاستیفای کردن آیتمهای گرید و flex را خواهید داشت.
- شما یاد میگیرید چگونه گالری تصاویر و گالری ویدئو را با CSS Grid و Flexbox بسازید.
- شما نحوه ایجاد ستونها و سطرهای برابر و نابرابر را با هر دو CSS Grid و Flexbox یاد میگیرید.
- شما به نحوه استفاده از نامهای دلخواه خطوط گرید در گرید تسلط خواهید داشت.
- شما توانایی ساخت منوهای ناوبری و مگا منوها را خواهید داشت و یاد میگیرید چگونه به مگا منوها تصاویر و ویدئو اضافه کنید.
- شما توانایی به کار بردن کوئری رسانه CSS برای موبایل پسند بودن و واکنشگرا کردن طراحی سایت را خواهید داشت. این به معنای رویکرد mobile-first است.
- شما نحوه ایمپورت font awesome برای گنجاندن آن در طراحی خود را یاد میگیرید.
- شما به طور کامل نحوه ایمپورت Google fonts به عنوان بخشی از خانواده فونت خود را خواهید آموخت.
- شما قادر خواهید بود برخی ویژگیهای CSS مانند مارجین، padding، پوزیشن، ویژگیهای بوردر و غیره را روی طرحبندی خود اعمال کنید.
این دوره برای چه کسانی مناسب است؟
- این دوره flexbox و گرید برای کسانی مناسب است که قصد دارند در زمینه طرحبندیهای flexbox و CSS Grid از مبتدی مطلق تا حرفهای مطلق، متخصص شوند.
- ذهنهای خلاقی که دانش اولیه از CSS خالص دارند.
تسلط به Flexbox و CSS Grid - راهنمای عملی مدرن
-
مقدمه 08:03
-
دیگر نیازی به استفاده از عناصر شناور نیست 03:31
-
Flexbox چیست؟ 04:03
-
مقایسه مقادیر display در آیتمهای جداگانه 14:09
-
مقایسه مقادیر display روی عنصر والد 05:45
-
درک flex-direction و دو محور اصلی 12:31
-
ویژگی flex-wrap با سطر و row-reverse 15:58
-
ویژگی flex-wrap با ستون 08:56
-
ویژگی flex-flow 04:02
-
ویژگی justify-content روی سطرها 19:08
-
ویژگی justify-content روی ستونها 15:53
-
استفاده از margin:auto برای جداسازی آیتمهای Flex 10:49
-
ویژگی align-items برای سطرها 18:17
-
ویژگی align-items برای ستونها 16:14
-
ویژگی align-items برای سطرها هنگامی که هر آیتم flex ارتفاع دارد 07:22
-
ویژگی align-content برای سطرها 18:30
-
ویژگی align-content برای ستونها 13:25
-
ویژگی gap برای سطرها 16:34
-
ویژگی gap برای ستونها 08:26
-
پروژه سطر Flexbox - دو ستون برابر در یک سطر 13:34
-
پروژه سطر Flexbox - سه ستون برابر در یک سطر 08:54
-
پروژه سطر Flexbox - چهار ستون برابر در یک سطر 13:05
-
پروژه سطر Flexbox - پنج ستون برابر در یک سطر 10:59
-
پروژه سطر Flexbox - ایجاد سطرهای جداگانه 13:53
-
پروژه سطر Flexbox - ایجاد پهناهای متغیر 18:04
-
پروژه سطر Flexbox - فاصله بین 07:30
-
پروژه سطر Flexbox - فاصله بین با پهناهای متغیر 05:09
-
پروژه سطر Flexbox - طراحی با پهنای محدود 22:17
-
گالری تصاویر سطر Flexbox 15:03
-
چالش ستون 1 03:49
-
پروژه ستون Flexbox - چالش 1 حل شد 13:18
-
چالش 1 - درج محتوا در پروژه طرحبندی ستون 13:42
-
واکنشگرا کردن محتوای داخل طرحبندی ستون 18:06
-
چالش ستون 2 02:42
-
پروژه ستون Flexbox - چالش 2 حل شد 08:46
-
چالش 2 - درج محتوا در پروژه طرحبندی ستون 14:46
-
واکنشگرا کردن محتوای داخل طرحبندی ستون 11:35
-
چالش ستون 3 02:34
-
پروژه ستون Flexbox - چالش 3 حل شد 13:10
-
چالش ستون 4 03:52
-
پروژه ستون Flexbox - چالش 4 حل شد 13:19
-
چالش ستون 5 02:11
-
پروژه ستون Flexbox - چالش 5 حل شد 07:52
-
چالش گالری تصاویر ستون 04:49
-
پروژه گالری تصاویر ستون Flexbox 11:08
-
تودرتوسازی آیتمهای Flex - سطرها 12:31
-
تودرتوسازی آیتمهای flex - ستونها 10:12
-
پروژه طرحبندی Flex - بخش 1 15:03
-
پروژه طرحبندی Flex - بخش 2 23:14
-
واکنشگرا کردن پروژه طرحبندی Flex 10:52
-
طرحبندی Masonry با flexbox - سه ستون 17:03
-
طرحبندی Masonry با flexbox - چهار ستون 16:17
-
طرحبندی Masonry با گپها 06:02
-
طرحبندی Masonry گالری تصاویر با flexbox 12:19
-
ویژگی order روی سطر - آیتمهای flex 14:56
-
ویژگی order روی ستون - آیتمهای flex 07:01
-
ویژگی flex-grow روی سطر - آیتمهای flex 12:39
-
ویژگی flex-grow روی ستون - آیتمهای flex 16:02
-
ویژگی flex-grow روی سطر و ستون پیچیده - آیتمهای flex 15:06
-
تناسب ویژگی flex-grow 11:21
-
ویژگی flex-shrink روی سطر با پهنای آیتمهای flex به صورت درصد 13:36
-
ویژگی flex-shrink روی سطر با پهنای آیتمهای flex به صورت پیکسل 08:53
-
ویژگی flex-basis 12:37
-
ویژگی shorthand Flex 12:58
-
ستونهای برابر با flex-basis 15:24
-
ستونهای ترکیبی با flex-basis متغیر 15:41
-
ویژگی align-self 19:59
-
وسط چین کردن عمودی و افقی آیتمهای Flex 12:59
-
طرحبندی وب Flex با استفاده از flex-grow 18:45
-
آشنایی با CSS Grid - بررسی display:grid 08:07
-
ویژگی grid-template-columns 11:22
-
ویژگی grid-template-rows 06:50
-
استفاده از واحدهای طولی (px ،em ،rem و غیره) و درصدها در اندازه مسیرها 11:14
-
درک درصدها در grid-template-rows 06:44
-
استفاده از auto و min-content و max-content و fit-content و ()fit-content 21:02
-
استفاده از واحد FR روی اندازه مسیرها 16:55
-
استفاده از تابع ()minmax روی اندازه مسیرها 13:45
-
استفاده از تابع ()repeat روی اندازه مسیرها 12:22
-
استفاده از auto-fit یا auto-fill روی اندازه مسیرها 12:53
-
استفاده از auto-fit یا auto-fill همراه با ()minmax روی اندازه مسیرها 10:35
-
ایجاد طرحبندی گرید واکنشگرا بدون استفاده از کوئری رسانه 21:33
-
ویژگیهای shorthand و grid-template در گرید 08:54
-
فاصلهها (Gutters) در طرحبندی گرید 05:05
-
تودرتوسازی گریدها - بخش 1 09:31
-
تودرتوسازی گریدها - بخش 2 06:09
-
گریدهای Implicit - بخش 1 15:19
-
گریدهای Implicit - بخش 2 06:16
-
ویژگی shorthand گرید همراه با گریدهای Implicit 15:08
-
طرحبندی واکنشگرا و گرید Implicit 09:40
-
ویژگی order 16:23
-
ویژگیهای grid-column-start و grid-column-end 14:50
-
ویژگی grid-auto-flow:dense 05:42
-
ویژگی shorthand گرید همراه با auto-flow:dense 07:42
-
ویژگیهای grid-row-start و grid-row-end 12:04
-
ترکیب و گسترش موقعیتهای آیتمهای گرید 18:34
-
کلمه کلیدی span روی سطرها و ستونها 11:48
-
پروژه گالری گرید 21:16
-
ویژگی shorthand grid-row و grid-column 10:42
-
ویژگی shorthand grid-area 13:55
-
واکنشگرا کردن طرحبندی با استفاده از unset و auto-fill و order 07:42
-
چالش طرحبندی سطر Flexbox 03:50
-
حل چالش طرحبندی سطر Flexbox 25:28
-
چالش طرحبندی ستون Flexbox 04:45
-
حل چالش طرحبندی ستون Flexbox 19:28
-
چالش تسک گرید - مقدمه 04:37
-
حل تسک گرید - بخش 1 26:29
-
حل تسک گرید - بخش 2 07:04
-
لایهبندی آیتمهای گرید ستون 10:03
-
لایهبندی آیتمهای گرید سطر 06:38
-
کاربردهای لایهبندی آیتمهای گرید 10:18
-
نامهای دلخواه خطوط گرید روی ستونها 13:09
-
نامهای دلخواه خطوط گرید روی سطرها 07:40
-
نامهای دلخواه خطوط گرید روی سطرها و ستونها 16:02
-
بیش از یک نام دلخواه خط گرید روی سطرها و ستونها 07:31
-
استفاده از تابع ()repeat همراه با نامهای دلخواه خطوط گرید 20:26
-
گریدهایی با همان نامهای دلخواه خطوط گرید 20:08
-
Grid-template-areas - بخش 1 09:55
-
Grid-template-areas - بخش 2 10:17
-
Grid-template-areas - بخش 3 06:49
-
واکنش گرا کردن grid-template-areas 09:55
-
استفاده از ویژگی shorthand در grid-template همراه با grid-template-areas 09:09
-
طرحبندی Masonry گرید - بخش 1 15:03
-
طرحبندی Masonry گرید - بخش 2 16:56
-
طرحبندی گالری Masonry گرید 09:08
-
سادهسازی طرحبندی Masonry گرید 25:46
-
ویژگی justify-items 09:38
-
ویژگی align-items 07:08
-
وسط چین کردن آیتمها و ویژگی shorthand place-items 05:57
-
ویژگی justify-content 07:41
-
ویژگی align-content 06:15
-
وسط چین کردن محتوا و ویژگی shorthand place-content 04:26
-
ویژگیهای Justify-self و Align-self و place-self 11:33
-
بازبینی طرحبندی Masonry گرید 13:09
-
طرحبندی گرید - بخش 1 15:30
-
طرحبندی Masonry سطر Flex - بخش 1 18:35
-
طرحبندی Masonry سطر Flex - بخش 2 20:38
-
چالش سطر Flex 02:17
-
حل چالش سطر Flex 20:58
-
طرحبندی Masonry گرید با استفاده از grid-auto-flow 21:10
-
چالش طرحبندی گرید 01:34
-
طرحبندی گرید - بخش 2 (حل چالش) 17:54
-
واکنشگرا کردن طرحبندی 17:30
-
چالش سطر Flex - بخش 1 16:31
-
چالش سطر Flex - بخش 2 22:39
-
چالش طرحبندی 06:31
-
طرحبندی گرید - بخش 3 (حل چالش) 17:09
-
واکنشگرا کردن طرحبندی 09:15
-
چالش طرحبندی Flex 24:47
-
واکنشگرا کردن طرحبندی 11:14
-
آشنایی با طرحبندی ناوبری Flexbox-Grid 03:54
-
طرحبندی اولیه ناوبری Flexbox-Grid 20:11
-
طرحبندی منوی کشویی Grid-Flexbox - بخش 1 12:58
-
طرحبندی منوی کشویی Grid-Flexbox - بخش 2 22:02
-
منوی فرعی کشویی Grid-Flexbox 22:16
-
واکنشگرا کردن نوار ناوبری - بخش 1 15:32
-
واکنشگرا کردن نوار ناوبری - بخش 2 18:54
-
واکنشگرا کردن نوار ناوبری - بخش 3 19:00
-
آشنایی با طرحبندی مگا منو Flexbox-Grid 10:50
-
طرحبندی مگا منو 18:06
-
واکنشگرا کردن مگا منو - بخش 1 21:39
-
واکنشگرا کردن مگا منو - بخش 2 12:18
-
واکنشگرا کردن مگا منو - بخش 3 11:16
-
واکنشگرا کردن مگا منو - بخش 4 08:22
-
ساختاردهی تصویر پسزمینه 07:47
-
اعمال Google Fonts 07:54
-
آشنایی با پروژه تجارت الکترونیک با Flexbox 07:52
-
ساختار اولیه پروژه وب 15:59
-
استایلدهی بخش تجارت الکترونیک - بخش 1 17:35
-
استایلدهی بخش تجارت الکترونیک - بخش 2 17:32
-
ایجاد طرحبندی HTML بخشهای دیگر 12:46
-
اتمام استایلدهی طرحبندی 18:29
-
واکنشگرا کردن پروژه - بخش 1 15:40
-
واکنشگرا کردن پروژه - بخش 2 08:12
-
طراحی همان پروژه با طرحبندی گرید 25:32
-
نکات نهایی - تفاوتهای بین گرید و Flex 09:18
مشخصات آموزش
تسلط به Flexbox و CSS Grid - راهنمای عملی مدرن
- تاریخ به روز رسانی: 1404/06/21
- سطح دوره:مقدماتی
- تعداد درس:175
- مدت زمان :36:45:42
- حجم :20.69GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
The Great Courses
2,495,000
499,000 تومان
- زمان: 06:19:16
- تعداد درس: 40
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
6,787,000
1,357,400 تومان
- زمان: 17:11:52
- تعداد درس: 113
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
8,360,500
1,672,100 تومان
- زمان: 21:10:47
- تعداد درس: 202
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
5,720,500
1,144,100 تومان
- زمان: 14:29:26
- تعداد درس: 36
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,206,500
841,300 تومان
- زمان: 10:39:08
- تعداد درس: 64
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,391,000
878,200 تومان
- زمان: 11:07:45
- تعداد درس: 63
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
7,261,000
1,452,200 تومان
- زمان: 18:23:18
- تعداد درس: 103
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:57:00
- تعداد درس: 20
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:41:00
- تعداد درس: 9
-
سطح دوره:
-
زبان: دوبله فارسی