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

The Front-End Web Developer Bootcamp: HTML, CSS, JS & React

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: با HTML، CSS، جاوا اسکریپت، React.JS و موارد دیگر، به عنوان یک توسعه دهنده وب جلویی شروع کنید! اصول HTML و CSS از جمله برچسب ها، ویژگی ها، انتخابگرها و سبک ها را بیاموزید. نحوه ایجاد طرح‌بندی‌های واکنش‌گرا با استفاده از CSS Grid و Flexbox را بیاموزید. یاد بگیرید که چگونه از جاوا اسکریپت برای افزودن تعامل به صفحات وب خود، از جمله شنوندگان رویداد، دستکاری DOM و انیمیشن های اولیه استفاده کنید. مقدمه ای بر React و مفاهیم اصلی آن: اصول اولیه React از جمله اجزاء، props، حالت و روش های چرخه حیات را بیاموزید. ساخت اجزای مقیاس پذیر و قابل استفاده مجدد با React: یاد بگیرید چگونه با استفاده از React کامپوننت های پیچیده و قابل استفاده مجدد بسازید، از جمله رندر شرطی، رویداد han کار با API ها برای واکشی و نمایش داده ها: یاد بگیرید چگونه از API ها برای واکشی و نمایش داده ها در صفحات وب خود استفاده کنید. برای ایجاد حرفه ای در توسعه وب سایت frontend و مهارت های لازم برای یادگیری برای ادامه این مسیر یاد بگیرید چگونه وب سایت های با کیفیت با استفاده از HTML و CSS طراحی کنید یاد بگیرید که چگونه با React رابط های کاربری جلویی شگفت انگیز ایجاد کنید! شما اصول اساسی جاوا اسکریپت برای ساختن برنامه های کاربردی مدرن و پیچیده را یاد خواهید گرفت. تمام آنچه را که برای تبدیل شدن به یک توسعه دهنده جاوا اسکریپت با تجربه، مطمئن و به روز نیاز دارید، یاد خواهید گرفت. برای یادگیری بدون نیاز به تجربه برنامه نویسی دانش اولیه در مورد اینترنت و ترکیب وب سایت ها توصیه می شود اما لازم نیست یک مرورگر خوب و اتصال اینترنتی پایدار برای آزمایش وب سایت هایی که می سازید مورد نیاز است یک ویرایشگر کد مدرن مانند Visual Studio Code، Atom یا Sublime Text. همچنین برای نوشتن و قالب بندی کد مفید است

آیا علاقه مند به یادگیری مهارت ها و ابزارهای مورد نیاز برای ایجاد وب سایت های مدرن، تعاملی و واکنش گرا هستید؟ Bootcamp توسعه دهندگان وب Front-End: HTML، CSS، JS React دوره عالی برای شماست! در این Bootcamp جامع، HTML، CSS، جاوا اسکریپت، و React - بلوک های سازنده وب - را یاد خواهید گرفت و تجربه عملی در ایجاد صفحات وب پویا و جذاب از ابتدا کسب خواهید کرد.

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


در اینجا فقط چند مورد از مزایای ثبت نام در The Front-End Web Developer Bootcamp آورده شده است: HTML، CSS، JS React:


  1. مهارت‌های مورد نیاز را به دست آورید: توسعه وب فرانت‌اند یک مهارت در بازار کار امروزی است. با تسلط بر HTML، CSS، جاوا اسکریپت و React، موقعیت خوبی برای یافتن شغل در زمینه‌ای به سرعت در حال رشد خواهید داشت. با توجه به اداره آمار کار، پیش‌بینی می‌شود که استخدام توسعه‌دهندگان وب از سال 2020 تا 2030 به میزان 8 درصد رشد کند، که بسیار سریع‌تر از میانگین برای همه مشاغل است.

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

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

  4. یک نمونه کار بسازید: همانطور که پروژه ها را در طول دوره تکمیل می کنید، نمونه کارها را می سازید که مهارت های شما را به کارفرمایان یا مشتریان بالقوه نشان می دهد. این نمونه کارها توانایی شما را در ایجاد وب‌سایت‌های واکنش‌گرا و جذاب نشان می‌دهد که در بازار کار امروز ضروری است.

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

منتظر چه هستید؟ امروز به یک توسعه دهنده وب 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

  • مواد درسی 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

نمایش نظرات

آموزش Bootcamp توسعه‌دهنده وب Front-End: HTML، CSS، JS و React
جزییات دوره
11 hours
158
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
13,257
4.3 از 5
دارد
دارد
دارد
Meta Brains
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Meta Brains Meta Brains

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