مخصوص اعضای ویژه 
آیا تا به حال به وب‌سایت مورد علاقه خود نگاه کرده‌اید و شگفت‌زده شده‌اید که چرا به این شیوه طراحی شده، چرا نحوه عملکرد دکمه‌ها وقتی که روی آن‌ها کلیک می‌کنید به این صورت است، یا هر قسمت دیگر از سایت را دیده‌اید و با خود فکر کرده‌اید "متعجبم، چطور این‌ها اینقدر پیچیده هستند؟"، یا "کاش من هم می‌توانستم این کار را انجام دهم". خوب تمام این ویژگی‌های قابل مشاهده سایت از طریق توسعه Front End انجام می‌شود و افرادی که از آن‌ها استفاده می‌کنند، توسعه‌دهنده Front End نامیده می‌شوند.
توسعه‌دهندگان Front End بیشترین تقاضای کار را دارند و به همین دلیل بدون آن‌ها نمی‌توانیم از اینترنت لذت ببریم. در اینجا یک تعریف مختصر از توسعه Front End آورده شده است.
توسعه Front End چیست؟
در حالی که طراحی وب شیوه‌ای برای ظاهر وب‌سایت است، توسعه Front End نحوه پیاده‌سازی آن طراحی در وب است.
پس، توسعه‌دهنده Front-End کیست؟
توسعه‌دهنده وب Front-End شخصی است که طراحی وب را از طریق زبان‌های کدنویسی مانند HTML، CSS و JavaScript پیاده‌سازی می‌کند. اگرچه این مورد معمول نیست، اما گاهی اوقات توسعه‌دهندگان front end "توسعه‌دهندگان سمت کلاینت" نیز نامیده می‌شوند که آن‌ها را از توسعه‌دهندگان back end که کارهای پشت صحنه مثل دیتابیس را انجام می‌دهند متمایز می‌کند. اگر به هر سایتی سر بزنید، می‌توانید کار توسعه‌دهنده front end را در هر جایی مشاهده کنید.
در این مقاله برخی از مهارت‌های اصلی که توسعه دهندگان وب front end در کار خود استفاده می‌کنند را بررسی می‌کنیم.
توسعه‌دهندگان Front-End از چه مهارت‌هایی استفاده می‌کنند؟
توسعه‌دهندگان وب Front-End از سه زبان برنامه‌نویسی اصلی برای کدگذاری وب‌سایت و طراحی برنامه‌های وب ایجاد شده توسط طراحان وب استفاده می‌کنند:
HTML
CSS
JavaScript
کدی که آن‌ها می‌نویسند در مرورگر کاربر اجرا می‌شود (کد توسعه‌دهنده back end در وب سرور اجرا می‌شود). توسعه‌دهنده Front-End مسئول ظاهر سایت است، همچنین وظیفه اطمینان از عدم وجود خطا و باگ‌ها در بخش front end را دارد و همچنین اطمینان حاصل می‌کند که طرح به شکلی که قرار است در پلت‌فرم‌ها و مرورگرهای مختلف نمایان شود، طراحی شده است.
اگر این موارد اولیه را به خوبی یاد گرفته و بر آن‌ها مسلط شوید، مطمئنا به یک توسعه‌دهنده front end خوب و عالی تبدیل می‌شوید!
شما ابتدا با مهارت‌هایی مثل HTML و CSS شروع می‌کنید، سپس به مهارت‌های پیشرفته‌تری مانند توسعه وب ریسپانسیو و جاوااسکریپت می‌روید.
HTML و CSS
HTML و CSS اساسی‌ترین عناصر سازنده کدنویسی وب هستند. بدون این دو مورد، نمی‌توانید یک طراحی وب‌سایت ایجاد کنید، و تمام آنچه که در نهایت با آن رو به رو خواهید شد، یک متن ساده فرمت‌نشده در صفحه است. شما حتی نمی‌توانید بدون HTML تصاویر را به صفحه اضافه کنید!
قبل از اینکه در هر مسیر شغلی توسعه وب قرار بگیرید، باید بر روی کدگذاری با HTML و CSS تسلط داشته باشید. خبر خوب این است که کسب دانش کافی در هر یک از این‌ها فقط در عرض چند هفته قابل انجام است.
دانش HTML و CSS به تنهایی به شما امکان ایجاد وب‌سایت‌های اساسی را می‌دهد.
جاوااسکریپت
جاوااسکریپت به شما امکان می‌دهد قابلیت‌های بیشتری به وب‌سایت خود اضافه کنید، و می‌توانید بسیاری از برنامه‌های اصلی وب را با استفاده از HTML و CSS و جاوااسکریپت (به اختصار JS) ایجاد کنید. در ابتدایی‌ترین سطح، JS برای ایجاد و کنترل مواردی مانند نقشه‌هایی که در زمان واقعی آپدیت می‌شوند، فیلم‌های تعاملی و بازی‌های آنلاین استفاده می‌شود. سایت‌هایی مانند Pinterest شدیدا از جاوااسکریپت استفاده می‌کنند تا استفاده از رابط کاربری آن‌ها آسان شود (این واقعیت که هر بار که چیزی را پین می‌کنید صفحه مجددا بارگیری نمی‌شود، به لطف جاوااسکریپت است).
جاوااسکریپت همچنین یکی از محبوب‌ترین زبان‌های برنامه‌نویسی در جهان است، بنابراین صرف نظر از برنامه‌های شغلی شما، برای یادگیری فوق‌العاده ارزشمند است.
jQuery
جی‌کوئری یک کتابخانه جاوااسکریپت است؛ مجموعه‌ای از پلاگین‌ها و افزونه‌ها که توسعه با جاوااسکریپت را سریع‌تر و آسان‌تر می‌سازد. به جای اینکه همه چیز را از ابتدا کدگذاری کنید، جی‌کوئری به توسعه‌دهنده front end اجازه می‌دهد تا عناصر آماده را به پروژه اضافه کند، سپس در صورت لزوم می‌توانید آن را سفارشی کنید (یکی از دلایل مهم جاوااسکریپت). شما می‌توانید از جی‌کوئری برای مواردی مانند تایمرهای شمارش معکوس، تکمیل فرم‌های جستجو به صورت خودکار، و حتی تنظیم مجدد خودکار و تغییر اندازه طرح‌های گرید استفاده کنید.
فریم‌ورک‌های جاواسکریپت
فریم‌ورک‌های JS (شامل AngularJS، Backbone، Ember و ReactJS) یک ساختار آماده به کد جاوااسکریپت شما می‌دهند. اگرچه چهار مورد ذکر شده محبوب‌ترین فریم‌ورک‌ها در لیست‌های شغلی هستند، اما انواع مختلفی از فریم‌ورک‌های جاوااسکریپت برای نیازهای مختلف وجود دارد. این فریم‌ورک‌ها واقعا به توسعه سرعت می‌بخشند و می‌توانند با کتابخانه‌هایی مانند جی‌کوئری مورد استفاده قرار گیرند تا میزان کدنویسی از ابتدا را به حداقل برسانند.
فریم‌ورک‌های Front End
CSS و فریم‌ورک‌های front end (محبوب‌ترین فریم‌ورک front end بوت‌استرپ است) برای CSS همان کاری را انجام می‌دهد که JS Frameworkها برای جاوااسکریپت انجام می‌دهند: آن‌ها برای کدگذاری سریع‌تر نقطه پرش شما هستند. اکثر شغل‌های مربوط به توسعه front end انتظار دارند که شما با نحوه کار و استفاده از این فریم‌ورک‌ها آشنا باشید.
تجربه کار با پیش‌پردازنده‌های CSS
پیش‌پردازنده‌ها عنصر دیگری است که توسعه‌دهنده front end می‌تواند برای سرعت بخشیدن به کدگذاری CSS استفاده کند. پیش‌پردازنده CSS قابلیت‌های اضافه‌ای را به CSS اضافه می‌کند تا CSS را مقیاس‌پذیر نگه داشته و کار با آن را راحت‌تر سازد. کد شما را قبل از انتشار در وب‌سایت‌تان پردازش کرده و آن را به CSS ای که به خوبی فرمت شده و با مرورگر سازگار است تبدیل می‌کند. SASS و LESS دو پیش‌پردازنده‌ای هستند که بسیار مورد تقاضا می‌باشند.
کار با سرویس‌های RESTful و APIs
REST مخفف Representational State Transfer است، که یک معماری سبک است که ارتباط شبکه در وب را ساده می‌کند و سرویس‌های RESTful و APIs آن دسته از سرویس‌های وب هستند که به معماری REST پایبند می‌باشند.
شاید این موضوع به نظر پیچیده و فنی بیاید، اما مجموعه ساده‌ای از دستورالعمل‌ها و روش‌ها است که انتظارات را تنظیم می‌کند تا بدانید چگونه می‌توانید با یک وب سرویس ارتباط برقرار کنید. آن‌ها همچنین باعث می‌شوند که وب سرویس عملکرد بهتر و مقیاس‌بندی بهتری داشته باشد، با اطمینان بیشتری کار کند و تغییر و اصلاح آن آسان‌تر شود.
ریسپانسیو بودن و طراحی موبایل
امروزه افراد زیادی از طریق دستگاه تلفن همراه خود به اینترنت دسترسی دارند، بنابراین جای تعجب نیست که مهارت‌های طراحی موبایل و ریسپانسیو بودن برای کارفرمایان بسیار مهم است. طراحی ریسپانسیو به این معنی است که طرح سایت (و گاهی اوقات عملکرد و محتوا) بر اساس اندازه صفحه و دستگاهی که شخص از آن استفاده می‌کند تغییر کند.
طراحی موبایل می‌تواند شامل طراحی ریسپانسیو باشد، اما همچنین شامل ایجاد طراحی‌های خاص موبایل است. گاهی اوقات تجربه‌ای که شما می‌خواهید کاربر هنگام بازدید از سایت شما از طریق رایانه داشته باشد، کاملا متفاوت از آن چیزی باشد که می‌خواهید هنگام بازدید از تلفن هوشمند ببیند و در این مورد منطقی است که سایت موبایل کاملا متفاوت باشد.
توسعه Cross-Browser
مرورگرهای مدرن در نمایش وب‌سایت‌ها کاملا خوب عمل می‌کنند، اما هنوز در نحوه تفسیر کد در پشت صحنه اختلاف وجود دارد. تا زمانی که همه مرورگرهای مدرن به خوبی با همه استانداردهای وب کار نکنند، دانستن اینکه چطور آن‌ها را بسازیم تا به شیوه‌ای که ما می‌خواهیم بر روی همه مرورگرها کار کنند یک مهارت مهم است. این همان چیزی است که توسعه cross-browser در مورد آن است.
سیستم‌های مدیریت محتوا و پلت‌فرم‌های تجارت الکترونیکی
تقریبا همه وب‌سایت‌ها بر روی سیستم مدیریت محتوا (CMS) ساخته شده‌اند. پلت‌فرم‌های تجارت الکترونیکی نوع خاصی از CMS هستند. محبوب‌ترین CMS در سراسر جهان وردپرس است که در پشت میلیون‌ها وب‌سایت قرار دارد.
دیگر CMSهای محبوبی که وجود دارد شامل Joomla، Drupal و Magento است. اگرچه دانستن این موارد به اندازه وردپرس مورد تقاضا نیست، اما می‌تواند در بین شرکت‌هایی که از این سیستم‌ها استفاده می‌کنند، یک مزیت برای محسوب شود.
تست و دیباگ کردن
این واقعیت زندگی برای توسعه‌دهنده وب front end است: باگ‌ها رخ می‌دهند. آشنایی با مراحل تست و دیباگ کردن امری حیاتی است.
Unit testing فرآیند تست بلوک‌های جداگانه سورس کد است (دستورالعمل‌هایی که می‌گوید یک وب سایت باید چطور کار کند) و فریم‌ورک‌های Unit testing روش و ساختار خاصی را برای انجام این کار ارائه می‌دهند (برای هر زبان برنامه‌نویسی موارد مختلفی وجود دارد).
نوع دیگر تست، UI testing است، که acceptance testing، browser testing و functional testing نیز نامیده می‌شود، جایی که شما بررسی می‌کنید تا مطمئن شوید وب‌سایت در حین عملیاتی که کاربر انجام می‌دهد، آن طور که باید رفتار می‌کند. می‌توانید تست‌هایی بنویسید که پس از انجام اقدامی به دنبال چیزهایی مثل یک HTML خاص در صفحه بگردد، مانند اطمینان از اینکه اگر کاربر فراموش کرد یک فیلد مورد نیاز فرم را پر کند، پیغام خطا بر روی صفحه نمایان شود.
دیباگینگ به سادگی همه باگ‌ها را پیدا می‌کند. شرکت‌های مختلف از فرآیندهای کمی متفاوت برای این کار استفاده می‌کنند، اما اگر از یکی از آن‌ها استفاده کرده باشید، به سادگی می‌توانید با موارد دیگر نیز کار کنید.
مهارت حل مسأله
اگر یک چیز وجود داشته باشد که همه توسعه‌دهندگان front end باید آن را بلد باشند، مهارت عالی حل مسأله است. از اینکه بدانید چگونه می‌توان به بهترین شکل یک طرح را پیاده‌سازی کرد، تا رفع باگ‌هایی که وجود دارند، و اینکه متوجه شوید چطور کد front end خود را بنویسید که با کد backend هماهنگ باشد. کل توسعه در مورد حل خلاقانه مسأله است.
حالا شما آماده هستید که به یک توسعه‌دهنده Front End تبدیل شوید، اما مرحله بعد چیست؟
اگر به این نتیجه رسیدید که توسعه وب Front End برایتان جالب است، احتمالا از خود می‌پرسید باید از کجا شروع کنید.
اگر می‌خواهید به عنوان توسعه‌دهنده Front End کار کنید اما نمی‌دانید که مهارت‌های لازم را از کجا کسب کنید، در جای مناسبی هستید! شما می‌توانید از آموزش رایگان HTML و CSS شروع کنید.
در این مسیر می‌توانید پایه محکمی برای دستیابی به کار توسعه‌دهنده‌ای که به دنبال آن هستید، به دست آورید. شما با مهارت‌هایی مانند HTML و CSS شروع خواهید کرد، سپس به مهارت‌های پیشرفته‌تری مانند توسعه وب ریسپانسیو، جاوااسکریپت، و غیره می‌روید.
نظرات کاربران در رابطه با این دوره