آموزش HTML و CSS Masterclass

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

معرفی Introduction

• معرفی دوره Course Introduction

راه اندازی IDE Setup of IDE

• بخش 2 مقدمه Section 2 Introduction

• دانلود و نصب کد ویژوال استودیو Downloading and Installing Visual Studio Code

• سفارشی کردن IDE Customizing the IDE

• اجرای کد در مرورگر وب Running Code in a Web Browser

• خلاصه بخش 2 Recap of Section 2

اصول HTML HTML Fundamentals

• بخش 3 مقدمه Section 3 Introduction

• HTML چیست؟ What is HTML?

• تگ های HTML HTML Tags

• افزودن فیلد ورودی به کد HTML Adding an input field to HTML code

• فرمت یک سند HTML Format of an HTML Document

• ساختار کد HTML Structure of HTML Code

• عنوان صفحه و سرفصل ها Page Title and Headings

• اضافه کردن عنوان و سرفصل به یک صفحه وب HTML Adding a title and heading to an HTML Webpage

• پاراگراف ها و متن Paragraphs and Text

• سلام جهان در HTML Hello World in HTML

• ویژگی سبک و برچسب سبک Style Attribute and Style Tag

• استفاده از تگ style برای سبک سازی یک عنصر HTML Using the style tag to stylize an HTML element

• قالب بندی متن در HTML Formatting Text in HTML

• قالب بندی متن HTML Formatting HTML text

• هایپرلینک ها در HTML Hyperlinks in HTML

• افزودن HyperLink به کد HTML Adding a HyperLink to HTML code

• تصاویر در HTML Images in HTML

• دکمه ها در HTML Buttons in HTML

• ایجاد دکمه در HTML Creating a button in HTML

• نظرات در HTML Comments in HTML

• خلاصه بخش 3 Recap of Section 3

نمایش داده ها در HTML Displaying Data in HTML

• بخش 4 مقدمه Section 4 Introduction

• لیست ها در HTML Lists in HTML

• یک لیست مرتب با استفاده از کد HTML ایجاد کنید Create an ordered list using HTML code

• با استفاده از کد HTML یک لیست نامرتب ایجاد کنید Create an unordered list using HTML code

• جداول در HTML Tables in HTML

• یک جدول با استفاده از کد HTML ایجاد کنید Create a table using HTML code

• طرح بندی در HTML Layouts in HTML

• ایجاد یک طرح بندی در HTML Creating a layout in HTML

• Divs و Spans Divs and Spans

• ایجاد یک div در HTML Creating a div in HTML

• ایجاد یک span در HTML Creating a span in HTML

• فرم ها در HTML Forms in HTML

• ایجاد فرم در HTML Creating a form in HTML

• خلاصه بخش 4 Recap of Section 4

رنگ ها در HTML Colors in HTML

• بخش 5 مقدمه Section 5 Introduction

• رنگ در HTML Color in HTML

• عناصر رنگ آمیزی در HTML Coloring Elements in HTML

• خلاصه بخش 5 Recap of Section 5

جاسازی رسانه و گرافیک در HTML Embedding Media and Graphics in HTML

• بخش 6 مقدمه Section 6 Introduction

• بیشتر در مورد تصاویر در HTML More on Images in HTML

• جاسازی ویدیو در HTML Embedding Video in HTML

• تعبیه صدا در HTML Embedding Audio in HTML

• جاسازی صفحات وب دیگر Embedding other Webpages

• بوم HTML HTML Canvas

• گرافیک برداری مقیاس پذیر (SVG) Scalable Vector Graphics (SVGs)

• خلاصه بخش 6 Recap of Section 6

اطلاعات بیشتر در مورد تگ های HTML More on HTML Tags

• بخش 7 مقدمه Section 7 Introduction

• قالب بندی برچسب ها Formatting Tags

• برچسب های فراداده Metadata Tags

• برچسب های جدید در HTML 5 New Tags to HTML 5

• بخش 7 خلاصه Section 7 Recap

ویژگی های جهانی HTML HTML Global Attributes

• بخش 8 مقدمه Section 8 Introduction

• ویژگی های جهانی Global Attributes

