آموزش Ultimate Front-End Bootcamp: CSS، Bootstrap، JQ، JS، React

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

توسعه CSS CSS Development

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

• بخش هایی از یک قانون CSS Parts of a CSS Rule

• انواع قوانین CSS Types of CSS Rules

• CSS - نام ها و کدهای رنگی CSS - Color Names and Codes

• کلاس ها و گستره های CSS CSS Classes and Spans

• CSS Divisions - DIVs CSS Divisions - DIVs

• شناسه های CSS CSS IDs

• حاشیه های CSS CSS Margins

• CSS Padding CSS Padding

• ویژگی های متن CSS CSS Text Properties

• ویژگی های قلم CSS CSS Font Properties

• مرزهای CSS CSS Borders

• پس زمینه های CSS CSS Backgrounds

• شفافیت CSS CSS Transparency

• متن CSS در بالای تصاویر CSS Text on Top of Images

• ویژگی های عرض و ارتفاع CSS CSS Width and Height Properties

• ویژگی های نمایش CSS CSS Display Properties

• موقعیت یابی استاتیک CSS CSS Static Positioning

• موقعیت یابی نسبی CSS CSS Relative Positioning

• موقعیت یابی مطلق CSS CSS Absolute Positioning

• موقعیت یابی ثابت CSS CSS Fixed Positioning

• CSS Float Property CSS Float Property

• CSS Clear Property CSS Clear Property

• CSS Z-Index CSS Z-Index

• پیوندهای سبک CSS CSS Styling Links

• جداول CSS CSS Tables

• پروژه CSS - مقدمه CSS Project - Introduction

• پروژه CSS - قوانین CSS CSS Project - CSS Rules

• پروژه CSS - قوانین ناوبری CSS Project - Navigation Rules

• پروژه CSS - CSS پاسخگو CSS Project - Responsive CSS

• پروژه CSS - عناصر صفحه CSS Project - Page Elements

توسعه بوت استرپ Bootstrap Development

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

• تعبیه بوت استرپ Embedding Bootstrap

• بوت استرپ - ساختار اصلی صفحه Bootstrap - Basic Page Structure

• سیستم بوت استرپ گرید Bootstrap Grid System

• طرح بندی سه ستونی بوت استرپ Bootstrap Three Column Layouts

• تایپوگرافی بوت استرپ Bootstrap Typography

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

• تصاویر استایل بوت استرپ Bootstrap Styling Images

• بوت استرپ Jumbotron Bootstrap Jumbotron

• بوت استرپ ولز Bootstrap Wells

• هشدارهای بوت استرپ Bootstrap Alerts

• دکمه های بوت استرپ Bootstrap Buttons

• گروه های دکمه بوت استرپ Bootstrap Button Groups

• Bootstrap Justified Button Groups Bootstrap Justified Button Groups

• گلیفیکون های بوت استرپ Bootstrap Glyphicons

• نشان ها و برچسب های بوت استرپ Bootstrap Badges and Labels

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

• صفحه بندی بوت استرپ Bootstrap Pagination

• صفحه بندی پیجر بوت استرپ Bootstrap Pager Pagination

• گروه های لیست بوت استرپ Bootstrap List Groups

• پانل های بوت استرپ Bootstrap Panels

• منوهای کشویی بوت استرپ Bootstrap Dropdown Menus

• Bootstrap Collapsibles Bootstrap Collapsibles

• پانل فروپاشی بوت استرپ Bootstrap Collapse Panel

• Bootstrap Collapse List Group Bootstrap Collapse List Group

• بوت استرپ آکاردئونی Bootstrap Accordian

• منوهای تب بوت استرپ Bootstrap Tab Menus

• منوهای قرص بوت استرپ Bootstrap Pill Menus

• تب ها و قرص های پویا بوت استرپ Bootstrap Dynamic Tabs and Pills

• نوار ناوبری بوت استرپ Bootstrap Navigation Bar

• نوار ناوبری جمع شونده بوت استرپ Bootstrap Collapsible Navigation Bar

