آموزش Bootstrap & React Bootcamp را با پروژه‌های عملی کامل کنید

Complete Bootstrap & React Bootcamp with Hands-On Projects

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: آموزش ساخت برنامه های وب واکنشگرا و تعاملی با استفاده از Bootstrap و React.

آنچه یاد خواهید گرفت

  • آموزش سیستم Bootstrap Grid
  • کار با Bootstrap Three Column Layouts
    را یاد بگیرید
  • آموزش ساخت اجزای ناوبری بوت استرپ
  • آموزش سبک دادن به تصاویر با استفاده از Bootstrap
  • ساخت منوهای پیشرفته و پاسخگو با استفاده از Bootstrap
  • با استفاده از تم های بوت استرپ طرح بندی های خیره کننده بسازید
  • اصول React را بیاموزید
  • کار با JSX و اجزای عملکردی در React
  • ساخت ماشین حساب در React
  • آموزش React State Hook
  • Debug React Projects
  • یاد بگیرید که به اجزای React Style دهید
  • ساخت یک کلون Connect-4 تک نفره و چند نفره با هوش مصنوعی
  • رویدادهای چرخه زندگی React را بیاموزید
  • آموزش React Rendering Conditional
  • ساخت یک سایت تجارت الکترونیک کاملاً سفارشی در React
  • مبانی سرور JSON را بیاموزید
  • کار با روتر React

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

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

در بخش پایانی دوره، با ساختن یک صفحه کامل، قدرت React را بیشتر آزاد می‌کنیم. سایت تجارت الکترونیک با دسته بندی های مختلف محصول، ویترین محصول، ویژگی سبد خرید و موارد دیگر. در اینجا، تعدادی از مفاهیم جدید یکپارچه از جمله: سرور JSON، Fetch API و نصب روتر React را معرفی می‌کنیم. این بلوک‌های ساختمانی ضروری برای رندر کردن دسته‌های محصول، استایل فهرست محصول و پیکربندی صفحه جزئیات محصول استفاده می‌شوند. از آنجا به کامپوننت‌های سبک‌دهی‌شده می‌پردازیم، طرح‌بندی فروشگاه را بازسازی می‌کنیم، و مفهوم «زمینه» را در React بررسی می‌کنیم. در مراحل پایانی پروژه، دانشجویان سبد خرید و ویژگی پرداخت را پیکربندی خواهند کرد. ما همچنین یک ویژگی جستجوی محصول را پیاده‌سازی می‌کنیم و به دنبال آن تمرین‌های عمیقی درباره اعتبارسنجی فرم‌های ورودی در React انجام می‌دهیم.

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


با این گفته، امیدواریم شما هم مانند ما در مورد این دوره هیجان زده باشید، اگر چنین است - دکمه ثبت نام را فشار دهید و بیایید شروع کنیم.


این دوره برای چه کسانی است:

  • دانشجویان علاقه مند به ساخت وب سایت های واکنش گرا برای موبایل با استفاده از Bootstrap
  • دانشجویان علاقه مند به توسعه وب جلویی
  • دانشجویان علاقه مند به یادگیری React
  • دانش آموزان علاقه مند به ساخت اجزای UI با استفاده از کتابخانه React

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

چارچوب بوت استرپ The Bootstrap Framework

  • مقدمه ای بر بوت استرپ Introduction to Bootstrap

  • تعبیه بوت استرپ Embedding Bootstrap

  • ساختار صفحه پایه بوت استرپ Bootstrap Basic Page Structure

  • سیستم بوت استرپ گرید Bootstrap Grid System

  • طرح بندی سه ستونی بوت استرپ Bootstrap Three Column Layouts

  • تایپوگرافی بوت استرپ Bootstrap Typography

  • جداول بوت استرپ Bootstrap Tables

  • تصاویر استایل بوت استرپ Bootstrap Styling Images

  • بوت استرپ Jumbotron Bootstrap Jumbotron

  • بوت استرپ ولز Bootstrap Wells

  • هشدارهای بوت استرپ Bootstrap Alerts

  • دکمه های بوت استرپ Bootstrap Buttons

  • گروه های دکمه بوت استرپ Bootstrap Button Groups

  • Bootstrap Justified Button Groups Bootstrap Justified Button Groups

  • گلیفیکون های بوت استرپ Bootstrap Glyphicons

  • نشان ها و برچسب های بوت استرپ Bootstrap Badges and Labels

  • نوارهای پیشرفت بوت استرپ Bootstrap Progress Bars

  • صفحه بندی بوت استرپ Bootstrap Pagination

  • صفحه بندی پیجر بوت استرپ Bootstrap Pager Pagination

  • گروه های لیست بوت استرپ Bootstrap List Groups

  • پانل های بوت استرپ Bootstrap Panels

  • منوهای کشویی بوت استرپ Bootstrap Dropdown Menus

  • Bootstrap Collapsibles Bootstrap Collapsibles

  • پانل فروپاشی بوت استرپ Bootstrap Collapse Panel

  • Bootstrap Collapse List Group Bootstrap Collapse List Group

  • بوت استرپ آکاردئون Bootstrap Accordion

  • منوهای تب بوت استرپ Bootstrap Tab Menus

  • منوهای قرص بوت استرپ Bootstrap Pill Menus

  • تب ها و قرص های پویا بوت استرپ Bootstrap Dynamic Tabs and Pills

  • نوار ناوبری بوت استرپ Bootstrap Navigation Bar

  • نوار ناوبری جمع شونده بوت استرپ Bootstrap Collapsible Navigation Bar

  • فرم های بوت استرپ - عمودی و درون خطی Bootstrap Forms - Vertical and Inline

  • ورودی های بوت استرپ Bootstrap Inputs

  • حالت های کنترل فرم بوت استرپ Bootstrap Form Control States

  • اندازه ورودی بوت استرپ Bootstrap Input Sizing

  • بوت استرپ چرخ فلک Bootstrap Carousel

  • Bootstrap Modal Bootstrap Modal

  • راهنمای ابزار بوت استرپ Bootstrap Tooltip

  • بوت استرپ پاپوور Bootstrap Popover

  • Bootstrap Scrollspy Bootstrap Scrollspy

  • پروژه بوت استرپ - مقدمه تم Bootstrap Project - Themes Intro

  • پروژه بوت استرپ - نمای کلی فایل Bootstrap Project - File Overview

  • پروژه بوت استرپ - نمای کلی اسکریپت Bootstrap Project - Script Overview

  • پروژه بوت استرپ - بررسی اجمالی اسکریپت ادامه Bootstrap Project - Script Overview Cont.

واکنش نشان دهید React

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

  • React چیست؟ What is React?

React Project: ساخت ماشین حساب React Project: Build a Calculator

  • بررسی اجمالی پروژه 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

React Project: Connect-4 Clone React Project: Connect-4 Clone

  • بررسی اجمالی پروژه Project Overview

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

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

  • بررسی اجمالی پروژه Project Overview

  • بررسی اجمالی پروژه Project Overview

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

  • خلاصه ی پروژه Project Summary

نمایش نظرات

Udemy (یودمی)

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

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

آموزش Bootstrap & React Bootcamp را با پروژه‌های عملی کامل کنید
جزییات دوره
131
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
6,018
4.8 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

YouAccel Training YouAccel Training

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