آموزش نسخه HTML و CSS Bootcamp 2023

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

معرفی Introduction

• خوش آمدید و مروری بر برنامه درسی Welcome & Curriculum Overview

• به انجمن چت ما بپیوندید Join Our Chat Community

• به انجمن چت ما بپیوندید Join Our Chat Community

• نکته مهم در ارائه بازخورد! Important Note On Leaving Feedback!

• نکته مهم در ارائه بازخورد! Important Note On Leaving Feedback!

• اولین طعم HTML و CSS A First Taste of HTML & CSS

• وب چگونه کار می کند How The Web Works

• وب چگونه کار می کند How The Web Works

• نقش های HTML، CSS و JS The Roles of HTML, CSS, and JS

• نقش های HTML، CSS و JS The Roles of HTML, CSS, and JS

• آزمون سریع در مورد نقش های HTML و CSS Quick Quiz On The Roles of HTML & CSS

• آزمون سریع در مورد نقش های HTML و CSS Quick Quiz On The Roles of HTML & CSS

• نصب ابزارهایی که نیاز داریم Installing The Tools We Need

• نصب ابزارهایی که نیاز داریم Installing The Tools We Need

• پیکربندی VSCode Configuring VSCode

• نکته مهم در مورد تمرینات دوره Important Note On The Course Exercises

معرفی Introduction

• خوش آمدید و مروری بر برنامه درسی Welcome & Curriculum Overview

• اولین طعم HTML و CSS A First Taste of HTML & CSS

• پیکربندی VSCode Configuring VSCode

• نکته مهم در مورد تمرینات دوره Important Note On The Course Exercises

مبانی HTML HTML Basics

• معرفی HTML Introducing HTML

• معرفی HTML Introducing HTML

• گردش کار پایه HTML The Basic HTML Workflow

• گردش کار پایه HTML The Basic HTML Workflow

• عنصر پاراگراف The Paragraph Element

• عنصر پاراگراف The Paragraph Element

• شبکه توسعه دهندگان موزیلا Mozilla Developer Network

• شبکه توسعه دهندگان موزیلا Mozilla Developer Network

• ابزارهای توسعه دهنده کروم Chrome Developer Tools

• ابزارهای توسعه دهنده کروم Chrome Developer Tools

• ساختار سند Document Structure

• ایجاد نظرات HTML Creating HTML Comments

• ایجاد سرفصل ها Creating Headings

• ایجاد سرفصل ها Creating Headings

• تمرین مبانی HTML HTML Basics Exercise

• تمرین مبانی HTML HTML Basics Exercise

مبانی HTML HTML Basics

• ساختار سند Document Structure

• ایجاد نظرات HTML Creating HTML Comments

HTML بیشتر More HTML

• کار با لیست های HTML Working With HTML Lists

• عناصر Em، Strong، B و I The Em, Strong, B, and I Elements

• عناصر Em، Strong، B و I The Em, Strong, B, and I Elements

• عناصر تودرتو Nesting Elements

• عناصر تودرتو Nesting Elements

• زیرنویس و زیرنویس Superscript and Subscript

• Inline vs. بلوک عناصر Inline Vs. Block Elements

• Inline vs. بلوک عناصر Inline Vs. Block Elements

• ایجاد لینک Creating Links

• انواع دیگر پیوندها Other Types of Links

• ایجاد تصاویر Creating Images

• تمرین دستور پخت پاستا Pasta Recipe Exercise

HTML بیشتر More HTML

• کار با لیست های HTML Working With HTML Lists

• زیرنویس و زیرنویس Superscript and Subscript

• ایجاد لینک Creating Links

• انواع دیگر پیوندها Other Types of Links

• ایجاد تصاویر Creating Images

• تمرین دستور پخت پاستا Pasta Recipe Exercise

کار با فرم ها Working With Forms

• ایجاد ورودی ها و دکمه های متن Creating Text Inputs and Buttons

• عنصر فرم The Form Element

• ویژگی های نام و مکان Name and Placeholder Attributes

• ویژگی های نام و مکان Name and Placeholder Attributes

• برچسب‌گذاری صحیح کنترل‌های فرم Properly Labelling Form Controls

• برچسب‌گذاری صحیح کنترل‌های فرم Properly Labelling Form Controls

• انواع دیگر ورودی ها Other Types of Inputs

• انواع دیگر ورودی ها Other Types of Inputs

• چک باکس ها، Textareas و ورودی های محدوده Checkboxes, Textareas, and Range Inputs

• چک باکس ها، Textareas و ورودی های محدوده Checkboxes, Textareas, and Range Inputs

• انتخاب و گروه بندی دکمه های رادیویی Selects and Radio Button Groupings

• تمرین فرم صفحه فرود دوره Course Landing Page Form Exercise

• تمرین فرم صفحه فرود دوره Course Landing Page Form Exercise

کار با فرم ها Working With Forms

• ایجاد ورودی ها و دکمه های متن Creating Text Inputs and Buttons

• عنصر فرم The Form Element

• انتخاب و گروه بندی دکمه های رادیویی Selects and Radio Button Groupings

سایر عناصر Other Elements

• دهانه ها Spans

• Divs Divs

• Divs Divs

• جداول Tables

• نشانه گذاری معنایی Semantic Markup

• عناصر معنایی Semantic Elements

• عناصر معنایی Semantic Elements

سایر عناصر Other Elements

• دهانه ها Spans

• جداول Tables

• نشانه گذاری معنایی Semantic Markup

مبانی CSS CSS Basics

• دریافت کد شروع ما Getting Our Starter Code

• کار در سبک های درون خطی Working Within Inline Styles

• نوشتن سبک های داخلی Writing Internal Styles

• سبک های خارجی: بهترین راه برای نوشتن سبک ها External Styles: The Best Way To Write Styles

• یادداشت سریع در Codepen Quick Note on Codepen

• یادداشت سریع در Codepen Quick Note on Codepen

• آناتومی CSS Anatomy of CSS

• آناتومی CSS Anatomy of CSS

