فهرست :

  • برای ورود به دنیای فرانت‎ اند از کجا شروع کنیم ؟
  • فرانت اند front end چیست ؟
  • توسعه دهنده فرانت اند چه کسی است ؟

CSS و HTML

جاوا اسکریپت JS  و JQUERY

فریم ورک Framework

  • بازار کار طراح فرانت اند ( طراح سمت کاربر )

برای ورود به دنیای فرانت‌اند از کجا شروع کنیم؟

طراحی و توسعه وب‌سایت‌ها به دو بخش کلی تقسیم می شود‌. هر بخش نیاز به دانش و تکنولوژی مربوط به خودش دارد. فرانت‌اند  (Front end) پوسته بیرونی و در مورد تمام آیتم‌هایی است که کاربر وب‌سایت با آن‌ها در ارتباط است. بک‌اند  (Back end) در مورد همه اتفاقات پشت صحنه است. تمام تکنولوژی و دانشی که باعث پویایی و راه‌اندازی وب‌سایت می‌شود در بک‌اند وجود دارد .

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

فرانت‌اند  front end چیست؟

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

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

این برنامه‌نویسی به شما کمک می‌کند به تمام محتوای یک وب‌سایت شامل ویدئو، موزیک، دکمه‌های ثبت‌نام و… دسترسی داشته باشید. مثلا برای خرید اینترنتی می‌توانید کالاهای دلخواهتان را انتخاب و تعداد آن‌ها را مشخص کنید. در نهایت با کلیک روی دکمه خرید وارد صفحه پرداخت می‌شود. بدون وجود کدهای front end هیچ جلوه تصویری معنی داری روی وب‌سایت‌ها وجود ندارد.

توسعه‌دهنده فرانت‌اند چه کسی است؟

برنامه‌نویس front end هستی یا back end؟ یکی از اولین سو‌ال‌های که طراحان وب در سمینارها و همایش‌های کاری از هم می‌پرسند.
در واقع همان‌ قدر که این دو دسته کاری باهم ارتباط دارند و نزدیک هستند، همانقدر هم ویژگی‌های متفاوت و نقاط غیرمشترک دارند. در چند خط پایین ویژگی‌ها و وظایف یک طراح سمت کاربر را باهم بررسی می‌کنیم.
فردی که وب‌سایت‌های اینترنتی را با استفاده از زبان‌های برنامه‌نویسی مشخص طراحی و آماده می‌کند، توسعه‌دهنده یا برنامه‌نویس front end نام دارد. یه طور کلی HTML، CSS و Javascript زبان‌های برنامه‌نویسی معتبری هستند که برای طراحی صفحات وب‌سایت استفاده می‌شوند. برنامه‌نویس فرانت‌اند روی دیزاین و ظاهر خارجی سایز کار می‌کند. در مقابل طراح سمت سرور یا توسعه‌دهنده بک‌اند وظیفه نوشتن کدهای سمت سرور و دیتابیس را دارد.

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

مهم‌ترین مهارت‌های فرانت‌اند

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

HTML و CSS

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

پس بیس و پایه ظاهر وب‌سایت با HTML نوشته می‌شود. CSS به منظور چیدمان المان‌ها و تنظیم رنگ، فونت و استایل آن‌ها مورد استفاده قرار می‌گیرد. بدون شک یادگیری هردوی این زبان‌ها برای یک توسعه‌دهنده وب‌سایت ضروری است.

جاوا اسکریپت یا JS و JQUERY

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

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

فریم‌ورک Framework

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

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

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

بازار کار طراح سمت کاربر

با توجه به‌ شرایط فعلی دنی، طراحان سمت کاربر یا برنامه‌نویس فرانت‌اند الان ود آینده می‌تواند جایگاه شغلی و درآمد خوبی داشته باشد. با توجه به تقاضای بالا برای طراحی و ایجاد صفحات وب، افراد بیشتری تمایل دادند در این حوضه فعالیت کنند. پیش‌بینی می‌شود تعداد طراح سمت کاربر در سال ۲۰۲۶ نسبت به سال ۲۰۱۶ رشد ۱۵ درصدی داشته باشد. بنابراین فقط افرادی که سطح دانش و تلاش بالایی دارند می‌توانند در این بازار داغ به درآمدهای بالا برسند.

در انتها توصیه می‌کنم مطالب موجود درمورد بک‌اند را از دست ندهید . Back end  و front end مکمل همدیگر هستند و به تنهایی معنایی ندارند. همچنین اگر به مطالب مرتبط با طراحی و توسعه سایت و اپلیکیشن و برنامه نویسی علاقه مند هستید می توانید با مراجعه به قسمت وبلاگ وبجار ، مقالاتی همچون 0 تا 100 وردپرس و سیستم های مدیریت محتوا را مطالعه کنید .