آموزش HTML و CSS برای مبتدیان - اولین قدم برای شغل کدنویسی شما [ویدئو]

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

معرفی Introduction

• معرفی Introduction

نصب ابزار Installing Tools

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

• تنظیم اولین پروژه شما Setting Your First Project

مبانی HTML HTML Basics

• HTML چیست؟ تگ چیست؟ What Is HTML? What Is Tag?

• HTML چیست؟ تگ چیست؟ What Is HTML? What Is Tag?

• سند پایه HTML Basic HTML Document

• سند پایه HTML Basic HTML Document

• برچسب های تودرتو و بسته بندی سریع متن موجود با برچسب ها با استفاده از EMMET Nested Tags and Fast Wrapping Existing Text with Tags Using EMMET

• برچسب های تودرتو و بسته بندی سریع متن موجود با برچسب ها با استفاده از EMMET Nested Tags and Fast Wrapping Existing Text with Tags Using EMMET

• ایجاد پاراگراف <p> | فضاهای سفید چیست؟ Creating Paragraphs <p> | What Are Whitespaces?

• ایجاد پاراگراف <p> | فضاهای سفید چیست؟ Creating Paragraphs <p> | What Are Whitespaces?

• تگ خالی و شکستن خط <br> Void Tag and Breaking the Line <br>

• تگ خالی و شکستن خط <br> Void Tag and Breaking the Line <br>

• صفات چیست؟ [عنوان] و [زبان] What Are Attributes? [title] and [lang]

• صفات چیست؟ [عنوان] و [زبان] What Are Attributes? [title] and [lang]

• تگ خنثی <span> Neutral Tag <span>

• تگ خنثی <span> Neutral Tag <span>

• نصب برنامه های افزودنی در VSC: AutoRenameTag Installing Extensions in VSC: AutoRenameTag

• نصب برنامه های افزودنی در VSC: AutoRenameTag Installing Extensions in VSC: AutoRenameTag

• تغییر پس زمینه بدون تولید کننده رنگ Change Background Without Color Generator

• تغییر پس زمینه بدون تولید کننده رنگ Change Background Without Color Generator

• ابزارهای انتخاب رنگ عالی برای وب سایت شما! Awesome Color Selection Tools for Your Website!

• ابزارهای انتخاب رنگ عالی برای وب سایت شما! Awesome Color Selection Tools for Your Website!

• افزودن تصویر به سایت شما <img> Adding Image to Your Site <img>

• افزودن تصویر به سایت شما <img> Adding Image to Your Site <img>

• پاداش: از کجا می توان تصاویر رایگان در سایت خود دریافت کرد؟ Bonus: Where to Get Free Pictures on Your Site?

• پاداش: از کجا می توان تصاویر رایگان در سایت خود دریافت کرد؟ Bonus: Where to Get Free Pictures on Your Site?

• دریافت اندازه img با استفاده از میانبر VSC Getting img Size Using VSC Shortcut

• دریافت اندازه img با استفاده از میانبر VSC Getting img Size Using VSC Shortcut

• چگونه به پوشه های مختلف پیوند دهیم؟ ایجاد نظریه PATH How to Link to Different Folders? Creating PATH Theory

• چگونه به پوشه های مختلف پیوند دهیم؟ ایجاد نظریه PATH How to Link to Different Folders? Creating PATH Theory

مبانی HTML HTML Basics

HTML | بهبود سند و گردش کار HTML | Improving Document and Workflow

• مشاهده کد منبع هر سایت. نظرات چیست؟ Viewing the Source Code of Any Site. What Are Comments?

• مشاهده کد منبع هر سایت. نظرات چیست؟ Viewing the Source Code of Any Site. What Are Comments?

• برچسب های متا Meta Tags

• برچسب های متا Meta Tags

• Charset - رمزگذاری مناسب در سایت شما Charset - Proper Encoding on Your Site

• Charset - رمزگذاری مناسب در سایت شما Charset - Proper Encoding on Your Site

• HTML Doctype HTML Doctype

• HTML Doctype HTML Doctype

• سرور زنده و ویژگی ذخیره خودکار کد Live Server and Auto-Saving Code Feature

• سرور زنده و ویژگی ذخیره خودکار کد Live Server and Auto-Saving Code Feature

• موجودیت ها و اعتبار سنجی HTML Entities and HTML Validation

