آموزش کامل دوره توسعه وب فرانت اند (2023)

Learn Complete Front-End Web Development Course (2023)

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: آموزش توسعه وب فرانت اند کامل با HTML5، CSS3، Bootstrap 5، JavaScript، ECMAScript 6، Angular و React JS شما توسعه وب فرانت اند کامل را از ابتدا یاد خواهید گرفت ساخت وب سایت های مدرن Angular و React JS را یاد خواهید گرفت. برنامه های وب بوت استرپ 5 شما HTML5 و CSS3 را از ابتدا یاد می گیرید و یک وب سایت کامل می سازید. جاوا اسکریپت کامل + اسکریپت ECMA 6 (ES6) را از ابتدا یاد خواهید گرفت. یک کامپیوتر/لپ تاپ اتصال به اینترنت مناسب است

در این توسعه وب Front-End - راهنمای کامل (گام به گام) [به روز رسانی در سال 2023] شما توسعه کامل وب جلویی را از ابتدا یاد خواهید گرفت. به عنوان بخشی از دوره، HTML5 و CSS3 را به صورت گام به گام یاد خواهید گرفت.

بعداً نحوه استفاده، ادغام یا افزودن تعامل کاربر با کمک جاوا اسکریپت را خواهید آموخت. این دوره همچنین آخرین نسخه جاوا اسکریپت را پوشش می دهد که ECMA Script است تکنیک های مدرن جاوا اسکریپت را با ECMA Script 6 یا جدیدتر بیاموزید.

گام بزرگ بعدی یادگیری Bootstrap 5 است که جدیدترین و محبوب ترین چارچوب CSS موجود است. در اینجا شما یاد خواهید گرفت که 3 پروژه زنده ایجاد کنید. در پروژه اول، شما یاد خواهید گرفت که یک برنامه وب EMS ایجاد کنید که به نام سیستم مدیریت کارکنان نیز شناخته می شود.

دومین پروژه، نحوه ایجاد یک وبلاگ کامل برای سطوح مبتدی تا پیشرفته را خواهیم دید. برای پروژه سوم، یک وب سایت حرفه ای ایجاد خواهید کرد.

هنگامی که Bootstrap 5 را تکمیل کردید، موضوع بعدی شروع با Angular است. در مبحث Angular، سطح مبتدی را یاد خواهید گرفت که زاویه ای را با هر برنامه HTML5 و CSS3 ادغام کند.

سپس با کمک React JS، نحوه ساخت یک برنامه Scratch Pad از سطح مبتدی تا پیشرفته را خواهیم دید. پس از آن با ابزار Create React App آشنا خواهید شد که برای ساخت برنامه های React استفاده می شود. با کمک Bootstrap 5، ساختن یک برنامه کاربردی وب با React را یاد خواهید گرفت.

به عنوان پروژه، ایجاد یک برنامه وب را یاد خواهید گرفت که داده های کاربر را از طریق API مدیریت می کند. در برنامه وب، ما به کاربران اجازه می دهیم داده های جدید ایجاد کنند، داده ها را بخوانند و همچنین داده ها را از خود برنامه حذف کنند.

برای هرگونه کمکی همیشه در بخش Q A در دسترس خواهم بود. لطفاً در طول دوره هر گونه ابهام و سؤالی را مطرح کنید.

با آرزوی بهترین ها، امیدوارم از دوره لذت ببرید.


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

HTML5 و CSS3 - شروع به کار HTML5 & CSS3 - Getting Started

  • آنچه شما نیاز خواهید داشت What you will need

  • نصب کد VS (ویرایشگر کد) Installing VS Code (Code Editor)

  • سلام دنیا Hello World

HTML5 و CSS3 - شروع به کار HTML5 & CSS3 - Getting Started

  • معرفی Introduction

  • معرفی Introduction

  • آنچه شما نیاز خواهید داشت What you will need

  • نصب کد VS (ویرایشگر کد) Installing VS Code (Code Editor)

  • سلام دنیا Hello World

  • سلام دنیا Hello World

HTML5 - برچسب ها HTML5 - Tags

  • ساختار سند Document Structure

  • قالب بندی متن Text Formatting

  • پیوندهای تو در تو HTML5 HTML5 Nested Links

  • لیست های HTML5 HTML5 Lists

  • کار با تصاویر Working with Images

  • جداول در HTML5 Tables in HTML5

HTML5 - برچسب ها HTML5 - Tags

  • ساختار سند Document Structure

  • مبانی HTML5 HTML5 Basics

  • مبانی HTML5 HTML5 Basics

  • سرفصل ها و پاراگراف ها Headings & Paragraphs

  • سرفصل ها و پاراگراف ها Headings & Paragraphs

  • قالب بندی متن Text Formatting

  • پیوندها در HTML5 Links in HTML5

  • پیوندها در HTML5 Links in HTML5

  • پیوندهای تو در تو HTML5 HTML5 Nested Links

  • لیست های HTML5 HTML5 Lists

  • کار با تصاویر Working with Images

  • جداول در HTML5 Tables in HTML5

HTML5 - فرم ها HTML5 - Forms

  • فرم ها در HTML5 Forms in HTML5

  • ایجاد فرم ورود Creating a Login Form

HTML5 - فرم ها HTML5 - Forms

  • فرم ها در HTML5 Forms in HTML5

  • ایجاد فرم تماس Creating a Contact Form

  • ایجاد فرم تماس Creating a Contact Form

  • ایجاد فرم ورود Creating a Login Form

  • ایجاد فرم ثبت نام Creating a Registration Form

  • ایجاد فرم ثبت نام Creating a Registration Form

HTML5 - رسانه HTML5 - Media

HTML5 - رسانه HTML5 - Media

  • گروه بندی عناصر Grouping Elements

  • گروه بندی عناصر Grouping Elements

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

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

  • IFrames در HTML5 IFrames in HTML5

  • IFrames در HTML5 IFrames in HTML5

  • تگ شکل در HTML5 Figure Tag in HTML5

  • تگ شکل در HTML5 Figure Tag in HTML5

  • جمع کردن عناصر با برچسب جزئیات Collapse Elements with Details Tag

  • جمع کردن عناصر با برچسب جزئیات Collapse Elements with Details Tag

HTML5 - ساختار وب سایت HTML5 - Website Structure

  • ایجاد سربرگ Creating The Header

  • ایجاد نوار کناری Creating The Sidebar

  • افزودن حق چاپ Adding Copyright

HTML5 - ساختار وب سایت HTML5 - Website Structure

  • ایجاد سربرگ Creating The Header

  • ایجاد منوی Nav Creating Nav Menu

  • ایجاد منوی Nav Creating Nav Menu

  • ایجاد بنر Creating The Banner

  • ایجاد بنر Creating The Banner

  • افزودن محتوا به صفحه Adding Content to Page

  • افزودن محتوا به صفحه Adding Content to Page

  • ایجاد نوار کناری Creating The Sidebar

  • پاورقی صفحه ساختمان Building Page Footer

  • پاورقی صفحه ساختمان Building Page Footer

  • افزودن حق چاپ Adding Copyright

CSS و CSS3 - اصول CSS & CSS3 - Fundamentals

  • CSS درون خطی Inline CSS

  • طراحی با مدل جعبه Designing with Box Model

CSS و CSS3 - اصول CSS & CSS3 - Fundamentals

  • CSS درون خطی Inline CSS

  • CSS داخلی Internal CSS

  • CSS داخلی Internal CSS

  • CSS خارجی External CSS

  • CSS خارجی External CSS

  • مدل جعبه در CSS Box Model in CSS

  • مدل جعبه در CSS Box Model in CSS

  • عناصر هدف در CSS Targeting Elements in CSS

  • عناصر هدف در CSS Targeting Elements in CSS

  • طراحی با مدل جعبه Designing with Box Model

پروژه - وب سایت HTML5 و CSS3 Project - HTML5 & CSS3 Website

  • ایجاد نوار Nav Creating The Nav Bar

  • ایجاد نوار کناری Creating Sidebar

  • ساخت پاورقی Making Footer

  • ایجاد صفحه درباره ما Creating About-us Page

  • ساخت صفحه محصولات Building The Products Page

  • صفحه تماس ساختمان Building Contact Page

  • اضافه کردن Nav-Menu Adding Nav-Menu

  • طراحی پاسخگو (RWD) توضیح داده شده است Responsive Design (RWD) Explained

  • انیمیشن با CSS3 Animation with CSS3

