کانال تلگرام پشتیبانی تلگرام شماره تماس پشتیبانی: 0930 395 3766
ورود ثبت نام

آموزش تسلط بر فلکس‌باکس و گرید (دوره ۲ در ۱) - راهنمای آسان - آخرین آپدیت

دانلود Mastery of Flexbox and Grid (2 in 1 course) - Easy Guide

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

دوره جامع 2 در 1: تسلط بر Flexbox و Grid برای طراحی Layout وب واکنش‌گرا

با CSS Flexbox، CSS Grid و دانش عمیق CSS، طرح‌بندی‌های ریسپانسیو و حرفه‌ای برای فرانت‌اند وب بسازید.

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

  • ایجاد انواع طرح‌بندی‌ها با استفاده از CSS Grid و Flexbox.

  • ساخت طرح‌بندی‌های گرید با grid-template-areas.

  • ایجاد ستون‌ها و ردیف‌های مساوی و نامساوی با CSS Grid و Flexbox.

  • طراحی Layout مزونری (Masonry Layout) با Flex و Grid.

  • استفاده از واحد کسری (fr) در CSS Grid.

  • تسلط بر ایجاد طرح‌بندی‌های فلکس با flex-basis.

  • کار با گرید ضمنی (implicit grid) و گرید صریح (explicit grid).

  • استفاده از CSS Media Query برای طراحی ریسپانسیو و سازگار با موبایل (رویکرد موبایل-اول).

  • ساخت گالری تصاویر و ویدئو با CSS Grid و Flexbox.

  • تراز کردن و توزیع آیتم‌های گرید و فلکس.

  • تفاوت بین auto-fill و auto-fit در Grid.

  • استفاده از نام‌گذاری دلخواه خطوط گرید در Grid.

  • یادگیری گام به گام تمامی خصوصیات Flexbox و تمامی خصوصیات Grid.

  • خلاقیت در ساخت طرح‌بندی‌های مشابه با استفاده از Flexbox و Grid.

  • ایجاد منوهای ناوبری و مگا منوها، شامل افزودن تصاویر و ویدئو به آن‌ها.

  • وارد کردن فونت‌های Font Awesome و Google Fonts برای غنی‌سازی طراحی.

  • کاربرد خصوصیات مهم CSS مانند margin، padding، position و border در طرح‌بندی.

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

نظرات شرکت‌کنندگان درباره این دوره:

"احساس رضایت کامل دارم." - گانا ک.

"دوره شگفت‌انگیز فلکس و گرید." - یوسف د.

"این یک دوره مهم برای من بود، زیرا دوره‌های HTML دیگری گذرانده بودم، اما نحوه ایجاد صحیح طرح‌بندی وب‌سایت را یاد نگرفته بودم. یادگیری فونت‌ها، تصاویر و لینک‌ها چه فایده‌ای دارد اگر نتوانید یک صفحه وب واکنش‌گرا طراحی کنید؟ به هر کسی که HTML یاد می‌گیرد توصیه می‌کنم این را اولین دوره خود قرار دهد. من با اطمینان به مسیر یادگیری خود ادامه می‌دهم." - تیم ا.

پیش‌نیازها:

  • یک ویرایشگر متن پایه (مانند Sublime Text، Visual Studio Code، Brackets).
  • درک اصول کدنویسی با HTML و CSS پایه.
سرفصل ها و درس ها

مقدمه Introduction

  • مقدمه - ۱ Introduction - 1

  • مقدمه - ۲ Introduction -2

  • دیگر نیازی به آیتم‌های شناور نیست No more need of floating items

=== خوش آمدید به بخش فلکس‌باکس === === Welcome to Flexbox Section ===

  • فلکس‌باکس چیست What is Flexbox

  • مقایسه مقادیر display روی آیتم‌های فرزند منفرد Comparing the display values on individual child items

  • مقایسه مقادیر display روی والد Comparing the display values on the parent

