صفر تا صد: دوره جامع آموزش توسعه فرانت‌اند وب با بیش از ۷۰ ساعت آموزش - آخرین آپدیت

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

Introduction-فصل 1-مقدمه Introduction

• Introduction-ویدیو 1-1-مقدمه Introduction

HTML-فصل 2-اچ تی ام ال HTML

• What is HTML-ویدیو 2-1-اچ تی ام ال چیست What is HTML

• Basic HTML Structure-ویدیو 2-2-ساختار اصلی اچ تی ام ال Basic HTML Structure

• HTML Elements-ویدیو 2-3-المان های اچ تی ام ال HTML Elements

• HTML Attributes-ویدیو 2-4-ویژگی های اچ تی ام ال HTML Attributes

• HTML Styles-ویدیو 2-5-استایل های اچ تی ام ال HTML Styles

• HTML Headings-ویدیو 2-6-سر تیترهای اچ تی ام ال HTML Headings

• HTML Paragraphs and Pre tag-ویدیو 2-7-پاراگراف ها و تگ Pre در اچ تی ام ال HTML Paragraphs and Pre tag

• HTML Computer Code Tags-ویدیو 2-8-تگ های کد کامپیوتری اچ تی ام ال HTML Computer Code Tags

• HTML Comments-ویدیو 2-9-کامنت های اچ تی ام ال HTML Comments

• Text Formatting-ویدیو 2-10-فرمت بندی متن Text Formatting

• Quotes , ABBR , BDO-ویدیو 2-11-نقل قول ها، ABBR، BDO Quotes , ABBR , BDO

• HTML Colors-ویدیو 2-12-رنگ های اچ تی ام ال HTML Colors

• Important Concept : Block and Inline Elements-ویدیو 2-13-مفهوم مهم: المان های بلاک و اینلاین Important Concept : Block and Inline Elements

• Understanding ID and Class-ویدیو 2-14-درک ID و Class Understanding ID and Class

• HTML Links-ویدیو 2-15-لینک های اچ تی ام ال HTML Links

• HTML Images-ویدیو 2-16-تصاویر اچ تی ام ال HTML Images

• HTML Tables-ویدیو 2-17-جداول اچ تی ام ال HTML Tables

• HTML Lists-ویدیو 2-18-لیست های اچ تی ام ال HTML Lists

• HTML Resource File-ویدیو 2-19-فایل منبع اچ تی ام ال HTML Resource File

CSS-فصل 3-سی اس اس CSS

• CSS Syntax-ویدیو 3-1-نحو سی اس اس CSS Syntax

• CSS Selectors-ویدیو 3-2-انتخابگرهای سی اس اس CSS Selectors

• CSS Parent Selectors-ویدیو 3-3-انتخابگرهای والد سی اس اس CSS Parent Selectors

• Types of CSS Styles-ویدیو 3-4-انواع استایل های سی اس اس Types of CSS Styles

• CSS Colors-ویدیو 3-5-رنگ های سی اس اس CSS Colors

• Border Radius and Outline-ویدیو 3-6-شعاع حاشیه و Outline Border Radius and Outline

• CSS Margin-ویدیو 3-7-Margin سی اس اس CSS Margin

• CSS Padding-ویدیو 3-8-Padding سی اس اس CSS Padding

• Important : CSS Box Model-ویدیو 3-9-مهم: مدل جعبه ای سی اس اس Important : CSS Box Model

• CSS Font Family-ویدیو 3-10-خانواده فونت سی اس اس CSS Font Family

• CSS Width , Height , Line Height-ویدیو 3-11-عرض، ارتفاع، ارتفاع خط سی اس اس CSS Width , Height , Line Height

• Text Formatting-ویدیو 3-12-فرمت بندی متن Text Formatting

• CSS Display Property-ویدیو 3-13-خاصیت Display سی اس اس CSS Display Property

• Important Concept : CSS Positioning-ویدیو 3-14-مفهوم مهم: موقعیت دهی سی اس اس Important Concept : CSS Positioning

• CSS Overflow-ویدیو 3-15-سرریز سی اس اس CSS Overflow

• Important Concept : Float and Clear-ویدیو 3-16-مفهوم مهم: شناور و Clear Important Concept : Float and Clear

• CSS Opacity-ویدیو 3-17-شفافیت سی اس اس CSS Opacity

• Box Shadow-ویدیو 3-18-سایه جعبه Box Shadow

• Text Shadow-ویدیو 3-19-سایه متن Text Shadow

• CSS Resource Files-ویدیو 3-20-فایل های منبع سی اس اس CSS Resource Files

CSS Transition-فصل 4-انتقال سی اس اس CSS Transition

• Transition Property and Transition Duration-ویدیو 4-1-خاصیت Transition و مدت زمان Transition Transition Property and Transition Duration

• Transition Timing Function and Transition Delay-ویدیو 4-2-تابع زمان بندی Transition و تاخیر Transition Transition Timing Function and Transition Delay

• Interesting Illustration using Transition Delay-ویدیو 4-3-تصویرسازی جالب با استفاده از تاخیر Transition Interesting Illustration using Transition Delay

• Project : Cool Unique Hover Effect-ویدیو 4-4-پروژه: افکت Hover منحصر به فرد و جذاب Project : Cool Unique Hover Effect

• Button Hover Project Resource File-ویدیو 4-5-فایل منبع پروژه Hover دکمه Button Hover Project Resource File

CSS Animation-فصل 5-انیمیشن سی اس اس CSS Animation

