آموزش Bootcamp توسعه دهندگان وب Front-End - HTML، CSS، JS، و React [ویدئو]

The Front-End Web Developer Bootcamp - HTML, CSS, JS, and React [Video]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: این دوره موضوعات ضروری از جمله مبانی HTML و CSS، ایجاد طرح‌بندی‌های واکنش‌گرا، جاوا اسکریپت برای تعامل، معرفی React، ساخت کامپوننت‌های قابل استفاده مجدد، کار با APIها، و طراحی رابط‌های کاربری front-end با کیفیت را پوشش می‌دهد. مهارت های مورد نیاز برای کار بر روی توسعه وب جلویی و ایجاد وب سایت های جذاب و پویا را به دست آورید. این دوره آموزشی عمیق HTML، CSS، JS و React را پوشش می دهد. ویژگی‌های HTML 5، تکنیک‌های استایل‌سازی CSS 3، نحو و پیاده‌سازی جاوا اسکریپت، اجزا و قلاب‌های React.js، دستکاری DOM، کار با API و استفاده از کتابخانه‌هایی مانند Material UI را خواهید آموخت. از طریق پروژه های عملی و نمونه های عملی، ما وب سایت های تعاملی و پویا خواهیم ساخت. در HTML و CSS، تگ‌ها، ویژگی‌ها، انتخاب‌کننده‌ها و سبک‌ها بیاموزید. با استفاده از CSS Grid و Flexbox، طرح‌بندی‌های واکنش‌گرا بسازید. تعامل با جاوا اسکریپت، از جمله شنوندگان رویداد، دستکاری DOM و انیمیشن ها را اضافه کنید. مفاهیم اصلی React، ساخت اجزای قابل استفاده مجدد و وضعیت مدیریت را کاوش کنید. برای واکشی و نمایش داده ها با API ها کار کنید. پس از اتمام دوره، این دوره شما را به ابزارها و دانشی برای برتری در توسعه وب جلویی مجهز می کند. از اصول اولیه جاوا اسکریپت تا توسعه برنامه پیشرفته، به یک توسعه دهنده جاوا اسکریپت مطمئن و به روز تبدیل شوید. با اصول Kubernetes و اصطلاحات آن آشنا شوید داده ها را در کانتینرهای مختلف در حال اجرا در یک پاد به اشتراک بگذارید یا ذخیره کنید یک تصویر ظرف از یک مانیفست تعریف تصویر ایجاد کنید یک خط لوله یکپارچه سازی پیوسته (CI) آگاه از Kubernetes برای استقرار ایجاد کنید با استفاده از Kubernetes ingress ترافیک را به برنامه خود جذب کنید کنترل کننده پذیرش خود را بسازید و به کار بگیرید این دوره به مخاطبان مختلف مرتبط با توسعه وب سایت پاسخ می دهد: مبتدیانی که مشتاق هستند در این زمینه تحقیق کنند و اصول توسعه وب سایت را با استفاده از HTML و CSS بیاموزند یا طراحان وب سایت با تجربه ای که مایل به به روز رسانی با آخرین کدنویسی HTML و CSS هستند. استانداردها توسعه دهندگان با پایه جاوا اسکریپت می توانند مجموعه مهارت های خود را با افزودن React JS گسترش دهند و متخصصانی که قبلاً با چارچوب های وب مانند Angular یا Vue آشنا هستند می توانند از این دوره بهره مند شوند. مهارت های اولیه اینترنت و ترکیب وب سایت، اتصال به اینترنت پایدار و ویرایشگر کد مانند Visual Studio Code و غیره مورد نیاز است. یادگیری HTML، CSS، جاوا اسکریپت، و React به طور جامع در مورد مهارت های ضروری توسعه وب front-end * کسب تجربه عملی عملی کار بر روی پروژه های دنیای واقعی در طول دوره * کسب مفاهیم/مهارت های توسعه وب front-end برای ایجاد کاربردی و بصری جذاب وب سایت ها

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

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

  • معرفی Introduction

  • ویژگی های HTML5 Features of HTML5

  • مزایای استفاده از HTML5 Benefits of Using HTML5

  • HTML5 کجا و چگونه استفاده می شود؟ Where and How Is HTML5 Used?

  • ویرایشگرهای HTML5 HTML5 Editors

  • دانلود کد ویژوال استودیو Downloading Visual Studio Code

ساختار یک فایل HTML5 Structure of an HTML5 File

  • تگ های HTML چیست؟ What Are HTML Tags?

  • ساختار یک فایل HTML5 Structure of an HTML5 File

  • ساختار فایل و پوشه File and Folder Structure

  • چگونه یک فایل HTML5 ایجاد کنیم؟ How to Create an HTML5 File?

