دوره آموزشی HTML&CSS و پروژه ها 2023 (Flexbox&Grid)

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

معرفی دوره Course Intro

• ساختار دوره Course Structure

• رفع تاری ویدیو Video Blur Fix

• بررسی دوره Course Review

معرفی دوره Course Intro

• ساختار دوره Course Structure

• رفع تاری ویدیو Video Blur Fix

• بررسی دوره Course Review

آموزش HTML HTML Tutorial

• معرفی HTML HTML Intro

• کد گوگل کروم و ویژوال استودیو Google Chrome and Visual Studio Code

• گوگل کروم را دانلود کنید Download Google Chrome

• کد ویژوال استودیو را دانلود کنید Download Visual Studio Code

• نمای کلی کد ویژوال استودیو Visual Studio Code Overview

• ایجاد یک پروژه Create A Project

• اولین صفحه وب First Webpage

• ساختار سند پایه HTML Basic HTML Document Structure

• پیاده سازی ساختار سند HTML Implement HTML Document Structure

• راه اندازی برنامه افزودنی سرور زنده Live Server Extension Setup

• تنظیمات اضافی و Emmet Extra Settings and Emmet

• عناصر سرفصل Heading Elements

• منابع ویدئویی Video Resources

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

• در حال فروپاشی فضای سفید White Space Collapsing

• لورم اپیسوم Lorem Ipsum

• مبانی تصویر Image Basics

• تصاویر متعدد Multiple Images

• تصاویر خارجی External Images

• تصاویر زیبا Nice Images

• عرض و ارتفاع Width and Height

• برش تصاویر Crop Images

• نظرات و خطوط شکست Comments and Line Breaks

• لینک های خارجی External Links

• لینک های داخلی Internal Links

• پیوندها - در یک صفحه Links - Within a Page

• پیوندهای تصویری - پیوندهای خالی Image Links - Empty Links

• عناصر Sup و Sub Sup and Sub Elements

• عناصر قوی و EM STRONG and EM Elements

• شخصیت های خاص Special Characters

• لیست های نامرتب Unordered Lists

• لیست های مرتب شده Ordered Lists

• لیست های تو در تو Nested Lists

• عنصر جدول Table Element

• فرم ها - عناصر ورودی و عناصر ارسالی Forms - Input Elements and Submit Elements

• فرم ها - Textarea، رادیو، چک باکس ها، انتخاب کنید Forms - Textarea, Radio,Checkboxes, Select

• Prettier Code Formatter را نصب کنید Install Prettier Code Formatter

• میانبرهای صفحه کلید Keyboard Shortcuts

• عنصر سر - منابع خارجی Head Element - External Resources

آموزش HTML HTML Tutorial

• معرفی HTML HTML Intro

• کد گوگل کروم و ویژوال استودیو Google Chrome and Visual Studio Code

• گوگل کروم را دانلود کنید Download Google Chrome

• کد ویژوال استودیو را دانلود کنید Download Visual Studio Code

• نمای کلی کد ویژوال استودیو Visual Studio Code Overview

• ایجاد یک پروژه Create A Project

• اولین صفحه وب First Webpage

• ساختار سند پایه HTML Basic HTML Document Structure

• پیاده سازی ساختار سند HTML Implement HTML Document Structure

• راه اندازی برنامه افزودنی سرور زنده Live Server Extension Setup

• تنظیمات اضافی و Emmet Extra Settings and Emmet

• عناصر سرفصل Heading Elements

• منابع ویدئویی Video Resources

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

• در حال فروپاشی فضای سفید White Space Collapsing

• لورم اپیسوم Lorem Ipsum

• مبانی تصویر Image Basics

• تصاویر متعدد Multiple Images

• تصاویر خارجی External Images

• تصاویر زیبا Nice Images

• عرض و ارتفاع Width and Height

• برش تصاویر Crop Images

• نظرات و خطوط شکست Comments and Line Breaks

• لینک های خارجی External Links

• لینک های داخلی Internal Links

• پیوندها - در یک صفحه Links - Within a Page

• پیوندهای تصویری - پیوندهای خالی Image Links - Empty Links

• عناصر Sup و Sub Sup and Sub Elements

• عناصر قوی و EM STRONG and EM Elements

• شخصیت های خاص Special Characters

• لیست های نامرتب Unordered Lists

• لیست های مرتب شده Ordered Lists

• لیست های تو در تو Nested Lists

• عنصر جدول Table Element

• فرم ها - عناصر ورودی و عناصر ارسالی Forms - Input Elements and Submit Elements

• فرم ها - Textarea، رادیو، چک باکس ها، انتخاب کنید Forms - Textarea, Radio,Checkboxes, Select

• Prettier Code Formatter را نصب کنید Install Prettier Code Formatter

• میانبرهای صفحه کلید Keyboard Shortcuts

• عنصر سر - منابع خارجی Head Element - External Resources

پروژه HTML Coffee HTML Coffee Project

• مقدمه Intro

• برپایی Setup

• دارایی های پروژه Project Assets

• دانلود تصاویر Download Images

• لوگو، عنوان، و نوار ناوبری Logo, Heading, and Navbar

• صفحه نخست Home Page

• در باره About

• شماره Numbers

• مخاطب Contact

• پروژه کامل Complete Project

پروژه HTML Coffee HTML Coffee Project

• مقدمه Intro

• برپایی Setup

• دارایی های پروژه Project Assets

• دانلود تصاویر Download Images

• لوگو، عنوان، و نوار ناوبری Logo, Heading, and Navbar

• صفحه نخست Home Page

• در باره About

• شماره Numbers

• مخاطب Contact

• پروژه کامل Complete Project

آموزش CSS CSS Tutorial

• معرفی CSS CSS Intro

• راه اندازی فضای کاری Workspace Setup