• Animation Basics : Part 1-ویدیو 5-1-مبانی انیمیشن: قسمت 1 Animation Basics : Part 1

• Animation Basics : Part 2-ویدیو 5-2-مبانی انیمیشن: قسمت 2 Animation Basics : Part 2

• Animation : Shorthand-ویدیو 5-3-انیمیشن: خلاصه نویسی Animation : Shorthand

• Project : Animated Video Background Hero Area Part 1-ویدیو 5-4-پروژه: پس زمینه ویدیویی متحرک Hero Area قسمت 1 Project : Animated Video Background Hero Area Part 1

• Project : Animated Video Background Hero Area Part 2-ویدیو 5-5-پروژه: پس زمینه ویدیویی متحرک Hero Area قسمت 2 Project : Animated Video Background Hero Area Part 2

• Project : Animated Video Background Hero Area Part 3-ویدیو 5-6-پروژه: پس زمینه ویدیویی متحرک Hero Area قسمت 3 Project : Animated Video Background Hero Area Part 3

• Animated Video Background Project Files-ویدیو 5-7-فایل های پروژه پس زمینه ویدیویی متحرک Animated Video Background Project Files

CSS Flex-فصل 6-فلکس باکس سی اس اس CSS Flex

• Display Property-ویدیو 6-1-خاصیت Display Display Property

• Flex Direction-ویدیو 6-2-جهت فلکس Flex Direction

• Flex Wrap-ویدیو 6-3-Wrap فلکس Flex Wrap

• Flex Flow-ویدیو 6-4-Flow فلکس Flex Flow

• Justify Content-ویدیو 6-5-توجیه محتوا Justify Content

• Align Items-ویدیو 6-6-تراز کردن آیتم ها Align Items

• Align Content-ویدیو 6-7-تراز کردن محتوا Align Content

• Order-ویدیو 6-8-ترتیب Order

• Flex Grow-ویدیو 6-9-رشد فلکس Flex Grow

• Flex Shrink-ویدیو 6-10-کوچک شدن فلکس Flex Shrink

• Flex Basis-ویدیو 6-11-مبنای فلکس Flex Basis

• Flex Shorthand-ویدیو 6-12-خلاصه نویسی فلکس Flex Shorthand

• Align Self-ویدیو 6-13-تراز کردن خود Align Self

• CSS Flex Resource Files-ویدیو 6-14-فایل های منبع فلکس سی اس اس CSS Flex Resource Files

CSS Grid-فصل 7-گرید سی اس اس CSS Grid

• Concept of Grid Template , Grid Gap , Grid auto X-ویدیو 7-1-مفهوم Grid Template، Grid Gap، Grid auto X Concept of Grid Template , Grid Gap , Grid auto X

• Concept of Grid auto flow-ویدیو 7-2-مفهوم Grid auto flow Concept of Grid auto flow

• Concept of Different Grid Gap-ویدیو 7-3-مفهوم Grid Gap متفاوت Concept of Different Grid Gap

• Justify Content-ویدیو 7-4-توجیه محتوا Justify Content

• Difference Between Justify Content and Justify Items-ویدیو 7-5-تفاوت بین توجیه محتوا و توجیه آیتم ها Difference Between Justify Content and Justify Items

• Align Content and Align Items-ویدیو 7-6-تراز کردن محتوا و تراز کردن آیتم ها Align Content and Align Items

• Place Content-ویدیو 7-7-قرار دادن محتوا Place Content

• Rearranging Items using some cool Properties-ویدیو 7-8-تغییر ترتیب آیتم ها با استفاده از ویژگی های جالب Rearranging Items using some cool Properties

• Grid Area and Challenge-ویدیو 7-9-ناحیه گرید و چالش Grid Area and Challenge

• Solution for the Challenge-ویدیو 7-10-راه حل چالش Solution for the Challenge

• Justify Self and Align Self-ویدیو 7-11-توجیه خود و تراز کردن خود Justify Self and Align Self

• Project - Web Layout using CSS Grid easily-ویدیو 7-12-پروژه - طرح بندی وب با استفاده از گرید سی اس اس به آسانی Project - Web Layout using CSS Grid easily

• CSS Grid Resource Files-ویدیو 7-13-فایل های منبع گرید سی اس اس CSS Grid Resource Files

CSS SASS-فصل 8-ساس سی اس اس CSS SASS

• Intro-ویدیو 8-1-معرفی Intro

• Sass Variables-ویدیو 8-2-متغیرهای ساس Sass Variables

• Sass Nesting-ویدیو 8-3-تودرتو نویسی ساس Sass Nesting

• The Ampersand Sign (&)-ویدیو 8-4-علامت آمپرساند (&) The Ampersand Sign (&)

• Shortening Code having some prefix-ویدیو 8-5-کوتاه کردن کد با داشتن پیشوند Shortening Code having some prefix

• Mixin-ویدیو 8-6-Mixin Mixin

• Mixin Challenge-ویدیو 8-7-چالش Mixin Mixin Challenge

• Import-ویدیو 8-8-Import Import

• Extend-ویدیو 8-9-Extend Extend

• Mixin with arguments-ویدیو 8-10-Mixin با آرگومان Mixin with arguments

• Final Touch of the Project-ویدیو 8-11-لمس نهایی پروژه Final Touch of the Project

• CSS SASS Resource Files-ویدیو 8-12-فایل های منبع ساس سی اس اس CSS SASS Resource Files

CSS Pseudo Elements-فصل 9-عناصر کاذب سی اس اس CSS Pseudo Elements