• ویژگی های جهانی خاص HTML 5 HTML 5 Specific Global Attributes

• بخش 8 خلاصه Section 8 Recap

رویدادها در HTML Events in HTML

• بخش 9 مقدمه Section 9 Introduction

• رویدادهای صفحه کلید Keyboard Events

• رویدادهای ماوس Mouse Events

• رویدادها را بکشید Drag Events

• رویدادهای کلیپ بورد Clipboard Events

• خلاصه بخش 9 Section 9 Recap

طرح بندی و صفحات وب در HTML Layouts and Webpages in HTML

• بخش 10 مقدمه Section 10 Introduction

• تصاویر و متن پویا Dynamic Images and Text

• منوها و نوارهای سرصفحه Menus and Header Bars

• معرفی بوت استرپ Intro to Bootstrap

• موقعیت یابی در بوت استرپ Positioning in Bootstrap

• منوها و رابط کاربری در بوت استرپ Menus and UI in Bootstrap

• تصاویر در بوت استرپ Images in Bootstrap

• متن در بوت استرپ Text in Bootstrap

• سایر عناصر بوت استرپ Other Bootstrap Elements

• خلاصه بخش 10 Section 10 Recap

تمرین عملی HTML HTML Hands-On Practice

• بخش 11 مقدمه Section 11 Introduction

• شروع صفحه وب ما Starting our Webpage

• ایجاد نوار هدر Creating the Header Bar

• ایجاد صفحه اصلی Creating the Home Page

• ایجاد صفحه درباره Creating the About Page

• ایجاد صفحه منو Creating the Menu Page

• ایجاد صفحه تماس Creating the Contact Page

• بخش 11 خلاصه Section 11 Recap

XHTML XHTML

• بخش 12 مقدمه Section 12 Introduction

• XHTML چیست؟ What is XHTML?

• نحو XHTML XHTML Syntax

• تبدیل HTML به XHTML Converting HTML to XHTML

• خلاصه بخش 12 Section 12 Recap

اشکال زدایی HTML Debugging HTML

• بخش 13 مقدمه Section 13 Introduction

• اشکال زدایی چیست؟ What is Debugging?

• خطاهای رایج و نحوه رفع آنها Common Errors and How to Fix Them

• استفاده از اعتبارسنجی HTML Using An HTML Validator

• خلاصه بخش 13 Section 13 Recap

مبانی CSS CSS Basics

• بخش 14 مقدمه Section 14 Introduction

• ایجاد یک صفحه سبک CSS Creating a CSS Stylesheet

• وارد کردن Stylesheet در مقابل استفاده از Style Tag Importing Stylesheet vs. Using Style Tag

• نحو CSS CSS Syntax

• نظم آبشاری Cascading Order

• مدل جعبه Box Model

• بالشتک ها و حاشیه ها Paddings and Margins

• خلاصه بخش 14 Section 14 Recap

اصلاح متن با استفاده از CSS Modifying Text Using CSS

• بخش 15 مقدمه Section 15 Introduction

• مفاهیم سبک سازی متن Text Styling Concepts

• جلوه های متنی پایه Basic Text Effects

• فونت ها Fonts

• ویژگی های متن Text Properties

• خلاصه بخش 15 Section 15 Recap

رنگ ها در CSS Colors in CSS

• بخش 16 مقدمه Section 16 Introduction

• چه چیزی را می توانم رنگ کنم؟ What Can I Color?

• مشخص کردن رنگ ها Specifying Colors

• اشباع Saturation

• کدورت Opacity

• فیلترها Filters

• خلاصه بخش 16 Section 16 Recap

ویژگی های CSS CSS Properties

• بخش 17 مقدمه Section 17 Introduction

• ویژگی های پس زمینه Background Properties

• ویژگی های مرزی Border Properties

• ویژگی های جعبه Box Properties

• ویژگی های طرح کلی Outline Properties

• ویژگی های موقعیت یابی Positioning Properties

• ویژگی های برش و پوشش Clipping and Masking Properties

• سایر خواص Other Properties

• بخش 17 خلاصه Section 17 Recap

جداول CSS CSS Tables

• بخش 18 مقدمه Section 18 Introduction