• موجودیت ها و اعتبار سنجی HTML Entities and HTML Validation

• چگونه فایل های خود را به درستی نام گذاری کنیم؟ چرا صفحه اصلی index.html نامیده می شود؟ How to Properly Name Your Files? Why Is the Main Page Called index.html?

• چگونه فایل های خود را به درستی نام گذاری کنیم؟ چرا صفحه اصلی index.html نامیده می شود؟ How to Properly Name Your Files? Why Is the Main Page Called index.html?

• پسوند: نمادهای شیرین در VSC شما Extension: Sweet Icons in Your VSC

• پسوند: نمادهای شیرین در VSC شما Extension: Sweet Icons in Your VSC

HTML | بهبود سند و گردش کار HTML | Improving Document and Workflow

HTML | فهرست کردن چیزها HTML | Listing Things

• <ol> در مقابل <ul> <ol> Versus <ul>

• <ol> در مقابل <ul> <ol> Versus <ul>

• ترفندهای سریع با Emmet برای استفاده با لیست ها Fast Tricks with Emmet to Use with Lists

• ترفندهای سریع با Emmet برای استفاده با لیست ها Fast Tricks with Emmet to Use with Lists

• <dl> - لیست تعریف <dl> - Definition List

• <dl> - لیست تعریف <dl> - Definition List

• EMMET: ایجاد خواهر و برادر و برخورد با دو عنصر به عنوان یک EMMET: Creating Siblings and Treating Two Elements as One

• EMMET: ایجاد خواهر و برادر و برخورد با دو عنصر به عنوان یک EMMET: Creating Siblings and Treating Two Elements as One

HTML | فهرست کردن چیزها HTML | Listing Things

HTML | پیوندها HTML | Links

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

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

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

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

• #برچسب ها #labels

• #برچسب ها #labels

• چگونه یک لینک به ایمیل ایجاد کنیم؟ How to Create a Link to Email?

• چگونه یک لینک به ایمیل ایجاد کنیم؟ How to Create a Link to Email?

• لینک تلفن Telephone Link

• لینک تلفن Telephone Link

HTML | پیوندها HTML | Links

HTML | قالب بندی متن HTML | Text Formatting

• سرصفحه ها - <h1> تا <h6> Headers - <h1> to <h6>

• سرصفحه ها - <h1> تا <h6> Headers - <h1> to <h6>

• <cite> در مقابل <blockquote> در مقابل <q> - نحوه استناد به دیگران <cite> Versus <blockquote> Versus <q> - How to Cite Others

• <cite> در مقابل <blockquote> در مقابل <q> - نحوه استناد به دیگران <cite> Versus <blockquote> Versus <q> - How to Cite Others

• <abbr> | <dfn> <abbr> | <dfn>

• <abbr> | <dfn> <abbr> | <dfn>

• برچسب های معنایی <strong>، <em> و <mark> در مقابل <b>، <i>، <u>، <s> Semantic Tags <strong>, <em> and <mark> vs <b>, <i>, <u>, <s>

• برچسب های معنایی <strong>، <em> و <mark> در مقابل <b>، <i>، <u>، <s> Semantic Tags <strong>, <em> and <mark> vs <b>, <i>, <u>, <s>

• <sub> در مقابل <sup> <sub> Versus <sup>

• <sub> در مقابل <sup> <sub> Versus <sup>

• متن از پیش قالب بندی شده، برچسب ها: <pre>، <code>، <var> Preformatted Text, Tags: <pre>, <code>, <var>

• متن از پیش قالب بندی شده، برچسب ها: <pre>، <code>، <var> Preformatted Text, Tags: <pre>, <code>, <var>

• چند مکان نما | جستجو و جایگزینی متن در VSC Multicursor | Searching and Replacing Text in VSC

• چند مکان نما | جستجو و جایگزینی متن در VSC Multicursor | Searching and Replacing Text in VSC

HTML | قالب بندی متن HTML | Text Formatting

فرم ها | مبانی Forms | Basics

• فرم و ورودی چیست؟ نحوه ایجاد یک فرم اولیه با ورود و رمز عبور What Is Form and Input? How to Create a Basic Form with Login and Password

• فرم و ورودی چیست؟ نحوه ایجاد یک فرم اولیه با ورود و رمز عبور What Is Form and Input? How to Create a Basic Form with Login and Password