پروژه - وب سایت HTML5 و CSS3 Project - HTML5 & CSS3 Website

  • ساخت کانتینر Building The Container

  • ساخت کانتینر Building The Container

  • ساخت سربرگ وب سایت Building The Website Header

  • ساخت سربرگ وب سایت Building The Website Header

  • ایجاد نوار Nav Creating The Nav Bar

  • ساخت منوی کشویی Making Drop-Down Menu

  • ساخت منوی کشویی Making Drop-Down Menu

  • ایجاد اسلایدر تصویر Creating Image Slider

  • ایجاد اسلایدر تصویر Creating Image Slider

  • ساخت نگهدارنده محتوا Making Content Holder

  • ساخت نگهدارنده محتوا Making Content Holder

  • ایجاد نوار کناری Creating Sidebar

  • ساخت پاورقی Making Footer

  • ایجاد صفحه درباره ما Creating About-us Page

  • ایجاد صفحات خدمات Creating Services Pages

  • ایجاد صفحات خدمات Creating Services Pages

  • ساخت صفحه محصولات Building The Products Page

  • صفحه تماس ساختمان Building Contact Page

  • اضافه کردن Nav-Menu Adding Nav-Menu

  • طراحی پاسخگو (RWD) توضیح داده شده است Responsive Design (RWD) Explained

  • انیمیشن با CSS3 Animation with CSS3

جاوا اسکریپت - شروع به کار JavaScript - Getting Started

  • آنچه شما باید بدانید What you should know

  • سلام دنیا Hello World

جاوا اسکریپت - شروع به کار JavaScript - Getting Started

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

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

  • آنچه شما باید بدانید What you should know

  • سلام دنیا Hello World

  • سلام دنیا Hello World

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

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

  • مکان ها در جاوا اسکریپت قسمت 1 Placements in JavaScript Part-1

  • مکان ها در جاوا اسکریپت قسمت 1 Placements in JavaScript Part-1

  • مکان ها در جاوا اسکریپت قسمت 2 Placements in JavaScript Part-2

  • مکان ها در جاوا اسکریپت قسمت 2 Placements in JavaScript Part-2

جاوا اسکریپت - مبانی JavaScript - Fundamentals

  • متغیرها در جاوا اسکریپت Variables in JavaScript

  • توابع در جاوا اسکریپت Functions in JavaScript

جاوا اسکریپت - مبانی JavaScript - Fundamentals

  • متغیرها در جاوا اسکریپت Variables in JavaScript

  • شرایط در جاوا اسکریپت Conditions in JavaScript

  • شرایط در جاوا اسکریپت Conditions in JavaScript

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

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

  • کار با کنسول مرورگر Working with Browser Console

  • کار با کنسول مرورگر Working with Browser Console

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

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

  • توابع در جاوا اسکریپت Functions in JavaScript

  • ایجاد حلقه های سفارشی با توابع Creating Custom Loops with Functions

  • ایجاد حلقه های سفارشی با توابع Creating Custom Loops with Functions

جاوا اسکریپت - انواع داده JavaScript - Data Types

  • کار با آرایه ها Working with Arrays

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

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

جاوا اسکریپت - انواع داده JavaScript - Data Types

  • کار با آرایه ها Working with Arrays

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

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

  • کار با Dates Object Working with Dates Object

  • کار با Dates Object Working with Dates Object

  • اشیاء در جاوا اسکریپت Objects in JavaScript

  • اشیاء در جاوا اسکریپت Objects in JavaScript

جاوا اسکریپت DOM - مدل شی سند JavaScript DOM - Document Object Model

  • کار با عناصر DOM Working with DOM Elements

  • تغییر محتویات DOM Changing Contents of DOM

  • ایجاد عناصر جدید با جاوا اسکریپت Creating New Elements with JavaScript

  • افزودن رویدادها به عناصر DOM Adding Events to DOM Elements

  • کار با عناصر فرم Working with Form Elements

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

جاوا اسکریپت DOM - مدل شی سند JavaScript DOM - Document Object Model

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

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

  • انواع گره های عنصری Element Node Types

  • انواع گره های عنصری Element Node Types

  • کار با عناصر DOM Working with DOM Elements

  • تغییر محتویات DOM Changing Contents of DOM

  • ایجاد عناصر جدید با جاوا اسکریپت Creating New Elements with JavaScript

  • افزودن رویدادها به عناصر DOM Adding Events to DOM Elements

  • کار با عناصر فرم Working with Form Elements

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

جاوا اسکریپت - پیشرفته JavaScript - Advanced

  • اشکال زدایی در جاوا اسکریپت Debugging in JavaScript

  • Minify & Validate JavaScript Minify & Validate JavaScript

  • استفاده از استفاده دقیق Making Use Of Use Strict

  • روش های بد جاوا اسکریپت JavaScript Bad Practices

  • عبارات منظم جاوا اسکریپت JavaScript Regular Expressions

جاوا اسکریپت - پیشرفته JavaScript - Advanced

  • اشکال زدایی در جاوا اسکریپت Debugging in JavaScript

  • ایجاد فرم‌های اعتبارسنجی زنده مدرن Creating Modern Live Validation Forms

  • ایجاد فرم‌های اعتبارسنجی زنده مدرن Creating Modern Live Validation Forms

  • Minify & Validate JavaScript Minify & Validate JavaScript

  • استفاده از کتابخانه های جاوا اسکریپت Using JavaScript Libraries

  • استفاده از کتابخانه های جاوا اسکریپت Using JavaScript Libraries

  • کار با جاوا اسکریپت مدرن Working with Modern JavaScript

  • کار با جاوا اسکریپت مدرن Working with Modern JavaScript

  • استفاده از استفاده دقیق Making Use Of Use Strict

  • روش های بد جاوا اسکریپت JavaScript Bad Practices

  • عبارات منظم جاوا اسکریپت JavaScript Regular Expressions

ECMA Script 6 (JavaScript ES6) ECMA Script 6 (JavaScript ES6)

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

  • آنچه شما باید بدانید What you should know

  • ES6 چیست؟ What is ES6

  • ترانسپایلینگ در ES6 Transpiling in ES6

  • نحوه استفاده از Babel JS How to use Babel JS

ECMA Script 6 (JavaScript ES6) ECMA Script 6 (JavaScript ES6)

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

  • آنچه شما باید بدانید What you should know

  • ES6 چیست؟ What is ES6

  • ترانسپایلینگ در ES6 Transpiling in ES6

  • چرا از Babel JS استفاده کنید Why use Babel JS

  • چرا از Babel JS استفاده کنید Why use Babel JS

  • نحوه استفاده از Babel JS How to use Babel JS

  • نصب Node JS Installing Node JS

اسکریپت ECMA 6 (ES6) - مبانی ECMA Script 6 (ES6) - Fundamentals

  • اجازه Syntax در ES6 Let Syntax in ES6

  • اپراتور Spread در جاوا اسکریپت ES6 Spread Operator in JavaScript ES6

  • پارامترهای عملکرد پیش فرض در ES6 Default Function Parameters in ES6

  • تخریب در جاوا اسکریپت ES6 Destructuring in JavaScript ES6

اسکریپت ECMA 6 (ES6) - مبانی ECMA Script 6 (ES6) - Fundamentals

  • اجازه Syntax در ES6 Let Syntax in ES6

  • استفاده از کلمه کلیدی Const Using The Const Keyword

  • استفاده از کلمه کلیدی Const Using The Const Keyword

  • کار با رشته های قالب Working with Template Strings

  • کار با رشته های قالب Working with Template Strings

  • اپراتور Spread در جاوا اسکریپت ES6 Spread Operator in JavaScript ES6

  • پارامترهای عملکرد پیش فرض در ES6 Default Function Parameters in ES6

  • کار با Object Literals در ES6 Working with Object Literals in ES6

  • کار با Object Literals در ES6 Working with Object Literals in ES6

  • توابع پیکان در جاوا اسکریپت ES6 Arrow Functions in JavaScript ES6

  • توابع پیکان در جاوا اسکریپت ES6 Arrow Functions in JavaScript ES6

  • فلش با این محدوده در ES6 کار می کند Arrow Functions with This Scope in ES6

  • فلش با این محدوده در ES6 کار می کند Arrow Functions with This Scope in ES6

  • تخریب در جاوا اسکریپت ES6 Destructuring in JavaScript ES6

  • ژنراتورها در جاوا اسکریپت ES6 Generators in JavaScript ES6

  • ژنراتورها در جاوا اسکریپت ES6 Generators in JavaScript ES6

  • کار با Class Syntax در جاوا اسکریپت ES6 Working with Class Syntax in JavaScript ES6

  • کار با Class Syntax در جاوا اسکریپت ES6 Working with Class Syntax in JavaScript ES6

  • وراثت کلاس در جاوا اسکریپت ES6 Class Inheritance in JavaScript ES6

  • وراثت کلاس در جاوا اسکریپت ES6 Class Inheritance in JavaScript ES6