• سبک و نمایش جدول Table Style and Display

• تراز جدول Table Alignment

• جلوه های جالب Cool Effects

• خلاصه بخش 18 Section 18 Recap

لیست های CSS CSS Lists

• بخش 19 مقدمه Section 19 Introduction

• لیست ویژگی ها List Properties

• لیست های رنگ آمیزی Coloring Lists

• خلاصه بخش 19 Section 19 Recap

انیمیشن های CSS CSS Animations

• بخش 20 مقدمه Section 20 Introduction

• ویژگی های انتقال Transition Properties

• ویژگی های انیمیشن Animation Properties

• انیمیشن دو بعدی 2D Animation

• انیمیشن سه بعدی 3D Animation

• خلاصه بخش 20 Section 20 Recap

ویژگی های انیمیشن در CSS Animation Properties in CSS

• بخش 21 مقدمه Section 21 Introduction

• زمینه Background

• مرز Border

• ستون Column

• فونت Font

• لبه Margin

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

• متن Text

• لایه گذاری Padding

• فاصله بین کلمات و فاصله بین حروف Word-Spacing and Letter-Spacing

• خلاصه بخش 21 Section 21 Recap

دکمه های CSS CSS Buttons

• بخش 22 مقدمه Section 22 Intro

• :hover و :active State :hover and :active State

• یک ظاهر طراحی پیشرفته Advanced Styling

• انیمیشن Animation

• خلاصه بخش 22 Section 22 Recap

CSS شبه کلاس ها و انتخابگرها CSS Pseduo-Classes and Selectors

• بخش 23 مقدمه Section 23 Introduction

• انتخابگرهای عمومی CSS General CSS Selectors

• شبه کلاس های ورودی Input Pseudo-Classes

• شبه کلاس ها را تایپ کنید Type Pseudo-Classes

• شبه کلاس های کودک Child Pseudo-Classes

• <a> کلاس های شبه <a> Pseudo-Classes

• شبه عناصر Pseudo-Elements

• خلاصه بخش 23 Section 23 Recap

CSS At-Rules CSS At-Rules

• بخش 24 مقدمه Section 24 Introduction

• CSS At-Rule چیست؟ What is a CSS At-Rule?

• CSS At-Rules CSS At-Rules

• خلاصه بخش 24 Section 24 Recap

CSS پیشرفته Advanced CSS

• بخش 25 مقدمه Section 25 Introduction

• گرادیان ها Gradients

• سایه ها و جلوه ها Shadows and Effects

• موقعیت یابی پیشرفته Advanced Positioning

• حالت های ترکیبی Blend Modes

• ایجاد یک شبکه CSS پاسخگو Creating a Responsive CSS Grid

• خلاصه بخش 25 Section 25 Recap

CSS عملی تمرین CSS Hands-On Practice

• بخش 26 مقدمه Section 26 Introduction

• حالت دادن به نوار هدر Styling the Header Bar

• سبک دادن به صفحه اصلی Styling the Home Page

• استایل دادن به صفحه درباره Styling the About Page

• حالت دادن به صفحه منو Styling the Menu Page

• طراحی صفحه تماس Styling the Contact Page

• پاکسازی نهایی فایل ها Final Cleanup of Files

• خلاصه بخش 26 Section 26 Recap

اشکال زدایی CSS Debugging CSS

• بخش 27 مقدمه Section 27 Introduction

• خطاهای رایج و نحوه رفع آنها Common Errors and How to Fix Them

• استفاده از CSS Validator Using A CSS Validator

• بخش 27 خلاصه Section 27 Recap

مشخصات مفید CSS Useful CSS Specifics

• بخش 28 مقدمه Section 28 Introduction

• موجودیت های CSS CSS Entities

• واحدهای CSS CSS Units

• خلاصه بخش 28 Section 28 Recap

خلاصه و جمع بندی دوره Course Summary and Wrap-Up

• خلاصه و جمع بندی دوره Course Summary and Wrap-Up

اطلاعات اضافی - کد منبع و موارد دیگر Extra Information - Source code, and other stuff

• کدهای منبع Source Codes

• سخنرانی پاداش Bonus Lecture