• انتخابگر عنصر The Element Selector

• تمرین پایه CSS CSS Basics Exercise

• تمرین پایه CSS CSS Basics Exercise

مبانی CSS CSS Basics

• دریافت کد شروع ما Getting Our Starter Code

• کار در سبک های درون خطی Working Within Inline Styles

• نوشتن سبک های داخلی Writing Internal Styles

• سبک های خارجی: بهترین راه برای نوشتن سبک ها External Styles: The Best Way To Write Styles

• انتخابگر عنصر The Element Selector

دنیای رنگ های CSS The World of CSS Colors

• کار با رنگ پس زمینه Working with background-color

• نکته سریع: MDN و نظرات Quick Tip: MDN & Comments

• نکته سریع: MDN و نظرات Quick Tip: MDN & Comments

• رنگ ها به نام Named Colors

• درک رنگ های RGB Understanding RGB Colors

• درک رنگ های RGB Understanding RGB Colors

• رنگ های هگزادسیمال Hexadecimal Colors

• رنگ های هگزادسیمال Hexadecimal Colors

• رنگ های RGBA و شفافیت RGBA Colors and Opacity

• مسابقه رنگ ها Colors Quiz

• وراثت CSS CSS Inheritance

• تمرین CSS Colors CSS Colors Exercise

دنیای رنگ های CSS The World of CSS Colors

• کار با رنگ پس زمینه Working with background-color

• رنگ ها به نام Named Colors

• رنگ های RGBA و شفافیت RGBA Colors and Opacity

• مسابقه رنگ ها Colors Quiz

• وراثت CSS CSS Inheritance

• تمرین CSS Colors CSS Colors Exercise

استایل دادن به متن Styling Text

• تغییر فونت با Font-Family Changing Fonts with Font-Family

• اندازه قلم، وزن فونت و سبک فونت Font-size, font-weight, and font-style

• اندازه قلم، وزن فونت و سبک فونت Font-size, font-weight, and font-style

• تغییر ترازبندی متن Changing Text Alignment

• ارتفاع خطوط، فاصله حروف و فاصله بین کلمات Line-height, letter-spacing, and word-spacing

• اضافه کردن فونت های سفارشی با فونت های گوگل Adding Custom Fonts With Google Fonts

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

• ایجاد سایه های متن Creating Text Shadows

• ایجاد سایه های متن Creating Text Shadows

• اولین پروژه کوچک ما: Cantilever Our First Mini Project: Cantilever

استایل دادن به متن Styling Text

• تغییر فونت با Font-Family Changing Fonts with Font-Family

• تغییر ترازبندی متن Changing Text Alignment

• ارتفاع خطوط، فاصله حروف و فاصله بین کلمات Line-height, letter-spacing, and word-spacing

• اضافه کردن فونت های سفارشی با فونت های گوگل Adding Custom Fonts With Google Fonts

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

• اولین پروژه کوچک ما: Cantilever Our First Mini Project: Cantilever

یک ظاهر طراحی بیشتر متن More Text Styling

• تبدیل متن و تزیین متن Text-transform & text-decoration

• انتخابگر شناسه The ID Selector

• انتخابگر کلاس The Class Selector

• لیست های یک ظاهر طراحی شده Styling Lists

• لیست های یک ظاهر طراحی شده Styling Lists

• پیوندهای یک ظاهر طراحی شده و :Hover Pseudo-Class Styling Links and :hover Pseudo-Class

• ویژگی کوتاه نویسی فونت The Font Shorthand Property

• ویژگی کوتاه نویسی فونت The Font Shorthand Property

• ورزش Seadragon برگی Leafy Seadragon Exercise

• ورزش Seadragon برگی Leafy Seadragon Exercise

یک ظاهر طراحی بیشتر متن More Text Styling

• تبدیل متن و تزیین متن Text-transform & text-decoration

• انتخابگر شناسه The ID Selector

• انتخابگر کلاس The Class Selector

• پیوندهای یک ظاهر طراحی شده و :Hover Pseudo-Class Styling Links and :hover Pseudo-Class

Selectors Pt. 1 Selectors Pt. 1

• انتخابگر جهانی The Universal Selector

• انتخابگر جهانی The Universal Selector

• انتخابگر ویژگی The Attribute Selector

• انتخابگرهای گروه بندی Grouping Selectors

• ترکیب‌کننده‌های نسل و کودک Descendant & Child Combinators

• انتخابگرهای ترکیبی Compound Selectors

• انتخابگرهای ترکیبی Compound Selectors

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

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

Selectors Pt. 1 Selectors Pt. 1

• انتخابگر ویژگی The Attribute Selector

• انتخابگرهای گروه بندی Grouping Selectors

• ترکیب‌کننده‌های نسل و کودک Descendant & Child Combinators

مدل جعبه The Box Model

• معرفی مدل جعبه Introducing The Box Model

• کار با مرزها Working With Borders

• عرض، ارتفاع و درصد Width, Height, and Percentages

• عرض، ارتفاع و درصد Width, Height, and Percentages

• افزودن padding به عناصر Adding Padding to Elements

• افزودن padding به عناصر Adding Padding to Elements

• کار با حاشیه Working With Margins

• مدل جعبه جایگزین The Alternate Box Model

• مدل جعبه جایگزین The Alternate Box Model

• ویژگی نمایشگر The Display Property

• نمایشگر: ندارد Display: None

• خودکار حاشیه و حاشیه منفی Negative Margin & Margin Auto

• خودکار حاشیه و حاشیه منفی Negative Margin & Margin Auto

• حاشیه فروپاشی: WTF؟ Margin Collapsing: WTF?

• حاشیه فروپاشی: WTF؟ Margin Collapsing: WTF?

• یک الگوی چیدمان مشترک A Common Layout Pattern

• یک الگوی چیدمان مشترک A Common Layout Pattern

• حداقل و حداکثر عرض Min and Max Width

• حداقل و حداکثر عرض Min and Max Width

• گرد کردن عناصر با شعاع مرزی Rounding Elements With Border Radius

