BOOT / 01 SE — AI
Morteza Software Engineering & AI
در حال آماده‌سازی تجربه...
ROADMAP / 01 FRONTEND ENGINEERING
راهنمای ورود و تغییر مسیر به فرانت‌اند

از شناخت نقش تا ساخت تجربه‌ای که واقعاً کار می‌کند.

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

محیط یادگیری و ساخت محصول فرانت‌اند
const journey = buildExperience();
01
شناخت نقش

فرانت‌اند در عمل

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

01 / ساختار وب

معنا و ساختار صفحه

ساخت محتوای معنادار با HTML و درک رفتار مرورگر، شبکه و استانداردهای وب.

02 / رابط واکنش‌گرا

تجربه در هر اندازه

تبدیل طراحی به رابطی خوانا، منسجم و دسترس‌پذیر در موبایل و دسکتاپ.

03 / تعامل

رفتار قابل پیش‌بینی

پیاده‌سازی فرم‌ها، رویدادها، بازخوردها و جریان‌هایی که کاربر با آن‌ها کار می‌کند.

طراحی محصول دیجیتال
04 / State و API

داده‌ای که رابط را زنده می‌کند

مدیریت وضعیت، دریافت داده از سرویس‌ها و نمایش درست حالت‌های بارگذاری، خطا و موفقیت.

05 / کیفیت

قابل اعتماد و سریع

تست، دسترسی‌پذیری، امنیت سمت کاربر، performance و رفع خطا پیش از انتشار.

همکاری تیم مهندسی فرانت‌اند
06 / محصول و همکاری

ساختن همراه تیم

فهم مسئله، گفت‌وگو با طراح و بک‌اند، بازبینی کد و تحویل تدریجی ارزش به کاربر.

02
ارزیابی تناسب

این مسیر با تو جور است؟

هیچ تیپ شخصیتی واحدی برای فرانت‌اند وجود ندارد؛ اما جنس مسئله‌ها و بازخورد سریع این کار باید برایت قابل تحمل و ترجیحاً جذاب باشد.

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

پیش‌نیاز شروع و مهارت حرفه‌ای

برای شروع به مدرک یا ریاضی پیشرفته نیاز نداری. دسترسی به رایانه و تمرین منظم کافی است؛ مهارت‌های حرفه‌ای در طول ساخت پروژه شکل می‌گیرند.

پیش‌نیاز شروع

کم اما جدی

  • کار روزمره با رایانه، فایل‌ها و مرورگر
  • توانایی خواندن انگلیسی فنی در حد جست‌وجو
  • زمان ثابت هفتگی و تحمل آزمون‌وخطا
مهارت حرفه‌ای

هم‌زمان با کدنویسی

  • شکستن مسئله، دیباگ و خواندن مستندات
  • Git، بازبینی کد و توضیح تصمیم‌ها
  • درک محصول، دسترسی‌پذیری و کیفیت تحویل
04
مسیر مرحله‌ای

از پایه‌های وب تا آمادگی ورود به بازار کار

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

SCROLL TO EXPLORE ۹ ایستگاه تا ورود به دنیای واقعی فرانت‌اند
شروع مسیر فرانت‌اند
۰۱ / ۰۹
شروع مسیر فرانت‌اند

مبانی یادگیری و محیط توسعه فرانت‌اند

به‌جای جمع‌کردن دوره و ابزار، مسئله را به قدم‌های کوچک تبدیل کن و با ساختن یاد بگیر.

  • روش جست‌وجو و خواندن مستندات
  • شکستن مسئله
خروجی این ایستگاه

یک صفحه ساده و محیط توسعه آماده

راهنمای کامل این ایستگاه
HTML و ساختار وب
۰۲ / ۰۹
HTML و ساختار وب

HTML معنایی و ساختار استاندارد صفحات وب

ساختار محتوا، فرم‌ها و رفتار پایه مرورگر را پیش از ورود به ظاهر و فریم‌ورک درست یاد بگیر.

  • HTML معنایی
  • Form و Validation بومی
خروجی این ایستگاه

یک سایت چندصفحه‌ای معنایی

راهنمای کامل این ایستگاه
CSS و رابط واکنش‌گرا
۰۳ / ۰۹
CSS و رابط واکنش‌گرا

CSS مدرن و طراحی واکنش‌گرا

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

  • Cascade و Box Model
  • Flex و Grid
خروجی این ایستگاه

یک لندینگ واکنش‌گرا با دو تم