Bootstrap 5 - شروع به کار Bootstrap 5 - Getting Started

  • آنچه شما نیاز خواهید داشت What you will need

  • سلام دنیا Hello World

  • ساختار سند بوت استرپ Bootstrap Document Structure

Bootstrap 5 - شروع به کار Bootstrap 5 - Getting Started

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

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

  • آنچه شما نیاز خواهید داشت What you will need

  • سلام دنیا Hello World

  • ساختار سند بوت استرپ Bootstrap Document Structure

Bootstrap 5 - Layouts Bootstrap 5 - Layouts

  • نقاط شکست در بوت استرپ 5 Breakpoints in Bootstrap 5

  • گزینه های شبکه Grid Options

  • مرتب سازی مجدد و تنظیم مجدد ستون ها Reordering and Offsetting Columns

  • ناودان Gutters

  • ناودان افقی Horizontal Gutters

  • ناودان های عمودی Vertical Gutters

Bootstrap 5 - Layouts Bootstrap 5 - Layouts

  • نقاط شکست در بوت استرپ 5 Breakpoints in Bootstrap 5

  • انواع کانتینر Container Types

  • انواع کانتینر Container Types

  • توری Grid

  • توری Grid

  • گزینه های شبکه Grid Options

  • تودرتو سطرها و ستون ها Nesting Rows and Columns

  • تودرتو سطرها و ستون ها Nesting Rows and Columns

  • تراز عمودی ستون Column Vertical Alignment

  • تراز عمودی ستون Column Vertical Alignment

  • تراز افقی ستون Column Horizontal Alignment

  • تراز افقی ستون Column Horizontal Alignment

  • پیچیدن ستون و شکستن ستون Column Wrapping and Column Breaks

  • پیچیدن ستون و شکستن ستون Column Wrapping and Column Breaks

  • مرتب سازی مجدد و تنظیم مجدد ستون ها Reordering and Offsetting Columns

  • ابزارهای حاشیه Margin Utilities

  • ابزارهای حاشیه Margin Utilities

  • ناودان Gutters

  • ناودان افقی Horizontal Gutters

  • ناودان های عمودی Vertical Gutters

  • ناودان افقی و عمودی Horizontal and Vertical Gutters

  • ناودان افقی و عمودی Horizontal and Vertical Gutters

بوت استرپ 5 - محتویات Bootstrap 5 - Contents

  • عناصر متن درون خطی Inline Text Elements

  • کار با لیست ها Working with Lists

  • تصاویر در بوت استرپ Images in Bootstrap

  • جداول در بوت استرپ Tables in Bootstrap

  • ارقام در بوت استرپ Figures in Bootstrap

بوت استرپ 5 - محتویات Bootstrap 5 - Contents

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

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

  • عناصر متن درون خطی Inline Text Elements

  • اختصارات و نقل قول ها Abbreviations and Blockquotes

  • اختصارات و نقل قول ها Abbreviations and Blockquotes

  • کار با لیست ها Working with Lists

  • تصاویر در بوت استرپ Images in Bootstrap

  • جداول در بوت استرپ Tables in Bootstrap

  • تراز جدول، تودرتو و آناتومی Table Alignment, Nesting and Anatomy

  • تراز جدول، تودرتو و آناتومی Table Alignment, Nesting and Anatomy

  • ارقام در بوت استرپ Figures in Bootstrap

بوت استرپ 5 - فرم ها Bootstrap 5 - Forms

  • فرم های درون خطی Inline Forms

بوت استرپ 5 - فرم ها Bootstrap 5 - Forms

  • فرم ها در بوت استرپ Forms in Bootstrap

  • فرم ها در بوت استرپ Forms in Bootstrap

  • کنترل فرم Form Control

  • کنترل فرم Form Control

  • چک و رادیو Checks and Radios

  • چک و رادیو Checks and Radios

  • دامنه Range

  • دامنه Range

  • گروه های ورودی Input Groups

  • گروه های ورودی Input Groups

  • برچسب های شناور Floating Labels

  • برچسب های شناور Floating Labels

  • طرح بندی فرم Form Layout

  • طرح بندی فرم Form Layout

  • فرم های افقی Horizontal Forms

  • فرم های افقی Horizontal Forms

  • فرم های اندازه گیری خودکار Auto Sizing Forms

  • فرم های اندازه گیری خودکار Auto Sizing Forms

  • فرم های درون خطی Inline Forms

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

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

بوت استرپ 5 - کامپوننت ها Bootstrap 5 - Components

  • هشدارها Alerts

  • رد کردن هشدارها Dismissing Alerts

  • تغییر گروه دکمه Button Group Alteration

  • تصاویر کارت Card Images

  • سبک های کارت Card Styles

  • چرخ فلک Carousel

  • شرح چرخ فلک Carousel Caption

  • جلوه محو شدن چرخ فلک Carousel Fade Effect

  • زمان بندی چرخ فلک Carousel Timing

  • چرخ و فلک نوع تاریک Carousel Dark Variant

  • کشویی Dropdowns

  • دکمه تقسیم Split Button

  • اندازه کشویی Dropdown Sizing

  • کشویی تاریک Dark Dropdowns

  • مسیرهای کشویی Dropdown Directions

  • تراز کشویی و کشویی Dropup and Dropdown Alignment

  • تراز منو Menu Alignment

  • فرم های کشویی Dropdown Forms

  • گروه لیست List Group

  • پیوندها و دکمه های گروه را فهرست کنید List Group Links and Buttons

  • فلاش گروه را فهرست کنید List Group Flush

  • گروه های لیست افقی Horizontal List Groups

  • کلاس های گروهی فهرست متنی Contextual List Group Classes

  • لیست گروه با نشان List Group with Badges

  • لیست گروه با محتوای سفارشی List Group with Custom Content

  • مدال ها Modals

  • Modal Tooltps و Popovers Modal Tooltips and Popovers

  • استفاده از سیستم Grid در Modal Using Grid system in Modal

  • جابه‌جایی بین حالت‌ها Toggle Between Modals

  • نوار کشویی Navbar Dropdown

  • نوار کشویی تو در تو Navbar Nested Dropdown

  • رنگ‌های نوار ناوبری Navbar Colors

  • ظروف Navbar Navbar Containers

  • قرار دادن نوار ناوبری Navbar Placement

  • Navs و Tabs Navs and Tabs

  • رفتارهای زبانه ها و قرص ها Tabs and Pills Behaviors

  • Offcanvas In-Depth Offcanvas In-Depth

  • صفحه بندی Pagination

  • Popovers در عمق Popovers In-Depth

  • پاپاورهای سفارشی Custom Popovers

  • رد کردن با کلیک بعدی Dismiss on next click

  • Popover را در Hover فعال کنید Enable Popover on Hover

  • نوارهای پیشرفت Progress Bars

  • راه راه و انیمیشن Stripes and Animation

  • چرخاننده در دکمه ها Spinner in Buttons

  • نان تست Toasts

  • راهنمای ابزار در عمق Tooltips In-Depth

  • راهنمای ابزار سفارشی Custom Tooltip

