آموزش Pro Frontend Web Developer شوید - CSS - مبانی پیشرفته

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

مقدمه 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

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

• CSS - ترکیب کننده ها قسمت 1 CSS - Combinators Part-1

• CSS - ترکیب کننده ها قسمت 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 - موارد Flex را تراز کنید CSS - Align Flex Items

• CSS - ویژگی های مورد Flex CSS - Flex Item Properties

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

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

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

• CSS - تبدیل ویژگی CSS - Transform Property

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

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

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

• CSS - انیمیشن موشک پرنده با استفاده از ویژگی انیمیشن CSS - Flying Rocket Animation using Animation Property

طرح شبکه Grid Layout

• CSS - مقدمه ای بر چیدمان شبکه CSS - Introduction to Grid Layout

• CSS - خصوصیات کانتینر شبکه CSS - Grid Container Properties

• CSS - ویژگی های مورد شبکه CSS - Grid Item Properties

پروژه نهایی Final Project

• CSS - بیانیه نهایی پروژه CSS - Final Project Problem Statement