نقشه راه توسعه‌دهنده فرانت‌اند؛ مسیر یادگیری تا ساخت نمونه‌کار

معرفی

مخاطبان نقشه راه

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

دستاورد پایانی

در پایان مسیر، می‌توانید یک رابط وب واکنش‌گرا و قابل‌دسترسی را از روی طرح پیاده‌سازی کنید، با JavaScript و TypeScript داده API را مدیریت کنید، یک پروژه React را ساختار دهید، خطاهای مرورگر را بررسی کنید، تغییرات را با Git ثبت کنید و چند نمونه‌کار دارای رفتار واقعی بسازید.

پیش‌نیازها

موارد زیر پایه‌های لازم برای شروع را نشان می‌دهند.

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

مسیر یادگیری شغل توسعه‌دهنده فرانت‌اند

1. ۱

   شناخت وب و ساختار صفحه

   ۴۰ ساعت

   هدف گام: درک کنید مرورگر چگونه یک صفحه را دریافت و نمایش می‌دهد و صفحه‌ای معنایی بسازید.

   با ساختار یک پروژه ساده وب، نقش مرورگر و تفاوت HTML و CSS شروع کنید. تمرکز این گام بر ساختار معنایی است: عنوان، ناوبری، محتوای اصلی، فرم، جدول و عناصر تعاملی را با عنصر مناسب بسازید؛ نه با مجموعه‌ای از divهای بی‌معنا.

   هم‌زمان Chrome DevTools را برای دیدن ساختار صفحه، بررسی خطاها و شناخت درخواست‌های شبکه باز کنید. از همین ابتدا فایل‌ها را در یک مخزن Git نگه دارید تا ثبت تغییرات به عادت تبدیل شود.

   مهارت‌ها

   توسعه رابط وب با HTML و CSSکنترل نسخه

   ابزارها

   کروم دولوپر تولزگیت

   مفاهیم تکمیلی

   ساختار سند وبنشانه‌گذاری معنایی صفحهساخت فرم‌های پایهپیوندها و ناوبری داخلیمدل شیء سندبازرسی عناصر در مرورگرثبت تغییرات در مخزن

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

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

2. ۲

   چیدمان، واکنش‌گرایی و دسترس‌پذیری

   ۵۵ ساعت

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

   مدل جعبه، cascade، selectorها، typography و چیدمان با Flexbox و Grid را تمرین کنید. سپس طراحی را از نمایشگر کوچک آغاز کنید و با media queryها چیدمان را برای اندازه‌های بزرگ‌تر گسترش دهید.

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

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

   مهارت‌ها

   توسعه رابط وب با HTML و CSS

   ابزارها

   کروم دولوپر تولزفیگما

   مفاهیم تکمیلی

   مدل جعبه و cascadeچیدمان با Flexboxچیدمان با Gridخواندن مشخصات طرححالت‌های اجزای رابططراحی mobile-firstنقاط شکست واکنش‌گراتایپوگرافی سیالکنتراست رنگناوبری با صفحه‌کلیدحالت تمرکز عناصر

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

   معیار پایان گام: می‌توانید یک چیدمان چندستونه را بدون وابستگی به اندازه ثابت بسازید، مشخصات و حالت‌های طرح را از Figma بررسی کنید و فرم و منوی صفحه را با صفحه‌کلید آزمایش کنید.

3. ۳

   برنامه‌نویسی رفتار رابط با JavaScript

   ۷۰ ساعت

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

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

   در این گام، به‌جای نوشتن کدهای پراکنده در handlerها، وضعیت صفحه و تابع‌های کوچک را جدا کنید. Promise، async/await و مدیریت خطا را پیش از اتصال به API یاد بگیرید؛ این مفاهیم پایه گام بعدی هستند.

   مهارت‌ها

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

   ابزارها

   جاوا اسکریپتکروم دولوپر تولزگیت

   مفاهیم تکمیلی

   نوع‌های داده و عملگرهاتابع و محدوده متغیرهاآرایه‌ها و شیءهاماژول‌بندی کدرویدادهای رابطدست‌کاری DOMمدیریت وضعیت ساده صفحهبرنامه‌نویسی ناهمگاممدیریت خطا در عملیات ناهمگام

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

   معیار پایان گام: می‌توانید بدون کتابخانه، یک فرم تعاملی با اعتبارسنجی، رویدادها و به‌روزرسانی درست DOM پیاده‌سازی کنید و خطاهای JavaScript را در DevTools ردیابی کنید.

