آموزش جامع توسعه وب – Bootcamp برنامهنویس وب 2026
The Web Developer Bootcamp 2026یکی از پرفروشترین و محبوبترین دورههای آموزش برنامهنویسی وب در یودمی است که توسط مدرس معروف Colt Steele تدریس میشود. این دوره برای مبتدیها طراحی شده ولی بهصورت گامبهگام و پروژهمحور، مهارتهای لازم برای تبدیلشدن به یک توسعهدهنده فولاستک را آموزش میدهد.
در این دوره، با تمام تکنولوژیهای موردنیاز برای توسعه وب از صفر آشنا میشوید: از طراحی صفحات با HTML و CSS گرفته تا ساخت اپلیکیشنهای پویا با JavaScript، کار با پایگاه داده MongoDB، ساخت API با Express و پیادهسازی احراز هویت، همه و همه در یک دوره واحد آموزش داده میشوند.
مدرس با سبک آموزش روان، مثالهای کاربردی، تمرینهای فراوان و پروژههای واقعی این اطمینان را میدهد که شما نهتنها مباحث را حفظ بلکه در عمل نیز بهخوبی پیادهسازی کنید.
سرفصل های دوره
Welcome To The Course!
Curriculum Walkthrough
When Was The Course Last Updated
Will I Get A Job
Accessing Course Code & Slides
Tips On The Interactive Coding Exercises
What Matters In This Section
The Internet in 5 Minutes
Intro to the Web
The RequestResponse Cycle
Front-End and Back-End
What do HTMLCSSJS do
Setting Up Our Developer Environment
What Matters In This Section
Introduction to HTML
Our Very First HTML Page
TIP Mozilla Developer Network
Paragraph Elements
Heading Elements
Introduction to the Chrome Inspector
HTML Boilerplate
VSCode Tip Auto-format
List Elements
Anchor Tags
Images
Comments
What Matters In This Section
What Exactly Is HTML5
Block vs. Inline Elements - Divs and Spans
An Odd Assortment of Elements HR, BR, Sup, & Sub
Entity Codes
Intro to Semantic Markup
Playing With Semantic Elements
Screen Reader Demonstration
VSCode Tip Emmet
What Matters In This Section
Unit Goals
Introducing HTML Tables
Tables TR, TD, and TH Elements
Tables Thead, Tbody, and Tfoot Elements
Tables Colspan & Rowspan
The Form Element
Common Input Types
The All-Important Label
HTML Buttons
The Name Attribute
Hijacking Google & Reddit's Search
Radio Buttons, Checkboxes, & Selects
Range & Text Area
HTML5 Form Validations
Creating A Marathon Registration Form Intro
Creating A Marathon Registration Form Solution
What Matters In This Section
What is CSS
CSS is Huge, Don't Panic!
Including Styles Correctly
Color & Background-Color Properties
Colors Systems RGB & Named Colors
Colors Systems Hexadecimal
A Reminder On Semicolons & CSS
Common Text Properties
Font Size Basics With Pixels
The Font Family Property
What Matters In This Section
Universal & Element Selectors
The ID Selector
The Class Selector
The Descendant Selector
The Adjacent & Direct-Descendant Selectors
The Attribute Selector
Pseudo Classes
Pseudo Elements
The CSS Cascade
WTF is Specificity
TIP Chrome Dev Tools & CSS
Inline Styles & Important
CSS Inheritance
What Matters In This Section
Box Model Width & Height
Box Model Border & Border-Radius
Box Model Padding
Box Model Padding
The Display Property
CSS Units Revisited
CSS Units ems
CSS Units rems
What Matters In This Section
What Matters In This Section
The Position Property.
CSS Transitions (yay!)
The Power of CSS Transforms
Fancy Button Hover Effect CodeAlong
The Truth About Background
Google Fonts is Amazing
Photo Blog CodeAlong Pt. 1
Photo Blog CodeAlong Pt. 2
What Matters In This Section
What on Earth Is Flexbox
Flex-Direction
Justify-Content
Flex-Wrap
Align-Items
Align-Content & Align-Self
Flex-Basis, Grow, & Shrink
Flex Shorthand
Responsive Design & Media Queries Intro
The Power of Media Queries
Building a Responsive Nav
Pricing Panel CodeAlong Pt. 1
Pricing Panel CodeAlong Pt. 2
Pricing Panel CodeAlong Pt. 3
Pricing Panel CodeAlong Pt. 4
Pricing Panel CodeAlong Pt. 5
Pricing Panel CodeAlong Pt. 6
What Matters In This Section
WTF Is Bootstrap
Including Bootstrap & Containers
Bootstrap Buttons
Bootstrap Typography & Utilities
Badges, Alerts, & Button Groups
Intro to the Bootstrap Grid
Responsive Bootstrap Grids
Useful Grid Utilities
Bootstrap & Forms
Bootstrap Navbars
Bootstrap Icons!
Other Bootstrap Utilities
A Mixed Bag of Other Bootstrap Stuff
Watch This First! (it's short)
Museum of Candy Project Part 1
Museum of Candy Project Part 2
Museum of Candy Project Part 3
Museum of Candy Project Part 4
Museum of Candy Project Part 5
What Matters In This Section
Why JavaScript is Awesome
Primitives & The Console
JavaScript Numbers
WTF is NaN
Quick Numbers Quiz
Variables & Let
Updating Variables
Increment Operator Explanation i++ vs ++i
Const & Var
Booleans
Variable Naming and Conventions
What Matters In This Section
Introducing Strings
Indices & Length
String Methods
String Methods With Arguments
String Template Literals -SUPER USEFUL
Undefined & Null
Random Numbers & The Math Object
What Matters In This Section
Decision Making With Code
Comparison Operators
Equality Triple Vs. Double Equals
Console, Alert, & Prompt
Running JavaScript From A Script!
If Statements
Else-If
Else
Nesting Conditionals
Truth-y & False-y Values
Logical AND
Logical OR
Logical NOT
The Switch Statement Is...A Lot
What Matters In This Section
Introducing Arrays
Array Random Access
Push & Pop
Shift & Unshift
Concat, indexOf, includes & reverse
Slice & Splice
Reference Types & Equality Testing
Arrays + Const
Multi-Dimensional Arrays
What Matters In This Section
Introducing Object Literals
Creating Object Literals
Accessing Data Out Of Objects
Modifying Objects
Nesting Arrays & Objects
آنچه در این بخش اهمیت دارد
مقدمهای بر For Loops
مثالهای بیشتر برای حلقههای for
خطرات حلقههای بینهایت (
پیمایش آرایهها با حلقه
حلقههای تودرتو
حلقه دیگر: حلقه while
کلمه کلیدی Break
نوشتن یک بازی حدس زدن
شرح بازی حدس و رفع اشکال
حلقه For...Of دوستداشتنی
پیمایش روی اشیاء
مقدمه پروژه لیست کارها
پروژه لیست کارها کد-آلون
چه چیزی در این بخش اهمیت دارد
مقدمهای بر توابع
اولین تابع ما
مقدمهای بر آرگومانها
توابع با آرگومانهای چندگانه
کلمه کلیدی Return
چه چیزی در این بخش اهمیت دارد
Function Scope
محدوده بلوکی
محدوده لغوی
Function Expressions
توابع مرتبه بالا
توابع بازگرداننده
تعریف متدها
کلمه کلیدی مرموز 'this
استفاده از TryCatch
آنچه در این بخش اهمیت دارد
این بخش درباره چیست!
متد forEach
متد map
مقدمهای بر Arrow Functions
Arrow Function بازگشت ضمنی
جمعبندی Arrow Functions
setTimeout و setInterval
متد filter
Some و Every متدها
متد Reduce بدنام
توابع فلش و 'this
چه چیزی در این بخش اهمیت دارد
پارامترهای پیشفرض
انتشار در فراخوانی تابع
گسترش با Array Literals
گسترش با اشیاء
Rest Params
جداسازی آرایهها
جداسازی اشیاء
جداسازی پارامترها
چه چیزی در این بخش اهمیت دارد
آشنایی با DOM
شیء سند
getElementById
getElementsByTagName و className
querySelector و querySelectorAll
innerHTML، textContent، و innerText
ویژگیها
تغییر استایلها
ClassList
پیمایش والدفرزندهمسایه
Append و AppendChild
removeChild و remove
دموی اسپریتهای پوکمون
چه چیزی در این بخش اهمیت دارد
مقدمهای بر رویدادها
رویدادهای درونخطی
ویژگی Onclick
addEventListener
تمرین رنگ تصادفی
رویدادها و کلمه کلیدی This
رویدادهای صفحهکلید و اشیاء رویداد
رویدادهای فرم و PreventDefault
تمرین با رویدادهای فرم و PreventDefault
رویدادهای فرم و PreventDefault
رویدادهای ورودی و تغییر
رویداد حبابی
تفویض رویداد
نگهدارنده امتیاز بخش ۱
نگهدارنده امتیاز بخش ۲
نگهدارنده امتیاز بخش ۳ با بولما
نگهدارنده امتیاز بخش ۴ بازسازی
آنچه در این بخش اهمیت دارد
پشته فراخوانی
WebAPIs و Single Threaded
Callback Hell (
دموی fakeRequest با استفاده از Callbacks
دموی fakeRequest با استفاده از Promises
جادوی Promises
ساختن Promises خودمان
کلمه کلیدی Async
کلمه کلیدی Await
مدیریت خطاها در توابع ناهمگام
چه چیزی در این بخش اهمیت دارد
مقدمهای بر AJAX
مقدمهای بر APIها
JSON چیست
استفاده از Hoppscotch (یا Postman)
HTTP Verbs
HTTP Status Codes
فهمیدن Query Strings
سربرگهای HTTP
انجام XHRها
استفاده از Fetch API
معرفی Axios
تنظیم هدرها با Axios
اپلیکیشن جستجوی برنامه تلویزیونی
آنچه در این بخش اهمیت دارد
پروتوتایپها واقعاً چه هستند؟
مقدمهای بر برنامهنویسی شیءگرا
توابع کارخانهای
توابع سازنده
کلاسهای جاوا اسکریپت
تمرین بیشتر کلاسها
کلیدواژههای Extends و Super
آنچه در این بخش اهمیت دارد
نمای کلی بکاند
یک سخنرانی انگیزشی درباره ترمینال
چرا باید دستورات ترمینال را بدانیم
اصول اولیه LS و PWD
تغییر دایرکتوریها
مسیرهای نسبی در مقابل مسیرهای مطلق
ساختن دایرکتوریها
راهنمای دستورات و پرچمها
دستور لمس
حذف فایلها و پوشهها
آنچه در این بخش اهمیت دارد
معرفی Node JS
نود برای چه کاری استفاده میشود
نصب نود
Node REPL
اجرای فایلهای Node
پردازش و آرگومانها
دوره فشرده ماژول سیستم فایل
آنچه در این بخش اهمیت دارد
کار با module.exports
نیاز به یک پوشه
معرفی NPM
نصب پکیجها - جوک و رنگینکمان
افزودن پکیجهای سراسری
فایل package.json، مهمترین فایل.
نصب تمام وابستگیهای یک پروژه
چالش حدس زبان
آنچه در این بخش اهمیت دارد
معرفی اکسپرس
اولین اپلیکیشن اکسپرس ما
اشیاء درخواست و پاسخ
مبانی Express Routing
پارامترهای مسیر اکسپرس
کار با رشتههای کوئری
راهاندازی مجدد خودکار با Nodemon
آنچه در این بخش اهمیت دارد
تمپلیتینگ چیست؟
پیکربندی اکسپرس برای EJS
تنظیم دایرکتوری ویوها
سینتکس درونیابی EJS
ارسال داده به قالبها
دموی قالب سابردیت
شرطها در EJS
حلقهها در EJS
نمایش پیچیدهتر سابرِدیت
سرو کردن فایلهای استاتیک در اکسپرس
بوت استرپ + اکسپرس
EJS و Partial ها
آنچه در این بخش اهمیت دارد
درخواستهای Get در مقابل Post
تعریف مسیرهای Express Post
تجزیه بدنه درخواست
مقدمهای بر REST
مروری بر کامنتهای RESTful
فهرست نظرات RESTful
کامنتهای RESTful جدید
هدایتهای اکسپرس
نمایش نظرات RESTful
بسته UUID
بهروزرسانی کامنتهای RESTful
بازنویسی متد اکسپرس
حذف کامنتهای RESTful
آنچه در این بخش اهمیت دارد
مقدمهای بر پایگاههای داده
پایگاههای داده SQL در مقابل NoSQL
چرا مونگو را یاد میگیریم
نصب مونگو در مک او اس
بی.اس.او.ان چیست؟
درج با مونگو
یافتن با مونگو
بهروزرسانی با مونگو
حذف با مانگو
عملگرهای اضافی مونگو
آنچه در این بخش اهمیت دارد
مانگوس چیست
اتصال Mongoose به Mongo
اولین مدل مونگوس ما
درج چندین مورد
یافتن با مانگوس
بهروزرسانی با مانگوس
حذف با مانگوس!
اعتبارسنجیهای اسکیمای مانگوس
محدودیتهای اضافی اسکیمای
اعتبارسنجی بهروزرسانیهای Mongoose
خطاهای اعتبارسنجی Mongoose
متدهای نمونه مدل
افزودن متدهای استاتیک مدل
Mongoose Virtuals
تعریف Mongoose Middleware
آنچه در این بخش اهمیت دارد
راهاندازی اولیه Express + Mongoose
ساخت مدل ما
فهرست محصولات
جزئیات محصول
ساخت محصولات
بهروزرسانی محصولات
مماس بر انتخابگر دسته
حذف محصولات
فیلتر کردن بر اساس دسته بندی
معرفی YelpCamp، پروژه عظیم ما
چگونه به کد YelpCamp دسترسی پیدا کنیم
ساخت اپلیکیشن پایه اکسپرس
اصول مدل کمپینگ
کمپهای بذرپاشی
فهرست اردوگاهها
نمایش کمپینگ
کمپینگ جدید و ایجاد
ویرایش و بهروزرسانی کمپ
حذف کمپ
آنچه در این بخش اهمیت دارد
مقدمهای بر Express Middleware
استفاده از مورگان - میانافزار لاگر
تعریف میانافزار دلخواه خودمان
تمرین بیشتر میدلور
راهاندازی مسیر 404
دموی پسورد میدلور (احراز هویت واقعی نیست)
محافظت از مسیرهای خاص
ابزار جدید EJS برای طرحبندیها
بوت استرپ ۵! بویلرپلیت
نوار ناوبری جزئی
فوتر جزئی
افزودن تصاویر
استایلدهی به فهرست کمپگراندها
استایل دادن به فرم جدید
ویرایش فرم استایل
صفحه نمایش استایل
آنچه در این بخش اهمیت دارد
مدیریت خطای داخلی اکسپرس
تعریف کنترلکنندههای خطای سفارشی
کلاس خطای سفارشی ما
مدیریت خطاهای ناهمگام
مدیریت خطاهای ناهمگام بیشتر!
تعریف یک ابزار ناهمگام
تشخیص خطاهای مانگوس
مقصد بعدی در YelpCamp کجاست
اعتبارسنجی فرم سمت کلاینت
مدیریت خطای پایه
تعریف کلاس ExpressError
خطاهای بیشتر
تعریف قالب خطا
اعتبارسنجی طرح JOI
میانافزار اعتبارسنجی JOI
آنچه در این بخش اهمیت دارد
مقدمهای بر روابط در MongoDB
مروری بر روابط SQL
یک به چند
یکی به چند
Mongoose Populate
از یک تا بیلیونها
طراحی اسکیمای مونگو
آنچه در این بخش اهمیت دارد
تعریف مدلهای مزرعه و محصول ما
ایجاد مزارع جدید
صفحه نمایش مزرعه
تولید محصولات برای یک مزرعه
جزئیات نهایی
حذف میانافزار مانگوس
تعریف مدل بازبینی
اضافه کردن فرم بازبینی
ایجاد نقد و بررسی
اعتبارسنجی نظرات
نمایش نقد و بررسیها
بازبینی استایلها
حذف نظرات
میانافزار حذف کمپگراند
آنچه در این بخش اهمیت دارد
معرفی اکسپرس روتر
اکسپرس روتر و میدلور
معرفی کوکیها
ارسال کوکیها
میانافزار پارسکننده کوکی
امضای کوکیها
امضای اختیاری HMAC
آنچه در این بخش اهمیت دارد
مقدمهای بر سشنها
اکسپرس سشن
جلسه اکسپرس بیشتر
مقدمهای بر فلش
Res.locals و فلش
شکستن مسیرهای کمپینگ
بررسی مسیرهای خروجی
ارائه داراییهای ایستا
پیکربندی نشست
راهاندازی فلش
فلش موفقیت جزئی
خطاهای فلش جزئی
آنچه در این بخش اهمیت دارد
احراز هویت در مقابل مجوز
چگونه رمزهای عبور را (نباید) ذخیره کرد
توابع هش رمزنگاری
نمکهای رمز عبور
معرفی Bcrypt
راهاندازی دمو احراز هویت
دموی احراز هویت ثبت نام
دمو احراز هویت ورود
دموی احراز هویت، ماندن در حساب کاربری با استفاده از سشن
دمو احراز هویت خروج
دمو احراز هویت، میانافزار نیاز به ورود
بازسازی دمو احراز هویت به متدهای مدل
مقدمهای بر Passport
ساخت مدل کاربر ما
پیکربندی پاسپورت
فرم ثبت نام
منطق ثبت مسیر
مسیرهای ورود
isLoggedIn Middleware
اضافه کردن خروج
تابع کمکی کاربر فعلی
رفع مشکل مسیر ثبت نام
بازگشت به رفتار
اضافه کردن یک نویسنده به کمپگراند
نمایش و پنهان کردن ویرایش/حذف
مجوزهای کمپینگ
میانافزار احراز هویت
بررسی مجوزها
مجوزهای بیشتر برای بازبینی
بازسازی کنترلر کمپگراندز
اضافه کردن کنترلر Reviews
یک روش شیک برای بازسازی مسیرها
نمایش امتیاز ستاره
فرم امتیازدهی ستارهای
مقدمهای بر فرآیند آپلود تصویر
میانافزار Multer
ثبت نام در کلودینری
متغیرهای محیطی با dotenv
آپلود در کلودینری: مبانی
ذخیره لینک تصاویر آپلود شده در مونگو
نمایش تصاویر در یک اسلایدشو
اصلاح بذرهایمان
اضافه کردن آپلود به صفحه ویرایش
سفارشیسازی ورودی فایل
یک هشدار!
حذف فرم تصاویر
حذف تصاویر در بکاند
اضافه کردن یک ویژگی مجازی تامنیل
ثبتنام برای مپباکس
کدگذاری جغرافیایی مکانهای ما
کار با GeoJSON
نمایش نقشه
مرکز کردن نقشه روی یک کمپینگ
رفع باگ بذرهایمان
سفارشیسازی پاپآپ نقشه
معرفی نقشه کلاستر ما
اضافه کردن نقشه خوشه زلزله
پایگاه داده ما را دوباره پر میکنیم (دوباره)
کمپهای پایهی خوشهبندی
تنظیم دقیق کد خوشهبندی
تغییر اندازه و رنگ کلاستر
اضافه کردن پاپآپهای سفارشی
استایل دادن به صفحه اصلی
استایلدهی اضافی صفحه اصلی
استایل دادن به فرم ورود
استایلدهی فرم ثبتنام
کمپینگ در طبیعت
حذف استایلهای نقشه درونخطی
افزودن کنترلهای نقشه
تزریق مانگو
اسکریپتنویسی بین سایتی (XSS)
پاکسازی HTML با JOI
تغییرات جزئی در SessionCookies
پنهان کردن خطاها
استفاده از Helmet
سیاست امنیتی محتوا سرگرم کننده
راهاندازی مونگو اطلس
استفاده از مانگو برای ذخیره سشن ما
راهاندازی Heroku
پوش کردن در Heroku
رفع خطاهای Heroku
تنظیم متغیرهای محیطی Heroku
نحوه کار محتوای ریاکت
معرفی ریاکت
راهاندازی سندباکس کد
مبانی JSX
ساختار اولیه اپلیکیشن React
اولین کامپوننت ریاکت ما
وارد کردن و صادر کردن کامپوننتها
قوانین JSX
قطعات ریاکت
ارزیابی عبارات جاوااسکریپت در JSX
ساخت یک کامپوننت Die
تجزیه کامپوننت
استایلدهی به کامپوننتها
تمرین تصادفی کارت پوکه
ساخت اپلیکیشنهای React با Vite
نکتهای درباره Create React App
گشتی در یک اپلیکیشن Vite
معرفی پراپها
پراپهای غیر رشتهای
تعیین مقادیر پیشفرض پراپ
ارسال آرایهها و اشیاء
شرطهای ریاکت
ابزارهای توسعهدهنده ریاکت
افزودن استایلهای پویا به کامپوننتها
رندر کردن آرایهها با Map
تمرین دستگاه اسلات
ساخت کامپوننت لیست خرید
کلید اصلی
کامپوننت آیتم لیست خرید
تمرین ملک اجارهای
تنظیم ESLint
دوره فشرده کتابخانه PropTypes
مقدمهای بر رویدادهای React
رویدادهای غیر کلیکی
کار با شیء رویداد
تمرین کلیکر
معرفی وضعیت (State)
کار با هوک useState()
ساخت کامپوننت Toggler
چندین قطعه وضعیت در یک کامپوننت
useState() و رندرینگ
تمرین جعبه رنگ مقدمه
راه حل تمرین جعبه رنگ
تنظیم وضعیت با یک تابع بهروزرسان
توابع مقداردهی اولیه حالت
رِاکت کی دوباره رِندر میشود؟
کار با اشیاء در وضعیت
آرایهها در وضعیت
تولید شناسهها با UUID
حذف از آرایهها به روش ریاکت
الگوهای رایج بهروزرسانی آرایه
بهروزرسانی تمام عناصر در یک آرایه
تمرین امتیاز شمار
معرفی بازی Lucky7
تدوین برنامه جامع کامپوننت ما
ساخت قطعات قالب و تاس
کامپوننت LuckyN
وضعیت به عنوان پراپ
ارسال توابع به عنوان پراپ
ارسال توابع برای بهروزرسانی وضعیت
تمرین ارسال توابع بهروزرسانی وضعیت
کامپوننتهای کنترلشده
ویژگی htmlFor
کار با ورودیهای چندگانه
فرم ثبتنام بهتر
نامهای پراپرتی محاسبهشده در HandleChange()
ساخت فرم لیست خرید
کامپوننت لیست خرید
تکمیل کامپوننت لیست خرید
اعتبارسنجی فرم از ابتدا
اعتبارسنجی با استفاده از React Hook Form
معرفی افکتها
هوک useEffect
وابستگیهای useEffect
دریافت دادههای اولیه از یک API
اضافه کردن یک لودر
جستجوی پروفایل گیتهاب
معرفی متریال یو آی
نصب Material UI
کامپوننت امتیازدهی
اشکال مادی
استایلهای سفارشی و Prop در SX
ساختن برنامه
کامپوننت TodoList
حذف تسکها
جابجایی وظایف
فرم جدید برای اضافه کردن کار
افزودن LocalStorage
تغییر آیکونها و شناسههای تسکها
استایلهای نهایی
این لیست کارِ باحال رو ببین
قدم بعدی و خداحافظ!
پیشنیاز های دوره چه چیزهایی هستند؟
- ندارد
نظرات دانشجویان
مدرس دوره
کدیاد پلاس (Codeyad Plus)
سوالات متداول
برای هر کسی که میخواهد برنامهنویسی وب را از پایه شروع کند و به سطح حرفهای برسد.
خیر، فقط نیاز به آشنایی پایه با کامپیوتر و انگیزه بالا دارید.
بله، در طول دوره چندین پروژه واقعی از جمله اپلیکیشنهای کامل وب خواهید ساخت.
بله، این دوره آپدیت 2026 دوره است و آخرین تکنولوژیهای وب را پوشش میدهد.
اگر تمرینها و پروژهها را جدی بگیرید، بله. این دوره پایه بسیار خوبی برای ورود به بازار کار است.