بوت استرپ 5 - کامپوننت ها Bootstrap 5 - Components

  • آکاردئون Accordions

  • آکاردئون Accordions

  • هشدارها Alerts

  • رد کردن هشدارها Dismissing Alerts

  • نشان ها Badges

  • نشان ها Badges

  • خرده نان Breadcrumb

  • خرده نان Breadcrumb

  • دکمه ها Buttons

  • دکمه ها Buttons

  • گروه دکمه Button Group

  • گروه دکمه Button Group

  • نوار ابزار دکمه Button Toolbar

  • نوار ابزار دکمه Button Toolbar

  • تغییر گروه دکمه Button Group Alteration

  • کارت Card

  • کارت Card

  • اندازه کارت Card Sizing

  • اندازه کارت Card Sizing

  • ناوبری کارت Card Navigation

  • ناوبری کارت Card Navigation

  • تصاویر کارت Card Images

  • سبک های کارت Card Styles

  • چرخ فلک Carousel

  • کنترل چرخ فلک Carousel Controls

  • کنترل چرخ فلک Carousel Controls

  • نشانگرهای چرخ فلک Carousel Indicators

  • نشانگرهای چرخ فلک Carousel Indicators

  • شرح چرخ فلک Carousel Caption

  • جلوه محو شدن چرخ فلک Carousel Fade Effect

  • زمان بندی چرخ فلک Carousel Timing

  • غیرفعال کردن کشیدن لمس چرخ فلک Disable Carousel Touch Swiping

  • غیرفعال کردن کشیدن لمس چرخ فلک Disable Carousel Touch Swiping

  • چرخ و فلک نوع تاریک Carousel Dark Variant

  • دکمه بستن Close Button

  • دکمه بستن Close Button

  • سقوط - فروپاشی Collapse

  • سقوط - فروپاشی Collapse

  • فروپاشی افقی Horizontal Collapse

  • فروپاشی افقی Horizontal Collapse

  • اهداف چندگانه Multiple Targets

  • اهداف چندگانه Multiple Targets

  • کشویی Dropdowns

  • دکمه تقسیم Split Button

  • اندازه کشویی Dropdown Sizing

  • کشویی تاریک Dark Dropdowns

  • مسیرهای کشویی Dropdown Directions

  • تراز کشویی و کشویی Dropup and Dropdown Alignment

  • آیتم های منو Menu Items

  • آیتم های منو Menu Items

  • تراز منو Menu Alignment

  • گزینه های تراز کشویی Dropdown Alignment Options

  • گزینه های تراز کشویی Dropdown Alignment Options

  • محتویات منو Menu Contents

  • محتویات منو Menu Contents

  • فرم های کشویی Dropdown Forms

  • گزینه های کشویی Dropdown Options

  • گزینه های کشویی Dropdown Options

  • بسته شدن خودکار کشویی Dropdown Auto Close

  • بسته شدن خودکار کشویی Dropdown Auto Close

  • گروه لیست List Group

  • پیوندها و دکمه های گروه را فهرست کنید List Group Links and Buttons

  • فلاش گروه را فهرست کنید List Group Flush

  • لیست شماره گذاری شده Numbered List

  • لیست شماره گذاری شده Numbered List

  • گروه های لیست افقی Horizontal List Groups

  • کلاس های گروهی فهرست متنی Contextual List Group Classes

  • لیست گروه با نشان List Group with Badges

  • لیست گروه با محتوای سفارشی List Group with Custom Content

  • چک باکس ها و رادیوها را فهرست کنید List Group Checkboxes and Radios

  • چک باکس ها و رادیوها را فهرست کنید List Group Checkboxes and Radios

  • فهرست زبانه های جاوا اسکریپت گروه List Group JavaScript Tabs

  • فهرست زبانه های جاوا اسکریپت گروه List Group JavaScript Tabs

  • مدال ها Modals

  • پس زمینه ایستا Static Backdrop

  • پس زمینه ایستا Static Backdrop

  • پیمایش مطالب طولانی Scrolling Long Content

  • پیمایش مطالب طولانی Scrolling Long Content

  • عمودی در مرکز Vertically Centered

  • عمودی در مرکز Vertically Centered

  • Modal Tooltps و Popovers Modal Tooltips and Popovers

  • استفاده از سیستم Grid در Modal Using Grid system in Modal

  • محتوای مدال متفاوت Varying Modal Content

  • محتوای مدال متفاوت Varying Modal Content

  • جابه‌جایی بین حالت‌ها Toggle Between Modals

  • اندازه های مدال اختیاری Optional Modal Sizes

  • اندازه های مدال اختیاری Optional Modal Sizes

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

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

  • لینک های ناوبری Navigation Links

  • لینک های ناوبری Navigation Links

  • نوار کشویی Navbar Dropdown

  • نوار کشویی تو در تو Navbar Nested Dropdown

  • فرم های نوار ناوبری Navbar Forms

  • فرم های نوار ناوبری Navbar Forms

  • گروه ورودی نوار ناوبری Navbar Input Group

  • گروه ورودی نوار ناوبری Navbar Input Group

  • Navbar Plain Text Navbar Plain Text

  • Navbar Plain Text Navbar Plain Text

  • رنگ‌های نوار ناوبری Navbar Colors

  • ظروف Navbar Navbar Containers

  • قرار دادن نوار ناوبری Navbar Placement

  • پیمایش نوار ناوبری Navbar Scrolling

  • پیمایش نوار ناوبری Navbar Scrolling

  • نوار ناوبری بوم خاموش است Off Canvas Navbar

  • نوار ناوبری بوم خاموش است Off Canvas Navbar

  • Navs و Tabs Navs and Tabs

  • Nav Flex Utilities Nav Flex Utilities

  • Nav Flex Utilities Nav Flex Utilities

  • نوارها و قرص‌ها را با فهرست بازشوی ناوبری کنید Nav Tabs and Pills with Dropdown

  • نوارها و قرص‌ها را با فهرست بازشوی ناوبری کنید Nav Tabs and Pills with Dropdown

  • رفتارهای زبانه ها و قرص ها Tabs and Pills Behaviors

  • Offcanvas In-Depth Offcanvas In-Depth

  • پیمایش خارج از بوم Offcanvas Scrolling

  • پیمایش خارج از بوم Offcanvas Scrolling

  • قرار دادن Offcanvas Offcanvas Placement

  • قرار دادن Offcanvas Offcanvas Placement

  • صفحه بندی Pagination

  • متغیرهای Placeholders

  • متغیرهای Placeholders

  • Popovers در عمق Popovers In-Depth

  • Poover Direction Popover Direction

  • Poover Direction Popover Direction

  • پاپاورهای سفارشی Custom Popovers

  • رد کردن با کلیک بعدی Dismiss on next click

  • Popover را در Hover فعال کنید Enable Popover on Hover

  • نوارهای پیشرفت Progress Bars

  • ارتفاع نوار پیشرفت و پس زمینه Progress bar height and Background

  • ارتفاع نوار پیشرفت و پس زمینه Progress bar height and Background

  • راه راه و انیمیشن Stripes and Animation

  • Scrollspy Scrollspy

  • Scrollspy Scrollspy

  • اسپینرها Spinners

  • اسپینرها Spinners

  • اسپینر در حال رشد Growing Spinner

  • اسپینر در حال رشد Growing Spinner

  • تراز اسپینر Spinner Alignment

  • تراز اسپینر Spinner Alignment

  • اندازه های اسپینر Spinner Sizes

  • اندازه های اسپینر Spinner Sizes

  • چرخاننده در دکمه ها Spinner in Buttons

  • نان تست Toasts

  • تراز نان تست Toast Alignment

  • تراز نان تست Toast Alignment

  • راهنمای ابزار در عمق Tooltips In-Depth

  • راهنمای ابزار سفارشی Custom Tooltip

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

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

  • HTML در Tooltip HTML in Tooltip

  • HTML در Tooltip HTML in Tooltip

  • راهنمای ابزار در مورد عناصر غیر فعال Tooltip on Disabled Elements

  • راهنمای ابزار در مورد عناصر غیر فعال Tooltip on Disabled Elements

Bootstrap 5 - Helpers Bootstrap 5 - Helpers

  • نسبت ها Ratios

  • موقعیت ها Positions

  • پشته ها Stacks

  • پیوند کشیده شده Stretched Link

Bootstrap 5 - Helpers Bootstrap 5 - Helpers

  • روشن کنید Clearfix

  • روشن کنید Clearfix

  • رنگ ها و پس زمینه Colors and Background

  • رنگ ها و پس زمینه Colors and Background

  • لینک های رنگی Colored Links

  • لینک های رنگی Colored Links

  • نسبت ها Ratios

  • موقعیت ها Positions

  • پشته ها Stacks

  • بصری پنهان Visually Hidden

  • بصری پنهان Visually Hidden

  • پیوند کشیده شده Stretched Link

  • کوتاه کردن متن Text Truncate

  • کوتاه کردن متن Text Truncate

  • قانون عمودی Vertical Rule

  • قانون عمودی Vertical Rule

