آموزش Bootcamp توسعه دهندگان وب Front-End - HTML، CSS، JS، و React [ویدئو]

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

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

• معرفی Introduction

• ویژگی های HTML5 Features of HTML5

• مزایای استفاده از HTML5 Benefits of Using HTML5

• HTML5 کجا و چگونه استفاده می شود؟ Where and How Is HTML5 Used?

• ویرایشگرهای HTML5 HTML5 Editors

• دانلود کد ویژوال استودیو Downloading Visual Studio Code

ساختار یک فایل HTML5 Structure of an HTML5 File

• تگ های HTML چیست؟ What Are HTML Tags?

• ساختار یک فایل HTML5 Structure of an HTML5 File

• ساختار فایل و پوشه File and Folder Structure

• چگونه یک فایل HTML5 ایجاد کنیم؟ How to Create an HTML5 File?

بلوک های ساختمانی پایه HTML5 HTML5 Basic Building Blocks

• تگ های عنوان در HTML Heading Tags in HTML

• HTML5 نقل قول و برچسب های نقل قول HTML5 Quotation and Citation Tags

• اظهار نظر کد در HTML5 Commenting Out Code in HTML5

• ویژگی های HTML5 HTML5 Attributes

• نحوه استایل در HTML5 How to Style in HTML5

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

• تگ های لنگر چیست؟ What Are Anchor Tags?

• برچسب های تصویر چیست؟ What Are Image Tags?

• تگ های پاراگراف چیست؟ What Are Paragraph Tags?

• برچسب های شکست چیست؟ What Are Break Tags?

• برچسب های جدول چیست؟ What Are Table Tags?

• برچسب های لیست List Tags

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

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

ساخت یک فرم از ابتدا با HTML5 Building a Form from Scratch with HTML5

• برچسب های فرم Form Tags

• انواع ورودی Input Types

• ویژگی های ورودی (اندازه، فقط خواندنی، غیرفعال) Input Attributes (Size, Read-Only, Disabled)

• ویژگی‌های ورودی اضافی (حداقل، حداکثر، چندگانه و مکان‌گردان) Additional Input Attributes (Min, Max, Multiple, and Placeholder)

• ورودی های مورد نیاز Required Inputs

بلوک و عناصر درون خطی Block and Inline Elements

• معرفی Introduction

• بررسی عناصر بلوکی و درون خطی Examining Block and Inline Elements

نتیجه گیری (بخش HTML5) Conclusion (HTML5 Part)

• نتیجه Conclusion

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

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

• سینتکس CSS3 Syntax of CSS3

• موارد استفاده از CSS3 Uses of CSS3

• انواع CSS3 Types of CSS3

• انتخابگرها و رنگ ها در CSS3 Selectors and Colors in CSS3

ویژگی های اولیه CSS3 Basics Properties of CSS3

• زمینه Background

• مرز ها Borders

• طرح کلی Outline

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

• حاشیه و بالشتک Margin and Padding

ویژگی های تایپوگرافی CSS3 Typography Properties of CSS3

• تراز متن Text Alignment

• تزیین متن Text Decoration

• تبدیل متن Text Transform

• فاصله متن Text Spacing

• خانواده فونت Font Family

• نحوه استفاده از آیکون های فونت عالی How to Use Font Awesome Icons

ویژگی های انتخابگرها در عمق CSS3 Selectors Properties in Depth of CSS3

• نمایش دادن Display

• موقعیت ها Positions

• Z-Index Z-Index

• سرریز Overflow

• شناور Float

• مدل DOM DOM Model

• شبه کلاس ها قسمت 1 Pseudo-Classes Part 1

• کلاس های شبه قسمت 2 Pseudo-Classes part 2

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

ویژگی های اضافی در CSS3 Extra Features in CSS3

• کدورت و مهم Opacity and Important

• مرز-شعاع Border-Radius

• سایه جعبه Box Shadow

طراحی ریسپانسیو با CSS3 Responsive Design with CSS3

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

• فلکس باکس Flexbox

• داستان های رسانه Media Queries

مینی پروژه Mini Project

• مینی پروژه Mini Project

مقدمه ای بر جاوا اسکریپت Introduction to JavaScript

• معرفی و تاریخچه جاوا اسکریپت Introduction and History of JavaScript

• نحو جاوا اسکریپت و نمای کلی Syntax of JavaScript and Overview

• پیاده سازی جاوا اسکریپت JavaScript Implementation

• نحوه استفاده از تگ های HTML در جاوا اسکریپت How to Use HTML Tags in JavaScript

متغیرها Variables

• Var در جاوا اسکریپت Var in JavaScript

• متغیر جهانی و محلی در جاوا اسکریپت Global and Local Var in JavaScript

• console.log پیشرفته Advanced console.log

بیانیه ها در جاوا اسکریپت Statements in JavaScript

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

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

• وضعیت بیانیه سه گانه Condition Ternary Statement

• سوئیچ بیانیه Switch Statement

• اگر در غیر این صورت اگر بیانیه If Else If Statement

• عبارت Break and Continue Break and Continue Statement

• انواع داده ها Data Types

اپراتورها در جاوا اسکریپت Operators in JavaScript

• عملگر حسابی Arithmetic Operator

• اپراتور واگذاری Assignment Operator

