ما در طول روز و در حال وبگردی وبسایت های بسیار زیادی را مشاهده میکنیم .
همگی وبسایت ها از دو بخش بسیار مهم تشکیل شده اند :
1)فرانت اند (front-end)
2)بک اند(back-end)
همه اجزای سایت که توسط کاربر قابل مشاهده هستند قسمت front-end یک وبسایت را تشکیل میدهند.
برای مثال سایت فروشگاهی دیجی کالا را در نظر بگیرید :
اولین و مهم ترین سوالی که برای همه شما ایجاد میشه این هستش که چطور میتونیم این قالب رو به عنوان یک برنامه نویس سایت رو ایجاد بکنیم ؟
به دنیای برنامه نویسی فرانت اند خوش اومدید !
برای اینکه بهتر مفاهیم فرانت اند رو درک کنید بهتره که بدن یک انسان رو در نظر بگریرید .
پایه بدن انسان استخوان هاست و اسکلت بدن موجب قرار گرفتن اعضای بدن در کنار هم میشود .دقیقا کاری که تگ های html انجام میدهند .
پس html شباهت زیادی به اسکلت بدن انسان و tag ها شباهت زیادی به استخوان های بدن انسان دارند.
اول اینکه html (hyper text markup language) یک زبان نشانه گذاری است پس یعنی مکان المنت هارو توی یک صفحه وب نشانه گذاری میکنه .
اگر بخواهیم ساختار html و شباهت اون با اسکت بدن را مقایسه کنیم . بدن انسان از نظر تقسیم بندی منطقی به سه بخش : بالا تنه و میان تنه و پایین تنه تقسیم میشه که هر کدوم از این بخش ها شامل اجزای کوچک تر بدن میشن مثل دست و پا و چشم و .... .
دقیقا مانند تقسیمی که با html انجام میدیم : header , main , footer . و هر کدوم از این قسمت ها هم اجزای کوچک تری رو درون خودشون جای میدهند.
بعد از اینکه ترتیب و نظم چینش المنت هارو درون یک وبسایت مشخص کردیم نوبت میرسه به ظاهر المنت ها خب از اونجایی که هممون میدونیم بدن انسان بدون پوست و گوشت ظاهر خوبی به هیچ عنوان نداره برای اینکه سایت زیبا و کاربر پسندی داشته باشیم میبایست از property های css به خوبی استفاده کنیم
خب حالا که به کمک html , css تونستیم المنت هارو ایجاد کنیم و به اونها استایل های مناسب بدیم وقتش میرسه که به وبسایت روح بدیم در حقیقت java-script همون سیستم عصبی بدن انسان است که به بدن دستور انجام کار هارو میده کاربر هم با استفاده از جاوا اسکریپت به وبسابت دستور میده و وبسایت رو از حالت خشک و دو بعدی خودش خارج میکنه و اصطلاحا اون رو از حالت (web1=static) به (web2=dynamic) تغییر میده .
خب دوستان سعی کردم تا به اینجا کار یک دید کلی و سطحی از نحوه طراحی وب سایت به شما بدم تا دوستانی که در این حوزه تخصص و آشنایی لازم رو ندارند بتوانند مطلب را به سادگی درک کنند .
حالا که آشنایی نسبی پیدا کردیم بهتره به سراغ کتابخانه ها و فریم ورک های css , javascript بریم .
مهم ترین عنوان بعد از اینکه تونستیم یک قالب وبسایت رو با استفاده از html , css طراحی کنیم ریسپانسیو کردن قالب وبسایت است.
ریسپانسیو کردن یک وبسایت یعنی واکنش پذیر کردن المنت های یک سایت نسبت به view port های مختلف .توانایی ریسپانسیو کردن یک وبسایت برای یک برنامه نویس فرانت اند لازم و ضروری چون که اکثر کاربران از گوشی های موبایل خود برای وب گردی استفاده میکنن .
برای ریسپانوسیو کردن یک وبسایت حتما میباست مفاهیم flex , grid و meida-query ها رو به خوبی یاد بگیریم . که در این زمینه bootstrap یکی از فریم ورک های css خیلی میتونه با ما کمک کنه و کار رو برای ما ساده تر کنه .
بعد از اون میرسیم به انتخاب یکی از pre-processor های css به نام sass که دونستن اون باعث این میشه که با یاد گرفتن اون از تکرار کد های css جلوگیری کنیم مثلا یک رنگ یا اندازه رو داخل متغییر ذخیره میکنیم و از متغیر ها استفاده میکنیم .
و در آخر یکی از فریم ورک های java-script رو انتخاب کنیم react , angular , vue و به همراه jquery برای راحتی و سرعت در کد های javascript از اونها استفاده میکنیم.
دوستان عزیز سعی کردم در این مقاله دید کلی در باره مسیر تبدیل شدن به یک توسعه دهنده فرانت اند رو به شما بگم اما مهم ترین خصوصیت یک برنامه نویس مهارت سرچ و به روز بودن . پس فقط فراگیری تکنولوژی های ذکر شده کافی نیست و شما حتما میبایست درباره تکنولوژی های جدید تحقیق کنید و سعی کنید همیشه به روز باشید .
امیدوارم که این مقاله براتون مفید بوده باشه با آرزوی مفقیت برای تک تک شما عزیزان .