Bootstrap 5 - Utilities Bootstrap 5 - Utilities

  • پس زمینه ها Backgrounds

  • گرادیان های پس زمینه Background Gradients

  • رنگ لبه Border Color

  • عرض مرز Border Width

  • شعاع مرزی Border Radius

  • اندازه های حاشیه گرد Rounded Border Sizes

  • پنهان کردن عناصر Hiding Elements

  • فلکس Flex

  • جهت فلکس Flex Direction

  • محتوای Flex Justify Flex Justify Content

  • موارد فلکس تراز Flex Align Items

  • فلکس پر Flex Fill

  • Flex Grow and Shrink Flex Grow and Shrink

  • حاشیه های خودکار فلکس Flex Auto Margins

  • فلکس با تراز کردن آیتم ها Flex with Align Items

  • فلکس راپ Flex Wrap

  • Flex Align محتوا Flex Align Content

  • فعل و انفعالات Interactions

  • کدورت Opacity

  • سرریز Overflow

  • موقعیت Position

  • عناصر مرکز را در لبه ها قرار دهید Position Center Elements within Edges

  • نمونه های موقعیت قسمت 1 Position Examples Part 1

  • سایز بندی Sizing

  • شکاف Gap

  • تراز متن Text Alignment

  • بسته بندی متن Text Wrap

  • شکست متن Text Break

  • تبدیل متن Text Transform

  • ارتفاع خط Line Height

  • مونوسکوپی Monoscope

  • چیدمان عمودی Vertical Alignment

  • دید Visibility

Bootstrap 5 - Utilities Bootstrap 5 - Utilities

  • پس زمینه ها Backgrounds

  • گرادیان های پس زمینه Background Gradients

  • کدورت پس زمینه Background Opacity

  • کدورت پس زمینه Background Opacity

  • مرز ها Borders

  • مرز ها Borders

  • رنگ لبه Border Color

  • کدورت مرزی Border Opacity

  • کدورت مرزی Border Opacity

  • عرض مرز Border Width

  • شعاع مرزی Border Radius

  • اندازه های حاشیه گرد Rounded Border Sizes

  • رنگ های متن Text Colors

  • رنگ های متن Text Colors

  • کدورت متن Text Opacity

  • کدورت متن Text Opacity

  • نمایش Inline و Block Display Inline and Block

  • نمایش Inline و Block Display Inline and Block

  • پنهان کردن عناصر Hiding Elements

  • نمایش در چاپ Display in Print

  • نمایش در چاپ Display in Print

  • فلکس Flex

  • جهت فلکس Flex Direction

  • محتوای Flex Justify Flex Justify Content

  • موارد فلکس تراز Flex Align Items

  • Flex Align Self Flex Align Self

  • Flex Align Self Flex Align Self

  • فلکس پر Flex Fill

  • Flex Grow and Shrink Flex Grow and Shrink

  • حاشیه های خودکار فلکس Flex Auto Margins

  • فلکس با تراز کردن آیتم ها Flex with Align Items

  • فلکس راپ Flex Wrap

  • سفارش فلکس Flex Order

  • سفارش فلکس Flex Order

  • Flex Align محتوا Flex Align Content

  • Flex Media Object Flex Media Object

  • Flex Media Object Flex Media Object

  • شناور پاسخگو Responsive Float

  • شناور پاسخگو Responsive Float

  • فعل و انفعالات Interactions

  • کدورت Opacity

  • سرریز Overflow

  • موقعیت Position

  • عناصر مرکز موقعیت Position Center Elements

  • عناصر مرکز موقعیت Position Center Elements

  • عناصر مرکز را در لبه ها قرار دهید Position Center Elements within Edges

  • نمونه های موقعیت قسمت 1 Position Examples Part 1

  • مثال موقعیت قسمت 2 Position Example Part 2

  • مثال موقعیت قسمت 2 Position Example Part 2

  • سایه Shadow

  • سایه Shadow

  • سایز بندی Sizing

  • فاصله گذاری Spacing

  • فاصله گذاری Spacing

  • شکاف Gap

  • تراز متن Text Alignment

  • بسته بندی متن Text Wrap

  • شکست متن Text Break

  • تبدیل متن Text Transform

  • اندازه فونت Font Size

  • اندازه فونت Font Size

  • وزن فونت و حروف کج Font weights and italics

  • وزن فونت و حروف کج Font weights and italics

  • ارتفاع خط Line Height

  • مونوسکوپی Monoscope

  • بازنشانی رنگ Reset Color

  • بازنشانی رنگ Reset Color

  • تزیین متن Text Decoration

  • تزیین متن Text Decoration

  • چیدمان عمودی Vertical Alignment

  • دید Visibility

  • آیکون های بوت استرپ Bootstrap Icons

  • آیکون های بوت استرپ Bootstrap Icons

Bootstrap 5 Project 1 - EMS App Bootstrap 5 Project 1 - EMS App

  • ایجاد صفحه ورود Creating the Login Page

  • ایجاد موارد نوار ناوبری Creating Navbar Items

  • ایجاد فیلدهای فرم برای Navbar Creating Form Fields for Navbar

  • ایجاد کارت برای داشبورد Creating Cards for Dashboard

  • ایجاد صفحه لیست کارکنان Creating Employees List Page

  • ایجاد نوار کناری صفحه کارکنان Creating Employees Page Sidebar

  • ایجاد جدول لیست کارکنان Creating Employees List Table

  • ایجاد فرم Add Employee Modal Creating Add Employee Modal Form

  • ایجاد مدال جزئیات برای لیست کارمندان Creating Details Modal for Employee List

  • ایجاد Delete Modal برای لیست کارکنان Creating Delete Modal for Employees List

  • ایجاد Add Job Modal Creating Add Job Modal

  • ایجاد جزئیات برای شغل Creating Details Modal for Job

  • ایجاد جزئیات ویرایش برای Job Modal Creating Edit Details for Job Modal

Bootstrap 5 Project 1 - EMS App Bootstrap 5 Project 1 - EMS App

  • مقدمه ای بر پروژه EMS2.0 Introduction to EMS2.0 Project

  • مقدمه ای بر پروژه EMS2.0 Introduction to EMS2.0 Project

  • ایجاد صفحه ورود Creating the Login Page

  • ایجاد Dash Nav و لوگوی برند Creating Dash Nav and Brand Logo

  • ایجاد Dash Nav و لوگوی برند Creating Dash Nav and Brand Logo

  • ایجاد Navbar Toggler Creating the Navbar Toggler

  • ایجاد Navbar Toggler Creating the Navbar Toggler

  • ایجاد موارد نوار ناوبری Creating Navbar Items

  • ایجاد موارد نوار ناوبری Creating Navbar Items

  • ایجاد فیلدهای فرم برای Navbar Creating Form Fields for Navbar

  • ایجاد کارت برای داشبورد Creating Cards for Dashboard

  • ایجاد صفحه لیست کارکنان Creating Employees List Page

  • ایجاد نوار کناری صفحه کارکنان Creating Employees Page Sidebar

  • ایجاد جدول لیست کارکنان Creating Employees List Table

  • ایجاد Add Employee Modal Creating Add Employee Modal

  • ایجاد Add Employee Modal Creating Add Employee Modal

  • ایجاد فرم Add Employee Modal Creating Add Employee Modal Form

  • ایجاد مدال جزئیات برای لیست کارمندان Creating Details Modal for Employee List

  • ایجاد جزئیات ویرایش برای لیست کارکنان Creating Edit Details for Employee List

  • ایجاد جزئیات ویرایش برای لیست کارکنان Creating Edit Details for Employee List

  • ایجاد Delete Modal برای لیست کارکنان Creating Delete Modal for Employees List

  • ایجاد صفحه فهرست مشاغل Creating Jobs List Page

  • ایجاد صفحه فهرست مشاغل Creating Jobs List Page

  • به روز رسانی صفحه فهرست مشاغل Updating the Job List Page

  • به روز رسانی صفحه فهرست مشاغل Updating the Job List Page

  • ایجاد جدول لیست مشاغل Creating Job List Table

  • ایجاد جدول لیست مشاغل Creating Job List Table

  • ایجاد Add Job Modal Creating Add Job Modal

  • ایجاد جزئیات برای شغل Creating Details Modal for Job

  • ایجاد جزئیات ویرایش برای Job Modal Creating Edit Details for Job Modal

  • ایجاد Delete Modal برای لیست مشاغل Creating Delete Modal for Job List

  • ایجاد Delete Modal برای لیست مشاغل Creating Delete Modal for Job List

Bootstrap 5 Project 2 - برنامه BLOG2.0 Bootstrap 5 Project 2 - BLOG2.0 App

  • ایجاد Navbar Toggler Creating Navbar Toggler

  • ایجاد موارد نوار ناوبری Creating Navbar Items

  • ساخت بنر خانه Creating The Home Banner

  • ایجاد بخش پست های صفحه اصلی Creating Home Posts Section

  • ایجاد پاورقی وبلاگ Creating Blog Footer

  • افزودن افکت های سفارشی به نوار ناوبری Adding Custom Effects To Navbar

  • ایجاد هدر صفحه پیش فرض Creating Default Page Header

  • ایجاد فرم اشتراک نوار کناری Creating Sidebar Subscribe Form

  • ایجاد دسته ها و ابزارک های آرشیو Creating Categories and Archive Widgets

  • ایجاد فرم نظر برای پست ها Creating Comment Form for Posts

  • پیوند دادن همه چیز با هم Linking Everything Together

