دوره آموزشی طرحبندیهای واکنشگرای پیشرفته با 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: نکات و روشهای طراحی و چینش صفحه
- دوره آموزشی یادگیری اصولی CSS
- دوره آموزشی چیدمان های CSS: از Float تا Flexbox و Grid
- دوره آموزشی متغیرها و چیدمان های سیال در CSS
- دوره آموزشی CSS: Combining Grid and Flexbox
- دوره آموزشی یادگیری جامع بوت استرپ 5
- دوره آموزشی CSS: فریمورکها و شبکه ها
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
مسیرهای مرتبط
- مسیر آموزشی یادگیری جامع CSS
- مسیر آموزشی تبدیل شدن به یک طراح وب
- مسیر آموزشی کشف مسیر شغلی به عنوان توسعهدهنده وب
- مسیر آموزشی تبدیل شدن به یک توسعه دهنده Full-Stack وب
- مسیر آموزشی کاوش شغلی در توسعه وب فرانت اند
- مسیر آموزشی تبدیل شدن به یک توسعه دهنده نرم افزار
- مسیر آموزشی ارتقا دادن مهارت های خود در HTML
- مسیر آموزشی ارتقا مهارت های خود را به عنوان یک متخصص زبان برنامه نویسی R