آموزش CSS - مبانی Adv برای توسعه front end [2022]

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

معرفی CSS CSS Introduction

• CSS - مقدمه CSS - Introduction

• CSS - چگونه از CSS استفاده کنیم؟ CSS - How to use CSS?

یک ظاهر طراحی پایه Basic Styling

• CSS - یک ظاهر طراحی متن CSS - Styling Text

• CSS - افزودن مرزها CSS - Adding Borders

• CSS - حاشیه و پد CSS - Margin and Padding

• CSS - لیست های سبک CSS - Styling Lists

• CSS - پیوندهای سبک CSS - Styling Links

• CSS - دکمه های یک ظاهر طراحی شده CSS - Styling Buttons

• CSS - اضافه کردن آیکون ها CSS - Adding Icons

ویژگی های نمایش و موقعیت Display and Position Properties

• CSS - کار با مقادیر نمایشگر CSS - Working with Display Values

• CSS - مقدار نمایش: Inline-Block CSS - Display value: Inline-Block

• CSS - تعیین موقعیت عناصر HTML قسمت 1 CSS - Positioning HTML Elements Part-1

• CSS - تعیین موقعیت عناصر HTML قسمت 2 CSS - Positioning HTML Elements Part-2

• CSS - مدیریت سرریز محتوا CSS - Handling Content Overflow

• CSS - عناصر HTML شناور CSS - Floating HTML Elements

مدل جعبه و سایه ها Box Model and Shadows

• CSS - مدل جعبه CSS - Box Model

• CSS - اندازه جعبه CSS - Box Sizing

• CSS - اضافه کردن سایه ها CSS - Adding Shadows

ترکیب‌کننده‌ها، کلاس‌های Psudeo و عناصر Combinators, Psudeo Classes and Elements

• CSS - Combinators Part-1 CSS - Combinators Part-1

• CSS - Combinators Part-2 CSS - Combinators Part-2

• CSS - کلاس های شبه قسمت 1 CSS - Pseudo Classes Part-1

• CSS - کلاس های شبه قسمت 2 CSS - Pseudo Classes Part-2

• CSS - عناصر شبه CSS - Pseudo Elements

پس زمینه ها و گرادیان ها Backgrounds and Gradients

• CSS - اضافه کردن پس زمینه CSS - Adding Backgrounds

• CSS - گرادیان ها CSS - Gradients

• CSS - مدیریت سرریز متن CSS - Handling Text Overflow

مشکلات تمرین Practice Problems

• CSS - تمرین مشکل-1: ایجاد Google.com شبیه به هم CSS - Practice Problem-1: Create Google.com Look-Alike

• CSS - تمرین مشکل-1: ایجاد راه حل شبیه به Google.com CSS - Practice Problem-1: Create Google.com Look-Alike Solution

طراحی تعاملی Responsive Design

• CSS - مقدمه ای بر طراحی وب سایت واکنش گرا CSS - Introduction to Responsive Web Design

• CSS - Viewport CSS - Viewport

• CSS - اندازه پویا CSS - Dynamic Size

• CSS - مقدمه ای بر پرسش های رسانه ای CSS - Introduction to Media Queries

• CSS - طراحی پاسخگو صفحه وب با استفاده از پرسش های رسانه ای CSS - Responsive Webpage Design using Media Queries

طرح بندی فلکس Flex Layout

• CSS - Flex Layout CSS - Flex Layout

• CSS - ویژگی های کانتینر فلکس CSS - Flex Container Properties

• CSS - موارد فلکس را تراز کنید CSS - Align Flex Items

• CSS - ویژگی های مورد فلکس CSS - Flex Item Properties

• CSS - نوار بالا را با استفاده از Flex طراحی کنید CSS - Design Topbar using Flex

• CSS - گرید پاسخگو با استفاده از Flex CSS - Responsive Grid using Flex

جلوه ها و انیمیشن ها Effects and Animations

• CSS - Transform Property CSS - Transform Property

• CSS - تراز کردن عناصر با استفاده از Transform Property CSS - Align Elements using Transform Property

• CSS - ویژگی انتقال CSS - Transition Property

• CSS - ویژگی انیمیشن CSS - Animation Property

• CSS - Flying Rocket Animation با استفاده از Animation Property CSS - Flying Rocket Animation using Animation Property