دوره جامع آموزش برنامه‌نویسی فرانت‌اند - 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

• دانلود Visual Studio Code 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

• تگ‌های Heading در HTML Heading Tags in HTML

• تگ‌های نقل‌قول و استناد در HTML5 HTML5 Quotation and Citation Tags

• کامنت کردن کد در HTML5 Commenting Out Code in HTML5

• ویژگی‌ها (Attributes) در HTML5 HTML5 Attributes

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

کاوش در تگ‌های HTML5 Exploring HTML5 Tags

• تگ‌های Anchor چیستند؟ What Are Anchor Tags?

• تگ‌های Image چیستند؟ What Are Image Tags?

• تگ‌های Paragraph چیستند؟ What Are Paragraph Tags?

• تگ‌های Break چیستند؟ What Are Break Tags?

• تگ‌های Table چیستند؟ What Are Table Tags?

• تگ‌های List List Tags

• تگ Video Video Tag

• تگ Audio Audio Tag

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

• تگ‌های Form Form Tags

• انواع Input Input Types

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

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

• ورودی‌های الزامی (Required) Required Inputs

المان‌های Block و Inline Block and Inline Elements

• مقدمه Introduction

• بررسی المان‌های Block و Inline 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) Background

• حاشیه‌ها (Borders) Borders

• Outline Outline

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

• حاشیه بیرونی و درونی (Margin و Padding) Margin and Padding

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

• تراز متن Text Alignment

• تزئین متن Text Decoration

• تغییر شکل متن Text Transform

• فاصله‌گذاری متن Text Spacing

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

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

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

• Display Display

• موقعیت‌ها (Positions) Positions

• Z Index Z-Index

• Overflow Overflow

• Float Float

• مدل DOM DOM Model

• Pseudo Classes بخش اول Pseudo-Classes Part 1

• Pseudo Classes بخش دوم Pseudo-Classes part 2

• Pseudo Elements Pseudo-Elements

قابلیت‌های اضافی در CSS3 Extra Features in CSS3

• شفافیت (Opacity) و Important Opacity and Important

• گوشه گرد (Border Radius) Border-Radius

• سایه جعبه (Box Shadow) Box Shadow

طراحی واکنش‌گرا با CSS3 Responsive Design with CSS3

• سیستم Grid Grid System

• Flexbox Flexbox

• Media Queries Media Queries

پروژه کوچک Mini Project

• پروژه کوچک Mini Project

مقدمه‌ای بر JavaScript Introduction to JavaScript

• مقدمه و تاریخچه JavaScript Introduction and History of JavaScript

• سینتکس JavaScript و نمای کلی Syntax of JavaScript and Overview

• پیاده‌سازی JavaScript JavaScript Implementation

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

متغیرها Variables

• متغیر Var در JavaScript Var in JavaScript

• متغیرهای Global و Local در JavaScript Global and Local Var in JavaScript

• استفاده پیشرفته از console.log Advanced console.log

دستورات در JavaScript Statements in JavaScript

• دستور If If Statement

• دستور If Else If Else Statement

• دستور شرطی Ternary Condition Ternary Statement

• دستور Switch Switch Statement

• دستور If Else If If Else If Statement

• دستورات Break و Continue Break and Continue Statement

• انواع داده‌ها (Data Types) Data Types

عملگرها در JavaScript Operators in JavaScript

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

• عملگر انتساب Assignment Operator

• عملگر مقایسه‌ای Comparison Operator

جعبه‌های پاپ‌آپ در JavaScript Popup Boxes in JavaScript

• جعبه‌های Alert Alert Boxes

• جعبه Confirm Confirm Box

• جعبه Prompt Prompt Box

• توابع (Functions) Functions

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

• توابع با خروجی (Return) Function with Return

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

• رویدادها در JavaScript Events in JavaScript

حلقه‌ها در JavaScript Loops in JavaScript

• حلقه While While Loop

• حلقه Do While Do While Loop

• حلقه For For Loop

• حلقه‌های تو در تو Nested Loop

آرایه‌ها در JavaScript Arrays in JavaScript

• آرایه‌ها Arrays

• اصلاح و حذف آرایه‌ها Modify and Delete Arrays

• متدهای Sort و Reverse Sort and Reverse Methods

• متدهای Pop و Push Pop and Push Methods

• متدهای Shift و Unshift Shift and Unshift Methods

• متدهای Concat و Join Concat and Join Methods

• متدهای Slice و Splice Slice and Splice Methods

• متد isArray The isArray Method

• متدهای Indexof و lastindex Indexof and lastindex Methods

• متد forEach The forEach Method

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

• متد Include Include Method

• متدهای Some و Every Some and Every Methods

• متدهای Find و findIndex Find and findIndex Methods

• متد Filter Filter Method

اشیاء (Objects) و متدهای آن‌ها Objects and Their Methods

• اشیاء (Objects) Objects

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

• حلقه For In For-In Loop

رشته‌ها (String) و متدهای آن String and Its Methods

• متدهای رشته (String) بخش اول String Methods - Part 1

• متدهای رشته (String) بخش دوم String Methods - Part 2

• متدهای رشته (String) بخش سوم String Methods - Part 3

متدهای عددی در JavaScript JavaScript Number Methods

• متدهای اعداد Number Methods

• متد Math بخش اول Math Method - Part 1

• متد Math بخش دوم Math Method - Part 2

• متد Date Date Method

مدل DOM DOM Model

• مدل DOM DOM Model

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

• متدهای Get در DOM DOM Get Methods

• استایل‌دهی در DOM DOM Styling

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

• useCapture useCapture

• متد classList classList Method

• گره‌های والد (Parent Nodes) Parent Nodes

• گره‌های فرزند (Children Nodes) Children Nodes

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

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

• ایجاد Element Text Node Create Element Text Node

• Append Child و Insert Before Append Child and Insert Before

• Insert Adjacent Element و Insert Adjacent 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 در 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

• هوک‌ها در React.JS Hooks in Reacts.JS

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

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

• رندرینگ شرطی Conditional Rendering

• هوک useEffect در 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

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

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

استفاده از API پوکمون Using the Pokémon API

• ساخت یک Restful API در React.JS بخش اول Building a Restful API in React.JS - Part 1

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

• ساخت یک Restful API در React.JS بخش سوم 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

جمع‌بندی Conclusion

• جمع‌بندی Conclusion