آموزش تسلط کامل Html و CSS با پروژه های واقعی 2023

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

معرفی Introduction

• دانلود vs Code Download Vs Code

• 1.0 آماده کردن پروژه برای html 1.0 getting the project ready for html

• 1.2.ساختار یک سند HTML 1.2.structure of an HTML document

• 1.2 پسوند برای htm و css 1.2 Extentions for htm and css

کد ویژوال استودیو را کامل کنید Complete Visual Studio Code

• معرفی مختصر Vs code قسمت 1 Brief Introduction to Vs code part 1

• معرفی مختصر Vs code قسمت 2 Brief Introduction to Vs code part 2

• معرفی مختصر Vs code قسمت 3 Brief Introduction to Vs code part 3

Html از اصول اولیه تا پیشرفت Html From Basics To Advance

• 3.1 عنوان، شکست خط، قانون افقی و پیش برچسب توضیح داده شده است 3.1 Headings , Line Break ,Horizontal Rule and Pre Tag Explained

• 3.2 Abbr، آدرس ها، قوی، بلوک نقل قول، q و عنصر کد توضیح داده شده است 3.2 Abbr, addresss ,Strong ,blockquote, q , and code element explained

• 3.3 عناصر سطح داخلی و بلوک 3.3 inline and block level elements

• 3.4 del، s، ins، em، dfn، علامت، kbd و عنصر پیشرفت u توضیح داده شده است 3.4 del, s, ins , em , dfn , mark , kbd and u progress element explained

• 3.5 کوچک، u، sub و sup توضیح داده شده است 3.5 small , u ,sub and sup explained

• 3.6.1 عنصر فرم 3.6.1 Form Element

• 3.6.3 انواع ورودی توضیح داده شده است 3.6.3 Input Types Explained

• 3.6.4 TextArea و Tag Explained را انتخاب کنید 3.6.4 TextArea And Select Tag Explained

• 3.7 تصاویر 3.7 images

• 3.8 صدا و تصویر 3.8 Audio and Video

• 3.9 پیوندها و لیست ها 3.9 Links and lists

• 3.10 عناصر چیدمان معنایی 3.10 Sementic Layout Elements

• 3.11 مجموعه فیلد لیست داده و افسانه 3.11 datalist fieldset and legend

• 3.12 جداول 3.12 tables

1 شروع کار با css 1 getting started with css

• 1.0 مقدمه css و پیوند به سند html 1.0 introduction to css and link to html document

• 1.1 کدام یک خاص تر است، درونی در مقابل داخلی در مقابل خارجی. 1.1 which one is more specific, inline vs internal vs external.

• 1.2 شروع به کار با انتخابگرها انتخابگرهای پایه 1.2 getting started with selectors basic selectors

• انتخابگرهای 1.3 id و انتخابگرهای ترکیبی 1.3 id selector and combinator selectors

• 1.4 انتخابگر ترکیبی دیگر 1.4 more combinator selectors

• انتخابگرهای لیست 1.5 1.5 list selectors

• 1.6 وراثت در CSS 1.6 inheritance in CSS

2 CSS در عمل 2 CSS in action

• مدل جعبه 2.0 و حاشیه در حال فروپاشی است 2.0 box model and margin collapsing

• 2.0.1 عرض و ارتفاع عنصر 2.0.1 width and height of the element

• حداکثر ارتفاع و عرض 2.0.2 دقیقه 2.0.2 min max height and width

• 2.0.3 بالشتک 2.0.3 padding

• مرزهای 2.0.4 2.0.4 borders

• 2.0.5 حاشیه 2.0.5 margin

• اندازه جعبه 2.0.6 2.0.6 box sizing

• 2.1 طرح کلی 2.1 outline

• متن 2.2 در CSS 2.2 text in CSS

• 2.3 مدیریت متون سرریز قسمت دوم 2.3 managing overflowing texts part two

• 2.4 متن غواصی عمیق قسمت سوم 2.4 texts deep dive part three

• 2.5 لیست 2.5 lists

• 2.5.2 تغییر رنگ نشانگرها 2.5.2 change the color of markers

• 2.6 جدول در css 2.6 tables in css

• جداول 2.6.1 در css 2.6.1 tables in css

• ویژگی موقعیت 2.7 در CSS 2.7 position property in CSS

• سرریز 2.8 در css 2.8 overflow in css

• ویژگی های شناور 2.9 css 2.9 css float properties

3 مبحث میانی 3 intermediate topics

• 3.1 نمایش ویژگی بلوک درون خطی توضیح داده شده است 3.1 display property inline-block explained

• 3.2 چگونه محتوا و عناصر خود را در css تراز کنید 3.2 how to align your content and elements in css

• 3.3 واحد اندازه گیری css - مطلق در مقابل نسبی ناقص 3.3 css measurement units - absolute vs relative incomplete

• 3.4 شبه سلکتورها قسمت 1 3.4 pseudo selectors part 1