ویژگی‌های فلکس‌باکس والد (کانتینر) Flexbox Properties of the parent (container)

  • درک flex-direction و دو محور اصلی Understanding flex-direction and the two main axis

  • Flex-wrap با row و row-reverse Flex-wrap with row and row-reverse

  • راهنمای منابع Guide to the resources

  • Flex-wrap با column Flex-wrap with column

  • ویژگی flex-flow Flex-flow property

  • Justify-content در ردیف‌ها Justify-content on rows

  • Justify-content در ستون‌ها Justify-content on column

  • استفاده از margin:auto برای جدا کردن آیتم‌های فلکس Using margin:auto to separate flex items

  • ویژگی align-items برای ردیف‌ها Align-items property for rows

  • ویژگی align-items برای ستون‌ها Align-items property for column

  • Align-items برای یک ردیف زمانی که هر آیتم فلکس ارتفاع دارد Align-items for a row when each flex item has a height

  • Align-content برای ردیف‌ها Align-content for rows

  • Align-content برای ستون‌ها Align-content for column

فاصله فلکس Flex Gap

  • ویژگی gap برای ردیف Gap property for row

  • ویژگی gap برای ستون Gap property for column

پروژه‌های چیدمان فلکس‌باکس (با ردیف) Flexbox Layout Projects (With Row)

  • پروژه ردیف فلکس‌باکس - ۲ ستون مساوی در یک ردیف Flexbox Row Project - 2 equal columns in one row

  • پروژه ردیف فلکس‌باکس - ۳ ستون مساوی در یک ردیف Flexbox Row Project - 3 equal columns in one row

  • پروژه ردیف فلکس‌باکس - ۱ و ۴ ستون مساوی در یک ردیف Flexbox Row Project - 1 and 4 equal columns in one row

  • پروژه ردیف فلکس‌باکس - ۵ ستون مساوی در یک ردیف Flexbox Row Project - 5 equal columns in one row

  • پروژه ردیف فلکس‌باکس - ایجاد ردیف‌های جداگانه Flexbox Row Project - creating separate rows

  • پروژه ردیف فلکس‌باکس - ایجاد عرض‌های متغیر Flexbox Row Project - creating varying widths

  • پروژه ردیف فلکس‌باکس - فاصله بین Flexbox Row Project - space between

  • پروژه ردیف فلکس‌باکس - فاصله بین با عرض‌های متغیر Flexbox Row Project - space between with varying widths

  • پروژه ردیف فلکس‌باکس - طراحی عرض محدود Flexbox Row Project - restricted width design

  • گالری تصاویر فلکس‌باکس ردیف Flexbox Row Image gallery

آیتم‌های فلکس تودرتو Nesting Flex Items

  • آیتم‌های فلکس تودرتو - ردیف‌ها Nesting flex items - rows

  • آیتم‌های فلکس تودرتو - ستون‌ها Nesting flex items - columns

یک پروژه چیدمان فلکس A Flex Layout Project

  • پروژه چیدمان فلکس - بخش ۱ Flex Layout Project - part 1

  • پروژه چیدمان فلکس - بخش ۲ Flex Layout Project - part 2

  • پاسخگویی پروژه چیدمان فلکس Responsiveness of Flex Layout Project

چیدمان مزونری با فلکس‌باکس Masonry Layout with flexbox

  • چیدمان مزونری با فلکس‌باکس - ۳ ستون Masonry Layout with flexbox - 3 Columns

  • چیدمان مزونری با فلکس‌باکس - ۴ ستون Masonry Layout with flexbox - 4 Columns

  • چیدمان مزونری با فاصله‌ها Masonry Layout with gaps

  • گالری تصاویر چیدمان مزونری با فلکس‌باکس Image Gallery Masonry layout with flexbox

ویژگی‌های فلکس‌باکس آیتم‌های فلکس (عنصر فرزند) Flexbox Properties of the flex items (child element)

  • ویژگی Order در ردیف - آیتم‌های فلکس Order Property on Row - flex items

  • ویژگی Order در ستون - آیتم‌های فلکس Order Property on Column - flex items

  • ویژگی flex-grow در ردیف - آیتم‌های فلکس Flex-grow property on row - flex items

  • ویژگی flex-grow در ستون - آیتم‌های فلکس Flex-grow property on column - flex items

  • ویژگی flex-grow در ردیف و ستون پیچیده شده - آیتم‌های فلکس Flex-grow property on wrapped row and column - flex items

  • تناسب flex-grow Proportionality of flex-grow

  • ویژگی flex-shrink در ردیف با درصد به عنوان عرض آیتم‌های فلکس Flex-shrink Property on Row with % as flex-items width

  • ویژگی flex-shrink در ردیف با پیکسل به عنوان عرض آیتم‌های فلکس Flex-shrink Property on Row with pixels as flex-items width

  • ویژگی flex-basis Flex-basis property

  • ویژگی خلاصه flex Flex shorthand property

  • ستون‌های مساوی با flex basis Equal columns with flex basis

  • ستون‌های ترکیبی با flex basis متغیر Mixed columns with varying flex basis

  • ویژگی align-self Align-self property

  • مرکزیت عمودی و افقی آیتم‌های فلکس Centering Flex Items Vertically and Horizontally

  • چیدمان وب فلکس با flex grow A web Flex layout with flex grow

