آموزش دوره کامل Flexbox: Master CSS3 Flexbox for Good

Complete Flexbox Course: Master CSS3 Flexbox for Good

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: این آموزش به شما می آموزد که چگونه از مدل جدید جعبه CSS3 Flexbox برای ایجاد طرح بندی وب واکنش گرا به طور موثرتر استفاده کنید! استفاده از CSS Flexbox با اطمینان برای ایجاد طرح‌بندی‌های مدرن ایجاد طراحی‌های وب‌سایت مؤثرتر نوشتن کدهای CSS با کیفیت بالا و قابل استفاده مجدد به‌صورت عمودی هر عنصر را تراز کنید فضای باقی‌مانده در یک ظرف را اشغال کنید گالری‌های واکنش‌گرای زیبا با Flexbox پیاده‌سازی به اصطلاح Holy Grail Layout پیشها: HTML و CSS اولیه با استفاده از ویرایشگر کد

پس از این دوره، می‌توانید از Flexbox برای...

استفاده کنید
  • هر عنصر را به صورت عمودی تراز کنید

  • شبکه های مدرن ایجاد کنید

  • فضای باقیمانده را اشغال کنید

  • فاصله بین عناصر اضافه کنید

  • طرح بندی های کامل سایت را پیاده سازی کنید

  • و خیلی بیشتر!

موارد دیگر در این دوره:

  • به تمام سوالاتی که ممکن است در طول مسیر داشته باشید پاسخ خواهم داد تا مطمئن شوم به اهداف یادگیری خود می‌رسید

  • من شرح‌های دستی و با کیفیت بالا (CC) را به این دوره اضافه کرده‌ام

  • برای مشاهده عملی Flexbox، 3 پروژه کوچک مهارت های شما را آشکار می کند و به شما امکان می دهد از Flexbox به طور موثر در پروژه های طراحی وب آینده استفاده کنید.


آنچه دانش آموزان درباره من می گویند (برگرفته از دوره های مختلف من)

یک دوره عالی. دومی برای من با پیتر سامرهوف.
یک مربی بزرگ، از راه بسیار آسانی برای توضیح مطالب استفاده می کند.

- احمد


من کاملاً عاشق این دوره هستم، هر آنچه را که نیاز دارید را با جزئیات آموزش می دهد
و بیشتر! آنها واقعاً به صحبت‌های دانش‌آموزان خود گوش می‌دهند و به همان سرعت
دونده جاده پاسخ می‌دهند. از ارسال دوره خود بسیار سپاسگزارم و من مشتاقانه منتظر دوره های دیگر هستم!

- آنا


دوره عالی، پیتر آن را به طور کامل توضیح داد، و او در عرض یک روز به هر سوالی پاسخ می دهد.

- دونجا


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

- رابرت


خوشحالم که چنین نقدهای خوبی از دانش آموزانم دریافت کردم -- و تمام تلاشم را می کنم تا بهترین یادگیری را نیز برای شما ارائه دهم.


ویدیوهای پیش‌نمایش رایگان زیر را بررسی کنید.

من مشتاقانه منتظر دیدار شما در داخل هستم :)



***


در این آموزش، استفاده از هر ویژگی Flexbox را یاد خواهید گرفت:

ظرف‌های انعطاف‌پذیر:

  1. flex-direction

  2. justify-content

  3. تراز کردن آیتم ها

  4. flex-wrap

  5. align-content

سپس موارد منعطف جداگانه:

  1. سفارش

  2. تراز کردن خود

  3. flex-grow

  4. flex-shrink

  5. flex-bases

  6. فلکس

در پایان، نمونه‌های دنیای واقعی Flexbox را بررسی می‌کنیم تا ببینیم چه نوع طرح‌بندی‌هایی را می‌توان به دست آورد:

  1. شبکه‌های ساده با Flexbox که همه ستون‌ها در یک ردیف اندازه یکسان دارند

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

  3. مرکزیت عمودی برای تراز عمودی هر عنصر

  4. اشیاء رسانه، الگوی محبوب OOCSS

  5. طرح جام مقدس، طرح بندی کامل سایت با نوارهای کناری و پاورقی چسبنده


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