4. ۴

   کار با API و مدیریت وضعیت‌های واقعی رابط

   ۶۵ ساعت

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

   یک رابط واقعی باید بداند وقتی درخواست دیر پاسخ می‌دهد، ناموفق است یا داده‌ای ندارد چه نشان دهد. با درخواست HTTP، کدهای وضعیت، JSON و قرارداد API آشنا شوید و داده را با fetch دریافت کنید.

   پیش از اتصال رابط، یک درخواست نمونه را در Postman اجرا کنید. نشانی درخواست، روش HTTP، هدرها، بدنه درخواست و شکل پاسخ را بررسی کنید و یک پاسخ ناموفق را نیز ببینید. سپس همان قرارداد را در رابط پیاده‌سازی و درخواست نهایی را در تب Network مرورگر بررسی کنید.

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

   مهارت‌ها

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

   ابزارها

   جاوا اسکریپتکروم دولوپر تولزپستمن

   مفاهیم تکمیلی

   درخواست و پاسخ HTTPخواندن داده JSONهدر و بدنه درخواستپارامترهای مسیر و پرس‌وجوارسال داده فرمحالت بارگذارینمایش خطای درخواستحالت داده خالیبررسی درخواست در Networkقرارداد داده API

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

   معیار پایان گام: می‌توانید یک API را در Postman و DevTools بررسی کنید، داده آن را در رابط نمایش دهید و برای پاسخ ناموفق یا داده خالی رفتار مشخص بسازید.

5. ۵

   ساخت برنامه مؤلفه‌ای با React و TypeScript

   ۷۰ ساعت

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

   ابتدا نسخه LTS از Node.js را نصب کنید، نصب آن را در ترمینال بررسی کنید و با مدیر بسته npm یک پروژه React بسازید. اسکریپت توسعه پروژه را اجرا کنید، برنامه را در مرورگر باز کنید و پیش از تغییر کد، ساختار پوشه‌ها و فایل‌های اصلی را بشناسید.

   پس از تسلط نسبی بر JavaScript، React را برای مدل مؤلفه‌ای، props، state، رویدادها و اثرهای جانبی یاد بگیرید. مؤلفه‌ها را بر اساس مسئولیت جدا کنید؛ مثلاً فهرست، کارت، فرم و پیام خطا نباید همگی در یک فایل بزرگ قرار گیرند.

   TypeScript را برای تعریف نوع داده API، props و وضعیت برنامه اضافه کنید. هدف، حذف همه خطاهای ممکن نیست؛ هدف این است که قرارداد داده‌ها روشن‌تر شود و تغییرات پروژه با اطمینان بیشتری انجام شود. اگر هدف شما موقعیت Vue یا Angular است، همین مفاهیم را در فریم‌ورک موردنیاز آن آگهی تمرین کنید، اما هم‌زمان چند فریم‌ورک را از سطح مقدماتی دنبال نکنید.

   مهارت‌ها

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

   ابزارها

   ری‌اکتتایپ‌اسکریپتجاوا اسکریپتگیتکروم دولوپر تولز

   مفاهیم تکمیلی

   راه‌اندازی پروژه محلیمدیر بسته و اسکریپت‌های پروژهمرزبندی مسئولیت مؤلفه‌هاانتقال داده با propsمدیریت state محلیرویدادهای مؤلفهاثرهای جانبی و دریافت دادهنوع‌دهی داده APIنوع‌دهی props و رویدادهامدیریت فرم کنترل‌شدهسازمان‌دهی فایل‌های پروژه

   پروژه پیشنهادی: یک برنامه مدیریت هزینه شخصی بسازید که فرم ثبت هزینه، دسته‌بندی، فیلتر زمانی، خلاصه داده و ذخیره‌سازی محلی داشته باشد. یک فهرست دسته‌بندی یا نرخ تبدیل را از API دریافت کنید و برای بارگذاری و خطای دریافت داده، حالت جداگانه نمایش دهید. بخش‌های اصلی را به مؤلفه‌های جدا تقسیم کنید و TypeScript را برای مدل داده به کار ببرید.

   معیار پایان گام: می‌توانید یک پروژه React را با Node.js و npm به‌صورت محلی اجرا کنید و برنامه‌ای دارای چند مؤلفه، فرم، state، دریافت داده، حالت بارگذاری و خطا و نوع‌های TypeScript بسازید.