• Understanding Pseudo Element and Project : Unique Hover Effect : part 1-ویدیو 9-1-درک عنصر کاذب و پروژه: افکت Hover منحصر به فرد: قسمت 1 Understanding Pseudo Element and Project : Unique Hover Effect : part 1

• Project : Unique Hover Effect : part 2-ویدیو 9-2-پروژه: افکت Hover منحصر به فرد: قسمت 2 Project : Unique Hover Effect : part 2

• Project : Unique Hover Effect : part 3-ویدیو 9-3-پروژه: افکت Hover منحصر به فرد: قسمت 3 Project : Unique Hover Effect : part 3

• Project : Unique Hover Effect : part 4-ویدیو 9-4-پروژه: افکت Hover منحصر به فرد: قسمت 4 Project : Unique Hover Effect : part 4

• CSS Pseudo Element Resource Files-ویدیو 9-5-فایل های منبع عنصر کاذب سی اس اس CSS Pseudo Element Resource Files

CSS Shapes-فصل 10-شکل های سی اس اس CSS Shapes

• Triangle-ویدیو 10-1-مثلث Triangle

• Hexagon-ویدیو 10-2-شش ضلعی Hexagon

• Circle-ویدیو 10-3-دایره Circle

• Book Shape-ویدیو 10-4-شکل کتاب Book Shape

• Hero Area Project-ویدیو 10-5-پروژه Hero Area Hero Area Project

• CSS Shapes Resource Files-ویدیو 10-6-فایل های منبع شکل های سی اس اس CSS Shapes Resource Files

CSS Hover Effect Projects-فصل 11-پروژه های افکت Hover سی اس اس CSS Hover Effect Projects

• Basic Markup to Start with-ویدیو 11-1-نشانه گذاری اولیه برای شروع Basic Markup to Start with

• Using Font Awesome-ویدیو 11-2-استفاده از Font Awesome Using Font Awesome

• Basic Styles-ویدیو 11-3-استایل های اولیه Basic Styles

• Hover Project 1-ویدیو 11-4-پروژه Hover 1 Hover Project 1

• Hover Project 2-ویدیو 11-5-پروژه Hover 2 Hover Project 2

• Hover Project 3-ویدیو 11-6-پروژه Hover 3 Hover Project 3

• Challenge for You-ویدیو 11-7-چالشی برای شما Challenge for You

• Hover Project 4-ویدیو 11-8-پروژه Hover 4 Hover Project 4

• Hover Project 5-ویدیو 11-9-پروژه Hover 5 Hover Project 5

• Hover Project 6-ویدیو 11-10-پروژه Hover 6 Hover Project 6

• Hover Project 7-ویدیو 11-11-پروژه Hover 7 Hover Project 7

• Hover Project 8-ویدیو 11-12-پروژه Hover 8 Hover Project 8

• Hover Project 9-ویدیو 11-13-پروژه Hover 9 Hover Project 9

• Hover Project 10-ویدیو 11-14-پروژه Hover 10 Hover Project 10

• CSS Hover Projects Resource Files-ویدیو 11-15-فایل های منبع پروژه های Hover سی اس اس CSS Hover Projects Resource Files

• Images used in Hover Projects-ویدیو 11-16-تصاویر استفاده شده در پروژه های Hover Images used in Hover Projects

CSS Loader Animation Projects-فصل 12-پروژه های انیمیشن Loader سی اس اس CSS Loader Animation Projects

• Basic Markup to start with-ویدیو 12-1-نشانه گذاری اولیه برای شروع Basic Markup to start with

• Project1-ویدیو 12-2-پروژه 1 Project1

• Project2-ویدیو 12-3-پروژه 2 Project2

• Project3-ویدیو 12-4-پروژه 3 Project3

• Project4-ویدیو 12-5-پروژه 4 Project4

• Project5-ویدیو 12-6-پروژه 5 Project5

• Project6-ویدیو 12-7-پروژه 6 Project6

• Project7-ویدیو 12-8-پروژه 7 Project7

• Project8-ویدیو 12-9-پروژه 8 Project8

• Project9-ویدیو 12-10-پروژه 9 Project9

• Project10-ویدیو 12-11-پروژه 10 Project10

• Implementation of full page and constrained dimension of Animated loaders-ویدیو 12-12-پیاده سازی صفحه کامل و ابعاد محدود لودرهای متحرک Implementation of full page and constrained dimension of Animated loaders

• LOader Animation Projects Resource Files-ویدیو 12-13-فایل های منبع پروژه های انیمیشن Loader LOader Animation Projects Resource Files

CSS Character Animation-فصل 13-انیمیشن کاراکتر سی اس اس CSS Character Animation

• Important Information to start with-ویدیو 13-1-اطلاعات مهم برای شروع Important Information to start with

• Project : Running Santa-ویدیو 13-2-پروژه: سانتا در حال دویدن Project : Running Santa

• Project : Walking Dino-ویدیو 13-3-پروژه: دایناسور در حال راه رفتن Project : Walking Dino

• Project : Dino Chasing Santa-ویدیو 13-4-پروژه: دایناسور در حال تعقیب سانتا Project : Dino Chasing Santa

• Project : Bahamut-ویدیو 13-5-پروژه: بهاموت Project : Bahamut

• Project : Dark Knight-ویدیو 13-6-پروژه: شوالیه تاریکی Project : Dark Knight

• Character Animation Resource Files-ویدیو 13-7-فایل های منبع انیمیشن کاراکتر Character Animation Resource Files

Javascript-فصل 14-جاوااسکریپت Javascript

