آموزش CSS Bootcamp: Master CSS (شامل CSS Grid/Flexbox) [ویدئو]

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

خوش آمدی Welcome

• معرفی Introduction

• معرفی Introduction

• برپایی Setup

• برپایی Setup

مبانی CSS CSS Basics

• CSS چیست؟ What is CSS?

• CSS چیست؟ What is CSS?

• چگونه CSS بنویسیم؟ How to write CSS?

• چگونه CSS بنویسیم؟ How to write CSS?

• درخت عناصر HTML HTML Elements Tree

• درخت عناصر HTML HTML Elements Tree

• انتخابگرهای CSS CSS Selectors

• انتخابگرهای CSS CSS Selectors

• CSS Combinators CSS Combinators

• CSS Combinators CSS Combinators

• رنگ های CSS CSS Colors

• رنگ های CSS CSS Colors

• وراثت Inheritance

• وراثت Inheritance

• قالب بندی متن - قسمت 1 Text Formatting - Part 1

• قالب بندی متن - قسمت 1 Text Formatting - Part 1

• قالب بندی متن - قسمت 2 Text Formatting - Part 2

• قالب بندی متن - قسمت 2 Text Formatting - Part 2

• مدل جعبه Box Model

• مدل جعبه Box Model

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

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

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

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

• عناصر شبه Pseudo Elements

• عناصر شبه Pseudo Elements

• واحدهای اندازه گیری - قسمت 1 Measurement Units - Part 1

• واحدهای اندازه گیری - قسمت 1 Measurement Units - Part 1

• واحدهای اندازه گیری - قسمت 2 Measurement Units - Part 2

• واحدهای اندازه گیری - قسمت 2 Measurement Units - Part 2

• موقعیت ها - قسمت 1 Positions - Part 1

• موقعیت ها - قسمت 1 Positions - Part 1

• موقعیت ها - قسمت 2 Positions - Part 2

• موقعیت ها - قسمت 2 Positions - Part 2

• سرریز Overflow

• سرریز Overflow

• شناورها Floats

• شناورها Floats

مبانی CSS CSS Basics

CSS پیشرفته Advanced CSS

• پس زمینه - قسمت 1 Backgrounds - Part 1

• پس زمینه - قسمت 1 Backgrounds - Part 1

• پس زمینه - قسمت 2 Backgrounds - Part 2

• پس زمینه - قسمت 2 Backgrounds - Part 2

• گرادیان ها Gradients

• گرادیان ها Gradients

• سایه ها Shadows

• سایه ها Shadows

• انتقال ها Transitions

• انتقال ها Transitions

• تبدیل - قسمت 1 Transforms - Part 1

• تبدیل - قسمت 1 Transforms - Part 1

• تبدیل - قسمت 2 Transforms - Part 2

• تبدیل - قسمت 2 Transforms - Part 2

• انیمیشن ها - قسمت 1 Animations - Part 1

• انیمیشن ها - قسمت 1 Animations - Part 1

• انیمیشن ها - قسمت 2 Animations - Part 2

• انیمیشن ها - قسمت 2 Animations - Part 2

CSS پیشرفته Advanced CSS

فلکس باکس Flexbox

• فلکس باکس چیست؟ What Is Flexbox?

• فلکس باکس چیست؟ What Is Flexbox?

• خواص ظروف فلکس Flex Container Properties

• خواص ظروف فلکس Flex Container Properties

• ویژگی های اقلام فلکس Flex Items Properties

• ویژگی های اقلام فلکس Flex Items Properties

فلکس باکس Flexbox

پروژه 1 - هتل بزرگ (بر اساس Flexbox) Project 1 - Grand Hotel (Based on Flexbox)

• هتل بزرگ - پیش نمایش پروژه Grand Hotel - Project Preview

• هتل بزرگ - پیش نمایش پروژه Grand Hotel - Project Preview

• نوار کناری - نشانه گذاری Sidebar - Markup

• نوار کناری - نشانه گذاری Sidebar - Markup

• نوار کناری - سبک Sidebar - Style

