آموزش CSS: ترکیب Grid و Flexbox

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

معرفی Introduction

• طرح بندی وب سفارشی با Grid و Flexbox Custom web layouts with Grid and Flexbox

• استفاده از فایل های تمرینی Using the exercise files

• آنچه باید بدانید What you should know

• استفاده از ابزارهای توسعه Using development tools

1. فلکس چیست؟ 1. What Is Flex?

• Flexbox چیست؟ What is Flexbox?

• نحو Flexbox Flexbox syntax

• ویژگی های ظرف Flexbox Flexbox container properties

• ویژگی های مورد Flexbox Flexbox item properties

• استفاده از Flexbox: Challenge Using Flexbox: Challenge

• استفاده از Flexbox: راه حل Using Flexbox: Solution

2. گرید چیست؟ 2. What is Grid?

• گرید چیست؟ What is Grid?

• نحو شبکه ای Grid syntax

• Grid چگونه کار می کند؟ How does Grid work?

• ویژگی های ظرف شبکه Grid container properties

• ویژگی های مورد شبکه Grid item properties

• توابع و کلمات کلیدی Functions and keywords

• استفاده از Grid: Challenge Using Grid: Challenge

• استفاده از شبکه: راه حل Using Grid: Solution

3. ترکیب فناوری ها 3. Combining Technologies

• شبکه در مقابل Flexbox Grid vs. Flexbox

• ترکیب Flexbox و Grid Combining Flexbox and Grid

• تجزیه و تحلیل طرح بندی Analyzing a layout

• انتخاب راه حل مناسب برای کار Choosing the right solution for the job

• استفاده از Grid و Flexbox: Challenge Using Grid and Flexbox: Challenge

• استفاده از Grid و Flexbox: راه حل Using Grid and Flexbox: Solution

4. ایجاد یک صفحه وب با استفاده از Flexbox و Grid 4. Build a Webpage Using Flexbox and Grid

• نمای کلی پروژه Overview of the project

• سرصفحه صفحه وب با بخش قهرمان Webpage header with hero section

• یک منوی همبرگر برای تلفن همراه ایجاد کنید Create a hamburger menu for mobile

• یک منوی افقی برای رایانه های رومیزی ایجاد کنید Create a horizontal menu for desktops

• کارتهای وب ، قسمت 1 Web cards, part 1

• کارت های وب ، قسمت 2 Web cards, part 2

• خلاصه CTA CTA summaries

• بخش تیم برای تلفن همراه Team section for mobile

• بخش تیم برای رایانه های رومیزی Team section for desktops

• بخش مشکل Problem section

• اشیاء رسانه ای برای تلفن همراه Media objects for mobile

• اشیاء رسانه ای برای دسکتاپ Media objects for desktop

• گالری تصاویر Picture gallery

• پاورقی برای صفحه نمایش بزرگ Footer for large screen

• پاورقی برای صفحه نمایش بزرگ فوق العاده Footer for extra large screens

5. ایجاد یک فرم با استفاده از Flexbox و Grid 5. Build a Form Using Flexbox and Grid

• نمای کلی پروژه Overview of project

• فرم برای موبایل Form for mobile

• فرم برای دسکتاپ Form for desktops

6. پشتیبانی 6. Support

• سازگاری و منابع Compatibility and resources

• پرس و جوهای ویژگی Feature queries

نتیجه Conclusion

• مراحل بعدی Next steps