فرانتاند همون چیزیه که کاربر میبینه و لمس میکنه: صفحهها، دکمهها، فرمها، انیمیشنها.
با HTML اسکلت صفحه ساخته میشه.
با CSS ظاهر قشنگ میشه.
با JavaScript صفحه زنده و تعاملی میشه.
با API داده میگیریم و نمایش میدیم.
هدف نهایی؟ سریع، زیبا، قابلدسترس و سئوپسند بودن.
HTML5 (معنایی): از تگهای درست (header, main, nav, section) استفاده کن تا هم گوگل بهتر بفهمه هم ابزارهای کمکی.
CSS3: چیدمان با Flex/Grid، تم روشن/تاریک با متغیرهای CSS، انیمیشنهای سبک.
JavaScript ES6+: ماژولها، async/await، fetch، مدیریت خطا، کار با DOM.
تمرین پیشنهادی:
یک «لندینگ ریسپانسیو» بساز: هدر + سکشن مزایا + فرم تماس. تصاویر WebP و lazy-load فراموش نشه.
اول JS خام رو خوب یاد بگیر. بعد یکی از اینها رو عمیق:
React (محبوب و اکوسیستم بزرگ)
Vue (شروع راحت)
Angular (ساختار رسمی)
سه مفهوم کلیدی تو هر کدوم: کامپوننتمحوری، مدیریت State، Routing.
نکته طلایی: تا وقتی لازم نیست، ابزار اضافه نکن.
TypeScript کمک میکنه خطاها رو زودتر ببینی و تیمی راحتتر کار کنی.
از interface برای تایپ props شروع کن.
تا میتونی از any دوری کن.
کمکم سراغ Generics برو.
تعادل مهمه: «کیفیت» + «سرعت توسعه».
Git/GitHub: شاخهبندی، Pull Request، Code Review.
Vite/Webpack: اجرای سریع پروژه و ساخت نسخهٔ نهایی.
ESLint/Prettier: یکدستسازی کد.
DevTools مرورگر: بررسی سرعت، شبکه، Layout و A11y.
اهداف: HTML معنایی، Flex/Grid، JS مدرن.
تمرین: لندینگ ریسپانسیو + فرم معتبر.
خروجی: دمو زنده + README کوتاه.
معیار: Lighthouse بالای ۸۵.
اهداف: کامپوننتمحوری، State، Routing، تایپها.
تمرین: یک CRUD کوچیک با جستوجو و صفحهبندی.
خروجی: دمو + چند تست کوتاه.
معیار: LCP < ۲.۵s، بدون any عمومی.
اهداف: Performance/A11y/Test، دیپلوی حرفهای.
تمرین: افزودن Service Worker یا SSR ساده.
خروجی: پورتفولیو مرتب + رزومه یکصفحهای + تمرین مصاحبه.
وبسایت شخصی (Portfolio): تم روشن/تاریک، صفحات About/Projects/Contact → دمو زنده + فرم سالم
لندینگ ریسپانسیو: Hero، مزایا، CTA → امتیاز Lighthouse ≥ ۹۰
وبلاگ SSG (Next/Nuxt): متادیتا پویا، اسکیما، sitemap → بارگذاری سریع
داشبورد مدیریتی: جدول با فیلتر/مرتبسازی، ۲ نمودار → جستوجوی سریع + صفحهبندی
فروشگاه کوچک: Cart، چکاوت با اعتبارسنجی، کد تخفیف → پیام موفقیت/خطا واضح
Todo پیشرفته: Drag & Drop، جستوجو → Persist در LocalStorage
چت بلادرنگ: WebSocket، تایپینگ، اعلان مرورگر → اتصال پایدار
نقشه تعاملی: Geolocation، مارکرهای فیلترپذیر → ذخیرهٔ Viewport در URL
آپلودر تصویر: Preview، Crop/Compress، آپلود ابری → لینک نهایی + حجم کنترلشده
PWA آفلاین: Service Worker، manifest → نصب روی موبایل + صفحهٔ آفلاین
ترفند ارائه: برای هر پروژه یک کارت با دمو، GIF کوتاه، اسکرینشات، نقش تو، عدد واقعی (مثلاً LCP یا اندازهٔ باندل).
رزومه یکصفحهای: خلاصهٔ ۳–۴ خطی، مهارتها، ۳ پروژهٔ ستارهدار، لینکها.
پورتفولیو: Projects با فیلتر دستهبندی و کارتهای تمیز.
غلطگیری و لینکهای سالم خیلی مهمه.
JS/مرورگر: this، closure، event loop، فرق == و ===.
State/فریمورک: props/state، memoization، pitfalls useEffect.
معماری: چرا این ساختار فولدر؟ چرا این ابزار State؟
رفتاری: همکاری تیمی، مدیریت زمان، مسئولیتپذیری.
راز کوچک: هر پروژه را در ۶۰ ثانیه تعریف کن: مسئله → راهحل → نتیجه.
شروع با فریمورک قبل از JS → یک هفته JS خالص و بازنویسی یک فیچر بدون کتابخانه.
پروژههای نیمهکاره → کم بساز، اما کامل؛ هر پروژه Deliverable مشخص داشته باشه.
بیتوجهی به A11y/Performance → قبل انتشار یک چکلیست ثابت بزن.
رزومهٔ شلوغ → یک صفحه، با عدد و لینک واقعی.
۳۰ روز: HTML/CSS/JS + یک لندینگ؛ دیپلوی؛ Lighthouse ≥ ۸۵
۶۰ روز: یک فریمورک + TS؛ CRUD با تستهای کوتاه
۹۰ روز: PWA/SSR + پورتفولیو و رزومه + تمرین مصاحبه
قدمبهقدم برو جلو: پایهها → یک فریمورک → کیفیت و دمو.
هر فاز یک خروجی قابلنمایش داشته باشه و عدد واقعی رو ثبت کن (Lighthouse، LCP، اندازهٔ باندل).
پورتفولیو رو مرتب نگه دار و پروژههات رو مثل یک داستان کوتاه تعریف کن. وقتی ارزش رو نشان بدی—نه فقط تعریف کنی—استخدام، منطقیترین قدم بعدیته. ✌️