=== خوش آمدید به بخش CSS Grid === === Welcome to CSS Grid Section ===

  • مقدمه ای بر CSS Grid - display:grid Introduction To CSS Grid - display:grid

گرید صریح (کانتینر گرید) Explicit Grid (Grid Container)

  • Grid-template-columns Grid-template-columns

  • Grid-template-rows Grid-template-rows

تعیین اندازه‌های ترک گرید Determining the grid track sizes

  • استفاده از واحدهای طول (px، em، rem و غیره) و درصد در اندازه‌های ترک Using length units (px, em, rem, etc) and percentages on track sizes

  • درک درصدها با grid-template-rows Understanding percentages with grid-template-rows

  • استفاده از auto، min-content، max-content، fit-content، fit-content() Using auto, min-content, max-content, fit-content, fit-content()

  • استفاده از واحد FR در اندازه‌های ترک Using the FR unit on track sizes

  • استفاده از تابع minmax() در اندازه‌های ترک Using the minmax() function on track sizes

  • استفاده از تابع repeat() در اندازه‌های ترک Using the repeat() function on track sizes

Auto-fill در مقابل Auto-fit Auto-fill versus Auto-fit

  • استفاده از auto-fit یا auto-fill در اندازه‌های ترک Using auto-fit or auto-fill on track sizes

  • استفاده از auto-fit یا auto-fill با minmax() در اندازه‌های ترک Using auto-fit or auto-fill with minmax() on track sizes

  • ایجاد چیدمان گرید پاسخگو بدون مدیا کوئری Creating a Responsive Grid Layout without media query

grid-template و خلاصه grid grid-template and grid shorthand

  • ویژگی‌های grid-template و خلاصه grid grid-template and grid shorthand properties

فاصله گرید Grid gap

  • فاصله‌ها (Gutters) در چیدمان گرید Gaps (Gutters) in grid layout

چیدمان گرید تودرتو Nesting Grid layout

  • گریدهای تودرتو - بخش ۱ Nesting Grids - part 1

  • گریدهای تودرتو - بخش ۲ Nesting Grids - part 2

گرید ضمنی (کانتینر گرید) Implicit Grid (Grid Container)

  • گریدهای ضمنی - بخش ۱ Implicit Grids - part 1

  • گریدهای ضمنی - بخش ۲ Implicit Grids - part 2

  • ویژگی خلاصه گرید با گریدهای ضمنی Grid shorthand property with implicit grids

  • چیدمان پاسخگو و گرید ضمنی Responsive layout and implicit grid

ترتیب دهی آیتم‌های گرید Ordering Grid items

  • ویژگی Order Order property

موقعیت دهی آیتم‌های گرید Positioning of Grid Items

  • grid-column-start/grid-column-end grid-column-start/grid-column-end

  • grid-auto-flow:dense grid-auto-flow:dense

  • خلاصه گرید با auto-flow dense grid shorthand with auto-flow dense

  • grid-row-start/grid-row-end grid-row-start/grid-row-end

  • ترکیب و گسترش موقعیت‌های آیتم‌های گرید Combining and spanning the positions of grid items

  • کلمه کلیدی Span در ردیف‌ها و ستون‌ها Span keyword on rows and columns

  • پروژه گالری گرید Grid Gallery Project

  • ویژگی خلاصه grid-row و grid-column Grid-row and grid-column shorthand property

  • ویژگی خلاصه grid-area grid-area shorthand property

  • پاسخگو کردن چیدمان با unset و auto-fill و order Making the layout responsive with unset and auto-fill and order

  • چالش چیدمان ردیف فلکس‌باکس Flexbox Row Layout Challenge

  • چالش چیدمان ردیف فلکس‌باکس حل شده Flexbox Row Layout challenge solved

  • چالش چیدمان ستون فلکس‌باکس Flexbox Column Layout Challenge

  • چالش چیدمان ستون فلکس‌باکس حل شده Flexbox Column Layout challenge solved

  • مقدمه چالش وظیفه گرید A Grid Task Challenge - Introduction

  • وظیفه گرید حل شده - بخش ۱ A Grid Task Solved - Part 1

  • وظیفه گرید حل شده - بخش ۲ A Grid Task Solved - Part 2