• What is Javascript and why JS is used-ویدیو 14-1-جاوااسکریپت چیست و چرا JS استفاده می شود؟ What is Javascript and why JS is used

• Javascript Syntax-ویدیو 14-2-نحو جاوااسکریپت Javascript Syntax

• Best use of JS-ویدیو 14-3-بهترین کاربرد JS Best use of JS

• Javascript Comments-ویدیو 14-4-کامنت های جاوااسکریپت Javascript Comments

• Javascript Variables-ویدیو 14-5-متغیرهای جاوااسکریپت Javascript Variables

• Types of Variables-ویدیو 14-6-انواع متغیرها Types of Variables

• Arithmetic Operators-ویدیو 14-7-عملگرهای ریاضی Arithmetic Operators

• Assignment Operators-ویدیو 14-8-عملگرهای انتساب Assignment Operators

• Concatenation Operator-ویدیو 14-9-عملگر الحاق Concatenation Operator

• Adding Numbers and Strings-ویدیو 14-10-اضافه کردن اعداد و رشته ها Adding Numbers and Strings

• Comparison Operator-ویدیو 14-11-عملگر مقایسه Comparison Operator

• Logical Operator-ویدیو 14-12-عملگر منطقی Logical Operator

• If Statement-ویدیو 14-13-دستور If If Statement

• Important Concept : If (1)-ویدیو 14-14-مفهوم مهم: If (1) Important Concept : If (1)

• Else Statement-ویدیو 14-15-دستور Else Else Statement

• Nested If Else Statement-ویدیو 14-16-دستور If Else تودرتو Nested If Else Statement

• Ternary Operator-ویدیو 14-17-عملگر سه تایی Ternary Operator

• Function in Javascript-ویدیو 14-18-تابع در جاوااسکریپت Function in Javascript

• Parameterized Function-ویدیو 14-19-تابع پارامتری Parameterized Function

• Return Function-ویدیو 14-20-تابع Return Return Function

• Nested Function-ویدیو 14-21-تابع تودرتو Nested Function

• Local and Global Variables-ویدیو 14-22-متغیرهای محلی و سراسری Local and Global Variables

• Switch Statement-ویدیو 14-23-دستور Switch Switch Statement

• Intro to Loops-ویدیو 14-24-معرفی حلقه ها Intro to Loops

• For Loop-ویدیو 14-25-حلقه For For Loop

• While Loop-ویدیو 14-26-حلقه While While Loop

• Do While Loop-ویدیو 14-27-حلقه Do While Do While Loop

• Intro to Arrays-ویدیو 14-28-معرفی آرایه ها Intro to Arrays

• Ways of Creating Array-ویدیو 14-29-روش های ایجاد آرایه Ways of Creating Array

• Dynamic Array-ویدیو 14-30-آرایه پویا Dynamic Array

• Array Methods : Shift and Unshift-ویدیو 14-31-متدهای آرایه: Shift و Unshift Array Methods : Shift and Unshift

• Array Methods : Join and toString-ویدیو 14-32-متدهای آرایه: Join و toString Array Methods : Join and toString

• Javascript Objects-ویدیو 14-33-اشیاء جاوااسکریپت Javascript Objects

• For In Loop-ویدیو 14-34-حلقه For In For In Loop

• Javascript Resource Files-ویدیو 14-35-فایل های منبع جاوااسکریپت Javascript Resource Files

ES6+-فصل 15-ES6+ ES6+

• Hoisting-ویدیو 15-1-Hoisting Hoisting

• Difference between var , let and const-ویدیو 15-2-تفاوت بین var، let و const Difference between var , let and const

• Understanding const-ویدیو 15-3-درک const Understanding const

• Arrow Function-ویدیو 15-4-تابع Arrow Arrow Function

• Template Literals-ویدیو 15-5-Template Literals Template Literals

• Spread Operator-ویدیو 15-6-عملگر Spread Spread Operator

• For-of Loop-ویدیو 15-7-حلقه For-of For-of Loop

• Rest Parameter-ویدیو 15-8-پارامتر Rest Rest Parameter

• Array Destructuring-ویدیو 15-9-تخریب آرایه Array Destructuring

• Object Destructuring-ویدیو 15-10-تخریب شیء Object Destructuring

Advanced Javascript-فصل 16-جاوااسکریپت پیشرفته Advanced Javascript

• Map-ویدیو 16-1-Map Map

• Filter-ویدیو 16-2-Filter Filter

• Reduce-ویدیو 16-3-Reduce Reduce

• Call ,Apply ,Bind-ویدیو 16-4-Call، Apply، Bind Call ,Apply ,Bind

• Flattening array-ویدیو 16-5-مسطح سازی آرایه Flattening array

• Random Number Generator-ویدیو 16-6-تولید کننده اعداد تصادفی Random Number Generator

• Math Floor-ویدیو 16-7-Math Floor Math Floor

• Challenge : Random element picker from an array-ویدیو 16-8-چالش: انتخابگر عنصر تصادفی از یک آرایه Challenge : Random element picker from an array

• Solution : Random Element Picker from an Array-ویدیو 16-9-راه حل: انتخابگر عنصر تصادفی از یک آرایه Solution : Random Element Picker from an Array

• Advanced JS Resource Files-ویدیو 16-10-فایل های منبع JS پیشرفته Advanced JS Resource Files

AJAX-فصل 17-آژاکس AJAX

• What is AJAX-ویدیو 17-1-آژاکس چیست؟ What is AJAX

• AJAX Examples-ویدیو 17-2-مثال های آژاکس AJAX Examples