• نحوه ارسال صحیح فرم و نامگذاری ورودی های آن How to Properly Submit Form and Name Its Inputs

• نحوه ارسال صحیح فرم و نامگذاری ورودی های آن How to Properly Submit Form and Name Its Inputs

• رادیو و برچسب های فرم و افسانه Radio and Form Labels and Legend

• رادیو و برچسب های فرم و افسانه Radio and Form Labels and Legend

• چک باکس ها Checkboxes

• چک باکس ها Checkboxes

• بیشترین استفاده از ویژگی های فرم Most Frequently Used Form Attributes

• بیشترین استفاده از ویژگی های فرم Most Frequently Used Form Attributes

• تمرین: چگونه یک فرم تماس در سایت خود ایجاد کنیم؟ Exercise: How to Create a Contact Form on Your Site?

• تمرین: چگونه یک فرم تماس در سایت خود ایجاد کنیم؟ Exercise: How to Create a Contact Form on Your Site?

• دریافت تاریخ و زمان از کاربر Getting Date and Time from the User

• دریافت تاریخ و زمان از کاربر Getting Date and Time from the User

فرم ها | مبانی Forms | Basics

جداول Tables

• اصول ایجاد جداول Basics of Creating Tables

• اصول ایجاد جداول Basics of Creating Tables

• چگونه سلول ها را با استفاده از rowspan و colspan کشش دهیم؟ How to Stretch Cells Using rowspan and colspan?

• چگونه سلول ها را با استفاده از rowspan و colspan کشش دهیم؟ How to Stretch Cells Using rowspan and colspan?

جداول Tables

CSS | مبانی CSS | Basics

• CSS چیست؟ What Is CSS?

• CSS چیست؟ What Is CSS?

• CSS Placement و CSS Priority (Cascade) CSS Placement and CSS Priority (Cascade)

• CSS Placement و CSS Priority (Cascade) CSS Placement and CSS Priority (Cascade)

• کلاس در مقابل شناسه Class Versus ID

• کلاس در مقابل شناسه Class Versus ID

• پسوندهای مفید CSS Useful CSS Extensions

• پسوندهای مفید CSS Useful CSS Extensions

CSS | مبانی CSS | Basics

CSS | قالب بندی CSS | Formatting

• div Versus span - گروه بندی عناصر بیشتر div Versus span - Grouping More Elements

• div Versus span - گروه بندی عناصر بیشتر div Versus span - Grouping More Elements

• نمایشگر: بلوک/داخلی/بلوک درون خطی Display: Block/Inline/Inline Block

• نمایشگر: بلوک/داخلی/بلوک درون خطی Display: Block/Inline/Inline Block

• EMMET | ترفندهای ایجاد برچسب با شناسه و کلاس EMMET | Tricks Creating Tags with ID and Class

• EMMET | ترفندهای ایجاد برچسب با شناسه و کلاس EMMET | Tricks Creating Tags with ID and Class

• تمرین انتخابگر Selector Rehearsal

• تمرین انتخابگر Selector Rehearsal

• قوانین انتخاب برچسب - سخنرانی مهم برای جلوگیری از مشکلات در CSS Rules of Selecting Tags - Important Lecture to Avoid Problems in CSS

• قوانین انتخاب برچسب - سخنرانی مهم برای جلوگیری از مشکلات در CSS Rules of Selecting Tags - Important Lecture to Avoid Problems in CSS

• مرز Border

• مرز Border

• گوشه های گرد - مرز-شعاع Rounded Corners - Border-Radius

• گوشه های گرد - مرز-شعاع Rounded Corners - Border-Radius

• جداول و بالشتک Tables and Padding

• جداول و بالشتک Tables and Padding

• چگونه منوی افقی ایجاد کنیم؟ وضعیت پیوندها: پیوند، بازدید شده، شناور، فعال How to Create Horizontal Menu? States of Links: link, visited, hover, active

• چگونه منوی افقی ایجاد کنیم؟ وضعیت پیوندها: پیوند، بازدید شده، شناور، فعال How to Create Horizontal Menu? States of Links: link, visited, hover, active

• تغییر نمادهای لیست پیش فرض | :: قبل از انتخابگر Changing Default List Icons | :: before Selector

• تغییر نمادهای لیست پیش فرض | :: قبل از انتخابگر Changing Default List Icons | :: before Selector