لایه‌بندی آیتم‌های گرید Layering Grid Items

  • لایه‌بندی آیتم‌های گرید ستونی Layering Column Grid Items

  • لایه‌بندی آیتم‌های گرید ردیفی Layering Row Grid Items

  • کاربرد لایه‌بندی آیتم‌های گرید Applications of Layering Grid Items

نام‌گذاری خطوط گرید دلخواه Arbitrary Grid Line Names

  • نام‌گذاری خطوط گرید دلخواه در ستون‌ها Arbitrary grid Line Names on Columns

  • نام‌گذاری خطوط گرید دلخواه در ردیف‌ها Arbitrary grid Line Names on Rows

  • نام‌گذاری خطوط گرید دلخواه در ردیف‌ها و ستون‌ها Arbitrary grid Line Names on Rows and Columns

  • بیش از یک نام‌گذاری خطوط گرید دلخواه در ردیف‌ها و ستون‌ها More than one Arbitrary grid Line Names on Rows and Columns

  • استفاده از تابع repeat() با نام‌گذاری خطوط گرید دلخواه Using repeat( ) function with Arbitrary grid Line Names

  • گریدهای با نام‌های خطوط گرید دلخواه یکسان Grids with the SAME arbitrary grid line names

Grid-Template-Areas Grid-Template-Areas

  • Grid-template-areas (بخش ۱) Grid-template-areas (Part 1)

  • Grid-template-areas (بخش ۲) Grid-template-areas (Part 2)

  • Grid-template-areas (بخش ۳) Grid-template-areas (Part 3)

  • پاسخگویی grid-template-areas Responsiveness of grid-template-areas

  • استفاده از خلاصه Grid-template با grid-template-areas Using Grid-template shorthand with grid-template-areas

چیدمان مزونری با گرید Masonry Layout with Grid

  • چیدمان مزونری گرید - بخش ۱ Grid Masonry Layout - Part 1

  • چیدمان مزونری گرید - بخش ۲ Grid Masonry Layout - Part 2

  • چیدمان گالری مزونری گرید Grid Masonry Gallery Layout

  • چیدمان مزونری گرید ساده شده Grid Masonry Layout Simplified

توجیه و هم‌ترازی آیتم‌های گرید Justifying and Aligning Grid Items

  • Justify-items Justify-items

  • Align-items Align-items

  • موقعیت‌دهی آیتم‌ها به مرکز و خلاصه place-items Position Items to center and place-items shorthand

  • Justify-content Justify-content

  • Align-Content Align-Content

  • موقعیت‌دهی محتوا به مرکز و خلاصه place-content Position Contents to center and place-content shorthand

  • Justify-self/ Align-self/ place-self Justify-self/ Align-self/ place-self

پروژه‌های چیدمان بیشتر گرید و فلکس More Grid and Flex Layout Projects

  • مرور مجدد مزونری گرید Grid Masonry Revisited

  • چیدمان گرید - ۱ A Grid Layout - 1

  • مزونری ردیف فلکس - بخش ۱ Flex Row Masonry - Part 1

  • مزونری ردیف فلکس - بخش ۲ Flex Row Masonry - Part 2

  • یک چالش ردیف فلکس A Flex Row challenge

  • چالش ردیف فلکس حل شده Flex Row Challenge solved

  • مزونری گرید با grid-auto-flow Grid Masonry with grid-auto-flow

  • چالش چیدمان گرید Grid layout challenge

  • چیدمان گرید - ۲ (چالش حل شده) A Grid Layout - 2 (challenge solved)

  • پاسخگویی چیدمان Responsiveness of layout

  • چالش ردیف فلکس - بخش ۱ A Flex Row Challenge - Part 1

  • چالش ردیف فلکس - بخش ۲ A Flex Row Challenge - Part 2

  • یک چالش چیدمان A layout challenge

  • چیدمان گرید - ۳ (چالش حل شده) A Grid Layout - 3 (challenge solved)

  • پاسخگویی چیدمان Responsiveness of layout

  • یک چالش چیدمان فلکس A Flex Layout Challenge

  • پاسخگویی چیدمان Responsiveness of layout

