آموزش HTML، CSS، جاوا اسکریپت، React - دوره صدور گواهینامه آنلاین

HTML, CSS, JavaScript, React - Online Certification Course

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: ساخت: صفحات وب پاسخگوی موبایل با استفاده از CSS | برنامه های وب پویا در React | اجزای رابط کاربری تعاملی | سایت های تجارت الکترونیک آموزش مبانی HTML، CSS، جاوا اسکریپت درک ساختار اساسی یک صفحه وب کار با HTML، CSS و نحو جاوا اسکریپت ساخت لیست ها، قالب بندی متن و کار با داده های جدولی در فرم های ساخت HTML با استفاده از Post در مقابل Get. اجزای ناوبری ساخت روش مانند منوها، مناطق ورودی و دکمه‌ها در ساختمان HTML طرح‌بندی صفحه وب پاسخگو با استفاده از برگه‌های سبک آبشاری (CSS) کار با DIV، شناسه‌ها و ویژگی‌های سبک در تصاویر استایل‌سازی CSS، پس‌زمینه، حاشیه‌ها و متن در بالای صفحه تصاویر در CSS کار با موقعیت یابی CSS (ایستا، نسبی، مطلق، ثابت، شناور) شکل دادن به پیوندها و جداول در CSS درک مدل شی سند (DOM) ساخت اجزای صفحه وب تعاملی ساده با استفاده از جاوا اسکریپت کار با عملگرهای حسابی جاوا اسکریپت و کاوش انواع داده های جاوا اسکریپت آرایه ها، حلقه ها و رویدادها درک اولویت، اشیاء و توابع اپراتور در جاوا اسکریپت ایجاد برنامه های وب پویا در اشکال زدایی React و رویدادهای React کاوش قلم کد، سرور JSON و Props React کار با React State Hook و Styling React Projects پیش نیازها:Basic مهارت های کامپیوتر بدون نیاز به تجربه برنامه نویسی. شما هر آنچه را که نیاز دارید یاد خواهید گرفت.

این دوره برای آموزش مفاهیم اساسی و مهارت های مورد نیاز برای ساخت صفحات وب مدرن و واکنش گرا به دانش آموزان طراحی شده است. این دوره موضوعات کلیدی از جمله ساختار اصلی یک صفحه وب، ساخت برنامه های وب پاسخگو برای تلفن همراه، کار با HTML، CSS و نحو جاوا اسکریپت، و ساخت اجزای مختلف وب با استفاده از این زبان ها را پوشش می دهد.

در ابتدا، دانش آموزان یاد می گیرند ساختار یک صفحه وب و نحوه ایجاد سایت های واکنش گرا برای موبایل که با اندازه های مختلف صفحه نمایش و دستگاه ها سازگار هستند. این شامل مقدمه ای بر HTML است، که زبان نشانه گذاری است که برای ایجاد ساختار اصلی صفحه وب استفاده می شود. دانش‌آموزان عناصر مختلف HTML و نحوه استفاده از آنها را برای ایجاد سرفصل‌ها، پاراگراف‌ها، فهرست‌ها، تصاویر و سایر محتوای ثابت یاد می‌گیرند.

در مرحله بعد، دانش‌آموزان CSS، زبان مورد استفاده برای سفارشی‌سازی استایل و چیدمان را بررسی می‌کنند. CSS در ارتباط با HTML کار می کند تا طراحی های بصری جذابی را ایجاد کند که برجسته باشند. در اینجا، دانش آموزان یاد می گیرند که به طور موثر از انتخابگرها، ویژگی ها و مقادیر CSS استفاده کنند. این شامل مقدمه‌ای بر طراحی وب واکنش‌گرا و استفاده از پرسش‌های رسانه‌ای CSS برای ایجاد صفحات وب با اندازه‌های مختلف صفحه نمایش است.

علاوه بر یادگیری اصول اولیه HTML و CSS، دانش‌آموزان همچنین جاوا اسکریپت، برنامه‌نویسی را نیز یاد خواهند گرفت. زبانی که برای افزودن تعامل و عملکرد پویا به صفحات وب استفاده می شود. دانش آموزان مدل شیء سند (DOM) و نحوه استفاده از جاوا اسکریپت برای دستکاری پویا عناصر صفحه را یاد خواهند گرفت. همچنین رویدادها، حلقه‌ها، آرایه‌ها و دیگر مفاهیم برنامه‌نویسی جاوا اسکریپت را بررسی می‌کنیم.