علاوه بر این، من کدی را برای یک ویترین نمایشی Flexbox اضافه کردم -- که مانند یک برگه تقلب تعاملی است که می‌توانید آن را در مرورگر مشاهده کنید که حاوی همه ویژگی‌ها و هر نمونه طرح‌بندی از این آموزش است.


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

به دوره Flexbox خوش آمدید! Welcome To The Flexbox Course!

  • چگونه از این دوره بهترین استفاده را ببریم How To Make The Most Of This Course

بیایید درست شیرجه بزنیم: اصول Flexbox را بیاموزید Let's Dive Right In: Learn The Flexbox Basics

  • Flexbox چیست و چرا باید از آن استفاده کنم؟ What is Flexbox and Why Should I Use It?

  • پشتیبانی مرورگر برای Flexbox چطور؟ What About Browser Support for Flexbox?

  • چگونه از Flexbox استفاده کنم؟ How Do I Use Flexbox?

  • اصول Flexbox Flexbox Principles

  • امتحان: اصول Flexbox Quiz: Flexbox Basics

یک ظاهر طراحی ظروف فلکس Styling Flex Containers

  • flex-direction - ایجاد طرح‌بندی ردیف و ستون flex-direction - Creating Row & Column Layouts

  • امتحان: جهت انعطاف پذیری Quiz: flex-direction

  • justify-content - توجیه اقلام در امتداد محور اصلی justify-content - Justifying Items Along the Main Axis

  • امتحان: توجیه محتوا Quiz: justify-content

  • align-item - تراز کردن اقلام در امتداد محور متقاطع align-items - Aligning Items Along the Cross Axis

  • امتحان: تراز کردن آیتم ها Quiz: align-items

  • flex-wrap - چند ردیف و بسته بندی در داخل ظروف فلکس flex-wrap - Multiple Rows & Wrapping Inside Flex Containers

  • امتحان: انعطاف پذیر Quiz: flex-wrap

  • align-content - توجیه محتوا در امتداد محور متقاطع align-content - Justifying Content Along the Cross Axis

  • امتحان: تراز کردن محتوا Quiz: align-content

طراحی اقلام فلکس Designing Flex Items

  • سفارش - مرتب سازی مجدد اقلام Flex order - Reordering Flex Items

  • تراز خود - کودکان سرسخت align-self - Stubborn Children

  • flex-grow - اجازه دهید کودکان رشد کنند flex-grow - Letting Children Grow

  • مسابقه: رشد انعطاف پذیر Quiz: flex-grow

  • flex-shrink - Shrinking Flex Items flex-shrink - Shrinking Flex Items

  • آزمون: انعطاف پذیر Quiz: flex-shrink

  • flex-basis - تنظیم اندازه پایه flex-basis - Setting the Base Size

  • آزمون: بر اساس انعطاف پذیری Quiz: flex-basis

Flexbox در عمل Flexbox in Practice

  • شبکه های فلکس باکس: ایجاد گالری های پاسخگو شماره 1 (کد حداقل) Flexbox Grids: Creating Responsive Galleries #1 (Minimal Code)

  • شبکه های فلکس باکس: ایجاد گالری های پاسخگو شماره 2 (انعطاف پذیری بیشتر) Flexbox Grids: Creating Responsive Galleries #2 (Extra Flexibility)

  • مرکزیت عمودی واقعی با Flexbox (دیگر تراز عمودی وجود ندارد) Real Vertical Centering with Flexbox (no more vertical-align)

  • الگوی شی رسانه The Media Object Pattern

  • طرح جام مقدس The Holy Grail Layout

  • برگه تقلب Flexbox Flexbox Cheat Sheet

از اینجا کجا بریم... Where to go from here...

  • یک جمع بندی سریع و چه چیزی بعد A Quick Recap & What's Next

  • امتیاز: به عنوان یک توسعه دهنده نرم افزار به پتانسیل کامل خود برسید Bonus: Reach Your Full Potential As A Software Developer

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

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

آموزش دوره کامل Flexbox: Master CSS3 Flexbox for Good
جزییات دوره
2 hours
23
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
11,502
4.5 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Peter Sommerhoff Peter Sommerhoff

توسعه دهنده و مهندس نرم افزار - با بیش از 45000 دانشجوی شاد