ساخت چیدمان ناوبری با گرید و چیدمان فلکس Building Navigation Layout with Grid and Flex layout

  • مقدمه چیدمان ناوبری فلکس‌باکس-گرید Introduction to Flexbox-Grid Navigation Layout

  • چیدمان ناوبری پایه فلکس‌باکس-گرید Basic Flexbox-Grid Navigation Layout

  • چیدمان منوی کشویی گرید-فلکس‌باکس - بخش ۱ Grid-Flexbox Drop Down Menu Layout - part 1

  • چیدمان منوی کشویی گرید-فلکس‌باکس - بخش ۲ Grid-Flexbox Drop Down Menu Layout - part 2

  • منوی کشویی زیرمجموعه گرید-فلکس‌باکس Grid-Flexbox Sub-menu drop down

  • پاسخگویی نوار ناوبری - بخش ۱ Responsiveness of the navigation bar - part 1

  • پاسخگویی نوار ناوبری - بخش ۲ Responsiveness of the navigation bar - part 2

  • پاسخگویی نوار ناوبری - بخش ۳ Responsiveness of the navigation bar - part 3

  • مقدمه چیدمان مگا منوی فلکس‌باکس-گرید Introduction to Flexbox-Grid Mega Menu Layout

  • چیدمان مگا منو Mega Menu Layout

  • پاسخگویی مگا منو - بخش ۱ Responsiveness of the Mega Menu - Part 1

  • پاسخگویی مگا منو - بخش ۲ Responsiveness of the Mega Menu - Part 2

  • پاسخگویی مگا منو - بخش ۳ Responsiveness of the Mega Menu - Part 3

  • پاسخگویی مگا منو - بخش ۴ Responsiveness of the Mega Menu - Part 4

  • ساختار تصویر پس‌زمینه Structuring the background image

  • اعمال فونت‌های گوگل Applying Google Fonts

پروژه نهایی چیدمان وب Final Web Layout Project

  • مقدمه پروژه تجارت الکترونیک فلکس‌باکس Introduction to the Flexbox Ecommerce Project

  • ساختار پایه پروژه وب Basic structuring of the Web Project

  • استایل‌دهی بخش تجارت الکترونیک - بخش ۱ Styling the Ecommerce Section - Part 1

  • استایل‌دهی بخش تجارت الکترونیک - بخش ۲ Styling the Ecommerce Section - Part 2

  • ایجاد چیدمان HTML برای سایر بخش‌ها Creating the HTML layout of the other sections

  • پایان استایل‌دهی چیدمان Finish Styling the Layout

  • پاسخگویی پروژه - بخش ۱ Responsiveness of the project - part 1

  • پاسخگویی پروژه - بخش ۲ Responsiveness of the project - part 2

  • طراحی همین پروژه با چیدمان گرید Designing the same project with Grid Layout

  • نکات نهایی Final Notes

آموزش سبک زندگی مینیمالیستی - دوره کامل - زندگی بی نظم

آموزش سبک زندگی مینیمالیستی - دوره کامل - زندگی بی نظم

Minimalist Lifestyle - Complete Course - Decluttering Life

آموزش دوره ضروری لایت روم برای مبتدی تا پیشرفته

آموزش دوره ضروری لایت روم برای مبتدی تا پیشرفته

Essential Lightroom Course for Beginner to Advanced

آموزش CSS: صفحه آرایش (2012)

آموزش CSS: صفحه آرایش (2012)

CSS: Page Layouts (2012)

نمایش نظرات

آموزش تسلط بر فلکس‌باکس و گرید (دوره ۲ در ۱) - راهنمای آسان
جزییات دوره
34.5 hours
161
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
213
4.4 از 5
دارد
دارد
دارد
Pamch Tutor

https://donyad.com/d/a7620f

جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Pamch Tutor Pamch Tutor

تکنسین آموزشی