• راه اندازی ویرایشگر متن Text Editor Setup

• منابع ویدئویی Video Resources

• CSS درون خطی Inline CSS

• CSS داخلی Internal CSS

• CSS خارجی External CSS

• مبارزه قدرت Power Struggle

• نحو اولیه CSS Basic CSS Syntax

• انتخابگرهای عنصر Element Selectors

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

• انتخابگرهای شناسه ID Selectors

• انتخاب کنندگان کلاس Class Selectors

• خلاصه شناسه و انتخابگر کلاس ID and Class Selector Summary

• عناصر DIV و SPAN DIV and SPAN Elements

• وراثت در CSS Inheritance in CSS

• ارث - اطلاعات بیشتر Inheritance - More Info

• آخرین قانون، ویژگی و انتخابگر جهانی Last Rule, Specificity and Universal Selector

• انتخابگرهای ترکیبی - انتخابگر نسل Combine Selectors - Descendant Selector

آموزش CSS CSS Tutorial

• معرفی CSS CSS Intro

• راه اندازی فضای کاری Workspace Setup

• راه اندازی ویرایشگر متن Text Editor Setup

• منابع ویدئویی Video Resources

• CSS درون خطی Inline CSS

• CSS داخلی Internal CSS

• CSS خارجی External CSS

• مبارزه قدرت Power Struggle

• نحو اولیه CSS Basic CSS Syntax

• انتخابگرهای عنصر Element Selectors

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

• انتخابگرهای شناسه ID Selectors

• انتخاب کنندگان کلاس Class Selectors

• خلاصه شناسه و انتخابگر کلاس ID and Class Selector Summary

• عناصر DIV و SPAN DIV and SPAN Elements

• وراثت در CSS Inheritance in CSS

• ارث - اطلاعات بیشتر Inheritance - More Info

• آخرین قانون، ویژگی و انتخابگر جهانی Last Rule, Specificity and Universal Selector

• انتخابگرهای ترکیبی - انتخابگر نسل Combine Selectors - Descendant Selector

معرفی همه پروژه ها All Projects Intro

• معرفی همه پروژه ها All Projects Intro

• پروژه کامل Complete Project

معرفی همه پروژه ها All Projects Intro

• معرفی همه پروژه ها All Projects Intro

• پروژه کامل Complete Project

پروژه مبانی Fundamentals Project

• اولین معرفی پروژه First Project Intro

• مراحل Steps

• پروژه کامل Complete Project

• پوشه پروژه ها Projects Folder

پروژه مبانی Fundamentals Project

• اولین معرفی پروژه First Project Intro

• مراحل Steps

• پروژه کامل Complete Project

• پوشه پروژه ها Projects Folder

رنگ های CSS CSS Colors

• معرفی رنگ ها Colors Intro

• رنگ و ویژگی های رنگ پس زمینه Color and Background-color Properties

• نام رنگ ها Color Names

• RGB RGB

• RGBA RGBA

• مقادیر HEX HEX Values

• گزینه های رنگ VS-Code VS-Code Color Options

• منابع خارجی External Resources

رنگ های CSS CSS Colors

• معرفی رنگ ها Colors Intro

• رنگ و ویژگی های رنگ پس زمینه Color and Background-color Properties

• نام رنگ ها Color Names

• RGB RGB

• RGBA RGBA

• مقادیر HEX HEX Values

• گزینه های رنگ VS-Code VS-Code Color Options

• منابع خارجی External Resources

پروژه رنگ ها Colors Project

• مقدمه Intro

• مراحل Steps

• پروژه کامل Complete Project

پروژه رنگ ها Colors Project

• مقدمه Intro

• مراحل Steps

• پروژه کامل Complete Project

واحدهای CSS CSS Units

• معرفی واحدها Units Intro

• پیکسل، اندازه قلم، عرض، ارتفاع Pixels, Font-Size, Width, Height

• واحدهای درصد Percent Units

• واحدهای Em Em Units

• واحدهای رم Rem Units

• Vh و Vw Vh and Vw

• سبک های پیش فرض مرورگر و ابزارهای توسعه دهنده کروم Default Browser Styles and Chrome DevTools

• تابع کالک Calc Function

• حداقل ارتفاع، حداکثر ارتفاع Min-height, Max-height

واحدهای CSS CSS Units

• معرفی واحدها Units Intro

• پیکسل، اندازه قلم، عرض، ارتفاع Pixels, Font-Size, Width, Height

• واحدهای درصد Percent Units

• واحدهای Em Em Units

• واحدهای رم Rem Units

• Vh و Vw Vh and Vw

• سبک های پیش فرض مرورگر و ابزارهای توسعه دهنده کروم Default Browser Styles and Chrome DevTools

• تابع کالک Calc Function

• حداقل ارتفاع، حداکثر ارتفاع Min-height, Max-height

پروژه واحدها Units Project

• مقدمه Intro

• مراحل Steps

• پروژه کامل Complete Project

پروژه واحدها Units Project

• مقدمه Intro

• مراحل Steps

• پروژه کامل Complete Project

تایپوگرافی Typography

• معرفی تایپوگرافی Typography Intro

• فونت-خانواده Font-family

• فونت-پشته فونت های عمومی Font-Stack Generic Fonts

• فونت های گوگل Google Fonts

• فونت های سیستم System Fonts

• فونت های بیشتر گوگل More Google Fonts

• وزن فونت سبک قلم Font-weight Font-style

• Text-align Text-indent Text-align Text-indent

• ویژگی های متن بیشتر More Text Properties

تایپوگرافی Typography

• معرفی تایپوگرافی Typography Intro

• فونت-خانواده Font-family

• فونت-پشته فونت های عمومی Font-Stack Generic Fonts

• فونت های گوگل Google Fonts

• فونت های سیستم System Fonts

