چگونه فرانت اند کار شویم ? نقشه راه فرانت اند (2020) + ویدئو

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

همراهمون باشین 😉 

نقشه راه یک فرانت اند کار 

خب در اکثر مقاله ها و وبسایت ها بعد از سرچ کردن اینکه برای فرانت اند دولوپر شدن به چه مهارت هایی نیاز دارین بهتون میگن فقط html,css,javascript  رو یاد بگیرین. 

شما باید بدونید یک مسیر برای تبدیل شدن به یک فرانت اند کار چگونه است؟ در واقع در این مقاله میخوایم اجزای یک نقشه راه فرانت اند را در اختیار شما بذاریم.

درسته اما یاد گیری طراحی سایت چه در فرانت اند و چه در بک اند جزیئیات زیادی رو شامل میشه که بهتر هست در ابتدای مسیر هم با اون ها اشنایی داشته باشین.

شما برای فرانت اند باید سه زیان نشانه گذاری html و  زبان استایل دهی css و زبان برنامه نویسی javascript  رو که جزو اصول فرانت هستند اموزش ببینید و بعد از اون برید سراغ یادگیری جزئیات اون ها و یاد گیری عمیق تر.

چگونه تبدیل به یک فرانت اند کار شویم؟

یادگیری HTML

خب اول از همه باید html رو یاد بگیرین تا با استفاده از تگ های اون اسکلت و بدنه ی اصلی سایت رو پیاده سازی کنین.

در صورت تمایل می توانید آموزش رایگان و مقدماتی HTML را مشاهده کنید.

یادگیری CSS

بعد از html نوبت به یادگیری css میرسه تا به وبسایت ما زیبایی و حس زنده بودن ببخشه

و به هر قسمتی از اون که مدنظرمون هست، با استفاده از رنگ ها و فونت ها و سایه ها و غیره استایل بده.

در حال حاضر شما میتونین یک قالب استاتیک غیر رسپانسیو بسازید. استاتیک بودن به معنی نداشتن تعامل با کاربر هست.

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

در صورت تمایل می توانید دوره آموزشی رایگان CSS + مینی پروژه های کاربردی (مقدماتی) را مشاهده کنید.

یادگیری بوت استرپ (bootstrap):

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

البته در مقاله ای که راجب نقشه ی راه نوشته شد به تفصیل و با جزئیات بیشتری  نقشه ی مسیر یادگیری فرانت اند رو براتون گفتیم. حتما به این مقاله مراجعه کنین.همچین میتونین به جای بوت استرپ یا علاوه بر اون  فریمورک متیالز رو یاد بگیرین و ازش استفاده کنین.چون به وبسایت شما زیبایی منحصربه فردی رو میده.

یادگیری javascript

خب بعد از این دو قسمت نوبت میرسه به زبان برنامه نویسی جاوااسکریپت ،تو این مرحله خود جاوااسکریپت خام و مباحث فاندامنتال رو اموزش ببینین تا جلو تر برین سراغ اکما اسکریپت 6و7و8و9 و مباحث ریز تر و اساسی تر در جاوااسکریپت.

خب تا اینجای کار شما میتونین یک صفحه ی دینامیک بسازین.

دینامیک چیست؟

دینامیک بودن به این معناست که شما میتونین با کاربر تعامل داشته باشین

مثال :

به طور مثال میتونین فرم هایی که کاربر پر میکنه رو  ولیدیت کنین

و با استفاده از زبان برنامه نویسی جاوااسکریپت به طور مثال یک الگویی برای نام کاربری و رمز ورود و ایمیل تعریف کنین

که  اگر کاربری ایمیل و رمز ورود و نام کاربریی مغایر با الگوی وارد شده ی ما وارد کرد پیغام خطا بهش نمایش داده بشه

و گفته بشه که مطابق با الگوی ما فرم رو پر بکنه .

به این حرکتی که بالا گفته شد تعامل با کاربر گفته میشه که از اساسی ترین قسمت های وب سایت ها هست. 

بعد از یادگیری این مهارت ها در حد متوسط خودشون میریم سراغ یاد گیری عمیق تر و جزئی تر.

نکته ای برای فرانت اند کار ها: 

این که گفته شد بعد از یادگیری در حد متوسط این مهارت ها برین سراغ یاد گیری عمیق تر صرفا یک ایده و پیشنهاد هست و