• فرم های بوت استرپ - عمودی و درون خطی Bootstrap Forms - Vertical and Inline

• ورودی های بوت استرپ Bootstrap Inputs

• حالت های کنترل فرم بوت استرپ Bootstrap Form Control States

• اندازه ورودی بوت استرپ Bootstrap Input Sizing

• بوت استرپ چرخ فلک Bootstrap Carousel

• Bootstrap Modal Bootstrap Modal

• راهنمای ابزار بوت استرپ Bootstrap Tooltip

• بوت استرپ پاپوور Bootstrap Popover

• Bootstrap Scrollspy Bootstrap Scrollspy

• پروژه بوت استرپ - مقدمه تم Bootstrap Project - Themes Intro

• پروژه بوت استرپ - نمای کلی فایل Bootstrap Project - File Overview

• پروژه بوت استرپ - نمای کلی اسکریپت Bootstrap Project - Script Overview

• پروژه بوت استرپ - بررسی اجمالی اسکریپت ادامه دارد Bootstrap Project - Script Overview Continued

مدل شیء DOM (DOM) DOM Object Model (DOM)

• معرفی DOM DOM Introduction

• دستکاری DOM DOM Manipulation

توسعه جاوا اسکریپت JavaScript Development

• معرفی Introduction

• قرار دادن JS JS Placement

• جاوا اسکریپت خارجی External JavaScript

• خروجی جاوا اسکریپت JavaScript Output

• JavaScript InnerHTML JavaScript InnerHTML

• کامنت گذاری جاوا اسکریپت JavaScript Commenting

• ثابت جاوا اسکریپت JavaScript Constants

• معرفی متغیرهای جاوا اسکریپت JavaScript Variables Introduction

• اپراتور جاوا اسکریپت JavaScript Assignment Operator

• عملیات محاسباتی جاوا اسکریپت JavaScript Arithmetic Operations

• عملیات محاسباتی جاوا اسکریپت ادامه دارد JavaScript Arithmetic Operations Continued

• اولویت اپراتور جاوا اسکریپت JavaScript Operator Precedence

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

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

• خروجی شی جاوا اسکریپت JavaScript Object Output

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

• طول رشته جاوا اسکریپت JavaScript String Length

• کاراکترهای ویژه جاوا اسکریپت JavaScript Special Characters

• اعداد تصادفی جاوا اسکریپت JavaScript Random Numbers

• تابع حداقل و حداکثر جاوا اسکریپت JavaScript Min and Max Function

• تابع دور ریاضی جاوا اسکریپت JavaScript Math Round Function

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

• ویژگی های آرایه جاوا اسکریپت JavaScript Array Attributes

• آرایه های جاوا اسکریپت - Pop - Push - Shift - Unshift JavaScript Arrays - Pop - Push - Shift - Unshift

• جاوا اسکریپت تغییر و حذف عناصر JavaScript Changing and Deleting Elements

• جاوا اسکریپت پیوند یک آرایه JavaScript Splicing an Array

• جاوا اسکریپت مرتب سازی یک آرایه JavaScript Sorting an Array

• پیوستن آرایه های جاوا اسکریپت JavaScript Joining Arrays

• دستورات شرطی جاوا اسکریپت JavaScript Conditional Statements

• مقایسه جاوا اسکریپت JavaScript Comparisons

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

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

• JavaScript For-In Loop JavaScript For-In Loop

• JavaScript while Loops JavaScript While Loops

• حلقه جاوا اسکریپت Do-While JavaScript Do-While Loop

• جاوا اسکریپت شکسته و ادامه دهید JavaScript Break and Continue

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

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

• JavaScript Project 1 - BG Color Changer JavaScript Project 1 - BG Color Changer

• پروژه جاوا اسکریپت 2 - گالری عکس JavaScript Project 2 - Photo Gallery

• پروژه جاوا اسکریپت 2 - تکمیل JavaScript Project 2 - Completion

کتابخانه جی کوئری jQuery Library

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