• فونت های بیشتر گوگل More Google Fonts

• وزن فونت سبک قلم Font-weight Font-style

• Text-align Text-indent Text-align Text-indent

• ویژگی های متن بیشتر More Text Properties

پروژه تایپوگرافی Typography Project

• مقدمه Intro

• مراحل Steps

• پروژه کامل Complete Project

پروژه تایپوگرافی Typography Project

• مقدمه Intro

• مراحل Steps

• پروژه کامل Complete Project

مدل جعبه CSS CSS Box Model

• مدل جعبه - معرفی Box Model - Intro

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

• مدل جعبه CSS - حاشیه CSS Box Model - Margin

• CSS Box Model - Border CSS Box Model - Border

• حاشیه منفی شعاع مرزی Border-radius Negative Margin

• ویژگی طرح کلی Outline Property

• هک مرز Border Hack

مدل جعبه CSS CSS Box Model

• مدل جعبه - معرفی Box Model - Intro

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

• مدل جعبه CSS - حاشیه CSS Box Model - Margin

• CSS Box Model - Border CSS Box Model - Border

• حاشیه منفی شعاع مرزی Border-radius Negative Margin

• ویژگی طرح کلی Outline Property

• هک مرز Border Hack

پروژه مدل جعبه CSS CSS Box Model Project

• مقدمه Intro

• مراحل Steps

• ساختار Html Html Structure

• یک ظاهر طراحی CSS CSS Styling

پروژه مدل جعبه CSS CSS Box Model Project

• مقدمه Intro

• مراحل Steps

• ساختار Html Html Structure

• یک ظاهر طراحی CSS CSS Styling

ویژگی نمایش Display Property

• نمایش معرفی ویژگی Display Property Intro

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

• مرکز افقی پایه Basic Horizontal Centering

• نمونه نوار ناوبری موبایل Mobile Navbar Example

• اندازه جعبه: جعبه حاشیه Box-sizing : border-box

• نمایش بلوک درون خطی Display inline-block

• نمایش: هیچ، کدورت، دید Display:none, Opacity, Visibility

ویژگی نمایش Display Property

• نمایش معرفی ویژگی Display Property Intro

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

• مرکز افقی پایه Basic Horizontal Centering

• نمونه نوار ناوبری موبایل Mobile Navbar Example

• اندازه جعبه: جعبه حاشیه Box-sizing : border-box

• نمایش بلوک درون خطی Display inline-block

• نمایش: هیچ، کدورت، دید Display:none, Opacity, Visibility

پروژه املاک نمایشی Display Property Project

• مقدمه Intro

• مراحل Steps

• ساختار Html Html Structure

• یک ظاهر طراحی CSS CSS Styling

• رایج ترین سوالات Most Common Questions

پروژه املاک نمایشی Display Property Project

• مقدمه Intro

• مراحل Steps

• ساختار Html Html Structure

• یک ظاهر طراحی CSS CSS Styling

• رایج ترین سوالات Most Common Questions

تصاویر پس زمینه Background Images

• مقدمه Intro

• برپایی Setup

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

• پس زمینه-تکرار background-repeat

• اندازه پس زمینه background-size

• موقعیت پس زمینه background-position

• پس زمینه-پیوست background-attachment

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

• پوشش تصویر پس زمینه Background Image Overlay

• رنگزیلا Colorzilla

تصاویر پس زمینه Background Images

• مقدمه Intro

• برپایی Setup

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

• پس زمینه-تکرار background-repeat

• اندازه پس زمینه background-size

• موقعیت پس زمینه background-position

• پس زمینه-پیوست background-attachment

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

• پوشش تصویر پس زمینه Background Image Overlay

• رنگزیلا Colorzilla

پروژه تصاویر پس زمینه Background Images Project

• مقدمه Intro

• مراحل Steps

• برپایی Setup

• ساختار Html Html Structure

• یک ظاهر طراحی CSS CSS Styling

پروژه تصاویر پس زمینه Background Images Project

• مقدمه Intro

• مراحل Steps

• برپایی Setup

• ساختار Html Html Structure

• یک ظاهر طراحی CSS CSS Styling

موقعیت ها، شناور، پرسش های رسانه ای Positions, Float, Media Queries

• شناور، موقعیت ها، پرسش های رسانه ای، معرفی شاخص Z Float, Positions, Media Queries, Z-index Intro

• املاک شناور Float Property

• مثال طرح بندی ستون ویژگی Float Float Property Column Layout Example

• ایستا قرار دهید Position static

• موقعیت نسبی Position Relative

• موقعیت مطلق Position Absolute

• موقعیت ثابت شد Position Fixed

• موقعیت: چسبنده position:sticky

• داستان های رسانه Media Queries

• شاخص Z Z-index

• ::قبل و ::پس از مبانی ::before and ::after Basics

• ::قبل و ::پس از مثال ::before and ::after Example

• Inset Property Inset Property

موقعیت ها، شناور، پرسش های رسانه ای Positions, Float, Media Queries

• شناور، موقعیت ها، پرسش های رسانه ای، معرفی شاخص Z Float, Positions, Media Queries, Z-index Intro

• املاک شناور Float Property

• مثال طرح بندی ستون ویژگی Float Float Property Column Layout Example

• ایستا قرار دهید Position static

• موقعیت نسبی Position Relative

• موقعیت مطلق Position Absolute

• موقعیت ثابت شد Position Fixed

• موقعیت: چسبنده position:sticky

• داستان های رسانه Media Queries

• شاخص Z Z-index

• ::قبل و ::پس از مبانی ::before and ::after Basics

• ::قبل و ::پس از مثال ::before and ::after Example

• Inset Property Inset Property

پروژه املاک موقعیت Position Property Project

• مقدمه Intro

• مراحل Steps