• گرد کردن عناصر با شعاع مرزی Rounding Elements With Border Radius

• سایه های جعبه Box Shadows

• کار با سرریز Working With Overflow

• کار با سرریز Working With Overflow

• ورزش پیست اسکی Ski Resort Exercise

مدل جعبه The Box Model

• معرفی مدل جعبه Introducing The Box Model

• کار با مرزها Working With Borders

• کار با حاشیه Working With Margins

• ویژگی نمایشگر The Display Property

• نمایشگر: ندارد Display: None

• سایه های جعبه Box Shadows

• ورزش پیست اسکی Ski Resort Exercise

پروژه نمونه کار هنرمندان Artist Portfolio Project

• معرفی پروژه ما Introducing Our Project

• معرفی پروژه ما Introducing Our Project

• راه اندازی اولیه پروژه Basic Project Setup

• نوشتن نشانه گذاری نوار ناوبری Writing The Navbar Markup

• نوشتن نشانه گذاری نوار ناوبری Writing The Navbar Markup

• یک ظاهر طراحی شده نوار نوار Styling The Navbar

• اتمام نوار ناوبری Finishing Up The Navbar

• ایجاد شبکه عکس Creating The Photo Grid

• ادامه شبکه عکس Continuing The Photo Grid

• اتمام شبکه عکس Finishing The Photo Grid

• افزودن محتوای پاورقی Adding The Footer Content

پروژه نمونه کار هنرمندان Artist Portfolio Project

• راه اندازی اولیه پروژه Basic Project Setup

• یک ظاهر طراحی شده نوار نوار Styling The Navbar

• اتمام نوار ناوبری Finishing Up The Navbar

• ایجاد شبکه عکس Creating The Photo Grid

• ادامه شبکه عکس Continuing The Photo Grid

• اتمام شبکه عکس Finishing The Photo Grid

• افزودن محتوای پاورقی Adding The Footer Content

Specificity و The Cascade Specificity and The Cascade

• بخش مقدمه Section Introduction

• ترکیب کننده خواهر و برادر The Sibling Combinator

• ترکیب کننده خواهر و برادر The Sibling Combinator

• کار با کلاس های شبه Working With Pseudo-Classes

• کار با کلاس های شبه Working With Pseudo-Classes

• یک ظاهر طراحی شبه عناصر Styling Pseudo-Elements

• CSS Selectors Pt. 2 ورزش کنید CSS Selectors Pt. 2 Exercise

• مبانی خاص بودن The Basics of Specificity

• سبک های درون خطی و ویژگی Inline Styles and Specificity

• سبک های درون خطی و ویژگی Inline Styles and Specificity

• محاسبه مقادیر ویژه Calculating Specificity Values

• !important و The Cascade !important and The Cascade

• !important و The Cascade !important and The Cascade

• بسته بندی آبشار Wrapping Up The Cascade

• بسته بندی آبشار Wrapping Up The Cascade

• آزمون آبشار و ویژگی Cascade & Specificity Quiz

Specificity و The Cascade Specificity and The Cascade

• بخش مقدمه Section Introduction

• یک ظاهر طراحی شبه عناصر Styling Pseudo-Elements

• CSS Selectors Pt. 2 ورزش کنید CSS Selectors Pt. 2 Exercise

• مبانی خاص بودن The Basics of Specificity

• محاسبه مقادیر ویژه Calculating Specificity Values

• آزمون آبشار و ویژگی Cascade & Specificity Quiz

پروژه پست وبلاگ Blog Post Project

• معرفی پروژه پست وبلاگ ما Introducing Our Blog Post Project

• معرفی پروژه پست وبلاگ ما Introducing Our Blog Post Project

• متمرکز کردن محتوای اصلی Centering The Main Content

• کار روی تایپوگرافی Working on Typography

• کار روی تایپوگرافی Working on Typography

• ایجاد بخش سرفصل Creating the Headline Section

• پیاده سازی سرفصل های ما Implementing Our Headings

• پیاده سازی سرفصل های ما Implementing Our Headings

• اضافه کردن در سبک کد Adding In Code Styles

• اضافه کردن در سبک کد Adding In Code Styles

• ایجاد پاورقی Creating the Footer

• ایجاد پاورقی Creating the Footer

• نوشتن قهرمان در اندازه کامل Writing The Full Size Hero

پروژه پست وبلاگ Blog Post Project

• متمرکز کردن محتوای اصلی Centering The Main Content

• ایجاد بخش سرفصل Creating the Headline Section

• نوشتن قهرمان در اندازه کامل Writing The Full Size Hero

واحدهای CSS CSS Units

• واحدهای مطلق: پیکسل، سانتی متر، و بیشتر! Absolute Units: Pixels, Centimeters, and More!

• کار با درصد Working With Percentages

• شادی واحدهای رم The Joy of Rem Units

• شادی واحدهای رم The Joy of Rem Units

• درک واحد Em Understanding The Em Unit

• واحدهای Vw و Vh Vw and Vh Units

• آزمون واحدهای CSS CSS Units Quiz

• از کدام واحدها باید استفاده کرد؟ Which Units Should You Use?

• کار با شناورها Working With Floats

واحدهای CSS CSS Units

• واحدهای مطلق: پیکسل، سانتی متر، و بیشتر! Absolute Units: Pixels, Centimeters, and More!

• کار با درصد Working With Percentages

• درک واحد Em Understanding The Em Unit

• واحدهای Vw و Vh Vw and Vh Units

• آزمون واحدهای CSS CSS Units Quiz

• از کدام واحدها باید استفاده کرد؟ Which Units Should You Use?

• کار با شناورها Working With Floats

پروژه Hazel CV Hazel CV Project

• معرفی پروژه Introducing The Project

• معرفی پروژه Introducing The Project

• راه اندازی نوار ناوبری Setting Up The Navbar

• راه اندازی نوار ناوبری Setting Up The Navbar

• اتمام Navbar Finishing The Navbar

• اتمام Navbar Finishing The Navbar

• شروع محتوای قهرمان Starting The Hero Content

