پروژه های CSS Grid را برای ساخت وب سایت های دنیای واقعی مدرن تمرین کنید [ویدئو]

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

معرفی Introduction

• معرفی Introduction

مبانی CSS Grid Basics of CSS Grid

• مبانی CSS Grid - نمایش ویژگی و ظرف شبکه Basics of CSS Grid - Display property and grid container

• آیتم های شبکه Grid items

• ستون های شبکه Grid columns

• ستون های شبکه - قسمت 2 Grid columns - part 2

• ستون های شبکه - قسمت 3 - کسری Grid columns - part 3 – fractions

• ردیف های شبکه ای Grid rows

• ردیف های شبکه - قسمت 2 Grid rows - part 2

• ویژگی ردیف‌های خودکار Grid Grid auto rows property

• ویژگی Grid Auto rows - قسمت 2 Grid auto rows property - part 2

خطوط شبکه + 2 پروژه (2 طرح بندی وب سایت) Grid lines + 2 projects (2 website layouts)

• خطوط شبکه - مقدمه Grid lines – intro

• خطوط شبکه - ستون های شبکه و ویژگی های ردیف های شبکه Grid lines - grid columns and grid rows properties

• خطوط شبکه - ستون های شبکه و ویژگی های ردیف های شبکه - قسمت 2 Grid lines - grid columns and grid rows properties - part 2

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

• تراز - تراز کردن موارد Alignment - align items

• تراز - موارد را توجیه کنید Alignment - justify items

• تراز - محتوا را توجیه کنید Alignment - justify content

• تراز - تراز کردن محتوا Alignment - align content

• همسویی - خود را تراز کنید و خود را توجیه کنید Alignment - align self & justify self

• پروژه شماره 1 - طرح بندی 1 Project #1 - Layout 1

• پروژه شماره 1 - طرح 1 - قسمت 2 Project #1 - Layout 1 - part 2

• پروژه شماره 1 - طرح 1 - قسمت 3 Project #1 - Layout 1 - part 3

• پروژه شماره 2 - طرح 2 Project #2 - Layout 2

• پروژه شماره 2 - طرح 2 - قسمت 2 Project #2 - Layout 2 - part 2

• پروژه شماره 2 - طرح 2 - قسمت 3 Project #2 - Layout 2 - part 3

• پروژه شماره 2 - طرح 2 - قسمت 4 Project #2 - Layout 2 - part 4

• پروژه شماره 2 - طرح 2 - قسمت 5 Project #2 - Layout 2 - part 5

Grid Areas + 2 پروژه (2 طرح‌بندی وب‌سایت) Grid Areas + 2 projects (2 website layouts)

• منطقه شبکه - مقدمه Grid area – intro

• دارایی منطقه شبکه Grid area property

• پروژه شماره 3 - طرح 3 Project #3 - Layout 3

• پروژه شماره 3 - طرح 3 - قسمت 2 Project #3 - Layout 3 - part 2

• پروژه شماره 3 - طرح 3 - قسمت 3 Project #3 - Layout 3 - part 3

• پروژه شماره 4 - طرح 4 Project #4 - Layout 4

• پروژه شماره 4 - طرح 4 - قسمت 2 Project #4 - Layout 4 - part 2

• پروژه شماره 4 - طرح 4 - قسمت 3 Project #4 - Layout 4 - part 3

• پروژه شماره 4 - طرح 4 - قسمت 4 Project #4 - Layout 4 - part 4

پروژه دنیای واقعی - وب سایت های دسکتاپ + موبایل Real world project - desktop + mobile websites

• پروژه وب سایت دنیای واقعی – طراحی دسکتاپ – قسمت HTML Real world website project - desktop design - HTML part

• پروژه وب سایت دنیای واقعی – طراحی دسکتاپ – سبک های پایه Real world website project - desktop design - basic styles

• پروژه وب سایت دنیای واقعی - طراحی دسکتاپ - مناطق شبکه Real world website project - desktop design - grid areas

• پروژه وب سایت دنیای واقعی - طراحی دسکتاپ - تراز کردن آن به درستی Real world website project - desktop design - aligning it right

• پروژه وب سایت دنیای واقعی - طراحی دسکتاپ - استایل های بیشتر Real world website project - desktop design - more stylings

• پروژه وب سایت دنیای واقعی – طراحی دسکتاپ – محتوا و سایدبار Real world website project - desktop design - content and sidebar

• پروژه وب سایت دنیای واقعی – طراحی دسکتاپ – فوتر Real world website project - desktop design – footer

• پروژه وب سایت دنیای واقعی – طراحی واکنش گرا Real world website project - responsive design

• پروژه وب سایت دنیای واقعی – طراحی ریسپانسیو – قسمت دوم Real world website project - responsive design - part 2

• پروژه وب سایت دنیای واقعی – طراحی ریسپانسیو – قسمت سوم Real world website project - responsive design - part 3