• پروژه کامل Complete Project

پروژه املاک موقعیت Position Property Project

• مقدمه Intro

• مراحل Steps

• پروژه کامل Complete Project

انتخاب کنندگان دوباره بازدید کردند Selectors Re-Visited

• معرفی انتخابگرها Selectors Intro

• انتخابگرهای پایه Basic Selectors

• انتخاب کنندگان فرزندان و فرزندان Descendant and Child Selectors

• خط اول و حرف اول First-line and First-letter

• :Hover شبه کلاس انتخابگر :hover pseudo-class Selector

• انتخابگرهای شبه کلاس را پیوند دهید Link pseudo-class Selectors

• :root انتخابگر شبه کلاس :root pseudo-class Selector

انتخاب کنندگان دوباره بازدید کردند Selectors Re-Visited

• معرفی انتخابگرها Selectors Intro

• انتخابگرهای پایه Basic Selectors

• انتخاب کنندگان فرزندان و فرزندان Descendant and Child Selectors

• خط اول و حرف اول First-line and First-letter

• :Hover شبه کلاس انتخابگر :hover pseudo-class Selector

• انتخابگرهای شبه کلاس را پیوند دهید Link pseudo-class Selectors

• :root انتخابگر شبه کلاس :root pseudo-class Selector

تبدیل، انتقال و انیمیشن Transform, Transition and Animation

• مقدمه Intro

• transform : translate() transform : translate()

• مثال قهرمان را ترجمه کنید Translate Hero Example

• transform:scale() transform:scale()

• transform:rotate() transform:rotate()

• transform:skew() tranform:skew()

• دارایی انتقال Transition Property

• انتقال چندگانه Multiple Transitions

• انتقال - تأخیر، کوتاه نویسی، همه ویژگی ها Transition - Delay, Shorthand, All Properties

• انتقال-زمان-عملکرد Transition-timing-function

• انیمیشن Animation

• انیمیشن-پر-حالت Animation-fill-mode

تبدیل، انتقال و انیمیشن Transform, Transition and Animation

• مقدمه Intro

• transform : translate() transform : translate()

• مثال قهرمان را ترجمه کنید Translate Hero Example

• transform:scale() transform:scale()

• transform:rotate() transform:rotate()

• transform:skew() tranform:skew()

• دارایی انتقال Transition Property

• انتقال چندگانه Multiple Transitions

• انتقال - تأخیر، کوتاه نویسی، همه ویژگی ها Transition - Delay, Shorthand, All Properties

• انتقال-زمان-عملکرد Transition-timing-function

• انیمیشن Animation

• انیمیشن-پر-حالت Animation-fill-mode

پروژه انیمیشن Animation Project

• مقدمه Intro

• مراحل Steps

• پروژه کامل Complete Project

پروژه انیمیشن Animation Project

• مقدمه Intro

• مراحل Steps

• پروژه کامل Complete Project

آموزش CSS ادامه دارد CSS Tutorial Continued

• مقدمه Intro

• متغیرهای CSS CSS Variables

• FontAwesome Icons - مقدمه FontAwesome Icons - Intro

• FontAwesome Icons - گزینه Self Hosting FontAwesome Icons - Self Hosting Option

• FontAwesome Icons - پیوند CDN FontAwesome Icons - CDN Link

• FontAwesome Icons - SVG Approach FontAwesome Icons - SVG Approach

• FontAwesome Icons - نسخه ها FontAwesome Icons - Versions

• Text-Shadow Box-shadow Text-Shadow Box-shadow

• پیشوندهای مرورگر Browser Prefixes

• HTML معنایی Semantic HTML

• شیء مناسب object-fit

• گردش کار Emmet Emmet Workflow

• :است() :is()

• :not() :not()

• مقادیر رنگ HSL HSL Color Values

• برنامه افزودنی پنج سرور Five Server Extension

آموزش CSS ادامه دارد CSS Tutorial Continued

• مقدمه Intro

• متغیرهای CSS CSS Variables

• FontAwesome Icons - مقدمه FontAwesome Icons - Intro

• FontAwesome Icons - گزینه Self Hosting FontAwesome Icons - Self Hosting Option

• FontAwesome Icons - پیوند CDN FontAwesome Icons - CDN Link

• FontAwesome Icons - SVG Approach FontAwesome Icons - SVG Approach

• FontAwesome Icons - نسخه ها FontAwesome Icons - Versions

• Text-Shadow Box-shadow Text-Shadow Box-shadow

• پیشوندهای مرورگر Browser Prefixes

• HTML معنایی Semantic HTML

• شیء مناسب object-fit

• گردش کار Emmet Emmet Workflow

• :است() :is()

• :not() :not()

• مقادیر رنگ HSL HSL Color Values

• برنامه افزودنی پنج سرور Five Server Extension

آخرین پروژه آموزشی Last Tutorial Project

• مقدمه Intro

• برپایی Setup

• تصاویر و آیکون ها Images and Icons

• ساختار HTML HTML Structure

• بازنشانی کنید Reset

• متغیرهای CSS CSS Variables

• بدن Body

• کارت وبلاگ Blog Card

• تصویر وبلاگ Blog Image

• پروژه کامل Complete Project

آخرین پروژه آموزشی Last Tutorial Project

• مقدمه Intro

• برپایی Setup

• تصاویر و آیکون ها Images and Icons

• ساختار HTML HTML Structure

• بازنشانی کنید Reset

• متغیرهای CSS CSS Variables

• بدن Body

• کارت وبلاگ Blog Card

• تصویر وبلاگ Blog Image

• پروژه کامل Complete Project

پروژه ایستگاه چای Tea Station Project

• مقدمه Intro

• راه اندازی فایل ها و پروژه تمام شده Setup Files and Finished Project

• برپایی Setup

