🔘 فرانت‌اند (Front-end) به بخشی از یک وب‌سایت یا اپلیکیشن گفته می‌شه که کاربران مستقیماً با آن در ارتباط هستند.

🔸 فرانت‌اند رو مثل ویترین یک مغازه تصور کن. هر چیزی که مشتری وقتی وارد مغازه میشه میبینه و باهاش در ارتباطه، ویترین مغازه است.

🌐 در دنیای وب هم، فرانت‌اند یعنی همون بخش‌هایی از سایت که کاربر مستقیماً باهاش سروکار داره. مثلاً دکمه‌ها، منو‌ها، عکس‌ها، ویدیوها و هر چیزی که روی صفحه نمایش میبینی، همه‌ش جزو فرانت‌اند هست.

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

📌 حالا چرا فرانت‌اند مهمه؟

❤️ تصویر: ساخته شده با جعبه‌ی جادویی آیولرن

⭕️ اهمیت فرانت‌اند!

✅ تجربه کاربری خوب: فرانت‌اند باید طوری طراحی بشه که کاربر راحت بتونه از سایت استفاده کنه و به چیزی که دنبالشه برسه. مثلاً اگه دکمه‌ها خیلی کوچک باشن یا جای منو‌ها گیج‌کننده باشه، کاربر زود سایت رو ترک می‌کنه.

✅ ظاهر زیبا: اولین چیزی که کاربر از یه سایت میبینه، ظاهر اون هست. اگه سایت قشنگ و مرتب نباشه، کاربر فکر می‌کنه سایت خوب و باکیفیتی نیست.

✅ سرعت بالا: هیچ‌کس دوست نداره منتظر بمونه تا یه سایت لود بشه. فرانت‌اند باید طوری طراحی بشه که سایت سریع باز بشه و کاربر بدون وقفه بتونه ازش استفاده کنه.

📌 جاوااسکریپت چیه؟

❤️ تصویر: ساخته شده با جعبه‌ی جادویی آیولرن

⭕️ جاوا اسکریپت یه زبان برنامه‌نویسیه که به ما کمک می‌کنه تا فرانت‌اند رو تعاملی‌تر و جذاب‌تر کنیم.

✳️ مثلاً با جاوا اسکریپت می‌تونیم:

🟢 دکمه‌ها رو فعال کنیم: وقتی روی یه دکمه کلیک می‌کنی، با کمک جاوااسکریپت اتفاقاتی مثل باز شدن یک پنجره جدید یا نمایش یک پیام می‌افته.

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

🟢 فرم‌ها رو هوشمند کنیم: با جاوااسکریپت می‌تونیم فرم‌هایی بسازیم که اطلاعات رو بررسی کنن و به کاربر بازخورد بدن.

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

🔘 به زبان ساده‌تر، فرانت‌اند ظاهر و رفتار یک وب‌سایت رو مشخص می‌کنه و جاوا اسکریپت به ما ابزارهایی میده تا این ظاهر و رفتار رو کنترل کنیم.

📌 اگر فقط جاوااسکریپت یاد بگیریم کافیه؟

❤️ تصویر: ساخته شده با جعبه‌ی جادویی آیولرن

⭕️ چرا فقط جاوا اسکریپت برای فرانت‌اند کار کافی نیست؟

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

🌀 جاوا اسکریپت مثل آجر و سیمانه، یعنی ماده اولیه. اما برای ساختن یه وب‌سایت حرفه‌ای و زیبا، به چیزای دیگه هم نیاز داری.

🟢 چرا html&css هم لازمه؟HTML مثل اسکلت خونه است. تعيين می‌کنه که عناصر مختلف سایت (مثل عنوان‌ها، پاراگراف‌ها، تصاویر) کجا قرار بگیرند.

🔸 از طرفی ظاهر و زیبایی سایت را CSS تعیین می‌کنه. رنگ‌ها، فونت‌ها و چیدمان عناصر را با CSS مشخص می‌کنیم.

🔹جاوا اسکریپت هم به این خونه جان می‌دهد. به عناصر مختلف اجازه می‌دهد تا تعامل داشته باشند، مثلاً وقتی روی یک دکمه کلیک می‌کنید، اتفاقی بیفتد.

☑️ پس برای ساختن یک وب‌سایت، به هر سه تای این‌ها نیاز داریم.

📌 دیگه این سه تا رو یاد بگیریم کافیه؟

❤️ تصویر: ساخته شده با جعبه‌ی جادویی آیولرن

🟢 فریمورک‌های UI چه هستند؟

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

✅ فریم‌ورک هم دقیقا همین کار رو برای ما در دنیای وب انجام میده. این یک نقشه و مجموعه ابزار آماده است که به ما کمک میکنه وب‌سایت‌ها رو سریع‌تر و با کیفیت‌تر بسازیم.

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

✔️ با بوت استرپ می‌تونی خیلی راحت دکمه‌ها، منو‌ها، جدول‌ها و خیلی چیزای دیگه رو بسازی.

❤️ تصویر: ساخته شده با جعبه‌ی جادویی آیولرن

📌 میدونی اگه فتوشاپ هم بلد باشی کجا می‌تونی ازش استفاده کنی؟

✳️ فتوشاپ یک نرم‌افزار قدرتمند برای طراحی گرافیکیه.

✅ با فتوشاپ می‌تونی طرح اولیه‌ی وب‌سایت رو بکشی و به مشتری نشون بدی.

✅ همچنین می‌تونیم المان‌های گرافیکی مثل: لوگو، بنر و ... رو طراحی کنی.

‼️ حالا چرا همه‌ی این مهارت‌ها لازمه؟

❤️ تصویر: ساخته شده با جعبه‌ی جادویی آیولرن

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

🌀 اگر شما همه‌ی این مهارت‌ها را داشته باشید، می‌توانید در بازار کار فرصت‌های شغلی بیشتری پیدا کنید.

📌 حالا متوجه شدید چرا باید رودمپ داشته باشید؟

❤️ تصویر: ساخته شده با جعبه‌ی جادویی آیولرن