• How Ajax Works-ویدیو 17-3-آژاکس چگونه کار می کند؟ How Ajax Works

• XMLHTTPRequest Object-ویدیو 17-4-شیء XMLHTTPRequest XMLHTTPRequest Object

• Request Types and Methods-ویدیو 17-5-انواع و روش های درخواست Request Types and Methods

• Using Get Request-ویدیو 17-6-استفاده از درخواست Get Using Get Request

• Using Post Request-ویدیو 17-7-استفاده از درخواست Post Using Post Request

• OnReadyStateChange Function-ویدیو 17-8-تابع OnReadyStateChange OnReadyStateChange Function

• Handling Response from Server-ویدیو 17-9-مدیریت پاسخ از سرور Handling Response from Server

• Ajax Project 1-ویدیو 17-10-پروژه آژاکس 1 Ajax Project 1

• Ajax Project 2 : Dynamic-ویدیو 17-11-پروژه آژاکس 2: پویا Ajax Project 2 : Dynamic

• Ajax Project 3 : Search Suggestion : Part 1-ویدیو 17-12-پروژه آژاکس 3: پیشنهاد جستجو: قسمت 1 Ajax Project 3 : Search Suggestion : Part 1

• Ajax Project 3 : Search Suggestion : Part 2-ویدیو 17-13-پروژه آژاکس 3: پیشنهاد جستجو: قسمت 2 Ajax Project 3 : Search Suggestion : Part 2

• Ajax Project 4 : Submitting Data to server-ویدیو 17-14-پروژه آژاکس 4: ارسال داده به سرور Ajax Project 4 : Submitting Data to server

• Ajax Resource Files-ویدیو 17-15-فایل های منبع آژاکس Ajax Resource Files

Jquery-فصل 18-جی کوئری Jquery

• What is jQuery and why we use it ?-ویدیو 18-1-جی کوئری چیست و چرا از آن استفاده می کنیم؟ What is jQuery and why we use it ?

• Using jQuery in website-ویدیو 18-2-استفاده از جی کوئری در وب سایت Using jQuery in website

• Conditional Script Loading-ویدیو 18-3-بارگذاری اسکریپت شرطی Conditional Script Loading

• jQuery Syntax-ویدیو 18-4-نحو جی کوئری jQuery Syntax

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

• Mouse Events-ویدیو 18-6-رویدادهای ماوس Mouse Events

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

• Form Events-ویدیو 18-8-رویدادهای فرم Form Events

• Window Events-ویدیو 18-9-رویدادهای پنجره Window Events

• Hide and Show-ویدیو 18-10-مخفی کردن و نشان دادن Hide and Show

• Getting Content using jQuery-ویدیو 18-11-دریافت محتوا با استفاده از جی کوئری Getting Content using jQuery

• Setting Values using jQuery-ویدیو 18-12-تنظیم مقادیر با استفاده از جی کوئری Setting Values using jQuery

• Creating HTML Contents using jQuery-ویدیو 18-13-ایجاد محتوای HTML با استفاده از جی کوئری Creating HTML Contents using jQuery

• Adding HTML Contents-ویدیو 18-14-اضافه کردن محتوای HTML Adding HTML Contents

• Removing HTML Contents-ویدیو 18-15-حذف محتوای HTML Removing HTML Contents

• Traversing Concept-ویدیو 18-16-مفهوم پیمایش Traversing Concept

• Ancestor Traversal-ویدیو 18-17-پیمایش Ancestor Ancestor Traversal

• Descendent Selector-ویدیو 18-18-انتخابگر Descendent Descendent Selector

• Sibling Selector-ویدیو 18-19-انتخابگر Sibling Sibling Selector

• GetHTTPRequest using ajax jQuery-ویدیو 18-20-درخواست GetHTTP با استفاده از آژاکس جی کوئری GetHTTPRequest using ajax jQuery

• PostHTTPRequest using jQuery-ویدیو 18-21-درخواست PostHTTP با استفاده از جی کوئری PostHTTPRequest using jQuery

• jQuery Ajax-ویدیو 18-22-آژاکس جی کوئری jQuery Ajax

• Each function-ویدیو 18-23-تابع Each Each function

• Add Class-ویدیو 18-24-اضافه کردن کلاس Add Class

• Remove Class-ویدیو 18-25-حذف کلاس Remove Class

• Adding CSS Dynamically-ویدیو 18-26-اضافه کردن CSS به صورت پویا Adding CSS Dynamically

• Toggle Class-ویدیو 18-27-Toggle کردن کلاس Toggle Class

• jQuery Resource Files-ویدیو 18-28-فایل های منبع جی کوئری jQuery Resource Files

Bootstrap 5-فصل 19-بوت استرپ 5 Bootstrap 5

• Why we use Bootstrap ?-ویدیو 19-1-چرا از بوت استرپ استفاده می کنیم؟ Why we use Bootstrap ?

• Two ways of using Bootstrap in your Project-ویدیو 19-2-دو روش استفاده از بوت استرپ در پروژه شما Two ways of using Bootstrap in your Project

• Important : Meta Tags-ویدیو 19-3-مهم: تگ های متا Important : Meta Tags

• Grid Containers-ویدیو 19-4-ظروف گرید Grid Containers

• Understanding Concept of col-xx-y-ویدیو 19-5-درک مفهوم col-xx-y Understanding Concept of col-xx-y

• Column Breaks-ویدیو 19-6-شکست ستون Column Breaks

• Understanding Offset-ویدیو 19-7-درک Offset Understanding Offset

