آموزش آن را تمرین کنید: CSS Layout

معرفی Introduction

• استفاده از GitHub Codespaces با این دوره Using GitHub Codespaces with this course

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

• ایجاد طرح‌بندی شبکه‌ای واکنش‌گرا Creating responsive grid layouts

1. مقدمه ای بر Grid Layouts 1. Introduction to Grid Layouts

• طراحی طرح شبکه ای Designing a grid layout

• بررسی کنید: یک طرح بندی شبکه ای اولیه ایجاد کنید Check it: Create a basic grid layout

• آن را امتحان کنید: یک طرح بندی شبکه ای اولیه ایجاد کنید Try it: Create a basic grid layout

• گرید در مقابل فلکس باکس Grid vs. Flexbox

• تعریف عناصر شبکه Defining grid elements

• کار با انتخابگرهای پیشرفته Working with advanced selectors

2. پاسخگو کردن 2. Making It Responsive

• استفاده از پرسش های رسانه ای Using media queries

• استفاده از رویکرد اول موبایل Using a mobile-first approach

• در دسترس قرار دادن آن Making it accessible

• بررسی کنید: طراحی شبکه پاسخگو Check it: Responsive grid design

• آن را امتحان کنید: طراحی شبکه پاسخگو Try it: Responsive grid design

• تغییر طرح Changing the layout

3. ایجاد یک طرح سه ستونی 3. Creating a Three-Column Layout

• طراحی یک چیدمان واکنشگرا با Flexbox Designing a responsive layout with Flexbox

• بررسی کنید: طراحی یک طرح سه ستونی با Grid Check it: Designing a three-column layout with Grid

• بررسی کنید: طراحی یک طرح بندی سه ستونی با Flexbox Check it: Designing a three-column layout with Flexbox

• آن را امتحان کنید: طراحی یک طرح با Flexbox و Grid Try it: Designing a layout with Flexbox and Grid

4. ایجاد یک طرح دوازده ستونی 4. Creating a Twelve-Column Layout

• بررسی کنید: طراحی یک چیدمان دوازده ستونی Check it: Designing a twelve-column layout

• طرح دوازده ستونی برای نمای های مختلف Twelve-column layout for different viewports

• آن را امتحان کنید: طراحی یک طرح دوازده ستونی Try it: Designing a twelve-column layout

• راه اندازی طرح بندی دوازده ستونی Twelve-column layout setup

نتیجه Conclusion

• مراحل بعدی: طرح‌بندی‌های پیشرفته و UX Next steps: Advanced layouts and UX