هیچ اجبار و بایدی وجود نداره.

شاید شخصی از همون ابتدا تمام مطالبی که لازم باشه رو مو به مو اموزش ببینه و یاد بگیره

وبعد به سراغ مطلب و مهارت بعدی بره و این کاملا سلیقه ای و مطابق با سلیقه  و راحتی خود شما ست.

خب از css شروع میکنیم:

نسخه ی جدید سی اس اس ،css3 هست که حتما باید یاد بگیرین چون ماژول های به روزی رو در اختیارمون قرار میده.

شما باید ریسپنسیو سازی صفحه رو با استفاده از media query های Css یاد بگیرین

تا در مواقع لزوم با استفاده از خود Css خام هم بتونین صفحه تون رو یا بخشی از اون رو مطابق با دیوایس های مختلف (کامپویتر و تب لت و گوشی و …..)

در بیارین و به این کار ریسپانسیو کردن گفته میشه.

پس این مهارت ریسپانسیو کردن یک مهارت به شدت مهمی هست.

خب شما برای صفحه ارایی  با استفاده از خود css3 به مشکلات زیادی بر میخورین

مثال :

مثلا اگه چندین ردیف و چندین ستون تو در تو داشته باشین

قطعا در سامان دهی اون ها  و اوکی کردن حالت ریسپانسیوشون به مشکل میخورین و برای کم کردن این مشکلات و بالا بردن راندمان کاری و راحت تر بودن در کد زنی

و جلوگیری از استفاده ی بیش از اندازه از کد های Css از یک سری ماژول استفاده می کنیم.

از جمله ماژول های flexbox و css grid  که در پایین راجبشون حرف میزنیم.

flex box & css grid :

هرکدوم از این ماژول‌ها برای طراحی واکنش‌گرای صفحات به کار میرن.

Flex box:

FlexBox در طراحی‌های واکنش‌گرا (Responsive) کارایی زیادی داره؛ به طوری که  با چیدن آیتم‌ها (Flex Item) درون یک سطر یا ستون در قالب نگه‌دارنده،

به طور خودکار عناصر طراحی  با اندازه‌ی صفحه منطبق میشن

و مشکلاتی که Float و یا WhiteSpace برامون ایجاد میکردن رو از بین میبرن.

به همین ترتیب با استفاده از ماژول Flex Box می‌توان طراحی چند سطری و یا چند ستونی رو با زحمت خیلی کمتری انجام داد و بهتر اون رو مدیریت کرد.

استفاده از این ماژول ها خیلی زیاد در کیفیت کارمون و تمیز تر و حرفه ای تر بودن طراحی کمک می کنه

پس حتما بهتون پیشنهادش میکنم البته نیازی نیست هم flex box و هم  css grid  رو یاد بگیرین

یادگیری یکی از او ها کفایت میکنه چون نتیجه ی کار هر دوی اون ها تقریبا یکی هست

که البته قاعدتا  تفاوت هایی هم دارند که باهم بررسی شون میکنیم.

css grid:

css grid هم مثل فلکس باکس یک ماژول در CSS هست که به توسعه‌دهندگان وب کمک میکنه طرح‌های پیچیده واکنش‌گرا (Responsive) رو راحت‌تر پیاده‌سازی کنن.

grid این امکان را میده که هنگام طراحی صفحات وب بشه صفحه رو به بخش‌های مختلف تقسیم کرد؛ طوریکه این بخش‌ها با یکدیگر تداخل نداشته باشن.

تفاوت flex box و css grid :

یکی از تفاوت‌های اصلی Flex Box با CSS Grid در مورد بعد هست.

عناصر در صفحه‌ی وب معمولا به دو حالت تک‌بعدی و دوبعدی در نظر گرفته میشن.

مثلا منو‌یی که در سایت ها استفاده میشه رو نگاه کنین، این منو ها به عنوان یک عنصر تک بعدی شناخته میشن،

یعنی در یک مسیر یا یک جهت قرار گرفتن( مثلا فقط در جهت محور طول یا فقط در جهت محور عرض).

برای پیاده‌سازی چنین چیزی بهتره از Flex Box استفاده کنیم،

البته با CSS Grid هم این کار شدنیه  اما Flex Box با کد کمتر و کیفیت بهتر این کار رو انجام میده.

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

