ویرگول
ورودثبت نام
محمد جواد وقاری
محمد جواد وقاری
خواندن ۴ دقیقه·۳ ماه پیش

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

خیلی ها رو میبینم که علاقه زیادی به برنامه نویسی فرانت اند دارن و از اونجایی که برنامه نویسی Front-End دنیای بزرگیه دچار سردرگمی میشدن برای انتخاب مسیر


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

با ما همراه باشید :)







1.HTML , CSS

id
id


اولین مرحله ای که همیشه ثابته تو نقشه راه یادگیری فرانت اند Html و Css هست ( البته دونستن مفاهیم وب , اینترنت توی نقشه راه قبل از همه ی اینا قرار میگیره )

اچ تی ام ال یا همون هتمل خودمون یک زبان نشانه گذاریه که مخفف Hyper Text Markup Lang و ساختار وبسایت ها رو تشکیل میده

سی اس اس ( سس ) هم مخفف Cascading Style Sheet هست و برای بر و رو دادن به ظاهر سایتمون استفاده میشه.

در کل اگر بخوایم یک وبسایت رو به یک انسان تشبیه کنیم. html میشه اسکلت. css لباس و مدل مو و ظاهر رو تشکیل میده

پس Html,Css میشه پیش نیاز اول برای یادگیری مراحل بعدی :)



2. Flex , Grid

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

همونطور که در عکس معلومه برای چیدمان های دو بعدی از گرید استفاده میکنیم.


پس اهمیت یادگیری فلکس و گرید به سهولت چیدمان و ریسپانسیو وبسایته


3.Bootstrap , Tailwind

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

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

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

تیلویند که واقعا خیلی خوبه و شخصا علاقه زیادی بهش دارم استایل دهی رو خیلی جذاب کرده و دستتون یکم بازتره نسبت به بوت استرپ. خلاصه که کار باهاش خیلی جذابه XD

پ.ن : دو تاشو یاد بگیرین خوبه

از دیگر فریمورک های Css میشه به bulma , w3,css و foundation اشاره کرد


4. JavaScript / ES6

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

تشبیه html,css به انسان رو یادتونه؟ میشه جاوا اسکریپت رو به عنوان عامل حرف زدن,حرکت کردن,تعامل و خیلی چیزای دیگه در انسان تشبیه کرد

( جاوا اسکریپت پیش نیاز فریمورک هایی مثل React , Vue , Angular , JQuery میشه

خیلیا هستن که فکر میکنن با یاد گرفتن JQuery دیگه نیازی به آموزش دیدن جاوا اسکریپت نیست ولی سخت در اشتباهند

پ.ن۲ : تایپ اسکریپت هم ارزش وقت گذاشتن و یاد گرفتن رو داره ...



5.JavaScript Freamworks (Reactjs , vue , angular ... )

ساختن یک وبسایت تعاملی با جاوا اسکریپت خام ( Vanilla.js ) شدنیه ولی در بازه های زمانی بیشتر و پروژه هایی در مقیاس های بزرگتر کارمون سخت میشه. در این شرایط استفاده از یک فریمورک انتخاب خوبیه. چون فریمورک ها در اصل برای حل مشکلات و سهولت کار درست میشن و خب یادگیریشون خیلی مفید و واجبه برای یک برنامه نویس فرانت اند

از معروف ترین فریمورک های زبان javascript میشه به انگولار.ریکت و ویو اشاره کرد که فریمورک React درصد بیشتری از بازار کار رو به خودش اختصاص داده و توسط شرکت متا ( فیسبوک سابق ) پشتیبانی میشه. انگولار هم پشتیبانی گوگل رو در اختیار داره و بین برنامه نویس های .Net استفاده بیشتری داره. Vue فریمورک جدیدتری محسوب میشه نسبت به بقیه


برای یادگیری ریکت نسبت به Vuejs نیاز به تسلط بیشتری به جاوا اسکریپت هست.

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


کار با فریمورک های SSR هم خیلی جذابه به عنوان مرحله بعد که میشه به Nuxtjs و Nextjs اشاره کرد.



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



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


بدرود :)

برنامه نویسیفرانت اندفرانتفرانت‌اندنقشه راه
توسعه دهنده مو‍بایل
شاید از این پست‌ها خوشتان بیاید