Bootstrap 5 Project 2 - برنامه BLOG2.0 Bootstrap 5 Project 2 - BLOG2.0 App

  • معرفی پروژه وبلاگ Blog Project Introduction

  • معرفی پروژه وبلاگ Blog Project Introduction

  • آنچه برای ساخت قالب مورد نیاز است What's Required for Template Building

  • آنچه برای ساخت قالب مورد نیاز است What's Required for Template Building

  • ایجاد فایل Index Creating The Index File

  • ایجاد فایل Index Creating The Index File

  • ایجاد Navbar و لوگوی برند Creating The Navbar and Brand Logo

  • ایجاد Navbar و لوگوی برند Creating The Navbar and Brand Logo

  • ایجاد Navbar Toggler Creating Navbar Toggler

  • ایجاد Navbar Toggler Creating Navbar Toggler

  • ایجاد موارد نوار ناوبری Creating Navbar Items

  • ایجاد موارد نوار ناوبری Creating Navbar Items

  • ایجاد فیلد جستجو Creating The Search Field

  • ایجاد فیلد جستجو Creating The Search Field

  • ساخت بنر خانه Creating The Home Banner

  • ایجاد Subscribe Modal Creating The Subscribe Modal

  • ایجاد Subscribe Modal Creating The Subscribe Modal

  • ایجاد بخش پست های صفحه اصلی Creating Home Posts Section

  • ایجاد پاورقی وبلاگ Creating Blog Footer

  • افزودن افکت های سفارشی به نوار ناوبری Adding Custom Effects To Navbar

  • ایجاد هدر صفحه پیش فرض Creating Default Page Header

  • ایجاد حلقه پست برای صفحه پیش فرض Creating Post Loop For Default Page

  • ایجاد حلقه پست برای صفحه پیش فرض Creating Post Loop For Default Page

  • ایجاد فرم اشتراک نوار کناری Creating Sidebar Subscribe Form

  • ایجاد دسته ها و ابزارک های آرشیو Creating Categories and Archive Widgets

  • ایجاد صفحه و ناحیه محتوای پست Creating Page and Post Content Area

  • ایجاد صفحه و ناحیه محتوای پست Creating Page and Post Content Area

  • ایجاد فرم نظر برای پست ها Creating Comment Form for Posts

  • ایجاد صفحه جستجو Creating The Search Page

  • ایجاد صفحه جستجو Creating The Search Page

  • پیوند دادن همه چیز با هم Linking Everything Together

Bootstrap 5 Project 3 - وب سایت حرفه ای Bootstrap 5 Project 3 - Professional Website

  • ایجاد Navbar Toggler Creating Navbar Toggler

  • ایجاد مجموعه ویژگی های سایت Creating Site Feature Set

  • ایجاد سربرگ حلقه دوره Creating Course Loop Header

  • ایجاد فیلتر حلقه دوره Creating Course Loop Filter

  • ایجاد سربرگ حلقه دوره Creating Course Loop Header

  • ایجاد موارد تکراری دوره Creating Duplicates of Course Items

  • ایجاد محتوای صفحه اصلی Creating Home Page Content

  • افزودن تصویر محتوای خانه Adding Home Content Image

  • ایجاد آیکون های اجتماعی Creating Social Icons

  • ایجاد بخش درباره محتوا Creating About Content Section

  • ایجاد صفحه واحد و Breadcrumb Creating Single Course Page And Breadcrumb

  • ایجاد متا داده های دوره Creating Course Meta Data

  • ایجاد تصویر دوره واحد Creating Single Course Image

  • ایجاد لیست پست های وبلاگ Creating Blog Posts List

  • ایجاد سربرگ صفحه تماس Creating Contact Page Header

  • پیوند دادن همه چیز با هم Linking Everything Together

Bootstrap 5 Project 3 - وب سایت حرفه ای Bootstrap 5 Project 3 - Professional Website

  • مقدمه ای بر پروژه Introduction To Project

  • مقدمه ای بر پروژه Introduction To Project

  • راه اندازی پوشه پروژه Setting Up Project Folder

  • راه اندازی پوشه پروژه Setting Up Project Folder

  • ایجاد Navbar و نام تجاری Creating Navbar and Brand

  • ایجاد Navbar و نام تجاری Creating Navbar and Brand

  • ایجاد Navbar Toggler Creating Navbar Toggler

  • ایجاد Navbar Toggler Creating Navbar Toggler

  • ایجاد موارد Nav Creating Nav Items

  • ایجاد موارد Nav Creating Nav Items

  • ایجاد فیلد جستجوی نوار ناوبری Creating Navbar Search Field

  • ایجاد فیلد جستجوی نوار ناوبری Creating Navbar Search Field

  • ایجاد دکمه های ثبت نام و ورود نوار ناوبر Creating Navbar Sign-Up and Login Buttons

  • ایجاد دکمه های ثبت نام و ورود نوار ناوبر Creating Navbar Sign-Up and Login Buttons

  • ایجاد متن بنر Creating The Banner Text

  • ایجاد متن بنر Creating The Banner Text

  • افزودن تصویر بنر Adding Banner Image

  • افزودن تصویر بنر Adding Banner Image

  • ایجاد مجموعه ویژگی های سایت Creating Site Feature Set

  • ایجاد سربرگ حلقه دوره Creating Course Loop Header

  • ایجاد فیلتر حلقه دوره Creating Course Loop Filter

  • ایجاد سربرگ حلقه دوره Creating Course Loop Header

  • ایجاد آیتم فهرست واحد درسی Creating Single Course List Item

  • ایجاد آیتم فهرست واحد درسی Creating Single Course List Item

  • ایجاد موارد تکراری دوره Creating Duplicates of Course Items

  • ایجاد محتوای صفحه اصلی Creating Home Page Content

  • افزودن تصویر محتوای خانه Adding Home Content Image

  • ایجاد منطقه اشتراک Creating Subscribe Area

  • ایجاد منطقه اشتراک Creating Subscribe Area

  • ایجاد پاورقی اصلی Creating Main Footer

  • ایجاد پاورقی اصلی Creating Main Footer

  • ایجاد آدرس پاورقی Creating Footer Address

  • ایجاد آدرس پاورقی Creating Footer Address

  • ایجاد آیتم های پیوند برای پاورقی Creating Link Items For Footer

  • ایجاد آیتم های پیوند برای پاورقی Creating Link Items For Footer

  • ایجاد آیکون های اجتماعی Creating Social Icons

  • ایجاد اطلاعات حق چاپ Creating Copyright Info

  • ایجاد اطلاعات حق چاپ Creating Copyright Info

  • ایجاد پاورقی چسبنده Creating Sticky Footer

  • ایجاد پاورقی چسبنده Creating Sticky Footer

  • ایجاد درباره سرصفحه صفحه Creating About Page Header

  • ایجاد درباره سرصفحه صفحه Creating About Page Header

  • ایجاد بخش درباره محتوا Creating About Content Section

  • ایجاد صفحه دوره ها Creating The Courses Page

  • ایجاد صفحه دوره ها Creating The Courses Page

  • ایجاد صفحه واحد و Breadcrumb Creating Single Course Page And Breadcrumb

  • ایجاد توضیحات سرصفحه و متا داده Creating Course Header Description and Meta Data

  • ایجاد توضیحات سرصفحه و متا داده Creating Course Header Description and Meta Data

  • ایجاد متا داده های دوره Creating Course Meta Data

  • افزودن آیکون به داده های متا دوره Adding Icons To Course Meta Data

  • افزودن آیکون به داده های متا دوره Adding Icons To Course Meta Data

  • اضافه کردن دکمه های دوره Adding Course Buttons

  • اضافه کردن دکمه های دوره Adding Course Buttons

  • ایجاد تصویر دوره واحد Creating Single Course Image

  • ایجاد محتوای واحد درسی Creating Single Course Contents

  • ایجاد محتوای واحد درسی Creating Single Course Contents

  • ایجاد سربرگ سوالات متداول Creating FAQ Header

  • ایجاد سربرگ سوالات متداول Creating FAQ Header

  • ایجاد لیست سوالات متداول Creating FAQ List

  • ایجاد لیست سوالات متداول Creating FAQ List

  • ایجاد فرم ارسال سوال Creating Post Question Form

  • ایجاد فرم ارسال سوال Creating Post Question Form

  • ایجاد صفحه و سربرگ وبلاگ Creating Blog Page and Header

  • ایجاد صفحه و سربرگ وبلاگ Creating Blog Page and Header

  • ایجاد لیست پست های وبلاگ Creating Blog Posts List

  • ایجاد نوار کناری وبلاگ Creating Blog Sidebar

  • ایجاد نوار کناری وبلاگ Creating Blog Sidebar

  • ایجاد Subscribe Modal Creating Subscribe Modal

  • ایجاد Subscribe Modal Creating Subscribe Modal

  • ایجاد فرم اشتراک Creating The Subscribe Form

  • ایجاد فرم اشتراک Creating The Subscribe Form

  • ایجاد صفحه پست واحد Creating Single Post Page

  • ایجاد صفحه پست واحد Creating Single Post Page

  • ایجاد سربرگ صفحه تماس Creating Contact Page Header

  • ایجاد کارت های صفحه تماس Creating Contact Page Cards

  • ایجاد کارت های صفحه تماس Creating Contact Page Cards

  • ایجاد Contact Modal Creating Contact Modal

  • ایجاد Contact Modal Creating Contact Modal

  • پیوند دادن همه چیز با هم Linking Everything Together