• جاسازی جی کوئری Embedding jQuery

• jQuery Syntax and Selector Intro jQuery Syntax and Selector Intro

• انتخابگر jQuery ID jQuery ID Selector

• انتخابگر کلاس jQuery jQuery Class Selector

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

• فایل jQuery خارجی External jQuery File

• معرفی رویدادهای jQuery jQuery Events Intro

• رویدادهای jQuery - mouseenter و mouseeleave jQuery Events - mouseenter and mouseleave

• رویدادهای jQuery - ماوس و موس jQuery Events - mousedown and mouseup

• کنترل‌کننده‌های رویداد چندگانه jQuery jQuery Multiple Event Handlers

• jQuery Hiding-Showing jQuery Hiding-Showing

• jQuery Toggle jQuery Toggle

• jQuery Fade In-Out jQuery Fade In-Out

• jQuery Fade Toggle jQuery Fade Toggle

• jQuery Fade To jQuery Fade To

• jQuery Slide Down jQuery Slide Down

• jQuery Slide Up jQuery Slide Up

• جابجایی اسلاید جی کوئری jQuery Slide Toggle

• jQuery Animate jQuery Animate

• jQuery Animate - چند پارامتر jQuery Animate - Multiple Params

• jQuery Animate - مقادیر نسبی jQuery Animate - Relative Values

• jQuery Animate - قابلیت صف jQuery Animate - Queue Functionality

• روش توقف جی کوئری jQuery Stop Method

• توابع پاسخ به تماس جی کوئری jQuery Callback Functions

• jQuery Chaining jQuery Chaining

• jQuery Draggables jQuery Draggables

• منوی آکاردئونی جی کوئری jQuery Accordian Menu

• jQuery دریافت محتوا - متن و html jQuery Get Content - text and html

• jQuery دریافت محتوا - Val jQuery Get Content - Val

• jQuery دریافت محتوا - attr jQuery Get Content - attr

• jQuery Set Content - text - html - val jQuery Set Content - text - html - val

• jQuery Set Attributes - attr jQuery Set Attributes - attr

• jQuery Append و Preprend jQuery Append and Preprend

• jQuery - بعد و قبل jQuery - After and Before

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

• حذف فیلتر جی کوئری jQuery Filter Remove

• jQuery اضافه کردن کلاس jQuery Add Class

• jQuery Remove Class jQuery Remove Class

• jQuery Toggle Class jQuery Toggle Class

React JS React JS

• مهارت های مورد نیاز Skills Required

• React چیست؟ What is React?

React Project: یک ماشین حساب در React بسازید React Project: Build a Calculator in React

• بررسی اجمالی پروژه Project Overview

• سلام واکنش Hello React

• ابزار مورد نیاز Tools Needed

• قلم کد Code Pen

• معرفی JSX Intro to JSX

• کامپوننت های کاربردی در React Functional Components in React

• چرا کامپوننت ها؟ Why Components?

• معرفی Props در React Intro to Props in React

• React Components، Props و Callbacks React Components, Props and Callbacks

• ساخت تصویری ماشین حساب Building the Calculator Visuals

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

• عبور پارامترها در توابع پاسخ به تماس Passing Parameters in Callback Functions

• با استفاده از React State Hook Using React State Hook

• پیاده سازی ماشین حساب - نمایش Implementing the calculator - Display

• پیاده سازی ماشین حساب - اپراتورها Implementing the calculator - Operators

• اشکال زدایی در React Debugging in React

• خلاصه ی پروژه Project Summary

React Project: ساخت Connect-4 Clone React Project: Build a Connect-4 Clone

• بررسی اجمالی پروژه Project Overview

• ابزار مورد نیاز Tools Needed

• ایجاد صفحه بازی Creating the Game Board

• دایره بازی - OnClickEvent Game Circle - OnClickEvent

• گذراندن وسایل - تخریب - واکنش کودکان Passing Props - Destructing - React Children

• ارسال آرگومان ها برای کلیک روی رویدادها Passing Arguments to Click Events