راهنمای کامل این ایستگاه
JavaScript و DOM
۰۴ / ۰۹
JavaScript و DOM

JavaScript، DOM و تعاملات رابط کاربری

منطق برنامه، تعامل با DOM و جریان‌های ناهمگام را بدون پنهان‌شدن پشت فریم‌ورک یاد بگیر.

  • نوع داده، تابع و Scope
  • Array، Object و Module
خروجی این ایستگاه

یک اپلیکیشن تعاملی مبتنی بر داده

راهنمای کامل این ایستگاه
Git و TypeScript
۰۵ / ۰۹
Git و TypeScript

Git، TypeScript و کدنویسی قابل نگهداری

از «کار می‌کند» عبور کن و قرارداد داده، تاریخچه تغییر و امکان refactor امن را جدی بگیر.

  • Git و Pull Request
  • TypeScript و قرارداد داده
خروجی این ایستگاه

یک پروژه TypeScript با تاریخچه Git

راهنمای کامل این ایستگاه
فریم‌ورک و کامپوننت
۰۶ / ۰۹
فریم‌ورک و کامپوننت

فریم‌ورک‌های فرانت‌اند و معماری کامپوننتی

طراحی را با یک فریم‌ورک به کامپوننت‌های قابل ترکیب و جریان‌های واقعی کاربر تبدیل کن.

  • React یا Vue یا Angular
  • Component و Props
خروجی این ایستگاه

یک اپلیکیشن کامپوننت‌محور

راهنمای کامل این ایستگاه
State، API و کیفیت
۰۷ / ۰۹
State، API و کیفیت

مدیریت State، ارتباط با API و مدیریت خطا

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

  • Fetch و قرارداد API
  • Local و Server State
خروجی این ایستگاه

یک رابط متصل به API با مدیریت خطا

راهنمای کامل این ایستگاه
انتشار و کار تیمی
۰۸ / ۰۹
انتشار و کار تیمی

تست، بهینه‌سازی، همکاری تیمی و انتشار

کار را از issue تا pull request، بازبینی، build و انتشار با هماهنگی طراحی و بک‌اند پیش ببر.

  • Scope و Acceptance Criteria
  • Code Review
خروجی این ایستگاه

یک نسخه Production قابل ارائه

راهنمای کامل این ایستگاه
نمونه‌کار و استخدام
۰۹ / ۰۹
نمونه‌کار و استخدام

نمونه‌کار حرفه‌ای و آمادگی ورود به بازار کار

آموخته‌ها را به نمونه‌کار، روایت حل مسئله و برنامه رشد پس از استخدام تبدیل کن.

  • Portfolio و Case Study
  • مصاحبه فنی
خروجی این ایستگاه

دو نمونه‌کار و یک رزومه هدفمند

راهنمای کامل این ایستگاه
05
عادت‌های حرفه‌ای

مهارت‌هایی که اغلب نادیده گرفته می‌شوند

این عادت‌ها فاصله میان «کد زدن» و «قابل اتکا بودن در یک تیم» را می‌سازند.

01

واضح نوشتن و توضیح دادن

مسئله، تصمیم و محدودیت را طوری بیان کن که هم‌تیمی بعدی مجبور به حدس زدن نباشد.

02

خواندن و بازبینی کد

قبل از پیشنهاد راه تازه، سیستم موجود را بفهم و بازخورد مشخص و محترمانه بده.

03

فکر کردن به محصول

اثر راه‌حل روی کاربر، هزینه نگهداری و زمان تحویل را کنار زیبایی فنی بسنج.

04

دیباگ روشمند

مسئله را بازتولید، فرضیه را محدود و نتیجه را ثبت کن؛ نه اینکه تصادفی کد را تغییر دهی.

06
آمادگی حرفه‌ای و مسیر شغلی

از اولین فرصت تا اثرگذاری روی محصول

در بازار ایران، پنل‌ها، فروشگاه‌ها، محصولات SaaS و نگهداری سیستم‌های موجود سهم مهمی از فرصت‌ها را دارند. نمونه‌کار واقعی، توانایی توضیح تصمیم‌ها و تجربه همکاری از تعداد دوره‌ها مهم‌تر است.

Junior

اجرای دقیق با همراهی تیم

پایه‌های محکم، تحویل بخش‌های محدود، سؤال درست و استفاده از بازخورد.

Mid-level

تحویل مستقل قابلیت

شکستن مسئله، مدیریت کیفیت و هماهنگی مستقیم با طراحی و بک‌اند.

Senior / Lead