Angular - شروع به کار Angular - Getting Started

  • مقدمه ای بر انگولار Introduction to Angular

  • آنچه شما باید بدانید What you should know

  • نصب Node JS Installing Node JS

  • نصب Cmder برای Angular Installing Cmder for Angular

Angular - شروع به کار Angular - Getting Started

  • مقدمه ای بر انگولار Introduction to Angular

  • آنچه شما باید بدانید What you should know

  • آنچه برای شروع نیاز دارید What you need to get started

  • آنچه برای شروع نیاز دارید What you need to get started

  • نصب Node JS Installing Node JS

  • نصب Node JS Installing Node JS

  • نصب Angular Installing Angular

  • نصب Angular Installing Angular

  • نصب Cmder برای Angular Installing Cmder for Angular

زاویه ای - مبانی Angular - Fundamentals

  • VS Code را برای Angular نصب کنید Install VS Code for Angular

  • ایجاد پروژه "Hello World" در Angular Creating the "Hello World" Project in Angular

  • ساختار دایرکتوری برنامه Angular Angular App Directory Structure

  • ایجاد کامپوننت های جدید در Angular Creating New Components in Angular

  • دستورالعمل های Ng If Else در Angular Ng If Else Directives in Angular

  • لوله ها در Angular Pipes in Angular

  • دکوراتور ورودی در انگولار Input Decorator in Angular

  • ماژول HTTP Client در Angular HTTP Client Module in Angular

زاویه ای - مبانی Angular - Fundamentals

  • راه اندازی پروژه Angular Setting up Angular Project

  • راه اندازی پروژه Angular Setting up Angular Project

  • VS Code را برای Angular نصب کنید Install VS Code for Angular

  • ایجاد پروژه "Hello World" در Angular Creating the "Hello World" Project in Angular

  • ساختار دایرکتوری برنامه Angular Angular App Directory Structure

  • ایجاد کامپوننت های جدید در Angular Creating New Components in Angular

  • ایجاد سبک برای اجزای زاویه ای Creating Styles for Angular Components

  • ایجاد سبک برای اجزای زاویه ای Creating Styles for Angular Components

  • افزودن Bootstrap و jQuery به Angular Project Adding Bootstrap & jQuery to Angular Project

  • افزودن Bootstrap و jQuery به Angular Project Adding Bootstrap & jQuery to Angular Project

  • درون یابی در Angular Interpolation in Angular

  • درون یابی در Angular Interpolation in Angular

  • Data Binding در Angular Data Binding in Angular

  • Data Binding در Angular Data Binding in Angular

  • دستورالعمل های Ng If Else در Angular Ng If Else Directives in Angular

  • رویداد Binding در Angular Event Binding in Angular

  • رویداد Binding در Angular Event Binding in Angular

  • لوله ها در Angular Pipes in Angular

  • دکوراتور ورودی در انگولار Input Decorator in Angular

  • ایجاد خدمات در Angular Creating Services in Angular

  • ایجاد خدمات در Angular Creating Services in Angular

  • ماژول HTTP Client در Angular HTTP Client Module in Angular

React JS - شروع به کار React JS - Getting Started

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

  • نصب ابزارهای مرورگر Installing Browser Tools

  • نصب Node JS برای React Installing Node JS for React

  • Hello World در React JS Hello World in React JS

React JS - شروع به کار React JS - Getting Started

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

  • نصب ابزارهای مرورگر Installing Browser Tools

  • نصب Node JS برای React Installing Node JS for React

  • VS Code را برای React نصب کنید Install VS Code for React

  • VS Code را برای React نصب کنید Install VS Code for React

  • Hello World در React JS Hello World in React JS

  • JSX در React JS JSX in React JS

  • JSX در React JS JSX in React JS

React JS - Fundamentals React JS - Fundamentals

  • افزودن حالت به مؤلفه یادداشت Adding State to Note Component

React JS - Fundamentals React JS - Fundamentals

  • کامپوننت در React JS چیست؟ What is a Component in React JS

  • کامپوننت در React JS چیست؟ What is a Component in React JS

  • اولین کامپوننت واکنش ایجاد کنید Create First React Component

  • اولین کامپوننت واکنش ایجاد کنید Create First React Component

  • کامپوننت بدون حالت در React JS Stateless Component in React JS

  • کامپوننت بدون حالت در React JS Stateless Component in React JS

  • Props در React JS Props in React JS

  • Props در React JS Props in React JS

  • رویدادها در React JS Events in React JS

  • رویدادها در React JS Events in React JS

  • حالت در React JS State in React JS

  • حالت در React JS State in React JS

  • افزودن حالت به مؤلفه یادداشت Adding State to Note Component

  • Refs در React JS Refs in React JS

  • Refs در React JS Refs in React JS

React JS - Project: Sticky Notes React JS - Project: Sticky Notes

  • اضافه کردن یادداشت ها Adding Notes

  • اجزای نصب Mounting Components

  • تنظیم سبک های پیش فرض Setting Default Styles

  • به روز رسانی کامپوننت ها Updating Components

  • راه اندازی و نصب برنامه Create React Setup & Install Create React App

React JS - Project: Sticky Notes React JS - Project: Sticky Notes

  • ایجاد برد با Props در React JS Creating Board With Props in React JS

  • ایجاد برد با Props در React JS Creating Board With Props in React JS

  • اضافه کردن عناصر کودک به هیئت مدیره Adding Child Elements to Board

  • اضافه کردن عناصر کودک به هیئت مدیره Adding Child Elements to Board

  • به روز رسانی و حذف یادداشت ها Updating & Deleting Notes

  • به روز رسانی و حذف یادداشت ها Updating & Deleting Notes

  • اضافه کردن یادداشت ها Adding Notes

  • کلیدها در React JS Keys in React JS

  • کلیدها در React JS Keys in React JS

  • اجزای نصب Mounting Components

  • تنظیم سبک های پیش فرض Setting Default Styles

  • به روز رسانی کامپوننت ها Updating Components

  • قابلیت کشیدن React Components Making React Components Draggable

  • قابلیت کشیدن React Components Making React Components Draggable

  • راه اندازی و نصب برنامه Create React Setup & Install Create React App

  • ساخت پد خراش با React JS Building Scratch Pad With React JS

  • ساخت پد خراش با React JS Building Scratch Pad With React JS

ایجاد React App - شروع به کار Create React App - Getting Started

  • مقدمه ای بر ایجاد اپلیکیشن React Introduction to Create React App

  • پیش نیازها Prerequisites

ایجاد React App - شروع به کار Create React App - Getting Started

  • مقدمه ای بر ایجاد اپلیکیشن React Introduction to Create React App

  • پیش نیازها Prerequisites

ایجاد React App - React چیست Create React App - What is React

  • React چیست What is React

  • React Tools را در کروم نصب کنید Install React Tools on Chrome

ایجاد React App - React چیست Create React App - What is React

  • React چیست What is React

  • React Tools را در کروم نصب کنید Install React Tools on Chrome

  • React Tools را روی فایرفاکس نصب کنید Install React Tools on Firefox

  • React Tools را روی فایرفاکس نصب کنید Install React Tools on Firefox