بلوک های ساختمانی پایه HTML5 HTML5 Basic Building Blocks

  • تگ های عنوان در HTML Heading Tags in HTML

  • HTML5 نقل قول و برچسب های نقل قول HTML5 Quotation and Citation Tags

  • اظهار نظر کد در HTML5 Commenting Out Code in HTML5

  • ویژگی های HTML5 HTML5 Attributes

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

بررسی برچسب های HTML5 Exploring HTML5 Tags

  • تگ های لنگر چیست؟ What Are Anchor Tags?

  • برچسب های تصویر چیست؟ What Are Image Tags?

  • تگ های پاراگراف چیست؟ What Are Paragraph Tags?

  • برچسب های شکست چیست؟ What Are Break Tags?

  • برچسب های جدول چیست؟ What Are Table Tags?

  • برچسب های لیست List Tags

  • برچسب ویدیو Video Tag

  • برچسب صوتی Audio Tag

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

  • برچسب های فرم Form Tags

  • انواع ورودی Input Types

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

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

  • ورودی های مورد نیاز Required Inputs

بلوک و عناصر درون خطی Block and Inline Elements

  • معرفی Introduction

  • بررسی عناصر بلوکی و درون خطی Examining Block and Inline Elements

نتیجه گیری (بخش HTML5) Conclusion (HTML5 Part)

  • نتیجه Conclusion

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

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

  • سینتکس CSS3 Syntax of CSS3

  • موارد استفاده از CSS3 Uses of CSS3

  • انواع CSS3 Types of CSS3

  • انتخابگرها و رنگ ها در CSS3 Selectors and Colors in CSS3

ویژگی های اولیه CSS3 Basics Properties of CSS3

  • زمینه Background

  • مرز ها Borders

  • طرح کلی Outline

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

  • حاشیه و بالشتک Margin and Padding

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

  • تراز متن Text Alignment

  • تزیین متن Text Decoration

  • تبدیل متن Text Transform

  • فاصله متن Text Spacing

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

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

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

  • نمایش دادن Display

  • موقعیت ها Positions

  • Z-Index Z-Index

  • سرریز Overflow

  • شناور Float

  • مدل DOM DOM Model

  • شبه کلاس ها قسمت 1 Pseudo-Classes Part 1

  • کلاس های شبه قسمت 2 Pseudo-Classes part 2

  • شبه عناصر Pseudo-Elements

ویژگی های اضافی در CSS3 Extra Features in CSS3

  • کدورت و مهم Opacity and Important

  • مرز-شعاع Border-Radius

  • سایه جعبه Box Shadow

طراحی ریسپانسیو با CSS3 Responsive Design with CSS3

  • سیستم شبکه ای Grid System

  • فلکس باکس Flexbox

  • داستان های رسانه Media Queries

مینی پروژه Mini Project

  • مینی پروژه Mini Project

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

  • معرفی و تاریخچه جاوا اسکریپت Introduction and History of JavaScript

  • نحو جاوا اسکریپت و نمای کلی Syntax of JavaScript and Overview

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

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

متغیرها Variables

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

  • متغیر جهانی و محلی در جاوا اسکریپت Global and Local Var in JavaScript

  • console.log پیشرفته Advanced console.log

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

  • اگر بیانیه If Statement

  • اگر دیگر بیانیه If Else Statement

  • وضعیت بیانیه سه گانه Condition Ternary Statement

  • سوئیچ بیانیه Switch Statement

  • اگر در غیر این صورت اگر بیانیه If Else If Statement

  • عبارت Break and Continue Break and Continue Statement

  • انواع داده ها Data Types

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

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

  • اپراتور واگذاری Assignment Operator

  • اپراتور مقایسه Comparison Operator

جعبه های پاپ آپ در جاوا اسکریپت Popup Boxes in JavaScript

  • جعبه های هشدار Alert Boxes

  • جعبه تایید Confirm Box

  • جعبه اعلان Prompt Box

  • کارکرد Functions

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

  • عملکرد با Return Function with Return

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

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

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

  • در حالی که حلقه While Loop

  • حلقه را انجام دهید Do While Loop

  • برای حلقه For Loop

  • حلقه تو در تو Nested Loop

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

  • آرایه ها Arrays

  • تغییر و حذف آرایه ها Modify and Delete Arrays

  • روش های مرتب سازی و معکوس Sort and Reverse Methods

  • روش های پاپ و فشار Pop and Push Methods

  • روش های Shift و Unshift Shift and Unshift Methods

  • روش های Concat و Join Concat and Join Methods

  • روش های برش و برش Slice and Splice Methods

  • روش isArray The isArray Method

  • Indexof and lastindex Methods Indexof and lastindex Methods

  • روش forEach The forEach Method

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

  • شامل روش Include Method

  • برخی و همه روش ها Some and Every Methods

  • روش‌های Index را پیدا و پیدا کنید Find and findIndex Methods

  • روش فیلتر Filter Method

