آموزش HTML، CSS، React - دوره صدور گواهینامه برای مبتدیان

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

توسعه HTML HTML Development

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

• ساختار اصلی یک صفحه وب Basic Structure of a Web Page

• تگ های سر HTML HTML Head Tags

• تگ بدنه HTML HTML Body Tag

• فاصله پاراگراف HTML HTML Paragraph Spacing

• خط HTML شکسته می شود HTML Line Breaks

• فضای غیرقابل شکست HTML HTML Non-Breaking Space

• تگ های هدر HTML HTML Header Tags

• قالب بندی و تزئین متن HTML HTML Text Formatting and Decoration

• قالب بندی متن درون خطی HTML HTML Inline Text Formatting

• لیست های نامرتب HTML HTML Unordered Lists

• لیست های مرتب شده HTML HTML Ordered Lists

• درج تصویر HTML HTML Image Insertion

• ویدئوهای جاسازی HTML HTML Embedding Videos

• HTML مطلق در مقابل ارجاع فایل نسبی HTML Absolute vs. Relative File Referencing

• ایجاد لینک HTML HTML Link Creation

• تگ های لنگر HTML HTML Anchor Tags

• جداول HTML HTML Tables

• جداول تو در تو HTML HTML Nested Tables

• ادغام سلول های HTML HTML Merging Cells

• بسته بندی متن HTML HTML Text Wrapping

• تصویر پس زمینه جدول HTML HTML Table Background Image

• تراز سلولی HTML HTML Cell Alignment

• HTML - مقدمه ای بر فرم ها HTML - Introduction to Forms

• برچسب ها و ویژگی های فرم HTML HTML Form Tags and Attributes

• فرم های HTML - ارسال در مقابل دریافت HTML Forms - Post vs Get

• فرم های HTML - فیلدهای متنی ورودی HTML Forms - Input Text Fields

• فرم های HTML - منوها را انتخاب کنید HTML Forms - Select Menus

• فرم های HTML - کادرها و دکمه های رادیویی را علامت بزنید HTML Forms - Check Boxes and Radio Buttons

• فرم های HTML - مناطق متن و دکمه ها HTML Forms - Text Areas and Buttons

• آی فریم های HTML HTML Iframes

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

• پروژه HTML - سربرگ HTML Project - Header

• پروژه HTML - Callout HTML Project - Callout

• پروژه HTML - درج تصویر HTML Project - Image Insertion

• پروژه HTML - درج متن HTML Project - Text Insertion

• پروژه HTML - پیوندها و فرم HTML Project - Links and Form

• پروژه HTML - داده های جدولی HTML Project - Tabular Data

• پروژه HTML - پاورقی HTML Project - Footer

توسعه 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 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

مقدمه ای برای React Intro to React

• مهارت های مورد نیاز 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

• بررسی اجمالی پروژه 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 React Project: Build an E-Commerce Site in React

• بررسی اجمالی پروژه Prroject 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