• نوار کناری - سبک Sidebar - Style

• ناوبری - نشانه گذاری Navigation - Markup

• ناوبری - نشانه گذاری Navigation - Markup

• ناوبری - سبک - قسمت 1 Navigation - Style - Part 1

• ناوبری - سبک - قسمت 1 Navigation - Style - Part 1

• ناوبری - سبک - قسمت 2 Navigation - Style - Part 2

• ناوبری - سبک - قسمت 2 Navigation - Style - Part 2

• ایجاد رویداد کلیک Create Click Event

• ایجاد رویداد کلیک Create Click Event

• ایجاد نشانه گذاری برای سربرگ Create markup for Header

• ایجاد نشانه گذاری برای سربرگ Create markup for Header

• سربرگ - سبک Header - Style

• سربرگ - سبک Header - Style

• بخش درباره ما - نشانه گذاری About Us Section - Markup

• بخش درباره ما - نشانه گذاری About Us Section - Markup

• بخش درباره ما - سبک - قسمت 1 About Us Section - Style - Part 1

• بخش درباره ما - سبک - قسمت 1 About Us Section - Style - Part 1

• بخش درباره ما - سبک - قسمت 2 About Us Section - Style - Part 2

• بخش درباره ما - سبک - قسمت 2 About Us Section - Style - Part 2

• بخش اتاق ها - نشانه گذاری Rooms Section - Markup

• بخش اتاق ها - نشانه گذاری Rooms Section - Markup

• بخش اتاق ها - سبک Rooms Section - Style

• بخش اتاق ها - سبک Rooms Section - Style

• بخش مشتریان - نشانه گذاری Customers Section - Markup

• بخش مشتریان - نشانه گذاری Customers Section - Markup

• بخش مشتریان - سبک Customers Section - Style

• بخش مشتریان - سبک Customers Section - Style

• پاورقی - نشانه گذاری Footer - Markup

• پاورقی - نشانه گذاری Footer - Markup

• پاورقی - سبک Footer - Style

• پاورقی - سبک Footer - Style

پروژه 1 - هتل بزرگ (بر اساس Flexbox) Project 1 - Grand Hotel (Based on Flexbox)

طراحی وب سایت ریسپانسیو Responsive Web Design

• پروژه "گرند هتل" را پاسخگو کنید - قسمت 1 Make "Grand Hotel" Project Responsive - Part 1

• پروژه "گرند هتل" را پاسخگو کنید - قسمت 1 Make "Grand Hotel" Project Responsive - Part 1

• پروژه "گرند هتل" را پاسخگو کنید - قسمت 2 Make "Grand Hotel" Project Responsive - Part 2

• پروژه "گرند هتل" را پاسخگو کنید - قسمت 2 Make "Grand Hotel" Project Responsive - Part 2

• پروژه "گرند هتل" را پاسخگو کنید - قسمت 3 Make "Grand Hotel" Project Responsive - Part 3

• پروژه "گرند هتل" را پاسخگو کنید - قسمت 3 Make "Grand Hotel" Project Responsive - Part 3

طراحی وب سایت واکنش گرا Responsive Web Design

شبکه CSS CSS Grid

• CSS Grid معرفی CSS Grid Introduction

• CSS Grid معرفی CSS Grid Introduction

• برپایی Setup

• برپایی Setup

• نحوه ایجاد گرید How to Create Grid

• نحوه ایجاد گرید How to Create Grid

• واحدهای کسری Fractional Units

• واحدهای کسری Fractional Units

• موقعیت یابی و پوشا اقلام شبکه Positioning and Spanning Grid Items

• موقعیت یابی و پوشا اقلام شبکه Positioning and Spanning Grid Items

• نامگذاری اقلام شبکه - قسمت 1 Naming Grid Items - Part 1

• نامگذاری موارد شبکه - قسمت 1 Naming Grid Items - Part 1

• نامگذاری اقلام شبکه - قسمت 2 Naming Grid Items - Part 2

• نامگذاری اقلام شبکه - قسمت 2 Naming Grid Items - Part 2