اثرگذاری فراتر از کد

تصمیم معماری، رشد تیم، کاهش ریسک و هم‌راستا کردن فناوری با محصول.

مطالعه در مسیر یادگیری

بلاگ

نوشته‌های عملی مسیر فرانت‌اند را بخوانید و با هر مرحله، یک قدم به ساخت محصول بردارید.

نمونه‌کار حرفه‌ای و آمادگی ورود به بازار کار توسعه فرانت‌اند
FRONTEND 31 July 2026

نمونه‌کار حرفه‌ای و آمادگی ورود به بازار کار

آموخته‌ها را به نمونه‌کار، روایت حل مسئله و شواهد قابل ارائه برای فرصت‌های شغلی تبدیل کنید.

تست، بهینه‌سازی، همکاری تیمی و انتشار توسعه فرانت‌اند
FRONTEND 30 July 2026

تست، بهینه‌سازی، همکاری تیمی و انتشار

قابلیت را از issue و بازبینی کد تا build، انتشار و مشاهده نتیجه در production پیش ببرید.

مدیریت State، ارتباط با API و مدیریت خطا توسعه فرانت‌اند
FRONTEND 29 July 2026

مدیریت State، ارتباط با API و مدیریت خطا

رابط را به داده واقعی متصل کنید و حالت‌های شبکه و تجربه کاربر را قابل پیش‌بینی نگه دارید.

فریم‌ورک‌های فرانت‌اند و معماری کامپوننتی توسعه فرانت‌اند
FRONTEND 28 July 2026

فریم‌ورک‌های فرانت‌اند و معماری کامپوننتی

یک فریم‌ورک را آگاهانه انتخاب کنید و رابط را به کامپوننت‌های قابل ترکیب تبدیل کنید.

Git، TypeScript و کدنویسی قابل نگهداری توسعه فرانت‌اند
FRONTEND 27 July 2026

Git، TypeScript و کدنویسی قابل نگهداری

قرارداد داده، تاریخچه تغییر و refactor امن را به بخشی از جریان روزانه توسعه تبدیل کنید.

JavaScript، DOM و تعاملات رابط کاربری توسعه فرانت‌اند
FRONTEND 26 July 2026

JavaScript، DOM و تعاملات رابط کاربری

منطق برنامه، رخدادهای رابط و جریان‌های ناهمگام را پیش از ورود به فریم‌ورک یاد بگیرید.

CSS مدرن و طراحی واکنش‌گرا توسعه فرانت‌اند
FRONTEND 25 July 2026

CSS مدرن و طراحی واکنش‌گرا

از Cascade و Box Model تا Flex، Grid، تم و رابطی که در اندازه‌های مختلف پایدار می‌ماند.

HTML معنایی و ساختار استاندارد صفحات وب توسعه فرانت‌اند
FRONTEND 24 July 2026

HTML معنایی و ساختار استاندارد صفحات وب

ساخت صفحه‌ای که محتوا، فرم و تعامل پایه آن برای مرورگر و کاربران قابل فهم باشد.

مبانی یادگیری و محیط توسعه فرانت‌اند توسعه فرانت‌اند
FRONTEND 23 July 2026

مبانی یادگیری و محیط توسعه فرانت‌اند

چطور محیط توسعه را آماده کنیم و به‌جای دوره‌گردی، با ساختن و دیباگ‌کردن یاد بگیریم؟

به‌زودیواژه‌نامه تخصصی فرانت‌اند
08
پرسش‌های متداول

پاسخ کوتاه به سؤال‌های شروع مسیر

برای شروع باید React بلد باشم؟

نه. مراحل ۱ تا ۳ را با ذهنیت حل مسئله، پایه‌های وب و JavaScript جلو برو. React، Vue یا Angular در مرحله ساخت محصول وارد مسیر می‌شوند.

چقدر طول می‌کشد آماده کار شوم؟

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

آیا بدون مدرک دانشگاهی می‌شود وارد شد؟

بله. برای بسیاری از فرصت‌ها، نمونه‌کار، پایه فنی، حل مسئله و توانایی همکاری شواهد مهم‌تری از توانایی تو هستند.

React بهتر است یا Vue یا Angular؟

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

از کجا بفهمم آماده درخواست شغل هستم؟

وقتی می‌توانی یک قابلیت را از رابط تا API، مدیریت خطا، تست و انتشار جلو ببری و کدت را توضیح بدهی، ارسال درخواست را شروع کن؛ لازم نیست همه ابزارها را بلد باشی.