• اپراتور مقایسه Comparison Operator

جعبه های پاپ آپ در جاوا اسکریپت Popup Boxes in JavaScript

• جعبه های هشدار Alert Boxes

• جعبه تایید Confirm Box

• جعبه اعلان Prompt Box

• کارکرد Functions

• توابع با پارامترها Functions with Parameters

• عملکرد با Return Function with Return

رویدادها در جاوا اسکریپت Events in JavaScript

• رویدادها در جاوا اسکریپت Events in JavaScript

حلقه ها در جاوا اسکریپت Loops in JavaScript

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

• حلقه را انجام دهید Do While Loop

• برای حلقه For Loop

• حلقه تو در تو Nested Loop

آرایه ها در جاوا اسکریپت Arrays in JavaScript

• آرایه ها Arrays

• تغییر و حذف آرایه ها Modify and Delete Arrays

• روش های مرتب سازی و معکوس Sort and Reverse Methods

• روش های پاپ و فشار Pop and Push Methods

• روش های Shift و Unshift Shift and Unshift Methods

• روش های Concat و Join Concat and Join Methods

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

• روش isArray The isArray Method

• Indexof and lastindex Methods Indexof and lastindex Methods

• روش forEach The forEach Method

• متدهای toString()، valueOf() و fill(). The toString(), valueOf(), and fill() Methods

• شامل روش Include Method

• برخی و همه روش ها Some and Every Methods

• روش‌های Index را پیدا و پیدا کنید Find and findIndex Methods

• روش فیلتر Filter Method

اشیاء و روشهای آنها Objects and Their Methods

• اشیاء Objects

• اشیاء آرایه ها Arrays Objects

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

رشته و روش های آن String and Its Methods

• روش های رشته - قسمت 1 String Methods - Part 1

• روش های رشته ای - قسمت 2 String Methods - Part 2

• روش های رشته ای - قسمت 3 String Methods - Part 3

روش های شماره جاوا اسکریپت JavaScript Number Methods

• روش های عددی Number Methods

• روش ریاضی - قسمت 1 Math Method - Part 1

• روش ریاضی - قسمت دوم Math Method - Part 2

• روش تاریخ Date Method

مدل DOM DOM Model

• مدل DOM DOM Model

• سایر اشیاء DOM DOM Other Objects

• DOM Get Methods DOM Get Methods

• یک ظاهر طراحی DOM DOM Styling

• addEventListener (رویدادها) addEventListener (Events)

• استفاده از کپچر useCapture

• روش classList classList Method

• گره های والد Parent Nodes

• گره های کودکان Children Nodes

• اولین و آخرین فرزند First and Last Child

• خواهر و برادر بعدی و قبلی Next and Previous Siblings

• گره متن عنصر را ایجاد کنید Create Element Text Node

• Child را اضافه کنید و قبل را درج کنید Append Child and Insert Before

• درج عنصر مجاور و درج HTML مجاور Insert Adjacent Element and Insert Adjacent HTML

نتیجه Conclusion

• نتیجه Conclusion

مقدمه ای برای React: کتابخانه JS برای ایجاد رابط های کاربری Introduction to React: A JS Library for Building User Interfaces

• مقدمه ای بر React.JS Introduction to React.JS

• اولین برنامه React First React App

• JSX در React.JS JSX In React.JS

قلاب اجزای یک ظاهر طراحی شده Styling Components Hooks

• Inline و Internal Styling در React.JS Inline and Internal Styling in React.JS

• Template Literals در React.JS Template Literals in React.JS

• کامپوننت ها در React.JS Components in React.JS

• Props در React.JS Props in React.JS

• Hooks در Reacts.JS Hooks in Reacts.JS

رندر سلسله مراتبی و قلاب های پیشرفته Hierarchy Rendering and Advanced Hooks

• درک سلسله مراتب در React.JS Understanding Hierarchy in React.JS

• رندر مشروط Conditional Rendering

• استفاده از افکت هوک در React.JS useEffect Hook in React.JS

DOM DOM

• React-Router-DOM React-Router-DOM

• پیوند در React-Router-DOM Linking in React-Router-DOM

• مدیریت صفحات خطا با React-Router-DOM Handling Error Pages with React-Router-DOM

• با استفاده از قلاب useNavigate(). Using the useNavigate() Hook

پروژه ها Projects

• پروژه اول (قسمت اول) First Project (Part 1)

• پروژه اول (قسمت دوم) First Project (Part 2)

ساخت اپلیکیشن ماشین حساب Building a Calculator App

• ساخت ماشین حساب - قسمت 1 Building a Calculator - Part 1

• ساخت ماشین حساب - قسمت 2 Building a Calculator - Part 2

با استفاده از Pokémon API Using the Pokémon API

• ساخت یک API Restful در React.JS - قسمت 1 Building a Restful API in React.JS - Part 1

• ساخت یک API آرامش بخش در React.JS - قسمت 2 Building a Restful API in React.JS - Part 2

• ساخت یک API Restful در React.JS - قسمت 3 Building a Restful API in React.JS - Part 3

• استفاده از ()array.map در داخل عناصر JSX Using array.map() Inside JSX Elements

• نحوه استفاده از Material UI در React.JS How to Use Material UI in React.JS