• نامگذاری مناطق شبکه Naming Grid areas

• نامگذاری مناطق شبکه Naming Grid areas

• شبکه صریح و ضمنی Explicit and Implicit Grid

• شبکه صریح و ضمنی Explicit and Implicit Grid

• تراز کردن آیتم های شبکه Aligning Grid items

• تراز کردن آیتم های شبکه Aligning Grid items

• تراز کردن مسیرهای شبکه Aligning Grid tracks

• تراز کردن مسیرهای شبکه Aligning Grid tracks

• max-content، min-content، minmax() max-content, min-content, minmax()

• max-content، min-content، minmax() max-content, min-content, minmax()

• پر کردن خودکار، تنظیم خودکار auto-fill, auto-fit

• پر کردن خودکار، تنظیم خودکار auto-fill, auto-fit

شبکه CSS CSS Grid

پروژه 2 - فروشگاه مبلمان (بر اساس شبکه CSS) Project 2 - Furniture Store (Based on CSS Grid)

• فروشگاه مبلمان - پیش نمایش پروژه Furniture Store - Project Preview

• فروشگاه مبلمان - پیش نمایش پروژه Furniture Store - Project Preview

• نوار نوار - قسمت 1 - نشانه گذاری Navbar - Part 1 - Markup

• نوار نوار - قسمت 1 - نشانه گذاری Navbar - Part 1 - Markup

• نوار نوار - قسمت 1 - سبک Navbar - Part 1 - Style

• نوار نوار - قسمت 1 - سبک Navbar - Part 1 - Style

• نوار ناوبری - فرم جستجو Navbar - Search Form

• نوار ناوبری - فرم جستجو Navbar - Search Form

• Navbar - Part 2 - Markup Navbar - Part 2 - Markup

• Navbar - Part 2 - Markup Navbar - Part 2 - Markup

• Navbar - Part 2 - Style Navbar - Part 2 - Style

• Navbar - Part 2 - Style Navbar - Part 2 - Style

• نوار نوار - قسمت 2 - کشویی Navbar - Part 2 - Dropdown

• نوار نوار - قسمت 2 - کشویی Navbar - Part 2 - Dropdown

• بنر - نشانه گذاری Banner - Markup

• بنر - نشانه گذاری Banner - Markup

• بنر - سبک Banner - Style

• بنر - سبک Banner - Style

• نمایش اسلاید بنر - قسمت 1 Banner Slideshow - Part 1

• نمایش اسلاید بنر - قسمت 1 Banner Slideshow - Part 1

• نمایش اسلاید بنر - قسمت 2 Banner Slideshow - Part 2

• نمایش اسلاید بنر - قسمت 2 Banner Slideshow - Part 2

• بخش پیشنهاد روز Day Offer Section

• بخش پیشنهاد روز Day Offer Section

• پرفروش ترین مبلمان - نشانه گذاری Bestselling Furniture - Markup

• پرفروش ترین مبلمان - نشانه گذاری Bestselling Furniture - Markup

• پرفروش ترین مبلمان - سبک Bestselling Furniture - Style

• پرفروش ترین مبلمان - سبک Bestselling Furniture - Style

• آلبوم عکس Gallery

• آلبوم عکس Gallery

• بخش تماس و پاورقی Contact Section and Footer

• بخش تماس و پاورقی Contact Section and Footer

• جعبه مدال - نشانه گذاری Modal box - Markup

• جعبه مدال - نشانه گذاری Modal box - Markup

• جعبه مدال - سبک - قسمت 1 Modal Box - Style - Part 1

• جعبه مدال - سبک - قسمت 1 Modal Box - Style - Part 1

• جعبه مدال - سبک - قسمت 2 Modal Box - Style - Part 2

• جعبه مدال - سبک - قسمت 2 Modal Box - Style - Part 2

• پروژه را پاسخگو کنید Make Project Responsive

• پروژه را پاسخگو کنید Make Project Responsive

پروژه 2 - فروشگاه مبلمان (بر اساس شبکه CSS) Project 2 - Furniture Store (Based on CSS Grid)