اشیاء و روشهای آنها Objects and Their Methods

  • اشیاء Objects

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

  • برای-در حلقه For-In Loop

رشته و روش های آن String and Its Methods

  • روش های رشته - قسمت 1 String Methods - Part 1

  • روش های رشته ای - قسمت 2 String Methods - Part 2

  • روش های رشته ای - قسمت 3 String Methods - Part 3

روش های شماره جاوا اسکریپت JavaScript Number Methods

  • روش های عددی Number Methods

  • روش ریاضی - قسمت 1 Math Method - Part 1

  • روش ریاضی - قسمت دوم Math Method - Part 2

  • روش تاریخ Date Method

مدل DOM DOM Model

  • مدل DOM DOM Model

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

  • DOM Get Methods DOM Get Methods

  • یک ظاهر طراحی DOM DOM Styling

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

  • استفاده از کپچر useCapture

  • روش classList classList Method

  • گره های والد Parent Nodes

  • گره های کودکان Children Nodes

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

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

  • گره متن عنصر را ایجاد کنید Create Element Text Node

  • Child را اضافه کنید و قبل را درج کنید Append Child and Insert Before

  • درج عنصر مجاور و درج HTML مجاور Insert Adjacent Element and Insert Adjacent HTML

نتیجه Conclusion

  • نتیجه Conclusion

مقدمه ای برای React: کتابخانه JS برای ایجاد رابط های کاربری Introduction to React: A JS Library for Building User Interfaces

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

  • اولین برنامه React First React App

  • JSX در React.JS JSX In React.JS

قلاب اجزای یک ظاهر طراحی شده Styling Components Hooks

  • Inline و Internal Styling در React.JS Inline and Internal Styling in React.JS

  • Template Literals در React.JS Template Literals in React.JS

  • کامپوننت ها در React.JS Components in React.JS

  • Props در React.JS Props in React.JS

  • Hooks در Reacts.JS Hooks in Reacts.JS

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

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

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

  • استفاده از افکت هوک در React.JS useEffect Hook in React.JS

DOM DOM

  • React-Router-DOM React-Router-DOM

  • پیوند در React-Router-DOM Linking in React-Router-DOM

  • مدیریت صفحات خطا با React-Router-DOM Handling Error Pages with React-Router-DOM

  • با استفاده از قلاب useNavigate(). Using the useNavigate() Hook

پروژه ها Projects

  • پروژه اول (قسمت اول) First Project (Part 1)

  • پروژه اول (قسمت دوم) First Project (Part 2)

ساخت اپلیکیشن ماشین حساب Building a Calculator App

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

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

با استفاده از Pokémon API Using the Pokémon API

  • ساخت یک API Restful در React.JS - قسمت 1 Building a Restful API in React.JS - Part 1

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

  • ساخت یک API Restful در React.JS - قسمت 3 Building a Restful API in React.JS - Part 3

  • استفاده از ()array.map در داخل عناصر JSX Using array.map() Inside JSX Elements

  • نحوه استفاده از Material UI در React.JS How to Use Material UI in React.JS

نمایش نظرات

آموزش Bootcamp توسعه دهندگان وب Front-End - HTML، CSS، JS، و React [ویدئو]
جزییات دوره
10 h 52 m
156
Packtpub Packtpub
(آخرین آپدیت)
از 5
ندارد
دارد
دارد
Meta Brains
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Meta Brains Meta Brains

بیایید با هم ابر جهان را کدنویسی و بسازیم! Meta Brains یک برند آموزشی حرفه ای است که توسط تیمی از توسعه دهندگان نرم افزار و متخصصان امور مالی که به امور مالی، کدنویسی و اکسل علاقه دارند، توسعه یافته است. ما تجارب حرفه‌ای و آموزشی را برای ایجاد برنامه‌های آموزشی در سطح جهانی که برای همه قابل دسترسی است، گرد هم می‌آوریم. در حال حاضر، ما بر انقلاب بزرگ بعدی در محاسبات متمرکز هستیم: متاورس. هدف نهایی ما این است که نسل بعدی استعدادها را آموزش دهیم تا بتوانیم با هم متاورز را کدنویسی و بسازیم!