ایجاد React App - React Elements Create React App - React Elements

  • Create-React-App را نصب کنید Install Create-React-App

  • ایجاد React Elements Creating React Elements

  • استفاده از JSX برای Refactor Elements Using JSX to Refactor Elements

ایجاد React App - React Elements Create React App - React Elements

  • Create-React-App را نصب کنید Install Create-React-App

  • تولید پروژه Project Generation

  • تولید پروژه Project Generation

  • ایجاد React Elements Creating React Elements

  • استفاده از JSX برای Refactor Elements Using JSX to Refactor Elements

ایجاد React App - Components در React Create React App - Components in React

  • ایجاد اجزای مختلف Creating Different Components

  • کار با لیست ها Working with Lists

  • افزودن کلید به موارد فهرست Adding Keys to List Items

ایجاد React App - Components در React Create React App - Components in React

  • ایجاد React Components Creating React Components

  • ایجاد React Components Creating React Components

  • ایجاد اجزای مختلف Creating Different Components

  • ویژگی های کامپوننت Component Properties

  • ویژگی های کامپوننت Component Properties

  • کار با لیست ها Working with Lists

  • افزودن کلید به موارد فهرست Adding Keys to List Items

  • نمایش تصاویر در React Display Images in React

  • نمایش تصاویر در React Display Images in React

  • کار با Fragments Working with Fragments

  • کار با Fragments Working with Fragments

ایجاد React App - State در React Component Create React App - State in React Component

  • تخریب ساختار آرایه ها و اشیا Destructureing Arrays and Objects

  • کار با useState Hook Working with useState Hook

ایجاد React App - State در React Component Create React App - State in React Component

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

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

  • تخریب ساختار آرایه ها و اشیا Destructureing Arrays and Objects

  • کار با useState Hook Working with useState Hook

  • کار با useEffect Working with useEffect

  • کار با useEffect Working with useEffect

  • ترکیب useReducer با React Incorporating useReducer with React

  • ترکیب useReducer با React Incorporating useReducer with React

ایجاد React App - React Asynchronous Create React App - React Asynchronous

  • استفاده از هوک برای واکشی داده ها Using Hooks to Fetch Data

ایجاد React App - React Asynchronous Create React App - React Asynchronous

  • استفاده از هوک برای واکشی داده ها Using Hooks to Fetch Data

  • نمایش داده ها از API با React Displaying Data from API with React

  • نمایش داده ها از API با React Displaying Data from API with React

  • جابجایی ایالت های بارگیری Handling Loading States

  • جابجایی ایالت های بارگیری Handling Loading States

ایجاد React App - تست در React Create React App - Testing in React

  • استفاده از Jest برای تست توابع کوچک Using Jest to Test Small Functions

  • تست کتابخانه در React Testing Library in React

ایجاد React App - تست در React Create React App - Testing in React

  • تست پلت فرم با استفاده از برنامه Create React Testing Platform using Create React App

  • تست پلت فرم با استفاده از برنامه Create React Testing Platform using Create React App

  • استفاده از Jest برای تست توابع کوچک Using Jest to Test Small Functions

  • تست کتابخانه در React Testing Library in React

  • تست هوک ها با کتابخانه تست React Testing Hooks with React Testing Library

  • تست هوک ها با کتابخانه تست React Testing Hooks with React Testing Library

ایجاد برنامه React - کار با روترهای React Create React App - Working with React Routers

ایجاد برنامه React - کار با روترهای React Create React App - Working with React Routers

  • نصب و راه اندازی روترهای React Installing and Setting up React Routers

  • نصب و راه اندازی روترهای React Installing and Setting up React Routers

  • پیکربندی روترهای React React Routers Configuration

  • پیکربندی روترهای React React Routers Configuration

  • پیوند دادن اجزا با هم Linking Components Together

  • پیوند دادن اجزا با هم Linking Components Together

React Project - مقدمه React Project - Introduction

React Project - مقدمه React Project - Introduction

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

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

React Project - راه اندازی و نصب React Project - Setting-Up and Installation

  • نصب نیازمندی ها Installing Requirements

  • نصب برنامه React را ایجاد کنید Create React App Installation

  • برنامه React را پاک کنید Clean up React Application

  • سفارشی سازی کامپوننت های بوت استرپ در React Customizing Bootstrap Components in React

React Project - راه اندازی و نصب React Project - Setting-Up and Installation

  • نصب نیازمندی ها Installing Requirements

  • نصب برنامه React را ایجاد کنید Create React App Installation

  • برنامه React را پاک کنید Clean up React Application

  • استفاده از اجزای خارجی Using External Components

  • استفاده از اجزای خارجی Using External Components

  • نصب Bootstrap CSS در React Installing Bootstrap CSS in React

  • نصب Bootstrap CSS در React Installing Bootstrap CSS in React

  • سفارشی سازی کامپوننت های بوت استرپ در React Customizing Bootstrap Components in React

React Project - در حال توسعه پروژه React Project - Developing Project

  • قلاب های جزء فرعی Sub Component Hooks

  • ایجاد داده های JSON برای کاربران نسخه ی نمایشی Creating JSON Data for Demo Users

React Project - در حال توسعه پروژه React Project - Developing Project

  • ساختن اولین کامپوننت شما Building your first Component

  • ساختن اولین کامپوننت شما Building your first Component

  • قلاب های جزء فرعی Sub Component Hooks

  • افزودن قرار ملاقات به پروژه ما Adding Appointments into our Project

  • افزودن قرار ملاقات به پروژه ما Adding Appointments into our Project

  • ایجاد داده های JSON برای کاربران نسخه ی نمایشی Creating JSON Data for Demo Users

  • وارد کردن داده های JSON به React Part-1 Importing JSON Data into React Part-1

  • وارد کردن داده های JSON به React Part-1 Importing JSON Data into React Part-1

React Project - تنظیم مرتب سازی و عملکرد جستجو React Project - Setting-up Sort and Search Functionality

  • ارسال داده به کامپوننت Sending Data to the Component

  • کلاس های شرطی و استفاده از قلاب های حالت Conditional Classes and useState Hooks

React Project - تنظیم مرتب سازی و عملکرد جستجو React Project - Setting-up Sort and Search Functionality

  • ارسال داده به کامپوننت Sending Data to the Component

  • کلاس های شرطی و استفاده از قلاب های حالت Conditional Classes and useState Hooks

React Project - Manipulation Data React Project - Manipulation Data

  • کار با useEffect و useCallback Working with useEffect and useCallback

  • حذف داده ها Deleting Data

  • جستجوی داده ها با فیلترها Searching Data with Filters

  • کار با Sort Working with Sort

  • استفاده از الگوریتم مرتب سازی Applying the Sort Algorithm

React Project - Manipulation Data React Project - Manipulation Data

  • کار با useEffect و useCallback Working with useEffect and useCallback

  • حذف داده ها Deleting Data

  • جستجوی داده ها با فیلترها Searching Data with Filters

  • کار با Sort Working with Sort

  • استفاده از الگوریتم مرتب سازی Applying the Sort Algorithm

  • افزودن قرارهای جدید Adding New Appointments

  • افزودن قرارهای جدید Adding New Appointments

نمایش نظرات

آموزش کامل دوره توسعه وب فرانت اند (2023)
جزییات دوره
32 hours
489
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
60,198
4.3 از 5
ندارد
دارد
دارد
Fatah Gabrial
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Fatah Gabrial Fatah Gabrial

Fatah Gabrial یک طراح گرافیک ، طراح وب ، توسعه دهنده وب ، بازاریاب دیجیتال است و عاشق تدریس است. او بیش از 10 سال بیشتر به صورت آنلاین و آفلاین به مردم آموزش می دهد ، جایی که به بیش از 100 نفر از مردم برای راه اندازی کسب و کار خود کمک کرده است. علاوه بر این ، فتح گابریال بیش از هر چیز عاشق رمزگذاری و طراحی است. او می تواند به راحتی با هر فناوری جدید سازگار شود ، که به او کمک می کند هر چیزی را سریعتر یاد بگیرد. او همچنین دوست دارد هرچه بیشتر اوقات مهارت های من را ارتقا دهد. فتح گابریال همچنین در بسیاری از سیستم عامل ها مانند WordPress، Angular، ReactJS، Python، Django و بسیاری دیگر کار کرده است. او همچنین یک متخصص SEO - متخصص بهینه سازی موتور جستجو است که اگر به دنبال بازاریابی دیجیتال هستید یک مزیت بزرگ است.