• شروع محتوای قهرمان Starting The Hero Content

• ساخت بخش مهارت ها Making The Skills Section

• ایجاد بخش وبلاگ Creating The Blog Section

• افزودن بخش رویدادها Adding The Events Section

• ساخت پاورقی ساده Making A Simple Footer

پروژه Hazel CV Hazel CV Project

• ساخت بخش مهارت ها Making The Skills Section

• ایجاد بخش وبلاگ Creating The Blog Section

• افزودن بخش رویدادها Adding The Events Section

• ساخت پاورقی ساده Making A Simple Footer

پس‌زمینه‌ها، گرادیان‌ها و فیلترها Backgrounds, Gradients, & Filters

• کار با تصاویر پس زمینه Working With Background Images

• کار با تصاویر پس زمینه Working With Background Images

• کنترل پس زمینه-تکرار Controlling Background-Repeat

• کنترل پس زمینه-تکرار Controlling Background-Repeat

• اندازه پس زمینه ما Sizing Our Background

• پس زمینه موقعیت یابی Positioning Background

• پس زمینه موقعیت یابی Positioning Background

• کار با پس زمینه-کلیپ Working With Background-Clip

• تمرین پس زمینه Background Exercise

• تمرین پس زمینه Background Exercise

• نکته مهم در مورد گرادیان! An Important Note About Gradients!

• ایجاد گرادیان های خطی Creating Linear Gradients

• گرادیان های شعاعی، مخروطی و تکرار شونده Radial, Conic, and Repeating Gradients

• مختصات پس زمینه The Background Shorthand Property

• فیلترهای CSS فانتزی Fancy CSS Filters

پس‌زمینه‌ها، گرادیان‌ها و فیلترها Backgrounds, Gradients, & Filters

• اندازه پس زمینه ما Sizing Our Background

• کار با پس زمینه-کلیپ Working With Background-Clip

• نکته مهم در مورد گرادیان! An Important Note About Gradients!

• ایجاد گرادیان های خطی Creating Linear Gradients

• گرادیان های شعاعی، مخروطی و تکرار شونده Radial, Conic, and Repeating Gradients

• مختصات پس زمینه The Background Shorthand Property

• فیلترهای CSS فانتزی Fancy CSS Filters

تثبیت موقعیت Positioning

• معرفی موقعیت یابی Introducing Positioning

• موقعیت یابی نسبی Relative Positioning

• موقعیت یابی نسبی Relative Positioning

• کنترل لایه ها با Z-Index Controlling Layers With Z-Index

• کنترل لایه ها با Z-Index Controlling Layers With Z-Index

• امتیاز 1 موقعیت یابی مطلق Absolute Positioning Pt 1

• امتیاز 1 موقعیت یابی مطلق Absolute Positioning Pt 1

• امتیاز 2 موقعیت یابی مطلق Absolute Positioning Pt 2

• امتیاز 2 موقعیت یابی مطلق Absolute Positioning Pt 2

• ایجاد نشان دکمه Creating A Button Badge

• ایجاد نشان دکمه Creating A Button Badge

• موقعیت یابی ثابت Fixed Positioning

• تمرین موقعیت یابی شماره 1 Positioning Exercise #1

• تمرین موقعیت یابی شماره 2 Positioning Exercise #2

• تمرین موقعیت یابی شماره 2 Positioning Exercise #2

• تمرین موقعیت یابی شماره 3 Positioning Exercise #3

تثبیت موقعیت Positioning

• معرفی موقعیت یابی Introducing Positioning

• موقعیت یابی ثابت Fixed Positioning

• تمرین موقعیت یابی شماره 1 Positioning Exercise #1

• تمرین موقعیت یابی شماره 3 Positioning Exercise #3

انتقال ها و دگرگونی ها Transitions and Transforms

• معرفی Transitions Introducing Transitions

• نحو اساسی انتقال The Basic Transition Syntax

• نحو اساسی انتقال The Basic Transition Syntax

• کار با چند انتقال Working With Multiple Transitions

• توابع زمان گذار Transition Timing Functions

• تأخیرهای انتقال Transition Delays

• درک عملکرد انیمیشن Understanding Animation Performance

• معرفی Transforms Introducing Transforms

• انواع دیگر تحولات Other Types of Transformations

• انواع دیگر تحولات Other Types of Transformations

• تبدیل مبدا Transform Origin

• ساخت جلوه های شناور دکمه فانتزی Building Fancy Button Hover Effects

انتقال ها و دگرگونی ها Transitions and Transforms

• معرفی Transitions Introducing Transitions

• کار با چند انتقال Working With Multiple Transitions

• توابع زمان گذار Transition Timing Functions

• تأخیرهای انتقال Transition Delays

• درک عملکرد انیمیشن Understanding Animation Performance

• معرفی Transforms Introducing Transforms

• تبدیل مبدا Transform Origin

• ساخت جلوه های شناور دکمه فانتزی Building Fancy Button Hover Effects

Flexbox: قسمت 1 Flexbox: Part 1

• معرفی فلکس باکس Introducing Flexbox

• معرفی فلکس باکس Introducing Flexbox

• نمایشگر: فلکس و فلکس محور Display: Flex and Flex Axis

• کار با Flex-Direction Working With Flex-Direction

• تمرین فلکس باکس 1 Flexbox Exercise 1

• تمرین فلکس باکس 1 Flexbox Exercise 1

• Flex-Wrap Flex-Wrap

• Flex-Wrap Flex-Wrap

• توجیه - محتوا Justify-Content

• Flexbox Exercise 2 Flexbox Exercise 2

• Flexbox Exercise 2 Flexbox Exercise 2

• تراز کردن آیتم ها Align-Items

• تراز کردن آیتم ها Align-Items

• تمرین Flexbox 3 Flexbox Exercise 3

• تراز کردن محتوا Align-Content

• تمرین Flexbox 4 Flexbox Exercise 4

• تراز کردن-خود Align-Self

• تمرین Flexbox 5 Flexbox Exercise 5

• تمرین Flexbox 5 Flexbox Exercise 5

