آموزش HTML5 CSS3 JavaScript Bootstrap و Jquery Masterclass

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

مقدمه HTML5 HTML5 Introduction

• نمای کلی بخش Section Overview

• ویرایشگر کد ویژوال استودیو را نصب کنید Install Visual Studio Code Editor

• مقدمه ای بر HTML5 Introduction to HTML5

• برچسب های HTML5 HTML5 Tags

• ویژگی های برچسب Tag's Attributes

• فاویکون در صفحه وب HTML5 Favicon in HTML5 Webpage

• تاریخچه HTML5 History of HTML5

• بخش نتیجه گیری Section Conclusion

قالب بندی HTML5 HTML5 Formatting

• نمای کلی بخش Section Overview

• سرفصل ها Headings

• پاراگراف Paragraph

• برچسب های قالب بندی مختلف Different Formatting Tags

• بخش نتیجه گیری Section Conclusion

نقل قول HTML5 HTML5 Quotation

• نمای کلی بخش Section Overview

• برچسب Blockquote Blockquote Tag

• برچسب نقل قول کوتاه Short Quotation Tag

• برچسب اختصاری Abbreviation Tag

• تگ آدرس Address Tag

• برچسب استناد Cite Tag

• لغو دو جهته Bi-Directional Override

• بخش نتیجه گیری Section Conclusion

هایپرلینک HTML5 HTML5 Hyperlink

• نمای کلی بخش Section Overview

• هایپرلینک داخلی Internal Hyperlink

• هایپرلینک خارجی External Hyperlink

• هایپرلینک ایمیل Email Hyperlink

• Hyperlink Page Jump یا Hyperlink Bookmark Pagejump Hyperlink or Bookmark Hyperlink

• ویژگی پیوند Link Attribute

• تصویر به عنوان پیوند Image as a Link

• بخش نتیجه گیری Section Conclusion

تصویر HTML5 HTML5 Image

• نمای کلی بخش Section Overview

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

• بخش نتیجه گیری Section Conclusion

HTML5 Block Level & Inline Level Elements HTML5 Block Level & Inline Level Elements

• نمای کلی بخش Section Overview

• برچسب‌های سطح بلوک Block Level Tags

• برچسب های درون خطی Inline Tags

• بخش نتیجه گیری Section Conclusion

جدول HTML5 HTML5 Table

• نمای کلی بخش Section Overview

• جدول در HTML5 Table in HTML5

• بخش نتیجه گیری Section Conclusion

رسانه HTML5 HTML5 Media

• نمای کلی بخش Section Overview

• رسانه در HTML5 Media in HTML5

• برچسب ویدیو Video Tag

• برچسب صوتی Audio Tag

• جاسازی ویدیو یوتیوب Embedding Youtube Video

• بخش نتیجه گیری Section Conclusion

فرم HTML5 HTML5 Form

• نمای کلی بخش Section Overview

• فرم و ویژگی های آن Form and Its Attributes

• عنصر فرم Form Element

• انواع ورودی های مختلف Different Input Types

• ویژگی های ورودی Input Attributes

• بخش نتیجه گیری Section Conclusion

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

• نمای کلی بخش Section Overview

• عنصر معنایی قسمت 1 Semantic Element Part 1

• عنصر معنایی قسمت 2 Semantic Element Part 2

• بخش نتیجه گیری Section Conclusion

شروع کار با CSS3 Getting Started with CSS3

• نمای کلی بخش Section Overview

• مقدمه ای بر CSS3 Introduction to CSS3

• انواع CSS Types of CSS

• انواع انتخابگرهای CSS Types of CSS Selectors

• بخش نتیجه گیری Section Conclusion

اصول CSS CSS Fundamentals

• نمای کلی بخش Section Overview

• مدل جعبه Box Model

• سایه جعبه Box Shadow

• شعاع مرزی Border Radius

• سیستم شبکه CSS CSS Grid System

• CSS Flexbox CSS Flexbox

• میز طراحی Designing Table

• بخش نتیجه گیری Section Conclusion

تایپوگرافی CSS CSS Typography

• نمای کلی بخش Section Overview

• تایپوگرافی CSS CSS Typography

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

• فونت های سفارشی Custom Fonts

• بخش نتیجه گیری Section Conclusion

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

• نمای کلی بخش Section Overview

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

• پس زمینه گرادیان خطی Linear Gradient Background

• گرادیان شعاعی Radial Gradient

• گرادیان مخروطی Conic Gradient

• ساخت پس زمینه های شفاف Making Transparent Backgrounds

• بخش نتیجه گیری Section Conclusion

ساخت وب سایت تک صفحه ای - پروژه 1 Making a Single Page Website - Project 1

