دوره جامع آموزش برنامه‌نویسی فرانت‌اند - HTML, CSS, JS & React - آخرین آپدیت

دانلود Front-End Web Developer Bootcamp - HTML, CSS, JS, & React

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره: این دوره دارای قابلیت Coursera Coach است! روشی هوشمندانه برای یادگیری با گفتگوهای تعاملی و بی‌درنگ که به شما کمک می‌کند دانش خود را بسنجید، فرضیات را به چالش بکشید و با پیشرفت در دوره، درک خود را عمیق‌تر کنید. در این بوت‌کمپ جامع، شما به صورت عمیق در توسعه وب فرانت‌اند با استفاده از HTML، CSS، JavaScript و React غرق خواهید شد. با شروع از مبانی HTML5، با یادگیری تگ‌ها، ویژگی‌ها (Attributes) و ساختار فایل‌ها، پایه‌ای قوی خواهید ساخت. سپس به سراغ CSS3 خواهید رفت، جایی که در تکنیک‌های استایل‌دهی، طراحی واکنش‌گرا (Responsive Design) و ویژگی‌های مدرن CSS تسلط می‌یابید. پس از آن، جاوااسکریپت را کاوش خواهید کرد و در کار با متغیرها، عملگرها، حلقه‌ها و توابع مهارت کسب می‌کنید. مرحله نهایی دوره شما را با React.js آشنا می‌کند، جایی که توسعه مبتنی بر کامپوننت، JSX، مدیریت وضعیت (State Management) و هوک‌ها (Hooks) را می‌آموزید که در نهایت با پروژه‌های عملی مانند ساخت اپلیکیشن ماشین حساب و کار با یک API عمومی تکمیل می‌شود. این دوره به صورت سیستماتیک جریان دارد؛ از مفاهیم اصلی HTML و CSS شروع شده و سپس به سمت برنامه‌نویسی پیچیده‌تر جاوااسکریپت حرکت می‌کند تا ابزارها و دانش عملی مورد نیاز برای ساخت وب‌سایت‌های پویا و واکنش‌گرا را به شما ارائه دهد. این دوره برای مبتدیانی که می‌خواهند وارد دنیای توسعه وب شوند، عالی است. اگر در برنامه‌نویسی تازه‌کار هستید و می‌خواهید تجربه عملی در ساخت وب‌سایت‌ها و اپلیکیشن‌ها کسب کنید، این دوره برای شماست. هیچ پیش‌نیازی به جز کنجکاوی برای یادگیری و اشتیاق برای شروع کار وجود ندارد. در پایان دوره، شما قادر خواهید بود وب‌سایت‌ها و اپلیکیشن‌های کاملاً کاربردی را با استفاده از HTML5، CSS3، JavaScript و React.js بسازید، تکنیک‌های طراحی واکنش‌گرا را پیاده‌سازی کنید و برای نمایش محتوای پویا با APIها تعامل داشته باشید.

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

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

  • مقدمه Introduction

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

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

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

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

  • دانلود Visual Studio Code 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

  • تگ‌های Heading در HTML Heading Tags in HTML

  • تگ‌های نقل‌قول و استناد در HTML5 HTML5 Quotation and Citation Tags

  • کامنت کردن کد در HTML5 Commenting Out Code in HTML5

  • ویژگی‌ها (Attributes) در HTML5 HTML5 Attributes

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

کاوش در تگ‌های HTML5 Exploring HTML5 Tags

  • تگ‌های Anchor چیستند؟ What Are Anchor Tags?

  • تگ‌های Image چیستند؟ What Are Image Tags?

  • تگ‌های Paragraph چیستند؟ What Are Paragraph Tags?

  • تگ‌های Break چیستند؟ What Are Break Tags?

  • تگ‌های Table چیستند؟ What Are Table Tags?

  • تگ‌های List List Tags

  • تگ Video Video Tag

  • تگ Audio Audio Tag

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

  • تگ‌های Form Form Tags

  • انواع Input Input Types

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

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

  • ورودی‌های الزامی (Required) Required Inputs

المان‌های Block و Inline Block and Inline Elements

  • مقدمه Introduction

  • بررسی المان‌های Block و Inline 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) Background

  • حاشیه‌ها (Borders) Borders

  • Outline Outline

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

  • حاشیه بیرونی و درونی (Margin و Padding) Margin and Padding

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

  • تراز متن Text Alignment

  • تزئین متن Text Decoration

  • تغییر شکل متن Text Transform

  • فاصله‌گذاری متن Text Spacing

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

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

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

  • Display Display

  • موقعیت‌ها (Positions) Positions

  • Z Index Z-Index

  • Overflow Overflow

  • Float Float

  • مدل DOM DOM Model

  • Pseudo Classes بخش اول Pseudo-Classes Part 1

  • Pseudo Classes بخش دوم Pseudo-Classes part 2

  • Pseudo Elements Pseudo-Elements