Flexbox: قسمت 1 Flexbox: Part 1

• نمایشگر: فلکس و فلکس محور Display: Flex and Flex Axis

• کار با Flex-Direction Working With Flex-Direction

• توجیه - محتوا Justify-Content

• تمرین Flexbox 3 Flexbox Exercise 3

• تراز کردن محتوا Align-Content

• تمرین Flexbox 4 Flexbox Exercise 4

• تراز کردن-خود Align-Self

Flexbox Pt 2: Flex Items & Patterns! Flexbox Pt 2: Flex Items & Patterns!

• ویژگی Flex-Grow The Flex-Grow Property

• ویژگی Flex-Grow The Flex-Grow Property

• کنترل انقباض با Flex-Shrink Controlling Shrinkage With Flex-Shrink

• Flex-Basis: مهم و گیج کننده Flex-Basis: Important & Confusing

• Flex-Basis: مهم و گیج کننده Flex-Basis: Important & Confusing

• ویژگی کوتاه فلکس The Flex Shorthand Property

• سفارش ویژگی Flex-Item The Order Flex-Item Property

• الگوهای Flexbox: ایجاد یک نوار ناوبری ساده Flexbox Patterns: Building A Simple Navbar

• الگوهای Flexbox: ایجاد یک نوار ناوبری ساده Flexbox Patterns: Building A Simple Navbar

• الگوهای فلکس باکس: ظروف فلکس تو در تو Flexbox Patterns: Nested Flex Containers

• الگوهای فلکس باکس: ظروف فلکس تو در تو Flexbox Patterns: Nested Flex Containers

• الگوهای Flexbox: محتوا را در مرکز قرار دهید Flexbox Patterns: Centering Content

• الگوهای فلکس باکس: ایجاد طرح بندی کارت Flexbox Patterns: Building A Card Layout

• الگوهای فلکس باکس: ایجاد طرح بندی کارت Flexbox Patterns: Building A Card Layout

Flexbox Pt 2: Flex Items & Patterns! Flexbox Pt 2: Flex Items & Patterns!

• کنترل انقباض با Flex-Shrink Controlling Shrinkage With Flex-Shrink

• ویژگی کوتاه فلکس The Flex Shorthand Property

• سفارش ویژگی Flex-Item The Order Flex-Item Property

• الگوهای Flexbox: محتوا را در مرکز قرار دهید Flexbox Patterns: Centering Content

پروژه برآورد هزینه Cost Estimator Project

• معرفی پروژه برآورد هزینه Introducing The Cost Estimator Project

• ساخت کانتینر ما Building Our Container

• ساخت کانتینر ما Building Our Container

• ایجاد برگه های بالا Creating The Top Tabs

• قرار دادن زیر خط زبانه ها Positioning The Tabs Underline

• قرار دادن زیر خط زبانه ها Positioning The Tabs Underline

• ایجاد سبک های برگه فعال Creating The Active Tab Styles

• ایجاد سبک های برگه فعال Creating The Active Tab Styles

• اضافه کردن بخش Toggle Adding The Toggle Section

• ساخت کارت جلسات Building The Sessions Card

• ساخت کارت جلسات Building The Sessions Card

• ایجاد اسلایدر Creating The Slider

• ایجاد دو کارت قیمت Creating The Two Price Cards

• ایجاد دو کارت قیمت Creating The Two Price Cards

• تکمیل کارت های قیمت Finishing Up The Price Cards

• تکمیل کارت های قیمت Finishing Up The Price Cards

پروژه برآورد هزینه Cost Estimator Project

• معرفی پروژه برآورد هزینه Introducing The Cost Estimator Project

• ایجاد برگه های بالا Creating The Top Tabs

• اضافه کردن بخش Toggle Adding The Toggle Section

• ایجاد اسلایدر Creating The Slider

ساخت وب سایت های واکنش گرا با پرسش های رسانه ای Making Responsive Websites With Media Queries

• معرفی طراحی ریسپانسیو Introducing Responsive Design

• اولین پرسش رسانه ای ما Our First Media Query

• بیشتر در مورد پرسش های رسانه ای More On Media Queries

• کار با ویژگی های رسانه Working With Media Features

• کار با ویژگی های رسانه Working With Media Features

• اپراتورهای منطقی پرسش رسانه Media Query Logical Operators

• اپراتورهای منطقی پرسش رسانه Media Query Logical Operators

• تمرین پرسش های رسانه ای Media Queries Exercise

• پرسش‌های رسانه‌ای سطح 4 و 5 Media Queries Level 4 & 5

• نقاط شکست متداول پاسخگو Common Responsive Breakpoints

• ایجاد یک نوار ناوبری پاسخگو ساده Creating a Simple Responsive Navbar

• ایجاد یک نوار ناوبری پاسخگو ساده Creating a Simple Responsive Navbar

• نسخه ی نمایشی گرید Flexbox پاسخگو Responsive Flexbox Grid Demo

• نسخه ی نمایشی گرید Flexbox پاسخگو Responsive Flexbox Grid Demo

• اولین موبایل در مقابل طراحی دسکتاپ اول Mobile First vs. Desktop First Design

• اولین موبایل در مقابل طراحی دسکتاپ اول Mobile First vs. Desktop First Design

• ساخت یک چیدمان ساده برای موبایل Building a Simple Mobile-First Layout

• ساخت یک چیدمان ساده برای موبایل Building a Simple Mobile-First Layout

ساخت وب سایت های واکنش گرا با پرسش های رسانه ای Making Responsive Websites With Media Queries

• معرفی طراحی ریسپانسیو Introducing Responsive Design

• اولین پرسش رسانه ای ما Our First Media Query

• بیشتر در مورد پرسش های رسانه ای More On Media Queries

• تمرین پرسش های رسانه ای Media Queries Exercise

• پرسش‌های رسانه‌ای سطح 4 و 5 Media Queries Level 4 & 5

• نقاط شکست متداول پاسخگو Common Responsive Breakpoints

پاسخگو کردن پروژه های ما Making Our Projects Responsive