• چگونه عناصر را شفاف کنیم؟ Opacity در مقابل rgba How to Make Elements Transparent? Opacity Versus rgba

• چگونه عناصر را شفاف کنیم؟ Opacity در مقابل rgba How to Make Elements Transparent? Opacity Versus rgba

• تغییر مکان نما | ایجاد جعبه راهنمایی Changing Cursor | Creating Hint Box

• تغییر مکان نما | ایجاد جعبه راهنمایی Changing Cursor | Creating Hint Box

• انتخابگر صفت | ویژگی های نام گذاری شده سفارشی در HTML Attribute Selector | Custom Named Attributes In HTML

• انتخابگر صفت | ویژگی های نام گذاری شده سفارشی در HTML Attribute Selector | Custom Named Attributes In HTML

CSS | قالب بندی CSS | Formatting

CSS | متن CSS | Text

• قالب بندی و تزیین متن Text Formatting and Decoration

• قالب بندی و تزیین متن Text Formatting and Decoration

• تورفتگی پاراگراف و انتخابگر :: حرف اول Paragraph Indentation and ::first-letter Selector

• تورفتگی پاراگراف و انتخابگر :: حرف اول Paragraph Indentation and ::first-letter Selector

• واحدهای CSS: em در مقابل px در مقابل % CSS Units: em Versus px Versus %

• واحدهای CSS: em در مقابل px در مقابل % CSS Units: em Versus px Versus %

• خط-ارتفاع | فاصله حروف | فاصله کلمات Line-Height | Letter-Spacing | Word-Spacing

• خط-ارتفاع | فاصله حروف | فاصله کلمات Line-Height | Letter-Spacing | Word-Spacing

• بازی با فونت Playing with Fonts

• بازی با فونت ها Playing with Fonts

• فونت های سفارشی از وب - فونت های گوگل Custom Fonts from Web - Google Fonts

• فونت های سفارشی از وب - فونت های گوگل Custom Fonts from Web - Google Fonts

CSS | متن CSS | Text

پس زمینه CSS CSS Background

• تغییر پس زمینه وب سایت: آن را روی Image یا Pattern تنظیم کنید Changing Background of Your Website: Set It to Image or Pattern

• تغییر پس زمینه وب سایت: آن را روی Image یا Pattern تنظیم کنید Changing Background of Your Website: Set It to Image or Pattern

پس زمینه CSS CSS Background

قرار دادن عنصر CSS CSS Element Placement

• مدل جعبه - حاشیه، بالشتک، حاشیه، تفاوت محتوا، عناصر مرکزی Box Model - Margin, Padding, Border, Content Differences, Centering Elements

• مدل جعبه - حاشیه، بالشتک، حاشیه، تفاوت محتوا، عناصر مرکزی Box Model - Margin, Padding, Border, Content Differences, Centering Elements

• نصب عناصر در داخل ظرف - شمارش صحیح عرض Fitting Elements Inside a Container - Properly Counting Width

• نصب عناصر در داخل ظرف - شمارش صحیح عرض Fitting Elements Inside a Container - Properly Counting Width

• calc() - محاسبات را در سایت خود به صورت خودکار انجام دهید calc() - Automate the Calculations on Your Site

• calc() - محاسبات را در سایت خود به صورت خودکار انجام دهید calc() - Automate the Calculations on Your Site

• ویژگی های سفارشی (متغیرها) Custom Properties (Variables)

• ویژگی های سفارشی (متغیرها) Custom Properties (Variables)

• اندازه جعبه - راه حلی برای شمارش سریعتر عرض Box-Sizing - A Solution for Counting Width Faster

• اندازه جعبه - راه حلی برای شمارش سریعتر عرض Box-Sizing - A Solution for Counting Width Faster

• موقعیت یابی عناصر - ایستا در مقابل نسبی در مقابل مطلق در مقابل ثابت Positioning of Elements - Static Versus Relative Versus Absolute Versus Fixed

• موقعیت یابی عناصر - ایستا در مقابل نسبی در مقابل مطلق در مقابل ثابت Positioning of Elements - Static Versus Relative Versus Absolute Versus Fixed

• نسبی و مطلق: مثال عملی Relative and Absolute: Practical Example

• نسبی و مطلق: مثال عملی Relative and Absolute: Practical Example

