توسعه دهنده فرانت اند چیست ؟
- فرانت اند یک وبسایت یا یک وب اپلیکیشن، بخشی است که کاربران با آن تعامل دارند. در این بخش عناصری مانند دکمه ها، متن، منوهای کشویی، تصاویر و سر تیتر صفحات قرار دارد.
- توسعه Front-end همچنین به عنوان توسعه سمت کلاینت نیز عمل می کند. برای طراحی رابط یک وب سایت یا یک برنامه وب، در ابتدا باید HTML ، CSS ، JavaScript را یاد بگیریم.
- در ابتدای مسیر یادگیری حوزه فرانت اند، شاید احساس کنید مسیری که شروع کرده اید چالش بر انگیز خواهد بود اما هر چه پیش بروید و بیشتر یاد بگیرید متوجه خواهید شد که توسعه فرانت اند بسیار لذت بخش است.
یک توسعه دهنده فرانت اند چه کارهایی انجام می دهد ؟ آینده ی فرانت اند چگونه خواهد بود ؟
- شاید فکر کنید که یک توسعه دهنده فرانت اند فقط باید کد های کاربر محور را بنویسد. اما در ادامه این مقاله متوجه خواهید شد که کار توسعه دهنده های فرانت اند فقط کد نوشتن نیست!
- توسعه دهندگان Front-end با طراحان وب و سازندگان دیجیتال کار می کنند. توسعه دهندگان فرانت اند، تمام اطلاعات را از طراحان و ویراستاران جمع آوری می كنند. سپس با بکارگیری آن اطلاعات سایت را ایجاد می کنند.
- توسعه دهندگان فرانت اند، مسئول بهبود سرعت وبسایت نیز هستند. آن ها همچنین مسئول حفظ و نگهداری وب سایت یا برنامه های وب هستند.
- با بررسی هایی که درباره ی آینده‌ی این صنعت انجام شده است، پیش بینی کرده اند که در آینده نیاز به وب سایت های پیچیده افزایش خواهد یافت. بنابراین با افزایش نیاز، تقاضا برای توسعه دهندگان front end نیز افزایش می یابد.
گام هایی برای تبدیل شدن به یک توسعه دهنده فرانت اند:
1. یادگیری HTML
HTML مخفف زبان نشانه گذاری ابر متنی است. ما از HTML برای طراحی صفحات وب با زبان نشانه گذاری استفاده می کنیم. بیشتر زبان های نشانه گذاری توسط انسان قابل خواندن هستند. به عنوان یک توسعه دهنده front-end، باید با HTML آشنا باشید زیرا برای این صنعت یعنی طراحی وبسایت، بسیار ضروری است.
کد زیر، یک نمونه از کد های html است:
<html>
<head>
<title>Medium</title>
</head>
<body>
<h1> Frontend developer Guide </h1>
<h2> Study Hard. </h2>
</body>
</html>
خروجی کد بالا را در مرورگر خود به این شکل می بینید:
این نکته را هم یاد آوری کنم، نیازی به یادگیری کامل HTML نیست.
عنوان های ضروری که باید درhtml یاد بگیرید را آورده ایم:
- درباره عناوین، پاراگراف و جداول یاد بگیرید.
- نحوه ی قرار دادن تصاویر، فیلم ها در صفحات وب خود.
- نحوه ی ایجاد فرم ها و ادغام اعتبار سنجی های HTML 5 را یاد بگیرید.
هم رویش منتشر کرده است:
آموزش HTML5 پروژه محور و سریع __ طراحی سایت شخصی در 60 دقیقه
2. یادگیری CSS
CSS مخفف Cascading style sheet است. CSS به طراحی صفحات وب کمک می کند. از ویژگی های آن می توان گفت که CSS از یک تکنیک کد نویسی تمیز پیروی می کند. ویژگی دیگر آن، این است که می توانید از کد های CSS سایت های دیگر و یا کد هایی که قبلا خودتان نوشتید، برای طراحی صفحات دیگر استفاده کنید.
هم رویش منتشر کرده است:
آموزش CSS سریع و پروژه محور __ طراحی سایت با CSS در 60 دقیقه ChatterBot
برخی از مفاهیمی که در CSS باید یاد بگیرید:
- فونت ها و رنگ ها در CSS.
- نحوه ی استفاده از CSS با کد html ای که نوشته اید.
- عناصر مرکزی و پشت زمینه CSS.
- انتخاب گر های کلاس ها، عناصر و سراسری.
شکل کد های CSS مانند زیر است:
body{
background-color: #758AA2
}
h1{
color:#fcfcfc
}
3. جاوا اسکریپت
بر خلاف دو مورد قبلی که معرفی کردیم، جاوا اسکریپت یک زبان برنامه نویسی است. توسعه دهندگان فرانت اند و همچنین توسعه دهندگان back-end، از جاوا اسکریپت استفاده می کنند. توسعه دهندگان فرانت اند از آن برای برنامه های سمت کلاینت استفاده می کنند. توسعه دهندگان بک اند نیز از جاوا اسکریپت برای توسعه سمت سرور از آن بهره می گیرند.
با کاهش سر بار گذاری در سرور، محبوبیت جاوا اسکریپت در حال افزایش است. کد های جاوا اسکریپت بلافاصله در مرورگر سمت کلاینت اجرا می شوند. به همین علت عملکرد جاوا اسکریپت سریع است. همچنین سر بار سرور کاهش می یابد. جاوا اسکریپت تابع های رویه ای را ارائه می دهد. به همین دلیل می توانیم از حلقه ها، شرط ها و تقسیم بندی ها در صفحات وب استفاده کنیم.
موضوعاتی که باید در JavaScript با آن ها آشنا باشید:
- بلوک های جاوا اسکریپت: توابع، متغیرها و شرط ها
- آبجکت های جاوا اسکریپت، نمونه ی اولیه
- نحوه ی اضافه کردن JS به کد های HTML
- شیء گرایی در جاوا اسکریپت (OPP در جاوا اسکریپت)
- Document Object Model (DOM)
- دیباگ کردن کد جاوا اسکریپت
4. یادگیری یک فریمورک فرانت اند متفاوت
پس از یادگیری HTML ،CSS و JavaScript، گام بعدی، یادگیری یک فریمورک front-end است. فریمورک های مختلفی مانند ReactJS ، AngularJS و VueJS وجود دارد.
سعی نکنید همه ی فریمورک ها را یاد بگیرید. یکی از فریمورک ها را انتخاب کنید و شروع به یادگیری کنید. از آن جایی که با جاوا اسکریپت آشنایی دارید؛ پس یادگیری هر یک از آن ها برای شما سخت نخواهد بود. پیشنهاد ما این است که برای شروع ReactJS را انتخاب کنید. امروزه تقاضا برای ری اکت بسیار زیاد است. بسیاری از شرکت ها نیز به توسعه دهنده React نیاز دارند.
ری اکت یک کتابخانه ی فرانت اند مبتنی بر کامپوننت های منبع باز است. در فیسبوک نیز از ری اکت استفاده شده است. همچنین می توانید با آنگولار یا ویو نیز شروع کنید. در هر حالت هر دوی آن ها فریمورک های فرانت اند خوبی هستند.
با استفاده از لینک زیر نیز می توانید داکیومنت اصلی ReactJS را مطالعه کنید.
https://facebook.github.io/react/
Bootstrap
Bootstrap محبوب ترین فریمورک CSS برای توسعه وبسایت هایی با قابلیت رسپانسیو ونمایش در تلفن همراه است. در دنیای امروز، وب سایت ها برای همه ی مرورگرها از جمله Chrome و Firefox مناسب هستند. اما Bootstrap مشکل سازگاری بین مرورگرها را برطرف کرده است.
هم رویش منتشر کرده است:
آموزش بوت استرپ 4 و 5 ---- سریع و پروژه محور Bootstrap را بیاموزید!
5. ایجاد یک پروژه ی کوچک
پس از یاد گرفتن فریمورکی که انتخاب کردید، باید زمان خود را صرف ساختن یک پروژه کنید. با کمک HTML ، CSS ، JavaScript و هر کدام از فریمورک هایی که یاد گرفتید، وب سایت های جذابی طراحی کنید.
پیشنهاد چندین پروژه ی کوچک و ساده که می توانید انتخاب کنید و بسازید:
- ساخت یک ساعت در جاوا اسکریپت: می توانید در پروژه های پیچیده بعدی خود از این پروژه تمرینی استفاده کنید. با ایجاد این ساعت که خودتان طراحی کرده اید، توسعه واقعی رابط کاربری را یاد می گیرید.
- ساخت یک تو دو لیست در جاوا اسکریپت: در این برنامه یک رابط کاربری زیبا برای ذخیره کارهای روزانه ای که باید انجام دهید، ایجاد می کنید.
- ساخت یک اپلیکیشن کوئیز: در این برنامه تعدادی سوال و گزینه های پاسخ همراه با جواب درست آن ها قرار دارد. همچنین یک تایمربرای محاسبه زمان انجام آزمون توسط کاربر نیز قرار دهید. بالا ترین امتیازی که هر کاربر کسب کرده است را هم می توانید در قسمتی از صفحه نمایش دهید.
تا این مرحله، شما تمام مهارت هایی که یک توسعه دهنده front-end به آن ها نیاز دارد را یاد گرفتید. به علاوه پروژه های کوچکی نیز ایجاد کردید که نحوه استفاده از مهارت هایی که تا الان یاد گرفتید را نشان می دهد.
+ پیش از این آموزش طراحی سایت انیمیشن دار با زبان HTML و CSS در هم‌رویش منتشر شد. برای دیدن فیلم معرفی این آموزش بر روی این لینک(+) و یا پخش کننده پایین کلیک کنید:
برای دریافت بسته کامل این آموزش اینجا(+) کلیک کنید.
6. مشارکت در پروژه های منبع باز
نرم افزار اپن سورس به چه معناست؟
نرم افزاری که سورس کد برنامه در دسترس همه عموم قرار دارد. هر کسی می تواند از آن کد استفاده کند، آن را تغییر دهد و یا بهبود دهد.
چرا باید پروژه های منبع باز را بررسی کنیم ؟
با بررسی پروژه های متن باز فرانت اند، موارد فراوانی یاد می گیرید. می توانید راهنمای موارد هر پروژه را بخوانید. نحوه ی ایجاد یک پروژه در کامپیوتر خود را یاد می گیرید. نحوه ی استخراج توابع مربوطه از کد منبع را یاد می گیرید. همچنین چگونگی تنظیم و اعمال تغییرات در یک مسئله را یاد می گیرید.
مشارکت در پروژه های منبع باز باعث ایجاد سابقه برایتان می شود. این سابقه کمک می کند در شرکتی که در نظر دارید بتوانید کار خود را شروع کنید. بیشتر شرکت ها برای توسعه دهنده هایی که درپروژه های منبع باز مشارکت داشته اند ارزش قائل هستند.
مشارکت های منبع باز لذت زیادی به همراه خواهد داشت. در نظر داشته باشید که در سطح شخصی، با پروژه های فرانت اند احساس راحتی بیشتری خواهید کرد.
7. توسعه ی مهارت های نرم
خودتان شروع کننده باشید!
بزرگ ترین مهارتی که به عنوان یک مبتدی در این مسیر باید داشته باشید این است که همیشه باید سوالات درستی بپرسید. در درجه اول نیز باید به حوزه فناوری front-end علاقه مند باشید. همچنین مشتاق باشید که در این مسیر موفق بشوید.
به عنوان کسی که خودش تصمیم به شروع این مسیر داشته است، باید همیشه چند قدم جلو تر از وضعیت عادی در روند یادگیری، باشید. همیشه به فکر ایجاد ارزش برای فردی باشید که خدمت می کند. شما به عنوان یک مبتدی همیشه باید ریسک کنید. همچنین نباید کارها را به تعویق بیندازید.
مهارت های ارتباطی خوب
مهارت های ارتباطی به اندازه ی سایر مهارت های فنی مهم است. ارتباط موثر با دیگران در محل کار به رشد شما کمک می کند. ما به عنوان انسان، موجودی اجتماعی هستیم و دوست داریم همیشه افکار خود را با دیگران رد و بدل کنیم.
در صنعت، افراد مختلف مهارت های مختلفی دارند. اگر ارتباط خوبی برقرار کنید، می توانید مهارت های مختلفی را از آن ها بیاموزید. به عنوان یک توسعه دهنده فرانت اند، این صنعت از شما انتظار دارد که سریع یاد بگیرید. فناوری فرانت اند با سرعت بسیار زیادی در حال تغییر است. نباید فقط خودتان یاد بگیرید. باید از دیگران نیز که در اطراف شما هستند استفاده کنید.
با افزایش مهارت های ارتباطی، می توانید مشکلاتی که با آن ها روبرو می شوید را با دیگر توسعه دهندگان front-end در میان بگذارید و حل کنید. گاهی اوقات تنهایی فکر کردن در مورد یک مشکل می تواند دشوار باشد. بنابراین با مهارت های ارتباطی خوب همان مشکل را با تیم خود به آسانی حل کنید.
8. ساختن نمونه کار
اگر یک کار تمام وقت دارید یا یک آزادکار (Freelancer) هستید؛ در هر دو مورد، برای نشان دادن توانایی خود، باید نمونه کارهای خود را در فضای آنلاین به اشتراک بگذارید و آن ها را ارائه کنید.
تا این مرحله، حتما کار یک توسعه دهنده فرانت اند را درک کرده اید. شما باید تاکنون وب سایت های زیادی ایجاد کرده باشید. اما هنگام ایجاد نمونه کارها بصورت آنلاین، فقط باید بهترین پروژه های خود را به نمایش بگذارید. در این جا باید کیفیت را بر کمیت ترجیح دهید.
مثال:
فرض کنید شما سه وبسایت مختلف در نمونه کار آنلاین خود دارید. باید کاملا همه ی موارد مربوط به آن سه پروژه ایجاد شده را بدانید.
برای هر پروژه ای که می سازید باید یک صفحه درباره ی آن بنویسید. در آن صفحه، مواردی را که برای ساخت آن وبسایت استفاده کرده اید توضیح می دهید.
باید بیان کنید که چگونه برای حل مسئله ی خاصی که با آن روبرو هستید تلاش کردید.
برای حل مشکل از چه فناوری استفاده کردید؟ مهم ترین سوالی که در این صفحه باید پاسخ داده شود این است که از چه فریمورکی استفاده کردید و چرا؟
این کار را باید برای همه ی وبسایت هایی که قرار است به نمایش بگذارید، انجام دهید.
9. ایجاد شبکه با افراد مناسب
در پاسخ به این سوال که چگونه یک فرانت اند کار حرفه ای شویم، در بالا مهارت های فردی متعددی را برشمردیم. پس از کسب آن‌ها باید با افرادی که در این صنعت در سر تا سر دنیا هستند ارتباط برقرار کنید. یک حساب LinkedIn بسازید. افرادی که در صنعت frontend فعالیت دارند را پیدا کنید و با آن ها ارتباط برقرار کنید.
پس از ایجاد یک حساب LinkedIn، پروژه های خود را در این شبکه اجتماعی قرار دهید. چندین کارفرما در LinkedIn فعال هستند و همیشه در جستجوی کاندید ها هستند. همانطور هم که در قبل اشاره کردیم برای هر پروژه ای که می خواهید نمایش دهید باید یک صفحه درباره ی آن ایجاد کنید. آن صفحه را نیز در لینکدین به اشتراک بگذارید. همچنین مواردی که در مورد frontend یاد گرفته اید را در آن جا قرار دهید.
برای ارتباط با افراد مختلف می توانید از توییتر نیز استفاده کنید. در انجمن Stack Overflow ، Github و دیگر موارد فعال باشید. همچنین می توانید به بسیاری از زیرمجموعه هایی که توسعه دهندگان frontend را در خود دارند بپیوندید. گاهی اوقات این اعتبارات فرعی می تواند به شما در یافتن شغل یا مشتری مستقل کمک کند.
با انجام همه ی این کارها، برخی از استخدام کنندگان یا مشتری ها شما را می بینند. برای بدست آوردن مشتری های بیشتر به عنوان یک آزادکار، می توانید از سایت های آزاد موجود مانند Upwork استفاده کنید.
و در پایان
امیدوارم در پایان این مقاله این موضوع برای شما روشن تر شده باشد که برنامه نویسی فرانت اند چیست و این که چگونه یک فرانت اند کار حرفه ای شویم. در بالا مراحلی را برشمردیم که با طی کردن صبورانه آن‌ها می‌توانید به یک توسعه دهنده Frontend تبدیل شوید. پشتکار و صبوری اصل مهمی است. فراموش نکنید که باید از مسیر خود برای تبدیل شدن به یک توسعه دهنده فرانت اند لذت ببرید. زندگی مقصد نیست، بلکه یک مسیر است!
در راستای این مقاله، پیشنهاد می‌کنم مقاله زیر را مطالعه بفرمایید:
تفاوت backend و frontend __ توسعه فرانت اند و بک اند چیست ؟
کلید واژگان
برنامه نویسی فرانت اند – چگونه فرانت اند کار شویم – مراحل فرانت اند شدن – مسیر یادگیری فرانت اند – برنامه نویسی front end – توسعه دهنده فرانت اند چیست – چگونه یک فرانت اند کار حرفه ای شویم – متخصص فرانت اند – مهارت های لازم برای فرانت اند – برنامه نویسی front end چیست – front end چیست – توسعه دهنده فرانت اند چیست ؟
منبع
9 Steps Guide on How to Become a Frontend Developer in 2021
3 دیدگاه برای “چگونه فرانت اند کار شویم ؟ ___ تبدیل شدن به توسعه دهنده front end در 9 گام ”
واقعا عالی و مفید و ناب بود
همه چیز کامل توضیح داده شده بود عالی بود. ممنون
سلام. از حسن توجه شما سپاسگذاریم. خوشحالیم که هم رویش برای شما مفید بوده است