• دارایی های Assets

• متغیرهای CSS CSS Variables

• سبک های جهانی Global Styles

• هدر HTML Header HTML

• ویدیوی اضافی Additional Video

• هدر CSS Header CSS

• تقسیم کننده محتوا Content Divider

• مهارت های HTML Skills HTML

• مهارت های CSS Skills CSS

• ستون مهارت ها و Clearfix Skills Columns and Clearfix

• کلاس VS نسل Class VS Descendant

• درباره HTML About HTML

• درباره CSS About CSS

• HTML محصولات Products HTML

• CSS محصولات Products CSS

• خدمات HTML Services HTML

• خدمات CSS Services CSS

• نماد خدمات Services Icon

• با HTML تماس بگیرید Contact HTML

• با CSS تماس بگیرید Contact CSS

• پاورقی Html Footer Html

• CSS پاورقی Footer CSS

• دکمه Nav Nav Button

• Navbar Html Navbar Html

• Navbar CSS Navbar CSS

• عملکرد نوار ناوبری Navbar Functionality

• انیمیشن Animation

• چندین صفحه Multiple Pages

• ارسال فرم Form Submission

• Netlify - معرفی Netlify - Intro

• Netlify - کشیدن و رها کردن Netlify - Drag and Drop

• پروژه تمام شده Finished Project

پروژه ایستگاه چای Tea Station Project

• مقدمه Intro

• راه اندازی فایل ها و پروژه تمام شده Setup Files and Finished Project

• برپایی Setup

• دارایی های Assets

• متغیرهای CSS CSS Variables

• سبک های جهانی Global Styles

• هدر HTML Header HTML

• ویدیوی اضافی Additional Video

• هدر CSS Header CSS

• تقسیم کننده محتوا Content Divider

• مهارت های HTML Skills HTML

• مهارت های CSS Skills CSS

• ستون مهارت ها و Clearfix Skills Columns and Clearfix

• کلاس VS نسل Class VS Descendant

• درباره HTML About HTML

• درباره CSS About CSS

• HTML محصولات Products HTML

• CSS محصولات Products CSS

• خدمات HTML Services HTML

• خدمات CSS Services CSS

• نماد خدمات Services Icon

• با HTML تماس بگیرید Contact HTML

• با CSS تماس بگیرید Contact CSS

• پاورقی Html Footer Html

• CSS پاورقی Footer CSS

• دکمه Nav Nav Button

• Navbar Html Navbar Html

• Navbar CSS Navbar CSS

• عملکرد نوار ناوبری Navbar Functionality

• انیمیشن Animation

• چندین صفحه Multiple Pages

• ارسال فرم Form Submission

• Netlify - معرفی Netlify - Intro

• Netlify - کشیدن و رها کردن Netlify - Drag and Drop

• پروژه تمام شده Finished Project

راه اندازی Git و Github Git and Github Setup

• بخش اختیاری Optional Section

• مقدمه Intro

• Git Install Git Install

• دستورات Git Git Commands

• Github را راه اندازی کنید Setup Github

• فواید Benefits

راه اندازی Git و Github Git and Github Setup

• بخش اختیاری Optional Section

• مقدمه Intro

• Git Install Git Install

• دستورات Git Git Commands

• Github را راه اندازی کنید Setup Github

• فواید Benefits

CSS FLEXBOX CSS FLEXBOX

• معرفی CSS Flexbox CSS Flexbox Intro

• برپایی Setup

• قراردادهای نامگذاری Naming Conventions

• جهت انعطاف پذیری flex-direction

• بسته بندی انعطاف پذیر flex-wrap

• توجیه-محتوا justify-content

• تراز کردن آیتم ها align-items

• پروژه قهرمان Hero Project

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

• محور اصلی/محور متقاطع Main Axis / Cross Axis

• سفارش ملک order property

• خود تراز کردن align-self

• رشد انعطاف پذیر flex-grow

• انعطاف پذیر flex-shrink

• فلکس پایه و فلکس flex-basis and flex

• ویژگی های جدید FLEXBOX !!! NEW FLEXBOX FEATURES !!!

CSS FLEXBOX CSS FLEXBOX

• معرفی CSS Flexbox CSS Flexbox Intro

• برپایی Setup

• قراردادهای نامگذاری Naming Conventions

• جهت انعطاف پذیری flex-direction

• بسته بندی انعطاف پذیر flex-wrap

• توجیه-محتوا justify-content

• تراز کردن آیتم ها align-items

• پروژه قهرمان Hero Project

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

• محور اصلی/محور متقاطع Main Axis / Cross Axis

• سفارش ملک order property

• خود تراز کردن align-self

• رشد انعطاف پذیر flex-grow

• انعطاف پذیر flex-shrink

• فلکس پایه و فلکس flex-basis and flex

• ویژگی های جدید FLEXBOX !!! NEW FLEXBOX FEATURES !!!

شرکت تور بکرود Backroads Tour Company

• مقدمه Intro

• راه اندازی فایل ها و پروژه تمام شده Setup Files and Finished Project

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

• سایه های رنگی Color Shades

• لوگو Logo

• فاویکون Favicon

• HTML قهرمان Hero HTML

• CSS قهرمان Hero CSS

• درباره HTML About HTML

• درباره CSS About CSS

• درباره چیدمان ستون About Column Layout

• خدمات HTML Services HTML

• خدمات CSS Services CSS

• تورهای HTML Tours HTML

• CSS تورها Tours CSS

• طراحی اضافی Additional Design

• با HTML تماس بگیرید Contact HTML

• با CSS تماس بگیرید Contact CSS

• HTML گالری Gallery HTML

• CSS گالری Gallery CSS

• پاورقی HTML Footer HTML

• CSS پاورقی Footer CSS

• نوار HTML Navbar HTML