6. ۶

   تست، اشکال‌زدایی و کیفیت کد

   ۴۵ ساعت

   هدف گام: تغییرات رابط را با آزمایش هدفمند، بررسی خطا و بازبینی ساختار کد ایمن‌تر کنید.

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

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

   اشکال‌زدایی را فقط به console محدود نکنید. breakpoint، تب Sources، Network و Performance در Chrome DevTools به تشخیص خطاهای منطقی، درخواست‌های تکراری و رندرهای غیرمنتظره کمک می‌کنند. پیش از ثبت تغییر، کد را کوچک، خوانا و قابل‌مرور نگه دارید.

   مهارت‌ها

   تست نرم‌افزارکنترل نسخهتوسعه وب فرانت‌اند

   ابزارها

   کروم دولوپر تولزگیتری‌اکت

   مفاهیم تکمیلی

   انتخاب سناریوی تستاجرای تست با اسکریپت پروژهتست منطق مستقلتست رفتار مؤلفهپوشش حالت خطااستفاده از breakpointردیابی درخواست‌های تکراریخوانایی و نام‌گذاری کدبازبینی تغییرات پیش از ثبت

   پروژه پیشنهادی: برای پروژه مدیریت هزینه، با Vitest تست‌هایی برای اعتبارسنجی فرم، محاسبه مجموع هزینه‌ها و نمایش پیام خطا بنویسید و آن‌ها را با اسکریپت test اجرا کنید. یک خطای عمدی ایجاد کنید و مسیر یافتن و رفع آن را با DevTools تمرین کنید.

   معیار پایان گام: می‌توانید با Vitest دست‌کم یک سناریوی موفق و یک سناریوی خطا برای منطق یا رفتار حساس اجرا کنید، یک باگ رابط را با breakpoint یا Network ردیابی کنید و تغییرات خود را در Git قابل‌مرور ثبت کنید.

7. ۷

   عملکرد، دسترس‌پذیری و تحویل وب

   ۳۵ ساعت

   هدف گام: پروژه را برای کاربران واقعی، دستگاه‌های ضعیف‌تر و شرایط شبکه متفاوت آماده کنید.

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

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

   مهارت‌ها

   توسعه وب فرانت‌اند

   ابزارها

   کروم دولوپر تولزری‌اکت

   مفاهیم تکمیلی

   اندازه‌گیری زمان بارگذاریبهینه‌سازی تصویرهابارگذاری تنبل محتواکاهش حجم فایل‌های ارسالیبررسی رندرهای غیرضروریساختار headingهامتن جایگزین تصویربرچسب و پیام خطای فرمارزیابی با صفحه‌کلیدرندر سمت سرور و تولید صفحه ایستا

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

   معیار پایان گام: می‌توانید پیش و پس از یک بهبود را در ابزار مرورگر مقایسه کنید و دست‌کم پنج مورد دسترس‌پذیری را در پروژه خود بررسی و اصلاح کنید.

8. ۸

   پروژه نهایی و تثبیت توانایی

   ۵۵ ساعت

   هدف گام: یک محصول کوچک اما کامل بسازید که توانایی شما در کار با طراحی، داده، کیفیت و نگهداری کد را نشان دهد.

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

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

   مهارت‌ها

   توسعه وب فرانت‌اندتست نرم‌افزارکنترل نسخه

   ابزارها

   ری‌اکتتایپ‌اسکریپتگیتکروم دولوپر تولزفیگما

   مفاهیم تکمیلی

   تقسیم مسئله به قابلیت‌های کوچکتبدیل طرح به مؤلفهطراحی جریان کاربرمدیریت وضعیت‌های بارگذاری و خطابازبینی واکنش‌گراییبازبینی دسترس‌پذیریمستندسازی پروژهتاریخچه تغییرات قابل‌مروررفع باگ پیش از انتشار

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

   معیار پایان گام: یک پروژه کامل دارید که روی اندازه‌های مختلف صفحه کار می‌کند، داده API و حالت‌های خطا را مدیریت می‌کند، در Git تاریخچه روشن دارد و می‌توانید تصمیم‌های فنی اصلی آن را توضیح دهید.

ابزارهای مسیر

موارد زیر تصویری کلی از این بخش برای این مسیر ارائه می‌کنند.

