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

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

معرفی Introduction

• به دوره CSS Grids خوش آمدید! Welcome to the CSS Grids Course!

• کارهایی که بعد از این دوره می توانید انجام دهید What You'll Be Able to do After this Course

مقدمه ای بر CSS Grid Layouts Intro to CSS Grid Layouts

• CSS Grid چیست؟ What is CSS Grid?

• پشتیبانی مرورگر Browser Support

• راه اندازی سریع و آسان Quick & Easy Set-Up

• اصطلاحات شبکه CSS CSS Grid Terminology

تعریف و استفاده از شبکه های CSS Defining and Using CSS Grids

• مقدمه Intro

• فعال کردن CSS Grid با display: grid Enabling CSS Grid with display: grid

• تعریف گرید: گرید-الگو- ردیف ها و شبکه-الگو-ستون ها Defining the Grid: grid-template-rows & grid-template-columns

• مرتب کردن موارد شبکه: grid-row-start/end & grid-column-start/end Arranging Grid Items: grid-row-start/end & grid-column-start/end

• شامل تعداد ثابتی از سطرها یا ستون ها: دهانه Spanning a Fixed Number of Rows or Columns: span

• نامگذاری خطوط شبکه Naming Grid Lines

• تعریف ناودان ها: شکاف شبکه-ردیف و شکاف شبکه-ستون Defining Gutters: grid-row-gap & grid-column-gap

• منبع- نظم استقلال: سفارش Source-Order Independence: order

• برگه تمرین 1: آنچه را که یاد گرفتید به کار ببرید! Exercise Sheet 1: Apply What You Learned!

با استفاده از مناطق شبکه، اندازه های مساوی، تکرار() و minmax() Using Grid Areas, Equal Sizes, repeat() & minmax()

• مقدمه Intro

• استفاده از Grid Areas: grid-area Using Grid Areas: grid-area

• استفاده از Grid Areas: grid-template-area Using Grid Areas: grid-template-area

• تکرار سطرها و ستون ها: repeat() Repeating Rows and Columns: repeat()

• واحد fr The fr Unit

• تعریف حداقل و حداکثر اندازه: minmax() Defining Minimum and Maximum Sizes: minmax()

• پر کردن خودکار یک شبکه با سطرها و ستون ها: تکرار (پر کردن خودکار) Auto-Filling a Grid with Rows and Columns: repeat(auto-fill)

• تکرار (تناسب خودکار) repeat(auto-fit)

• برگه تمرین 2: آنچه را که یاد گرفتید به کار ببرید! Exercise Sheet 2: Apply What You Learned!

توجیه کانتینر و موارد گرید Justifying the Grid Container and Grid Items

• مقدمه Intro

• Justifying Items Horizontally: justify-items Justifying Items Horizontally: justify-items

• تراز کردن آیتم ها به صورت عمودی: تراز کردن آیتم ها Aligning Items Vertically: align-items

• Justifying the Container: justify-content Justifying the Container: justify-content

• Aligning the Container: align-content Aligning the Container: align-content

• ترازهای برتر: خود را توجیه کنید و خود را تراز کنید Overriding Alignments: justify-self & align-self

• برگه تمرین 3: آنچه را که یاد گرفتید به کار ببرید! Exercise Sheet 3: Apply What You Learned!

شبکه ضمنی و جریان شبکه The Implicit Grid and Grid Flow

• مقدمه Intro

• شبکه ضمنی: ردیف‌های خودکار شبکه‌ای و ستون‌های شبکه‌ای خودکار The Implicit Grid: grid-auto-rows & grid-auto-columns

• جریان برای شبکه ضمنی: جریان خودکار شبکه Flow for the Implicit Grid: grid-auto-flow

• اختصار هنگام استفاده از "شبکه" Shorthand When Using "grid"

• برگه تمرین 4: آنچه را که یاد گرفتید به کار ببرید! Exercise Sheet 4: Apply What You Learned!

شبکه های CSS پیشرفته Advanced CSS Grids

• مقدمه Intro

• همپوشانی موارد شبکه Overlapping Grid Items

• شبکه های تو در تو Nested Grids

• شبکه CSS و موقعیت یابی مطلق I CSS Grid and Absolute Positioning I

• CSS Grid و Absolute Positioning II CSS Grid and Absolute Positioning II

• طرح اولیه نمونه سازی Layout Prototyping

• برگه تمرین 5: این کار را خودتان انجام دهید! Exercise Sheet 5: Do It Yourself!

جایزه Bonus

• امتیاز: به عنوان یک توسعه دهنده نرم افزار به پتانسیل کامل خود برسید Bonus: Reach Your Full Potential As A Software Developer