• Navbar CSS - صفحه نمایش کوچک Navbar CSS - Small Screen

• جابجایی نوار ناوبری Navbar Toggle

• اسکرول صاف Smooth Scroll

• Navbar CSS - صفحه بزرگ Navbar CSS - Big Screen

• پیشوند خودکار Autoprefixer

• Netlify - استقرار مداوم Netlify - Continuous Deployment

• پروژه تمام شده Finished Project

شرکت تور بکرود Backroads Tour Company

• مقدمه Intro

• راه اندازی فایل ها و پروژه تمام شده Setup Files and Finished Project

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

• سایه های رنگی Color Shades

• لوگو Logo

• فاویکون Favicon

• HTML قهرمان Hero HTML

• CSS قهرمان Hero CSS

• درباره HTML About HTML

• درباره CSS About CSS

• درباره چیدمان ستون About Column Layout

• خدمات HTML Services HTML

• خدمات CSS Services CSS

• تورهای HTML Tours HTML

• CSS تورها Tours CSS

• طراحی اضافی Additional Design

• با HTML تماس بگیرید Contact HTML

• با CSS تماس بگیرید Contact CSS

• HTML گالری Gallery HTML

• CSS گالری Gallery CSS

• پاورقی HTML Footer HTML

• CSS پاورقی Footer CSS

• نوار HTML Navbar HTML

• Navbar CSS - صفحه نمایش کوچک Navbar CSS - Small Screen

• جابجایی نوار ناوبری Navbar Toggle

• اسکرول صاف Smooth Scroll

• Navbar CSS - صفحه بزرگ Navbar CSS - Big Screen

• پیشوند خودکار Autoprefixer

• Netlify - استقرار مداوم Netlify - Continuous Deployment

• پروژه تمام شده Finished Project

آموزش گرید CSS CSS Grid Tutorial

• CSS Grid - مقدمه CSS Grid - Intro

• برپایی Setup

• نحو پایه - شبکه-الگو-ستون ها Basic Syntax - grid-template-columns

• شبکه ضمنی Implicit Grid

• راه اندازی کلی CSS General CSS Setup

• واحدها - خودکار Units - auto

• grid-template-rows grid-template-rows

• واحدهای fr fr units

• دارایی شکاف gap property

• شکاف - نحو جدید! Gap - New Syntax!

• fr در مقابل % fr vs %

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

• خطوط شبکه grid-lines

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

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

• سفارش ملک Order Property

• عملکرد تکرار Repeat Function

• توجیه-محتوا justify-content

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

• تراز کردن آیتم ها، توجیه کردن آیتم ها، تراز کردن خود، توجیه کردن خود align-items, jusitfy-items, align-self,justify-self

• minmax() minmax()

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

آموزش گرید CSS CSS Grid Tutorial

• CSS Grid - مقدمه CSS Grid - Intro

• برپایی Setup

• نحو پایه - شبکه-الگو-ستون ها Basic Syntax - grid-template-columns

• شبکه ضمنی Implicit Grid

• راه اندازی کلی CSS General CSS Setup

• واحدها - خودکار Units - auto

• grid-template-rows grid-template-rows

• واحدهای fr fr units

• دارایی شکاف gap property

• شکاف - نحو جدید! Gap - New Syntax!

• fr در مقابل % fr vs %

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

• خطوط شبکه grid-lines

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

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

• سفارش ملک Order Property

• عملکرد تکرار Repeat Function

• توجیه-محتوا justify-content

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

• تراز کردن آیتم ها، توجیه کردن آیتم ها، تراز کردن خود، توجیه کردن خود align-items, jusitfy-items, align-self,justify-self

• minmax() minmax()

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

پروژه های کوچک گرید Grid Mini Projects

• مقدمه Intro

• راه اندازی فایل ها و پروژه تمام شده Setup Files and Finished Project

• برپایی Setup

• سبک های جهانی Global Styles

• پروژه ناوبار مینی Navbar Mini Project

• HTML قهرمان Hero HTML

• CSS قهرمان Hero CSS

• کارت های HTML Cards HTML

• کارت های CSS - صفحه نمایش کوچک Cards CSS - Small Screen

• کارت های CSS - صفحه نمایش بزرگ با پرسش های رسانه ای Cards CSS - Big Screen with Media Queries

• کارت های CSS - صفحه نمایش بزرگ با minmax و تنظیم خودکار، پر کردن خودکار Cards CSS - Big Screen with minmax and auto-fit,auto-fill

• کارت های CSS - ارتفاع ردیف Cards CSS - Row Height

• کاشی های HTML Tiles HTML

• کاشی CSS Tiles CSS

• افزودنی شیء متناسب Object-fit add-on

• طرح بندی HTML Layout HTML

• Layout CSS - General Layout CSS - General

• طرح بندی CSS - خطوط شبکه Layout CSS - Grid Lines

• کد منبع کامل و پروژه تمام شده Complete Source Code and Finished Project

پروژه های کوچک گرید Grid Mini Projects

• مقدمه Intro

• راه اندازی فایل ها و پروژه تمام شده Setup Files and Finished Project

• برپایی Setup

• سبک های جهانی Global Styles

• پروژه ناوبار مینی Navbar Mini Project

• HTML قهرمان Hero HTML

• CSS قهرمان Hero CSS

• کارت های HTML Cards HTML

• کارت های CSS - صفحه نمایش کوچک Cards CSS - Small Screen

• کارت های CSS - صفحه نمایش بزرگ با پرسش های رسانه ای Cards CSS - Big Screen with Media Queries

• کارت های CSS - صفحه نمایش بزرگ با minmax و تنظیم خودکار، پر کردن خودکار Cards CSS - Big Screen with minmax and auto-fit,auto-fill

• کارت های CSS - ارتفاع ردیف Cards CSS - Row Height