• ساخت Cantilever پاسخگو Making Cantilever Responsive

• ساخت Cantilever پاسخگو Making Cantilever Responsive

• پاسخگو کردن پورتفولیوی پاتر Making Potter Portfolio Responsive

• پاسخگو کردن پورتفولیوی پاتر Making Potter Portfolio Responsive

• Responsive ساختن پروژه Hazel CV Making Hazel CV Project Responsive

• Responsive ساختن پروژه Hazel CV Making Hazel CV Project Responsive

• پاسخگو ساختن برآوردگر هزینه Making Cost Estimator Responsive

• پاسخگو ساختن برآوردگر هزینه Making Cost Estimator Responsive

پاسخگو کردن پروژه های ما Making Our Projects Responsive

CSS Grid قسمت 1 CSS Grid Part 1

• معرفی CSS Grid Introducing CSS Grid

• معرفی CSS Grid Introducing CSS Grid

• فعال کردن CSS Grid Enabling CSS Grid

• فعال کردن CSS Grid Enabling CSS Grid

• Grid-Template-Columns Grid-Template-Columns

• Grid-Template-Rows Grid-Template-Rows

• تمرین شبکه 1 Grid Exercise 1

• املاک کوتاه نویسی Grid-Template Grid-Template Shorthand Property

• تابع Minmax(). The Minmax() Function

• کار با Repeat() Working With Repeat()

• مناسب محتوا Fit-Content

• مناسب محتوا Fit-Content

• کنترل شکاف های شبکه Controlling Grid Gaps

• کنترل شکاف های شبکه Controlling Grid Gaps

• تمرین شبکه 2 Grid Exercise 2

• تمرین شبکه 2 Grid Exercise 2

CSS Grid قسمت 1 CSS Grid Part 1

• Grid-Template-Columns Grid-Template-Columns

• Grid-Template-Rows Grid-Template-Rows

• تمرین شبکه 1 Grid Exercise 1

• املاک کوتاه نویسی Grid-Template Grid-Template Shorthand Property

• تابع Minmax(). The Minmax() Function

• کار با Repeat() Working With Repeat()

CSS Grid قسمت 2 CSS Grid Part 2

• کار با خطوط شبکه Working with Grid Lines

• کار با خطوط شبکه Working with Grid Lines

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

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

• کلمه کلیدی Span The Span Keyword

• املاک اختصاری Grid-Area The Grid-Area Shorthand Property

• املاک اختصاری Grid-Area The Grid-Area Shorthand Property

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

• شبکه-الگو-مناطق Grid-Template-Areas

• استفاده از Grid-Template-Areas with Rows & Cols Using Grid-Template-Areas With Rows & Cols

• استفاده از Grid-Template-Areas with Rows & Cols Using Grid-Template-Areas With Rows & Cols

• Grid-Auto-Flow Grid-Auto-Flow

• Grid-Auto-Flow Grid-Auto-Flow

• ستون ها و ردیف های خودکار شبکه Grid Auto Columns & Rows

• ستون ها و ردیف های خودکار شبکه Grid Auto Columns & Rows

• تنظیم خودکار و تکمیل خودکار Autofit and Autofill

CSS Grid قسمت 2 CSS Grid Part 2

• کلمه کلیدی Span The Span Keyword

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

• شبکه-الگو-مناطق Grid-Template-Areas

• تنظیم خودکار و تکمیل خودکار Autofit and Autofill

پروژه گرید Grid Project

• معرفی پروژه گرید ما Introducing Our Grid Project

• ایجاد همپوشانی تصویر نقطه 1 Creating Image Overlay Pt 1

• ایجاد همپوشانی تصویر نقطه 2 Creating Image Overlay Pt 2

• افزودن در تصاویر ما Adding In Our Images

• قرار دادن تصاویر ما روی شبکه Positioning Our Images On The Grid

• پاسخگو کردن طرح بندی شبکه ما Making Our Grid Layout Responsive

• پاسخگو کردن طرح بندی شبکه ما Making Our Grid Layout Responsive

• رفع پوشش های تصویری ما Fixing Our Image Overlays

• ساخت نوار ناوبری Building The Navbar

• ساخت نوار ناوبری Building The Navbar

• نهایی کردن نوار نوار و پاورقی Finalizing The Navbar and Footer

• ایجاد دکمه همبرگر Creating The Hamburger Button

• ایجاد دکمه همبرگر Creating The Hamburger Button

پروژه گرید Grid Project

• معرفی پروژه گرید ما Introducing Our Grid Project

• ایجاد همپوشانی تصویر نقطه 1 Creating Image Overlay Pt 1

• ایجاد همپوشانی تصویر نقطه 2 Creating Image Overlay Pt 2

• افزودن در تصاویر ما Adding In Our Images

• قرار دادن تصاویر ما روی شبکه Positioning Our Images On The Grid

• رفع پوشش های تصویری ما Fixing Our Image Overlays

• ساخت نوار ناوبری Building The Navbar

• نهایی کردن نوار نوار و پاورقی Finalizing The Navbar and Footer

ساخت انیمیشن ها Building Animations

• معرفی انیمیشن های Keyframes Introducing Keyframes Animations

• تعریف @keyframes Defining @keyframes

• با @Keyframes بیشتر تمرین کنید More Practice With @Keyframes

• با @Keyframes بیشتر تمرین کنید More Practice With @Keyframes

• تاخیر انیمیشن، تکرار، و بیشتر! Animation Delay, Repeat, and More!

• استفاده مجدد از انیمیشن ها Reusing Animations

• ویژگی کوتاه نویسی انیمیشن Animation Shorthand Property

• ساخت انیمیشن ساده اسپینر Building A Simple Spinner Animation

• ایجاد یک لودر پیچیده تر Creating a More Complex Loader

• ویژگی حالت پر کردن انیمیشن The Animation Fill Mode Property

ساخت انیمیشن ها Building Animations

• معرفی انیمیشن های Keyframes Introducing Keyframes Animations

• تعریف @keyframes Defining @keyframes