یعنی اِلمان‌ها در دو بعد یا دو جهت قرار گرفتن. در این حالت استفاده از CSS grid بهتر هست .

چون هم سرعت کار رو بالا میبره و هم خروجی بهتری میده.

Flex Box در واقع برگرفته از کلمه ی  Flexible Box هست که  معنی جعبه‌ی منعطف رو میده؛

به این معنی که آیتم‌ها با هر اندازه‌ای می‌تونن درونش، جا بگیرن.

این مسئله هم یکی از نقاط قوت این ابزاره و هم اینکه باعث پیچیدگی تعیین اندازه‌ی آیتم‌ها میشه.

در حالی که CSS Grid در چنین مواردی کمتر شما رو به زحمت میندازه.

یادگیری sass:

Sass یک پیش‌پردازنده  برای زبان CSS هست.

در واقع Sass محدودیت‌ها و ضعف‌های زبان CSS رو جبران کرده و با اضافه کردن فیچر ‌هایی به اون،

نوشتن کد‌های CSS را راحت‌تر و سریع‌تر کرده.

میشه گفت که Sass محبوب‌ترین و پرکاربرد ترین پیش‌پردازنده برای CSS هست.
برای اضافه کردن sass به پروژه تون فقط کافیه نرم‌افزار کامپایل کدهای Sass به CSS رو نصب کنین

و بعد به جای پسوند .css از پسوند‌های .sass و .scss برای فایل‌های استایل استفاده کنید.

Sass دو سینتکس مختلفِ sass و scss برای نوشتن کدها به این زبان در نظر گرفته که استفاده از اون ها فقط  به راحتی و سلیقه ی خودتون بر می‌گرده.

بصورت کلی میشه گفت کدها در sass خلاصه‌تر و راحت‌تر از scss نوشته میشن.

باید دقت داشته باشید که سینتکس موردنظر خودتون رو در ابتدای کار مشخص کنین.

اگر با sass راحت‌تر هستید باید پسوند فایل‌ها هم .sass باشن.

اما اگر با scss راحتید باید پسوند فایل‌ها را .scss قرار بدین.

خب بعد از یادگیری css  همراه با جزئیات و کیفیت بیشتر میریم سراغ javascript.

خب تا قبل از این مباحث فاندامنتال جاوااسکریپت رو اموزش دادیم و وقتش رسیده تا اون رو حرفه ای تر اموزش ببینیم چون نقش محوریی در فرانت اند ایفا میکنه بعد از یادگیری  جاوااسکریپت باید اکما اسکریپت 6 (2015 Ecma script) رو اموزش ببینین.

اکما اسکریپت( Ecma script):

اکما اسکریپت سینتکس نوینی رو از جاوااسکریپت در اختیارمون میذاره و استانداری از جاوااسکریپت هست.

این استاندارد سازی تا نسخه ی 9 وارد بازار شده یعنی برای یادگیری کامل جاوااسکریپت نیاز به یادگیری اکما اسکریپت تا نسخه ی 9 که در سال 2018  عرضه شد دارین.

اما باز هم این انتهای مسیر نیست.

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

فریمورک های React,Vue,Angular:

 React,Vue,Angular از معروف ترین  کتابخونه و فریمورک های جاوااسکریپت هست که باید یکی رو برای یادگیری انتخاب کنین و در اون حرفه ای بشین.

در صورت تمایل می توانید مقاله آموزش نصب ویو جی اس (Vue Js) را بخوانید.

البته اگر جاوااسکریپت رو به خوبی بلد باشین یادگیری این کتابخونه و فریمورک ها راحت تر میشن.

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

این مسیر(مسیر تخصص در زمینه ی فرانت اند) شامل جزئیات بیشتری هم هست مثل کتابخونه هایی از js که به زیبا سازی کمک میکنن،

تقویت زبان انگلیسی ، مهارت سرچ کردن ، به روز بودن و خیلی از ماژول ها و چیزهای دیگه ای هم هستن که دیگه گفتن تک تک اون ها اصلا جالب نیست.

شما اگر مسیر بالا رو طی کنین خود به خود به مابقی چیز هایی که بهشون نیاز دارین رو میتونین بفهمین و سراغشون برین.

تو این مقاله سعی کردن نقشه راه فرانت اند کار شدن رو در اخیارتون قرار بدم .

امیدوارم براتون مفید بوده باشه.روزتون خوش.