فرانت‌اند نزدیک‌ترین بخش برنامه‌نویسی به کاربر است. هر دکمه‌ای که می‌زنی، هر فرمی که پر می‌کنی و هر انیمیشنی که می‌بینی، کار یک توسعه‌دهنده‌ی فرانت‌اند است. همین نزدیکی باعث میشود شروعش از بقیه‌ی مسیرها راحت‌تر و نتیجه‌اش سریع‌تر دیده شود.
خبر خوب این است که در فرانت‌اند خروجی کارت را بلافاصله می‌بینی؛ خبر بد این است که همین باعث میشود خیلی‌ها سراغ هر آموزشی بروند و هیچ‌وقت پایه‌شان محکم نشود. این مسیر عمداً ترتیب سخت‌گیرانه‌ای دارد: تا HTML و CSS جا نیفتاده، سراغ جاوااسکریپت نمی‌روی و تا جاوااسکریپت خام را ننوشتی، وارد فریم‌ورک نمی‌شوی.
در این مسیر چه اتفاقی می‌افتد؟
با HTML اسکلت صفحه را می‌سازی و یاد می‌گیری ساختار درست و معنادار یعنی چه.
با CSS ظاهر، رنگ و چیدمان را کنترل می‌کنی و صفحه‌ات را روی موبایل هم درست نشان می‌دهی.
گیت و گیت‌هاب را یاد می‌گیری و اولین سایتت را رایگان روی اینترنت منتشر می‌کنی.
جاوااسکریپت را از پایه تا کار با DOM و رویدادها جلو می‌روی و صفحه را تعاملی می‌کنی.
یاد می‌گیری از API واقعی داده بگیری و روی صفحه نشان بدهی.
با یک فریم‌ورک مدرن، پروژه‌ی پایانی را می‌سازی و رزومه‌ات را جمع می‌کنی.
چقدر طول میکشد؟
حدود ۹۰ ساعت محتوا به‌علاوه‌ی زمان تمرین. با هفته‌ای ۱۰ ساعت، معمولاً بین ۵ تا ۷ ماه به انتهای مسیر می‌رسی. بخشی از قدم‌ها به منابع رایگان بیرونی وصل است تا تا قبل از انتشار دوره‌های فرانت پرانتز، مسیرت متوقف نشود.
دیدن کامل نقشه رایگان است و بخشی از محتوا هم رایگان است.
22 قدم در 6 مرحله
حدود 92 ساعت
0 یادگیرنده
به‌روزرسانی 1405/06/23
کل نقشه برای همه باز است و هیچ قدمی پنهان نیست.
اگر وارد شوی، پیشرفتت ذخیره میشود و هر بار از همان‌جا ادامه می‌دهی.
خروجی یادگیری
بعد از این مسیر می‌توانی
یک صفحه‌ی وب کامل و ریسپانسیو را از روی طرح گرافیکی پیاده کنی
با جاوااسکریپت صفحه را تعاملی کنی و با DOM کار کنی
از یک API واقعی داده بگیری و روی صفحه نمایش بدهی
پروژه‌ات را روی گیت‌هاب بگذاری و رایگان منتشر کنی
با یک فریم‌ورک مدرن اپلیکیشن تک‌صفحه‌ای بسازی
باگ‌های ظاهری و رفتاری را با ابزار توسعه‌دهنده‌ی مرورگر پیدا کنی
HTML5
CSS3
JavaScript
طراحی ریسپانسیو
Flexbox و Grid
Git و GitHub
کار با REST API
Vue.js
ابزار توسعه‌دهنده‌ی مرورگر
دسترس‌پذیری (Accessibility)
پیش از شروع
چه چیزی لازم داری؟
آشنایی مقدماتی با کامپیوتر و مرورگر
حدود ۱۰ ساعت وقت آزاد در هفته
انگلیسی در حد خواندن مستندات
هیچ دانش برنامه‌نویسی قبلی لازم نیست
نقشهی مسیر
6 مرحله، 22 قدم
قدم‌ها به ترتیب پیشنهادی چیده شدهاند. روی هر قدم بزن تا توضیحش را ببینی.
قدمهای خطچین اختیاری‌اند و رد کردنشان مسیر را قفل نمیکند.
1اسکلت صفحه با HTML
3 قدم
· 8 ساعت
هر صفحه‌ی وب با HTML شروع میشود. این مرحله کوتاه است ولی پایه‌ی همه‌چیز را می‌سازد؛ اگر اینجا شلخته جلو بروی، در CSS و جاوااسکریپت اذیت می‌شوی.
قبل از کدزدن بدان وقتی آدرسی را باز می‌کنی پشت‌صحنه چه اتفاقی می‌افتد.
یک صفحه‌ی فرود کامل بساز: هدر، بنر، بخش خدمات، فرم تماس و فوتر. باید روی موبایل هم درست باشد. همان صفحه‌ی رزومه را هم با CSS بازطراحی کن.
محتوای این قدم به‌زودی منتشر میشود.
3ابزارهای کار روزمره
4 قدم
· 10 ساعت
قبل از این‌که کد پیچیده‌تر شود، باید بلد باشی نسخه‌هایت را مدیریت کنی و کارت را منتشر کنی. این مرحله چیزی است که خیلی‌ها دیر یادش می‌گیرند و ضرر می‌کنند.
از اولین خط کد PHP تا تحویل یک API واقعی. این مسیر زبان PHP، فریم‌ورک لاراول، گیت، کامپوزر، معماری تمیز و تست‌نویسی را در ترتیب درست کنار هم می‌چیند؛ هر مرحله با یک پروژه‌ی واقعی تمام میشود تا در انتها رزومه‌ای داشته باشی که قابل نشان‌دادن باشد.
فول‌استک یعنی بتوانی یک محصول را تنهایی از صفر بسازی؛ از جدول‌های دیتابیس تا دکمه‌ای که کاربر می‌زند. این مسیر HTML و CSS، جاوااسکریپت، PHP، لاراول، طراحی API و استقرار را پشت سر هم می‌چیند و با یک محصول کامل تمام میشود. طولانی‌ترین مسیر پرانتز است، ولی در انتها به کسی تبدیل می‌شوی که برای ساختن یک ایده به هیچ‌کس دیگری نیاز ندارد.
یک کامپیوتر و وقت مشخص در هفته. پیشنیازهای دانشی هر مسیر در بخش «پیش از شروع» همین صفحه نوشته شده و اگر مسیر سطح مبتدی باشد، هیچ دانش قبلی لازم نیست.
وقتی آزمون پایان مرحلهی قبل را قبول شوی. آزمونها نقش دروازه دارند تا مطمئن شویم پایهات محکم است و در مرحلهی بعد گیر نکنی. البته نقشهی کامل از همان اول برای همه قابل دیدن است.
نه. قدمهای اختیاری با کادر خطچین مشخص شدهاند و برای عمیقتر شدن یا پر کردن خلأهای احتمالیاند. رد کردنشان مسیر را قفل نمیکند.
زمان هر قدم تقریبی و بر اساس میانگین یادگیرندههاست. اگر تازهکاری کمی بیشتر و اگر پیشزمینه داری کمتر طول میکشد. مجموع زمان مسیر هم از همینها جمع زده میشود.
از نظر فنی بله، اما پیشنهاد نمیکنیم. تمرکز روی یک مسیر تا انتها نتیجهی بهمراتب بهتری میدهد تا نصفه رها کردن چند مسیر.
