دوره آموزشی طرحبندیهای واکنشگرای پیشرفته با CSS Flexbox
1 ساعت 49 دقیقهپیشرفته2015-07-30
مدرسین

Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
جزئیات دوره
ماژول CSS Flexible Box Layout (معروف به Flexbox) یک راه حل ساده برای بسیاری از مشکلات طراحی و چیدمان که طراحان و توسعه دهندگان وب از زمان ظهور CSS با آن روبرو بوده اند ارائه می دهد. اکنون که ماژول در حال آماده شدن برای مرحله اصلی است، وقت آن است که ببینیم چه کاری می توانیم با آن انجام دهیم.
این دوره نحوه استفاده از جعبههای انعطافپذیر برای ایجاد طرحبندیهای واکنشگرای پیشرفته را نشان میدهد. Morten Rand-Hendriksen بیننده را به گشت و گذار در Flexbox می برد و قطعه کدهای عملی را ارائه می دهد که می توانند با خیال راحت در تقریباً هر وب سایتی پیاده سازی شوند. او همه اینها را در یک سایت جام مقدس با چیدمان مبتنی بر کارت، منوهای محتوای ترکیبی و اجزای تعاملی که به بازدیدکنندگان امکان انتخاب در مورد آنچه را که می بینند ارائه می دهد، قرار می دهد.
اهداف یادگیری
ایجاد منوهای مجهز به Flexbox
ساخت یک طرح کارت پاسخگو
علامت گذاری و طراحی طرح جام مقدس
تغییر نمایشگرها
نمایش و پنهان کردن نوار کناری
محتوای متحرک
این دوره نحوه استفاده از جعبههای انعطافپذیر برای ایجاد طرحبندیهای واکنشگرای پیشرفته را نشان میدهد. Morten Rand-Hendriksen بیننده را به گشت و گذار در Flexbox می برد و قطعه کدهای عملی را ارائه می دهد که می توانند با خیال راحت در تقریباً هر وب سایتی پیاده سازی شوند. او همه اینها را در یک سایت جام مقدس با چیدمان مبتنی بر کارت، منوهای محتوای ترکیبی و اجزای تعاملی که به بازدیدکنندگان امکان انتخاب در مورد آنچه را که می بینند ارائه می دهد، قرار می دهد.
اهداف یادگیری
ایجاد منوهای مجهز به Flexbox
ساخت یک طرح کارت پاسخگو
علامت گذاری و طراحی طرح جام مقدس
تغییر نمایشگرها
نمایش و پنهان کردن نوار کناری
محتوای متحرک
مهارت ها
Responsive Web DesignCSSWeb DesignFront-End Web DevelopmentProjectWeb DevelopmentOpen Source
سرفصل ها
0. مقدمه
- 01 - خوش آمدید
- 02 - نحوه استفاده از فایلهای تمرینی
1. Flexbox چیست
- 03 - فلکس باکس چیست
- 04 - هنگام استفاده از Flexbox امروز هشدار میدهد
2. منوهای Flexbox-Powered
- 05 - بررسی طرحبندیهای رایج منو
- 06 - علامت گذاری پنج نوع منو
- 07 - استفاده از Flexbox برای کنترل طرح منوی تک سطحی
- 08 - استفاده از Flexbox برای کنترل منوهای پیشرفته
- 09 - استفاده از Flexbox برای کنترل منوهای چند سطحی با کشویی
- 10 - ایجاد منوی شبکههای اجتماعی
- 11 - استفاده از Flexbox برای کنترل چندین منو
3. طرح بندی کارت پاسخگو
- 12 - چالش با چیدمان کارت
- 13 - علامت گذاری کارتهای معمولی
- 14 - استفاده از Flexbox برای ایجاد شبکه ای از کارت ها
- 15 - اضافه کردن نقاط شکست پاسخگو
- 16 - حل anchor مشترک مشکل کارت را پر نمی کند
4. طرح جام مقدس
- 17 - چیدمان جام مقدس چیست
- 18 - علامت گذاری طرح جام مقدس در HTML
- 19 - طراحی طرح جام مقدس با Flexbox
- 20 - تغییر طرح با Flexbox
5. تحویل کنترل به کاربر
- 21 - واگذاری کنترل به کاربر
- 22 - تعویض موقعیت نوار کناری
- 23 - تغییر از جام مقدس به نمایش عمودی
- 24 - مخفی کردن و نشان دادن نوار کناری
- 25 - محتوای متحرک
6. قرار دادن همه چیز با هم
- 26 - همه را کنار هم گذاشتن
مراحل بعدی
- 27 - ممنون
دوره های مرتبط
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
- دوره آموزشی ساخت وبسایتهای ریسپانسیو با استفاده از Canva
- دوره آموزشی ساخت وب سایت های واکنش گرا با Canva آپدیت (2022)
- دوره آموزشی سطح بالا: طرح بندی CSS
- دوره آموزشی کاتینگ اج CSS
- دوره آموزشی CSS: Combining Grid and Flexbox
- دوره آموزشی ساخت وب سایت های پویا با استفاده از AWS Lambdas
- دوره آموزشی چیدمان های CSS: از Float تا Flexbox و Grid