قابلیت‌های اضافی در CSS3 Extra Features in CSS3

  • شفافیت (Opacity) و Important Opacity and Important

  • گوشه گرد (Border Radius) Border-Radius

  • سایه جعبه (Box Shadow) Box Shadow

طراحی واکنش‌گرا با CSS3 Responsive Design with CSS3

  • سیستم Grid Grid System

  • Flexbox Flexbox

  • Media Queries Media Queries

پروژه کوچک Mini Project

  • پروژه کوچک Mini Project

مقدمه‌ای بر JavaScript Introduction to JavaScript

  • مقدمه و تاریخچه JavaScript Introduction and History of JavaScript

  • سینتکس JavaScript و نمای کلی Syntax of JavaScript and Overview

  • پیاده‌سازی JavaScript JavaScript Implementation

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

متغیرها Variables

  • متغیر Var در JavaScript Var in JavaScript

  • متغیرهای Global و Local در JavaScript Global and Local Var in JavaScript

  • استفاده پیشرفته از console.log Advanced console.log

دستورات در JavaScript Statements in JavaScript

  • دستور If If Statement

  • دستور If Else If Else Statement

  • دستور شرطی Ternary Condition Ternary Statement

  • دستور Switch Switch Statement

  • دستور If Else If If Else If Statement

  • دستورات Break و Continue Break and Continue Statement

  • انواع داده‌ها (Data Types) Data Types

عملگرها در JavaScript Operators in JavaScript

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

  • عملگر انتساب Assignment Operator

  • عملگر مقایسه‌ای Comparison Operator

جعبه‌های پاپ‌آپ در JavaScript Popup Boxes in JavaScript

  • جعبه‌های Alert Alert Boxes

  • جعبه Confirm Confirm Box

  • جعبه Prompt Prompt Box

  • توابع (Functions) Functions

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

  • توابع با خروجی (Return) Function with Return

رویدادها در JavaScript Events in JavaScript

  • رویدادها در JavaScript Events in JavaScript

حلقه‌ها در JavaScript Loops in JavaScript

  • حلقه While While Loop

  • حلقه Do While Do While Loop

  • حلقه For For Loop

  • حلقه‌های تو در تو Nested Loop

آرایه‌ها در JavaScript Arrays in JavaScript

  • آرایه‌ها Arrays

  • اصلاح و حذف آرایه‌ها Modify and Delete Arrays

  • متدهای Sort و Reverse Sort and Reverse Methods

  • متدهای Pop و Push Pop and Push Methods

  • متدهای Shift و Unshift Shift and Unshift Methods

  • متدهای Concat و Join Concat and Join Methods

  • متدهای Slice و Splice Slice and Splice Methods

  • متد isArray The isArray Method

  • متدهای Indexof و lastindex Indexof and lastindex Methods

  • متد forEach The forEach Method

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

  • متد Include Include Method

  • متدهای Some و Every Some and Every Methods

  • متدهای Find و findIndex Find and findIndex Methods

  • متد Filter Filter Method

اشیاء (Objects) و متدهای آن‌ها Objects and Their Methods

  • اشیاء (Objects) Objects

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

  • حلقه For In For-In Loop

رشته‌ها (String) و متدهای آن String and Its Methods

  • متدهای رشته (String) بخش اول String Methods - Part 1

  • متدهای رشته (String) بخش دوم String Methods - Part 2

  • متدهای رشته (String) بخش سوم String Methods - Part 3

متدهای عددی در JavaScript JavaScript Number Methods

  • متدهای اعداد Number Methods

  • متد Math بخش اول Math Method - Part 1

  • متد Math بخش دوم Math Method - Part 2

  • متد Date Date Method

مدل DOM DOM Model

  • مدل DOM DOM Model

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

  • متدهای Get در DOM DOM Get Methods

  • استایل‌دهی در DOM DOM Styling

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

  • useCapture useCapture

  • متد classList classList Method

  • گره‌های والد (Parent Nodes) Parent Nodes

  • گره‌های فرزند (Children Nodes) Children Nodes

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

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

  • ایجاد Element Text Node Create Element Text Node

  • Append Child و Insert Before Append Child and Insert Before

  • Insert Adjacent Element و Insert Adjacent 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 در 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

  • هوک‌ها در React.JS Hooks in Reacts.JS

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

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

  • رندرینگ شرطی Conditional Rendering

  • هوک useEffect در 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

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

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

استفاده از API پوکمون Using the Pokémon API

  • ساخت یک Restful API در React.JS بخش اول Building a Restful API in React.JS - Part 1

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

  • ساخت یک Restful API در React.JS بخش سوم 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

جمع‌بندی Conclusion

  • جمع‌بندی Conclusion

نمایش نظرات

دوره جامع آموزش برنامه‌نویسی فرانت‌اند - HTML, CSS, JS & React
جزییات دوره
20h 17m
156
(آخرین آپدیت)
132
- از 5
دارد
دارد
دارد
Chris Croft
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Chris Croft Chris Croft

مربی مدیریت، سخنران، نویسنده