• تاخیر انیمیشن، تکرار، و بیشتر! Animation Delay, Repeat, and More!

• استفاده مجدد از انیمیشن ها Reusing Animations

• ویژگی کوتاه نویسی انیمیشن Animation Shorthand Property

• ساخت انیمیشن ساده اسپینر Building A Simple Spinner Animation

• ایجاد یک لودر پیچیده تر Creating a More Complex Loader

• ویژگی حالت پر کردن انیمیشن The Animation Fill Mode Property

ساخت نوار ناوبری کشوی موبایل Building A Mobile Drawer Navbar

• دراور انیمیشن ما را معرفی می کنیم Introducing Our Animated Drawer

• دراور انیمیشن ما را معرفی می کنیم Introducing Our Animated Drawer

• نوشتن انیمیشن های نوار فردی Writing The Individual Bar Animations

• یک دوره آموزشی تصادف با سرعت نور در جاوا اسکریپت A Lightspeed Crash Course In JavaScript

• کار کردن دکمه همبرگر ما Making Our Hamburger Button Work

• ایجاد منوی کشوی موبایل Creating The Mobile Drawer Menu

• ایجاد منوی کشوی موبایل Creating The Mobile Drawer Menu

• متحرک سازی کشویی کشو Animating The Drawer Slide-Out

• متحرک سازی کشویی کشو Animating The Drawer Slide-Out

ساخت نوار ناوبری کشوی موبایل Building A Mobile Drawer Navbar

• نوشتن انیمیشن های نوار فردی Writing The Individual Bar Animations

• یک دوره آموزشی تصادف با سرعت نور در جاوا اسکریپت A Lightspeed Crash Course In JavaScript

• کار کردن دکمه همبرگر ما Making Our Hamburger Button Work

::قبل و ::پس از شبه عناصر ::before and ::after Pseudo-Elements

• معرفی قبل و بعد Introducing Before and After

• معرفی قبل و بعد Introducing Before and After

• ایجاد نقل قول های تزئینی با عناصر شبه Creating Decorative Quotes With Pseudo-Elements

• ایجاد نقل قول های تزئینی با عناصر شبه Creating Decorative Quotes With Pseudo-Elements

• مرزهای گرادیان با شبه عناصر Gradient Borders With Pseudo-Elements

• مرزهای گرادیان با شبه عناصر Gradient Borders With Pseudo-Elements

• دکمه های متحرک فانتزی با عناصر شبه Fancy Animated Buttons With Pseudo-Elements

• اسپینر متحرک فوق العاده فانتزی با عناصر شبه Super Fancy Animated Spinner With Pseudo-Elements

• اسپینر متحرک فوق العاده فانتزی با عناصر شبه Super Fancy Animated Spinner With Pseudo-Elements

• کنترل های فرم سفارشی با عناصر شبه Custom Form Controls With Pseudo-Elements

::قبل و ::پس از شبه عناصر ::before and ::after Pseudo-Elements

• دکمه های متحرک فانتزی با عناصر شبه Fancy Animated Buttons With Pseudo-Elements

• کنترل های فرم سفارشی با عناصر شبه Custom Form Controls With Pseudo-Elements

CSS مدرن Modern CSS

• معرفی متغیرهای CSS Introducing CSS Variables

• نوشتن متغیرهای CSS Writing CSS Variables

• شبه کلاس :root The :root pseudo-class

• متغیرها و پرسش های رسانه ای Variables and Media Queries

• متغیرها و پرسش های رسانه ای Variables and Media Queries

• استفاده از متغیرها برای اندازه ها Using Variables For Sizes

• استفاده از متغیرها برای اندازه ها Using Variables For Sizes

• معرفی Calc() Introducing Calc()

• قوانین Calc() The Rules of Calc()

• قوانین Calc() The Rules of Calc()

• مثال دیگری از استفاده از Calc() Another Example of Using Calc()

• مثال دیگری از استفاده از Calc() Another Example of Using Calc()

CSS مدرن Modern CSS

• معرفی متغیرهای CSS Introducing CSS Variables

• نوشتن متغیرهای CSS Writing CSS Variables

• شبه کلاس :root The :root pseudo-class

• معرفی Calc() Introducing Calc()

Swipe Mega Project Swipe Mega Project

• معرفی Swipe Introducing Swipe

• تنظیم متغیرهای فونت ما Setting Up Our Font Variables

• تنظیم متغیرهای فونت ما Setting Up Our Font Variables

• تعریف سبک های اصلی سرفصل Defining Basic Heading Styles

• نوشتن سبک های عمومی پیوند Writing General Link Styles

• تعریف استایل های بدن Defining Body Styles

• ایجاد کلاس های متنی ما - زیرنویس، متن ثانویه Creating our Text Classes - Subtitle, Secondary Text

• ایجاد کلاس های متنی ما - زیرنویس، متن ثانویه Creating our Text Classes - Subtitle, Secondary Text

• تعریف سبک های دکمه ما - دکمه های اولیه و ثانویه Defining Our Button Styles - Primary & Secondary Buttons

• تعریف سبک های دکمه ما - دکمه های اولیه و ثانویه Defining Our Button Styles - Primary & Secondary Buttons

• ایجاد دکمه های ما با آیکون های متحرک Creating Our Buttons With Animated Icons

• ایجاد دکمه های ما با آیکون های متحرک Creating Our Buttons With Animated Icons

Swipe Mega Project Swipe Mega Project

• معرفی Swipe Introducing Swipe

• تعریف سبک های اصلی سرفصل Defining Basic Heading Styles

• نوشتن سبک های عمومی پیوند Writing General Link Styles

• تعریف استایل های بدن Defining Body Styles

Swipe Project Pt 2 Swipe Project Pt 2

• ساخت نوار ناوبری Building The Navbar

• ساخت نوار ناوبری Building The Navbar

• تعریف کلاس های طرح بندی دو ستونی ما Defining Our Two-Column Layout Classes

• تعریف کلاس های طرح بندی دو ستونی ما Defining Our Two-Column Layout Classes

