CSS: ترکیب Grid و Flexbox

مدرس Emily Kay

انتشار 2021/08/04

مدت زمان 3h 50m

سطح مناسب همه

فایل تمرینی دارد

آموزش CSS: Combining Grid and Flexbox

با Grid و Flexbox، CSS به طور چشمگیری در حال تغییر است. در حالی که در گذشته، ایجاد طرح‌بندی‌های پیچیده به انواع هک‌های CSS، جاوا اسکریپت یا هر دو نیاز داشت، اکنون می‌توانید از Flexbox و Grid (ابزارهایی که به‌طور خاص برای طرح‌بندی طراحی شده‌اند) برای ایجاد صفحات وب واکنش‌گرا با طرح‌بندی‌های دقیق و سفارشی استفاده کنید. در این دوره آموزشی، امیلی کی اصول اولیه Flexbox و Grid را به طور جداگانه پوشش می دهد، از syntaxes گرفته تا خواص و نحوه عملکرد آنها به طور کلی. پس از آن، او مواردی را توضیح می دهد که ممکن است لازم باشد از هر دو برای انجام اهداف طرح بندی خود استفاده کنید. همانطور که امیلی نشان می دهد، وقتی از Flexbox و Grid با هم برای ترکیب نقاط قوت مجزای آنها استفاده می کنید، می توانید محتوای وب پیچیده را به روشی زیبا و کاربرپسند ایجاد و نمایش دهید.

CSS Flexbox CSS Grid Layout

Introduction

Custom web layouts with Grid and Flexbox ()

Using the exercise files ()

What you should know ()

Using development tools ()

1. What Is Flex?

What is Flexbox? ()

Flexbox syntax ()

Flexbox container properties ()

Flexbox item properties ()

Using Flexbox: Challenge ()

Using Flexbox: Solution ()

2. What is Grid?

What is Grid? ()

Grid syntax ()

How does Grid work? ()

Grid container properties ()

Grid item properties ()

Functions and keywords ()

Using Grid: Challenge ()

Using Grid: Solution ()

3. Combining Technologies

Grid vs. Flexbox ()

Combining Flexbox and Grid ()

Analyzing a layout ()

Choosing the right solution for the job ()

Using Grid and Flexbox: Challenge ()

Using Grid and Flexbox: Solution ()

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 ()

Web cards, part 1 ()

Web cards, part 2 ()

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. Build a Form Using Flexbox and Grid

Overview of project ()

Form for mobile ()

Form for desktops ()

6. Support

Compatibility and resources ()

Feature queries ()

Conclusion

Next steps ()

Ex_Files_CSS_Combining_Grid_and_Flexbox.zip (122.0 MB)

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

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