آموزش CSS: چیدمان های پیشرفته با Grid

مقدمه Introduction

• خوش آمدی Welcome

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

• پیش نیازها Prerequisites

1. شبکه CSS: اصول اصلی 1. CSS Grid: Core Principles

• واژه شناسی Terminology

• شبکه را تعریف کنید Define a grid

• خطوط و واحدهای شبکه Grid lines and units

• قرار دادن موردی از شبکه خودکار Automatic grid item placement

• قرار دادن مورد دستی شبکه Manual grid item placement

• خطوط نامگذاری شده Named lines

• مناطق شبکه Grid areas

• شکاف شبکه Grid gap

2. برنامه ریزی برای طرح بندی شبکه 2. Planning for Grid Layouts

• CSS Grid به معنای تجدید نظر در طرح بندی وب است CSS Grid means rethinking web layouts

• طرح بندی های خود را با قلم و کاغذ شروع کنید Start your layouts with pen and paper

• یک رویکرد جدید برای سازگاری با عقب A new approach to backward compatibility

• ابتدا قابلیت دسترسی Accessibility first

3. چیدمان چند ستونی 3. Multi-Column Layout

• چالش The challenge

• برای پشتیبانی از شبکه بررسی کنید Check for grid support

• شبکه اصلی ایجاد کنید Create the main grid

• ستون سوم را برای بازدیدهای گسترده تر اضافه کنید Add a third column for wider viewports

• شکستن شبکه Breaking the grid

• شبکه داخل ظرف شبکه را توجیه کنید Justify the grid inside the grid container

• برای انجام جادو از فضای سفید استفاده کنید Use white space to perform magic

4. چیدمان ستون کامل پر خون 4. Full-Bleed Single Column Layout

• چالش The challenge

• بررسی اجمالی از نقطه شروع Overview of the starting point

• بررسی اجمالی از نقطه شروع Overview of the starting point

• برای پشتیبانی از شبکه بررسی کنید Check for grid support

• شبکه اشتراکی ایجاد کنید Create the shared grid

• ستون ها و آیتم های شبکه موقعیتی ایجاد کنید Create columns and position grid items

• شبکه را پاسخگو کنید Make the grid responsive

5. طرح بندی کارت های مختلف 5. Various Card Layouts

• چالش The challenge

• مروری بر نشانه گذاری کارت مبتنی بر متن Overview of text-based card markup

• برای هر کارت شبکه ایجاد کنید Create a grid for each card

• موارد موجود در شبکه Position items on the grid

• موارد موجود در شبکه Position items on the grid

• کارت ها را روی یک شبکه قرار دهید Place the cards on a grid

• مروری بر نشانه گذاری کارت مبتنی بر تصویر Overview of image-based card markup

• استفاده از شبکه برای انباشت موارد شبکه Using the grid to stack grid items

• ظاهر کارتها را با flex تغییر دهید Change the appearance of cards with flex

• شبکه های مختلف را ایجاد کنید Create different-sized grid items

• شبکه پیچیده ای به سبک مجله ایجاد کنید Create a complex magazine-style grid

6. چیدمانهای ناوبری خارج از صفحه قابل دسترسی 6. Accessible Off-Screen Navigation Layouts

• گزینه های مختلف ناوبری خارج از صفحه Different off-screen navigation options

• خارج از صفحه برای پوشاندن نمای کلی از ناوبری Off-screen to cover navigation overview

• شبکه اصلی را تنظیم کنید Set up the main grid

• قسمت ناوبری را در شبکه قرار دهید Position the navigation area on the grid

• ناوبری را از بوم مخفی کنید Hide the navigation area off canvas

• با استفاده از JavaScript جلوه افشاگری ایجاد کنید Create a reveal effect using JavaScript

• دسترسی به ناوبری خارج از صفحه را بهبود بخشید Improve accessibility of off-screen navigation

• نمای کلی پانل ناوبری کشویی Overview of sliding navigation panel

• یک شبکه سرریز ایجاد کنید Create an overflowing grid

• محتوای داخل و خارج بوم را بکشید Slide content in and out of the canvas

• پاداش: اثر کشویی را تحریک کنید Bonus: Animate the sliding effect

7. فصل پاداش: از مربی سؤال کنید 7. Bonus Chapter: Ask the Instructor

• تصاویر پاسخگو چیست؟ What are responsive images?

• اکنون که CSS Grid داریم ، آیا هنوز هم باید Flexbox یاد بگیرم؟ Now that we have CSS Grid, do I still need to learn Flexbox?

• خصوصیات سفارشی CSS (متغیرها) چیست؟ What are CSS custom properties (variables)?

• عملکرد کال () چگونه کار می کند؟ How does the calc() function work?

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

متشکرم Thank You

• نتیجه Conclusion