• نوشتن نشانه گذاری قهرمان Writing The Hero Markup

• نوشتن نشانه گذاری قهرمان Writing The Hero Markup

• یک ظاهر طراحی شده به قهرمان صفحه Styling The Page Hero

• یک ظاهر طراحی شده به قهرمان صفحه Styling The Page Hero

• ساخت بخش شبکه شرکا Building The Partners Grid Section

• ساخت بخش شبکه شرکا Building The Partners Grid Section

• افزودن بخش پلتفرم یکپارچه Adding The Unified Platform Section

• ایجاد شبکه عکس های گرافیکی ما Creating Our Graphic Photos Grid

• ایجاد شبکه عکس های گرافیکی ما Creating Our Graphic Photos Grid

• نوشتن کلاس کارت قابل استفاده مجدد ما Writing Our Reusable Card Class

• اضافه کردن بخش ادغام Adding The Integrations Section

• تعریف بخش Why Swipe Defining The Why Swipe Section

Swipe Project Pt 2 Swipe Project Pt 2

• ساخت نوار ناوبری Building The Navbar

• افزودن بخش پلتفرم یکپارچه Adding The Unified Platform Section

• نوشتن کلاس کارت قابل استفاده مجدد ما Writing Our Reusable Card Class

• اضافه کردن بخش ادغام Adding The Integrations Section

• تعریف بخش Why Swipe Defining The Why Swipe Section

نقطه 3 را بکشید Swipe Pt 3

• ایجاد بخش جهانی Creating The Global Section

• موقعیت یابی تصویر گلوب Positioning The Globe Image

• موقعیت یابی تصویر گلوب Positioning The Globe Image

• افزودن نشانه گذاری بخش رویدادهای مجازی Adding The Virtual Events Section Markup

• افزودن نشانه گذاری بخش رویدادهای مجازی Adding The Virtual Events Section Markup

• حالت دادن به بخش رویدادهای مجازی Styling The Virtual Events Section

• ساخت بخش شروع Building The Getting Started Section

• نوشتن نشانه گذاری پاورقی صفحه Writing The Page Footer Markup

• سبک دادن به پاورقی صفحه Styling The Page Footer

• اضافه کردن اولین نوار زاویه دار Adding The First Angled Stripe

• اضافه کردن اولین نوار زاویه دار Adding The First Angled Stripe

• پایان دادن به راه راه های زاویه دار Finishing The Angled Stripes

• پایان دادن به راه راه های زاویه دار Finishing The Angled Stripes

• ایجاد پس‌زمینه قهرمان گرادیان متحرک Creating The Animated Gradient Hero Background

• ایجاد پس‌زمینه قهرمان گرادیان متحرک Creating The Animated Gradient Hero Background

• رفع یک مشکل با راه راه های زاویه دار ما Fixing An Issue With Our Angled Stripes

نقطه 3 را بکشید Swipe Pt 3

• ایجاد بخش جهانی Creating The Global Section

• حالت دادن به بخش رویدادهای مجازی Styling The Virtual Events Section

• ساخت بخش شروع Building The Getting Started Section

• نوشتن نشانه گذاری پاورقی صفحه Writing The Page Footer Markup

• سبک دادن به پاورقی صفحه Styling The Page Footer

• رفع یک مشکل با راه راه های زاویه دار ما Fixing An Issue With Our Angled Stripes

نقطه 4 را بکشید: پاسخگو کردن Swipe Pt 4: Making It Responsive

• شروع به پاسخگو کردن Swipe Starting To Make Swipe Responsive

• شروع به پاسخگو کردن Swipe Starting To Make Swipe Responsive

• پاسخگو کردن شبکه شرکا Making The Partners Grid Responsive

• پاسخگو کردن بخش پلتفرم متحد Making The Unified Platform Section Responsive

• پاسخگو کردن بخش ادغام ها Making The Integrations Section Responsive

• پاسخگو کردن بخش Why Swipe Making The Why Swipe Section Responsive

• پاسخگو کردن بخش جهانی Making The Global Section Responsive

• پاسخگو کردن بخش جهانی Making The Global Section Responsive

• پاسخگو کردن بخش رویدادهای مجازی Making The Virtual Events Section Responsive

• پاسخگو کردن پایین صفحه Making The Bottom of The Page Responsive

• پاسخگو کردن پایین صفحه Making The Bottom of The Page Responsive

• ریسپانسیو کردن قهرمان صفحه Making The Page Hero Responsive

• ریسپانسیو کردن قهرمان صفحه Making The Page Hero Responsive

• افزودن نوار ناوبری پاسخگو ما Adding Our Responsive Navbar

• افزودن نوار ناوبری پاسخگو ما Adding Our Responsive Navbar

• ترفندهای پاسخگو برای راه راه های پس زمینه Responsive Tweaks To Background Stripes

• پاکسازی CSS ما Cleaning Up Our CSS

• رفع یک مشکل جزئی با شعاع مرزی Fixing A Minor Issue With Border Radius

• رفع یک مشکل جزئی با شعاع مرزی Fixing A Minor Issue With Border Radius

• رفع یک مشکل جزئی دیگر با شبکه شرکا Fixing Another Minor Issue With Partners Grid

• رفع یک مشکل جزئی دیگر با شبکه شرکا Fixing Another Minor Issue With Partners Grid

نقطه 4 را بکشید: پاسخگو کردن Swipe Pt 4: Making It Responsive

• پاسخگو کردن شبکه شرکا Making The Partners Grid Responsive

• پاسخگو کردن بخش پلتفرم متحد Making The Unified Platform Section Responsive

• پاسخگو کردن بخش ادغام ها Making The Integrations Section Responsive

• پاسخگو کردن بخش Why Swipe Making The Why Swipe Section Responsive

• پاسخگو کردن بخش رویدادهای مجازی Making The Virtual Events Section Responsive

• ترفندهای پاسخگو برای راه راه های پس زمینه Responsive Tweaks To Background Stripes

• پاکسازی CSS ما Cleaning Up Our CSS