• نمای کلی بخش Section Overview

• منوی ناوبری Navigation Menu

• بخش قهرمان Hero Section

• درباره بخش About Section

• بخش نمونه کارها Portfolio Section

• بخش تماس Contact Section

• بخش نتیجه گیری Section Conclusion

طراحی وب سایت ریسپانسیو با CSS Responsive Web Design with CSS

• نمای کلی بخش Section Overview

• ساخت منوی پاسخگو Making a Responsive Menu

• بخش نتیجه گیری Section Conclusion

CSS Transitions & Animations CSS Transitions & Animations

• نمای کلی بخش Section Overview

• CSS Transformation CSS Tranformation

• انتقال CSS CSS Transitions

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

• بخش نتیجه گیری Section Conclusion

موضوعات و کتابخانه های پیشرفته CSS CSS Advanced Topics & Libraries

• نمای کلی بخش Section Overview

• ساخت اسلایدر با استفاده از کتابخانه Cycle2 JS Making a Slider using Cycle2 JS Library

• ساخت گالری لایت باکس با استفاده از کتابخانه Lightbox2 JS Making a Lightbox Gallery using Lightbox2 JS Library

• بخش نتیجه گیری Section Conclusion

تست CSS و نتیجه گیری CSS Testing & Conclusion

• نمای کلی بخش Section Overview

• ویژگی Dedection Feature Dedection

• Chrome Inspect Element Chrome Inspect Element

• بخش نتیجه گیری Section Conclusion

ساخت وب سایت تک صفحه ای دیگر - پروژه 2 Making Another Single Page Website - Project 2

• ساخت وب سایت تک صفحه ای دیگر - پروژه 2 Making Another Single Page Website - Project 2

مبانی جاوا اسکریپت Javascript Basics

• Hello World در جاوا اسکریپت Hello World in Javascript

• موتورهای جاوا اسکریپت Javascript Engines

• متغیرها و انواع داده ها Variables & Data Types

• اپراتورها Operators

• نوع و اولویت اپراتور Type of and Operator Precedence

عبارات شرطی جاوا اسکریپت Javascript Conditional Statements

• اگر دیگر بیانیه If Else Statement

• بیانیه شرطی مثال 1 Conditional Statement Example 1

• بیانیه شرطی مثال 2 Conditional Statement Example 2

• اپراتور سه تایی Ternary Operator

مفاهیم پیشرفته جاوا اسکریپت Javascript Advance Concepts

• ارزش کاذب Falsy Value

• پایه عملکرد Basic of Function

• عملکرد به عنوان یک متغیر Function as a Variable

کار با ساختارهای داده جاوا اسکریپت Working with Javascript Data Structures

• مقدمه ای بر آرایه ها Introduction to Arrays

• روش‌های پر کردن و فیلتر کردن در آرایه‌ها Fill & Filter Methods in Arrays

• روش های برش و برش Slice & Splice Methods

• شیء Object

• روش ها در اشیاء Methods in Objects

حلقه ها و تکرارهای جاوا اسکریپت Javascript Loops & Iterations

• برای حلقه For Loop

• در حالی که حلقه While Loop

• انجام while Loop Do While Loop

• حلقه Foreach Foreach Loop

• برای حلقه For of Loop

• برای در حلقه For in Loop

جاوا اسکریپت دستکاری DOM Javascript DOM Manipulation

• Dom چیست؟ What is Dom?

• رویدادهای Dom Dom Events

• عنصر HTML را بگیرید Grab HTML Element

• عنصر HTML را تغییر دهید Change HTML Element

• ویژگی های محاسبه شده را دریافت کنید Get Computed Properties

ویژگی های مدرن جاوا اسکریپت Javascript Modern Features

• ایجاد اشیاء Creating Objects

• نمونه اولیه Prototype

• نوشتن کد بهتر Writing Better Code

• عملکرد ناشناس خود اجرا Self Executing Anonymous Function

• الفاظ الگو Template Literals

• نقشه Map

• ساختارزدایی داده ها De-Structuring Data

موضوعات پیشرفته جاوا اسکریپت Javascript Advance Topics

• ماژول کلاس و صادرات Class & Export Module

• گیرنده و تنظیم کننده Getter & Setter

• ارث Inheritance

مقدمه ای بر بوت استرپ 5.3 Introduction to Bootstrap 5.3

• مقدمه ای بر بوت استرپ 5.3 Introduction to Bootstrap 5.3

• تاریخچه بوت استرپ Bootstrap History

• موارد جدید در Bootstrap 5.3 What is new in Bootstrap 5.3

• اصطلاحات پایه Basic Terminology

• نحوه نصب بوت استرپ How to Install Bootstrap