• Concept of Ordering-ویدیو 19-8-مفهوم Ordering Concept of Ordering

• Task : Equal Width Content-ویدیو 19-9-وظیفه: محتوای با عرض مساوی Task : Equal Width Content

• Task : Variable Width Content-ویدیو 19-10-وظیفه: محتوای با عرض متغیر Task : Variable Width Content

• Positioning Concept-ویدیو 19-11-مفهوم Positioning Positioning Concept

• Display Properties-ویدیو 19-12-ویژگی های Display Display Properties

• Difference between Flex and Inline-flex-ویدیو 19-13-تفاوت بین Flex و Inline-flex Difference between Flex and Inline-flex

• Flex Concepts : Flex Direction-ویدیو 19-14-مفاهیم فلکس: جهت فلکس Flex Concepts : Flex Direction

• Flex Concepts : Justify Content-ویدیو 19-15-مفاهیم فلکس: توجیه محتوا Flex Concepts : Justify Content

• Flex Concepts : Align Items-ویدیو 19-16-مفاهیم فلکس: تراز کردن آیتم ها Flex Concepts : Align Items

• Flex Concepts : Align Self-ویدیو 19-17-مفاهیم فلکس: تراز کردن خود Flex Concepts : Align Self

• Understanding Difference between em and rem-ویدیو 19-18-درک تفاوت بین em و rem Understanding Difference between em and rem

• Handling Margin and Padding-ویدیو 19-19-مدیریت Margin و Padding Handling Margin and Padding

• Image Classes in Bootstrap 5-ویدیو 19-20-کلاس های تصویر در بوت استرپ 5 Image Classes in Bootstrap 5

• Covering Few Concepts using Images-ویدیو 19-21-پوشش چند مفهوم با استفاده از تصاویر Covering Few Concepts using Images

• Background Color and Gradients-ویدیو 19-22-رنگ پس زمینه و گرادینت ها Background Color and Gradients

• Text Color-ویدیو 19-23-رنگ متن Text Color

• Typography-ویدیو 19-24-تایپوگرافی Typography

• Working with Icons-ویدیو 19-25-کار با آیکون ها Working with Icons

• Hover Effect : Animating Icons-ویدیو 19-26-افکت Hover: متحرک سازی آیکون ها Hover Effect : Animating Icons

• Bootstrap 5 Resource Files-ویدیو 19-27-فایل های منبع بوت استرپ 5 Bootstrap 5 Resource Files

Creating Components with Bootstrap-فصل 20-ایجاد کامپوننت ها با بوت استرپ Creating Components with Bootstrap

• Project : Accordion-ویدیو 20-1-پروژه: آکاردئون Project : Accordion

• Collapse Concept in Bootstrap-ویدیو 20-2-مفهوم Collapse در بوت استرپ Collapse Concept in Bootstrap

• Project Collapse-ویدیو 20-3-پروژه Collapse Project Collapse

• Project Modal-ویدیو 20-4-پروژه Modal Project Modal

• Project Dropdown-ویدیو 20-5-پروژه Dropdown Project Dropdown

• Project : Navigation-ویدیو 20-6-پروژه: ناوبری Project : Navigation

• Adding Dropdown to Navigation-ویدیو 20-7-اضافه کردن Dropdown به ناوبری Adding Dropdown to Navigation

• Project : Carousel : part1-ویدیو 20-8-پروژه: Carousel: قسمت 1 Project : Carousel : part1

• Project : Carousel : part2-ویدیو 20-9-پروژه: Carousel: قسمت 2 Project : Carousel : part2

• Bootstrap Components Resource Files-ویدیو 20-10-فایل های منبع کامپوننت های بوت استرپ Bootstrap Components Resource Files

Creating Forms with Bootstrap-فصل 21-ایجاد فرم ها با بوت استرپ Creating Forms with Bootstrap

• Creating Basic Form-ویدیو 21-1-ایجاد فرم پایه Creating Basic Form

• Creating Form with Inline Content

• Working with Select Input

• Working with Radio Buttons

• Working with Input Group in Smart Way

• Working with Checkbox

• Working with Switches

• Working with Floating Label

• Working with Range Input

• Getting and Showing User Selected Range Value

• Working with Textarea

• Adding Submit Button to our Form

• Project : Beautiful Login Form : Part 1

• Project : Beautiful Login Form : Part 2

• Project : Beautiful Login Form : Part 3

• Bootstrap Forms Project Files

Bootstrap 5 Project : Custom Navigation

• Custom Navigation : Part1

• Custom Navigation : Part2 : Custom Dropdown

• Custom Navigation : Part13 : Addressing Responsiveness

• Custom Navigation : Part14 : Handling Active State using Javascript

Bootstrap 5 Project : Creating Awesome Animation Slider (No Paid Plugins)

• Slider Part 1

• Slider Part 2 : Animated Slider

• Slider Part 3 : Wave Effect

• Slider Part 4 : Particle Effect

React Js

• Installing VS Code

• Installing Node Js

• Creating React Project with Create React App

• Understanding React Project Flow

• Creating a New Component

• Important Matter regarding Component

• Understanding Components better

• Intro to Props

• Communication between Components

• UseState - A useful Hook for State Management in React

• Child to Parent Component Communication

• Event Handling - onChange

• Event Handling - onFocus and onBlur

• Styles in React

• Conditional Rendering

• React Fragment

• Rendering Lists using map in React

• Prop Drilling

• Solution of Prop Drilling

• Complete Understanding of Context API

• Challenge - Increment Decrement App

• Solution - Increment Decrement App