• کاشی های HTML Tiles HTML

• کاشی CSS Tiles CSS

• افزودنی شیء متناسب Object-fit add-on

• طرح بندی HTML Layout HTML

• Layout CSS - General Layout CSS - General

• طرح بندی CSS - خطوط شبکه Layout CSS - Grid Lines

• کد منبع کامل و پروژه تمام شده Complete Source Code and Finished Project

پروژه پورفولیو - با شبکه CSS Porfolio Project - With CSS Grid

• مقدمه Intro

• پروژه شروع کننده Starter Project

• برپایی Setup

• نوار HTML Navbar HTML

• Navbar CSS - صفحه نمایش کوچک Navbar CSS - Small Screen

• Navbar CSS - صفحه بزرگ Navbar CSS - Big Screen

• HTML نوار کناری Sidebar HTML

• نوار کناری CSS Sidebar CSS

• عملکرد نوار کناری Sidebar Functionality

• نوار ناوبری ثابت شد Fixed Navbar

• HTML قهرمان Hero HTML

• Hero CSS - Small Screen Hero CSS - Small Screen

• Hero CSS - صفحه نمایش بزرگ Hero CSS - Big Screen

• درباره HTML About HTML

• درباره CSS - Small Screen About CSS - Small Screen

• درباره CSS - Big Screen About CSS - Big Screen

• خدمات HTML Services HTML

• خدمات CSS - صفحه نمایش کوچک Services CSS - Small Screen

• خدمات CSS - صفحه نمایش بزرگ Services CSS - Big Screen

• HTML پروژه ها Projects HTML

• پروژه های CSS - صفحه نمایش کوچک Projects CSS - Small Screen

• پروژه های CSS - صفحه نمایش بزرگ Projects CSS - Big Screen

• پروژه های CSS - طرح بندی سفارشی Projects CSS - Custom Layout

• HTML را وصل کنید Connect HTML

• اتصال CSS - راه اندازی اولیه ویدیو Connect CSS - Basic Video Setup

• اتصال CSS - پوشش Connect CSS - Overlay

• اتصال - بنر Connect - Banner

• حذف موقت ویدیو Temporary Remove Video

• Clip-Path را وصل کنید Connect Clip-Path

• منابع ویدئویی خارجی External Video Resources

• مهارت های HTML Skills HTML

• مهارت های CSS Skills CSS

• HTML خط زمانی Timeline HTML

• CSS خط زمانی Timeline CSS

• وبلاگ - راه اندازی اولیه Blog - Basic Setup

• وبلاگ - کامل شد Blog - Complete

• پاورقی Footer

• درباره، تماس - HTML About, Contact - HTML

• درباره، تماس با -CSS About, Contact -CSS

• صفحه پروژه ها و پیشوندهای مرورگر Projects Page and Browser Prefixes

• پروژه کامل Complete Project

پروژه پورفولیو - با شبکه CSS Porfolio Project - With CSS Grid

• مقدمه Intro

• پروژه شروع کننده Starter Project

• برپایی Setup

• نوار HTML Navbar HTML

• Navbar CSS - صفحه نمایش کوچک Navbar CSS - Small Screen

• Navbar CSS - صفحه بزرگ Navbar CSS - Big Screen

• HTML نوار کناری Sidebar HTML

• نوار کناری CSS Sidebar CSS

• عملکرد نوار کناری Sidebar Functionality

• نوار ناوبری ثابت شد Fixed Navbar

• HTML قهرمان Hero HTML

• Hero CSS - Small Screen Hero CSS - Small Screen

• Hero CSS - صفحه نمایش بزرگ Hero CSS - Big Screen

• درباره HTML About HTML

• درباره CSS - Small Screen About CSS - Small Screen

• درباره CSS - Big Screen About CSS - Big Screen

• خدمات HTML Services HTML

• خدمات CSS - صفحه نمایش کوچک Services CSS - Small Screen

• خدمات CSS - صفحه نمایش بزرگ Services CSS - Big Screen

• HTML پروژه ها Projects HTML

• پروژه های CSS - صفحه نمایش کوچک Projects CSS - Small Screen

• پروژه های CSS - صفحه نمایش بزرگ Projects CSS - Big Screen

• پروژه های CSS - طرح بندی سفارشی Projects CSS - Custom Layout

• HTML را وصل کنید Connect HTML

• اتصال CSS - راه اندازی اولیه ویدیو Connect CSS - Basic Video Setup

• اتصال CSS - پوشش Connect CSS - Overlay

• اتصال - بنر Connect - Banner

• حذف موقت ویدیو Temporary Remove Video

• Clip-Path را وصل کنید Connect Clip-Path

• منابع ویدئویی خارجی External Video Resources

• مهارت های HTML Skills HTML

• مهارت های CSS Skills CSS

• HTML خط زمانی Timeline HTML

• CSS خط زمانی Timeline CSS

• وبلاگ - راه اندازی اولیه Blog - Basic Setup

• وبلاگ - کامل شد Blog - Complete

• پاورقی Footer

• درباره، تماس - HTML About, Contact - HTML

• درباره، تماس با -CSS About, Contact -CSS

• صفحه پروژه ها و پیشوندهای مرورگر Projects Page and Browser Prefixes

• پروژه کامل Complete Project

استارت پیش فرض Default Starter

• مقدمه Intro

• منابع Resources

• ساختار Structure

• Html Html

• عادی کردن Normalize

• فونت ها Fonts

• فونت ها - بررسی اجمالی و ترفندها Fonts - Overview and Tweaks

• رنگ ها - راه اندازی عمومی Colors - General Setup

• سایه های اولیه Primary Shades

• سایه های خاکستری Gray Shades

• رنگ های شاد Happy Hues

• بقیه Vars Rest of the Vars