• یک ظاهر طراحی داخلی Inline Styling

• مولفه مربع به دایره Square to Circle Component

• استایل جهانی Global Styling

• یک ظاهر طراحی پویا Dynamic Styling

• کلاس های دینامیک Dynamic Classes

• رسیدگی به تماس ها Handling Callbacks

• استفاده از React State Hook (دوباره) Using React State Hook (again)

• به روز رسانی حلقه بازیکن Updating the Player Circle

• راه اندازی صفحه بازی Initializing the Game Board

• ویژگی React Key React Key Property

• طراحی صفحه بازی - سرصفحه و پاورقی Styling the Game Board - Header and Footer

• محاسبه برنده Calculating the Winner

• نمایش برنده Displaying the Winner

• تعیین یک شرط قرعه کشی Determining a Draw Condition

• رویدادهای چرخه حیات واکنش نشان دهید React Lifecycle Events

• راه اندازی بازی Initializing the Game

• پیشنهاد حرکت - پیاده سازی یک پخش کننده کامپیوتری Suggesting a Move - Implementing a Computer Player

• پخش کننده رایانه هوشمند (هوش مصنوعی اولیه) Smart Computer Player (Basic AI)

• متغیرهای CSS CSS Variables

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

• در Netlify مستقر شوید Deploy to Netlify

• مستقر در Surge Deploy to Surge

• خلاصه ی پروژه Project Summary

React Project: یک سایت تجارت الکترونیک بسازید React Project: Build an E-Commerce Site

• بررسی اجمالی پروژه Project Overview

• داربست پروژه Scaffolding the Project

• معرفی سرور JSON Intro to JSON Server

• واکشی API Fetch API

• سبک دادن به فروشگاه Styling the Store

• ارائه دسته ها Rendering the Categories

• اتصال محصولات Binding the Products

• تماس Fetch API را مجدداً تنظیم کنید Refactor the Fetch API call

• مقابله با خطاها در Fetch API Dealing with errors in Fetch API

• تماس Fetch API را مرتب کنید Tidy the Fetch API call

• سبک دادن به لیست محصولات Styling the Product List

• نصب روتر React Installing React Router

• رفع اخطار کلیدی Fixing the Key Warning

• روتر واکنش - صفحه جزئیات React Router - Detail Page

• Fetch API - دریافت محصول بر اساس شناسه Fetch API - Get Product By Id

• توضیحات محصول Product Description

• مقدمه ای بر اجزای سبک Intro to Styled Components

• اجزای سبک - توضیحات محصول Styled Components - Product Description

• تنظیم خطرناک HTML (آره واقعا) Dangerously Set HTML (yeah really)

• Refactor دسته ها Refactor the Categories

• Layout را اصلاح کنید Refactor the Layout

• صفحه اصلی را بازسازی کنید Refactor the Home Page

• معرفی Context در React Intro to Context in React

• UseContext Hook و UseReducer Hook در React UseContext Hook and UseReducer Hook in React

• طرح بندی سبد Basket Layout

• اجرای سبد Implementing the Basket

• پیاده سازی آیکون های سبد Implementing Basket Icons

• اجرای سبد کل Implementing Basket Total

• اتمام پرداخت Finishing the Checkout

• پرداخت - رفع وضعیت Checkout - Fixing the State

• اجرای تایید سفارش Implementing the Order Confirmation

• معرفی Local Storage Intro to Local Storage

• پیاده سازی نتایج جستجو Implementing Search Results

• جستجوی بهتر با Debouncing Better Searching with Debouncing

• اعتبار سنجی فرم ها در React - قسمت 1 Validating Forms in React - Part 1

• اعتبار سنجی فرم ها در React - قسمت 2 Validating Forms in React - Part 2

• اعتبار سنجی فرم ها در React - قسمت 3 Validating Forms in React - Part 3

• اعتبار سنجی فرم ها در React - قسمت 4 Validating Forms in React - Part 4

• خلاصه ی پروژه Project Summary