• 3.4.2 شبه انتخابگرها قسمت 2 3.4.2 pseudo selectors part 2

• 3.4.3 شبه سلکتورها قسمت 3 3.4.3 pseudo selectors part 3

• انتخابگرهای 3.5 Attr 3.5 Attr selectors

• 3.6 تصاویر در css 3.6 images in css

• 3.7 شمارنده در css 3.7 counters in css

• 3.7.1 شمارنده در css نمونه های بیشتر 3.7.1 counters in css more examples

• 3.8.1 کدورت و فیلتر در css 3.8.1 opacity and filter in css

• فیلتر پس زمینه 3.8.2 توضیح داده شده است 3.8.2 backdrop filter explained

• 3.9 گوشه های گرد با شعاع حاشیه 3.9 Rounded corners with border radius

• 3.10.1 پس زمینه در css 3.10.1 backgrounds in css

• 3.10.2 از ویژگی مختصر برای پس زمینه استفاده کنید 3.10.2 use shorthand property for backgrounds

• 3.10.3 نحوه استفاده از گرادیان به عنوان پس زمینه 3.10.3 how to use gradients as background

• 3.10.4 شیب مخروطی و مولد گرادیان 3.10.4 conic gradients and gradient generators

• 3.10.5 چگونه اندازه گرادیان های تکرار شونده را تعریف کنیم 3.10.5 how to define the size of repeating gradients

• 3.10.6 شیب شعاعی بیشتر 3.10.6 radial gradient more

• 3.11 سایه در css 3.11 shadows in css

• 3.12 کنترل متن 3.12 text controlling

• ویژگی های فونت 8.18.1 8.18.1 font properties

• 3.14 چند ستون در css توضیح داده شده است 3.14 multi columns in css explained

4 CSS پیشرفته 4 advance CSS

• 4.0 تبدیل 2 بعدی 4.0 2d transforms

• 4.1 تبدیل 3 بعدی 4.1 3d transforms

• 4.1.1 خواص پرسپکتیو 4.1.1 perspective properties

• 4.1.2 سبک تبدیل 4.1.2 transform style

• 4.1.3 نمای پشتی توضیح داده شده است 4.1.3 backface visibility explained

• 4.2.1 انتقال در css 4.2.1 transitions in css

• 4.3.1 انیمیشن در css قسمت 1 4.3.1 animations in css part 1

• 4.3.2 انیمیشن در css قسمت 2 4.3.2 animations in css part 2

• 4.4 متغیر در css 4.4 variables in css

• 4.5.1 شبکه CSS توضیح داده شده قسمت 1 4.5.1 CSS grid explained part 1

• 4.5.2 طرح شبکه توضیح داده شده قسمت 2 4.5.2 grid layout explained part 2

• 4.5.3 طرح شبکه توضیح داده شده قسمت 3 4.5.3 grid layout explained part 3

• 4.5.4 طرح بندی شبکه ای فرزند قسمت 4 را توضیح داد 4.5.4 grid layout child explained part 4

• 4.6.1 flexbox و ویژگی های والد قسمت 1 توضیح داده شده است 4.6.1 flexbox and parent properties explained part 1

• 4.6.2 عناصر کودک flexbox توضیح داده شده قسمت 2 4.6.2 flexbox child elements explained part 2

• 4.7 تبدیل وب سایت برای رسانه های چاپی 4.7 convert website for prints media

• نسبت تصویر 4.8 4.8 aspect ratio

• 4.9.1 پرس و جوهای رسانه در مقدمه css با عرض minmax قسمت 1 4.9.1 media querries in css introduction with minmax width part 1

• 4.9.1 کوئری های رسانه در مقدمه css با عرض minmax قسمت 1 نیمه دوم 4.9.1 media querries in css introduction with minmax width part 1 2nd half

• 4.9.2 پرس و جوهای رسانه ویژگی جهت بخش 2 4.9.2 Orientation feature media queries part 2

• 9.10.3 پرس و جوهای رسانه حالت نمایش بخش 3 9.10.3 display mode media queries part 3

• 4.9.4 پرس و جوهای رسانه حداقل ارتفاع قسمت 4 4.9.4 minmax height media queries part 4

• 4.9.5 پرس و جوهای رسانه دقیق ارتفاع و عرض قسمت 5 4.9.5 exact height and width media queries part 5

• 4.9.6 پرس و جوهای رسانه ای عملگرهای منطقی قسمت 6 4.9.6 logical operators media queries part 6

• نسبت ابعاد 4.9.7 در پرسش‌های رسانه بخش 7 توضیح داده شده است 4.9.7 aspect ratio explained in media queries part 7

• 4.9.8 پرس و جوهای رسانه ای طرح رنگ را ترجیح می دهد قسمت 8 4.9.8 prefers-color-scheme media queries part 8

• 4.9.9 قانون ویژگی @support پرس و جوهای رسانه قسمت 9 را توضیح داد 4.9.9 @support feature rule explained media queries part 9