• کد تمرین بوت استرپ Bootstrap Practice Code

طرح بوت استرپ Bootstrap Layout

• نقاط شکست Breakpoints

• ظرف Container

• شبکه Grid

• ستون Column

• ناودان Gutter

اجزای بوت استرپ Bootstrap Components

• آکاردئون Accordion

• هشدار Alert

• نشان Badge

• خرده نان Breadcrum

• دکمه Button

• گروه دکمه Button Group

• کارت Card

• چرخ فلک Carousel

• فرو ریختن Collapse

• کشویی Dropdown

• گروه لیست List Group

• مدال Modal

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

• Navs & Tabs Navs & Tabs

• خارج از بوم Offcanvas

• صفحه بندی Pagination

• مکان نگهدار Placeholder

• پاپاور Popover

• پیشرفت Progress

• Scrollspy Scrollspy

• اسپینر Spinner

• نان تست Toast

• راهنمای ابزار Tooltip

یک ظاهر طراحی محتوا با بوت استرپ Content Styling with Bootstrap

• تایپوگرافی Typography

• تصاویر Images

• جداول Tables

• ارقام Figures

کار با فرم بوت استرپ Working with Bootstrap Form

• کنترل فرم Form Control

• انتخاب کنید Select

• چک باکس و دکمه رادیو Checkbox & Radio Button

• محدوده Range

• گروه ورودی Input Group

• برچسب شناور Floating Label

• طرح بندی Layout

• اعتبار سنجی Validation

ابزارهای بوت استرپ Bootstrap Utilities

• مرز Border

• متن Text

• سایه Shadow

پروژه های بوت استرپ Bootstrap Projects

• ساخت پروژه آلبوم - پروژه 3 Making a Album Project - Project 3

• ساخت پروژه جدول قیمت - پروژه 4 Making a Pricing Table Project - Project 4

jQuery مقدمه jQuery Introduction

• مقدمه ای بر جی کوئری Introduction to jQuery

شروع کار با jQuery Getting Started with jQuery

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

• jQuery را با CDN راه اندازی کنید Setup jQuery with CDN

• نحو پایه Basic Syntax

• انتخابگرهای جی کوئری jQuery Selectors

رویدادهای جی کوئری jQuery Events

• رویداد ماوس Mouse Event

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

• رویداد فرم Form Event

• رویداد پنجره Window Event

jQuery Get & Set Methods jQuery Get & Set Methods

• دریافت روش ها Get Methods

• تنظیم روش ها Set Methods

دستکاری CSS با جی کوئری CSS Manipulation with jQuery

• حذف و تغییر وضعیت را اضافه کنید Add Remove & Toggle

• روش CSS CSS Method

• روش hasClass hasClass Method

مدیریت رویداد با جی کوئری Event Handling with jQuery

• در روش On Method

• روش خاموش Off Method

دستکاری Dom با جی کوئری Dom Manipulation with jQuery

• اضافه کردن و آماده کردن Append & Prepend

• بعد و قبل After & Before

• خالی کردن و حذف کردن Empty & Remove

• AppendTo و PrependTo AppendTo & PrependTo

• کلون Clone

• ReplaceWith & ReplaceAll ReplaceWith & ReplaceAll

• بسته بندی و باز کردن Wrap & Unwrap

• WrapAll & Innerwrap WrapAll & Innerwrap

موقعیت و ابعاد جی کوئری jQuery Position & Dimensions

• روش های عرض و ارتفاع Width & Height Methods

• روش های موقعیت و افست Position & Offset Methods

• ScrollTop & ScrollLeft Methods ScrollTop & ScrollLeft Methods

جلوه های جی کوئری jQuery Effects

• نمایش Hide & Toggle Show Hide & Toggle

• روش های محو شدن Fading Methods

• روش های کشویی Sliding Methods

• روش متحرک سازی Animate Method

• روش توقف Stop Method

• روش زنجیر زنی Method Chaining

عبور از DOM با jQuery Traversing the DOM with jQuery

• روش های اجداد Ancestors Methods

• روش های نسل Descendant Methods

• روش های خواهر و برادر Sibling Methods

• روش های فیلتر Filter Methods

• روش Has & Is Has & Is Method

• هر روش Each Method

ویژگی های شی رویداد jQuery jQuery Event Object Properties

• pageX & pageY pageX & pageY

• نوع رویداد Event Type

• رویداد کدام ملک Event Which Property

• ویژگی هدف رویداد Event Target Property

• روش پیشگیری از پیش فرض preventDefault Method

• روش توقف انتشار stopPropagation Method

بعد چه می شود؟ What's Next?

• پلاگین های جی کوئری jQuery Plugins