• ظرف داخل ظرف دیگری - بیایید یک الگو برای وب سایت بسازیم Container Inside Another Container - Let's Make a Template for Website

• ظرف داخل ظرف دیگری - بیایید یک الگو برای وب سایت بسازیم Container Inside Another Container - Let's Make a Template for Website

• تمرین: یک دکمه ایجاد کنید که کاربر را به بالای وب سایت منتقل کند Exercise: Create a Button That Moves the User to the Top of Website

• تمرین: یک دکمه ایجاد کنید که کاربر را به بالای وب سایت منتقل کند Exercise: Create a Button That Moves the User to the Top of Website

• Float and Clear: متن شناور در اطراف تصویر Float and Clear: Floating Text Around the Image

• Float and Clear: متن شناور در اطراف تصویر Float and Clear: Floating Text Around the Image

• چگونه منوی عنصر را در یک مکان بچسبانیم؟ How to Stick Element Like Menu in One Place?

• چگونه منوی عنصر را در یک مکان بچسبانیم؟ How to Stick Element Like Menu in One Place?

• تمرین: منوی کشویی (سطح دوم) را برای منوی اصلی خود ایجاد کنید Exercise: Create Drop Down Menu (Second Level) for Your Main Menu

• تمرین: منوی کشویی (سطح دوم) را برای منوی اصلی خود ایجاد کنید Exercise: Create Drop Down Menu (Second Level) for Your Main Menu

• z-index - تنظیم ترتیب عناصر همپوشانی z-index - Setting the Order of Overlapping Elements

• z-index - تنظیم ترتیب عناصر همپوشانی z-index - Setting the Order of Overlapping Elements

• تمرین: ایجاد جعبه اطلاع رسانی در مورد استفاده از کوکی در پایین صفحه Exercise: Create Box Informing about Cookie Usage at the Bottom of Page

• تمرین: ایجاد جعبه اطلاع رسانی در مورد استفاده از کوکی در پایین صفحه Exercise: Create Box Informing about Cookie Usage at the Bottom of Page

• چگونه به ترول هایی که محتوای شما را سرریز می کنند واکنش نشان دهیم؟ How to React to Trolls That '˜Overflow' Your Content?

• چگونه به ترول هایی که محتوای شما را سرریز می کنند واکنش نشان دهیم؟ How to React to Trolls That '˜Overflow' Your Content?

• تراز کردن نمادهای SVG با متن با استفاده از نمایشگر: flex; Aligning SVG Icons with Text Using display: flex;

• تراز کردن نمادهای SVG با متن با استفاده از نمایشگر: flex; Aligning SVG Icons with Text Using display: flex;

• مرکز عنصر به صورت عمودی و افقی - جعبه مدال Centering Element Vertically and Horizontally - Modal Box

• مرکز عنصر به صورت عمودی و افقی - جعبه مدال Centering Element Vertically and Horizontally - Modal Box

قرار دادن عنصر CSS CSS Element Placement

HTML HTML

• برچسب های معنایی: مقاله، کنار، بخش، ناوبری، اصلی، سربرگ Semantic Tags: article, aside, section, nav, main, header

• برچسب های معنایی: مقاله، کنار، بخش، ناوبری، اصلی، سربرگ Semantic Tags: article, aside, section, nav, main, header

HTML HTML

شبکه CSS 3 CSS 3 Grid

• الگوی شبکه، ردیف و ستون، شکاف ها، و گسترش خودکار Grid Template, Row and Column, Gaps, and Auto Expanding

• الگوی شبکه، ردیف و ستون، شکاف ها، و گسترش خودکار Grid Template, Row and Column, Gaps, and Auto Expanding

• مناطق شبکه - نام مناطق برای شبکه شما Grid Areas - Name Areas for Your Grid

• مناطق شبکه - نام مناطق برای شبکه شما Grid Areas - Name Areas for Your Grid

• تمرین: مکان نوار 'nav' را با استفاده از Grid Area و @media Queries تغییر دهید Exercise: Change the Place of 'nav' Bar Using Grid Area and @media Queries

• تمرین: مکان نوار 'nav' را با استفاده از Grid Area و @media Queries تغییر دهید Exercise: Change the Place of 'nav' Bar Using Grid Area and @media Queries

شبکه CSS 3 CSS 3 Grid