• 4.9.10 پرس و جوی رسانه جدید دستور العمل های رسانه قسمت 10 4.9.10 new media query syntax media queries part 10

• ویژگی نمایش 4.10.1 توضیح داده شده است 4.10.1 display property explained

• جدول نمایش 4.10.2 توضیح داده شده است 4.10.2 display table explained

• 4.10.3 صفحه نمایش انعطاف پذیر در مقابل انعطاف پذیری درون خطی و شبکه در مقابل شبکه درون خطی 4.10.3 display flex vs inline-flex and grid vs inline-grid

• 4.10.3 مقدار نمایش Flow Root توضیح داده شده است 4.10.3 Flow Root display value explained

• 4.11 رنگ تاکیدی و رنگ فعلی توضیح داده شده است 4.11 accent color and current color explained

• نوار اسکرول سبک 4.12.1 قسمت 1 4.12.1 style scrollbar part 1

• 4.13 رفتار اسکرول توضیح داده شده است 4.13 scroll behavior explained

• 4.14 آموزش انتخاب کاربر 4.14 user select tutorial

• 4.15 تغییر رنگ گاری 4.15 change carret color

• 4.16.1 مقدمه لوازم منطقی قسمت 1 4.16.1 intro to logical props part 1

• 4.16.2 از پدینگ های ساده، حاشیه ها و حاشیه های منطقی قسمت 2 استفاده نکنید 4.16.2 dont use simple paddings,margins and borders logical props part 2

• 4.16.3 ایجاد ابزارهای منطقی کارت پاسخگو جهت قسمت 3 4.16.3 create direction responsive card logical props part 3

• 4.16.4 از ارتفاع و عرض معمولی استفاده نکنید در عوض از این قطعات منطقی قسمت 4 استفاده کنید 4.16.4 dont use regular height and width use these instead logical props part 4

• 4.16.5 ویژگی های منطقی موقعیت 4.16.5 position logical properties

• 4.16.6 مقادیر منطقی 4.16.6 logical values

• 4.17 ترکیب css توضیح داده شده است 4.17 css blendmodes explained

• 4.18 دقیقه، حداکثر و عملکرد گیره توضیح داده شده است 4.18 min , max and clamp function explained

• 4.19 تابع CALC توضیح داده شده است 4.19 CALC function explained

• 4.20.1 مسیر کلیپ قسمت 1 را توضیح داد 4.20.1 clip-path explained masking part 1

• 4.20.3 شکل خصوصیات بیرونی پوشش بخشی 3 را توضیح داد 4.20.3 shape outside properties explained masking part 3

پروژه کامل Full Project

• 1.1 پروژه 1 راه اندازی و معرفی 1.1 project 1 setup and introduction

• 1.2 بخش هدر برای وب سایت 1.2 Header Section for the Website

• 1.3 بخش خانه 1.3 home section

• بخش ویژگی 1.4 1.4 feature section

• 1.5 بخش درباره 1.5 about section

• 1.6 بخش خبرنامه 1.6 newsletter section

• 1.7 بخش بررسی 1.7 Review Section

• 1.8 بخش قیمت گذاری 1.8 Pricing Section

• 1.9 با ما تماس بگیرید 1.9 contact us

• بخش پاورقی 1.10 1.10 footer section

• 1.11 وب سایت خود را ریسپانسیو کنید 1.11 Make your website responsive

پروژه های کوچک و اثرات Small Projects And Effects

• قسمت 1 افکت شناور کارت card hover Effect part 1

• Card Hover Effect قسمت 2 Card Hover Effect Part 2

• شناور کارت Slide down Effect Part 1 Card hover Slide down Effect part 1

• شناور کارت Slide down Effect قسمت 2 Card hover Slide down Effect part 2

• شناور کارت Slide down Effect قسمت 3 Card hover Slide down Effect part 3

ابزارهایی برای توسعه وب که هر توسعه دهنده ای باید بداند! Tools For Web Development That Every Developer Should Know!

• 1.1.1 ابزار توسعه #1 10015.io بخش متن توضیح داده شده قسمت 1 1.1.1 Development tool #1 10015.io Text Section Explained Part 1

• 1.1.2 ابزار توسعه #1 10015.io تصویر بخش توضیح داده شده قسمت 2 1.1.2 Development tool #1 10015.io image Section Explained Part 2

• 1.1.3 ابزار توسعه #1 10015.io بخش CSS توضیح داده شده قسمت 3 1.1.3 Development tool #1 10015.io CSS Section Explained Part 3

• 1.1.4 ابزار توسعه #1 10015.io بخش کدگذاری توضیح داده شده قسمت 4 1.1.4 Development tool #1 10015.io Coding Section Explained Part 4

• 1.1.5 ابزار توسعه #1 10015.io سه دسته آخر توضیح داده شده قسمت 5 1.1.5 Development tool #1 10015.io Last Three Categories Explained Part 5