آموزش Bootcamp توسعه‌دهنده وب Front-End: HTML، CSS، JS و React

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

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

• مواد درسی Course Materials

ساختار یک فایل 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 & 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 Z-index

• سرریز Overflow

• شناور Float

• مدل DOM DOM Model

• انتخابگرهای پیشرفته Advanced Selectors

• شبه کلاس ها قسمت 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

• var جهانی و محلی در جاوا اسکریپت 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 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

• عملکرد با بازگشت Function with return

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

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

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

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

• حلقه while انجام دهید Do while loop

• برای حلقه For loop

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

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

• آرایه ها Arrays

• تغییر و حذف آرایه ها Modify and delete arrays

• مرتب سازی و معکوس کردن روش ها Sort and revers methods

• روش های پاپ و فشار Pop and push methods

• روش Shift و Unshift Shift and unshift method

• روش Concat و Join Concat and join method

• روش برش و اسپلایس Slice and splice method

• روش isArray The isArray method

• روش Indexof و lastindex Indexof and lastindex method

• روش forEach The forEach method

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

• روش ها را شامل شود Include methods

• برخی و هر روشی Some and every method

• روش یافتن و یافتن ایندکس Find and findindex method

• روش فیلتر 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

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

• روش تاریخ Date method

مدل DOM DOM Model

• مدل Dom Dom Model

• اشیاء دیگر را دم کنید Dom other objects

• روش های Dom get Dom get methods

• استایل دم 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

• فرزند را اضافه کنید و قبل از آن درج کنید 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

• الفبای قالب در 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 & 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