• ابزار جاوا اسکریپت JavaScript
• ابزار تایپ‌اسکریپت TypeScript
• ابزار ری‌اکت React
• ابزار گیت Git
• ابزار کروم دولوپر تولز Chrome DevTools
• ابزار پستمن Postman

خطاهای رایج مسیر

برای آشنایی بهتر با این مسیر، توجه به موارد زیر می‌تواند مفید باشد.

• شروع با فریم‌ورک پیش از فهم JavaScript

  پیش از ورود جدی به React یا ابزار مشابه، بتوانید با JavaScript فرم، رویداد، آرایه، درخواست ناهمگام و خطای ساده را مدیریت کنید. در غیر این صورت، مفاهیم فریم‌ورک به دستورهای حفظی تبدیل می‌شوند.

• ساخت صفحه‌های ثابت به‌جای رابط واقعی

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

• نادیده‌گرفتن موبایل و صفحه‌کلید

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

• کپی‌کردن کامل پروژه آموزشی

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

• افزودن ابزارهای زیاد به یک پروژه کوچک

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

• مدیریت‌نکردن خطاهای API

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

• ثبت‌نکردن منظم تغییرات با Git

  پس از هر تغییر کوچک و کامل، commit با پیام روشن بسازید. این کار بازگشت به نسخه سالم، مرور تغییرات و همکاری بعدی را ساده‌تر می‌کند.

• بهینه‌سازی پیش از اندازه‌گیری

  ابتدا با Chrome DevTools مسئله را اندازه‌گیری کنید. سپس مشخص کنید کدام تصویر، درخواست یا رندر دلیل کندی است و فقط همان بخش را بهبود دهید.

چک‌لیست آمادگی شغلی

موارد زیر را یک‌به‌یک بررسی کنید تا چیزی جا نماند:

• می‌توانم یک طرح ساده را با HTML و CSS به رابط واکنش‌گرا تبدیل کنم.
• می‌توانم ساختار معنایی، فرم برچسب‌دار و ناوبری قابل‌استفاده با صفحه‌کلید پیاده‌سازی کنم.
• می‌توانم با JavaScript رویدادها، فرم‌ها و وضعیت رابط را مدیریت کنم.
• می‌توانم داده API را دریافت یا ارسال کنم و حالت بارگذاری، خطا و داده خالی را نمایش دهم.
• می‌توانم یک پروژه React را به مؤلفه‌های کوچک و قابل‌نگهداری تقسیم کنم.
• می‌توانم برای داده و props اصلی از TypeScript استفاده کنم.
• می‌توانم با Chrome DevTools خطای JavaScript، مشکل شبکه یا خطای نمایش را بررسی کنم.
• می‌توانم تغییرات پروژه را با Git ثبت کنم و تاریخچه قابل‌مرور داشته باشم.
• می‌توانم برای منطق یا جریان حساس پروژه تست بنویسم.
• می‌توانم یک پروژه کامل با README، طراحی واکنش‌گرا و سناریوهای خطا ارائه کنم.
• می‌توانم تصمیم فنی خود را روشن توضیح دهم، بازخورد بازبینی کد را اعمال کنم و مسئله API یا طراحی را دقیق به هم‌تیمی گزارش دهم.

پرسش‌های پرتکرار

پرسش‌ها و پاسخ‌های زیر، برخی از موضوعات مهم درباره نقشه راه شغلی توسعه‌دهنده فرانت‌اند را روشن می‌کنند.

آموزش‌های مرتبط در فرادرس

• آموزش پروژه محور اچ تی ام ال و سی اس اس HTML و CSS + گواهینامه آموزش ویدئویی
• آموزش جاوا اسکریپت JavaScript، مقدماتی تا پیشرفته آموزش ویدئویی
• آموزش پروژه محور ری اکت جی اس، طراحی وب اپلیکیشن پیشرو PWA با React.js + گواهینامه آموزش ویدئویی
• آموزش TypeScript در React، استفاده از تایپ اسکریپت در ری اکت + گواهینامه آموزش ویدئویی
• نقشه راه آموزش پروژه محور جاوا اسکریپت آموزش متنی
• بایدها و نبایدهای اصول طراحی وب برای معلولان و کاربران خاص آموزش متنی

منابع پیشنهادی

• 7. Accessibility, MDN Web Docs, Mozilla مستنداتdeveloper.mozilla.org