• Complete Understanding of UseReducer

• React Router : Part 1

• React Router : Part 2

• Linking

Mega Project 1 - PSD to HTML - PSD Creation

• Full Demo

• Get High Quality High Res Images for Free

• Installing Google Font and Font Awesome in Machine

• Understanding Grid

• Creating Color Swatch

• Header Logo and Navigation

• Hero Area : Part 1

• Hero Area : Part 2

• About : Part 1

• About : Part 2

• Education Experience Skills : Part 1

• Education Experience Skills : Part 2

• Services Part 1

• Services : Part 2

• Portfolio : Part 1

• Portfolio : Part 2

• Portfolio : Part 3

• Testimonials : Part1

• Testimonials : Part 2

• Blog : Part 1

• Blog : Part 2

• Contact : Part 1

• Contact : Part 2

• Footer

Mega Project 1 - PSD to HTML - Converting to HTML/CSS

• Creating basic Files and Folders

• Creating HTML Markup with necessary META tags

• Downloading and Using Jquery

• Downloading and using Bootstrap

• Google Font

• Reset CSS

• Using FontAwesome Icon Font in Project

• Respond Js

• Exporting and Optimizing Images : Part 1

• Exporting and Optimizing Images : Part 2

• Header Navigation and Logo Markup with Explanation

• Challenge - Styling Custom Bootstrap Navigation : Part 1

• Challenge - Styling Custom Bootstrap Navigation : Part 2

• Hero Area : Content Markup and Styling : Part 1

• Hero Area : Content Markup and Styling : Part 2

• Secret to Non - Rectangular Background : The Easy Way

• Adding Particle Animation to Hero Area

• Animated Text

• Call to Action Button Hover Effect

• Fixed Header

• Fixed Header : Unique Solution for Transparent Background

• About Section

• Education and Experience

• Skills : Part 1

• Special CSS Trick to create Arrow

• Animated Loader

• Cool Trick Solution for symmetrical top and bottom non-rectangular Shape

• ترفند ایجاد افکت خط زیر: 2 روش آشکار شد Trick to Create Underline Effect : 2 Ways Revealed

• بخش خدمات: نشانه گذاری و استایل دهی Services Section : Markup and Styling

• افکت هاور سرویس Service Hover Effect

• نمونه کارها: نشانه گذاری HTML Portfolio : HTML Markup

• نمونه کارها: افکت هاور منحصر به فرد Portfolio : Unique Hover Effect

• نمونه کارها: مقداردهی اولیه پلاگین Portfolio : Plugin Initialization

• نمونه کارها: افزودن قابلیت فیلتر Portfolio : Adding Filterable Feature

• به پایان رساندن بخش نمونه کارها Finishing Up Portfolio Section

• نظرات مشتریان: قسمت 1 Testimonial : Part 1

• نظرات مشتریان: قسمت 2 Testimonial : Part 2

• وبلاگ Blog

• نشانه گذاری تماس Contact Markup

• استایل دهی تماس Contact Styling

• فوتر Footer

• تنظیم چند استایل برای خوب به نظر رسیدن سایت در همه عرض صفحه نمایش Adjusting few styles to make the site look good in all screen width

• اسکرول نرم و تغییر خودکار مورد منوی فعال Smooth Scrolling and Auto Changing Active Nav Item

• آپلود سایت به سرور واقعی Uploading site to Real Server

• طراحی لودر متحرک در فتوشاپ Animated Loader Design in Photoshop

• پیاده سازی لودر صفحه سفارشی در وب سایت خود Implementing Custom Page Loader to our website

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

• فایل های منبع PSD به HTML PSD to HTML Resource Files

پروژه نهایی: تبدیل PSD به وب سایت React: آماده سازی Final Project : PSD to React Website Conversion : Prep Work

• نصب VS Code Installing VS Code

• نصب Node Js Installing Node Js

• معرفی قالب PSD و ایجاد پروژه React در VS Code Intro to our PSD Template and Creating React Project in VS Code

• درک گردش کار پروژه React Understanding React Project Workflow

• ایجاد کامپوننت جدید و خلاصه سازی پروژه React Creating New Component and Summarization of React Project

• استفاده از بوت استرپ در React Using Bootstrap in React

• مطالعه قالب PSD و یادداشت چند جزئیات Studying our PSD Template and Noting down few Details

• خروجی گرفتن تصاویر از قالب PSD Exporting Images from PSD Template

• دریافت تصاویر با وضوح بالا به صورت رایگان Getting HIgh Resolution Images for free

پروژه نهایی: تبدیل PSD به وب سایت React: بخش اسلایدر Final Project : PSD to React Website Conversion : Slider Section

• اسلایدر: قسمت 1 Slider : Part 1

• اسلایدر: قسمت 2 Slider : Part 2

• اسلایدر: قسمت 3: پوشش و دکمه های فراخوانی برای اقدام Slider : Part 3 : Overlay and Call to Action Buttons

• ایجاد اسلایدر متحرک Creating Animated Slider

• ناوبری و صفحه بندی اسلایدر سفارشی Custom Slider Navigation and Pagination

• بزرگنمایی پس زمینه: افکت کن برنز Zooming Background : Ken Burn Effect

• دکمه های فراخوانی برای اقدام: افکت های هاور Call to Action Buttons : Hover Effects

پروژه نهایی: تبدیل PSD به وب سایت React: بخش هدر Final Project : PSD to React Website Conversion : Header Section

• آماده سازی هدر Header Prep Work

• هدر ثابت Fixed Header