این دوره همچنین موضوعات پیشرفته‌تری مانند ساخت اجزای ناوبری با استفاده از HTML، ایجاد فرم‌ها با استفاده از روش ارسال در مقابل دریافت و کار با DIV ها و شناسه ها. ما همچنین تصاویر استایل، پس‌زمینه، حاشیه‌ها و متن را در بالای تصاویر در CSS پوشش می‌دهیم. دانش‌آموزان گزینه‌های مختلف موقعیت‌یابی CSS (ایستا، نسبی، مطلق، ثابت، شناور) و نحوه استفاده از آنها برای ایجاد طرح‌بندی‌های پیچیده صفحه وب را یاد خواهند گرفت.

در بخش جاوا اسکریپت این دوره، دانش‌آموزان Document Object را یاد می‌گیرند. مدل (DOM) و نحوه استفاده از جاوا اسکریپت برای دستکاری عناصر یک صفحه وب. در اینجا رویدادها، حلقه‌ها، آرایه‌ها و سایر مفاهیم برنامه‌نویسی مانند اولویت عملگر، اشیاء و توابع را بررسی می‌کنیم.

وقتی دانش‌آموزان سه زبان اصلی را کنترل کردند، به سراغ React JS می‌رویم - یک کتابخانه قدرتمند جاوا اسکریپت که برای ساخت برنامه‌های وب شیک و پویا و مؤلفه‌های رابط کاربری استفاده می‌شود. از طریق یک سری پروژه‌های عملی، دانش‌آموزان یک بازی کاملاً کاربردی Connect-4، یک ماشین حساب، و یک سایت تجارت الکترونیکی کامل با دسته‌ها، ویژگی‌های پرداخت و غیره خواهند ساخت.

این دوره برای دانش‌آموزانی که تجربه قبلی در توسعه وب ندارند یا تجربه کمی دارند، اما می‌تواند برای دانش‌آموزانی که تجربه دارند و به دنبال بهبود مهارت‌های خود هستند نیز مفید باشد. با دانش و مهارت های به دست آمده در این دوره، دانش آموزان برای انجام پروژه های توسعه وب پیشرفته تر و ادامه یادگیری در مورد فناوری های جدید توسعه وب آماده می شوند.


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

بخش HTML HTML Section

  • مقدمه ای بر 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 Table 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 Iframes 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 Section

  • مقدمه ای بر 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

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

  • معرفی DOM DOM Introduction

  • دستکاری DOM DOM Manipulation

بخش جاوا اسکریپت JavaScript Section

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

  • جاوا اسکریپت JavaScript 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

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

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

  • React چیست؟ What is React?

پروژه 1: ساخت ماشین حساب در React Project 1: 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

پروژه 2 - ساخت Connect-4 Clone در React Project 2 - Build a Connect-4 Clone in React

  • معرفی پروژه - آنچه ما خواهیم ساخت Project Introduction - What We Will Build

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

پروژه 3 - ساخت یک سایت تجارت الکترونیک در React Project 3 - Build an E-Commerce Site in React

  • معرفی پروژه - آنچه ما می سازیم Project Introduction - What We Build

  • داربست پروژه 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

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش HTML، CSS، جاوا اسکریپت، React - دوره صدور گواهینامه آنلاین
جزییات دوره
16 hours
200
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
10,100
4 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

YouAccel Training YouAccel Training

شروع به یادگیری کنید و مهارت های مورد نیاز خود را کسب کنید! بیانیه ماموریت: برای تسهیل یک محیط جامع یادگیری آنلاین برای دانشجویان. درباره شرکت YouAccel یک ارائه دهنده پیشرو در آموزش آنلاین است ، دوره هایی را در صنایع مختلف از IT و توسعه گرفته تا تجارت ، بازاریابی ، طراحی و بهره وری ارائه می دهد. تجربه آموزش الکترونیکی ارائه شده توسط YouAccel پویا است. هر دوره در High Definition با تکالیف ، آزمونها و امتحانات مربوطه که به صورت الکترونیکی تحویل و درجه بندی می شوند ، پخش می شود. کلیه دوره های YouAccel توسط مربیان دارای گواهینامه تدریس می شود که دارای چندین سال سابقه کار در زمینه ای هستند که برای آنها آموزش می دهند. این دوره ها را می توان با سرعت شخصی برگزار کرد و در چندین سطح از جمله مبتدی ، متوسط و پیشرفته ارائه می شود. دوره های آنلاین همچنین برای راحتی بیشتر با هر دستگاه تلفن همراه سازگار هستند. با استفاده از این تجربه به یک سطح جدید شخصی ، ارتباط زنده با مربیان از طریق کنسول پیام رسانی آنلاین Udemy در دسترس است. کلیه دوره ها دارای گواهی پایان دوره هستند و محدودیت سنی اعمال نمی شود.