• تصویر Image

• دکمه ها Buttons

• هشدارها Alerts

• تنظیم فرم Form Setup

• CSS را فرم دهید Form CSS

• بارگذاری Loading

• عنوان Title

استارت پیش فرض Default Starter

• مقدمه Intro

• منابع Resources

• ساختار Structure

• Html Html

• عادی کردن Normalize

• فونت ها Fonts

• فونت ها - بررسی اجمالی و ترفندها Fonts - Overview and Tweaks

• رنگ ها - راه اندازی عمومی Colors - General Setup

• سایه های اولیه Primary Shades

• سایه های خاکستری Gray Shades

• رنگ های شاد Happy Hues

• بقیه Vars Rest of the Vars

• تصویر Image

• دکمه ها Buttons

• هشدارها Alerts

• تنظیم فرم Form Setup

• CSS را فرم دهید Form CSS

• بارگذاری Loading

• عنوان Title

پروژه های اضافی Additional Projects

• مقدمه Intro

• شروع کننده Starter

• برپایی Setup

• فلیپر رنگی - مقدمه Color Flipper - Intro

• فلیپر رنگی - HTML Color Flipper - HTML

• فلیپر رنگی - CSS Color Flipper - CSS

• پیشخوان - معرفی Counter - Intro

• شمارنده - HTML Counter - HTML

• شمارنده - CSS Counter - CSS

• Task Manager- Intro Task Manager- Intro

• Task Manager - فرم HTML Task Manager - Form HTML

• Task Manager - فرم CSS Task Manager - Form CSS

• Task Manager - لیست HTML Task Manager - List HTML

• Task Manager - لیست CSS Task Manager - List CSS

• Task Manager - ویرایش فرم HTML Task Manager - Edit Form HTML

• Task Manager - ویرایش فرم CSS Task Manager - Edit Form CSS

• نظرات - مقدمه Reviews - Intro

• نظرات - HTML Reviews - HTML

• نظرات - CSS Reviews - CSS

• Navbar - مقدمه Navbar - Intro

• نوار ناوبری - HTML Navbar - HTML

• نوار ناوبری - CSS (صفحه نمایش کوچک) Navbar - CSS (small screen)

• نوار ناوبری - CSS (صفحه نمایش بزرگ) Navbar - CSS (big screen)

• Navbar - JS (عملکرد تعویض) Navbar - JS (toggle functionality)

• نوار کناری - مقدمه Sidebar - Intro

• نوار کناری - HTML Sidebar - HTML

• نوار کناری - دکمه جابجایی Sidebar - Toggle Button

• نوار کناری - CSS Sidebar - CSS

• نوار کناری - عملکرد Sidebar - Functionality

• معین - مقدمه Modal - Intro

• Modal - HTML Modal - HTML

• Modal - Hero CSS Modal - Hero CSS

• Modal - CSS Modal - CSS

• سوالات - مقدمه Questions - Intro

• سوالات - HTML Questions - HTML

• سوالات - CSS Questions - CSS

• منو - معرفی Menu - Intro

• منو - HTML Menu - HTML

• منو - CSS Menu - CSS

• غنچه مواد غذایی - معرفی Grocery Bud - Intro

• غنچه مواد غذایی - HTML Grocery Bud - HTML

• غنچه مواد غذایی - CSS Grocery Bud - CSS

پروژه های اضافی Additional Projects

• مقدمه Intro

• شروع کننده Starter

• برپایی Setup

• فلیپر رنگی - مقدمه Color Flipper - Intro

• فلیپر رنگی - HTML Color Flipper - HTML

• فلیپر رنگی - CSS Color Flipper - CSS

• پیشخوان - معرفی Counter - Intro

• شمارنده - HTML Counter - HTML

• شمارنده - CSS Counter - CSS

• Task Manager- Intro Task Manager- Intro

• Task Manager - فرم HTML Task Manager - Form HTML

• Task Manager - فرم CSS Task Manager - Form CSS

• Task Manager - لیست HTML Task Manager - List HTML

• Task Manager - لیست CSS Task Manager - List CSS

• Task Manager - ویرایش فرم HTML Task Manager - Edit Form HTML

• Task Manager - ویرایش فرم CSS Task Manager - Edit Form CSS

• نظرات - مقدمه Reviews - Intro

• نظرات - HTML Reviews - HTML

• نظرات - CSS Reviews - CSS

• Navbar - مقدمه Navbar - Intro

• نوار ناوبری - HTML Navbar - HTML

• نوار ناوبری - CSS (صفحه نمایش کوچک) Navbar - CSS (small screen)

• نوار ناوبری - CSS (صفحه نمایش بزرگ) Navbar - CSS (big screen)

• Navbar - JS (عملکرد تعویض) Navbar - JS (toggle functionality)

• نوار کناری - مقدمه Sidebar - Intro

• نوار کناری - HTML Sidebar - HTML

• نوار کناری - دکمه جابجایی Sidebar - Toggle Button

• نوار کناری - CSS Sidebar - CSS

• نوار کناری - عملکرد Sidebar - Functionality

• معین - مقدمه Modal - Intro

• Modal - HTML Modal - HTML

• Modal - Hero CSS Modal - Hero CSS

• Modal - CSS Modal - CSS

• سوالات - مقدمه Questions - Intro

• سوالات - HTML Questions - HTML

• سوالات - CSS Questions - CSS

• منو - معرفی Menu - Intro

• منو - HTML Menu - HTML

• منو - CSS Menu - CSS

• غنچه مواد غذایی - معرفی Grocery Bud - Intro

• غنچه مواد غذایی - HTML Grocery Bud - HTML

• غنچه مواد غذایی - CSS Grocery Bud - CSS

جایزه Bonus

• جایزه Bonus

جایزه Bonus

• جایزه Bonus