• هدر سفارشی بوت استرپ: نشانه گذاری و استایل دهی Custom Bootstrap Header : Markup and Styling

• چالش: افزودن آیکون های شبکه های اجتماعی به هدر Challenge : Adding Social Icons to Header

• راه حل: افزودن آیکون های شبکه های اجتماعی به هدر Solution : Adding Social Icons to Header

پروژه نهایی: تبدیل PSD به وب سایت React: مسیریابی React Final Project : PSD to React Website Conversion : React Routing

• جریان مسیریابی Routing Flow

• پیاده سازی مسیریابی Implementing Routing

• راه حل مشکل هدر ثابت Fixed Header Issue Solution

• استایل های پویا: قسمت 1: حاشیه بالا Dynamic Styles : Part 1 : Margin Top

• استایل های پویا: قسمت 2: رنگ پس زمینه Dynamic Styles : Part 2 : Background Color

پروژه نهایی: تبدیل PSD به وب سایت React: فروشگاه با استفاده از Redux Toolkit Final Project : PSD to React Website Conversion : Store using Redux Toolkit

• نشانه گذاری قدرت Power Markup

• ایجاد فروشگاه با استفاده از Redux Toolkit Creating Store using Redux Toolkit

• بازیابی اطلاعات فروشگاه Retrieving Store Information

• افزودن استایل ها به بخش قدرت Adding Styles to Power Section

پروژه نهایی: تبدیل PSD به وب سایت React: قسمت 6 Final Project : PSD to React Website Conversion : Part 6

• بخش استاد: قسمت 1 Professor Section :part 1

• استاد: قسمت 2 Professor : Part 2

پروژه نهایی: تبدیل PSD به وب سایت React: قسمت 7 Final Project : PSD to React Website Conversion : Part 7

• زمینه ها قسمت 1 Fields Part 1

• زمینه ها قسمت 2 Fields Part 2

• افزودن استایل ها به بخش زمینه ها Adding Styles to Fields Section

• افزودن زمینه ها به مسیریابی Adding Fields to Routing

• رندر پس زمینه هدر شرطی برای صفحه اصلی و سایر صفحات Conditional Header Background Rendering for Home and other pages

• صفحه تکی زمینه ها: بیشتر بخوانید Fields Single Page : Read More

• صفحه تکی زمینه ها: قسمت 2 Fields Single Page : Part 2

• تایید مسائل Acknowledgement of issues

• حل مشکل لوگو: مفهوم مسیر مطلق و مسیر نسبی Solving Logo Issue : Cocept of Absolute Path and Relative Path

• حل مشکل ناپدید شدن تصویر Solving Image Disappearing issue

پروژه نهایی: تبدیل PSD به وب سایت React: قسمت 8 Final Project : PSD to React Website Conversion : Part 8

• برنامه دکترا Doctoral Plan

• دکترا: قسمت 1: قسمت چپ Doctoral : Part1 : Left Part

• دکترا: قسمت 2: قسمت راست Doctoral : Part 2 : Right Part

• بخش کلاس Class Section

پروژه نهایی: تبدیل PSD به وب سایت React: قسمت 9 Final Project : PSD to React Website Conversion : Part 9

• خبرنامه: قسمت 1 Newsletter : Part 1

• خبرنامه: قسمت 2 Newsletter : Part 2

• جوایز: قسمت 1 Awards : Part 1

• جوایز: قسمت 2: ایجاد چرخ فلک جوایز Awards : Part 2 : Creating Awards Carousel

• جوایز: قسمت 3: سفارشی کردن پیکان های ناوبری و نقاط چرخ فلک Awards : Part 3 : Customizing Navigation arrows and Carousel Dots

پروژه نهایی: تبدیل PSD به وب سایت React: قسمت 10 Final Project : PSD to React Website Conversion : Part 10

• امکانات: قسمت 1 Facilities : part 1

• امکانات: قسمت 2 Facilities : Part 2

• محدود کردن واکشی اطلاعات به تعداد مشخص برای صفحه اصلی Limiting Information fetch to specific number for Home Page

• راه حل برای چالش طرح بندی Solution to Layout Challenge

• افکت پوشش Overlay Effect

پروژه نهایی: تبدیل PSD به وب سایت React: قسمت 11 Final Project : PSD to React Website Conversion : Part 11

• تماس: قسمت 1 Contact : Part 1

• پیکان کشویی سفارشی: قسمت 1 Custom Dropdown Arrow : Part 1

• پیکان کشویی سفارشی: قسمت 2 Custom Dropdown Arrow : Part 2

• پیکان کشویی سفارشی: قسمت 3 Custom Dropdown Arrow : Part 3

• نقشه: قسمت 1: پروژه موقعیت جغرافیایی Map : Part 1 : Geolocation Project

• نقشه: قسمت 2: پروژه موقعیت جغرافیایی Map : part 2 : Geolocation Project

پروژه نهایی: تبدیل PSD به وب سایت React: قسمت 12 Final Project : PSD to React Website Conversion : Part 12

• فرم: قسمت 1 Form : Part 1

• فرم: قسمت 2 Form : Part 2

• فرم: قسمت 3: استایل دهی به فرم ما Form : Part 3: Styling our Form

• کار با اعتبار سنجی فرم Working with Form Validation

پروژه نهایی: تبدیل PSD به وب سایت React: قسمت 13 Final Project : PSD to React Website Conversion : Part 13

• اشتراک: قسمت 1 Subscribe : Part 1

• اشتراک: قسمت 2 Subscribe : Part 2

• بخش فوتر Footer Section